/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --deep:#0A1B2E;
  --deep-2:#123049;
  --canvas:#EAF1F8;
  --panel:#F8FBFF;
  --accent:#1B4FE0;
  --accent-hover:#1640B8;
  --accent-muted:rgba(27,79,224,.14);
  --text-primary:#0E1F33;
  --text-secondary:#4A6076;
  --titanium:#C7D2DC;
  --pearl:#F4F1EA;
  --line:rgba(14,31,51,.12);

  --display:"Be Vietnam Pro",system-ui,sans-serif;
  --body:"Nunito Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --tshadow:0 1px 2px rgba(5,8,16,.95),0 3px 12px rgba(5,8,16,.78),0 10px 44px rgba(5,8,16,.8);
  --tshadow-light:0 1px 2px rgba(234,241,248,.9),0 4px 18px rgba(234,241,248,.75);

  --pad:clamp(20px,5vw,64px);
  --maxw:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--text-primary);
  font-family:var(--body);font-weight:400;font-size:clamp(16px,1.05vw,18px);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.08;letter-spacing:-.02em;margin:0}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;font-weight:600}
.skip:focus{left:0}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.kicker{font-family:var(--mono);font-weight:500;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}

/* ============================================================
   FIXED ENVIRONMENT LAYER (one place, not stacked sections)
   ============================================================ */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env::before{
  content:"";position:absolute;left:50%;top:38%;width:150vmax;height:150vmax;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 50% 50%,rgba(27,79,224,.09) 0%,rgba(27,79,224,.04) 34%,rgba(27,79,224,0) 66%);
  animation:envBreathe 84s var(--ease-soft) infinite;animation-delay:-19s;
}
@keyframes envBreathe{0%,100%{transform:translate(-50%,-50%) scale(.86)}50%{transform:translate(-50%,-50%) scale(1.14)}}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;gap:18px;
  padding:14px var(--pad);
  background:rgba(10,27,46,0);backdrop-filter:blur(0px);
  transition:background .5s var(--ease),backdrop-filter .5s var(--ease),box-shadow .5s var(--ease);
}
.nav.solid{background:rgba(234,241,248,.86);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.nav__brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto;min-width:0}
.nav__brand img{width:38px;height:38px;border-radius:50%;flex:none}
.nav__name{font-family:var(--display);font-weight:800;font-size:.98rem;line-height:1.1;letter-spacing:-.01em;color:#fff;white-space:nowrap;text-shadow:0 1px 8px rgba(5,8,16,.7);transition:color .5s var(--ease),text-shadow .5s var(--ease)}
.nav__name small{display:block;font-family:var(--mono);font-weight:500;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;opacity:.72}
/* these must sit AFTER .nav__name small, or that rule wins the cascade and the
   location line survives on phones while the brand name disappears */
@media(max-width:560px){.nav__brand img{width:32px;height:32px}.nav__name{font-size:.82rem}.nav__name small{display:none}}
@media(max-width:400px){.nav__name{font-size:.74rem}}
.nav.solid .nav__name{color:var(--text-primary);text-shadow:none}
.nav__links{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.nav__links a{text-decoration:none;font-weight:600;font-size:.92rem;color:#fff;text-shadow:0 1px 8px rgba(5,8,16,.7);transition:color .5s var(--ease),opacity .3s var(--ease),text-shadow .5s var(--ease)}
.nav.solid .nav__links a{color:var(--text-secondary);text-shadow:none}
.nav__links a:hover{opacity:.65}
@media(max-width:900px){.nav__links{display:none}}

/* ============================================================
   MENU CHO MAN HINH HEP
   Duoi 900px thanh menu chu bi an, nen truoc day khach dung dien
   thoai khong co duong nao sang cac trang dich vu. Nut ba gach nay
   la duong do.
   ============================================================ */
.nav__toggle{
  display:none;position:relative;width:42px;height:42px;flex:none;
  border:0;border-radius:12px;background:rgba(255,255,255,.12);cursor:pointer;
  transition:background .3s var(--ease)
}
.nav.solid .nav__toggle{background:var(--accent-muted)}
.nav__toggle span{
  position:absolute;left:11px;width:20px;height:2px;border-radius:2px;background:#fff;
  transition:transform .35s var(--ease),opacity .25s var(--ease),background .3s var(--ease)
}
.nav.solid .nav__toggle span{background:var(--text-primary)}
.nav__toggle span:nth-child(1){top:14px}
.nav__toggle span:nth-child(2){top:20px}
.nav__toggle span:nth-child(3){top:26px}
.nav__toggle[aria-expanded="true"] span{background:var(--text-primary)}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:900px){ .nav__toggle{display:block} }

.menu{
  position:fixed;inset:0;z-index:95;background:var(--canvas);
  display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,4vh,36px);
  padding:96px var(--pad) calc(env(safe-area-inset-bottom,0px) + 40px);
  overflow-y:auto;opacity:0;transform:translateY(-10px);
  transition:opacity .34s var(--ease),transform .34s var(--ease)
}
.menu[hidden]{display:none}
.menu.open{opacity:1;transform:none}
.menu nav{display:grid;gap:2px}
.menu nav a{
  display:block;padding:15px 4px;text-decoration:none;
  font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.35rem,6.2vw,1.9rem);color:var(--text-primary);
  border-bottom:1px solid var(--line);transition:color .25s var(--ease)
}
.menu nav a:hover,.menu nav a:focus-visible{color:var(--accent)}
.menu nav a[aria-current="page"]{color:var(--accent)}
.menu__cta{display:grid;gap:11px}
.menu__cta .btn{width:100%;padding:15px 22px;font-size:1rem}
.menu__foot{
  font-family:var(--mono);font-size:.72rem;line-height:1.9;letter-spacing:.06em;
  color:var(--text-secondary)
}
body.menu-open{overflow:hidden}

/* ---- the ripple button: the site's signature, in miniature ---- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:999px;border:0;cursor:pointer;
  font-family:var(--body);font-weight:600;font-size:.95rem;line-height:1;white-space:nowrap;
  text-decoration:none;text-shadow:none;overflow:hidden;
  background:var(--accent);color:#fff;
  transition:background .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
  box-shadow:0 6px 20px rgba(27,79,224,.28);
}
.btn:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 10px 28px rgba(27,79,224,.34)}
.btn::after{
  content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;
  border:2px solid rgba(255,255,255,.85);transform:translate(-50%,-50%) scale(1);opacity:0;pointer-events:none;
}
.btn:hover::after{animation:btnRipple .9s var(--ease) infinite}
@keyframes btnRipple{0%{transform:translate(-50%,-50%) scale(1);opacity:.75}100%{transform:translate(-50%,-50%) scale(15);opacity:0}}
.btn--ghost{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}
.btn--ghost:hover{background:var(--accent-muted);color:var(--accent-hover);box-shadow:inset 0 0 0 2px var(--accent-hover)}
.btn--sm{padding:10px 17px;font-size:.88rem}
@media(pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* ============================================================
   HERO: pinned scrub stage
   ============================================================ */
.hero{position:relative;height:600vh;z-index:1}
.stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  background:var(--deep);
}
.stage__poster{position:absolute;inset:0;background-size:cover;background-position:center;background-color:var(--deep);transition:opacity .8s var(--ease)}
.stage video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s var(--ease);
  will-change:transform;transform:translateZ(0);
}
.stage.video-ready video{opacity:1}
.stage.video-ready .stage__poster{opacity:0}
.stage.video-failed video{display:none}

/* global base scrim: no frame is ever raw behind type */
.scrim{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 122% 92% at 50% 45%,rgba(6,14,26,0) 33%,rgba(6,14,26,.62) 100%)}

/* loading ring */
.ring{position:absolute;left:50%;bottom:52px;transform:translateX(-50%) rotate(-90deg);width:44px;height:44px;color:rgba(255,255,255,.7);z-index:6;transition:opacity .6s var(--ease)}
.ring circle{transition:stroke-dashoffset .18s linear}
.stage.video-ready .ring{opacity:0}
/* Goi y "cuon xuong" chi co ich o dau trang. Cuon roi thi tat, vua dung ve mat
   thiet ke vua tranh va cham: tren man hep khoi chu tut xuong day va de len
   dung cai vach nay (do duoc: diem sang rgb(137,142,147) tai x=195,y=740). */
.cue{transition:opacity .45s var(--ease)}
.stage.cue-off .cue{opacity:0;pointer-events:none}
.cue{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);z-index:6;color:rgba(255,255,255,.66);font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:9px}
.cue span{display:block;width:1px;height:34px;background:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,0));animation:cueDrop 2.6s var(--ease-soft) infinite;animation-delay:-.6s}
@keyframes cueDrop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}46%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* caption bands */
.bands{position:absolute;inset:0;z-index:5;pointer-events:none}
/* The implant owns the centre lane. Captions flank it and never sit on it,
   so each band gets its own scrim anchored on its own column. */
.band{
  position:absolute;inset:0;display:flex;align-items:center;
  opacity:0;padding:0 clamp(24px,5.5vw,88px);
  text-shadow:var(--tshadow);
}
.band::before{
  content:"";position:absolute;inset:-4%;pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1));
}
.band--left{justify-content:flex-start}
.band--right{justify-content:flex-end}
.band--left::before{background:radial-gradient(ellipse 44% 56% at 24% 50%,rgba(4,9,18,.74) 0%,rgba(4,9,18,.5) 44%,rgba(4,9,18,0) 76%)}
.band--right::before{background:radial-gradient(ellipse 44% 56% at 76% 50%,rgba(4,9,18,.74) 0%,rgba(4,9,18,.5) 44%,rgba(4,9,18,0) 76%)}
/* the container is capped in px, never ch: a ch on a container resolves against
   the body font it inherits, not the display face inside it */
.band__inner{position:relative;max-width:min(430px,32vw);color:#fff}
.band--left .band__inner{text-align:left}
.band--right .band__inner{text-align:right}
.band h2{font-size:clamp(1.9rem,4.1vw,3.6rem);margin-bottom:.44em;max-width:11ch}
.band--right h2{margin-left:auto}
.band p{font-size:clamp(.98rem,1.45vw,1.26rem);line-height:1.45;opacity:.94;max-width:24ch}
.band--right p{margin-left:auto}

/* Band 4 sits over the bright ending frame, where the implant rests low and the
   space above it is clean. So it centres, rides high, clears the nav, and the
   whole legibility system inverts to dark type on a light scrim. */
.band--settle{align-items:flex-start;justify-content:center;text-shadow:var(--tshadow-light)}
.band--settle::before{background:radial-gradient(ellipse 76% 56% at 50% 34%,rgba(238,244,250,.97) 0%,rgba(238,244,250,.86) 40%,rgba(238,244,250,.4) 68%,rgba(238,244,250,0) 88%)}
.band--settle .band__inner{color:var(--text-primary);max-width:min(620px,52vw);text-align:center;padding-top:clamp(96px,15vh,150px)}
.band--settle h2{max-width:none}
.band--settle p{opacity:1;color:var(--text-secondary);max-width:26ch;margin-inline:auto}
.band--settle .band__cta{margin-top:26px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;pointer-events:auto}

/* word + character split targets */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}

/* (a) drift-down: words fall into place, echoing the implant */
.e-drift .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * -26px))}
/* (c) blur-to-sharp: two stacked copies, opacity only.
   position:relative goes on the h2, not the band, or the blurred copy is
   anchored to the whole viewport-tall band instead of to its own headline. */
.e-blur h2{position:relative}
.e-blur .soft{position:absolute;inset:0;filter:blur(11px);opacity:calc(1 - var(--k,0));pointer-events:none}
.e-blur .sharp{opacity:var(--k,0)}
/* (b) grid snap-align: characters slide horizontally into reading order */
.e-snap .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*3.1,1);opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc)) * var(--jx,0px)))}
/* (e) word-by-word rise into a staged settle */
.e-rise .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.7,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 22px))}
.e-rise .sub{opacity:var(--ks,0);transform:translateY(calc((1 - var(--ks,0)) * 14px))}
.e-rise .band__cta{opacity:var(--kb,0);transform:translateY(calc((1 - var(--kb,0)) * 14px))}

/* static hero, for phones and reduced motion. A designed layout, not an apology. */
/* the implant sits high in the poster, so the static hero's words live below it */
.static-hero{position:absolute;inset:0;z-index:7;display:none;align-items:end;justify-items:center;text-align:center;padding:0 var(--pad) clamp(44px,9vh,88px)}
.static-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,14,26,0) 26%,rgba(6,14,26,.5) 54%,rgba(6,14,26,.88) 100%)}
.static-hero__in{position:relative;max-width:min(340px,86vw)}
.static-hero .kicker{color:rgba(255,255,255,.82)}
.static-hero h1{font-size:clamp(2.4rem,10vw,3.6rem);color:#fff;text-shadow:var(--tshadow);margin-bottom:.4em}
.static-hero p{color:rgba(255,255,255,.9);text-shadow:var(--tshadow);margin-bottom:26px;font-size:1.02rem}
body.static-mode .bands,body.static-mode .ring,body.static-mode .cue{display:none}
body.static-mode .static-hero{display:grid}
body.static-mode .hero{height:100vh}

/* ============================================================
   HERO TREN MAN HINH HEP
   Man hinh hep khong du cho de dat chu hai ben tru implant, nen chu
   xuong day man hinh, canh giua, va scrim doi thanh dai sang tu duoi
   len. Giong het cach hero tinh dang lam, chi khac la co video.
   ============================================================ */
@media(max-width:720px){
  .band{align-items:flex-end;justify-content:center;padding:0 var(--pad) 12vh}
  .band--left,.band--right{justify-content:center}
  .band__inner,
  .band--left .band__inner,
  .band--right .band__inner{max-width:min(340px,88vw);margin-inline:auto;text-align:center}
  .band h2{max-width:none;font-size:clamp(1.75rem,7.6vw,2.4rem)}
  .band--right h2{margin-inline:auto}
  .band p{max-width:none;margin-inline:auto;font-size:1rem}
  /* dai sang phai dam som hon: o giua hero, mao su sang cua tru implant roi
     dung vao vung chu va keo tuong phan xuong 3.15. Do lai sau khi sua: 16+. */
  .band::before,
  .band--left::before,
  .band--right::before{
    background:linear-gradient(180deg,rgba(6,14,26,0) 20%,rgba(6,14,26,.64) 46%,
      rgba(6,14,26,.93) 74%,rgba(6,14,26,.96) 100%)}
  .band--settle{align-items:flex-end}
  .band--settle .band__inner{padding-top:0;max-width:min(340px,88vw)}
  .band--settle::before{
    background:linear-gradient(180deg,rgba(238,244,250,0) 24%,rgba(238,244,250,.7) 52%,rgba(238,244,250,.97) 100%)}
  .band--settle .band__cta{margin-top:20px}
}

/* ============================================================
   SHARED SECTION SHELL
   ============================================================ */
.sec{position:relative;z-index:2;background:var(--canvas);padding:clamp(72px,11vw,144px) 0}
.sec--tint{background:linear-gradient(180deg,var(--canvas) 0%,#E1EAF5 50%,var(--canvas) 100%)}
.sec__head{max-width:min(760px,72vw);margin-bottom:clamp(38px,5vw,64px)}
.sec__head h2{font-size:clamp(1.9rem,4.1vw,3.1rem)}
.sec__head p{margin-top:18px;color:var(--text-secondary);font-size:1.06rem;max-width:46ch}

/* self-drawing concentric divider: the signature, at section scale */
.rings{display:block;width:100%;height:96px;overflow:visible;margin:0 auto}
.rings circle{fill:none;stroke:var(--accent);stroke-opacity:.34;
  stroke-dasharray:var(--len);stroke-dashoffset:calc(var(--len) * (1 - var(--draw,0)));
  transition:stroke-dashoffset 1.1s var(--ease)}

/* entrance choreography */
.re{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.in .re{opacity:1;transform:none}
.in .re:nth-child(2){transition-delay:.09s}
.in .re:nth-child(3){transition-delay:.18s}
.in .re:nth-child(4){transition-delay:.27s}
.in .re:nth-child(5){transition-delay:.36s}
.in .re:nth-child(6){transition-delay:.45s}
.in .re:nth-child(7){transition-delay:.54s}
/* retire the stagger once the entrance is done, at matching specificity */
.in.settled .re:nth-child(2),.in.settled .re:nth-child(3),.in.settled .re:nth-child(4),
.in.settled .re:nth-child(5),.in.settled .re:nth-child(6),.in.settled .re:nth-child(7){transition-delay:0s}

/* ============================================================
   S1  TWO QUESTIONS  (two tall cards, question type oversized)
   ============================================================ */
.qs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:clamp(18px,2.4vw,30px)}
.q{
  position:relative;background:var(--panel);border-radius:22px;padding:clamp(28px,3.4vw,44px);
  box-shadow:0 1px 0 var(--line),0 18px 44px rgba(14,31,51,.06);overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.q:hover{transform:translateY(-4px);box-shadow:0 1px 0 var(--line),0 26px 60px rgba(14,31,51,.1)}
.q::after{
  content:"";position:absolute;right:-70px;top:-70px;width:210px;height:210px;border-radius:50%;
  border:1.5px solid var(--accent);opacity:.14;
}
.q h3{font-size:clamp(1.7rem,3.3vw,2.5rem);margin-bottom:.55em;position:relative}
.q p{color:var(--text-secondary);position:relative;max-width:38ch}
.q .mark{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;color:var(--accent);display:block;margin-bottom:16px}
.q__pulse{position:absolute;left:clamp(28px,3.4vw,44px);bottom:clamp(24px,3vw,36px);width:9px;height:9px;border-radius:50%;background:var(--accent)}
.q__pulse::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 var(--accent);animation:qPulse 4.4s var(--ease-soft) infinite;animation-delay:-1.4s}
@keyframes qPulse{0%{box-shadow:0 0 0 0 rgba(27,79,224,.42)}70%,100%{box-shadow:0 0 0 22px rgba(27,79,224,0)}}

/* ============================================================
   S2  SERVICES  (two groups, asymmetric: group label runs vertical)
   ============================================================ */
.grp{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,44px);align-items:start}
.grp + .grp{margin-top:clamp(48px,6vw,88px)}
/* the rotation lives on the inner span so the entrance's transform on .re
   cannot cancel it (a later transform wins the cascade outright) */
.grp__label{display:flex;align-items:flex-start;border-right:2px solid var(--accent-muted);padding-right:10px}
.grp__label span{
  writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);
  font-family:var(--display);font-weight:800;font-size:clamp(1.1rem,1.7vw,1.5rem);
  letter-spacing:.01em;color:var(--accent);white-space:nowrap;padding:6px 0;
}
@media(max-width:720px){
  .grp{grid-template-columns:1fr}
  .grp__label{border-right:0;border-left:3px solid var(--accent);padding:0 0 0 14px}
  .grp__label span{writing-mode:horizontal-tb;transform:none;padding:0}
}
.svcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:clamp(14px,1.8vw,22px);margin:0;padding:0;list-style:none}
.svc{
  position:relative;background:var(--panel);border-radius:18px;padding:26px 24px 28px;
  box-shadow:0 1px 0 var(--line);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.svc:hover{transform:translateY(-3px);box-shadow:0 1px 0 var(--line),0 18px 40px rgba(14,31,51,.09)}
.svc svg{width:44px;height:44px;margin-bottom:16px;display:block;color:var(--accent)}
.svc h4{font-size:1.12rem;margin-bottom:.5em}
.svc p{font-size:.94rem;color:var(--text-secondary)}
/* the stretched pseudo-element makes the whole card clickable while the link
   itself stays a real, readable, keyboard-reachable link */
.svc__link{display:inline-block;margin-top:15px;text-decoration:none;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.svc__link::after{content:"";position:absolute;inset:0;border-radius:18px}
.svc__link:hover{color:var(--accent-hover)}

/* the two flagship services get a paired image strip, equal treatment both */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,22px);margin-bottom:clamp(26px,3.4vw,40px)}
@media(max-width:640px){.feature{grid-template-columns:1fr}}
.feature figure{margin:0;border-radius:18px;overflow:hidden;background:var(--panel);box-shadow:0 12px 34px rgba(14,31,51,.08)}
.feature img{width:100%;aspect-ratio:16/10;object-fit:cover}
.feature figcaption{padding:14px 18px 17px;font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-secondary)}

/* the signature, at full width: the ripple as a photograph */
.bandimg{position:relative;z-index:2;display:grid;place-items:center;min-height:min(62vh,520px);overflow:hidden;background:var(--canvas)}
.bandimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bandimg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 42% 48%,rgba(234,241,248,.72) 0%,rgba(234,241,248,.3) 55%,rgba(234,241,248,0) 82%)}
.bandimg__in{position:relative;z-index:3;text-align:center;padding:0 var(--pad)}
.bandimg h2{font-size:clamp(1.7rem,4.4vw,3.2rem);max-width:15ch;margin:0 auto}
.bandimg p{margin-top:16px;color:var(--text-secondary);max-width:36ch;margin-inline:auto}

/* ============================================================
   S3  THE ONE INTERACTIVE MOMENT
   ============================================================ */
.hold{text-align:center}
.hold__stage{
  position:relative;width:min(100%,420px);margin:clamp(26px,4vw,44px) auto 0;aspect-ratio:1/1;
  display:grid;place-items:center;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;
}
.hold__stage:active{cursor:grabbing}
.hold__svg{width:100%;height:100%;overflow:visible}
.hold__hint{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-top:6px;transition:opacity .5s var(--ease)}
.hold.done .hold__hint{opacity:0}
.hold__list{list-style:none;margin:clamp(24px,3.4vw,40px) auto 0;padding:0;display:grid;gap:12px;max-width:520px;text-align:left}
.hold__list li{
  display:flex;align-items:baseline;gap:13px;padding:15px 20px;border-radius:14px;
  background:var(--panel);box-shadow:0 1px 0 var(--line);
  opacity:.32;transform:translateY(9px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),box-shadow .6s var(--ease);
}
.hold__list li.lit{opacity:1;transform:none;box-shadow:0 1px 0 var(--line),0 12px 30px rgba(27,79,224,.13)}
.hold__list b{font-family:var(--mono);font-weight:500;font-size:.74rem;color:var(--accent);flex:none}
.hold__done{margin-top:22px;color:var(--text-secondary);opacity:0;transition:opacity .7s var(--ease)}
.hold.done .hold__done{opacity:1}

/* ============================================================
   S4  THE REAL PLACE  (full-bleed photo, stats riding the bottom)
   ============================================================ */
.place{position:relative;z-index:2;min-height:min(88vh,760px);display:grid;align-items:end;overflow:hidden;background:var(--deep)}
.place__bg{position:absolute;inset:0}
.place__bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.place__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,27,46,.62) 0%,rgba(10,27,46,.18) 34%,rgba(10,27,46,.88) 100%)}
.place__in{position:relative;padding:clamp(48px,7vw,92px) 0}
.place__in h2{color:#fff;font-size:clamp(1.8rem,3.9vw,3rem);max-width:16ch;text-shadow:var(--tshadow)}
.place__in p{color:rgba(255,255,255,.9);margin-top:16px;max-width:44ch;text-shadow:var(--tshadow)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;margin-top:clamp(30px,4vw,48px);list-style:none;padding:0}
.stat{padding:18px 20px;border-radius:14px;background:rgba(8,18,32,.5);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px)}
.stat b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,3vw,2.3rem);color:#fff;line-height:1;letter-spacing:-.02em}
.stat span{display:block;margin-top:7px;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)}

/* ============================================================
   S5  PEOPLE  (offset portrait grid, deliberately uneven)
   ============================================================ */
.people{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,20px);align-items:start}
.people figure{margin:0;border-radius:18px;overflow:hidden;background:var(--panel);box-shadow:0 14px 40px rgba(14,31,51,.09)}
.people img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.people figure:hover img{transform:scale(1.035)}
.people .p1{grid-column:span 5;aspect-ratio:3/4}
.people .p2{grid-column:span 7;aspect-ratio:3/2;margin-top:clamp(22px,4vw,60px)}
.people .p3{grid-column:span 7;aspect-ratio:3/2}
.people .p4{grid-column:span 5;aspect-ratio:3/4;margin-top:clamp(-40px,-3vw,0px)}
@media(max-width:760px){.people .p1,.people .p2,.people .p3,.people .p4{grid-column:span 12;margin-top:0;aspect-ratio:4/3}}

/* ============================================================
   S6  EQUIPMENT  (split, text left, drawn line between)
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,68px);align-items:center}
@media(max-width:840px){.split{grid-template-columns:1fr}}
.split__fig{margin:0;border-radius:20px;overflow:hidden;box-shadow:0 20px 54px rgba(14,31,51,.12)}
.split h2{font-size:clamp(1.8rem,3.7vw,2.8rem);margin-bottom:.5em}
.split p{color:var(--text-secondary);max-width:44ch}
.tally{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,44px);margin-top:34px;padding:0;list-style:none}
.tally li b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,2.7vw,2.1rem);letter-spacing:-.02em;color:var(--accent);line-height:1}
.tally li span{display:block;margin-top:6px;font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-secondary)}

/* ============================================================
   S7  FAQ  (accordion, hairline rows)
   ============================================================ */
.faq{border-top:1px solid var(--line);max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-family:var(--display);font-weight:700;font-size:clamp(1.02rem,1.6vw,1.24rem);letter-spacing:-.01em;
  transition:color .3s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:15px;height:15px;margin-top:-7px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg) translateY(-3px);transition:transform .4s var(--ease);
}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.faq .a{padding:0 0 26px;color:var(--text-secondary);max-width:56ch}

/* ============================================================
   S8  MONEY
   ============================================================ */
.money{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:clamp(16px,2vw,26px);margin-top:clamp(30px,4vw,48px);list-style:none;padding:0}
.money li{position:relative;padding:26px 24px;border-radius:16px;background:var(--panel);box-shadow:0 1px 0 var(--line)}
.money b{display:block;font-family:var(--display);font-weight:800;font-size:1.08rem;margin-bottom:8px}
.money p{font-size:.94rem;color:var(--text-secondary)}
.money li::before{content:"";position:absolute;left:24px;top:0;width:34px;height:3px;border-radius:0 0 3px 3px;background:var(--accent)}

/* ============================================================
   S9  FINAL CTA + FORM
   ============================================================ */
.end{position:relative;z-index:2;background:var(--deep);color:#fff;padding:clamp(72px,10vw,132px) 0;overflow:hidden}
.end::before{
  content:"";position:absolute;left:50%;top:50%;width:min(150vw,1500px);aspect-ratio:1/1;transform:translate(-50%,-50%);
  border-radius:50%;border:1px solid rgba(255,255,255,.09);
  box-shadow:0 0 0 90px rgba(255,255,255,.035),0 0 0 200px rgba(255,255,255,.022),0 0 0 330px rgba(255,255,255,.014);
}
.end__in{position:relative;text-align:center;max-width:640px;margin:0 auto}
.end h2{font-size:clamp(2rem,4.7vw,3.4rem);margin-bottom:.44em}
.end > .wrap > .end__in > p{color:rgba(255,255,255,.8);max-width:40ch;margin:0 auto}
.end__cta{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.end .btn--ghost{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.45)}
.end .btn--ghost:hover{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}

.form{margin-top:clamp(40px,5vw,64px);display:grid;gap:13px;text-align:left}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
@media(max-width:600px){.form__row{grid-template-columns:1fr}}
.form label{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:7px}
.form input,.form textarea{
  width:100%;padding:14px 16px;border-radius:12px;font-family:var(--body);font-size:1rem;color:#fff;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.form input::placeholder,.form textarea::placeholder{color:rgba(255,255,255,.38)}
.form input:focus,.form textarea:focus{outline:none;border-color:rgba(255,255,255,.65);background:rgba(255,255,255,.11)}
.form textarea{resize:vertical;min-height:92px}
.form .btn{width:100%;margin-top:5px}
.form__ok{
  display:none;align-items:center;gap:12px;padding:20px 22px;border-radius:14px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.24);color:#fff;
}
.form.sent .form__row,.form.sent .form__field,.form.sent .btn{display:none}
.form.sent .form__ok{display:flex}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{position:relative;z-index:2;background:#071522;color:rgba(255,255,255,.66);padding:clamp(48px,6vw,80px) 0 40px;font-size:.92rem}
.foot__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));gap:clamp(24px,3vw,44px)}
.foot h3{color:#fff;font-size:.82rem;font-family:var(--mono);font-weight:500;letter-spacing:.15em;text-transform:uppercase;margin-bottom:14px}
.foot a{color:rgba(255,255,255,.82);text-decoration:none;transition:color .3s var(--ease)}
.foot a:hover{color:#fff}
.foot__brand{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.foot__brand img{width:44px;height:44px;border-radius:50%}
.foot__brand b{display:block;font-family:var(--display);font-weight:800;color:#fff;font-size:1.02rem;letter-spacing:-.01em}
.foot__brand span{font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;opacity:.66}
.foot__bar{margin-top:clamp(34px,4vw,54px);padding-top:22px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;color:rgba(255,255,255,.44)}

/* ============================================================
   SHORT SCREENS + REDUCED MOTION
   ============================================================ */
@media(max-height:560px){.cue,.ring{display:none}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0s !important;
  }
  .re{opacity:1;transform:none}
  .rings circle{stroke-dashoffset:0}
  .hold__list li{opacity:1;transform:none}
  .e-drift .w,.e-snap .c,.e-rise .w{opacity:1;transform:none}
  .e-blur .soft{opacity:0}.e-blur .sharp{opacity:1}
  .e-rise .sub,.e-rise .band__cta{opacity:1;transform:none}
  .btn:hover{transform:none}
}
/* elements pinned to their final state by the live reduced-motion flip */
.pinned .re{opacity:1;transform:none}
.pinned .rings circle{stroke-dashoffset:0}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* ============================================================
   SERVICE PAGES
   Same world as the home page, different skeleton: a still hero
   instead of the scrub, then the worries answered one at a time.
   ============================================================ */
.phero{position:relative;z-index:1;min-height:min(74vh,660px);display:grid;align-items:end;overflow:hidden;background:var(--deep)}
.phero__bg{position:absolute;inset:0}
.phero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
.phero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,20,34,.72) 0%,rgba(8,20,34,.34) 38%,rgba(8,20,34,.9) 100%)}
.phero__in{position:relative;padding:clamp(96px,13vh,150px) 0 clamp(44px,6vw,80px)}
.phero .kicker{color:#8FB4FF}
.phero h1{color:#fff;font-size:clamp(2.1rem,5.2vw,4rem);max-width:15ch;text-shadow:var(--tshadow)}
.phero__lede{color:rgba(255,255,255,.9);margin-top:18px;max-width:46ch;font-size:clamp(1rem,1.4vw,1.18rem);text-shadow:var(--tshadow)}
.phero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.phero .btn--ghost{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.45)}
.phero .btn--ghost:hover{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.75)}

/* the worries, one per block, alternating so no two read the same */
.worries{display:grid;gap:clamp(30px,4.6vw,62px)}
.worry{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.6vw,38px);align-items:start}
.worry__n{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:.9;
  color:var(--accent);opacity:.28;letter-spacing:-.03em}
.worry h2{font-size:clamp(1.5rem,2.9vw,2.3rem);margin-bottom:.5em;max-width:20ch}
.worry p{color:var(--text-secondary);max-width:56ch}
.worry p + p{margin-top:14px}
.worry__note{margin-top:18px;padding:16px 20px;border-radius:14px;background:var(--panel);
  box-shadow:0 1px 0 var(--line);border-left:3px solid var(--accent);color:var(--text-primary);max-width:52ch}
.worry:nth-child(even){grid-template-columns:1fr auto;direction:rtl}
.worry:nth-child(even) > *{direction:ltr}
@media(max-width:720px){
  .worry,.worry:nth-child(even){grid-template-columns:1fr;direction:ltr;gap:8px}
  .worry__n{font-size:2rem}
}

/* the steps: a plain honest sequence, not a decorated timeline */
.steps{list-style:none;margin:0;padding:0;counter-reset:s;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));gap:clamp(14px,1.8vw,22px)}
.steps li{position:relative;counter-increment:s;padding:26px 22px 24px;border-radius:16px;
  background:var(--panel);box-shadow:0 1px 0 var(--line)}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;margin-bottom:12px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;color:var(--accent)}
.steps b{display:block;font-family:var(--display);font-weight:800;font-size:1.06rem;margin-bottom:7px}
.steps p{font-size:.94rem;color:var(--text-secondary)}

/* cross links, so a phone with no nav menu still has a way through the site */
.cross{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr));gap:clamp(12px,1.6vw,18px)}
.cross a{display:block;padding:22px 22px 24px;border-radius:16px;text-decoration:none;
  background:var(--panel);box-shadow:0 1px 0 var(--line);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.cross a:hover{transform:translateY(-3px);box-shadow:0 1px 0 var(--line),0 16px 38px rgba(14,31,51,.1)}
.cross span{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:9px}
.cross b{display:block;font-family:var(--display);font-weight:800;font-size:1.1rem;margin-bottom:6px}
.cross p{font-size:.92rem;color:var(--text-secondary)}

/* The nav marks where you are. Over the dark hero the brand blue is unreadable,
   so the transparent state marks the current page with white plus a rule, and
   only the solid state can afford the accent colour. */
.nav__links a[aria-current="page"]{
  color:#fff;text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:7px;text-decoration-color:#8FB4FF;
}
.nav.solid .nav__links a[aria-current="page"]{color:var(--accent);text-decoration-color:var(--accent)}

/* on a tall phone crop the subject sits lower in the frame */
@media(max-width:720px){ .phero__bg img{object-position:center 48%} }

/* footer sitemap */
.foot__nav{list-style:none;margin:0;padding:0;display:grid;gap:8px}

/* ============================================================
   KET QUA THAT
   Anh cat ra tu poster fanpage cua phong kham. Poster goc van xem
   duoc qua lightbox, nen o day chi giu phan anh that, khong giu chu.
   ============================================================ */
.sec--deep{background:var(--deep);color:#fff;overflow:hidden}
.sec--deep .kicker{color:#8FB4FF}
.sec--deep .sec__head p{color:rgba(255,255,255,.74)}
.sec--deep::before{
  content:"";position:absolute;right:-22vmax;top:-22vmax;width:60vmax;aspect-ratio:1/1;border-radius:50%;pointer-events:none;
  border:1px solid rgba(143,180,255,.12);
  box-shadow:0 0 0 70px rgba(143,180,255,.03),0 0 0 160px rgba(143,180,255,.02)
}
.sec--deep > .wrap{position:relative}

/* filter chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:calc(clamp(38px,5vw,64px) * -.45) 0 clamp(26px,3.4vw,40px)}
.chip{
  appearance:none;border:0;cursor:pointer;padding:10px 16px;border-radius:999px;
  background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);
  font-family:var(--body);font-weight:600;font-size:.88rem;line-height:1;color:var(--text-secondary);
  transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease)
}
.chip:hover{color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.chip[aria-pressed="true"]{background:var(--text-primary);color:#fff;box-shadow:none}
.chip small{font-family:var(--mono);font-size:.66rem;margin-left:6px;opacity:.6}
@media(pointer:coarse){.chip{min-height:40px}}

/* before / after card: two halves, the "after" leans in on hover */
.ba-grid{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:dense;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:clamp(16px,2vw,26px)}
.ba{
  position:relative;display:flex;flex-direction:column;background:var(--panel);color:var(--text-primary);border-radius:20px;overflow:hidden;
  box-shadow:0 1px 0 var(--line),0 18px 44px rgba(14,31,51,.07);
  transition:opacity .85s var(--ease),transform .55s var(--ease),box-shadow .55s var(--ease)
}
.ba:hover{transform:translateY(-4px);box-shadow:0 1px 0 var(--line),0 28px 60px rgba(14,31,51,.13)}
.ba[hidden]{display:none}
.ba__pair{display:flex;gap:3px;aspect-ratio:16/9;background:var(--deep)}
@media(min-width:760px){.ba--wide{grid-column:span 2}.ba--wide .ba__pair{aspect-ratio:auto;flex:1;min-height:240px}}
.ba__half{position:relative;flex:1 1 0;min-width:0;margin:0;overflow:hidden;transition:flex-grow .8s var(--ease)}
.ba:hover .ba__half--sau,.ba:focus-within .ba__half--sau{flex-grow:1.5}
.ba__half img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.ba:hover .ba__half--sau img{transform:scale(1.04)}
.ba__tag{
  position:absolute;left:10px;top:10px;padding:6px 10px 5px;border-radius:999px;
  font-family:var(--mono);font-weight:500;font-size:.6rem;line-height:1;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:rgba(8,18,32,.6);backdrop-filter:blur(6px)
}
.ba__half--sau .ba__tag{background:var(--accent)}
.ba__meta{display:flex;align-items:center;gap:14px;padding:17px 18px 19px}
.ba__meta > div{flex:1;min-width:0}
.ba__meta > div > span{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.ba__meta b{display:block;font-family:var(--display);font-weight:800;font-size:1.04rem;line-height:1.25;letter-spacing:-.01em}
.ba__meta p{font-size:.88rem;color:var(--text-secondary);margin-top:4px}

/* one invisible button covers the card; the round icon is only its visible sign */
.zoom{
  flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-muted);color:var(--accent);transition:background .3s var(--ease),color .3s var(--ease)
}
.zoom svg{width:17px;height:17px}
.ba:hover .zoom,.ba:focus-within .zoom{background:var(--accent);color:#fff}
.ba__hit{position:absolute;inset:0;z-index:1;border:0;padding:0;background:none;cursor:zoom-in;border-radius:20px}
.ba__hit:focus-visible{outline-offset:-4px}

.proof-note{margin-top:clamp(22px,3vw,34px);font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--text-secondary)}
.sec--deep .proof-note{color:rgba(255,255,255,.5)}

/* Fanpage post card. The images are designed posters with their own type, so the
   caption sits under the image, never over it. A real photo drops into the same
   square frame later with no markup change. */
.post{
  position:relative;margin:0;display:flex;flex-direction:column;
  background:var(--panel);color:var(--text-primary);border-radius:20px;padding:10px 10px 0;
  box-shadow:0 1px 0 var(--line),0 22px 50px rgba(0,0,0,.2);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease)
}
.post:hover{transform:translateY(-4px);box-shadow:0 1px 0 var(--line),0 30px 64px rgba(0,0,0,.28)}
.post__img{aspect-ratio:1/1;border-radius:13px;overflow:hidden;background:var(--canvas)}
.post__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.post:hover .post__img img{transform:scale(1.03)}
.post figcaption{display:flex;align-items:center;gap:12px;padding:15px 8px 17px}
.post figcaption > div{flex:1;min-width:0}
.post figcaption > div > span{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.post figcaption b{display:block;font-family:var(--display);font-weight:800;font-size:1rem;line-height:1.28;letter-spacing:-.01em}
.post:hover .zoom,.post:focus-within .zoom{background:var(--accent);color:#fff}
.post__hit{position:absolute;inset:0;z-index:1;border:0;padding:0;background:none;cursor:zoom-in;border-radius:20px}
.post__hit:focus-visible{outline-offset:-4px}
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:clamp(16px,2vw,26px)}

.moment{position:relative;margin:0;border-radius:20px;overflow:hidden;background:var(--deep-2);
  box-shadow:0 22px 50px rgba(0,0,0,.28)}
.moment img{width:100%;height:100%;object-fit:cover;object-position:center 25%;transition:transform 1.3s var(--ease)}
.moment:hover img{transform:scale(1.045)}
.moment figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:70px 20px 19px;color:#fff;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,14,26,0) 0%,rgba(6,14,26,.55) 45%,rgba(6,14,26,.9) 100%)
}
.moment figcaption span{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:#8FB4FF;margin-bottom:7px}
.moment figcaption b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(1rem,1.5vw,1.16rem);line-height:1.25;letter-spacing:-.01em}
.moment__hit{position:absolute;inset:0;z-index:1;border:0;padding:0;background:none;cursor:zoom-in}
.moment__hit:focus-visible{outline-offset:-4px}

/* horizontal rail, bleeding to the viewport edge but starting on the wrap line */
.rail-wrap{position:relative}
.rail{
  --inset:max(var(--pad),calc((100vw - var(--maxw)) / 2 + var(--pad)));
  display:flex;gap:clamp(14px,1.8vw,22px);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--inset);
  padding:6px var(--inset) 30px;margin:0;list-style:none;scrollbar-width:none
}
.rail::-webkit-scrollbar{display:none}
.rail > .post{flex:none;width:clamp(270px,25vw,330px);scroll-snap-align:start}
@media(max-width:560px){.rail > .post{width:76vw}}
.rail__ctl{display:flex;gap:10px;justify-content:flex-end;margin-top:4px}
.rail__ctl button{
  width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35);
  transition:background .3s var(--ease),box-shadow .3s var(--ease),opacity .3s var(--ease)
}
.rail__ctl button:hover{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75)}
.rail__ctl button:disabled{opacity:.3;cursor:default;background:transparent}
.rail__ctl svg{width:18px;height:18px}
.sec:not(.sec--deep) .rail__ctl button{color:var(--text-primary);box-shadow:inset 0 0 0 1.5px var(--line)}

/* case: one before/after beside one post */
.case{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(16px,2vw,26px);align-items:stretch}
@media(max-width:760px){.case{grid-template-columns:1fr}}
.case .ba__pair{aspect-ratio:auto;flex:1;min-height:260px}
.case > .post{align-self:start}

/* equipment split: a collage instead of a single photo */
.collage{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:1fr 1fr;gap:clamp(10px,1.4vw,16px);min-height:clamp(360px,40vw,520px)}
.collage .moment{box-shadow:0 20px 54px rgba(14,31,51,.14)}
.collage .moment:first-child{grid-row:span 2}
@media(max-width:560px){.collage{min-height:0;grid-template-rows:auto auto}.collage .moment:first-child{grid-row:auto;grid-column:span 2;aspect-ratio:4/3}.collage .moment{aspect-ratio:1/1}}

/* featured case: one real before/after, same camera, dragged apart */
.feat{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,60px);align-items:center;margin-bottom:clamp(48px,6vw,84px)}
@media(min-width:821px){.feat--flip{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.feat--flip .cmp{order:2}}
@media(max-width:820px){.feat{grid-template-columns:1fr}}
.feat__txt h3{font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:.5em}
.feat__txt p{color:var(--text-secondary);max-width:40ch}
.feat__txt p + p{margin-top:12px}
.sec--deep .feat__txt p{color:rgba(255,255,255,.76)}
.feat__hint{display:inline-flex;align-items:center;gap:9px;margin-top:22px;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.sec--deep .feat__hint{color:#8FB4FF}
.feat__hint::before{content:"";width:26px;height:1.5px;background:currentColor}

.cmp{position:relative;margin:0;aspect-ratio:1/1;border-radius:22px;overflow:hidden;background:var(--deep-2);
  box-shadow:0 28px 70px rgba(14,31,51,.22);--p:50%;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.cmp__b{position:absolute;inset:0;clip-path:inset(0 0 0 var(--p))}
.cmp__line{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 14px rgba(0,0,0,.35);pointer-events:none}
.cmp__knob{position:absolute;top:50%;left:var(--p);width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;
  background:#fff;color:var(--accent);display:grid;place-items:center;box-shadow:0 8px 26px rgba(0,0,0,.3);pointer-events:none;transition:transform .3s var(--ease)}
.cmp__knob svg{width:24px;height:24px}
.cmp:hover .cmp__knob{transform:scale(1.08)}
.cmp__tag{position:absolute;top:14px;padding:7px 12px 6px;border-radius:999px;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;pointer-events:none}
.cmp__tag--a{left:14px;background:rgba(8,18,32,.62);backdrop-filter:blur(6px)}
.cmp__tag--b{right:14px;background:var(--accent)}
.cmp__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.cmp:has(.cmp__range:focus-visible){outline:3px solid var(--accent);outline-offset:4px}

/* gallery that shows a first handful and opens the rest on request */
.posts > .post[hidden]{display:none}
.more{display:flex;justify-content:center;margin-top:clamp(24px,3vw,36px)}
.sec--deep .more .btn--ghost{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.45)}
.sec--deep .more .btn--ghost:hover{background:rgba(255,255,255,.1)}

/* photo album: one wide opener, then a dense mix of landscape and portrait */
.album{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(130px,15vw,210px);grid-auto-flow:dense;gap:clamp(10px,1.4vw,16px)}
.album .moment{height:100%}
.album .moment img{object-position:center 35%}
.album .big{grid-column:span 4;grid-row:span 2}
.album .w2{grid-column:span 2}
.album .h2{grid-row:span 2}
@media(max-width:640px){.album{grid-template-columns:repeat(2,1fr);grid-auto-rows:34vw}.album .big{grid-column:span 2}}

/* job cards */
.jobs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:clamp(16px,2vw,26px)}
.job{position:relative;padding:28px 26px 26px;border-radius:20px;background:var(--panel);box-shadow:0 1px 0 var(--line),0 18px 44px rgba(14,31,51,.06)}
.job::before{content:"";position:absolute;left:26px;top:0;width:34px;height:3px;border-radius:0 0 3px 3px;background:var(--accent)}
.job h3{font-size:1.28rem;margin-bottom:.55em}
.job > p{color:var(--text-secondary);font-size:.95rem}
.job ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.job li{position:relative;padding-left:18px;font-size:.93rem}
.job li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--accent);opacity:.55}

/* film block: a poster that becomes a real player on click */
.film{position:relative;margin:0;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.film.playing video{object-fit:contain}
.film__play{position:absolute;inset:0;z-index:2;display:grid;place-items:center;border:0;padding:0;cursor:pointer;
  background:radial-gradient(ellipse at center,rgba(6,14,26,.1) 0%,rgba(6,14,26,.55) 100%);color:#fff;transition:background .4s var(--ease)}
.film__play:hover{background:radial-gradient(ellipse at center,rgba(6,14,26,.05) 0%,rgba(6,14,26,.45) 100%)}
.film__play span{display:grid;place-items:center;width:clamp(64px,8vw,92px);aspect-ratio:1/1;border-radius:50%;background:#fff;color:var(--accent);
  box-shadow:0 0 0 12px rgba(255,255,255,.18),0 18px 40px rgba(0,0,0,.35);transition:transform .4s var(--ease)}
.film__play:hover span{transform:scale(1.07)}
.film__play svg{width:34%;height:34%;margin-left:6%}
.film__play small{position:absolute;left:0;right:0;bottom:clamp(16px,3vw,28px);text-align:center;font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.film.playing .film__play{display:none}
.film__more{position:absolute;right:14px;bottom:14px;z-index:3}
.film__more .btn{background:rgba(255,255,255,.92);color:var(--text-primary);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.film__more .btn:hover{background:#fff}
.film__tag{position:absolute;left:14px;top:14px;z-index:3;padding:7px 12px 6px;border-radius:999px;background:rgba(8,18,32,.62);backdrop-filter:blur(6px);color:#fff;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase}

/* activity tabs: one event on screen at a time */
.acts > [hidden]{display:none}
.act__note{margin-top:14px;color:rgba(255,255,255,.62);font-size:.92rem}
.sec--deep .chip{background:rgba(255,255,255,.08);color:rgba(255,255,255,.8);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.sec--deep .chip:hover{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.sec--deep .chip[aria-pressed="true"]{background:#fff;color:var(--text-primary);box-shadow:none}
.lb iframe{display:block;width:min(92vw,1100px);aspect-ratio:16/9;max-height:calc(92vh - 70px);border:0;border-radius:18px;background:#000}
.lb.lb--wide{width:min(92vw,1100px)}

/* two locations: a live map on top, the facts and the two actions below */
.sites{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.2vw,28px)}
@media(max-width:820px){.sites{grid-template-columns:1fr}}
.site{display:flex;flex-direction:column;background:var(--panel);border-radius:22px;overflow:hidden;
  box-shadow:0 1px 0 var(--line),0 22px 54px rgba(14,31,51,.09)}
.site__map{position:relative;aspect-ratio:16/10;background:#DCE6F1}
.site__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.site__body{display:flex;flex-direction:column;flex:1;padding:24px clamp(20px,2.4vw,30px) 28px}
.site__n{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.site__n::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px var(--accent-muted)}
.site h3{font-size:clamp(1.3rem,2.2vw,1.65rem);margin-bottom:.45em}
.site__addr{color:var(--text-secondary);max-width:40ch}
.site__meta{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:grid;gap:6px;font-size:.93rem}
.site__meta b{font-weight:600}
.site__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:22px}
.site__cta .btn svg{width:17px;height:17px}
.foot__addr{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.foot__addr b{display:block;color:#fff;font-weight:600}
.foot__addr a{font-size:.85rem}
/* six links in the top bar: tighten them on mid-width screens so the bar never wraps */
@media(min-width:901px) and (max-width:1180px){.nav__links{gap:16px}.nav__links a{font-size:.86rem}.nav__name small{display:none}}

/* lightbox */
.lb{
  width:min(92vw,720px);max-height:92vh;padding:0;border:0;border-radius:22px;overflow:visible;
  background:transparent;color:#fff
}
.lb::backdrop{background:rgba(4,10,20,.84);backdrop-filter:blur(8px)}
.lb[open]{animation:lbIn .45s var(--ease)}
@keyframes lbIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.lb img{width:100%;max-height:calc(92vh - 70px);object-fit:contain;border-radius:18px;background:var(--deep-2);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lb__cap{margin-top:14px;text-align:center;font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.lb__x{
  position:absolute;right:-8px;top:-8px;z-index:2;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;background:#fff;color:var(--text-primary);box-shadow:0 8px 24px rgba(0,0,0,.35)
}
.lb__x svg{width:18px;height:18px}
@media(max-width:560px){.lb__x{right:6px;top:6px}}
body.lb-open{overflow:hidden}