/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --ivory:#F6F2EA;
  --ivory-2:#F0EAE0;
  --ivory-3:#EAE3D6;
  --white:#FCFAF5;
  --ink:#141312;
  --ink-soft:#3A3733;
  --muted:#6E6659;      /* body-level secondary text — AA on ivory */
  --label:#7C7365;      /* uppercase micro-labels */
  --line:#E0D8CB;
  --line-soft:#EAE3D7;
  --sand:#C8BCA9;       /* decorative rules & dots ONLY — too light for text */
  --accent:#967F65;

  --f-display:'Cormorant Garamond', 'Times New Roman', serif;
  --f-ui:'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.6,.05,.2,1);
  /* A pen moves at a fairly even speed and stops when the stroke ends. The
     old curve reached 92% of the path in the first half of its duration and
     then spent the remaining 55% crawling through the last tenth — a peak
     3.35x its own average speed followed by a visible stall, five times in a
     row. This one peaks at 1.48x and gives the last tenth 23% of the time:
     still a settle at the end of each letter, without the lurch-and-crawl. */
  --ease-pen:cubic-bezier(.2,.1,.5,.9);

  --pad:clamp(20px, 5vw, 90px);
  --maxw:1440px;
  --nav-h:clamp(64px,7.4vw,78px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--f-ui);
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.is-locked{overflow:hidden;height:100vh}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ink);color:var(--ivory)}

/* ============================================================
   ATMOSPHERE
   ============================================================ */
.atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.blob{position:absolute;width:62vmax;height:62vmax;filter:blur(72px);opacity:.62;
  will-change:transform;transform:translateZ(0);backface-visibility:hidden}
.blob-1{top:-18vmax;left:-14vmax;border-radius:58% 42% 38% 62% / 45% 55% 45% 55%;
  background:radial-gradient(circle at 40% 40%, rgba(196,182,161,.82), rgba(196,182,161,0) 68%);
  animation:drift-a 30s var(--ease-soft) infinite alternate}
.blob-2{bottom:-24vmax;right:-18vmax;border-radius:36% 64% 60% 40% / 62% 38% 62% 38%;
  background:radial-gradient(circle at 60% 50%, rgba(168,146,122,.5), rgba(168,146,122,0) 68%);
  animation:drift-b 38s var(--ease-soft) infinite alternate}
.blob-3{top:36%;left:42%;width:44vmax;height:44vmax;border-radius:64% 36% 45% 55% / 38% 62% 38% 62%;
  background:radial-gradient(circle at 50% 50%, rgba(255,253,250,.95), rgba(255,253,250,0) 70%);
  animation:drift-c 34s var(--ease-soft) infinite alternate;opacity:.7}
/* transform-only: the blurred texture is cached once and merely moved */
@keyframes drift-a{from{transform:translate3d(0,0,0) rotate(0deg) scale(1)}
                   to  {transform:translate3d(5vw,-4vh,0) rotate(140deg) scale(1.14)}}
@keyframes drift-b{from{transform:translate3d(0,0,0) rotate(0deg) scale(1.06)}
                   to  {transform:translate3d(-4vw,3vh,0) rotate(-120deg) scale(.94)}}
@keyframes drift-c{from{transform:translate3d(0,0,0) rotate(0deg) scale(.96)}
                   to  {transform:translate3d(3vw,4vh,0) rotate(160deg) scale(1.1)}}
.grain{position:fixed;inset:-6%;z-index:1;pointer-events:none;opacity:.10;
  will-change:transform;transform:translateZ(0);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation:grainshift 8s steps(6) infinite}
@keyframes grainshift{
  0%{transform:translate3d(0,0,0)}16%{transform:translate3d(-14px,-19px,0)}33%{transform:translate3d(17px,-11px,0)}
  50%{transform:translate3d(-8px,16px,0)}66%{transform:translate3d(12px,7px,0)}83%{transform:translate3d(-17px,-6px,0)}
  100%{transform:translate3d(0,0,0)}
}
/* nothing behind the loader is visible — don't pay for it */
body:not(.loaded) .blob,body:not(.loaded) .grain{animation-play-state:paused}

/* ============================================================
   LAYOUT
   ============================================================ */
.page{position:relative;z-index:2}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.wrap-n{max-width:1160px;margin:0 auto;padding-inline:var(--pad)}
section{position:relative;padding-block:clamp(84px,12vw,180px)}

/* alternating warm bands — never pure white */
.band-w{background:
  linear-gradient(180deg, rgba(253,251,248,0) 0%, var(--white) 7%, var(--white) 93%, rgba(253,251,248,0) 100%)}
.band-i{background:
  linear-gradient(180deg, rgba(237,231,220,0) 0%, var(--ivory-3) 9%, var(--ivory-3) 91%, rgba(237,231,220,0) 100%)}
.band-w::after,.band-i::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);opacity:.5}

.eyebrow{font-size:11.5px;font-weight:400;letter-spacing:.32em;text-transform:uppercase;color:var(--label);
  display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:38px;height:1px;background:var(--sand);display:block;transform-origin:left}
.reveal.in .eyebrow::before{animation:lineIn 1s var(--ease) .1s both}
@keyframes lineIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}

h1,h2,h3,h4{font-family:var(--f-display);font-weight:300;margin:0;letter-spacing:-.01em;line-height:1.06;
  overflow-wrap:break-word}
p,li,span,a{overflow-wrap:break-word}
.h-xl{font-size:clamp(40px,7.6vw,120px)}
.h-lg{font-size:clamp(34px,5.4vw,80px)}
.h-md{font-size:clamp(26px,3.2vw,46px)}
.italic{font-style:italic;color:var(--accent)}
p{margin:0 0 1.2em}
.lede{font-size:clamp(17px,1.5vw,21px);color:var(--ink-soft);font-weight:300;line-height:1.75;max-width:60ch}
.small{font-size:14px;color:var(--muted);letter-spacing:.02em;line-height:1.72}

/* ============================================================
   REVEALS
   ============================================================ */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1.15s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.09s}
.reveal[data-delay="2"]{transition-delay:.18s}
.reveal[data-delay="3"]{transition-delay:.27s}
.reveal[data-delay="4"]{transition-delay:.36s}

.split .word{display:inline-block;overflow:hidden;vertical-align:top;padding:.18em 0 .42em;margin:-.18em 0 -.42em}
.split .word > i{display:inline-block;font-style:inherit;transform:translateY(185%);transition:transform 1.05s var(--ease)}
.split.in .word > i{transform:translateY(0)}

/* ============================================================
   PRELOADER — handwriting
   ============================================================ */
#loader{position:fixed;inset:0;z-index:200;background:var(--ivory);display:grid;place-items:center;
  transition:transform 1.05s var(--ease) .15s, opacity .7s ease .45s}
#loader.done{transform:translateY(-101%);opacity:.85;pointer-events:none}
.load-mark{width:min(190px,40vw);color:var(--ink);will-change:transform;transform:translateZ(0)}
#writeMask path{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1 1.04;stroke-dashoffset:1;will-change:stroke-dashoffset}
#writeMask circle{transform-box:fill-box;transform-origin:center;transform:scale(0)}
/* One hand, one speed. The paths measure 2171, 2285, 2010 and 4696 units, so
   each duration is its own length at about 5200 units a second and the pen
   crosses every letter at the same rate. The old durations were set by eye
   and the strokes ran at visibly different speeds. Each one now starts 60ms
   after the last lands — a pen lift — instead of overlapping by 200ms, which
   only read as a stutter now that the strokes no longer fade out early. */
.writing #writeMask .s1{animation:draw .42s var(--ease-pen) .08s forwards}
.writing #writeMask .s2{animation:draw .44s var(--ease-pen) .56s forwards}
.writing #writeMask .s3{animation:draw .39s var(--ease-pen) 1.06s forwards}
.writing #writeMask .s4{animation:pop .28s var(--ease) 1.42s forwards}
.writing #writeMask .s5{animation:draw .90s var(--ease-pen) 1.52s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.load-bar{position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--ink);
  transform:scaleX(0);transform-origin:0 50%;will-change:transform}
/* The bar used to run 2.9s while the writing finished at 2.66s, and the
   loader did not leave until 3.05s — four tenths of a second of a finished
   logo sitting still. The bar now lands with the last stroke. */
.writing .load-bar{animation:bar 2.42s var(--ease-soft) forwards}
@keyframes bar{to{transform:scaleX(1)}}

/* ============================================================
   PROGRESS
   ============================================================ */
#prog{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--ink);z-index:120;
  transform:scaleX(0);transform-origin:0 50%;will-change:transform;transition:transform .12s linear}

/* ============================================================
   NAV
   ============================================================ */
header{position:fixed;top:0;left:0;right:0;z-index:100;border-bottom:1px solid transparent;
  transition:background .5s var(--ease),backdrop-filter .5s,border-color .5s,transform .5s var(--ease)}
header.stuck{background:rgba(246,242,236,.78);backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);border-bottom-color:var(--line)}
header.hide{transform:translateY(-100%)}
.nav{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:24px;min-width:0}
.brand{display:flex;align-items:center;gap:13px;min-width:0}
.brand svg{width:34px;flex:0 0 auto;color:var(--ink);transition:transform .6s var(--ease)}
.brand:hover svg{transform:rotate(-6deg) scale(1.06)}
.brand-txt{font-family:var(--f-display);font-size:clamp(14px,1.15vw,16.5px);letter-spacing:.06em;
  white-space:nowrap;line-height:1.1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.brand-txt span{display:block;font-family:var(--f-ui);font-size:8.6px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--muted);margin-top:2px}

.menu{display:flex;align-items:center;gap:clamp(14px,1.9vw,34px);min-width:0}
.menu a{font-size:clamp(10.5px,.85vw,12px);letter-spacing:.14em;text-transform:uppercase;position:relative;
  padding:6px 0;color:var(--ink-soft);white-space:nowrap;display:flex;align-items:center;gap:7px}
.menu a.ig-link .ig{width:14px;height:14px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;
  transition:transform .5s var(--ease),color .4s}
.menu a.ig-link:hover .ig{transform:rotate(-8deg) scale(1.12);color:var(--accent)}
.menu a::after{content:"";position:absolute;left:0;bottom:2px;height:1px;width:100%;background:var(--ink);
  transform:scaleX(0);transform-origin:right;transition:transform .55s var(--ease)}
.menu a:hover::after{transform:scaleX(1);transform-origin:left}

.nav-right{display:flex;align-items:center;gap:clamp(10px,1.1vw,16px);flex:0 0 auto}
.lang{display:flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:3px;background:rgba(255,255,255,.5)}
.lang button{font-size:11px;letter-spacing:.1em;padding:5px 10px;border-radius:999px;color:var(--muted);
  transition:color .4s,background .4s}
.lang button.on{background:var(--ink);color:var(--ivory)}
.burger{display:none;width:40px;height:40px;position:relative}
.burger i{position:absolute;left:9px;right:9px;height:1.4px;background:var(--ink);transition:transform .5s var(--ease)}
.burger i:nth-child(1){top:16px}
.burger i:nth-child(2){bottom:16px}
body.menu-open .burger i:nth-child(1){transform:translateY(3.3px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){transform:translateY(-3.3px) rotate(-45deg)}

#overlay{position:fixed;inset:0;z-index:99;background:var(--ivory);overflow-y:auto;
  clip-path:circle(0% at calc(100% - 40px) 40px);transition:clip-path .85s var(--ease);
  display:flex;flex-direction:column;justify-content:center;padding:calc(var(--nav-h) + 24px) var(--pad) 40px}
body.menu-open #overlay{clip-path:circle(150% at calc(100% - 40px) 40px)}
#overlay nav{display:flex;flex-direction:column;gap:4px}
#overlay nav a{font-family:var(--f-display);font-size:clamp(28px,7.4vw,52px);line-height:1.22;
  opacity:0;transform:translateY(26px);transition:opacity .6s var(--ease),transform .7s var(--ease);
  display:flex;align-items:center;gap:14px}
#overlay nav a .ig{width:.62em;height:.62em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;color:var(--sand)}
body.menu-open #overlay nav a{opacity:1;transform:none}
body.menu-open #overlay nav a:nth-child(1){transition-delay:.24s}
body.menu-open #overlay nav a:nth-child(2){transition-delay:.30s}
body.menu-open #overlay nav a:nth-child(3){transition-delay:.36s}
body.menu-open #overlay nav a:nth-child(4){transition-delay:.42s}
body.menu-open #overlay nav a:nth-child(5){transition-delay:.48s}
#overlay .ov-foot{margin-top:40px;display:flex;flex-wrap:wrap;gap:22px;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ============================================================
   HERO
   ============================================================ */
.hero{min-height:100svh;display:grid;place-items:center;text-align:center;padding-top:var(--nav-h);overflow:hidden}
.hero-inner{position:relative;width:100%}
.hero-mark{width:min(400px,60vw);margin:0 auto clamp(34px,3.8vw,48px);color:var(--ink);
  opacity:0;transform:scale(.97);will-change:transform}
.loaded .hero-mark{animation:markIn 1.4s var(--ease) .15s forwards}
@keyframes markIn{to{opacity:1;transform:scale(1)}}
.hero h1{margin-bottom:16px}
.hero .eyebrow{justify-content:center;margin-bottom:clamp(18px,2.6vw,30px)}
.hero .eyebrow::before{display:none}
.hero-sub{max-width:46ch;margin:0 auto;color:var(--ink-soft);font-size:clamp(15.5px,1.35vw,18.5px);line-height:1.8}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:clamp(30px,4vw,48px)}
.btn-solid{background:var(--ink);color:var(--ivory);border-radius:999px;padding:15px 30px;font-size:11.5px;
  letter-spacing:.18em;text-transform:uppercase;position:relative;overflow:hidden;isolation:isolate;
  transition:color .5s;display:inline-block;border:0;cursor:pointer}
.btn-solid::before{content:"";position:absolute;inset:0;background:var(--accent);z-index:-1;
  transform:translateY(101%);transition:transform .55s var(--ease)}
.btn-solid:hover::before{transform:translateY(0)}
.btn-ghost{border:1px solid var(--line);border-radius:999px;padding:15px 30px;font-size:11.5px;
  letter-spacing:.18em;text-transform:uppercase;transition:border-color .4s,background .4s;display:inline-block}
.btn-ghost:hover{border-color:var(--ink);background:rgba(255,255,255,.55)}
.scroll-cue{position:absolute;left:50%;bottom:clamp(22px,4vh,46px);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;font-size:10px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--label)}
.scroll-cue .rail{width:1px;height:52px;background:var(--line);position:relative;overflow:hidden}
.scroll-cue .rail::after{content:"";position:absolute;top:-100%;left:0;width:1px;height:100%;background:var(--ink);
  animation:drop 2.1s var(--ease-soft) infinite}
@keyframes drop{0%{top:-100%}60%,100%{top:100%}}

/* ============================================================
   MARQUEE
   ============================================================ */
/* The band is decorative (aria-hidden) and nothing in it is clickable, so it
   ignores the pointer completely: no pause on hover, no text selection, no
   drag. Hovering used to stop the track, and a stray text-drag made it look
   as though the strip had jumped back to the beginning. */
.marquee{border-block:1px solid var(--line);padding-block:clamp(16px,2vw,26px);overflow:hidden;
  background:linear-gradient(90deg,var(--ivory-2),var(--white),var(--ivory-2));--dur:52s;
  pointer-events:none;user-select:none;-webkit-user-select:none}
.mq-track{display:flex;width:max-content;animation:mq var(--dur) linear infinite}
.mq-track span{font-family:var(--f-display);font-size:clamp(22px,3.1vw,42px);padding-inline:clamp(18px,2.6vw,38px);
  white-space:nowrap;color:var(--ink);opacity:.86;display:flex;align-items:center;gap:clamp(18px,2.6vw,38px)}
.mq-track span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--sand);display:block}
@keyframes mq{to{transform:translateX(-50%)}}

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(34px,6vw,96px);
  align-items:start}
.portrait{position:relative;aspect-ratio:4/5;margin-top:6px;border-radius:2px;overflow:hidden;
  background:linear-gradient(155deg,#EFEAE1 0%,#E4DCCF 42%,#D6CBB8 100%);
  box-shadow:0 40px 90px -50px rgba(20,19,18,.4)}
.portrait::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.72), rgba(255,255,255,0) 60%)}
.portrait .ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;z-index:2;
  color:var(--muted);font-size:11px;letter-spacing:.24em;text-transform:uppercase;padding:20px}
.portrait .ph svg{width:120px;opacity:.16;color:var(--ink);margin:0 auto 16px}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%;z-index:3}
.pill-float{position:absolute;right:-14px;bottom:26px;z-index:4;background:var(--ivory);border:1px solid var(--line);
  border-radius:999px;padding:12px 20px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
  box-shadow:0 20px 40px -26px rgba(20,19,18,.5);animation:float 5.5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.creds{list-style:none;margin:clamp(26px,3.4vw,40px) 0 0;padding:0;border-top:1px solid var(--line)}
.creds li{padding:17px 0;border-bottom:1px solid var(--line);display:flex;gap:18px;align-items:baseline}
.creds li b{font-family:var(--f-ui);font-weight:400;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--label);min-width:74px}
.creds li span{font-size:15.5px;color:var(--ink-soft)}

/* ============================================================
   SERVICES
   ============================================================ */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;
  margin-bottom:clamp(38px,5vw,70px)}
.sec-head .h-lg{max-width:16ch}
.grp-label{display:flex;align-items:center;gap:16px;margin:clamp(30px,4vw,52px) 0 clamp(16px,2vw,24px);
  font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--label)}
.grp-label::after{content:"";flex:1;height:1px;background:var(--line)}
.grp-label:first-of-type{margin-top:0}

.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:transparent;
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.svc{background:var(--white);padding:clamp(26px,3vw,40px);position:relative;overflow:hidden;isolation:isolate;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  min-height:clamp(168px,15vw,208px);display:flex;flex-direction:column;justify-content:flex-end;
  transition:color .6s var(--ease);cursor:pointer;text-align:left}
.band-i .svc{background:var(--ivory-2)}
.svc::before{content:"";position:absolute;inset:0;background:var(--ink);z-index:-1;
  transform:translateY(100%);transition:transform .7s var(--ease)}
.svc:hover,.svc:focus-visible{color:var(--ivory);outline:none}
.svc:hover::before,.svc:focus-visible::before{transform:translateY(0)}
.svc-num{position:absolute;top:clamp(24px,3vw,36px);left:clamp(26px,3vw,40px);
  font-size:11px;letter-spacing:.24em;color:var(--label);transition:color .6s}
.svc:hover .svc-num,.svc:focus-visible .svc-num{color:rgba(247,244,239,.62)}
.svc h3{font-size:clamp(21px,2.15vw,29px);line-height:1.18;transition:transform .6s var(--ease)}
.svc-desc{font-size:14px;line-height:1.72;max-width:36ch;color:rgba(247,244,239,.86);
  max-height:0;opacity:0;transform:translateY(8px);overflow:hidden;
  transition:max-height .65s var(--ease),opacity .5s var(--ease),transform .6s var(--ease),margin-top .65s var(--ease);
  margin-top:0}
.svc:hover .svc-desc,.svc:focus-visible .svc-desc{max-height:9em;opacity:1;transform:none;margin-top:14px}
.svc-arrow{position:absolute;top:clamp(24px,3vw,36px);right:clamp(26px,3vw,40px);opacity:0;
  transform:translate(-8px,8px);transition:opacity .5s var(--ease),transform .5s var(--ease);font-size:17px;line-height:1}
.svc:hover .svc-arrow,.svc:focus-visible .svc-arrow{opacity:1;transform:none}
/* body contouring sits last and reads smaller than the other groups */
.svc-grid.sm{grid-template-columns:repeat(4,1fr)}
.svc-grid.sm .svc{min-height:clamp(112px,10vw,148px);
  padding:clamp(46px,4.6vw,60px) clamp(18px,2.1vw,28px) clamp(18px,2.1vw,28px)}
.svc-grid.sm .svc h3{font-size:clamp(16px,1.5vw,21px);line-height:1.22}
.svc-grid.sm .svc-desc{font-size:12.8px;line-height:1.62;max-width:32ch}
.svc-grid.sm .svc:hover .svc-desc,.svc-grid.sm .svc:focus-visible .svc-desc{max-height:8em;margin-top:10px}
.svc-grid.sm .svc-num{font-size:10px;top:clamp(16px,1.9vw,22px);left:clamp(18px,2.1vw,28px)}
.svc-grid.sm .badge-soon{top:clamp(15px,1.8vw,21px);right:clamp(18px,2.1vw,28px);font-size:8.5px;padding:3px 8px}
.svc-grid.sm .svc-arrow{top:clamp(16px,1.9vw,22px);right:clamp(18px,2.1vw,28px);font-size:15px}
.svc.soon{cursor:default}
.svc.soon .svc-arrow{display:none}
.svc.soon::before{background:var(--ink-soft)}
.badge-soon{position:absolute;top:clamp(24px,3vw,36px);right:clamp(26px,3vw,40px);font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--label);border:1px solid var(--line);
  border-radius:999px;padding:4px 10px;transition:color .6s,border-color .6s}
.svc.soon:hover .badge-soon{color:rgba(247,244,239,.75);border-color:rgba(247,244,239,.3)}

/* ============================================================
   QUOTE
   ============================================================ */
.quote{text-align:center}
.quote blockquote{margin:0 auto;max-width:min(1060px,90vw)}
.quote blockquote h2{line-height:1.16}
.quote .mark{width:64px;margin:0 auto clamp(26px,3.4vw,42px);color:var(--sand);opacity:.5}
.quote cite{display:block;margin-top:clamp(24px,3vw,38px);font-style:normal;font-size:11.5px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--label)}

/* ============================================================
   CLOSING CTA BAND
   ============================================================ */
.cta-band{text-align:center}
.cta-band .mark{width:56px;margin:0 auto clamp(24px,3vw,38px);color:var(--sand);opacity:.55}
.cta-band .lede{margin:clamp(18px,2vw,26px) auto clamp(30px,3.6vw,44px);max-width:52ch;text-align:center}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,90px)}
.ct-body{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(38px,5vw,80px);
  align-items:start;padding-block:clamp(34px,4vw,58px);border-top:1px solid var(--line)}
.ct-body .info{margin-top:0}
.ct-body .info li:first-child{border-top:0;padding-top:0}

.info{list-style:none;margin:clamp(28px,3.6vw,44px) 0 0;padding:0}
.info li{padding:20px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:104px 1fr;gap:18px;align-items:baseline}
.info li:last-child{border-bottom:1px solid var(--line)}
.info b{font-family:var(--f-ui);font-weight:400;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--label)}
.info a,.info span{font-size:16px;color:var(--ink-soft);position:relative;line-height:1.6}
.info a::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:100%;background:var(--ink-soft);
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.info a:hover::after{transform:scaleX(1);transform-origin:left}

/* ============================================================
   LOGO STORY  (home, under the hero)
   ============================================================ */
.story{position:relative;overflow:hidden;text-align:center;
  min-height:calc(100svh - var(--nav-h));display:flex;align-items:center;justify-content:center;
  padding-block:clamp(36px,4vh,60px)}
.story-inner{position:relative;z-index:2;max-width:min(880px,92vw);margin:0 auto;width:100%;
  padding:clamp(16px,2.2vw,32px) clamp(12px,2.2vw,32px)}
.story-mark{position:absolute;left:50%;top:50%;z-index:1;pointer-events:none;color:var(--ink);opacity:.062;
  /* the mask is rasterised at this small size and scaled up by the compositor —
     ~5x less pixel work per frame, invisible at 6% opacity */
  width:340px;height:auto;
  transform:translate3d(-50%,-50%,0) scale(1);transform-origin:50% 50%;
  will-change:transform;backface-visibility:hidden}
.story .eyebrow{justify-content:center;margin-bottom:12px}
.story .eyebrow::before{display:none}
.story h2{margin-bottom:clamp(16px,1.9vw,26px);font-size:clamp(27px,3.8vw,54px)}
.story p{font-size:clamp(13.6px,1.02vw,15px);line-height:1.66;color:var(--ink-soft);margin:0 0 .8em;
  text-wrap:pretty}
.story p:last-child{margin-bottom:0}
#writeMask2 path{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1 1.04;stroke-dashoffset:1;will-change:stroke-dashoffset}
#writeMask2 circle{transform-box:fill-box;transform-origin:center;transform:scale(0)}
/* Same hand as the loader, drawn more slowly because this one is a watermark
   you catch out of the corner of your eye: the same lengths at ~2650 units a
   second, each stroke following the last rather than overlapping it. */
.story.drawn #writeMask2 .s1{animation:draw .82s var(--ease-pen) .10s forwards}
.story.drawn #writeMask2 .s2{animation:draw .86s var(--ease-pen) 1.00s forwards}
.story.drawn #writeMask2 .s3{animation:draw .76s var(--ease-pen) 1.94s forwards}
.story.drawn #writeMask2 .s4{animation:pop .34s var(--ease) 2.67s forwards}
.story.drawn #writeMask2 .s5{animation:draw 1.77s var(--ease-pen) 2.78s forwards}

/* ============================================================
   CV PAGE
   ============================================================ */
.cv-sec{margin-top:clamp(30px,3.2vw,48px)}
.cv-sec:first-child{margin-top:0}
.p-content .cv-sec > h2{font-family:var(--f-display);font-weight:600;
  font-size:clamp(23px,2.3vw,32px);line-height:1.24;letter-spacing:-.015em;color:var(--ink);
  margin:0 0 clamp(14px,1.5vw,20px);padding:clamp(13px,1.4vw,18px) 0 0;
  border-top:2px solid var(--ink);border-bottom:0}
.p-content .cv-sec > h2::before{display:none}
.cv-count{font-family:var(--f-ui);font-weight:400;font-size:11px;letter-spacing:.18em;color:var(--label);
  margin-left:12px;vertical-align:middle}

.cv-time{list-style:none;margin:0;padding:0}
.cv-time li{display:grid;grid-template-columns:1fr 180px;gap:18px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--line-soft)}
.cv-time li:last-child{border-bottom:0}
.cv-time b{display:block;font-family:var(--f-display);font-weight:600;font-size:clamp(17px,1.6vw,21px);
  line-height:1.26;letter-spacing:0;color:var(--ink);margin-bottom:3px}
.cv-time span{font-size:14.6px;color:var(--ink-soft);line-height:1.55}
.cv-time em{font-style:normal;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--label);text-align:right;white-space:nowrap}

.cv-list{list-style:none;margin:0;padding:0}
.cv-list li{position:relative;padding:9px 0 9px 28px;font-size:15px;line-height:1.66;
  color:var(--ink-soft);border-bottom:1px solid var(--line-soft)}
.cv-list li:last-child{border-bottom:0}
.cv-list li::before{content:"";position:absolute;left:4px;top:1.15em;width:9px;height:1px;background:var(--sand)}

.cv-cite{list-style:none;margin:0;padding:0;counter-reset:c}
.cv-cite li{counter-increment:c;position:relative;padding:11px 0 11px 44px;
  font-size:14.3px;line-height:1.62;color:var(--ink-soft);border-bottom:1px solid var(--line-soft)}
.cv-cite li:last-child{border-bottom:0}
.cv-cite li::before{content:counter(c,decimal-leading-zero);position:absolute;left:0;top:12px;
  font-family:var(--f-ui);font-size:11px;letter-spacing:.1em;color:var(--sand)}
.cv-cite b{font-weight:400;color:var(--ink);border-bottom:1px solid var(--line)}

.cv-talks{list-style:none;margin:0;padding:0}
.cv-talks > li{padding:12px 0;border-bottom:1px solid var(--line-soft)}
.cv-talks > li:last-child{border-bottom:0}
.cv-talks .ev{font-family:var(--f-display);font-weight:600;font-size:clamp(16px,1.45vw,18.5px);
  line-height:1.28;color:var(--ink)}
.cv-talks ul{list-style:none;margin:6px 0 0;padding:0}
.cv-talks ul li{position:relative;padding:3px 0 3px 22px;font-size:14px;line-height:1.6;color:var(--muted)}
.cv-talks ul li::before{content:"";position:absolute;left:2px;top:1.15em;width:9px;height:1px;background:var(--sand)}

.cv-jump{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.cv-jump button{display:block;width:100%;text-align:left;padding:11px 0;font-size:14.5px;color:var(--muted);
  border-bottom:1px solid var(--line-soft);transition:color .4s var(--ease),padding-left .4s var(--ease)}
.cv-jump button:last-child{border-bottom:0}
.cv-jump button:hover{color:var(--ink);padding-left:8px}
.cv-jump button span{float:right;font-size:11px;letter-spacing:.1em;color:var(--sand)}

.about-cv{display:inline-block;margin-top:clamp(24px,3vw,36px);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;border-bottom:1px solid var(--sand);padding-bottom:5px;
  transition:color .4s,border-color .4s}
.about-cv:hover{color:var(--accent);border-color:var(--accent)}
.about-cv em{font-style:normal;margin-left:8px;transition:transform .4s var(--ease);display:inline-block}
.about-cv:hover em{transform:translate(3px,-3px)}

@media (max-width:700px){
  .cv-time li{grid-template-columns:1fr;gap:6px}
  .cv-time em{text-align:left}
}

/* ============================================================
   END LIST  (contact items at the foot of the home page)
   ============================================================ */
.endlist{list-style:none;margin:clamp(38px,4.6vw,64px) auto 0;padding:0;
  max-width:820px;text-align:left;border-top:1px solid var(--line)}
.endlist li{border-bottom:1px solid var(--line)}
.endlist li > *{display:grid;grid-template-columns:150px minmax(0,1fr) 24px;gap:20px;align-items:baseline;
  padding:22px 6px;transition:padding-left .45s var(--ease),background .45s var(--ease)}
.endlist a:hover{padding-left:16px;background:rgba(255,255,255,.4)}
.endlist b{font-family:var(--f-ui);font-weight:400;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--label)}
.endlist span{font-size:16.5px;color:var(--ink-soft);line-height:1.6}
.endlist em{font-style:normal;color:var(--sand);font-size:16px;text-align:right;
  transition:transform .45s var(--ease),color .4s}
.endlist a:hover em{transform:translate(3px,-3px);color:var(--accent)}
.endlist .kvkk-row span{color:var(--ink)}

/* ============================================================
   PROCEDURE PAGE
   ============================================================ */

.p-hero{padding-top:calc(var(--nav-h) + clamp(48px,7vw,100px));padding-bottom:clamp(18px,2vw,30px);position:relative}
.crumbs{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--label)}
.crumbs a{position:relative}
.crumbs a:hover{color:var(--ink)}
.crumbs em{font-style:normal;color:var(--sand)}
.crumbs span{color:var(--ink-soft)}
.p-hero h1{margin:clamp(20px,2.6vw,34px) 0 clamp(18px,2.2vw,28px);font-size:clamp(38px,6.4vw,92px)}
.p-hero .lede{max-width:64ch}
.p-mark{position:absolute;right:calc(var(--pad) - 10px);top:calc(var(--nav-h) + 20px);width:clamp(120px,16vw,230px);
  color:var(--ink);opacity:.055;pointer-events:none}

.p-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(38px,5vw,80px);
  align-items:start;padding-block:clamp(34px,4vw,58px);border-top:1px solid var(--line)}
.p-content{max-width:72ch}
.p-content h2{font-size:clamp(25px,2.9vw,40px);margin:clamp(42px,4.6vw,68px) 0 clamp(16px,1.6vw,24px);position:relative}
.p-content h2:first-child{margin-top:0}
.p-content h2::before{content:"";position:absolute;left:-26px;top:.62em;width:14px;height:1px;background:var(--sand)}
.p-content p{font-size:17px;line-height:1.85;color:var(--ink-soft)}
.p-content a.xref{border-bottom:1px solid var(--sand);color:var(--ink);transition:border-color .4s,color .4s}
.p-content a.xref:hover{border-color:var(--ink);color:var(--accent)}
.p-list{list-style:none;margin:0 0 1.6em;padding:0}
.p-list li{position:relative;padding:11px 0 11px 30px;font-size:16.5px;line-height:1.78;color:var(--ink-soft);
  border-bottom:1px solid var(--line-soft)}
.p-list li:last-child{border-bottom:0}
.p-list li::before{content:"";position:absolute;left:4px;top:1.16em;width:9px;height:1px;background:var(--sand)}
.p-def{margin:0 0 1.6em;border-left:1px solid var(--line);padding-left:clamp(20px,2.4vw,32px)}
.p-def > div{margin-bottom:clamp(20px,2.4vw,30px)}
.p-def > div:last-child{margin-bottom:0}
.p-def b{display:block;font-family:var(--f-display);font-weight:400;font-size:clamp(19px,1.8vw,24px);
  letter-spacing:0;margin-bottom:8px;color:var(--ink)}
.p-def p{margin:0}
.p-note{background:var(--ivory-2);border:1px solid var(--line);border-radius:2px;
  padding:clamp(20px,2.4vw,30px);font-size:15px;line-height:1.78;color:var(--ink-soft);margin:clamp(28px,3vw,42px) 0 0}

.p-rail{position:sticky;top:calc(var(--nav-h) + 26px);display:flex;flex-direction:column;gap:2px}
.rail-card{background:var(--white);border:1px solid var(--line);padding:clamp(22px,2.4vw,30px)}
.rail-card h4{font-size:11px;font-family:var(--f-ui);font-weight:400;letter-spacing:.24em;
  text-transform:uppercase;color:var(--label);margin-bottom:16px}
.rail-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.rail-list a{display:block;padding:12px 0;font-size:15px;color:var(--muted);border-bottom:1px solid var(--line-soft);
  transition:color .4s var(--ease),padding-left .4s var(--ease)}
.rail-list a:last-child{border-bottom:0}
.rail-list a:hover{color:var(--ink);padding-left:8px}
.rail-list a.cur{color:var(--ink)}
.rail-list a.cur::before{content:"— ";color:var(--sand)}
.rail-list span{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:12px 0;font-size:15px;color:var(--muted);opacity:.68;border-bottom:1px solid var(--line-soft)}
.rail-list span:last-child{border-bottom:0}
.rail-list span em{font-style:normal;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--label);border:1px solid var(--line);border-radius:999px;padding:3px 8px;flex:0 0 auto}
.rail-cta{background:var(--ink);color:var(--ivory);padding:clamp(22px,2.4vw,30px);display:block}
.rail-cta h4{color:rgba(246,242,236,.72)}
.rail-cta p{font-family:var(--f-display);font-size:clamp(20px,2vw,26px);line-height:1.25;margin:0 0 18px}
.rail-cta span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid rgba(246,242,236,.55);padding-bottom:4px}

.p-nav{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border-block:1px solid var(--line);margin-top:clamp(30px,4vw,56px)}
.p-nav a{background:var(--ivory);padding:clamp(24px,3vw,40px);transition:background .5s var(--ease)}
.p-nav a:hover{background:var(--white)}
.p-nav a:last-child{text-align:right}
.p-nav small{display:block;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--label);margin-bottom:10px}
.p-nav strong{font-family:var(--f-display);font-weight:300;font-size:clamp(19px,2vw,27px);line-height:1.2}
.p-nav a.dis{opacity:.32;pointer-events:none}

/* ============================================================
   FOOTER
   ============================================================ */
footer{border-top:1px solid var(--line);padding-block:clamp(40px,5vw,70px);position:relative;z-index:2;background:var(--ivory-2)}
.foot-grid{display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap}
.foot-mark{width:52px;color:var(--ink);opacity:.85}
.foot-links{display:flex;gap:24px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);flex-wrap:wrap}
.foot-links a:hover{color:var(--ink)}
.foot-legal{font-size:12px;letter-spacing:.04em;color:var(--muted)}
.disclaimer{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.75;color:var(--muted);max-width:82ch}

.wa{position:fixed;right:clamp(16px,2.4vw,30px);bottom:clamp(16px,2.4vw,30px);z-index:95;
  width:54px;height:54px;border-radius:50%;background:var(--ink);color:var(--ivory);display:grid;place-items:center;
  box-shadow:0 18px 40px -18px rgba(20,19,18,.7);transform:scale(0);transition:transform .6s var(--ease),background .4s}
.wa.on{transform:scale(1)}
.wa:hover{background:var(--accent)}
.wa svg{width:25px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .p-body,.ct-body{grid-template-columns:1fr}
  .p-rail{position:static;flex-direction:row;flex-wrap:wrap;gap:12px}
  .p-rail > *{flex:1 1 280px}
  .p-mark{display:none}
  .p-content h2::before{display:none}
}
@media (max-width:1120px){
  .brand-txt span{display:none}
  .menu{display:none}
  .burger{display:block}
}
@media (max-width:1200px){ .svc-grid.sm{grid-template-columns:repeat(2,1fr)} }
@media (max-width:1040px){
  .svc-grid,.svc-grid.sm{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .about-grid,.contact-grid{grid-template-columns:1fr}
  .portrait{max-width:460px;margin-inline:auto}
  .sec-head{align-items:flex-start;flex-direction:column}
  .sec-head .h-lg,.sec-head > div{max-width:100%}
  .sec-head p.small{max-width:56ch}
}
@media (max-width:820px){
  .endlist li > *{grid-template-columns:minmax(0,1fr) 24px;
    grid-template-areas:"label label" "value arrow";gap:7px 14px;padding-block:18px}
  .endlist b{grid-area:label}
  .endlist span{grid-area:value}
  .endlist em{grid-area:arrow;align-self:center}
}
@media (max-width:700px){
  .pill-float{right:14px;bottom:14px}
  .creds li{flex-direction:column;gap:4px}
  .creds li b{min-width:0}
  .info li{grid-template-columns:1fr;gap:5px}
  .p-nav{grid-template-columns:1fr}
  .p-nav a:last-child{text-align:left}
  .p-def{padding-left:18px}
}
@media (max-width:620px){
  .brand-txt{display:none}
  .svc-grid,.svc-grid.sm{grid-template-columns:1fr}
}
@media (max-width:400px){
  .lang button{padding:5px 7px;letter-spacing:.02em;font-size:10.5px}
}
/* short viewports (landscape phones) */
@media (max-width:620px){ .story{min-height:0} }
@media (max-height:680px) and (min-width:620px){
  .hero{min-height:auto;padding-block:calc(var(--nav-h) + 40px) 70px}
  .hero-mark{width:min(240px,34vw)}
  .scroll-cue{display:none}
}
/* touch: no hover, so show descriptions */
@media (hover:none){
  .svc-desc{max-height:9em;opacity:1;transform:none;margin-top:14px;color:var(--muted)}
  .svc:hover .svc-desc{color:rgba(247,244,239,.72)}
  .svc-arrow{opacity:1;transform:none;color:var(--sand)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .split .word > i{transform:none}
  .hero-mark{opacity:1;transform:none}
  #writeMask path{stroke-dashoffset:0}
  #writeMask circle{transform:scale(1)}
}
/* static build: real anchors need room under the fixed header */
.foot-upd{display:inline-block;margin-top:6px;font-size:11px;color:var(--muted);opacity:.85}
[id]{scroll-margin-top:calc(var(--nav-h) + 22px)}
.cv-jump a{display:block;padding:11px 0;font-size:14.5px;color:var(--muted);border-bottom:1px solid var(--line-soft);transition:color .4s var(--ease),padding-left .4s var(--ease)}
.cv-jump a:last-child{border-bottom:0}
.cv-jump a:hover{color:var(--ink);padding-left:8px}
.cv-jump a span{float:right;font-size:11px;letter-spacing:.1em;color:var(--sand)}
.lang a{font-size:11px;letter-spacing:.1em;padding:5px 10px;border-radius:999px;color:var(--muted);transition:color .4s,background .4s}
.lang a.on{background:var(--ink);color:var(--ivory)}
.p-nav span.dis{background:var(--ivory);padding:clamp(24px,3vw,40px);opacity:.32}
.p-nav span.dis:last-child{text-align:right}

/* ---- photographs: never cropped, the box follows the picture ---- */
.portrait{aspect-ratio:auto}
.portrait picture{display:block}
.portrait img{position:static;width:100%;height:auto;object-fit:fill}
.p-figs{margin:0 0 clamp(30px,3.6vw,46px);display:flex;gap:clamp(12px,1.6vw,20px);flex-wrap:wrap;align-items:flex-start}
.p-fig{display:block;flex:1 1 0;min-width:0;max-width:420px;border-radius:2px;overflow:hidden;background:var(--ivory);box-shadow:0 30px 70px -55px rgba(20,19,18,.55)}
.p-figs.two .p-fig{max-width:300px}
.p-fig img{display:block;width:100%;height:auto}
@media (max-width:760px){.p-figs{gap:10px}.p-fig,.p-figs.two .p-fig{max-width:none}.p-figs.two{flex-wrap:nowrap}}
@media (max-width:520px){.p-figs.two{flex-wrap:wrap}.p-figs.two .p-fig{flex:1 1 100%}}

/* ---- treatment cards ---- */
.svc:hover .svc-num,.svc:focus-visible .svc-num{opacity:0;transform:translateY(-6px)}
.svc-num{transition:color .6s,opacity .45s var(--ease),transform .45s var(--ease)}
.svc h3{margin-right:30px}
.svc-grid.sm .svc h3{margin-right:24px}

/* ---- type scale on small screens ----
   Every heading was clamp(min, Nvw, max). On a phone the vw term is
   tiny, so all of them sat on their minimum while the body text did
   not — an h2 was only 2x the body instead of 3.7x on desktop, which
   reads as plain text rather than a heading. Raising just the minimum
   lifts the small end and leaves every desktop size untouched, since
   the minimum stops applying once the vw term overtakes it. */
.h-xl{font-size:clamp(56px,7.6vw,120px)}
.h-lg{font-size:clamp(44px,5.4vw,80px)}
.h-md{font-size:clamp(30px,3.2vw,46px)}
.story h2{font-size:clamp(34px,3.8vw,54px)}
.story p{font-size:clamp(15px,1.02vw,15px)}
.hero-sub{font-size:clamp(16.5px,1.35vw,18.5px)}
.mq-track span{font-size:clamp(28px,3.1vw,42px)}
.svc h3{font-size:clamp(24px,2.15vw,29px)}
.svc-grid.sm .svc h3{font-size:clamp(18px,1.5vw,21px)}
#overlay nav a{font-size:clamp(34px,7.4vw,52px)}
.p-hero h1{font-size:clamp(52px,6.4vw,92px)}
.p-content h2{font-size:clamp(30px,2.9vw,40px)}
.p-def b{font-size:clamp(21px,1.8vw,24px)}
.p-nav strong{font-size:clamp(22px,2vw,27px)}
.rail-cta p{font-size:clamp(22px,2vw,26px)}
.cv-time b{font-size:clamp(19px,1.6vw,21px)}
.cv-talks .ev{font-size:clamp(18px,1.45vw,18.5px)}
h1,h2{overflow-wrap:break-word}
@media (max-width:360px){.h-xl{font-size:48px}.p-hero h1{font-size:44px}.h-lg{font-size:39px}}

/* ---- card descriptions on small screens ----
   These were shown only under @media (hover:none). A tablet or phone
   with a mouse or stylus attached reports hover:hover and would have
   hidden every description with no way to reveal it. Width is the
   reliable half of the test, so honour either one. */
@media (hover:none),(max-width:820px){
  .svc-desc{max-height:9em;opacity:1;transform:none;margin-top:14px;color:var(--muted)}
  .svc:hover .svc-desc,.svc:focus-visible .svc-desc{color:rgba(247,244,239,.72)}
  .svc-arrow{opacity:1;transform:none;color:var(--sand)}
  .svc:hover .svc-arrow,.svc:focus-visible .svc-arrow{color:rgba(247,244,239,.72)}
}

/* ---- treatment card structure ----
   The number was absolutely positioned in the top-left while the title
   and description were bottom-aligned and grew upward, so a long title
   or an always-visible description ran straight into it. Putting the
   number back in normal flow with margin-bottom:auto pins it to the
   top and reserves its row at every width, on hover and off. */
.svc-num{position:static;margin:0 0 auto;align-self:flex-start}
.svc-grid.sm .svc{padding-top:clamp(18px,2.1vw,28px)}

/* ---- özgeçmiş intro (moved off the home page) ---- */
.cv-lead{margin-bottom:clamp(8px,1.2vw,18px)}
.cv-lead .lede{max-width:64ch}
.cv-lead .creds{margin-top:clamp(26px,3.4vw,40px)}
.cv-lead + .cv-sec > h2{margin-top:clamp(46px,5vw,72px)}

/* ---- logo write-on: the sweep cut ----
   #writeMask path sets a dash pattern and a white stroke on every path
   in the mask. The cut is not an animated stroke and must stay solid
   black, so it opts out of all three. */
#writeMask path.dcut,#writeMask2 path.dcut{stroke:#000;stroke-dasharray:none;stroke-dashoffset:0;will-change:auto}

/* ---- loader cost ----
   The three background blobs are 62vmax squares under blur(72px). Their
   animation was already paused during the loader, but paused is not the
   same as not painted: every frame of the write-on invalidated the area
   and all that blur was re-rasterised underneath an opaque overlay that
   hid it anyway. Measured at 4.3ms of the 7.7ms per frame. visibility
   keeps them out of painting without disturbing layout. */
body:not(.loaded) .atmos,body:not(.loaded) .grain{visibility:hidden}

/* ---- intro animation: once per visit ----
   app.js records a flag once the writing has played. On any later page view
   in the same visit, a tiny inline script in <head> sets .no-intro on <html>,
   and the loader is gone before the browser's first paint. Doing it in CSS
   rather than waiting for the deferred script matters: the loader is an
   opaque full-screen panel, so it would otherwise flash up blank for a frame
   or two on every single page view. */
html.no-intro #loader{display:none}
/* the blobs are held back while the loader covers them; with no loader there
   is nothing to hold back */
html.no-intro .atmos,html.no-intro .grain{visibility:visible}