/* ==========================================================================
   Uzm. Dr. H. Murat Bulut — Dermatoloji & Dermaestetik
   Design system · white / #42164D / gold · sharp edges only
   ========================================================================== */

/* ---------- 1. FONTS ---------------------------------------------------- */

@font-face{font-family:"Nyght Serif";src:url("../fonts/NyghtSerif-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Nyght Serif";src:url("../fonts/NyghtSerif-LightItalic.woff2") format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Nyght Serif";src:url("../fonts/NyghtSerif-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Nyght Serif";src:url("../fonts/NyghtSerif-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Nyght Serif";src:url("../fonts/NyghtSerif-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

@font-face{font-family:"Fellix";src:url("../fonts/Fellix-TRIAL-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Fellix";src:url("../fonts/Fellix-TRIAL-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fellix";src:url("../fonts/Fellix-TRIAL-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Fellix";src:url("../fonts/Fellix-TRIAL-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Fellix";src:url("../fonts/Fellix-TRIAL-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------- 2. TOKENS --------------------------------------------------- */

:root{
  /* surface */
  --white:#FFFFFF;
  --paper:#FBFAFB;
  --paper-2:#F6F3F7;

  /* purple scale, built around the brand #42164D */
  --p-950:#211D24;
  --p-900:#240B2B;
  --p-800:#31103A;
  --p-700:#42164D;          /* BRAND */
  --p-600:#57205F;
  --p-500:#6E2A7B;
  --p-400:#8C4C96;
  --p-300:#B287B9;
  --p-200:#D4BFD9;
  --p-100:#EBE0EE;
  --p-050:#F5EFF7;

  /* gold / rose-gold, pulled from the logo gradients */
  --gold:#B08A4E;
  --gold-lt:#D9BC7E;
  --gold-pale:#EFE0C4;
  --gold-dk:#8A6934;
  --rose:#C69C8A;
  --rose-lt:#E6BEAE;

  /* ink — never pure black */
  --ink:#181818;
  --ink-2:#3F3B41;
  --ink-3:#767078;
  --line:#E7E0EA;
  --line-2:#F0EBF2;
  --shade:#212121;

  /* type */
  --f-display:"Nyght Serif",'Times New Roman',serif;
  --f-body:"Fellix",-apple-system,"Helvetica Neue",Arial,sans-serif;

  /* metrics */
  --gutter:clamp(20px,4.4vw,84px);
  --nav-h:clamp(74px,7vw,102px);
  --rule:1px;
  --cell:clamp(16px,1.9vw,30px);   /* inner padding of ruled cells */

  /* motion */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.76,0,.24,1);
  --e-sharp:cubic-bezier(.85,0,.15,1);
}

/* ---------- 3. RESET ---------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box;border-radius:0 !important;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{
  background:var(--white);
  color:var(--ink);
  font-family:var(--f-body);
  font-weight:300;
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.62;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%}
picture{display:contents}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--p-700);color:#fff}

body.is-locked{overflow:hidden;touch-action:none;overscroll-behavior:none}

/* ---------- 4. TYPOGRAPHY ----------------------------------------------- */

.d1,.d2,.d3,.d4{
  font-family:var(--f-display);
  font-weight:300;
  line-height:1.12;
  letter-spacing:-.018em;
}
/* SplitText line masks clip descenders unless the wrapper is padded out */
.sp-line,[data-split] div,[data-split-p] div,[data-words] div,.svc__name div{padding-bottom:.14em}
.d1{font-size:clamp(3rem,7.6vw,9rem)}
.d2{font-size:clamp(2.4rem,5.6vw,6rem)}
.d3{font-size:clamp(2.05rem,4.3vw,4.5rem)}
.d4{font-size:clamp(1.5rem,2.5vw,2.6rem);line-height:1.1}

.serif-it{font-family:var(--f-display);font-style:italic;font-weight:300;letter-spacing:-.008em}

.eyebrow{
  font-family:var(--f-body);
  font-size:clamp(9.5px,.72vw,11.5px);
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--p-400);
  display:flex;
  align-items:center;
  gap:14px;
}
.eyebrow::before{
  content:"";width:clamp(26px,3.4vw,54px);height:var(--rule);
  background:var(--gold);flex:none;transform-origin:left;
}
.eyebrow--plain::before{display:none}

.lead{
  font-size:clamp(16px,1.22vw,20px);
  font-weight:300;
  line-height:1.58;
  color:var(--ink-2);
  max-width:52ch;
}
.small{
  font-size:clamp(12.5px,.9vw,13.5px);
  letter-spacing:.01em;
  font-weight:500;
  color:var(--ink-3);
}

.gold-text{
  background:linear-gradient(96deg,var(--gold-dk) 0%,var(--gold-lt) 34%,var(--rose-lt) 62%,var(--gold) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.plum{color:var(--p-700)}

/* ---------- 5. LAYOUT --------------------------------------------------- */

.wrap{padding-inline:var(--gutter)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2vw,32px)}
.section{position:relative;padding-block:clamp(88px,11vw,180px)}
.hr{height:var(--rule);background:var(--line);width:100%;transform-origin:left}

.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:clamp(36px,4.4vw,72px)}
.sec-idx{font-family:var(--f-body);font-size:11px;letter-spacing:.28em;color:var(--p-300);font-weight:500}

/* ---------- 6. REVEAL PRIMITIVES ---------------------------------------- */

.line-mask{display:block;overflow:hidden}
.split-line{overflow:hidden;display:block}
[data-fade]{opacity:0}
[data-clip]{clip-path:inset(0 0 100% 0)}

/* ---------- 7. CURSOR --------------------------------------------------- */

.cursor{
  position:fixed;top:0;left:0;z-index:9000;pointer-events:none;
  width:44px;height:44px;margin:-22px 0 0 -22px;
  border:var(--rule) solid var(--p-700);
  mix-blend-mode:normal;
  transition:opacity .3s;
  opacity:0;
}
.cursor__dot{
  position:fixed;top:0;left:0;z-index:9001;pointer-events:none;
  width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:var(--gold);opacity:0;
}
.cursor__label{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:9px;letter-spacing:.2em;font-weight:600;text-transform:uppercase;
  color:#fff;opacity:0;
}
html.has-cursor .cursor,html.has-cursor .cursor__dot{opacity:1}
html.has-cursor *{cursor:none !important}

/* ---------- 8. PRELOADER ------------------------------------------------ */

.loader{
  position:fixed;inset:0;z-index:9500;background:var(--white);
  display:grid;place-items:center;
}
.loader__inner{width:min(560px,74vw);text-align:center}
.loader__logo{width:100%;opacity:0}
.loader__bar{position:relative;height:var(--rule);background:var(--line);margin-top:34px;overflow:hidden}
.loader__fill{position:absolute;inset:0;background:linear-gradient(90deg,var(--p-700),var(--gold));transform:scaleX(0);transform-origin:left}
.loader__meta{display:flex;justify-content:space-between;margin-top:12px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3)}
.loader__curtain{position:fixed;inset:0;z-index:9499;background:var(--p-700);transform:scaleY(0);transform-origin:bottom}

/* ---------- 9. HEADER --------------------------------------------------- */

.hdr{
  position:fixed;top:0;left:0;right:0;z-index:800;
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--gutter);
  transition:background .5s var(--e-out),box-shadow .5s var(--e-out);
}
.hdr::after{
  content:"";position:absolute;left:var(--gutter);right:var(--gutter);bottom:0;
  height:var(--rule);background:var(--line);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--e-out);
}
.hdr.is-stuck{background:rgba(255,255,255,.86);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}
.hdr.is-stuck::after{transform:scaleX(1)}
.hdr.is-hidden{transform:translateY(-101%);transition:transform .55s var(--e-io),background .5s}

.hdr__logo{display:block;flex:none}
.hdr__logo img{height:clamp(26px,2.5vw,34px);width:auto;transition:opacity .4s}
.hdr__logo .mark{display:none;height:clamp(30px,3.4vw,38px)}
.hdr__logo:hover img{opacity:.62}

.nav{display:flex;align-items:center;gap:clamp(20px,2.5vw,44px)}
.nav__link{
  position:relative;font-size:13.5px;font-weight:500;letter-spacing:.01em;
  overflow:hidden;display:block;height:1.7em;line-height:1.7;
}
.nav__link span{display:block;line-height:1.7;transition:transform .55s var(--e-io)}
.nav__link span:last-child{position:absolute;top:100%;left:0;color:var(--p-700)}
.nav__link:hover span{transform:translateY(-100%)}

.hdr__cta{
  display:inline-flex;align-items:center;gap:10px;
  border:var(--rule) solid var(--p-700);
  padding:13px 22px;font-size:13px;letter-spacing:.01em;font-weight:500;
  position:relative;overflow:hidden;color:var(--p-700);
}
.hdr__cta span{position:relative;z-index:2;transition:color .5s var(--e-io)}
.hdr__cta::before{
  content:"";position:absolute;inset:0;background:var(--p-700);
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--e-io);z-index:1;
}
.hdr__cta:hover::before{transform:scaleY(1)}
.hdr__cta:hover span{color:#fff}

.burger{display:none;width:46px;height:46px;position:relative;border:var(--rule) solid var(--line);flex:none}
.burger i{position:absolute;left:13px;width:20px;height:1px;background:var(--ink);transition:transform .45s var(--e-io),opacity .3s}
.burger i:nth-child(1){top:19px}
.burger i:nth-child(2){top:26px}
body.menu-open .burger i:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

/* mobile menu */
.menu{
  position:fixed;inset:0;z-index:790;background:var(--white);
  padding:calc(var(--nav-h) + 28px) var(--gutter) 40px;
  display:flex;flex-direction:column;justify-content:space-between;
  clip-path:inset(0 0 100% 0);pointer-events:none;
}
body.menu-open .menu{pointer-events:auto}
.menu__list li{overflow:hidden;border-bottom:var(--rule) solid var(--line-2)}
/* No initial transform here: GSAP resolves a percentage CSS transform into
   absolute px (yPercent stays 0), so animating yPercent would never move it.
   The hidden start state is set from JS instead — see initHeader(). */
.menu__list a{
  display:block;padding:16px 0;font-family:var(--f-display);font-weight:300;
  font-size:clamp(2.1rem,9.4vw,3.4rem);line-height:1.14;letter-spacing:-.018em;
}
.menu__foot{display:grid;gap:6px;font-size:13px;color:var(--ink-2)}
.menu__foot a{display:block}

/* ---------- 10. BUTTONS ------------------------------------------------- */

.btn{
  --bg:var(--p-700);--fg:#fff;
  position:relative;display:inline-flex;align-items:center;gap:14px;
  padding:19px 30px;overflow:hidden;
  font-size:13px;font-weight:500;letter-spacing:.01em;
  color:var(--fg);isolation:isolate;
}
.btn::before{content:"";position:absolute;inset:0;background:var(--bg);z-index:-2}
.btn::after{
  content:"";position:absolute;inset:0;background:var(--gold);z-index:-1;
  transform:translateY(101%);transition:transform .55s var(--e-io);
}
.btn:hover::after{transform:translateY(0)}
.btn__arrow{width:16px;height:8px;position:relative;overflow:hidden;flex:none}
.btn__arrow::before,.btn__arrow::after{
  content:"";position:absolute;top:50%;left:0;width:100%;height:1px;background:currentColor;
  transition:transform .5s var(--e-io);
}
.btn__arrow::after{transform:translateX(-110%)}
.btn:hover .btn__arrow::before{transform:translateX(110%)}
.btn:hover .btn__arrow::after{transform:translateX(0)}

.btn--ghost{--bg:transparent;--fg:var(--ink);border:var(--rule) solid var(--ink)}
.btn--ghost:hover{color:#fff}
.btn--ghost::after{background:var(--p-700)}

.link-u{position:relative;display:inline-block;padding-bottom:3px}
.link-u::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:var(--rule);background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--e-io);
}
.link-u:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- 11. HERO ---------------------------------------------------- */

.hero{position:relative;padding-top:calc(var(--nav-h) + clamp(18px,4vw,56px));padding-bottom:0;min-height:100svh;display:flex;flex-direction:column}
.hero__grid{flex:1;align-content:center;padding-bottom:clamp(20px,2.6vw,42px)}
.hero__copy{grid-column:1/8;display:flex;flex-direction:column;gap:clamp(22px,2.4vw,34px)}
/* Nyght Serif carries long ascenders (Ş cedilla) and descenders (g, ü).
   The line masks need real room or neighbouring lines clip each other. */
.hero__title{font-size:clamp(2.7rem,6.4vw,7.3rem);line-height:1.1}
.hero__title .l{display:block;overflow:hidden;padding-bottom:.22em;margin-bottom:-.16em}
.hero__title .l>span{display:block}
.hero__title .indent{padding-left:clamp(0px,4.4vw,92px)}
.hero__actions{display:flex;align-items:center;gap:clamp(16px,2vw,30px);flex-wrap:wrap}

.hero__media{grid-column:8/13;position:relative;align-self:stretch;min-height:clamp(320px,42vw,620px)}
.hero__frame{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 0 100% 0)}
.hero__frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.24)}
.hero__frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(66,22,77,.06),rgba(66,22,77,.24))}
.hero__badge{
  position:absolute;left:-1px;top:-1px;z-index:3;
  background:var(--white);padding:14px 18px 15px;border-right:var(--rule) solid var(--line);border-bottom:var(--rule) solid var(--line);
}
.hero__caption{
  position:absolute;right:0;bottom:-1px;z-index:3;background:var(--white);
  padding:14px 0 0 18px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
}

.hero__bar{
  border-top:var(--rule) solid var(--line);
  display:flex;align-items:stretch;flex-wrap:wrap;
}
.hero__stat{
  /* symmetric inner padding on every cell; only the outer edges sit flush
     with the page gutter, so each column reads the same distance from its rule */
  padding:var(--cell);
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  flex:1 1 0;min-width:200px;
  border-right:var(--rule) solid var(--line);
}
.hero__stat:first-child{padding-left:0}
.hero__stat:last-child{border-right:0;padding-right:0}
.hero__stat b{font-family:var(--f-display);font-size:clamp(16px,1.32vw,21px);font-weight:400;letter-spacing:-.008em;line-height:1.24}
.hero__stat i{font-style:normal;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);line-height:1.4}

.scroll-cue{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3)}
.scroll-cue i{display:block;width:1px;height:34px;background:var(--line);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;inset:0;background:var(--p-700);animation:cue 2.1s var(--e-io) infinite}
@keyframes cue{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}

/* ---------- 12. MARQUEE ------------------------------------------------- */

.marquee{
  position:relative;overflow:hidden;
  border-top:var(--rule) solid var(--line);border-bottom:var(--rule) solid var(--line);
  padding-block:clamp(16px,1.7vw,26px);background:var(--paper);
}
.marquee__track{display:flex;width:max-content;will-change:transform}
.marquee__item{
  display:flex;align-items:center;gap:clamp(24px,3vw,52px);padding-right:clamp(24px,3vw,52px);
  font-family:var(--f-display);font-weight:300;letter-spacing:-.008em;
  font-size:clamp(1.5rem,3.2vw,3.1rem);line-height:1;white-space:nowrap;color:var(--p-700);
}
.marquee__item em{font-style:italic;text-transform:none;color:var(--gold)}
.marquee__dot{width:7px;height:7px;background:var(--gold);flex:none;transform:rotate(45deg)}

/* ---------- 13. ABOUT --------------------------------------------------- */

.about__media{grid-column:1/6;position:relative}
.about__img{position:relative;overflow:hidden;aspect-ratio:4/5;clip-path:inset(0 0 100% 0)}
.about__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.18)}
.about__stamp{
  position:absolute;right:calc(-1 * clamp(14px,2vw,40px));bottom:clamp(24px,4vw,60px);z-index:3;
  background:var(--p-700);color:#fff;
  padding:clamp(20px,2.1vw,30px);width:clamp(186px,18vw,250px);
}
.about__stamp b{display:block;font-family:var(--f-display);font-weight:300;font-size:clamp(18px,1.7vw,25px);line-height:1.14;letter-spacing:-.012em}
.about__stamp span{display:block;margin-top:9px;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-lt)}

.about__body{grid-column:7/13;display:flex;flex-direction:column;gap:clamp(24px,2.6vw,40px);align-self:center}
.about__p{font-size:clamp(15.5px,1.12vw,18.5px);line-height:1.72;color:var(--ink-2);max-width:56ch}
.about__p strong{font-weight:500;color:var(--ink)}
.about__sign{
  display:flex;align-items:center;gap:18px;
  padding-top:clamp(20px,2.2vw,32px);border-top:var(--rule) solid var(--line);
}
.about__sign img{width:clamp(34px,3.4vw,46px);flex:none}
.about__sign b{display:block;font-family:var(--f-display);font-weight:400;font-size:clamp(16px,1.3vw,20px);letter-spacing:-.008em;line-height:1.3}
.about__sign i{display:block;margin-top:3px;font-style:normal;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}

.about__list{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.about__list li{padding:16px 0;border-top:var(--rule) solid var(--line-2);display:flex;gap:12px;align-items:baseline;font-size:13.5px;color:var(--ink-2)}
.about__list li::before{content:"";width:5px;height:5px;background:var(--gold);flex:none;transform:rotate(45deg);translate:0 -2px}

/* ---------- 14. MANIFESTO ----------------------------------------------- */

.manifesto{background:var(--paper);border-top:var(--rule) solid var(--line);border-bottom:var(--rule) solid var(--line)}
.manifesto__q{
  grid-column:2/12;font-family:var(--f-display);font-weight:300;
  font-size:clamp(1.55rem,3.75vw,4.05rem);line-height:1.12;letter-spacing:-.018em;text-align:center;
}
.manifesto__q .w{display:inline-block;overflow:hidden;vertical-align:top}
.manifesto__q .w>span{display:inline-block}
.manifesto__q em{font-style:italic}
.manifesto__mark{grid-column:1/13;display:grid;place-items:center;margin-bottom:clamp(24px,3vw,44px)}
.manifesto__mark img{width:clamp(46px,4.6vw,68px);opacity:.9}
.manifesto__by{grid-column:1/13;text-align:center;margin-top:clamp(26px,3vw,46px)}

/* ---------- 15. SERVICES ------------------------------------------------ */

.svc{position:relative}
.svc__list{border-top:var(--rule) solid var(--line)}
.svc__row{
  position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:clamp(18px,3vw,54px);
  padding:clamp(26px,3.1vw,48px) 0;
  border-bottom:var(--rule) solid var(--line);
  overflow:hidden;
}
.svc__row::before{
  content:"";position:absolute;inset:0;background:var(--p-700);
  transform:scaleY(0);transform-origin:bottom;transition:transform .62s var(--e-io);z-index:0;
}
.svc__row>*{position:relative;z-index:2}
.svc__num{
  font-family:var(--f-body);font-size:11px;letter-spacing:.22em;font-weight:500;color:var(--p-300);
  transition:color .5s var(--e-io);
}
.svc__main{
  display:flex;flex-direction:column;gap:14px;align-items:flex-start;
  transition:transform .62s var(--e-io);
}
.svc__name{
  font-family:var(--f-display);font-weight:300;letter-spacing:-.018em;
  font-size:clamp(1.8rem,4.2vw,4.05rem);line-height:1.06;
  transition:color .5s var(--e-io),transform .62s var(--e-io);
}
.svc__desc{font-size:14.5px;line-height:1.66;color:var(--ink-3);max-width:46ch;transition:color .5s var(--e-io),opacity .5s}
.svc__icon{width:clamp(38px,4vw,58px);height:clamp(38px,4vw,58px);flex:none;
  background:var(--p-700);
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
  transition:background .5s var(--e-io),transform .7s var(--e-out);
}
.svc__side{display:flex;align-items:center;gap:clamp(14px,2vw,30px);transition:transform .62s var(--e-io)}
.svc__plus{width:16px;height:16px;position:relative;flex:none;opacity:.35;transition:opacity .5s,transform .6s var(--e-io)}
.svc__plus::before,.svc__plus::after{content:"";position:absolute;background:currentColor}
.svc__plus::before{left:0;top:50%;width:100%;height:1px;margin-top:-.5px}
.svc__plus::after{top:0;left:50%;height:100%;width:1px;margin-left:-.5px}

@media (hover:hover){
  .svc__row:hover::before{transform:scaleY(1)}
  .svc__row:hover .svc__main{transform:translateX(clamp(14px,2.2vw,34px))}
  .svc__row:hover .svc__name{color:#fff}
  .svc__row:hover .svc__desc{color:var(--p-200)}
  .svc__row:hover .svc__num{color:var(--gold-lt)}
  .svc__row:hover .svc__icon{background:var(--gold-lt);transform:rotate(-8deg) scale(1.06)}
  .svc__row:hover .svc__plus{opacity:1;color:#fff;transform:rotate(90deg)}
  .svc__row:hover .svc__side{transform:translateX(clamp(-34px,-2.2vw,-14px))}
}

.svc__peek{
  position:fixed;top:0;left:0;z-index:700;width:clamp(210px,17vw,300px);aspect-ratio:3/4;
  pointer-events:none;overflow:hidden;opacity:0;will-change:transform;
}
.svc__peek img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.svc__peek img.is-on{opacity:1}

/* ---------- 16. SMOOTH SCROLL HERO (clip-path expand) ------------------- */

.ssh{position:relative;width:100%;background:var(--white)}
.ssh__sticky{position:sticky;top:0;height:100svh;width:100%;background:var(--white);overflow:hidden;will-change:clip-path}
/* The zoom-out is a transform on a cover-sized layer rather than an animated
   background-size: a percentage size only scales the width, so on a tall
   phone viewport a landscape photo left empty bands top and bottom. */
.ssh__zoom{position:absolute;inset:0;will-change:transform}
.ssh__bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.ssh__bg--m{display:none}
.ssh__scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(118% 76% at 50% 46%,rgba(33,29,36,.74) 0%,rgba(33,29,36,.48) 56%,rgba(33,29,36,.2) 100%),
    linear-gradient(180deg,rgba(33,29,36,.6) 0%,rgba(45,32,50,.5) 45%,rgba(66,22,77,.84) 100%);
}
.ssh__over{
  position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;color:#fff;padding-inline:var(--gutter);
}
.ssh__over .eyebrow{color:var(--gold-lt);justify-content:center}
.ssh__over .eyebrow::before{background:var(--gold-lt)}
.ssh__title{font-size:clamp(2rem,5.4vw,6rem);margin-top:22px;text-shadow:0 2px 34px rgba(33,29,36,.4)}
/* the overlay lives inside the clipped window, so the copy has to stay
   narrower than the window is at the point it fades in */
.ssh__sub{margin-top:26px;max-width:min(44ch,62vw);color:rgba(255,255,255,.94);font-size:clamp(14.5px,1.05vw,17px);text-shadow:0 1px 20px rgba(33,29,36,.55)}
.ssh__rule{width:1px;height:clamp(40px,6vw,90px);background:linear-gradient(180deg,transparent,var(--gold-lt));margin-top:clamp(24px,3vw,44px)}

/* ---------- 17. GALLERY ------------------------------------------------- */

.gal__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.2vw,20px)}
.gal__item{position:relative;overflow:hidden;background:var(--paper-2)}
.gal__item:nth-child(1){grid-column:1/7;aspect-ratio:16/11}
.gal__item:nth-child(2){grid-column:7/10;aspect-ratio:3/4}
.gal__item:nth-child(3){grid-column:10/13;aspect-ratio:3/4}
.gal__item:nth-child(4){grid-column:1/5;aspect-ratio:3/4}
.gal__item:nth-child(5){grid-column:5/9;aspect-ratio:3/4;align-self:end}
.gal__item:nth-child(6){grid-column:9/13;aspect-ratio:16/11;align-self:end}

.gal__figure{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 0 100% 0)}
.gal__zoom{position:absolute;inset:0;transition:transform 1.05s var(--e-out)}
.gal__figure img{width:100%;height:100%;object-fit:cover}
.gal__item::after{
  content:"";position:absolute;inset:9px;border:var(--rule) solid rgba(255,255,255,.55);z-index:3;
  opacity:0;transform:scale(1.03);transition:opacity .5s var(--e-out),transform .6s var(--e-out);pointer-events:none;
}
.gal__veil{
  position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(33,29,36,0) 34%,rgba(40,26,46,.62) 100%);
  opacity:0;transition:opacity .55s var(--e-out);
}
.gal__meta{
  position:absolute;left:0;bottom:0;z-index:4;padding:clamp(14px,1.5vw,22px);
  color:#fff;display:flex;flex-direction:column;gap:4px;
  transform:translateY(14px);opacity:0;transition:transform .6s var(--e-out),opacity .5s;
}
.gal__meta b{font-family:var(--f-display);font-size:clamp(16px,1.4vw,22px);font-weight:400;letter-spacing:-.008em;line-height:1.2}
.gal__meta span{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-lt)}
.gal__no{
  position:absolute;right:0;top:0;z-index:4;padding:clamp(12px,1.3vw,18px);
  font-size:10px;letter-spacing:.2em;color:#fff;opacity:0;transition:opacity .5s;
}
@media (hover:hover){
  .gal__item:hover .gal__zoom{transform:scale(1.07)}
  .gal__item:hover::after{opacity:1;transform:scale(1)}
  .gal__item:hover .gal__veil{opacity:1}
  .gal__item:hover .gal__meta{transform:translateY(0);opacity:1}
  .gal__item:hover .gal__no{opacity:.75}
}

/* ---------- 18. LIGHTBOX ------------------------------------------------ */

.lb{position:fixed;inset:0;z-index:9200;display:none}
.lb.is-open{display:block}
.lb__bg{position:absolute;inset:0;background:var(--white);transform:scaleY(0);transform-origin:bottom}
.lb__grain{position:absolute;inset:0;opacity:.5;background:var(--paper);mix-blend-mode:multiply}
.lb__stage{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(96px,14vh,150px) clamp(66px,10vw,170px)}
.lb__figure{position:relative;max-width:100%;max-height:100%;opacity:0}
.lb__clip{display:block;overflow:hidden;clip-path:inset(0 0 100% 0)}
.lb__figure img{max-width:100%;max-height:calc(100svh - clamp(196px,28vh,300px));width:auto;height:auto;object-fit:contain}
.lb__figure::after{content:"";position:absolute;inset:-10px;border:var(--rule) solid var(--gold);pointer-events:none;opacity:.55}

.lb__top{position:absolute;left:0;right:0;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:clamp(18px,2.4vw,34px) var(--gutter);border-bottom:var(--rule) solid var(--line)}
.lb__count{font-family:var(--f-display);font-size:clamp(14px,1.3vw,20px);letter-spacing:.02em}
.lb__count b{font-weight:400}
.lb__count i{font-style:normal;color:var(--p-300);margin-inline:6px}
.lb__close{display:flex;align-items:center;gap:12px;font-size:13px;letter-spacing:.01em;font-weight:500;color:var(--p-700)}
.lb__x{position:relative;width:16px;height:16px;flex:none}
.lb__x::before,.lb__x::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;background:currentColor;transition:transform .45s var(--e-io)}
.lb__x::before{transform:rotate(45deg)}
.lb__x::after{transform:rotate(-45deg)}
.lb__close:hover .lb__x::before{transform:rotate(135deg)}
.lb__close:hover .lb__x::after{transform:rotate(45deg)}

.lb__cap{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:clamp(16px,2vw,28px) var(--gutter);border-top:var(--rule) solid var(--line)}
.lb__cap b{font-family:var(--f-display);font-weight:400;font-size:clamp(15px,1.4vw,22px);letter-spacing:-.008em;line-height:1.25}
.lb__cap span{display:block;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.lb__thumbs{display:flex;gap:8px}
.lb__thumb{width:clamp(40px,3.4vw,54px);aspect-ratio:1;overflow:hidden;opacity:.32;transition:opacity .4s;position:relative}
.lb__thumb img{width:100%;height:100%;object-fit:cover}
.lb__thumb.is-on{opacity:1}
.lb__thumb.is-on::after{content:"";position:absolute;inset:0;border:var(--rule) solid var(--gold)}

.lb__nav{
  position:absolute;top:50%;z-index:6;width:clamp(44px,4vw,60px);height:clamp(44px,4vw,60px);
  translate:0 -50%;display:grid;place-items:center;border:var(--rule) solid var(--line);
  background:var(--white);transition:background .45s var(--e-io),border-color .45s;
}
.lb__nav--prev{left:clamp(10px,1.6vw,26px)}
.lb__nav--next{right:clamp(10px,1.6vw,26px)}
.lb__nav svg{width:16px;height:10px;stroke:var(--ink);fill:none;stroke-width:1;transition:stroke .45s}
.lb__nav:hover{background:var(--p-700);border-color:var(--p-700)}
.lb__nav:hover svg{stroke:#fff}

/* ---------- 19. CONTACT ------------------------------------------------- */

.ct__head{grid-column:1/13;margin-bottom:clamp(30px,3.4vw,56px)}
.ct__info{grid-column:1/6;display:flex;flex-direction:column}
.ct__row{padding:clamp(18px,1.9vw,26px) 0;border-top:var(--rule) solid var(--line);display:grid;grid-template-columns:clamp(88px,9vw,132px) 1fr;gap:16px;align-items:baseline}
.ct__row:last-child{border-bottom:var(--rule) solid var(--line)}
.ct__k{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--p-300);font-weight:500}
.ct__v{font-size:clamp(14.5px,1.06vw,17px);color:var(--ink);line-height:1.5}
.ct__v a{display:inline-block}
.ct__v .tel{font-family:var(--f-display);font-size:clamp(17px,1.55vw,24px);letter-spacing:-.01em;display:block}
.ct__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(24px,2.6vw,40px)}

.ct__map{grid-column:6/13;position:relative;min-height:clamp(300px,38vw,540px);overflow:hidden;border:var(--rule) solid var(--line)}
.ct__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.06) brightness(1.03);transition:filter .8s var(--e-out)}
.ct__map:hover iframe{filter:grayscale(0) contrast(1) brightness(1)}
.ct__map__tag{
  position:absolute;left:0;top:0;z-index:3;background:var(--white);padding:12px 18px;
  border-right:var(--rule) solid var(--line);border-bottom:var(--rule) solid var(--line);
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--p-700);font-weight:600;
}

/* ---------- 20. FOOTER -------------------------------------------------- */

.ft{background:var(--p-700);color:#fff;position:relative;overflow:hidden}
.ft__top{padding-block:clamp(52px,6vw,96px);display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2vw,32px);align-items:start}
.ft__brand{grid-column:1/6;display:flex;flex-direction:column;gap:22px}
.ft__brand img{width:clamp(220px,26vw,380px)}
.ft__brand p{color:rgba(255,255,255,.62);font-size:14px;max-width:38ch}
.ft__col{grid-column:span 2;display:flex;flex-direction:column;gap:12px}
.ft__col:first-of-type{grid-column:7/9}
.ft__col h4{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-lt);font-weight:600;margin-bottom:6px}
.ft__col a,.ft__col span{font-size:13.5px;color:rgba(255,255,255,.72);transition:color .4s}
.ft__col a:hover{color:#fff}
.ft__big{
  font-family:var(--f-display);font-weight:300;letter-spacing:-.022em;line-height:1;
  font-size:clamp(1.6rem,5.35vw,6.4rem);color:rgba(255,255,255,.1);
  padding-bottom:clamp(6px,1vw,18px);white-space:nowrap;user-select:none;
}
.ft__bar{
  border-top:var(--rule) solid rgba(255,255,255,.16);
  padding-block:22px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.5);
}
.ft__bar a{color:rgba(255,255,255,.72)}
.ft__bar a:hover{color:var(--gold-lt)}
.ft__credit{display:flex;align-items:center;gap:10px}
.ft__credit img{height:14px;width:auto;filter:brightness(0) invert(1);opacity:.6;transition:opacity .4s}
.ft__credit:hover img{opacity:1}

.to-top{
  position:fixed;right:var(--gutter);bottom:clamp(20px,3vw,38px);z-index:750;
  width:50px;height:50px;display:grid;place-items:center;background:var(--p-700);color:#fff;
  opacity:0;pointer-events:none;transition:opacity .45s var(--e-out),background .45s;
}
.to-top.is-on{opacity:1;pointer-events:auto}
.to-top:hover{background:var(--gold)}
.to-top svg{width:14px;height:16px;stroke:currentColor;fill:none;stroke-width:1}

/* ---------- 21. FLOATING WHATSAPP / CALL -------------------------------- */

.quick{position:fixed;left:var(--gutter);bottom:clamp(20px,3vw,38px);z-index:750;display:flex;gap:0;opacity:0;pointer-events:none;transition:opacity .45s}
.quick.is-on{opacity:1;pointer-events:auto}
.quick a{
  display:flex;align-items:center;gap:10px;padding:14px 18px;background:var(--white);
  border:var(--rule) solid var(--line);border-right:0;
  font-size:12.5px;letter-spacing:.01em;font-weight:500;color:var(--p-700);
  transition:background .4s var(--e-io),color .4s;
}
.quick a:last-child{border-right:var(--rule) solid var(--line)}
.quick a:hover{background:var(--p-700);color:#fff}
.quick svg{width:14px;height:14px;fill:currentColor;flex:none}

/* ---------- 22. RESPONSIVE ---------------------------------------------- */

@media (max-width:1180px){
  .hero__copy{grid-column:1/13}
  .hero__media{grid-column:1/13;min-height:clamp(280px,52vw,440px);margin-top:clamp(24px,4vw,44px)}
  .about__media{grid-column:1/7}
  .about__body{grid-column:7/13}
  .ct__info{grid-column:1/13}
  .ct__map{grid-column:1/13;margin-top:clamp(26px,3vw,44px)}
  .ft__brand{grid-column:1/13}
  .ft__col:first-of-type{grid-column:1/5}
  .ft__col{grid-column:span 4;margin-top:34px}
}

@media (max-width:900px){
  .nav,.hdr__cta{display:none}
  .burger{display:block}
  .about__media,.about__body{grid-column:1/13}
  .about__body{margin-top:clamp(48px,7vw,72px)}
  .about__stamp{right:0}
  .manifesto__q{grid-column:1/13}
  .gal__grid{gap:8px}
  .gal__item:nth-child(1){grid-column:1/13;aspect-ratio:16/10}
  .gal__item:nth-child(2){grid-column:1/7;aspect-ratio:3/4}
  .gal__item:nth-child(3){grid-column:7/13;aspect-ratio:3/4}
  .gal__item:nth-child(4){grid-column:1/7;aspect-ratio:3/4}
  .gal__item:nth-child(5){grid-column:7/13;aspect-ratio:3/4}
  .gal__item:nth-child(6){grid-column:1/13;aspect-ratio:16/10}
  .svc__icon{display:none}
  .hero__stat{border-right:0;min-width:50%;padding-right:0}
  .hero__stat:last-child{text-align:left;align-items:flex-start}
  /* the badge eats too much of the image at this width — the caption carries it */
  .hero__badge{display:none}
  .lb__thumbs{display:none}
  .hdr__logo .full{display:none}
  .hdr__logo .mark{display:block}
  .quick{left:0;right:0;bottom:0;justify-content:stretch}
  .quick a{flex:1;justify-content:center;border-bottom:0}
  /* the fixed call/WhatsApp bar sits over the page — keep the footer clear of it */
  .ft__bar{padding-bottom:76px}
  .to-top{display:none}
  .ft__col{grid-column:span 6}
}

@media (max-width:620px){
  .svc__row{grid-template-columns:1fr;gap:12px}
  .svc__num{width:auto}
  .svc__side{display:none}
  .about__list{grid-template-columns:1fr}
  .ct__row{grid-template-columns:1fr;gap:8px}
  .hero__title .indent{padding-left:0}
  .lb__stage{padding:clamp(70px,11vh,100px) 18px clamp(90px,13vh,120px)}
  .lb__nav{width:38px;height:38px}
  .ssh__bg--d{display:none}
  .ssh__bg--m{display:block}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  [data-fade]{opacity:1 !important}
  [data-clip],.hero__frame,.about__img,.gal__figure{clip-path:none !important}
}