/* ==========================================================================
   VeaHealth Turkey — core design system
   Palette and typography inherit the existing VeaHealth brand
   (teal #5BC8C2, Cormorant Garamond + Outfit) and extend it with a warm
   sand neutral and a mono face for clinical data.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  /* brand */
  --teal:          #1C726D;
  /* For anything filled teal with white text on it. --teal itself lightens to a
     mint in dark mode, which is right for text on a dark ground and wrong for a
     background carrying white text — 1.6:1. This one stays dark in both. */
  --teal-solid:    #1C726D;
  --teal-bright:   #5BC8C2;
  --teal-mid:      #3AADA7;
  --teal-glow:     rgba(91,200,194,.22);
  --teal-faint:    rgba(91,200,194,.08);

  /* neutrals — warm off-white ground, cool ink */
  --ground:        #FBFAF7;
  --surface:       #FFFFFF;
  --surface-2:     #F1F6F6;
  --sand:          #EFE7DA;
  --sand-deep:     #E2D7C4;

  --ink:           #0F2428;
  --ink-2:         #3F636B;
  --ink-3:         #4D6A71;
  --line:          #E1EAEA;
  --line-soft:     #EDF3F3;

  /* surfaces that stay dark in both themes (top bar, footer, CTA band) */
  --deep:          #0F2428;
  --deep-ink:      #FFFFFF;
  --deep-ink-2:    #B7D3D4;
  --deep-ink-3:    #86ABAE;
  --deep-line:     rgba(255,255,255,.12);

  /* semantic */
  --ok:            #157A56;
  --warn:          #9A6212;
  --danger:        #A3291B;

  /* elevation */
  --sh-1: 0 1px 2px rgba(15,36,40,.04), 0 2px 8px -4px rgba(15,36,40,.10);
  --sh-2: 0 2px 4px rgba(15,36,40,.05), 0 12px 32px -16px rgba(15,36,40,.22);
  --sh-3: 0 4px 8px rgba(15,36,40,.06), 0 32px 64px -32px rgba(15,36,40,.32);

  /* type */
  --f-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --f-body:    "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* rhythm */
  --step--1: clamp(.82rem, .80rem + .10vw, .90rem);
  --step-0:  clamp(1rem, .97rem + .16vw, 1.09rem);
  --step-1:  clamp(1.20rem, 1.13rem + .34vw, 1.42rem);
  --step-2:  clamp(1.44rem, 1.31rem + .64vw, 1.86rem);
  --step-3:  clamp(1.73rem, 1.51rem + 1.08vw, 2.44rem);
  --step-4:  clamp(2.07rem, 1.72rem + 1.74vw, 3.20rem);
  --step-5:  clamp(2.49rem, 1.94rem + 2.72vw, 4.19rem);

  --shell: 1240px;
  --gutter: clamp(20px, 5vw, 48px);
  --sec-y: clamp(72px, 10vw, 136px);
  --r-sm: 8px;
  --r:    16px;
  --r-lg: 26px;
  --r-pill: 999px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --deep:        #061214;
    --deep-ink:    #FFFFFF;
    --deep-ink-2:  #A8C6C8;
    --deep-ink-3:  #7A9EA1;
    --deep-line:   rgba(255,255,255,.12);
    --teal:        #6FD6D0;
    --teal-solid:  #10635E;
    --teal-bright: #8AE5DF;
    --teal-mid:    #4FC0BA;
    --teal-glow:   rgba(111,214,208,.20);
    --teal-faint:  rgba(111,214,208,.07);

    --ground:      #081315;
    --surface:     #0E1F22;
    --surface-2:   #14292D;
    --sand:        #241F17;
    --sand-deep:   #33291C;

    --ink:         #E7F2F1;
    --ink-2:       #9EBABE;
    --ink-3:       #93AFB5;
    --line:        #21393E;
    --line-soft:   #1A2E32;

    --ok:          #57C99B;
    --warn:        #E0A24E;
    --danger:      #FF8B7B;

    --sh-1: 0 1px 2px rgba(0,0,0,.5), 0 2px 8px -4px rgba(0,0,0,.6);
    --sh-2: 0 2px 4px rgba(0,0,0,.5), 0 12px 32px -16px rgba(0,0,0,.8);
    --sh-3: 0 4px 8px rgba(0,0,0,.5), 0 32px 64px -32px rgba(0,0,0,.95);
  }
}
:root[data-theme="dark"]{
    --deep:        #061214;
    --deep-ink:    #FFFFFF;
    --deep-ink-2:  #A8C6C8;
    --deep-ink-3:  #7A9EA1;
    --deep-line:   rgba(255,255,255,.12);
  --teal:        #6FD6D0;
  --teal-solid:  #10635E;
  --teal-bright: #8AE5DF;
  --teal-mid:    #4FC0BA;
  --teal-glow:   rgba(111,214,208,.20);
  --teal-faint:  rgba(111,214,208,.07);
  --ground:      #081315;
  --surface:     #0E1F22;
  --surface-2:   #14292D;
  --sand:        #241F17;
  --sand-deep:   #33291C;
  --ink:         #E7F2F1;
  --ink-2:       #9EBABE;
  --ink-3:       #93AFB5;
  --line:        #21393E;
  --line-soft:   #1A2E32;
  --ok:          #57C99B;
  --warn:        #E0A24E;
  --danger:      #FF8B7B;
  --sh-1: 0 1px 2px rgba(0,0,0,.5), 0 2px 8px -4px rgba(0,0,0,.6);
  --sh-2: 0 2px 4px rgba(0,0,0,.5), 0 12px 32px -16px rgba(0,0,0,.8);
  --sh-3: 0 4px 8px rgba(0,0,0,.5), 0 32px 64px -32px rgba(0,0,0,.95);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol{margin:0;}
ul[class],ol[class]{list-style:none;padding:0;}
img,picture,video,svg{max-width:100%;display:block;}
input,button,textarea,select{font:inherit;color:inherit;}
button{background:none;border:0;cursor:pointer;}
table{border-collapse:collapse;width:100%;}

body{
  font-family:var(--f-body);
  font-size:var(--step-0);
  font-weight:330;
  line-height:1.65;
  color:var(--ink);
  background:var(--ground);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* ---------- typography ---------- */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:500;line-height:1.08;letter-spacing:-.012em;text-wrap:balance;color:var(--ink);}
h1{font-size:var(--step-5);}
h2{font-size:var(--step-4);}
h3{font-size:var(--step-2);}
h4{font-size:var(--step-1);}
h5,h6{font-family:var(--f-body);font-weight:500;font-size:var(--step-0);line-height:1.4;}
p{text-wrap:pretty;}
a{color:var(--teal);text-decoration-color:color-mix(in srgb, var(--teal) 35%, transparent);text-underline-offset:.22em;}
a:hover{text-decoration-color:currentColor;}
strong,b{font-weight:600;}
em{font-style:italic;}

.eyebrow{
  font-family:var(--f-mono);
  font-size:.70rem;
  font-weight:400;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--teal);
  display:inline-flex;align-items:center;gap:.6em;
}
.eyebrow::before{
  content:"";width:22px;height:1px;background:currentColor;opacity:.55;flex:none;
}
.lede{font-size:var(--step-1);line-height:1.55;color:var(--ink-2);font-weight:300;max-width:62ch;}
.muted{color:var(--ink-2);}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;}

/* focus */
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px;}

/* skip link */
.skip{
  /*
   * Hidden by clipping to a single pixel, not by being pushed 9999px off to
   * the side. Off-canvas to the left costs nothing in a left-to-right page,
   * because the browser will not scroll there — but in a right-to-left one
   * that IS the scrollable direction, so it stretched the document to 11,199px
   * and every Arabic page opened parked in ten thousand pixels of nothing.
   */
  position:absolute;inset-inline-start:0;top:0;z-index:200;
  width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  background:var(--surface);color:var(--ink);padding:12px 18px;
  border-end-end-radius:var(--r-sm);
  box-shadow:var(--sh-2);
}
.skip:focus{width:auto;height:auto;overflow:visible;clip-path:none;}

/* honeypot */
.hp{
  /*
   * The same trap the skip link was in: left:-9999px on an absolutely
   * positioned box is invisible in a left-to-right page and ten thousand
   * pixels of scroll in a right-to-left one, which is what the Arabic
   * assessment form was doing. Clipped instead, and left out of the tab order
   * by the markup rather than by being somewhere nobody can reach.
   */
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap;
}

/* ---------- layout ---------- */
.shell{width:min(100% - var(--gutter)*2, var(--shell));margin-inline:auto;}
.shell-narrow{width:min(100% - var(--gutter)*2, 780px);margin-inline:auto;}
.section{padding-block:var(--sec-y);position:relative;}
.section--tint{background:var(--surface-2);}
.section--sand{background:var(--sand);}
.section--ink{background:var(--deep);color:var(--deep-ink-2);}
.section--ink h1,.section--ink h2,.section--ink h3{color:var(--deep-ink);}
.section--ink .lede,.section--ink .muted{color:var(--deep-ink-2);}

.stack{display:flex;flex-direction:column;}
.stack-4{gap:4px;} .stack-8{gap:8px;} .stack-12{gap:12px;}
.stack-16{gap:16px;} .stack-24{gap:24px;} .stack-32{gap:32px;} .stack-48{gap:48px;}

.grid{display:grid;gap:clamp(20px,3vw,34px);}
.g-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));}
.g-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));}
.g-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));}

.sec-head{display:flex;flex-direction:column;gap:16px;max-width:70ch;margin-bottom:clamp(36px,5vw,64px);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:.92em 1.7em;border-radius:var(--r-pill);
  font-family:var(--f-body);font-size:.96rem;font-weight:500;letter-spacing:.005em;
  text-decoration:none;line-height:1;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out),
             background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  will-change:transform;
}
.btn svg{width:1.1em;height:1.1em;flex:none;}
.btn--primary{background:var(--teal);color:#fff;box-shadow:0 6px 20px -8px color-mix(in srgb, var(--teal) 70%, transparent);}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px -10px color-mix(in srgb, var(--teal) 75%, transparent);}
:root[data-theme="dark"] .btn--primary,
:root:not([data-theme="light"]) .btn--primary{color:#062024;}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .btn--primary{color:#fff;}}

.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line);}
.btn--ghost:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-2px);}
.btn--wa{background:#198644;color:#fff;}
.btn--wa:hover{transform:translateY(-2px);box-shadow:0 12px 30px -12px rgba(25,134,68,.8);}
.btn--lg{padding:1.05em 2.1em;font-size:1.02rem;}
.btn--block{width:100%;}

/* magnetic hover target */
.magnet{transition:transform .5s var(--ease-out);}

/* ---------- header ---------- */
.site-topbar{
  background:var(--deep);color:var(--deep-ink-2);
  font-size:.80rem;letter-spacing:.01em;
}
.site-topbar .shell{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;padding-block:9px;}
.site-topbar a{color:var(--deep-ink-2);text-decoration:none;}
.site-topbar a:hover{color:var(--teal-bright);}
.tb-item{display:inline-flex;align-items:center;gap:7px;}
.tb-item svg{width:13px;height:13px;opacity:.8;flex:none;}
.tb-spacer{margin-inline-start:auto;}

.site-header{
  position:sticky;top:0;z-index:80;
  background:color-mix(in srgb, var(--ground) 82%, transparent);
  backdrop-filter:saturate(1.5) blur(14px);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.is-stuck{border-bottom-color:var(--line);box-shadow:var(--sh-1);}
.site-header .shell{display:flex;align-items:center;gap:20px;padding-block:14px;}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);flex:none;}
.brand svg{height:38px;width:auto;}
/* The mark is a bitmap, so it is sized by height and told to stay sharp. */
.brand-mark{height:38px;width:auto;display:block;image-rendering:auto;}
.brand-name{font-family:var(--f-body);font-size:1.18rem;font-weight:600;letter-spacing:-.02em;line-height:1;}
.brand-name span{font-weight:250;}
.brand-sub{display:block;font-family:var(--f-mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin-top:3px;}
/* "ISTANBUL · TÜRKIYE" is the widest thing in the lockup — wider than the name
   above it — and on a 320px screen it was pushing the whole header off the
   side. The city is in the top bar, the page title and the footer, so this is
   the one place it can go without being lost. */
@media (max-width:359.98px){ .site-header .brand-sub{display:none;} }

.nav{margin-inline-start:auto;display:flex;align-items:center;gap:2px;}
.nav > li{position:relative;}
.nav a{
  display:block;padding:10px 14px;border-radius:var(--r-sm);
  font-size:.93rem;font-weight:400;color:var(--ink);text-decoration:none;
  transition:color .25s var(--ease), background-color .25s var(--ease);
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--teal);background:var(--teal-faint);}
.nav .has-sub > a::after{
  content:"";display:inline-block;width:5px;height:5px;margin-inline-start:8px;vertical-align:2px;
  border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;  /* drawn glyph: physical */
  transform:rotate(45deg);opacity:.55;
}
.subnav{
  position:absolute;top:calc(100% + 6px);inset-inline-start:0;min-width:262px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-3);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.subnav--wide{min-width:520px;display:grid;grid-template-columns:1fr 1fr;gap:2px;}
.has-sub:hover > .subnav,.has-sub:focus-within > .subnav{opacity:1;visibility:visible;transform:translateY(0);}
.subnav a{padding:9px 12px;font-size:.88rem;border-radius:var(--r-sm);}
.subnav .group-label{
  grid-column:1/-1;padding:10px 12px 4px;font-family:var(--f-mono);
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
}
/* --------------------------------------------------------------------------
   The journey strip, in the middle of the header.

   Five stage names will not sit side by side next to a logo, a switcher, a
   button and a menu — in French and Arabic they are half again as long as in
   English — so one is shown at a time and they take turns. The dots say how
   many there are and which one this is, which is the part that carries
   meaning; the turning is what makes anyone look at it.

   It is a link to the journey page. A visitor who landed on a treatment page
   can see there is a documented process behind it without scrolling once.
   -------------------------------------------------------------------------- */
.hdr-steps{
  display:none;                       /* only where there is room — see below */
  flex:1 1 auto;
  min-width:0;
  align-items:center;
  gap:14px;
  margin-inline:clamp(16px,3vw,44px);
  text-decoration:none;
  color:var(--ink-2);
  font-size:.8rem;
}
.hdr-steps:hover,.hdr-steps:focus-visible{color:var(--teal);}
.hdr-steps__still{display:none;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;}

/* A fixed width, not a growing one. Left to fill the row the window pushed
   the dots to the far end of the header, where they read as unrelated to the
   label they belong to — and because each stage name is a different length, a
   window sized to its content would have walked the dots left and right every
   few seconds. Fixed, the pair holds still and long names ellipsise. */
.hdr-steps__win{
  position:relative;
  flex:0 0 clamp(180px,19vw,290px);
  min-width:0;
  height:1.35em;
  overflow:hidden;
}
.hdr-steps__item{
  position:absolute;
  inset-block-start:0;
  inset-inline-start:0;
  max-width:100%;
  display:flex;
  align-items:baseline;
  gap:9px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:0;
  transform:translateY(70%);
  transition:opacity .5s var(--ease), transform .6s var(--ease-out);
}
.hdr-steps__item.is-on{opacity:1;transform:none;}
/* The one that has just left goes up, not back down the way it came. */
.hdr-steps__item.was-on{opacity:0;transform:translateY(-70%);}
.hdr-steps__item i{
  font-family:var(--f-mono);
  font-style:normal;
  font-size:.62rem;
  letter-spacing:.1em;
  color:var(--teal);
  flex:none;
}

.hdr-steps__dots{display:flex;align-items:center;gap:5px;flex:none;}
.hdr-steps__dots i{
  display:block;
  width:5px;height:5px;
  border-radius:50%;
  background:var(--ink-3,currentColor);
  opacity:.3;
  transition:opacity .4s var(--ease), transform .4s var(--ease-out), background-color .4s var(--ease);
}
.hdr-steps__dots i.is-on{opacity:1;background:var(--teal);transform:scale(1.35);}

/* Enough room only once the row is wide. Below this the header is a logo, a
   switcher and the menu, and the strip would be the thing that overflowed. */
@media (min-width:1024px){ .hdr-steps{display:flex;} }

/* Nothing turns for a reader who asked for nothing to move: the strip becomes
   a plain link to the same page, which is what it was always for. */
@media (prefers-reduced-motion: reduce){
  .hdr-steps__win,.hdr-steps__dots{display:none;}
  .hdr-steps__still{display:block;}
}

.nav-cta{margin-inline-start:10px;}

.burger{display:flex;margin-inline-start:auto;width:44px;height:44px;border-radius:var(--r-sm);align-items:center;justify-content:center;}
.burger span{display:block;width:20px;height:1.5px;background:var(--ink);position:relative;transition:background .2s;}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:1.5px;background:var(--ink);transition:transform .35s var(--ease-out);}
.burger span::before{top:-6px;} .burger span::after{top:6px;}
.burger[aria-expanded="true"] span{background:transparent;}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg);}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg);}

.mobile-nav{
  position:fixed;inset:0;z-index:90;background:var(--ground);
  padding:96px var(--gutter) 40px;overflow-y:auto;
  transform:translateY(-12px);opacity:0;visibility:hidden;
  transition:opacity .38s var(--ease-out), transform .38s var(--ease-out), visibility .38s;
}
.mobile-nav.is-open{opacity:1;visibility:visible;transform:none;}
.mobile-nav a{display:block;padding:13px 0;border-bottom:1px solid var(--line-soft);
  font-size:1.05rem;color:var(--ink);text-decoration:none;}
.mobile-nav .m-group{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-top:26px;padding-bottom:6px;}
.mobile-nav .m-sub a{padding-inline-start:14px;font-size:.95rem;color:var(--ink-2);}

/* scroll progress */
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:100;
  background:linear-gradient(90deg,var(--teal-bright),var(--teal));
  transform-origin:0 50%;transform:scaleX(0);
  transition:transform .1s linear;pointer-events:none;
}

/* ---------- hero ---------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(90vh,820px);display:flex;align-items:flex-end;
  padding-block:clamp(90px,14vh,150px) clamp(48px,7vw,86px);
}
.hero-media{position:absolute;inset:0;z-index:-2;}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover;}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(6,20,22,.30) 0%, rgba(6,20,22,.10) 32%, rgba(6,20,22,.82) 100%),
    radial-gradient(120% 80% at 15% 100%, rgba(6,20,22,.72), transparent 62%);
}
.hero-inner{position:relative;color:#fff;max-width:64ch;}
.hero h1{color:#fff;font-size:var(--step-5);line-height:1.02;}
.hero .lede{color:rgba(233,246,245,.90);margin-top:22px;}
.hero .eyebrow{color:var(--teal-bright);}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;}
.hero-actions .btn--ghost{color:#fff;border-color:rgba(255,255,255,.34);}
.hero-actions .btn--ghost:hover{background:rgba(255,255,255,.10);border-color:#fff;color:#fff;}

.hero-stats{
  display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,56px);
  margin-top:clamp(40px,6vw,64px);padding-top:26px;
  border-top:1px solid rgba(255,255,255,.18);
}
.hero-stat .v{font-family:var(--f-display);font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1;color:#fff;}
.hero-stat .k{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(210,236,235,.72);margin-top:9px;}

/* page hero (inner pages) */
.page-hero{
  position:relative;padding-block:clamp(64px,9vw,110px) clamp(40px,6vw,72px);
  background:
    radial-gradient(90% 120% at 88% -10%, var(--teal-faint), transparent 60%),
    var(--surface-2);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.page-hero .shell{position:relative;}
.page-hero h1{margin-top:16px;}
.page-hero .lede{margin-top:20px;}

/* breadcrumb */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-size:.80rem;color:var(--ink-3);margin-bottom:6px;}
.crumbs a{color:var(--ink-2);text-decoration:none;}
.crumbs a:hover{color:var(--teal);}
.crumbs li:not(:last-child)::after{content:"/";margin-inline-start:8px;opacity:.45;}
.crumbs li{display:inline-flex;align-items:center;gap:8px;}

/* ---------- cards ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,3vw,32px);position:relative;overflow:hidden;
  transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color .4s var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:color-mix(in srgb,var(--teal) 35%,var(--line));}
.card h3{font-size:var(--step-1);}
.card p{color:var(--ink-2);font-size:.96rem;margin-top:10px;}
.card-ico{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:var(--teal-faint);color:var(--teal);margin-bottom:18px;
}
.card-ico svg{width:22px;height:22px;}

a.card{text-decoration:none;color:inherit;display:block;}
a.card::after{
  content:"";position:absolute;inset:auto 0 0 0;height:2px;
  background:linear-gradient(90deg,var(--teal-bright),var(--teal));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .5s var(--ease-out);
}
a.card:hover::after{transform:scaleX(1);}
.card-arrow{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-size:.86rem;font-weight:500;color:var(--teal);
}
.card-arrow svg{width:15px;height:15px;transition:transform .4s var(--ease-out);}
a.card:hover .card-arrow svg{transform:translateX(4px);}

/* service card with image */
.svc-card{padding:0;}
.svc-card .svc-media{aspect-ratio:3/2;overflow:hidden;background:var(--surface-2);}
.svc-card .svc-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out);}
.svc-card:hover .svc-media img{transform:scale(1.05);}
.svc-card .svc-body{padding:clamp(20px,2.6vw,28px);}
.svc-tag{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);
}
.svc-price{font-family:var(--f-mono);font-size:.86rem;color:var(--teal);font-weight:500;}

/* ---------- stat strip ---------- */
.stat{border-inline-start:2px solid var(--teal);padding-inline-start:20px;}
.stat .v{font-family:var(--f-display);font-size:clamp(2rem,4.2vw,3rem);line-height:1;color:var(--ink);}
.stat .k{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);margin-top:10px;}
.stat .d{font-size:.9rem;color:var(--ink-2);margin-top:8px;}

/* ---------- before / after slider ---------- */
.ba{
  position:relative;border-radius:var(--r);overflow:hidden;background:var(--surface-2);
  border:1px solid var(--line);box-shadow:var(--sh-1);
  touch-action:pan-y;user-select:none;-webkit-user-select:none;
}
.ba-img{display:block;width:100%;height:auto;}
/*
 * The two photographs are aligned and identically cropped, so the top one sits
 * exactly over the bottom one and a single clip-path decides how much of it
 * shows. One property, two interactions: an inset for the divider, a circle for
 * the lens — which is why dragging and hovering can share the same element
 * without either one needing to know the other exists.
 */
.ba-top{position:absolute;inset:0;overflow:hidden;
  clip-path:inset(0 calc(100% - var(--ba-pos, 50%)) 0 0);
  transition:clip-path .12s linear;}
.ba-top img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/*
 * A mask rather than a clip-path for the lens, because clip-path has only a
 * hard edge. A radial gradient feathers the last fifth of the radius, so the
 * result fades into the original instead of being stamped on top of it —
 * which is the difference between a transformation and a sticker.
 */
.ba[data-mode="lens"] .ba-top{
  clip-path:none;
  -webkit-mask-image:radial-gradient(circle var(--ba-r, 0px) at var(--ba-x, 50%) var(--ba-y, 50%),
    #000 0, #000 78%, transparent 100%);
  mask-image:radial-gradient(circle var(--ba-r, 0px) at var(--ba-x, 50%) var(--ba-y, 50%),
    #000 0, #000 78%, transparent 100%);
  transition:-webkit-mask-image .18s var(--ease-out), mask-image .18s var(--ease-out);}
.ba[data-mode="lens"] .ba-handle,
.ba[data-mode="lens"] .ba-label{transition:opacity .2s var(--ease-out);opacity:0;}
.ba--plain .ba-label{position:absolute;}

/* The invitation, which leaves as soon as it has been accepted. */
.ba-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  padding:.4em .9em;border-radius:99px;font-size:.76rem;letter-spacing:.06em;
  text-transform:uppercase;background:rgba(9,18,22,.72);color:#eaf2f2;
  backdrop-filter:blur(6px);pointer-events:none;
  transition:opacity .3s var(--ease-out);}
.ba[data-touched="1"] .ba-hint{opacity:0;}
@media (hover:none){.ba-hint{display:none;}}
.ba-handle{transition:opacity .2s var(--ease-out);
  position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;
  box-shadow:0 0 0 1px rgba(15,36,40,.16), 0 0 22px rgba(0,0,0,.35);
  transform:translateX(-1px);cursor:ew-resize;
}
.ba-knob{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;background:#fff;color:var(--ink);
  display:grid;place-items:center;box-shadow:0 4px 18px rgba(0,0,0,.30);
}
.ba-knob svg{width:20px;height:20px;}
.ba-label{
  position:absolute;bottom:14px;padding:5px 12px;border-radius:var(--r-pill);
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(9,26,29,.72);color:#fff;backdrop-filter:blur(6px);pointer-events:none;
}
.ba-label--l{left:14px;} .ba-label--r{right:14px;}
.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;}
.ba-range:focus-visible + .ba-handle{outline:2px solid var(--teal);outline-offset:2px;}
.ba-caption{margin-top:14px;font-size:.88rem;color:var(--ink-2);}
.ba-caption b{color:var(--ink);font-weight:500;}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;position:relative;padding-block:22px;
  border-block:1px solid var(--line);background:var(--surface);}
.marquee-track{display:flex;gap:56px;width:max-content;animation:marq 46s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-item{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);}
.marquee-item svg{width:15px;height:15px;color:var(--teal);flex:none;}
@keyframes marq{to{transform:translateX(-50%);}}

/* ---------- process / timeline ---------- */
.steps{counter-reset:s;display:grid;gap:0;}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:0 clamp(20px,3vw,36px);
  padding-block:clamp(26px,3.6vw,42px);border-top:1px solid var(--line);
}
.step:last-child{border-bottom:1px solid var(--line);}
.step-n{
  counter-increment:s;font-family:var(--f-mono);font-size:.78rem;color:var(--teal);
  padding-top:6px;letter-spacing:.06em;
}
.step-n::before{content:counter(s,decimal-leading-zero);}
.step h3{font-size:var(--step-2);}
.step p{color:var(--ink-2);margin-top:10px;max-width:60ch;}
.step-meta{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:8px;}

/* ---------- table ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);}
.table-wrap table{min-width:620px;}
.table-wrap th,.table-wrap td{
  padding:14px 18px;text-align:start;border-bottom:1px solid var(--line-soft);font-size:.92rem;
}
.table-wrap th{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);font-weight:400;background:var(--surface-2);position:sticky;top:0;
}
.table-wrap td:first-child{font-weight:500;color:var(--ink);}
.table-wrap tr:last-child td{border-bottom:0;}
.table-wrap .hi{color:var(--teal);font-weight:500;}

/* ---------- faq ---------- */
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--f-display);font-size:var(--step-1);line-height:1.3;color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"";position:absolute;inset-inline-end:6px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--teal);border-bottom:1.5px solid var(--teal);  /* drawn glyph: physical */
  transform:translateY(-70%) rotate(45deg);transition:transform .38s var(--ease-out);
}
.faq-item[open] summary::after{transform:translateY(-20%) rotate(225deg);}
.faq-body{padding-bottom:24px;color:var(--ink-2);max-width:70ch;}
.faq-body p + p{margin-top:12px;}

/* ---------- gallery ---------- */
.masonry{columns:3 260px;column-gap:clamp(14px,2vw,22px);}
.masonry figure{break-inside:avoid;margin-bottom:clamp(14px,2vw,22px);position:relative;
  border-radius:var(--r);overflow:hidden;background:var(--surface-2);}
.masonry img{width:100%;height:auto;transition:transform 1.1s var(--ease-out);}
.masonry figure:hover img{transform:scale(1.04);}
.masonry figcaption{
  position:absolute;inset:auto 0 0 0;padding:26px 16px 14px;color:#fff;font-size:.84rem;
  background:linear-gradient(transparent,rgba(8,22,25,.82));
  opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.masonry figure:hover figcaption,.masonry figure:focus-within figcaption{opacity:1;transform:none;}

/* ---------- form ---------- */
.form-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,4vw,44px);box-shadow:var(--sh-2);
}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px;}
.field > label{font-size:.86rem;font-weight:500;color:var(--ink);}
.field .hint{font-size:.78rem;color:var(--ink-3);}
.field .req{color:var(--danger);}
.input,.select,.textarea{
  width:100%;padding:.86em 1em;border-radius:var(--r-sm);
  background:var(--ground);border:1px solid var(--line);color:var(--ink);
  font-size:.96rem;transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background-color .25s;
}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--teal);background:var(--surface);
  box-shadow:0 0 0 3px var(--teal-faint);
}
.input[aria-invalid="true"],.select[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--danger);}
.textarea{resize:vertical;min-height:120px;}
.field-error{font-size:.80rem;color:var(--danger);min-height:1.1em;}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;}
@media (max-width:560px){.row-2{grid-template-columns:1fr;}}

.chip-grid{display:flex;flex-wrap:wrap;gap:9px;}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:.6em 1.05em;border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--ground);font-size:.87rem;cursor:pointer;
  transition:border-color .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.chip input{position:absolute;opacity:0;width:0;height:0;}
.chip:has(input:checked){border-color:var(--teal);background:var(--teal-faint);color:var(--teal);font-weight:500;}
.chip:has(input:focus-visible){outline:2px solid var(--teal);outline-offset:2px;}

.consent{display:flex;gap:11px;align-items:flex-start;font-size:.84rem;color:var(--ink-2);margin:20px 0;}
.consent input{margin-top:.28em;width:16px;height:16px;accent-color:var(--teal);flex:none;}

.form-steps{display:flex;gap:8px;margin-bottom:26px;}
.form-steps .fs{
  flex:1;height:3px;border-radius:2px;background:var(--line);overflow:hidden;
}
.form-steps .fs::after{content:"";display:block;height:100%;width:0;background:var(--teal);
  transition:width .5s var(--ease-out);}
.form-steps .fs.is-done::after,.form-steps .fs.is-active::after{width:100%;}
.form-step{display:none;}
.form-step.is-active{display:block;animation:stepIn .45s var(--ease-out);}
@keyframes stepIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

.form-note{font-size:.8rem;color:var(--ink-3);margin-top:14px;}
.form-status{margin-top:16px;padding:14px 16px;border-radius:var(--r-sm);font-size:.9rem;display:none;}
.form-status.is-ok{display:block;background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok);}
.form-status.is-err{display:block;background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger);}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative;overflow:hidden;background:var(--deep);color:var(--deep-ink);
  border-radius:var(--r-lg);padding:clamp(36px,6vw,72px);
}
.cta-band::before{
  content:"";position:absolute;inset:-40% -10% auto auto;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle, var(--teal-glow), transparent 66%);pointer-events:none;
}
.cta-band h2{color:var(--deep-ink);position:relative;}
.cta-band p{color:var(--deep-ink-2);margin-top:16px;max-width:56ch;position:relative;}
.cta-band .hero-actions{position:relative;}

/* ---------- footer ---------- */
.site-footer{background:var(--deep);color:var(--deep-ink-2);padding-block:clamp(50px,7vw,84px) 28px;margin-top:0;}
.site-footer h2,.site-footer h3{color:var(--deep-ink);}
.foot-grid{display:grid;gap:clamp(28px,4vw,52px);grid-template-columns:1.5fr 1fr 1fr 1fr;}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr;}}
.site-footer .brand{color:var(--deep-ink);}
.site-footer .brand-sub{color:var(--deep-ink-3);}
.foot-col h3{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--deep-ink-3);font-weight:400;margin-bottom:16px;}
.foot-col ul{display:flex;flex-direction:column;gap:9px;}
.foot-col a{color:var(--deep-ink-2);text-decoration:none;font-size:.92rem;transition:color .25s var(--ease);}
.foot-col a:hover{color:var(--teal-bright);}
.foot-bottom{
  margin-top:clamp(36px,5vw,56px);padding-top:22px;border-top:1px solid var(--deep-line);
  display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;font-size:.80rem;color:var(--deep-ink-2);
}
.foot-bottom a{color:var(--deep-ink-2);}
.foot-bottom .sep{margin-inline-start:auto;}
.foot-disclaimer{font-size:.78rem;line-height:1.6;color:var(--deep-ink-2);max-width:74ch;margin-top:18px;}
.social{display:flex;gap:10px;margin-top:18px;}
.social a{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--deep-line);color:var(--deep-ink-2);transition:all .3s var(--ease);}
.social a:hover{border-color:var(--teal-bright);color:var(--teal-bright);transform:translateY(-2px);}
.social svg{width:16px;height:16px;}

/* ---------- floating whatsapp ---------- */
.wa-float{
  position:fixed;inset-inline-end:clamp(14px,3vw,26px);bottom:clamp(14px,3vw,26px);z-index:70;
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 18px 12px 14px;border-radius:var(--r-pill);
  background:#198644;color:#fff;text-decoration:none;font-size:.9rem;font-weight:500;
  box-shadow:0 10px 30px -8px rgba(25,134,68,.55);
  transform:translateY(120%);opacity:0;
  transition:transform .6s var(--ease-out), opacity .6s var(--ease-out), box-shadow .35s;
}
.wa-float.is-in{transform:none;opacity:1;}
/* The cookie banner occupies the same corner. Hold the button back
   until the visitor has answered, rather than stacking the two. */
.cookie-open .wa-float.is-in{transform:translateY(120%);opacity:0;pointer-events:none;}
.wa-float:hover{box-shadow:0 14px 36px -8px rgba(25,134,68,.7);}
.wa-float svg{width:21px;height:21px;flex:none;}
@media (max-width:520px){.wa-float span{display:none;}.wa-float{padding:14px;}}

/* ---------- cookie banner ---------- */
.cookie{
  position:fixed;left:50%;bottom:0;z-index:95;transform:translateX(-50%) translateY(110%);
  width:min(1080px, calc(100vw - 24px));
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r) var(--r) 0 0;border-bottom:0;
  box-shadow:var(--sh-3);padding:18px clamp(18px,3vw,28px);
  display:grid;grid-template-columns:1fr auto;gap:8px 32px;align-items:center;
  opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease-out), transform .45s var(--ease-out), visibility .45s;
}
.cookie.is-in{opacity:1;transform:translateX(-50%) translateY(0);visibility:visible;}
/* place explicitly: text stacks in column one, the buttons sit in column two */
.cookie h3{grid-column:1;grid-row:1;font-family:var(--f-body);font-size:.95rem;font-weight:600;}
.cookie p{grid-column:1;grid-row:2;font-size:.83rem;color:var(--ink-2);margin-top:2px;max-width:78ch;}
.cookie-actions{grid-column:2;grid-row:1 / span 2;display:flex;flex-wrap:wrap;gap:9px;align-self:center;}
.cookie .btn{padding:.6em 1.1em;font-size:.85rem;white-space:nowrap;}
@media (max-width:820px){
  .cookie{grid-template-columns:1fr;gap:12px;}
  .cookie h3,.cookie p{grid-column:1;}
  .cookie-actions{grid-column:1;grid-row:3;width:100%;}
  /* A consent choice is pressed with a thumb, so give both buttons a full
     touch target — and the same one, so neither answer is the easier one. */
  .cookie .btn{flex:1;justify-content:center;min-height:44px;}
}

/* ---------- utilities ---------- */
.text-center{text-align:center;}
.mx-auto{margin-inline:auto;}
.mt-24{margin-top:24px;} .mt-32{margin-top:32px;} .mt-48{margin-top:48px;}
.pill{
  display:inline-flex;align-items:center;gap:8px;padding:.42em .95em;border-radius:var(--r-pill);
  background:var(--teal-faint);color:var(--teal);
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
}
.divider{height:1px;background:var(--line);border:0;margin-block:var(--sec-y);}
.checklist{display:flex;flex-direction:column;gap:11px;}
.checklist li{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
  font-size:.94rem;color:var(--ink-2);}
.checklist svg{width:17px;height:17px;color:var(--teal);margin-top:.24em;flex:none;}

.media-frame{border-radius:var(--r);overflow:hidden;background:var(--surface-2);border:1px solid var(--line);}
.media-frame img,.media-frame video{width:100%;height:auto;display:block;}
.ratio-3-2{aspect-ratio:3/2;} .ratio-16-9{aspect-ratio:16/9;} .ratio-4-5{aspect-ratio:4/5;}
.ratio-3-2 img,.ratio-16-9 img,.ratio-4-5 img{width:100%;height:100%;object-fit:cover;}

/* ==========================================================================
   Motion — scroll-triggered reveals.
   Everything is opt-in via [data-anim] and fully disabled for
   prefers-reduced-motion. Content is visible by default when JS is absent.
   ========================================================================== */
.js [data-anim]{opacity:0;will-change:transform,opacity;}
.js [data-anim="up"]      {transform:translateY(26px);}
.js [data-anim="fade"]    {transform:none;}
.js [data-anim="left"]    {transform:translateX(-26px);}
.js [data-anim="right"]   {transform:translateX(26px);}
.js [data-anim="scale"]   {transform:scale(.965);}
.js [data-anim="clip"]    {clip-path:inset(0 0 100% 0);transform:none;opacity:1;}
.js [data-anim].is-in{
  opacity:1;transform:none;clip-path:inset(0 0 0 0);
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out), clip-path 1s var(--ease-out);
  transition-delay:var(--d,0ms);
}

/* line-by-line headline reveal */
.js .reveal-lines .rl{display:block;overflow:hidden;}
.js .reveal-lines .rl > span{
  display:block;transform:translateY(105%);
  transition:transform 1s var(--ease-out);transition-delay:var(--d,0ms);
}
.js .reveal-lines.is-in .rl > span{transform:none;}

/* parallax layer */
.js [data-parallax]{will-change:transform;}

/* count-up numbers keep their space */
.js [data-count]{font-variant-numeric:tabular-nums;}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .js [data-anim],.js .reveal-lines .rl > span{opacity:1 !important;transform:none !important;clip-path:none !important;}
  .marquee-track{animation:none;}
  .wa-float{transform:none;opacity:1;}
}

/* ---------- responsive nav switch ---------- */
/*
 * 1280, not 1080. The row has to hold the brand, seven nav items, the language
 * switcher and the assessment button, and how wide that is depends on the
 * language: measured, the content needs 1106px in English, 1143 in French and
 * 1182 in Spanish. At the old breakpoint every one of them overflowed —
 * Spanish by 149px — across 1081 to about 1250, which is where a great many
 * laptops sit. Arabic happened to fit, so the header was broken in three
 * languages out of four and fine in the one it was most often checked in.
 *
 * The switch is now where the widest language fits: 1182 plus two 48px
 * gutters. Below that everyone gets the menu button, which is the same
 * arrangement in every language rather than one that depends on how long the
 * word for "treatments" happens to be.
 */
/*
 * The plain button and its list are the navigation at EVERY width now, not
 * only on a phone. There is no horizontal bar left to fall back to: removing
 * it without this left a reader with JavaScript off, above 1280px, holding a
 * header with a logo and nothing to click. .has-motion swaps the button for
 * the toggle and hides the list the moment the motion layer is up, so nobody
 * who has JavaScript ever sees either.
 */
@media (max-width:1279.98px){
  .nav-cta{display:none;}
}

/* ---------- print ---------- */
@media print{
  .site-header,.site-topbar,.wa-float,.cookie,.scroll-progress,.mobile-nav{display:none !important;}
  body{background:#fff;color:#000;}
}

/* ---------- additions for the rebuilt treatment pages ---------- */
/* screen-reader-text is WordPress's own name for this and is what the editor
   and core markup emit; visually-hidden is the theme's. Both, so that text
   meant only for a screen reader never renders because a template picked the
   other spelling. */
.visually-hidden,
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.screen-reader-text:focus{
  position:static!important;width:auto;height:auto;margin:0;clip:auto;
  white-space:normal;padding:10px 16px;background:var(--surface);
}
.svc-page .hero{position:relative;isolation:isolate;}
.svc-hero-media{
  position:absolute;inset:0;z-index:-1;overflow:hidden;opacity:.16;
  -webkit-mask-image:linear-gradient(200deg, #000 0%, transparent 62%);
          mask-image:linear-gradient(200deg, #000 0%, transparent 62%);
  pointer-events:none;
}
.svc-hero-media img{width:100%;height:100%;object-fit:cover;}
:root[data-theme="dark"] .svc-hero-media,
:root:not([data-theme="light"]) .svc-hero-media{opacity:.22;}

/* the salvaged pages ship their own scale; keep them from fighting the shell */
.svc-page{overflow-x:hidden;}
.svc-page section{scroll-margin-top:96px;}
.svc-page img{max-width:100%;height:auto;}

/* their FAQ blocks now use the shared <details> component */
.svc-page .faq-item{border-bottom:1px solid var(--line);}

/* the salvaged pages set a fixed teal on white; make sure text stays legible
   in dark mode by letting the shared ink token win for plain prose */
:root[data-theme="dark"] .svc-page,
:root:not([data-theme="light"]) .svc-page{color:var(--ink);}

/* The banner landmark wraps the contact bar and the navigation so that no
   content sits outside a landmark. `display:contents` keeps the wrapper out of
   the box tree, so the sticky navigation still resolves against the viewport
   instead of being trapped inside the wrapper's short box. */
.site-header-group{display:contents;}

/* ---------- the journal ---------- */
.post-hero .post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:9px;color:var(--ink-3);}
.post-hero .post-meta a{color:var(--teal);text-decoration:none;}
.post-hero .post-meta a:hover{text-decoration:underline;}
.section--flush{padding-block:0;}
.post-cover{border-radius:var(--r-lg);overflow:hidden;margin-top:clamp(24px,4vw,44px);}
.post-cover img{width:100%;height:auto;display:block;}
.post-cover figcaption{font-size:.72rem;color:var(--ink-3);padding:9px 2px 0;}
.post-cover figcaption a{color:var(--ink-3);}

/* the article body */
.post-body{max-width:70ch;}
.post-body > * + *{margin-top:1.15em;}
.post-body h2{font-size:var(--step-3);line-height:1.14;margin-top:1.9em;scroll-margin-top:calc(var(--header-h,78px) + 20px);}
.post-body h2 + p{margin-top:.7em;}
.post-body p{font-size:1.03rem;line-height:1.72;color:var(--ink-2);}
.post-body p strong{color:var(--ink);}
.post-body ul{padding-inline-start:0;list-style:none;}
.post-body ul li{position:relative;padding-inline-start:26px;margin-top:.6em;color:var(--ink-2);line-height:1.66;}
.post-body ul li::before{content:"";position:absolute;inset-inline-start:6px;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--teal);}
.post-body a{color:var(--teal);text-underline-offset:3px;}

/* the contents list */
.post-toc{border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 24px;background:var(--surface-2);}
.post-toc__k{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px;}
.post-toc ol{margin:0;padding-inline-start:1.2em;}
.post-toc li{margin-top:.4em;color:var(--ink-2);}
.post-toc a{color:var(--ink-2);text-decoration:none;}
.post-toc a:hover{color:var(--teal);text-decoration:underline;}

/* pulled-out points */
.post-note{border-inline-start:3px solid var(--teal);background:var(--teal-faint);
  border-start-start-radius:0;border-end-start-radius:0;
  border-start-end-radius:var(--r);border-end-end-radius:var(--r);
  padding:18px 22px;margin-block:1.6em;}
.post-note p{color:var(--ink);font-size:.98rem;margin:0;}

/* tables inside articles */
.post-table{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);margin-block:1.6em;}
.post-table table{width:100%;border-collapse:collapse;font-size:.9rem;}
.post-table th,.post-table td{padding:12px 15px;text-align:start;border-bottom:1px solid var(--line-soft);}
.post-table thead th{background:var(--surface-2);font-family:var(--f-mono);font-size:.62rem;font-weight:400;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;}
.post-table tbody th{font-weight:500;color:var(--ink);}
.post-table td{color:var(--ink-2);}
.post-table tbody tr:last-child th,.post-table tbody tr:last-child td{border-bottom:0;}

/* where to go next */
.post-related{border-top:1px solid var(--line);margin-top:2.4em;padding-top:1.6em;}
.post-related__k{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);}
.post-related ul{margin-top:12px;padding-inline-start:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px;}
.post-related li{margin:0;padding:0;}
.post-related li::before{display:none;}
.post-related a{display:inline-block;padding:8px 16px;border:1px solid var(--line);border-radius:100px;
  font-size:.88rem;color:var(--ink);text-decoration:none;transition:border-color .25s var(--ease),color .25s var(--ease);}
.post-related a:hover{border-color:var(--teal);color:var(--teal);}

.post-disclaimer{margin-top:clamp(32px,5vw,54px);padding-top:20px;border-top:1px solid var(--line);
  font-size:.82rem;color:var(--ink-3);max-width:70ch;}

/* ---------- particle field ---------- */
/*
 * Stacking, and why it is arranged this way. The ambient canvas is the first
 * child of <body>, so it paints over the body's own background but under
 * everything that follows — provided everything that follows is given a
 * stacking position. That is what these three rules do. Without them the
 * canvas would sit on top of the site.
 */
.vh-dust{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; display:block;
}
/*
 * Lift the page off the dust canvas, which sits at z-index 0.
 *
 * These were all given z-index:1 together, which put the header and main on
 * the same level — and main comes later in the document, so it painted over
 * the header. Nothing showed it while the header only ever sat above empty
 * space, but anything the header opens downwards, like the language panel,
 * disappeared behind the page. The header and the bar above it belong above
 * main, as they already do everywhere else in this stylesheet.
 */
.has-dust main,
.has-dust .site-footer{ position:relative; z-index:1; }
.has-dust .site-topbar,
.has-dust .site-header{ position:relative; z-index:3; }

/*
 * Readable surfaces stay opaque. The ambient layer passes behind body copy, so
 * anywhere a long line of text sits, the surface underneath it is solid and the
 * particles are simply not there. Effect in the gaps, never behind a sentence.
 */
.has-dust .post-read,
.has-dust .tp-facts,
.has-dust .section--tint,
.has-dust .section--sand,
.has-dust .card,
.has-dust .tp-why,
.has-dust .tp-cost,
.has-dust .tp-phase,
.has-dust .tp-ev,
.has-dust .post-table,
.has-dust .tp-table-wrap{ background-color:var(--surface); }
.has-dust .section--tint,
.has-dust .tp-facts{ background-color:var(--surface-2); }
.has-dust .section--sand{ background-color:var(--sand); }

.site-footer{ position:relative; overflow:hidden; }
.foot-inner{ position:relative; z-index:1; }

/*
 * The stage is the only place the swarm is allowed to be. On a wide screen it
 * is a square beside the links; on a phone it is a short band underneath them.
 * Either way it is a region with no text in it.
 */
.foot-stage{ position:relative; min-height:190px; order:2; }
/* nothing is going to be drawn in it, so it should not hold a gap open */
html:not(.has-dust) .foot-stage{ display:none; }
.vh-swarm{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; display:block;
}
@media (min-width:1080px){
  .foot-inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;
    column-gap:clamp(32px,5vw,72px);
  }
  .foot-main{ grid-column:1; grid-row:1; min-width:0; }
  .foot-stage{ grid-column:2; grid-row:1; align-self:center; min-height:300px; }
  .foot-bottom{ grid-column:1 / -1; }
}

/* ---------- footer ---------- */
.foot-top{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(20px,4vw,48px); flex-wrap:wrap;
  padding-bottom:clamp(28px,4vw,44px);
  border-bottom:1px solid var(--deep-line);
}
.foot-say{ max-width:46ch; }
.foot-line{ margin-top:14px; color:var(--deep-ink-2); font-size:.98rem; line-height:1.6; }

.foot-cols{
  display:grid; grid-template-columns:1fr 1fr 1.3fr;
  gap:clamp(24px,4vw,56px);
  padding-block:clamp(30px,4vw,46px);
}
@media (max-width:760px){ .foot-cols{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .foot-cols{ grid-template-columns:1fr; } }
.foot-col h2{
  font-family:var(--f-mono); font-size:.62rem; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--deep-ink-3); margin-bottom:14px;
}
.foot-col ul{ list-style:none; padding-inline-start:0; margin:0; }
.foot-col li{ margin-top:9px; }
.foot-col a{ color:var(--deep-ink-2); text-decoration:none; font-size:.93rem; }
.foot-col a:hover{ color:var(--teal-bright); }
.foot-col--contact address{ font-style:normal; margin-top:18px; color:var(--deep-ink-3); font-size:.9rem; line-height:1.65; }
.foot-col--contact .social{ margin-top:18px; }

.foot-bottom{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding-top:22px; border-top:1px solid var(--deep-line);
}
.foot-legal{ font-size:.78rem; color:var(--deep-ink-3); max-width:70ch; }
.foot-legal-links{ display:flex; gap:18px; flex-wrap:wrap; }
.foot-legal-links a{ font-size:.78rem; color:var(--deep-ink-3); text-decoration:none; }
.foot-legal-links a:hover{ color:var(--teal-bright); }

@media (prefers-reduced-motion: reduce){
  .vh-dust,.vh-swarm{ display:none !important; }
}


/* ---------- language switcher ----------
   One slot in the header, not four. The panel is anchored to the button's
   inline end so it opens inwards in both directions — anchored to the left it
   would hang off the edge of an Arabic page. */
.lang{position:relative;}
.lang-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:.44em .6em;border:1px solid transparent;border-radius:10px;
  background:none;cursor:pointer;color:var(--ink-2);
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;
  transition:color .2s var(--ease-out), background .2s var(--ease-out), border-color .2s var(--ease-out);
}
.lang-btn svg{width:17px;height:17px;flex:none;}
.lang-btn__caret svg{width:12px;height:12px;opacity:.8;transition:transform .25s var(--ease-out);}
.lang-btn:hover{color:var(--ink);background:var(--teal-faint);}
.lang-btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
.lang-btn[aria-expanded="true"]{color:var(--ink);background:var(--teal-faint);border-color:var(--line);}
.lang-btn[aria-expanded="true"] .lang-btn__caret svg{transform:rotate(180deg);}

.lang-menu{
  position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:130;
  min-width:190px;margin:0;padding:6px;list-style:none;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-2);
}
.lang-menu[hidden]{display:none;}
.lang-menu a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:.62em .7em;border-radius:8px;
  color:var(--ink-2);text-decoration:none;font-size:.92rem;
  transition:color .18s var(--ease-out), background .18s var(--ease-out);
}
.lang-menu a[lang="ar"]{font-family:"IBM Plex Sans Arabic",var(--f-body);}
.lang-menu a:hover,.lang-menu a:focus-visible{color:var(--ink);background:var(--teal-faint);outline:none;}
.lang-menu a[aria-current]{color:var(--ink);font-weight:500;}
.lang-menu__tick{display:inline-flex;color:var(--teal);}
.lang-menu__tick svg{width:14px;height:14px;}

/* Without JavaScript nothing can open the panel, so it stops being a panel:
   the button goes and the four links stand as an ordinary list. A visitor with
   no JavaScript still gets to change language, which a hidden list would have
   quietly taken away from them. */
html:not(.js) .lang-btn{display:none;}
html:not(.js) .lang-menu[hidden]{
  display:flex;flex-wrap:wrap;gap:2px;position:static;
  min-width:0;padding:0;border:0;box-shadow:none;background:none;
}
html:not(.js) .lang-menu a{padding:.42em .6em;font-size:.8rem;}
html:not(.js) .lang-menu__tick{display:none;}

/* In the drawer there is room below, so the panel drops rather than floats. */
.mobile-nav .lang{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);}
.mobile-nav .lang-btn{width:100%;justify-content:flex-start;border:1px solid var(--line);padding:.7em .9em;}
.mobile-nav .lang-menu{position:static;margin-top:8px;min-width:0;box-shadow:none;}