.spa-page{display:none;}
.spa-page.active{display:block;}
/* ════════════════════════════════════
   SUTRARTHA - SHARED STYLESHEET
   Theme: Dark Luxe (onyx + champagne gold)
   Wealth, woven with purpose.
════════════════════════════════════ */

/* ── TOKENS ── */
:root{
  /* surfaces, darkest to lightest */
  --bg:#09090B;          /* page */
  --bg2:#0F0F12;         /* alternating section */
  --surface:#131318;     /* raised band */
  --foot:#060607;        /* footer */
  /* ink */
  --ink:#ECE7DE;--cream:#ECE7DE;--charcoal:#ECE7DE;
  --mute:#BFB9AE;--dim:#A8A297;
  /* gold */
  --gold:#D6BF97;--gold-hi:#EBD9B4;--gold-d:#A8875A;--sage:#B89565;
  --grad:linear-gradient(100deg,#B89565 0%,#EBD9B4 48%,#C4A26F 100%);
  /* lines + glass */
  --line:rgba(214,191,151,.16);--line2:rgba(214,191,151,.32);--border:rgba(214,191,151,.16);
  --glass:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  --glow:0 30px 60px -30px rgba(214,191,151,.30);
  /* legacy aliases: any inline style still asking for these gets a dark-theme value */
  --deep:#131318;--mist:#0F0F12;
  --d:'Bodoni Moda','Rupee Serif','Didot',Georgia,serif;
  --b:'Jost','Rupee Sans','Avenir Next',system-ui,sans-serif;
  --dev:'Noto Serif Devanagari',serif;
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
/* Bodoni's display cut turns the thin strokes to hairlines at heading sizes; the text cut
   keeps them readable on the dark ground. Inherited, so it covers every heading. */
html{scroll-behavior:smooth;font-size:16px;overflow-x:hidden;background:var(--bg);font-optical-sizing:none;}
body{background:var(--bg);color:var(--ink);font-family:var(--b);font-weight:400;font-kerning:normal;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip;}
/* clip, not hidden: hidden makes the body a scroll container, and then nothing inside can
   stay in view with position:sticky (the About portrait, the Approach FAQ heading). Older
   browsers that do not know clip keep hidden from the line above. */
img{display:block;max-width:100%;}
a{text-decoration:none;color:inherit;}
::selection{background:rgba(214,191,151,.28);color:#fff;}
/* Bodoni Moda leaves a wide gap after a capital W at display sizes. */
.kw{margin-right:-.09em;}

/* ── REVEAL ── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .65s var(--ease),transform .65s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.d1{transition-delay:.1s;}.d2{transition-delay:.2s;}.d3{transition-delay:.3s;}
.d4{transition-delay:.4s;}.d5{transition-delay:.5s;}.d6{transition-delay:.6s;}

/* ── LAYOUT ── */
.wrap{width:100%;margin:0 auto;padding:0 clamp(22px,5vw,120px);}
.s-pad{padding:96px 0;}
.s-pad-sm{padding:64px 0;}

/* ── TYPE ── */
.eyebrow{font-family:var(--b);font-size:11px;letter-spacing:3.5px;text-transform:uppercase;display:block;margin-bottom:18px;font-weight:400;}
.ey-sage{color:var(--gold);}.ey-gold{color:var(--gold);}.ey-dim{color:var(--mute);}
.h-disp{font-family:var(--d);line-height:1.05;font-weight:500;}
.h-disp em,.h-sec em{font-style:italic;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.h-disp.light,.h-disp.dark{color:var(--ink);}
.h-sec{font-family:var(--d);font-size:clamp(30px,4vw,52px);font-weight:500;line-height:1.12;}
.h-sec.light,.h-sec.dark{color:var(--ink);}
.body-t{font-size:16px;line-height:1.85;font-weight:400;}
.body-t.light,.body-t.dark{color:var(--mute);}
.sh-sub{font-family:var(--b);font-size:16px;color:var(--mute);line-height:1.8;max-width:540px;margin-top:14px;font-weight:400;}
.sh-sub.light{color:var(--mute);}
em{font-style:italic;}

.gg{font-style:italic;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* ── BUTTONS ── */
.btn{font-family:var(--b);font-size:12px;letter-spacing:2.2px;text-transform:uppercase;padding:15px 30px;border-radius:999px;cursor:pointer;font-weight:400;transition:background .3s,color .3s,border-color .3s,box-shadow .3s,transform .2s;display:inline-block;border:1px solid transparent;-webkit-tap-highlight-color:transparent;}
.btn-gold{background:var(--grad);color:#17130D;font-weight:500;}
.btn-gold:hover{transform:translateY(-1px);box-shadow:0 0 0 1px var(--gold-hi),0 12px 40px -12px rgba(235,217,180,.55);}
.btn-od,.btn-ol{background:transparent;color:var(--ink);border-color:var(--line2);}
.btn-od:hover,.btn-ol:hover{border-color:var(--gold);color:var(--gold-hi);}

/* ── NAV ── */
#nav{position:fixed;top:0;left:0;right:0;z-index:500;height:64px;background:rgba(9,9,11,.72);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border-bottom:1px solid var(--line);transition:background .3s,border-color .3s;}
#nav.scrolled{background:rgba(9,9,11,.92);border-bottom-color:var(--line2);}
#nav.nav-light-page{background:rgba(9,9,11,.92);}
.nav-inner{height:64px;display:flex;align-items:center;justify-content:space-between;width:100%;margin:0 auto;padding:0 clamp(22px,5vw,120px);}
.nav-logo{font-family:var(--b);font-size:14px;letter-spacing:6px;text-transform:uppercase;color:var(--gold-hi);font-weight:400;transition:opacity .2s;}
.nav-logo:hover{opacity:.75;}
.nav-links{display:flex;align-items:center;gap:30px;list-style:none;}
.nav-links a{font-family:var(--b);font-size:11px;letter-spacing:2.2px;text-transform:uppercase;color:var(--mute);transition:color .2s;font-weight:400;}
.nav-links a:hover,.nav-links a.active{color:var(--gold-hi);}
/* The page you're on is marked in the menu: its name turns gold, a little bolder, with a gold
   bar underneath. Hovering another tab shows a fainter bar that grows from the middle. */
.nav-links a,.nav-login{position:relative;}
.nav-links a:not([data-page="junior"])::after,.nav-login::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:2px;border-radius:2px;background:var(--grad);transform:scaleX(0);opacity:0;transition:transform .35s var(--ease),opacity .35s var(--ease);}
.nav-links a:not([data-page="junior"]):hover::after,.nav-login:hover::after{transform:scaleX(.6);opacity:.45;}
.nav-links a.active:not([data-page="junior"]),.nav-login.active{color:var(--gold-hi);font-weight:500;}
.nav-links a.active:not([data-page="junior"])::after,.nav-login.active::after{transform:scaleX(1);opacity:1;}
.nav-login::after{left:20px;right:0;bottom:1px;}
.nav-cta{font-family:var(--b);font-size:11px;letter-spacing:2.2px;text-transform:uppercase;background:transparent;border:1px solid var(--line2);color:var(--ink);padding:10px 20px;border-radius:999px;transition:all .25s;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.nav-cta:hover{background:var(--grad);border-color:transparent;color:#17130D;}
.nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;-webkit-tap-highlight-color:transparent;}
.nav-burger span{display:block;width:22px;height:1px;background:var(--gold-hi);transition:all .3s;}
.nav-burger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.nav-burger.open span:nth-child(2){opacity:0;}
.nav-burger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}
#mobile-menu{display:flex;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px);transition:opacity .35s var(--ease),transform .45s var(--ease),visibility 0s linear .45s;position:fixed;inset:0;background:radial-gradient(70% 50% at 50% 0%,rgba(214,191,151,.10),transparent 70%),var(--bg);z-index:499;padding:96px 32px 40px;flex-direction:column;gap:0;}
#mobile-menu.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s;}
#mobile-menu > a,#mobile-menu .mob-cta{opacity:0;transform:translateY(12px);transition:opacity .4s var(--ease),transform .5s var(--ease),padding-left .3s var(--ease);}
#mobile-menu.open > a,#mobile-menu.open .mob-cta{opacity:1;transform:none;}
#mobile-menu.open > a:nth-of-type(2){transition-delay:.04s;}#mobile-menu.open > a:nth-of-type(3){transition-delay:.08s;}
#mobile-menu.open > a:nth-of-type(4){transition-delay:.12s;}#mobile-menu.open > a:nth-of-type(5){transition-delay:.16s;}
#mobile-menu.open > a:nth-of-type(6){transition-delay:.2s;}#mobile-menu.open > a:nth-of-type(7){transition-delay:.24s;}
#mobile-menu.open .mob-cta{transition-delay:.3s;}
#mobile-menu a{font-family:var(--d);font-size:30px;color:var(--ink);font-weight:500;padding:14px 0;border-bottom:1px solid var(--line);}
#mobile-menu a.active:not(.btn){background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
#mobile-menu a:not(.btn){position:relative;transition:padding-left .3s var(--ease);}
#mobile-menu a.active:not(.btn){padding-left:24px;}
#mobile-menu a.active:not(.btn)::before{content:"";position:absolute;left:2px;top:50%;width:9px;height:9px;border-radius:50%;background:var(--grad);box-shadow:0 0 12px rgba(214,191,151,.6);transform:translateY(-50%);}
#mobile-menu a.btn{font-family:var(--b);font-size:12px;letter-spacing:2.2px;text-transform:uppercase;font-weight:500;padding:15px 30px;border-bottom:none;text-align:center;color:#17130D;}
#mobile-menu a:last-child{border-bottom:none;}
.mob-cta{margin-top:28px;}
@media(max-width:1199px){.nav-links,.nav-cta{display:none;}.nav-burger{display:flex;}}

/* ── PAGE HEROES ── */
.page-hero{background:var(--surface);padding:144px 0 80px;position:relative;overflow:hidden;}
.page-hero-sm{background:var(--surface);padding:120px 0 64px;position:relative;overflow:hidden;}
.ph-bg{position:absolute;inset:0;opacity:.05;pointer-events:none;width:100%;height:100%;}
.ph-inner{position:relative;}
.ph-eyebrow{font-family:var(--b);font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--gold);margin-bottom:24px;display:block;}
.ph-h{font-family:var(--d);font-size:clamp(48px,7vw,88px);font-weight:500;color:var(--ink);line-height:1.04;}
.ph-h em{font-style:italic;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.ph-sub{font-family:var(--b);font-size:17px;color:var(--mute);line-height:1.85;max-width:500px;margin-top:20px;font-weight:400;}

/* ── THREAD ── */
.thr{display:block;}

/* ── SECTION SHARED ── */
.sec-label{font-family:var(--b);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:18px;display:block;}
.sec-label.light{color:var(--gold);}
.sec-divider{height:1px;background:var(--line);margin:0;}
/* A soft gold glow for the raised bands. */
.glowsec{position:relative;}

/* ── FOR-CARDS (Who it's for) ── */
.for-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.for-card{background:var(--glass);border:1px solid var(--line);border-radius:18px;padding:28px 26px;transition:transform .3s,border-color .3s,box-shadow .3s;}
.for-card:hover{transform:translateY(-4px);border-color:var(--line2);box-shadow:var(--glow);}
.fc-icon{width:46px;height:46px;border-radius:50%;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--gold-hi);font-size:19px;margin-bottom:16px;}
.fc-icon svg{width:20px;height:20px;}
.fc-title{font-family:var(--d);font-size:25px;color:var(--ink);font-weight:500;margin-bottom:9px;line-height:1.2;}
.fc-body{font-family:var(--b);font-size:16px;color:var(--mute);line-height:1.8;font-weight:400;}
.fc-tag{display:inline-block;margin-top:14px;font-family:var(--b);font-size:10px;letter-spacing:2.2px;text-transform:uppercase;color:var(--gold);border:1px solid var(--line2);padding:5px 12px;border-radius:20px;}
.for-everyone{text-align:center;padding:36px 40px 0;}
.fe-text{font-family:var(--d);font-weight:500;font-size:clamp(17px,2vw,22px);color:var(--ink);font-style:italic;line-height:1.6;max-width:560px;margin:0 auto;}
.fe-sub{font-family:var(--b);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-top:12px;}

/* ── SERVICE CARDS ── */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.svc-card{background:var(--glass);border:1px solid var(--line);border-radius:18px;padding:28px 24px 26px;transition:transform .3s,border-color .3s,box-shadow .3s;}
.svc-card:hover{transform:translateY(-4px);border-color:var(--line2);box-shadow:var(--glow);}
.svc-num{font-family:var(--d);font-size:40px;color:transparent;-webkit-text-stroke:1px var(--gold-d);font-weight:500;line-height:1;transition:color .3s;}
.svc-card:hover .svc-num{color:var(--gold);}
.svc-icon-row{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.svc-icon-row svg{flex-shrink:0;}
.svc-title{font-family:var(--d);font-size:23px;color:var(--ink);font-weight:500;margin-bottom:10px;line-height:1.2;}
.svc-desc{font-family:var(--b);font-size:16px;color:var(--mute);line-height:1.8;font-weight:400;}
.svc-link{font-family:var(--b);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);display:inline-block;margin-top:14px;border-bottom:1px solid transparent;transition:border-color .2s;}
.svc-card:hover .svc-link{border-bottom-color:var(--gold);}
.svc-card[onclick],.svc-clickable{cursor:pointer;}
.svc-card.soon{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:150px;background:radial-gradient(70% 70% at 50% 0%,rgba(214,191,151,.14),transparent 70%),var(--surface);border:1px solid var(--line2);}
.soon-label{font-family:var(--d);font-size:24px;font-weight:500;letter-spacing:1px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.soon-sub{font-family:var(--b);font-size:11.5px;letter-spacing:2.5px;text-transform:uppercase;color:var(--mute);margin-top:8px;}
.cd-row{display:flex;align-items:center;gap:13px;margin-bottom:12px;text-decoration:none;width:fit-content;}
.cd-ic{width:38px;height:38px;border-radius:50%;background:rgba(214,191,151,.08);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--gold-hi);transition:background .25s,color .25s;}
.cd-ic svg{width:18px;height:18px;}
.cd-row:hover .cd-ic{background:var(--grad);color:#17130D;}
.cd-txt{font-family:var(--b);font-size:15px;color:var(--ink);transition:color .2s;}
.cd-row:hover .cd-txt{color:var(--gold-hi);}

/* ── SECOND LOOK ── */
.second-sec{background:var(--bg);padding:64px 0;position:relative;overflow:hidden;}
.second-inner{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:center;}
.second-big{font-family:var(--d);font-size:clamp(36px,5vw,60px);font-weight:500;color:var(--ink);line-height:1.1;margin:16px 0 24px;}
.second-big em{font-style:italic;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.si{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);}
.si:last-child{border-bottom:none;}
.si-dot{width:7px;height:7px;border-radius:50%;background:var(--grad);flex-shrink:0;box-shadow:0 0 10px rgba(235,217,180,.5);}
.si-text{font-family:var(--b);font-size:16px;color:var(--mute);}

/* ── APPROACH ── */
.ap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;}
.ap-card{padding:0 32px 0 0;}
.ap-card+.ap-card{padding-left:32px;border-left:1px solid var(--line);}
.ap-num{font-family:var(--d);font-size:52px;font-weight:500;color:transparent;-webkit-text-stroke:1px var(--gold-d);line-height:1;margin-bottom:16px;}
.ap-dot{width:9px;height:9px;border-radius:50%;background:var(--grad);margin-bottom:16px;box-shadow:0 0 12px rgba(235,217,180,.45);}
.ap-title{font-family:var(--d);font-size:26px;color:var(--ink);font-weight:500;margin-bottom:10px;}
.ap-body{font-family:var(--b);font-size:16px;color:var(--mute);line-height:1.8;font-weight:400;}

/* ── PROCESS ── */
.proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;}
.proc{padding:0 28px 22px 0;transition:transform .3s var(--ease);}
.proc+.proc{padding-left:28px;border-left:1px solid var(--line);}
.proc:hover{transform:translateY(-5px);}
.proc-n{font-family:var(--b);font-size:11px;letter-spacing:3px;color:var(--gold);line-height:1;margin-bottom:14px;transition:color .3s var(--ease);}
.proc-dot{width:13px;height:13px;border-radius:50%;background:var(--grad);margin-bottom:18px;position:relative;box-shadow:0 0 0 5px var(--bg),0 0 18px rgba(235,217,180,.5);}
.proc-dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(214,191,151,.45);animation:procPulse 2.6s ease-in-out infinite;}
@keyframes procPulse{0%{transform:scale(.85);opacity:.9;}70%,100%{transform:scale(1.9);opacity:0;}}
.proc-grid .proc:nth-child(2) .proc-dot::after{animation-delay:.5s;}
.proc-grid .proc:nth-child(3) .proc-dot::after{animation-delay:1s;}
.proc-grid .proc:nth-child(4) .proc-dot::after{animation-delay:1.5s;}
.proc-title{font-family:var(--d);font-size:32px;color:var(--ink);font-weight:500;margin-bottom:12px;line-height:1.1;transition:color .3s var(--ease);}
.proc:hover .proc-title{color:var(--gold-hi);}
.proc-body{font-family:var(--b);font-size:16px;color:var(--mute);line-height:1.8;font-weight:400;}
/* Approach: the woven thread above the four steps. The two strands drift past each other
   in opposite directions (each is one wave longer than the line, so the loop is seamless),
   a glint travels along it, and pointing at a step lights up its quarter of the thread. */
.weave-a{animation:weaveA 14s linear infinite;}
.weave-b{animation:weaveB 18s linear infinite;}
@keyframes weaveA{to{transform:translateX(-300px);}}
@keyframes weaveB{to{transform:translateX(300px);}}
.weave-base{transition:opacity .45s var(--ease);}
.weave-lit{opacity:0;transition:opacity .45s var(--ease);}
.proc-sec:has(.proc:hover) .weave-base{opacity:.5;}
.proc-sec:has(.proc:nth-child(1):hover) .lit-1,
.proc-sec:has(.proc:nth-child(2):hover) .lit-2,
.proc-sec:has(.proc:nth-child(3):hover) .lit-3,
.proc-sec:has(.proc:nth-child(4):hover) .lit-4{opacity:1;}
.proc:hover .proc-n{color:var(--gold-hi);}
.proc-dot{transition:box-shadow .45s var(--ease),transform .45s var(--ease);}
.proc:hover .proc-dot{transform:scale(1.15);box-shadow:0 0 0 5px var(--bg),0 0 26px rgba(235,217,180,.85);}
@media(prefers-reduced-motion:reduce){.weave-a,.weave-b{animation:none!important;}}

/* ── FAQ ── */
.faq-wrap{display:grid;grid-template-columns:300px 1fr;gap:80px;align-items:start;}
.faq-left{position:sticky;top:88px;}
details{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.02);margin-bottom:12px;transition:border-color .45s var(--ease),background .45s var(--ease);}
.details-body{overflow:hidden;}
details[open]:not(.closing){border-color:var(--line2);background:rgba(214,191,151,.05);}
summary{font-family:var(--d);font-size:22px;color:var(--ink);font-weight:500;padding:20px 24px;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;line-height:1.3;-webkit-tap-highlight-color:transparent;}
summary::-webkit-details-marker{display:none;}
summary::after{content:'+';font-family:var(--b);font-size:20px;color:var(--gold);flex-shrink:0;transition:transform .45s var(--ease),color .3s;}
summary:focus{outline:none;}
summary:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;border-radius:16px;}
details[open]:not(.closing) summary::after{transform:rotate(45deg);color:var(--gold-hi);}
.faq-answer{font-family:var(--b);font-size:16px;color:var(--mute);line-height:1.85;padding:0 24px 22px;font-weight:400;}

/* ── ABOUT ── */
.about-story{display:grid;grid-template-columns:1fr 1.3fr;gap:80px;align-items:center;}
.photo-ph{aspect-ratio:4/5;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;position:relative;overflow:hidden;}
.pp-text{font-family:var(--d);font-weight:500;font-size:15px;color:var(--dim);font-style:italic;}
.pp-note{position:absolute;bottom:16px;font-family:var(--b);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-d);}
/* About: who she is, her portrait and her story in one section. Wide screens put the
   portrait in its own column beside both, staying in view while the story is read;
   phones stack name, portrait, story. */
.ab-merged{display:grid;grid-template-columns:1.3fr 1fr;grid-template-areas:"intro photo" "story photo";grid-template-rows:auto 1fr;column-gap:64px;align-items:start;}
.ab-intro{grid-area:intro;}
.ab-story{grid-area:story;}
.ab-photo{grid-area:photo;display:flex;align-items:center;justify-content:center;position:sticky;top:112px;}
@media(max-width:640px){
  .ab-merged{grid-template-columns:1fr;grid-template-areas:"intro" "photo" "story";grid-template-rows:auto;}
  .ab-photo{position:static;margin:30px 0 4px;}
  .ab-photo>div{max-width:300px!important;}
}
.about-name{font-family:var(--d);font-size:clamp(36px,4.5vw,56px);color:var(--ink);font-weight:500;line-height:1.05;margin:16px 0 6px;}
.about-title{font-family:var(--b);font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:28px;}
.about-body{font-family:var(--b);font-size:16px;color:var(--mute);line-height:1.9;margin-bottom:16px;font-weight:400;}
.about-quote{font-family:var(--d);font-size:clamp(21px,2.4vw,27px);color:var(--ink);font-style:italic;line-height:1.45;margin-bottom:22px;font-weight:500;}
.cred-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
.cred{font-family:var(--b);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-hi);border:1px solid var(--line2);padding:7px 15px;border-radius:999px;}

/* ── NAME / ETYMOLOGY ── */
.name-compound{display:flex;align-items:flex-start;gap:20px;margin:28px 0 36px;}
.nc{flex:1;}
.nc-script{font-family:var(--dev);font-size:44px;color:var(--ink);font-weight:400;line-height:1.3;margin-bottom:6px;}
.nc-latin{font-family:var(--d);font-size:20px;letter-spacing:3px;text-transform:uppercase;color:var(--gold-hi);font-weight:500;}
.nc-def{font-family:var(--b);font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--dim);margin-top:8px;line-height:1.6;}
.nc-plus{font-family:var(--d);font-size:34px;color:var(--gold-d);padding-top:16px;font-weight:500;}
.name-result-wrap{margin-top:4px;padding:26px 30px;border:1px solid var(--line2);border-radius:18px;background:var(--glass);display:inline-block;}
.name-eql{font-family:var(--b);font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--mute);margin-bottom:10px;display:block;}
.name-result{font-family:var(--d);font-size:clamp(34px,5vw,54px);color:var(--ink);font-weight:500;letter-spacing:1px;line-height:1;}
.name-dev{font-family:var(--dev);font-size:30px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:400;letter-spacing:4px;margin-top:10px;line-height:1.4;}

/* ── CTA BAND ── */
.cta-band{background:radial-gradient(50% 70% at 50% 50%,rgba(214,191,151,.13),transparent 72%),var(--surface);padding:72px 0;text-align:center;position:relative;overflow:hidden;}
.cta-h{font-family:var(--d);font-size:clamp(32px,5vw,62px);font-weight:500;color:var(--ink);line-height:1.1;margin:20px 0 14px;}
.cta-h em{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic;}
.cta-sub{font-family:var(--b);font-size:16px;color:var(--mute);margin-bottom:44px;line-height:1.7;}
.cta-thread{margin:0 auto 40px;display:block;max-width:400px;}

/* ── FOOTER ── */
footer{background:var(--foot);border-top:1px solid var(--line);padding:56px 0 30px;}
.foot-main{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:48px;margin-bottom:36px;}
.foot-logo{font-family:var(--b);font-size:14px;letter-spacing:5px;text-transform:uppercase;color:var(--gold-hi);font-weight:400;margin-bottom:10px;}
.foot-tag{font-family:var(--d);font-weight:500;font-size:17px;color:var(--ink);font-style:italic;margin-bottom:14px;}
.foot-about{font-family:var(--b);font-size:14px;color:var(--dim);line-height:1.75;font-weight:400;}
.foot-heading{font-family:var(--b);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:16px;}
.foot-links{display:flex;flex-direction:column;gap:0;list-style:none;}
.foot-links a{font-family:var(--b);font-size:14px;color:var(--mute);transition:color .2s;display:inline-block;padding:8px 0;font-weight:400;}
.foot-links a:hover,.foot-links a.active{color:var(--gold-hi);}
.foot-legal{transition:color .2s;}.foot-legal:hover,.foot-legal[aria-current]{color:var(--gold-hi);}
.foot-contact-item{font-family:var(--b);font-size:14px;color:var(--dim);margin-bottom:8px;}
.foot-contact-item a{color:var(--mute);transition:color .2s;}
.foot-contact-item a:hover{color:var(--gold-hi);}
.foot-divider{border:none;border-top:1px solid var(--line);margin-bottom:22px;}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.foot-copy{font-family:var(--b);font-size:11.5px;color:var(--dim);letter-spacing:3px;text-transform:uppercase;}

/* ── CONTACT FORM ── */
.form-group{margin-bottom:24px;}
.form-label{font-family:var(--b);font-size:12px;letter-spacing:2.2px;text-transform:uppercase;color:var(--mute);display:block;margin-bottom:8px;}
.form-input,.form-textarea,.form-select{width:100%;font-family:var(--b);font-size:16px;color:var(--ink);background:transparent;border:none;border-bottom:1px solid var(--line2);padding:12px 0;outline:none;transition:border-color .2s;border-radius:0;font-weight:400;}
.form-input::placeholder,.form-textarea::placeholder{color:#8F897F;}
.form-input:focus,.form-textarea:focus,.form-select:focus{border-bottom-color:var(--gold-hi);}
.form-textarea{resize:vertical;min-height:100px;}
.form-select{cursor:pointer;appearance:none;-webkit-appearance:none;}
.form-select option{background:#17171B;color:var(--ink);}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;}

/* ── RESPONSIVE ── */
@media(max-width:960px){
  .for-grid{grid-template-columns:1fr 1fr;}
  .svc-grid{grid-template-columns:1fr 1fr;}
  .foot-main{grid-template-columns:1fr 1fr;gap:32px;}
  .second-inner{grid-template-columns:1fr;gap:48px;}
  .about-story{grid-template-columns:1fr;gap:48px;}
  .photo-ph{aspect-ratio:16/9;}
  .faq-wrap{grid-template-columns:1fr;gap:36px;}
  .faq-left{position:static;}
  .form-grid{grid-template-columns:1fr;}
}
@media(max-width:700px){
  .for-grid{grid-template-columns:1fr 1fr;}
  .ap-grid{grid-template-columns:1fr;gap:32px;}
  .ap-card+.ap-card{padding-left:0;border-left:none;border-top:1px solid var(--line);padding-top:28px;}
  .proc-grid{grid-template-columns:1fr 1fr;gap:28px;}
  .proc+.proc{padding-left:0;border-left:none;}
  .proc:nth-child(even){padding-left:28px;border-left:1px solid var(--line);}
}
@media(max-width:520px){
  .for-grid,.svc-grid,.proc-grid{grid-template-columns:1fr;}
  .proc:nth-child(even){padding-left:0;border-left:none;border-top:1px solid var(--line);padding-top:24px;}
  .foot-main{grid-template-columns:1fr;}
  .foot-bottom{flex-direction:column;align-items:flex-start;}
  .for-everyone{padding:24px 8px 0;}
  .name-compound{flex-direction:column;gap:12px;}
  .nc-plus{padding-top:0;font-size:28px;line-height:1;}
  .ph-h{font-size:clamp(38px,10vw,64px);}
}

/* Junior gets a gold pill in the menu. */
.nav-links a[data-page="junior"]{
  color:#17130D!important;
  background:var(--grad);
  padding:7px 14px;
  border-radius:999px;
  letter-spacing:1.6px;
  font-weight:500;
}
.nav-links a[data-page="junior"]:hover{color:#17130D!important;box-shadow:0 0 0 1px var(--gold-hi);}
.nav-links a[data-page="junior"].active{box-shadow:0 0 0 2px #09090B,0 0 0 3.5px var(--gold-hi);}
#mobile-menu a[data-page="junior"]:not(.btn){background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent!important;}

/* ════ MOBILE OVERRIDES ════ */
@media(max-width:640px){
  #hero > .wrap{padding-top:20px!important;padding-bottom:36px!important;}
  #page-about .wrap > div[style*="grid-template-columns:1fr 1fr"]{display:block!important;}
  div[style*="grid-template-columns:1fr 1.4fr"],
  div[style*="grid-template-columns:1fr 1.3fr"],
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns:1fr auto"]{display:block!important;}
  /* Once two side-by-side columns stack, keep a clear gap between them. */
  div[style*="grid-template-columns:1fr 1.4fr"]>div+div,
  div[style*="grid-template-columns:1fr 1.3fr"]>div+div,
  div[style*="grid-template-columns:1fr 1fr"]>div+div,
  div[style*="grid-template-columns:1fr auto"]>div+div{margin-top:36px;}
  section[style*="padding:64px 0"]{padding:48px 0!important;}
  section[style*="padding:56px 0"],section[style*="padding:60px 0"]{padding:44px 0!important;}
  .second-sec{padding:48px 0!important;}
  .cta-band{padding:56px 0!important;}
  section[style*="padding:72px 0"]{padding:48px 0!important;}
  .ap-grid,.proc-grid{grid-template-columns:1fr!important;}
  .ap-card+.ap-card{padding-left:0!important;border-left:none!important;border-top:1px solid var(--line)!important;padding-top:24px!important;}
  .proc+.proc{padding-left:0!important;border-left:none!important;border-top:1px solid var(--line)!important;padding-top:24px!important;}
  .faq-wrap{display:block!important;}
  .faq-left{margin-bottom:28px;}
  .second-inner{display:block!important;}
  .second-inner>div+div{margin-top:32px;}
  .foot-main{display:block!important;}
  .foot-main>div{margin-bottom:28px;}
  .foot-bottom{flex-direction:column!important;gap:8px!important;}
  .name-compound{flex-direction:column!important;gap:12px!important;}
  .nc-plus{padding-top:0!important;font-size:28px!important;line-height:1!important;}
  .form-grid{grid-template-columns:1fr!important;}
  .for-grid,.svc-grid{grid-template-columns:1fr!important;}
  .for-everyone{padding:20px 8px 0!important;}
  .cta-h{font-size:clamp(28px,7.4vw,42px)!important;}
  .ap-grid.vision{grid-template-columns:1fr!important;}
  section[style*="padding:108px 0 52px"],section[style*="padding:108px 0 56px"],section[style*="padding:108px 0 64px"]{padding:88px 0 40px!important;}
  section[style*="padding:96px 0 44px"]{padding:80px 0 36px!important;}
  section[style*="padding:120px 0 56px"],section[style*="padding:120px 0 64px"]{padding:96px 0 44px!important;}
}
@media(max-width:640px){
  .about-hero-grid{grid-template-columns:1fr!important;gap:36px!important;}
}

/* ── CALCULATORS ── */
.calc-group-label{font-family:var(--b);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);display:block;}
.calc-group-sub{font-family:var(--d);font-size:26px;color:var(--ink);font-weight:500;margin-top:6px;line-height:1.2;display:block;}
.calc-picker{display:grid;grid-template-columns:repeat(2,1fr);gap:44px 40px;margin-bottom:8px;}
/* The fifth group sits alone on the last row, centred under the four above. */
.calc-gsection-solo{grid-column:1/-1;justify-self:center;width:calc(50% - 20px);}
@media(max-width:900px){.calc-gsection-solo{width:auto;justify-self:stretch;}}
@media(max-width:900px){.calc-picker{grid-template-columns:1fr;gap:36px;}}
.calc-ghead{margin-bottom:16px;}
.calc-pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:stretch;}
.calc-pick{display:flex;flex-direction:column;align-items:flex-start;text-align:left;background:var(--glass);border:1px solid var(--line);border-radius:18px;padding:28px 24px 26px;cursor:pointer;font:inherit;color:var(--ink);transition:transform .25s var(--ease),box-shadow .25s,border-color .25s;-webkit-tap-highlight-color:transparent;}
.calc-pick:hover{transform:translateY(-4px);border-color:var(--line2);box-shadow:var(--glow);}
.calc-pick-icon{width:52px;height:52px;border-radius:50%;background:rgba(214,191,151,.08);border:1px solid var(--line2);color:var(--gold-hi);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-bottom:18px;transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);}
.calc-pick:hover .calc-pick-icon{background:var(--grad);color:#17130D;transform:rotate(-6deg) scale(1.06);}
.calc-pick-title{font-family:var(--d);font-size:23px;font-weight:500;color:var(--ink);line-height:1.25;margin-bottom:16px;}
.calc-pick-line{width:100%;height:14px;overflow:visible;}
/* The gap is a touch longer than the line, so the rounded end doesn't leave a dot behind. */
.calc-pick-line path{stroke-dasharray:200 202;stroke-dashoffset:201;transition:stroke-dashoffset .7s var(--ease);}
.calc-pick:hover .calc-pick-line path{stroke-dashoffset:0;}
@media(max-width:640px){.calc-pgrid{grid-template-columns:1fr;}}
/* A calculator's own page (/calculators/<name>): a short heading band with the
   calculator's name, the calculator itself, then the other seven as links. */
.calc-hero{padding:108px 0 44px;position:relative;overflow:hidden;}
.calc-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--b);font-size:11px;letter-spacing:2.6px;text-transform:uppercase;color:var(--gold);margin-bottom:28px;transition:color .2s;}
.calc-back:hover{color:var(--gold-hi);}
.calc-hero-group{display:block;font-family:var(--b);font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--mute);margin-bottom:14px;}
.calc-hero-title{font-family:var(--d);font-size:clamp(38px,5vw,64px);font-weight:500;color:var(--ink);line-height:1.08;max-width:24ch;}
.calc-hero-desc{font-family:var(--b);font-size:17px;color:rgba(236,231,222,.78);line-height:1.8;max-width:640px;margin-top:16px;font-weight:400;}
.calc-solo-sec{background:var(--bg2);padding:44px 0 56px;}
.calc-solo > .calc-body{margin-top:0;}
.calc-solo .calc-inputs{padding-top:32px;}
.calc-others{background:var(--bg);padding:56px 0 64px;}
.calc-others-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;align-items:stretch;}
/* Ten cells (the heading + nine calculators): five across on wide screens, two below. */
@media(max-width:1439px){.calc-others-grid{grid-template-columns:repeat(2,1fr);}}
.calc-others-head{display:flex;flex-direction:column;justify-content:center;padding:8px 20px 8px 0;}
.calc-others-title{font-family:var(--d);font-size:clamp(28px,2.6vw,36px);font-weight:500;color:var(--ink);line-height:1.15;margin-top:10px;}
.calc-others-all{align-self:flex-start;font-family:var(--b);font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:var(--gold);margin-top:20px;transition:color .2s;}
.calc-others-all:hover{color:var(--gold-hi);}
.calc-pick-group{font-family:var(--b);font-size:10.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--gold);margin-bottom:8px;}
.calc-others .calc-pick-title{font-size:21px;}
.calc-others .calc-pick-line{margin-top:auto;}
.calc-pick:focus-visible,.calc-back:focus-visible,.calc-others-all:focus-visible,.svc-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
@media(max-width:1100px){.calc-others-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){
  .calc-hero{padding:96px 0 36px;}
  .calc-solo-sec{padding:28px 0 44px;}
  .calc-solo .calc-inputs{padding-top:24px;}
  .calc-others{padding:44px 0 48px;}
  .calc-others-grid{grid-template-columns:1fr;gap:10px;}
  .calc-others-head{padding:0 0 14px;}
  .calc-others .calc-pick{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center;padding:16px 18px;min-height:0!important;}
  .calc-others .calc-pick-icon{grid-row:1/3;margin-bottom:0;width:44px;height:44px;}
  .calc-others .calc-pick-group{margin-bottom:4px;align-self:end;}
  .calc-others .calc-pick-title{font-size:19px;margin-bottom:0;align-self:start;}
  .calc-others .calc-pick-line{display:none;}
}
/* Contact: the enquiry form in its own card beside "What to expect". On a laptop the card
   runs the full height of that column, top to bottom, and the message box takes the room.
   Scoped to .cf-card so the Client Login fields keep their own look. */
.cf-col{display:flex;}
/* Every "Start a conversation" button lands here (/contact#contact-form): the card's top sits just below the menu bar. */
.cf-card{scroll-margin-top:104px;}
/* It fades in without sliding, so a visitor arriving mid-animation lands on it exactly. */
.cf-col.reveal{transform:none;}
@media(max-width:1199px){.cf-card{scroll-margin-top:88px;}}
.cf-card{flex:1;display:flex;flex-direction:column;border:1px solid var(--line2);border-radius:22px;padding:38px 38px 36px;background:radial-gradient(80% 55% at 92% 0%,rgba(214,191,151,.13),transparent 70%),var(--surface);box-shadow:0 30px 80px -40px rgba(0,0,0,.9);}
.cf-eye{display:block;margin-bottom:10px;}
.cf-title{font-family:var(--d);font-size:clamp(28px,2.8vw,34px);font-weight:500;color:var(--ink);line-height:1.15;margin-bottom:28px;}
.cf-card form{flex:1;display:flex;flex-direction:column;}
.cf-card .form-grid{gap:0 16px;}
.cf-card .form-group{margin-bottom:20px;}
.cf-card .form-label{font-size:11px;letter-spacing:2.4px;color:var(--gold);margin-bottom:10px;}
.cf-opt{color:var(--dim);letter-spacing:1.6px;}
.cf-card .form-input,.cf-card .form-textarea,.cf-card .form-select{background:rgba(255,255,255,.035);border:1px solid var(--line2);border-radius:12px;padding:14px 16px;font-size:16px;transition:border-color .2s,background .2s,box-shadow .2s;}
.cf-card .form-input:hover,.cf-card .form-textarea:hover,.cf-card .form-select:hover{border-color:rgba(214,191,151,.5);}
.cf-card .form-input:focus,.cf-card .form-textarea:focus,.cf-card .form-select:focus{border-color:var(--gold);background:rgba(214,191,151,.06);box-shadow:0 0 0 3px rgba(214,191,151,.14);}
.cf-card .form-input::placeholder,.cf-card .form-textarea::placeholder{color:#8F897F;}
.cf-select{position:relative;display:block;}
.cf-select::after{content:"";position:absolute;right:20px;top:50%;width:8px;height:8px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:translateY(-70%) rotate(45deg);pointer-events:none;}
.cf-card .form-select{padding-right:48px;}
.cf-grow{flex:1;display:flex;flex-direction:column;}
.cf-grow .form-textarea{flex:1;min-height:150px;line-height:1.6;}
.cf-send{width:100%;text-align:center;justify-content:center;margin-top:4px;padding-top:17px;padding-bottom:17px;}
@media(max-width:640px){.cf-card{padding:28px 22px 26px;border-radius:18px;}.cf-title{margin-bottom:22px;}.cf-grow .form-textarea{min-height:130px;}}
/* Contact: the "Is it time for a Second Look?" self-check (site.js: toggleSlq and the quiz).
   It opens by growing to its full height; every question and the result share one stage,
   stacked in the same grid cell, so the box keeps one size while you answer. */
.slq{max-width:680px;margin:0 auto;border:1px solid var(--line2);border-radius:22px;overflow:hidden;background:radial-gradient(70% 90% at 85% 0%,rgba(214,191,151,.12),transparent 70%),var(--surface);box-shadow:0 30px 80px -40px rgba(0,0,0,.9);}
.slq-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;background:none;border:0;cursor:pointer;padding:32px 36px;text-align:left;color:inherit;font:inherit;-webkit-tap-highlight-color:transparent;}
.slq-toggle:focus{outline:none;}
.slq-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:-6px;border-radius:22px;}
.slq-eye{display:block;margin-bottom:8px;}
.slq-title{display:block;font-family:var(--d);font-size:clamp(22px,2.8vw,28px);font-weight:500;color:var(--ink);line-height:1.2;}
.slq-icon{flex-shrink:0;width:46px;height:46px;border-radius:50%;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;color:var(--gold-hi);transition:transform .5s var(--ease),background .3s,color .3s;}
.slq-toggle:hover .slq-icon{background:var(--grad);color:#17130D;}
.slq.open .slq-icon{transform:rotate(45deg);}
.slq-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease);}
.slq.open .slq-body{grid-template-rows:1fr;}
.slq-inner{overflow:hidden;min-height:0;}
.slq-pad{padding:0 36px 34px;opacity:0;transform:translateY(-10px);transition:opacity .3s var(--ease),transform .45s var(--ease);}
.slq.open .slq-pad{opacity:1;transform:none;transition-delay:.15s;}
.slq-intro{font-family:var(--b);font-size:16px;color:var(--mute);line-height:1.7;margin:0 0 22px;padding-top:24px;border-top:1px solid var(--line);max-width:none;text-align:center;}
.slq-progress{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:22px;}
.slq-dots{display:flex;gap:9px;}
.slq-dot{width:7px;height:7px;border-radius:50%;background:var(--line2);transition:background .3s,transform .3s var(--ease);}
.slq-dot.done{background:var(--sage);}
.slq-dot.now{background:var(--gold);transform:scale(1.4);}
.slq-count{font-family:var(--b);font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:var(--mute);}
.slq-stage{display:grid;}
.slq-panel{grid-area:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:0;visibility:hidden;transform:translateX(24px);transition:opacity .3s var(--ease),transform .45s var(--ease),visibility 0s linear .45s;}
.slq-panel.was-on{transform:translateX(-24px);}
.slq-panel.is-on{opacity:1;visibility:visible;transform:none;transition-delay:.08s,.08s,0s;}
.slq-q{font-family:var(--d);font-size:clamp(20px,2.4vw,24px);font-weight:500;color:var(--ink);line-height:1.4;min-height:2.8em;display:flex;align-items:center;justify-content:center;margin:0 0 24px;max-width:32ch;}
.slq-opts{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;}
.slq-opt{padding:11px 28px;font-size:13px;min-width:132px;}
.slq-opt.picked{background:var(--grad);color:#17130D;border-color:transparent;}
.slq-back{margin-top:18px;background:none;border:0;cursor:pointer;font-family:var(--b);font-size:12px;letter-spacing:.4px;color:var(--mute);text-decoration:underline;text-underline-offset:3px;}
.slq-back:hover{color:var(--gold-hi);}
.slq-panel[data-i="0"] .slq-back{visibility:hidden;}
.slq-wave{display:block;margin:6px auto 16px;}
.slq-msgs{display:grid;margin-bottom:22px;}
.slq-msg{grid-area:1/1;visibility:hidden;font-family:var(--d);font-weight:500;font-style:italic;font-size:clamp(19px,2.3vw,23px);color:var(--ink);line-height:1.5;margin:0;max-width:32ch;}
.slq-msg.is-on{visibility:visible;}
@media(max-width:640px){.slq-toggle{padding:26px 22px;}.slq-pad{padding:0 22px 28px;}.slq-icon{width:40px;height:40px;}}
@media(prefers-reduced-motion:reduce){.slq-body,.slq-pad,.slq-panel,.slq-icon,.slq-dot{transition:none!important;}}
/* A "who we work with" page (/for/<group>): the questions that group asks on the left,
   how we help on the right, then the services that fit and the other five groups. */
.aud-q{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:16px;}
.aud-q li{position:relative;padding-left:22px;font-family:var(--d);font-style:italic;font-weight:500;font-size:20px;line-height:1.4;color:var(--ink);}
.aud-q li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--grad);}
.aud-svc-label{margin-bottom:16px;}
.aud-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:72px;}
.for-mini{display:flex;flex-direction:column;align-items:flex-start;}
.for-mini .fc-title{margin-bottom:0;font-size:22px;}
.for-mini .svc-more{margin-top:auto;padding-top:16px;}
.for-card .fc-more{display:table;margin-top:14px;}
.for-card:hover .svc-more{color:var(--gold-hi);border-bottom-color:var(--gold-hi);}
.for-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
@media(max-width:1100px){.aud-others .calc-others-head{grid-column:auto;padding:8px 20px 8px 0;}}
@media(max-width:640px){
  .aud-others .calc-others-head{grid-column:1/-1;padding:0 0 14px;}
  .aud-svc-grid{grid-template-columns:1fr;gap:10px;margin-bottom:48px;}
  .aud-q li{font-size:18px;}
  .for-mini{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:16px;padding:16px 18px;}
  .for-mini .fc-icon{grid-row:1/3;margin-bottom:0;}
  .for-mini .fc-title{font-size:19px;align-self:end;}
  .for-mini .svc-more{margin-top:0;padding-top:4px;align-self:start;}
}
/* A service's own page (/services/<name>) reuses the calculator page's heading band and
   "keep exploring" block; the detail sits in one card, and the other eight follow. */
.svc-solo{border-radius:22px;overflow:hidden;background:radial-gradient(60% 80% at 80% 0%,rgba(214,191,151,.12),transparent 70%),var(--surface);border:1px solid var(--line2);}
.svc-others-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch;}
.svc-mini{display:flex;flex-direction:column;align-items:flex-start;}
.svc-mini .svc-title{margin-bottom:0;}
.svc-mini .svc-more{margin-top:auto;padding-top:16px;}
@media(max-width:1100px){.svc-others-grid{grid-template-columns:repeat(2,1fr);}.svc-others-grid .calc-others-head{grid-column:1/-1;padding:0 0 12px;}}
@media(max-width:640px){
  .svc-others-grid{grid-template-columns:1fr;gap:10px;}
  .svc-mini{display:grid;grid-template-columns:86px 1fr;align-items:center;column-gap:14px;padding:16px 18px;}
  .svc-mini .svc-icon-row{grid-row:1/3;margin-bottom:0;gap:10px;}
  .svc-mini .svc-num{font-size:30px;}
  .svc-mini .svc-title{font-size:19px;align-self:end;}
  .svc-mini .svc-more{margin-top:0;padding-top:4px;align-self:start;}
}
.calc-card{background:var(--glass);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 20px 50px -30px rgba(0,0,0,.9);}
.calc-cardhead{padding:30px 32px 0;}
.calc-title{font-family:var(--d);font-size:28px;color:var(--ink);font-weight:500;line-height:1.15;}
.calc-desc{font-family:var(--b);font-size:16px;color:var(--mute);line-height:1.7;margin-top:8px;font-weight:400;}
.calc-body{display:grid;grid-template-columns:1.15fr .85fr;gap:0;margin-top:24px;}
.calc-inputs{padding:0 32px 30px;display:grid;grid-template-columns:1fr 1fr;gap:22px 22px;align-content:start;}
.calc-field{display:flex;flex-direction:column;gap:7px;}
.calc-field.wide{grid-column:1/-1;}
.calc-flabel{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.calc-flabel span:first-child{font-family:var(--b);font-size:12px;letter-spacing:2px;color:var(--mute);text-transform:uppercase;}
.calc-fval{font-family:var(--d);font-size:19px;color:var(--gold-hi);font-weight:500;}
.calc-num{font-family:var(--b);font-size:17px;color:var(--ink);background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;padding:12px 14px;width:100%;outline:none;transition:border-color .2s,background .2s;}
.calc-num:focus{border-color:var(--gold);background:rgba(214,191,151,.06);}
.calc-range{-webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:4px;background:#2C2B30;outline:none;margin:9px 0 2px;}
.calc-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--gold-hi);border:3px solid var(--bg);box-shadow:0 0 10px rgba(235,217,180,.5);cursor:pointer;}
.calc-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--gold-hi);border:3px solid var(--bg);box-shadow:0 0 10px rgba(235,217,180,.5);cursor:pointer;}
.calc-result{background:radial-gradient(90% 70% at 70% 15%,rgba(214,191,151,.16),transparent 70%),rgba(0,0,0,.4);border-left:1px solid var(--line);padding:34px 30px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;}
.calc-rlabel{font-family:var(--b);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);}
.calc-rnum{font-family:var(--d);font-size:clamp(34px,4.4vw,48px);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:500;line-height:1.05;margin-top:10px;word-break:break-word;}
.calc-rabbr{font-family:var(--d);font-weight:500;font-size:16px;color:var(--mute);font-style:italic;margin-top:4px;min-height:20px;}
.calc-rstats{margin-top:22px;border-top:1px solid var(--line);padding-top:18px;display:flex;flex-direction:column;gap:12px;}
.calc-rstat{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.calc-rstat span:first-child{font-family:var(--b);font-size:13px;color:var(--mute);letter-spacing:.3px;}
.calc-rstat span:last-child{font-family:var(--b);font-size:14px;color:var(--ink);}
.calc-bar{display:flex;height:7px;border-radius:6px;overflow:hidden;margin-top:22px;background:#26252A;gap:2px;}
.calc-bar > div{height:100%;transition:width .4s var(--ease);border-radius:6px;}
.calc-bar-inv{background:#6E6A63;}
.calc-bar-gain{background:var(--grad);}
.calc-legend{display:flex;gap:22px;margin-top:13px;flex-wrap:wrap;}
.calc-legend > span{font-family:var(--b);font-size:12.5px;color:var(--mute);display:flex;align-items:center;gap:7px;}
.calc-dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex-shrink:0;}
.pp-toggle{grid-column:1/-1;display:flex;gap:6px;background:rgba(255,255,255,.04);padding:4px;border-radius:999px;margin-bottom:2px;border:1px solid var(--line);}
.pp-toggle button{flex:1;font-family:var(--b);font-size:12px;letter-spacing:.2px;line-height:1.3;padding:11px 10px;border:none;background:transparent;color:var(--mute);border-radius:999px;cursor:pointer;transition:background .2s,color .2s;-webkit-tap-highlight-color:transparent;}
.pp-toggle button.active{background:var(--grad);color:#17130D;font-weight:500;}
.pp-hide{display:none!important;}
.pp-winner{font-family:var(--d);font-size:clamp(30px,3.8vw,40px);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:500;line-height:1.08;margin-top:10px;}
.calc-disclaimer{font-family:var(--b);font-size:13px;color:var(--dim);line-height:1.7;max-width:780px;margin:38px auto 0;text-align:center;}
@media(max-width:820px){.calc-body{grid-template-columns:1fr;}.calc-result{border-left:none;border-top:1px solid var(--line);}}
@media(max-width:520px){.calc-inputs{grid-template-columns:1fr;padding:0 22px 24px;}.calc-cardhead{padding:24px 22px 0;}.calc-result{padding:28px 22px;}}
.calc-select{font-family:var(--b);font-size:15px;color:var(--ink);background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;padding:12px 14px;width:100%;outline:none;cursor:pointer;transition:border-color .2s;}
.calc-select:focus{border-color:var(--gold);}
.calc-select option{background:#17171B;color:var(--ink);}
.rr-shared{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px 22px;padding:22px 32px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02);}
.rr-curlabel{font-family:var(--b);font-size:12px;letter-spacing:2px;color:var(--mute);text-transform:uppercase;}
.rr-asset{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:26px 32px;align-items:center;}
.rr-asset+.rr-asset{border-top:1px solid var(--line);}
.rr-aname{font-family:var(--d);font-size:23px;color:var(--ink);font-weight:500;line-height:1.15;}
.rr-awhat{font-family:var(--b);font-size:13.5px;color:var(--dim);margin-top:4px;line-height:1.5;}
.rr-fields{display:flex;flex-direction:column;gap:16px;margin-top:16px;}
.rr-out{background:radial-gradient(80% 80% at 70% 0%,rgba(214,191,151,.14),transparent 70%),rgba(0,0,0,.4);border:1px solid var(--line);border-radius:16px;padding:22px;}
.rr-flow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.rr-head{display:flex;flex-direction:column;}
.rr-head b{font-family:var(--d);font-size:24px;color:var(--mute);font-weight:500;line-height:1;}
.rr-head small{font-family:var(--b);font-size:9.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--dim);margin-top:5px;}
.rr-arrow{font-family:var(--b);font-size:20px;color:var(--gold-d);}
.rr-net{display:flex;flex-direction:column;}
.rr-net b{font-family:var(--d);font-size:40px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:500;line-height:1.05;}
.rr-net small{font-family:var(--b);font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--mute);margin-top:6px;}
.rr-note{font-family:var(--b);font-size:12.5px;color:var(--mute);line-height:1.55;margin-top:15px;}
.rr-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;}
.rr-tag{font-family:var(--b);font-size:10px;letter-spacing:.5px;color:var(--gold-hi);border:1px solid var(--line2);border-radius:20px;padding:5px 12px;}
@media(max-width:820px){.rr-shared{grid-template-columns:1fr 1fr;}.rr-asset{grid-template-columns:1fr;gap:18px;}}
@media(max-width:520px){.rr-shared{grid-template-columns:1fr;padding:20px 22px;}.rr-asset{padding:22px 22px;}}

/* ── SERVICE DETAIL EXPAND ── */
.svc-more{font-family:var(--b);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);display:inline-block;margin-top:14px;border-bottom:1px solid transparent;transition:border-color .2s,color .2s;}
.svc-card:hover .svc-more{color:var(--gold-hi);border-bottom-color:var(--gold-hi);}
.svc-exp-inner{position:relative;}
.svc-exp-grid{display:grid;grid-template-columns:.92fr 1.08fr;}
.svc-exp-viz{background:rgba(0,0,0,.35);border-right:1px solid var(--line);padding:34px 30px;display:flex;flex-direction:column;justify-content:center;}
.svc-exp-vizcap{font-family:var(--b);font-size:13px;color:var(--dim);line-height:1.6;margin-top:18px;text-align:center;}
.svc-exp-copy{padding:40px 42px;}
.svc-exp-eye{font-family:var(--b);font-size:11px;letter-spacing:2.8px;text-transform:uppercase;color:var(--gold);}
.svc-exp-h{font-family:var(--d);font-size:clamp(24px,3vw,33px);color:var(--ink);font-weight:500;line-height:1.15;margin:10px 0 14px;}
.svc-exp-lead{font-family:var(--b);font-size:16.5px;color:var(--mute);line-height:1.8;margin-bottom:16px;font-weight:400;}
.svc-exp-sub{font-family:var(--b);font-size:10.5px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-bottom:13px;}
.svc-exp-points{display:flex;flex-direction:column;gap:13px;}
.svc-exp-pt{display:flex;gap:12px;align-items:flex-start;font-family:var(--b);font-size:16px;color:var(--mute);line-height:1.6;}
.svc-exp-pt b{color:var(--ink);font-weight:500;}
.svc-exp-dot{width:6px;height:6px;border-radius:50%;background:var(--grad);margin-top:7px;flex-shrink:0;}
.svc-exp-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;}
.svc-exp-chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0;}
.svc-chip{font-family:var(--b);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--gold-hi);border:1px solid var(--line2);background:rgba(214,191,151,.06);border-radius:20px;padding:6px 14px;}
.svc-exp-steps{display:flex;flex-direction:column;gap:10px;margin:4px 0 2px;}
.svc-step{display:flex;gap:11px;align-items:flex-start;font-family:var(--b);font-size:13.5px;color:var(--mute);line-height:1.55;}
.svc-step b{color:var(--ink);font-weight:500;}
.svc-step-n{flex-shrink:0;width:21px;height:21px;border-radius:50%;border:1px solid var(--line2);color:var(--gold);font-family:var(--b);font-size:10.5px;font-weight:500;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.sv-scene{width:100%;height:auto;overflow:visible;}
@keyframes svPop{0%{opacity:0;transform:scale(.3);}60%{transform:scale(1.15);}100%{opacity:1;transform:scale(1);}}
@keyframes svFade{to{opacity:1;}}
@keyframes svDraw{to{stroke-dashoffset:0;}}
@keyframes svPulse{0%,100%{opacity:.28;transform:scale(1);}50%{opacity:1;transform:scale(1.45);}}
@keyframes svFlow{to{stroke-dashoffset:-48;}}
@keyframes svFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
@keyframes svDrop{0%{opacity:0;transform:translateY(-26px);}70%{opacity:1;}100%{opacity:1;transform:translateY(0);}}
@keyframes svGrow{0%{opacity:0;transform:scaleY(0);}100%{opacity:1;transform:scaleY(1);}}
@keyframes svRiseY{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
@keyframes svShrinkX{from{transform:scaleX(1);}to{transform:scaleX(.5);}}
@keyframes svSpin{to{transform:rotate(360deg);}}
@keyframes svS1{from{opacity:0;transform:translate(-30px,16px) rotate(-13deg);}to{opacity:1;transform:none;}}
@keyframes svS2{from{opacity:0;transform:translate(26px,-18px) rotate(11deg);}to{opacity:1;transform:none;}}
@keyframes svS3{from{opacity:0;transform:translate(-20px,-22px) rotate(9deg);}to{opacity:1;transform:none;}}
@keyframes svS4{from{opacity:0;transform:translate(28px,20px) rotate(-10deg);}to{opacity:1;transform:none;}}
.a-pop{transform-box:fill-box;transform-origin:center;opacity:0;animation:svPop .55s var(--ease) both;}
.a-fade{opacity:0;animation:svFade .7s var(--ease) both;}
.a-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:svDraw 1.15s var(--ease) both;}
.a-pulse{transform-box:fill-box;transform-origin:center;animation:svPulse 2.4s ease-in-out infinite;}
.a-flow{animation:svFlow 1.5s linear infinite;}
.a-float{transform-box:fill-box;transform-origin:center;animation:svFloat 3.4s ease-in-out infinite;}
.a-drop{opacity:0;animation:svDrop .9s var(--ease) both;}
.a-grow{transform-box:fill-box;transform-origin:bottom;opacity:0;animation:svGrow .7s var(--ease) both;}
.a-riseY{opacity:0;animation:svRiseY .6s var(--ease) both;}
.a-shrinkX{transform-box:fill-box;transform-origin:right;animation:svShrinkX 1s var(--ease) .35s both;}
.a-spin{transform-box:fill-box;transform-origin:center;animation:svSpin 26s linear infinite;}
.a-s1{transform-box:fill-box;transform-origin:center;opacity:0;animation:svS1 .8s var(--ease) both;}
.a-s2{transform-box:fill-box;transform-origin:center;opacity:0;animation:svS2 .8s var(--ease) both;}
.a-s3{transform-box:fill-box;transform-origin:center;opacity:0;animation:svS3 .8s var(--ease) both;}
.a-s4{transform-box:fill-box;transform-origin:center;opacity:0;animation:svS4 .8s var(--ease) both;}
@media(prefers-reduced-motion:reduce){
  .a-pop,.a-fade,.a-draw,.a-pulse,.a-flow,.a-float,.a-drop,.a-grow,.a-riseY,.a-shrinkX,.a-spin,.a-s1,.a-s2,.a-s3,.a-s4{animation:none!important;opacity:1!important;stroke-dashoffset:0!important;transform:none!important;}
  .proc-dot::after,.thread-shine{animation:none!important;}
}
@media(max-width:760px){.svc-exp-grid{grid-template-columns:1fr;}.svc-exp-copy{padding:30px 24px;}.svc-exp-viz{padding:26px 22px;border-right:none;border-bottom:1px solid var(--line);}}

/* The gold thread catches the light as it travels. */
.thread-shine{stroke-dasharray:8 92;stroke-dashoffset:100;animation:threadShine 6s linear infinite;}
@keyframes threadShine{to{stroke-dashoffset:0;}}

:root{
  --img-home-hero:url('/img/home-hero.webp');
  --img-services-hero:url('/img/services-hero.webp');
  --img-services-band:url('/img/services-band.webp');
  --img-about-hero:url('/img/about-hero.webp');
  --img-approach-hero:url('/img/approach-hero.webp');
  --img-approach-card:url('/img/approach-card.webp');
  --img-contact-hero:url('/img/contact-hero.webp');
  --img-contact-band:url('/img/contact-band.webp');
  --img-junior-hero:url('/img/junior-hero.webp');
  --img-calculators-hero:url('/img/calculators-hero.webp');
}
@media (max-width: 768px){
  :root{
    --img-home-hero:url('/img/home-hero-mobile.webp');
    --img-services-hero:url('/img/services-hero-mobile.webp');
    --img-services-band:url('/img/services-band-mobile.webp');
    --img-about-hero:url('/img/about-hero-mobile.webp');
    --img-approach-hero:url('/img/approach-hero-mobile.webp');
    --img-approach-card:url('/img/approach-card-mobile.webp');
    --img-contact-hero:url('/img/contact-hero-mobile.webp');
    --img-contact-band:url('/img/contact-band-mobile.webp');
    --img-junior-hero:url('/img/junior-hero-mobile.webp');
    --img-calculators-hero:url('/img/calculators-hero-mobile.webp');
  }
}
@media (min-width: 1281px){ :root{ --img-approach-card:url('/img/approach-card-2560.webp'); } }
@media (min-width: 1601px){ :root{ --img-contact-band:url('/img/contact-band-2560.webp'); } }
@media (min-width: 1921px){
  :root{
    --img-home-hero:url('/img/home-hero-2560.webp');
    --img-services-hero:url('/img/services-hero-2560.webp');
    --img-services-band:url('/img/services-band-2560.webp');
    --img-about-hero:url('/img/about-hero-2560.webp');
    --img-approach-hero:url('/img/approach-hero-2560.webp');
    --img-contact-hero:url('/img/contact-hero-2560.webp');
    --img-contact-band:url('/img/contact-band-2560.webp');
    --img-junior-hero:url('/img/junior-hero-2560.webp');
    --img-calculators-hero:url('/img/calculators-hero-2560.webp');
  }
}
@media (min-width: 2561px){
  :root{
    --img-home-hero:url('/img/home-hero-3840.webp');
    --img-services-hero:url('/img/services-hero-3840.webp');
    --img-services-band:url('/img/services-band-3840.webp');
    --img-about-hero:url('/img/about-hero-3840.webp');
    --img-approach-hero:url('/img/approach-hero-3840.webp');
    --img-contact-hero:url('/img/contact-hero-3840.webp');
    --img-contact-band:url('/img/contact-band-3840.webp');
    --img-junior-hero:url('/img/junior-hero-3840.webp');
    --img-calculators-hero:url('/img/calculators-hero-3840.webp');
  }
}

/* ════ SCREEN-SIZE REFINEMENTS ════ */
.wrap,.nav-inner{max-width:calc(1500px + 2 * clamp(22px,5vw,120px));}
:where(.wrap) p:where(:not(.cta-sub, .fe-sub, .fe-text, .calc-disclaimer, .about-quote, [style*="uppercase"], [style*="var(--d)"])){max-width:55ch;}
.calc-disclaimer{max-width:55ch;}
/* Bigger screens draw the same page bigger. The page is laid out as if on a screen
   about 1,200-1,600px wide and scaled to fill the real one, so a large monitor shows the
   site larger rather than a small site with empty space either side. From 1440px it is
   10% larger than it was: Deepak asked for 100% to look as 110% browser zoom did.
   site.js (pageZoom) already turns positions back into scroll distances under zoom. */
@media(min-width:1280px){body{zoom:1.05;}}
@media(min-width:1440px){body{zoom:1.1;}}
@media(min-width:1680px){body{zoom:1.2;}}
@media(min-width:1920px){body{zoom:1.35;}}
@media(min-width:2240px){body{zoom:1.5;}}
@media(min-width:2560px){body{zoom:1.7;}}
@media(min-width:3000px){body{zoom:2;}}
@media(min-width:3600px){body{zoom:2.4;}}
.nav-logo{display:inline-block;padding:12px 0;margin:-12px 0;}
.nav-burger{padding:14px 11px;margin:-6px -3px;}
@media(min-width:601px){
  #mobile-menu{padding-left:clamp(32px,5vw,120px);padding-right:clamp(32px,5vw,120px);}
}
@media(max-width:600px){
  .foot-contact-item{margin-bottom:4px;}
  .foot-contact-item a{display:inline-block;padding:10px 0;}
  .cta-band a[href^="mailto:"]{padding:10px 0;}
}

/* ════ CLIENT LOGIN ════ */
/* The link sits just before "Start a conversation"; the page links stay centred between the logo and the pair. */
.nav-links{margin:0 auto;}
.nav-login{display:inline-flex;align-items:center;gap:7px;margin-right:22px;font-family:var(--b);font-size:11px;letter-spacing:2.2px;text-transform:uppercase;color:var(--gold);white-space:nowrap;transition:color .2s;padding:10px 0;}
.nav-login:hover,.nav-login.active{color:var(--gold-hi);}
.nav-login svg{flex:none;margin-top:-1px;}
/* Below 1200px the menu folds into the button on the right, but Client Login stays in the
   bar, just after the Sutrartha name, set off by a thin line. */
@media(max-width:1199px){
  #nav .nav-logo{margin-right:0;}
  #nav .nav-login{margin:0 auto 0 16px;padding:8px 0 8px 16px;border-left:1px solid var(--line2);font-size:10.5px;letter-spacing:1.8px;gap:6px;}
  #nav .nav-login::after{left:35px;bottom:3px;}
}
@media(max-width:400px){
  #nav .nav-logo{letter-spacing:4.5px;font-size:13px;}
  #nav .nav-login{margin-left:12px;padding-left:12px;font-size:10px;letter-spacing:1.4px;}
  #nav .nav-login::after{left:30px;}
}
@media(max-width:340px){#nav .nav-login svg{display:none;}#nav .nav-login::after{left:12px;}}

.login-sec{position:relative;overflow:hidden;min-height:min(100vh,900px);display:flex;align-items:center;padding:112px 0 72px;background:radial-gradient(55% 60% at 20% 32%,rgba(214,191,151,.12),transparent 70%),radial-gradient(45% 55% at 86% 82%,rgba(214,191,151,.07),transparent 70%),var(--surface);}
.login-wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(40px,7vw,110px);align-items:center;width:100%;}
.login-h{font-family:var(--d);font-size:clamp(46px,6vw,82px);font-weight:500;line-height:1.04;color:var(--ink);}
.login-h em{font-style:italic;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.login-sub{font-family:var(--b);font-size:17px;color:var(--mute);line-height:1.8;margin-top:22px;font-weight:400;}
.login-card{background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.018));border:1px solid var(--line2);border-radius:22px;padding:36px 34px 26px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 40px 90px -40px rgba(0,0,0,.9);}
.login-form .form-group{margin-bottom:22px;}
.pw-wrap{position:relative;}
.pw-wrap .form-input{padding-right:78px;}
.pw-toggle{position:absolute;right:0;bottom:7px;background:transparent;border:1px solid var(--line2);border-radius:999px;color:var(--gold);font-family:var(--b);font-size:10px;letter-spacing:1.8px;text-transform:uppercase;padding:7px 13px;cursor:pointer;transition:color .2s,border-color .2s;-webkit-tap-highlight-color:transparent;}
.pw-toggle:hover{color:var(--gold-hi);border-color:var(--gold);}
.login-submit{width:100%;margin-top:6px;}
.login-submit:disabled{opacity:.7;cursor:progress;transform:none;box-shadow:none;}
.login-alt{display:block;margin:16px auto 0;background:none;border:0;color:var(--mute);font-family:var(--b);font-size:14px;font-weight:400;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line2);cursor:pointer;padding:8px 4px;-webkit-tap-highlight-color:transparent;}
.login-alt:hover{color:var(--gold-hi);text-decoration-color:var(--gold);}
.login-msg{font-family:var(--b);font-size:14px;line-height:1.6;border-radius:12px;padding:12px 16px;margin-bottom:24px;border:1px solid transparent;}
.login-msg.err{color:#F0A58D;border-color:rgba(227,145,116,.45);background:rgba(227,145,116,.08);}
.login-msg.ok{color:var(--gold-hi);border-color:var(--line2);background:rgba(214,191,151,.07);}
.login-note{font-family:var(--b);font-size:16px;color:var(--mute);line-height:1.7;margin-bottom:22px;font-weight:400;}
.login-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;}
.login-row .login-alt{margin:0;}
.login-foot{display:flex;gap:9px;align-items:flex-start;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-family:var(--b);font-size:13px;color:var(--dim);line-height:1.6;}
.login-foot svg{flex:none;margin-top:2px;color:var(--gold);}
.login-form[hidden],.login-alt[hidden],.login-msg[hidden]{display:none!important;}
@media(max-width:900px){.login-wrap{grid-template-columns:1fr;gap:36px;}.login-card{max-width:520px;}}
@media(max-width:520px){.login-sec{padding:104px 0 64px;align-items:flex-start;}.login-card{padding:28px 22px 20px;}.login-row .btn{width:100%;}.login-row .login-alt{margin:0 auto;}}
/* Small laptops: with Client Login added, the full menu needs a little less air to fit on one line. */
.nav-cta{white-space:nowrap;}
/* The menu's regular weight is a little wider than the light one was; just above the
   burger breakpoint, where it is at its tightest, the letters close up a touch. */
@media(max-width:1279px){.nav-links a{letter-spacing:1.8px;}}
/* Up to 1494px: 1359px of layout at the 1.1 scale above. */
@media(max-width:1494px){.nav-links{gap:20px;}.nav-login{margin-right:14px;}.nav-cta{padding:10px 16px;}.nav-logo{margin-right:20px;}}
/* The emailed sign-in code, asked for in the same card. */
.code-input{font-size:30px;letter-spacing:.5em;text-align:center;padding:12px 0 12px .5em;font-variant-numeric:tabular-nums;}
.login-check{display:flex;align-items:center;gap:10px;margin:2px 0 22px;font-family:var(--b);font-size:14.5px;font-weight:400;color:var(--mute);cursor:pointer;}
.login-check input{width:18px;height:18px;flex:none;accent-color:#D6BF97;cursor:pointer;}
.code-actions{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 16px;margin-top:12px;}
.code-actions .login-alt{margin:0;}
.resend-form{display:inline;}
.login-alt:disabled{opacity:.6;cursor:progress;}
#code-view[hidden]{display:none!important;}
/* The way out when a client cannot finish on their own. */
.login-help{font-family:var(--b);font-size:13.5px;font-weight:400;color:var(--dim);line-height:1.7;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);}
.login-help a{color:var(--mute);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2);}
.login-help a:hover{color:var(--gold-hi);text-decoration-color:var(--gold);}
/* The date picker's own icon and pop-up follow the dark card. */
.login-card input[type="date"]{color-scheme:dark;min-height:44px;}
.login-card input[type="date"]::-webkit-calendar-picker-indicator{opacity:.7;cursor:pointer;}

/* Things that appear on request fade in softly rather than popping: the contact form's
   reply, the Prepay calculator's switched fields, and each Client Login screen. */
@keyframes softIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
#contact-form-status,#pp-lump-field,#pp-monthly-field,.login-form:not([hidden]),.login-alt:not([hidden]),.login-msg:not([hidden]),#code-view:not([hidden]){animation:softIn .45s var(--ease);}
@media(prefers-reduced-motion:reduce){#mobile-menu,#mobile-menu > a,#mobile-menu .mob-cta,details,summary::after{transition:none!important;}#contact-form-status,#pp-lump-field,#pp-monthly-field,.login-form,.login-alt,.login-msg,#code-view{animation:none!important;}}

/* Status line in every footer, the note under each service and group page, and the
   privacy line under the contact form: small print, easy to read, never shouting. */
.foot-status{font-family:var(--b);font-size:12.5px;line-height:1.7;color:var(--dim);max-width:none;margin:0 0 16px;}
.page-note{margin-top:28px;}
.cf-privacy{font-family:var(--b);font-size:13px;line-height:1.6;color:var(--dim);margin:14px 0 0;text-align:center;max-width:none;}
.cf-privacy a{color:var(--mute);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2);}
.cf-privacy a:hover{color:var(--gold-hi);}
.calc-rnote{font-family:var(--b);font-size:12.5px;line-height:1.6;color:var(--dim);margin-top:16px;max-width:none;}

/* mail symbol beside every email address (the contact page has its own) */
a[href^="mailto:"]:not(.cd-row)::before{content:"";display:inline-block;width:1.05em;height:1.05em;margin-right:.45em;vertical-align:-.15em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 6 10 7 10-7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 6 10 7 10-7'/%3E%3C/svg%3E") center/contain no-repeat;}

/* Junior: the page stays in place but blurred, with a "Coming soon" card over it that
   follows the visitor down the page until the footer. The blurred part can't be clicked,
   tabbed into or read out (inert), so only the card is announced. */
.soon-wrap{position:relative;}
.soon-blur{filter:blur(7px) saturate(.85);opacity:.55;pointer-events:none;user-select:none;}
.soon-over{position:absolute;inset:0;z-index:5;}
.soon-card{position:sticky;top:calc(50vh - 120px);margin:140px auto 0;max-width:520px;width:calc(100% - 44px);text-align:center;padding:42px 36px 40px;border:1px solid var(--line2);border-radius:22px;background:radial-gradient(80% 90% at 50% 0%,rgba(214,191,151,.14),transparent 70%),rgba(19,19,24,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 40px 100px -40px rgba(0,0,0,.95);animation:softIn .6s var(--ease) both;}
.soon-eye{display:block;margin-bottom:12px;}
.soon-title{font-family:var(--d);font-size:clamp(40px,6vw,64px);font-weight:500;color:var(--ink);line-height:1.05;margin:0;max-width:none;}
.soon-note{font-family:var(--b);font-size:16px;color:var(--mute);line-height:1.7;margin:14px auto 0;max-width:34ch;}
.soon-note .nw{white-space:nowrap;}
@media(max-width:640px){.soon-card{margin-top:110px;padding:34px 24px 32px;}.soon-blur{filter:blur(6px) saturate(.85);}}
@media(prefers-reduced-motion:reduce){.soon-card{animation:none!important;}}