/*
The Polaris Compass landing page, built on the locked North Star brand palette V1 and the revised flow copy.
Opening: one pinned scroll scene (compass hero → compass to centre → business/people halves → merge into "Who I work with").
Then: personas, record, statement, how I help, meet Devraj, testimonials, the Compass Conversation, FAQ, booking, footer.
Motion: scroll reveals, word-by-word headings, parallax, slowly turning compass watermarks, smooth scrolling.
Touch screens get a lighter build of it (native scrolling, no parallax or dust, no live blur) so scrolling stays smooth.
The page commits to fixed brand grounds (navy, sand, white), so there are no light/dark theme blocks.
*/
:root{
color-scheme:dark;
--gut:clamp(16px,4.5vw,64px);
/* North Star brand palette V1 */
--navy:#0B1F3A; --blue:#0769B4; --gold:#C9A24A; --gold-dark:#7A5C17; --sand:#F4EFE6; --slate:#1F2933; --grey:#5B6573; --red:#C42027; --white:#FFFFFF;
/* Tints derived from the palette */
--navy-lift:#1B4C8A; --on-navy-soft:#DCE6F2; --on-navy-dim:#C5D0DE; --navy-line:rgba(255,255,255,.18); --ink-hair:rgba(11,31,58,.14);
--sand-clear:rgba(244,239,230,0); --navy-veil:rgba(11,31,58,.86); --navy-clear:rgba(11,31,58,.2); --navy-card:rgba(255,255,255,.05); --blue-tint:#E8F0F8; --day-off:#A3ACB8; --field:#C2C9D2; --sheen:rgba(255,255,255,.28); --scrim:rgba(255,255,255,.96);
--blue-glow:rgba(7,105,180,.5); --blue-ring:rgba(7,105,180,.3); --ray:rgba(150,196,246,.34); --ray-soft:rgba(150,196,246,.08);
--gold-glow:rgba(201,162,74,.7); --gold-haze:rgba(201,162,74,.3); --gold-light:#F6E3AE; --shadow:rgba(5,14,28,.35); --lift:rgba(11,31,58,.14); --glyph:rgba(11,31,58,.06);
--glass:rgba(11,31,58,.84); --glass-line:rgba(255,255,255,.1); --glass-pill:rgba(255,255,255,.12); --glass-shadow:rgba(5,14,28,.28);
--head:"Montserrat","Avenir Next","Segoe UI",system-ui,sans-serif;
--body:"Source Sans 3","Source Sans Pro","Segoe UI",system-ui,sans-serif;
--ease:cubic-bezier(.2,.8,.2,1);
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* Once Lenis is running it does the smoothing; native smooth scrolling on top makes every frame lag behind. */
html.lenis{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
main,.foot{overflow-x:clip}
body{margin:0;background:var(--sand);color:var(--white);font-family:var(--body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
.wrap{padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
.inner{max-width:1240px;margin-inline:auto}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
[id]{scroll-margin-top:96px}
.label{margin:0;font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border:0;border-radius:999px;background:var(--blue);color:var(--white);font-family:var(--head);font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,var(--sheen) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--ease)}
.btn:hover{transform:translateY(-1px);box-shadow:0 0 0 6px var(--blue-ring),0 10px 40px var(--blue-glow)}
.btn:hover::after{transform:translateX(120%)}
.btn svg{flex:0 0 auto;width:18px;height:18px;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--ghost{min-height:44px;padding:0 20px;background:transparent;box-shadow:inset 0 0 0 1px var(--navy-line);font-size:14px}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
@keyframes spin{to{transform:rotate(360deg)}}
/* ---------- Navigation ----------
Desktop: a full-width bar that shrinks into a floating navy pill on scroll, with a sliding highlight that marks
the section in view (after 21st.dev "Resizable Navbar" and "Slide Tabs"). Tablet and phone: a full-screen menu
that opens out of the menu button (after "Immersive Full Screen Navigation"). */
.nav{--prog:0;--nav-top:18px;position:fixed;z-index:45;top:0;left:0;right:0;padding:calc(env(safe-area-inset-top,0px) + var(--nav-top)) max(var(--gut),env(safe-area-inset-right,0px)) 0 max(var(--gut),env(safe-area-inset-left,0px));pointer-events:none;transition:padding .5s var(--ease)}
.nav.is-compact{--nav-top:12px}
.admin-bar .nav{top:var(--wp-admin--admin-bar--height,32px)}
@media (max-width:600px){.admin-bar .nav{top:0}}
.nav-bar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1440px;margin:0 auto;padding:6px 0;border-radius:999px;pointer-events:auto;transition:max-width .7s var(--ease),padding .6s var(--ease),background-color .4s ease,box-shadow .4s ease}
.nav.is-compact .nav-bar{max-width:1160px;padding:7px 7px 7px 22px;background:var(--glass);box-shadow:0 16px 40px var(--glass-shadow),inset 0 0 0 1px var(--glass-line);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
.nav-bar::after{content:"";position:absolute;left:28px;right:28px;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold),var(--gold-light));transform:scaleX(var(--prog));transform-origin:0 50%;opacity:0;transition:opacity .4s}
.nav.is-compact .nav-bar::after{opacity:1}
.nav-logo{flex:0 0 auto;display:block;line-height:0}
.nav-logo img{height:66px;width:auto;transition:height .6s var(--ease)}
.nav.is-compact .nav-logo img{height:42px}
.nav-links{position:relative;display:flex;align-items:center;gap:2px}
.nav-links a{position:relative;z-index:1;padding:11px 14px;border-radius:999px;font-family:var(--head);font-size:14px;font-weight:700;color:var(--on-navy-soft);text-decoration:none;white-space:nowrap;transition:color .25s}
.nav-links a:hover,.nav-links a.is-active{color:var(--white)}
.nav-pill{position:absolute;z-index:0;top:0;left:0;width:var(--pw,0px);height:100%;border-radius:999px;background:var(--glass-pill);opacity:var(--po,0);transform:translateX(var(--px,0px));transition:transform .5s var(--ease),width .5s var(--ease),opacity .3s ease}
.nav-end{display:flex;align-items:center;gap:10px}
.nav-cta{min-height:46px;padding:0 20px;font-size:14px}
.nav-burger{display:none;position:relative;flex:0 0 auto;width:46px;height:46px;border:0;border-radius:50%;background:var(--glass-pill);cursor:pointer}
.nav-burger span{position:absolute;left:14px;right:14px;height:2px;border-radius:2px;background:var(--white);transition:transform .45s var(--ease),top .45s var(--ease)}
.nav-burger span:first-child{top:18px}
.nav-burger span:last-child{top:26px}
.nav-burger[aria-expanded="true"] span:first-child{top:22px;transform:rotate(45deg)}
.nav-burger[aria-expanded="true"] span:last-child{top:22px;transform:rotate(-45deg)}
.menu{position:fixed;z-index:44;inset:0;display:grid;grid-template-rows:1fr auto;padding-block:calc(env(safe-area-inset-top,0px) + 120px) calc(env(safe-area-inset-bottom,0px) + 36px);overflow:auto;background:var(--navy);color:var(--white);clip-path:circle(0px at var(--ox,90%) var(--oy,48px));transition:clip-path .8s cubic-bezier(.7,0,.2,1)}
.menu.is-open{clip-path:circle(150% at var(--ox,90%) var(--oy,48px))}
.menu-in{align-self:center}
.menu-links{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.menu-links li{overflow:hidden}
.menu-links a{display:inline-block;padding:6px 0;font-family:var(--head);font-size:clamp(30px,7vw,58px);font-weight:800;line-height:1.1;letter-spacing:-.03em;color:var(--white);text-decoration:none;transform:translateY(110%);transition:transform .75s var(--ease),color .25s;transition-delay:calc(var(--i) * 60ms + 220ms),0s}
.menu.is-open .menu-links a{transform:none}
.menu-links a:hover,.menu-links a.is-active{color:var(--gold)}
.menu-foot{display:grid;justify-items:start;gap:14px;opacity:0;transform:translateY(20px);transition:opacity .5s ease .6s,transform .6s var(--ease) .6s}
.menu.is-open .menu-foot{opacity:1;transform:none}
.menu-foot p{margin:0;font-size:15px;color:var(--on-navy-dim)}
@media (max-width:1180px){
.nav-links{display:none}
.nav-burger{display:block}
}
@media (max-width:640px){
.nav-cta{display:none}
.nav-logo img{height:50px}
.nav.is-compact .nav-logo img{height:38px}
.nav.is-compact .nav-bar{padding:6px 6px 6px 16px}
}
/* Where the browser can tie an animation to the page scroll, the reading-progress line runs off the scroll itself,
with no script on each scroll frame. */
@supports (animation-timeline:scroll()){
.nav-bar::after{animation:read-prog linear both;animation-timeline:scroll(root)}
}
@keyframes read-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* Touch screens get a solid bar instead of frosted glass, which a phone would have to re-blur on every scroll frame. */
@media (hover:none) and (pointer:coarse){
.nav.is-compact .nav-bar{background:var(--navy);-webkit-backdrop-filter:none;backdrop-filter:none}
}
/* ---------- Opening scroll scene ----------
Layout: one sticky 100svh stage. Hero layer (nav, copy from --copyL, logo strip) over a navy sky; the compass is
positioned by script; the sand half slides in from the right; the compass then shrinks away as a circle opens through
the stage onto the "Who I work with" section beneath it. */
/* The scene overlaps the top of the next section; only the pinned stage takes clicks, so taps reach the persona tabs. */
.scene{position:relative;z-index:2;height:380svh;pointer-events:none}
.scene .stage{pointer-events:auto}
.stage{--hx:0;--hv:0;--hv2:0;--hm:0;--ht:0;--r:0px;--D:420px;--copyL:37vw;--mx:0;position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
.stage-mask{position:absolute;inset:0;isolation:isolate;background:var(--navy)}
/* The opening circle is a hole through the stage, so the next section shows through it as it scrolls up. */
.stage.is-opening .stage-mask{-webkit-mask-image:radial-gradient(circle at 50% var(--cy,50%),transparent var(--r),#000 calc(var(--r) + 1.5px));mask-image:radial-gradient(circle at 50% var(--cy,50%),transparent var(--r),#000 calc(var(--r) + 1.5px))}
.stage.is-open,.stage.is-open *{pointer-events:none!important}
/* Chrome can leave stale patches of a masked layer on screen when animated layers sit under the mask, so the
(already invisible) rays, dust and watermark spin drop out while the circle opens, and the masked layer stops
painting once the circle has cleared the screen. */
.stage.is-opening .h-rays,.stage.is-opening .h-dust{display:none}
.stage.is-opening .s-deco svg{animation-play-state:paused}
.stage.is-cleared .stage-mask{visibility:hidden}
.h-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(70% 55% at 58% -10%,var(--navy-lift),transparent 72%),radial-gradient(55% 65% at 6% 72%,var(--blue-glow),transparent 70%),var(--navy);animation:fade 1.8s ease both}
.h-rays{position:absolute;inset:0;opacity:calc((1 - var(--hx) * .6) * (1 - var(--hv)));transform:translate3d(calc(var(--mx) * 22px),0,0)}
.h-rays i{position:absolute;top:-12%;left:var(--x);width:var(--w);height:125%;background:linear-gradient(180deg,var(--ray),var(--ray-soft) 55%,transparent 82%);filter:blur(var(--b,16px));transform-origin:50% 0;transform:rotate(var(--r));opacity:var(--o);mix-blend-mode:screen;will-change:transform,opacity;animation:ray var(--d) ease-in-out var(--dl) infinite alternate}
@keyframes ray{to{transform:rotate(calc(var(--r) + 4deg)) scaleX(1.3);opacity:calc(var(--o) * .4)}}
.h-dust{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;opacity:calc(1 - var(--hv))}
.h-compass{position:absolute;z-index:5;left:0;top:0;width:900px;height:900px;transform-origin:50% 50%;pointer-events:none;will-change:transform}
.h-compass svg{display:block;width:100%;height:100%;overflow:visible;animation:compass-in 1.8s var(--ease) .05s both}
@keyframes compass-in{from{opacity:0;transform:scale(.88)}}
.c-disc{fill:var(--navy);opacity:var(--disc,0)}
.c-ring{fill:none;stroke:var(--white);stroke-width:1.4;opacity:.24;stroke-dasharray:1;animation:draw 1.8s cubic-bezier(.65,.05,.25,1) var(--d,.2s) both}
.c-ring--strong{opacity:.38}
@keyframes draw{from{stroke-dashoffset:1}}
.c-bezel-spin{animation:spin 240s linear infinite}
.c-bezel{animation:fade 1.6s ease .5s both}
.c-ticks{fill:none;stroke:var(--white);stroke-width:1.6;opacity:.42}
.c-num{font-family:var(--head);font-size:15px;font-weight:700;letter-spacing:.06em;fill:var(--white);opacity:.5}
.c-rose-settle{--rose:32deg;transform:rotate(var(--rose));animation:settle 2.6s cubic-bezier(.33,.66,.36,1) .3s both}
@keyframes settle{
0%{transform:rotate(calc(var(--rose) - 140deg));opacity:0}
12%{opacity:1}
42%{transform:rotate(calc(var(--rose) + 17deg))}
62%{transform:rotate(calc(var(--rose) - 7deg))}
78%{transform:rotate(calc(var(--rose) + 2.8deg))}
90%{transform:rotate(calc(var(--rose) - 1deg))}
100%{transform:rotate(var(--rose))}
}
.c-rose-sway{animation:sway 8s ease-in-out 3s infinite}
@keyframes sway{25%{transform:rotate(1.4deg)}75%{transform:rotate(-1.4deg)}}
.f-light{fill:url(#gLight);stroke:rgba(255,255,255,.45);stroke-width:1}
.f-dark{fill:url(#gDark);stroke:rgba(255,255,255,.14);stroke-width:1}
.minor{opacity:.72}
.inter{opacity:.92}
.c-hub{fill:url(#gHub)}
.c-hub-ring{fill:none;stroke:var(--white);stroke-width:2;opacity:.6}
.c-n{font-family:var(--head);font-size:46px;font-weight:800;fill:url(#gLight)}
.c-spark{fill:var(--white);transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 0 6px var(--blue));animation:twinkle 4.5s ease-in-out 2.9s infinite both}
@keyframes twinkle{0%,100%{transform:scale(.55);opacity:.55}50%{transform:scale(1.15);opacity:1}}
.c-arc,.c-arc-glow{--arcL:.367;fill:none;stroke-linecap:round;stroke-dasharray:var(--arcL) 1;animation:arc-draw 1.9s cubic-bezier(.6,.05,.25,1) .7s both}
.c-arc{stroke:url(#gArc);stroke-width:3.2}
.c-arc-glow{stroke:var(--gold);stroke-width:12;opacity:.22}
@keyframes arc-draw{from{stroke-dashoffset:var(--arcL)}}
.c-dot{fill:var(--gold);transform-box:fill-box;transform-origin:center;animation:pop .6s cubic-bezier(.3,1.6,.5,1) 1.7s both}
.c-dot-pulse{fill:none;stroke:var(--gold);stroke-width:2;transform-box:fill-box;transform-origin:center;opacity:0;animation:pulse 2.6s ease-out 2.3s infinite}
@keyframes pop{from{transform:scale(0)}}
@keyframes pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.4);opacity:0}}
.h-layer{position:absolute;inset:0;z-index:6;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto}
.stage.is-past-hero .h-layer{pointer-events:none}
.h-nav{height:104px}
.h-nav > *{animation:fade 1.2s ease .2s both}
.h-logo{display:block;line-height:0}
.h-logo img{height:70px;width:auto}
.h-copy{position:relative;align-self:center;display:grid;justify-items:start;gap:24px;padding-left:var(--copyL);padding-right:max(var(--gut),env(safe-area-inset-right,0px));padding-block:32px 48px;opacity:calc(1 - var(--hx) * 1.2);transform:translateY(calc(var(--hx) * -70px))}
/* Byline: Devraj's name reads first, in white headline type; his roles sit beside it as a quieter label. */
.h-byline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0;animation:rise .9s var(--ease) .8s both}
.h-name{font-family:var(--head);font-size:clamp(20px,1.75vw,28px);font-weight:800;line-height:1.1;letter-spacing:-.01em;color:var(--white)}
.h-role{position:relative;padding-left:17px;color:var(--on-navy-dim)}
.h-role::before{content:"";position:absolute;left:0;top:50%;width:1px;height:1.8em;margin-top:-.9em;background:currentColor;opacity:.55}
.h-title{margin:0;font-family:var(--head);font-size:min(clamp(40px,min(6.1vw,11.5vh),120px),calc((100vw - var(--copyL) - var(--gut)) / (var(--chars,14) * .707)));font-weight:800;line-height:.95;letter-spacing:-.005em;text-transform:uppercase;white-space:nowrap}
.h-title .w{display:inline-block}
.h-title .ch{display:inline-block;animation:char .9s var(--ease) calc(.95s + var(--i) * .045s) both}
@keyframes char{from{opacity:0;transform:translateY(.45em) rotateX(-70deg);filter:blur(6px)}}
.h-title .gold{background:linear-gradient(105deg,var(--gold) 0 40%,var(--gold-light) 48%,var(--white) 50%,var(--gold-light) 52%,var(--gold) 60% 100%);background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:wipe 1s cubic-bezier(.6,0,.2,1) 1.45s both,shine 7s ease-in-out 2.4s infinite}
@keyframes wipe{from{clip-path:inset(0 100% 0 0);opacity:.2}to{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes shine{0%{background-position:100% 0}22%,100%{background-position:0 0}}
.h-tag{margin:0;max-width:62ch;font-size:clamp(18px,1.75vw,28px);line-height:1.35;color:var(--on-navy-soft);animation:rise 1s var(--ease) 1.7s both}
.h-tag b{font-weight:700;color:var(--white)}
.h-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:6px;animation:rise 1s var(--ease) 1.95s both}
.h-cta .label{color:var(--on-navy-dim);font-size:11.5px}
/* The navy block ends just past "25+ Years" with a short fade, so no grey band sits in front of the logos. */
.h-strip{--navy-end:max(19%,250px);position:relative;background:linear-gradient(90deg,var(--navy) 0,var(--navy) var(--navy-end),var(--white) calc(var(--navy-end) + 70px));transform:translateY(calc(var(--hx) * 115%));animation:fade 1s ease 1.3s both}
.h-strip::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:linear-gradient(90deg,var(--gold-haze),var(--gold) 18%,var(--gold-light) 30%,var(--gold) 44%,var(--gold) 86%,var(--gold-light) 97%,var(--gold));box-shadow:0 0 14px var(--gold-glow),0 0 36px var(--gold-haze);transform-origin:0 50%;animation:line-in 1.5s cubic-bezier(.65,0,.2,1) 1.1s both}
@keyframes line-in{from{transform:scaleX(0)}}
.h-glint{position:absolute;z-index:1;top:-8px;left:0;width:220px;height:16px;background:radial-gradient(closest-side,var(--white),var(--gold-light) 30%,var(--gold-haze) 60%,transparent);opacity:0;pointer-events:none;animation:glint 7s ease-in-out 2.8s infinite}
@keyframes glint{0%{transform:translateX(-240px);opacity:0}6%{opacity:1}34%{transform:translateX(100vw);opacity:1}35%,100%{transform:translateX(100vw);opacity:0}}
.h-strip-in{display:flex;align-items:center;gap:28px;min-height:124px;padding-block:16px}
.h-years{flex:0 0 auto;display:grid;gap:6px;width:calc(37vw - max(var(--gut),env(safe-area-inset-left,0px)) - 28px);margin:0}
.h-years b{font-family:var(--head);font-size:clamp(24px,2.1vw,32px);font-weight:800;line-height:1;color:var(--gold)}
.h-years span{font-family:var(--head);font-size:12.5px;font-weight:700;line-height:1.45;letter-spacing:.16em;text-transform:uppercase;color:var(--on-navy-soft)}
.h-logos{flex:1 1 auto;min-width:0;max-width:100%;overflow:hidden}
.h-logos ul{display:flex;align-items:center;margin:0;padding:0;list-style:none}
.h-logos li{flex:0 0 auto;display:flex;align-items:center;justify-content:center;height:70px;padding:0 clamp(12px,1.6vw,26px);border-left:1px solid var(--ink-hair);animation:rise .8s var(--ease) calc(1.8s + var(--i) * .08s) both}
.h-logos li:first-child{border-left:0;padding-left:0}
.h-logos li.split{border-left:2px solid var(--gold)}
.h-logos img{width:auto;height:var(--h,48px)}
.h-logos .dup{display:none}
/* The two text blocks start on one line (--hh, the taller block's height, comes from landing.js) rather than each
centring on its own, so "For the business" and "For the people who will lead it" sit level. */
.s-lcopy{position:absolute;z-index:2;left:max(var(--gut),env(safe-area-inset-left,0px));top:calc(50% - var(--hh,0px) / 2);width:calc(50% - var(--D) / 2 - 56px - max(var(--gut),env(safe-area-inset-left,0px)));display:grid;gap:16px;opacity:var(--hv2);transform:translateX(calc((1 - var(--hv2)) * -40px))}
.s-right{position:absolute;z-index:2;top:0;bottom:0;left:50%;width:50%;background:var(--sand);color:var(--navy);transform:translateX(calc((1 - var(--hv)) * 101%))}
.s-rcopy{position:absolute;right:max(var(--gut),env(safe-area-inset-right,0px));top:calc(50% - var(--hh,0px) / 2);width:calc(100% - var(--D) / 2 - 56px - max(var(--gut),env(safe-area-inset-right,0px)));display:grid;gap:16px;opacity:var(--hv2);transform:translateX(calc((1 - var(--hv2)) * 40px))}
.s-label{margin:0;font-family:var(--head);font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.s-lcopy .s-label{color:var(--on-navy-dim)}
.s-rcopy .s-label{color:var(--gold-dark)}
.s-h{margin:0;font-family:var(--head);font-size:clamp(24px,min(2.8vw,5.2vh),44px);font-weight:800;line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
.s-p{margin:0;font-size:clamp(16px,1.15vw,18px);line-height:1.55}
.s-lcopy .s-p{color:var(--on-navy-soft)}
.s-rcopy .s-p{color:var(--slate)}
.s-outcomes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;margin:4px 0 0;padding:0;list-style:none;font-family:var(--head);font-size:14.5px;font-weight:700}
.s-outcomes li{display:flex;justify-content:space-between;gap:10px;padding-block:9px;border-top:1px solid var(--navy-line);color:var(--on-navy-dim)}
.s-outcomes b{color:var(--gold)}
.s-sub{margin:8px 0 -2px;font-family:var(--head);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.s-rcopy .s-outcomes li{border-top-color:var(--ink-hair);color:var(--slate)}
/* The coaching half answers the compass on the business half with a faint compass watermark of its own. */
.s-deco{position:absolute;z-index:0;right:-170px;bottom:-190px;width:520px;aspect-ratio:1;color:var(--navy);opacity:.06;pointer-events:none}
.s-deco svg{display:block;width:100%;height:100%;animation:spin 200s linear infinite}
.s-edge{position:absolute;z-index:4;left:50%;top:var(--cy,50%);width:calc(var(--r) * 2 + 6px);height:calc(var(--r) * 2 + 6px);transform:translate(-50%,-50%);border:2px solid var(--gold);border-radius:50%;pointer-events:none;opacity:calc((1 - var(--hm)) * min(1, var(--hm) * 10))}
@media (max-width:760px){
.h-nav{height:84px}
.h-nav .btn--ghost{display:none}
.h-logo img{height:50px}
.h-copy{align-self:end;gap:16px;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-block:12px 24px}
.h-byline{flex-direction:column;align-items:flex-start;gap:6px}
.h-name{font-size:20px}
.h-role{padding-left:0;font-size:10.5px}
.h-role::before{display:none}
.h-title{font-size:clamp(30px,min(12.5vw,(100vw - 2 * var(--gut)) / (var(--wchars,9) * .74)),60px);white-space:normal}
.h-title .w{display:block}
.h-tag{font-size:18px}
.h-cta{display:grid;grid-template-columns:minmax(0,max-content);justify-items:center;row-gap:10px}
.h-cta .label{font-size:10.5px}
.h-strip{background:var(--white)}
.h-strip-in{flex-direction:column;align-items:stretch;gap:0;min-height:0;padding:0}
.h-years{width:auto;grid-template-columns:auto 1fr;align-items:center;gap:14px;padding:12px max(var(--gut),env(safe-area-inset-right,0px)) 12px max(var(--gut),env(safe-area-inset-left,0px));background:var(--navy)}
.h-years span{font-size:10.5px}
.h-logos{padding-block:8px}
.h-logos ul{width:max-content;animation:marquee 26s linear 2.4s infinite}
.h-logos li{height:56px;padding:0 18px;animation:none}
.h-logos li:first-child{border-left:1px solid var(--ink-hair);padding-left:18px}
.h-logos .dup{display:flex}
.h-logos img{height:calc(var(--h,48px) * .8)}
.s-lcopy{top:auto;bottom:calc(100% - var(--cy,50%) + var(--D) / 2 + var(--sg,18px));right:max(var(--gut),env(safe-area-inset-right,0px));width:auto;gap:10px;transform:translateY(calc((1 - var(--hv2)) * -24px))}
.s-right{left:0;top:var(--cy,50%);width:100%;height:calc(100% - var(--cy,50%));transform:translateY(calc((1 - var(--hv)) * 101%))}
.s-rcopy{top:calc(var(--D) / 2 + var(--sg,18px));left:max(var(--gut),env(safe-area-inset-left,0px));width:auto;gap:10px;transform:translateY(calc((1 - var(--hv2)) * 24px))}
.s-label{font-size:10.5px}
.s-h{font-size:clamp(22px,6.4vw,28px)}
.s-p{font-size:15.5px}
/* Each point carries its own gold dot in front, so a line never ends on a dangling dot. */
.s-outcomes{display:flex;flex-wrap:wrap;gap:4px 14px;margin:2px 0 0;font-size:12.5px;line-height:1.35}
.s-outcomes li{display:block;padding:0;border:0}
.s-outcomes li::before{content:"";display:inline-block;width:5px;height:5px;margin:0 6px 0 0;border-radius:50%;background:var(--gold);vertical-align:.18em}
.s-rcopy .s-outcomes li::before{background:var(--gold-dark)}
.s-sub{margin:4px 0 -4px;font-size:10px}
}
/* Short phones, which includes most iPhones in Safari (its toolbars leave about 550-680px), tighten the hero and
the two halves so every line still fits rather than dropping any of them. */
@media (max-width:760px) and (max-height:720px){
.h-copy{gap:12px;padding-block:8px 16px}
.h-byline{gap:4px}
.h-title{font-size:clamp(30px,min(12.5vw,7.2svh,(100vw - 2 * var(--gut)) / (var(--wchars,9) * .74)),60px)}
.h-tag{font-size:16px}
.h-cta .btn{min-height:48px}
.h-years{padding-block:9px}
.h-logos{padding-block:4px}
.h-logos li{height:46px}
.h-logos img{height:calc(var(--h,48px) * .68)}
.s-lcopy,.s-rcopy{gap:8px}
.s-p{font-size:14.5px;line-height:1.45}
}
@media (max-width:760px) and (max-height:600px){
.h-copy{gap:10px}
.h-cta{row-gap:6px}
.h-title{font-size:clamp(30px,min(12.5vw,6.6svh,(100vw - 2 * var(--gut)) / (var(--wchars,9) * .74)),60px)}
.h-tag{font-size:15px}
.h-logos li{height:40px}
.h-logos img{height:calc(var(--h,48px) * .6)}
.s-lcopy,.s-rcopy{gap:6px}
.s-outcomes{font-size:11.5px}
.s-h{font-size:22px}
.s-p{font-size:14px}
}
@keyframes marquee{to{transform:translateX(-50%)}}
/* Loops out of sight stop ticking: the hero's shine, glint and logo marquee once the hero copy has gone, and
everything on the stage once the circle has opened onto the next section. */
.stage.is-past-hero .h-title .gold,.stage.is-past-hero .h-glint,.stage.is-past-hero .h-logos ul,.stage.is-cleared *{animation-play-state:paused}
/* While the page is still arriving, the navy sky and the header show on their own. The compass is drawn and placed by
the script at the end of the file, so it and the hero copy stay hidden, their intro held at its first frame,
until that script has run; then the whole intro plays once, in order. */
.is-booting .h-compass,.is-booting .h-layer{visibility:hidden}
.is-booting .h-compass *,.is-booting .h-layer *{animation-play-state:paused!important}
/* Touch screens: the rays come pre-softened instead of blurred and blended live, and there is no dust. */
@media (hover:none) and (pointer:coarse){
.h-rays i{left:calc(var(--x) - var(--b,16px));width:calc(var(--w) + var(--b,16px) * 2);background:radial-gradient(50% 100% at 50% 0,var(--ray),var(--ray-soft) 55%,transparent 82%);filter:none;mix-blend-mode:normal}
.h-dust{display:none}
}
/* ---------- Section scaffolding ---------- */
.sec{padding-block:clamp(88px,10vw,140px)}
.sec-head{display:grid;gap:16px;max-width:780px;margin-bottom:clamp(40px,5vw,64px)}
.sec-head--center{margin-inline:auto;justify-items:center;text-align:center}
/* Split head: eyebrow and heading on the left, the description (or a button) on the right, so sections sit in one screen. */
.sec-head--split{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(32px,6vw,96px);align-items:end;max-width:none;margin-bottom:clamp(32px,3.5vw,48px)}
.sec-head--split:has(> .head-cta){grid-template-columns:minmax(0,1fr) auto}
.sec-head--split > *{grid-column:1}
.sec-head--split > .lede,.sec-head--split > .head-cta{grid-column:2;grid-row:1 / span 2;align-self:end}
.sec-head--split > .head-cta{justify-self:end}
/* Results and How I help: the intro sits level with the top of the heading, answering it, instead of down at its foot. */
@media (min-width:981px){.sec-head--split > .lede,.sec-head--split:has(> .lede) > .h2{grid-row:2;align-self:start}}
.head-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:16px 28px}
.promise{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--head);font-size:clamp(18px,1.6vw,22px);font-weight:600;letter-spacing:-.01em;color:var(--navy)}
.promise svg{flex:0 0 auto;width:20px;height:20px;color:var(--gold)}
.promise b{font-weight:800;color:var(--gold-dark)}
.eyebrow{display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";flex:0 0 auto;width:13px;height:13px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.h2{margin:0;font-family:var(--head);font-size:clamp(30px,3.6vw,48px);font-weight:800;line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
.lede{margin:0;max-width:62ch;font-size:clamp(17px,1.3vw,19.5px);line-height:1.6}
/* Desert Sand is the page base; white bands keep back-to-back light sections apart */
.on-sand{--sec-bg:var(--sand);background:var(--sand);color:var(--slate)}
.on-sand .h2{color:var(--navy)}
.on-sand .eyebrow{color:var(--gold-dark)}
.on-white{--sec-bg:var(--white);background:var(--white);color:var(--slate)}
.on-white .h2{color:var(--navy)}
.on-white .eyebrow{color:var(--blue)}
.on-navy{background:var(--navy);color:var(--white)}
.on-navy .lede{color:var(--on-navy-soft)}
.on-navy .eyebrow{color:var(--on-navy-dim)}
/* Slowly turning compass watermarks, only where no text sits over them */
.has-deco{position:relative;overflow:hidden;isolation:isolate}
.has-deco > .inner{position:relative;z-index:1}
.deco{--ds:640px;position:absolute;z-index:0;width:var(--ds);aspect-ratio:1;color:var(--white);opacity:.07;pointer-events:none;transform:translate3d(0,var(--par,0px),0)}
.deco svg{display:block;width:100%;height:100%;animation:spin 200s linear infinite}
[data-deco].is-idle svg{animation-play-state:paused}
.deco--rec{right:-190px;top:-170px}
.deco--meet{--ds:720px;left:-300px;bottom:-320px}
.deco--book{--ds:780px;right:-150px;top:50%;margin-top:-390px;opacity:.09}
/* ---------- Who I work with ----------
Layout: underline tabs; the quote leads on the left (5 cols); both lists share one sand panel on the right (7 cols). */
/* The section tucks under the end of the opening scene so it is already there when the circle opens. */
.who{position:relative;z-index:1;margin-top:-140svh;padding-block:clamp(96px,9vw,120px) clamp(88px,10vw,140px)}
/* Persona tabs. Desktop and tablet: a row of white pill buttons; the chosen role's button fills navy. Phones: the
roles become one segmented switch with a sliding navy pill, pinned under the header (on a sand band once pinned)
while the reader is in the section; the role's booking button closes the section. */
.who-switch{margin-bottom:clamp(40px,5vw,64px)}
.who-tabs{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.who-tab{position:relative;padding:14px 28px;border:1px solid var(--ink-hair);border-radius:999px;background:var(--white);color:var(--navy);font-family:var(--head);font-size:15px;font-weight:700;white-space:nowrap;cursor:pointer;box-shadow:0 6px 18px var(--glyph);transition:color .3s,background-color .3s,border-color .3s,box-shadow .3s,transform .3s var(--ease)}
.who-tab:hover{border-color:var(--navy);transform:translateY(-1px)}
.who-tab[aria-selected="true"]{border-color:var(--navy);background:var(--navy);color:var(--white);box-shadow:0 12px 26px var(--lift);transform:none}
.who-tab:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.who-ind{position:absolute;display:none;bottom:-1px;left:0;width:var(--w,0px);height:3px;border-radius:3px 3px 0 0;background:var(--navy);transform:translateX(var(--x,0px));transition:transform .5s var(--ease),width .5s var(--ease)}
@media (max-width:760px){
.who-switch{--pin:calc(env(safe-area-inset-top,0px) + 84px);position:sticky;z-index:5;top:var(--pin);display:flex;justify-content:center}
.who-switch::before{content:"";position:absolute;z-index:-1;top:calc(-1 * var(--pin));bottom:-18px;left:50%;width:100vw;transform:translateX(-50%);background:linear-gradient(var(--sand) 86%,var(--sand-clear));opacity:0;transition:opacity .3s;pointer-events:none}
.who-switch.is-stuck::before{opacity:1}
.who-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;width:min(100%,660px);padding:5px;border-bottom:0;border-radius:22px;background:var(--white);box-shadow:0 12px 34px var(--glyph),inset 0 0 0 1px var(--ink-hair)}
.who-tab,.who-tab:hover,.who-tab[aria-selected="true"]{z-index:1;display:grid;gap:3px;padding:12px 8px;border:0;border-radius:17px;background:none;box-shadow:none;text-align:center;transform:none}
.who-ind{display:block}
.who-tab .sm{font-size:11.5px;font-weight:600;color:var(--grey);transition:color .3s}
.who-tab .lg{font-size:17px;font-weight:800;line-height:1.2;color:var(--navy);transition:color .3s}
.who-tab[aria-selected="true"] .sm{color:var(--on-navy-dim)}
.who-tab[aria-selected="true"] .lg{color:var(--white)}
.who-ind{top:5px;bottom:5px;height:auto;border-radius:17px;box-shadow:0 8px 20px var(--lift)}
}
.who-panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;gap:30px clamp(36px,5vw,88px);align-items:start;transition:opacity .16s ease}
.who-voice{grid-column:1;grid-row:1}
.who-lists{grid-column:2;grid-row:1 / span 2}
.who-cta{grid-column:1;grid-row:2;justify-self:start;white-space:normal;text-align:center;line-height:1.25;padding-block:14px}
.who-panel.is-swapping{opacity:0}
.who-voice{position:relative;display:grid;justify-items:start;gap:24px}
.who-voice::before{content:"“";position:absolute;z-index:0;left:-.08em;top:-.32em;font-family:var(--head);font-size:clamp(150px,13vw,210px);font-weight:800;line-height:1;color:var(--glyph);pointer-events:none}
.who-voice > *{position:relative;z-index:1}
.who-kicker{color:var(--gold-dark)}
.who-quote{margin:0;font-family:var(--head);font-size:clamp(26px,2.5vw,38px);font-weight:800;line-height:1.18;letter-spacing:-.025em;color:var(--navy);text-wrap:balance}
.who-body{margin:0;max-width:54ch;font-size:18px;line-height:1.65;color:var(--slate)}
.who-lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-radius:24px;background:var(--white);box-shadow:0 18px 50px var(--glyph)}
.who-col{min-width:0;padding:clamp(28px,3vw,44px)}
.who-col + .who-col{border-left:1px solid var(--ink-hair)}
.who-col h3{margin:0 0 20px;font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:var(--navy)}
/* On small laptops the lists take a larger share, so "How CMO-as-a-Coach helps" stays on one line. */
@media (min-width:981px) and (max-width:1240px){
.who-panel{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
}
.who-col ul{margin:0;padding:0;list-style:none}
.who-col li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;padding-block:15px;border-top:1px solid var(--ink-hair);font-size:16.5px;line-height:1.5;color:var(--slate)}
.who-col li:first-child{padding-top:0;border-top:0}
.mk-want{width:8px;height:8px;margin:8px 0 0 5px;background:var(--gold);transform:rotate(45deg)}
.mk-help{width:20px;height:20px;margin-top:2px;color:var(--blue)}
/* ---------- The record behind it ----------
Layout: navy ledger, three columns ruled with hairlines; the sixth cell is the call to action. */
.rec-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--navy-line)}
.rec{display:grid;align-content:start;gap:12px;min-width:0;padding:clamp(26px,2.8vw,40px) clamp(20px,2.4vw,36px) clamp(30px,3vw,44px);border-bottom:1px solid var(--navy-line);border-left:1px solid var(--navy-line)}
.rec:nth-child(3n+1){padding-left:0;border-left:0}
.rec-num{margin:0;font-family:var(--head);font-size:clamp(40px,4.2vw,62px);font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap}
.rec-num small{margin-right:.22em;font-size:.42em;letter-spacing:.06em;vertical-align:.14em}
.rec-num small.rec-after{margin:0 0 0 .3em}
.rec-label{margin:0;font-family:var(--head);font-size:14px;font-weight:700;line-height:1.45;color:var(--white)}
.rec-detail{margin:0;font-size:16.5px;line-height:1.6;color:var(--on-navy-soft)}
.rec-years{font-family:var(--head);font-size:13.5px;font-weight:700;letter-spacing:.03em;white-space:nowrap;color:var(--gold)}
.rec-cta{display:grid;align-content:center;justify-items:start;gap:22px}
.rec-cta p{margin:0;font-family:var(--head);font-size:clamp(22px,2vw,30px);font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--white)}
/* ---------- Statement band ---------- */
.statement{padding-block:clamp(40px,5vw,80px)}
.statement-in{display:grid;justify-items:center;gap:28px;max-width:1080px;margin-inline:auto;text-align:center}
.statement-star{width:30px;height:30px;color:var(--blue)}
.statement-text{margin:0;font-family:var(--head);font-size:clamp(24px,3.8vw,48px);font-weight:800;line-height:1.16;letter-spacing:-.03em;color:var(--navy);text-wrap:balance}
.u{-webkit-box-decoration-break:clone;box-decoration-break:clone;background-repeat:no-repeat;background-position:0 94%;background-size:100% .12em}
.u-blue{background-image:linear-gradient(var(--blue),var(--blue))}
.u-gold{background-image:linear-gradient(var(--gold),var(--gold))}
/* A white halo round the letters breaks the underline where descenders cross it, like skip-ink. */
.statement .u{text-shadow:.07em 0 var(--white),-.07em 0 var(--white),.05em .05em var(--white),-.05em .05em var(--white)}
.statement-sub{margin:0;max-width:64ch;font-size:clamp(17px,1.35vw,20px);line-height:1.6;color:var(--slate)}
/* ---------- How I help ----------
Two panels: fractional CMO for the business (navy, Devraj's speaking photo) and performance coaching for its people
(white, his profile picture on a light backdrop). Tablets and phones show both open, one above the other, each photo
as a banner across the top. Laptops show them side by side; the one in focus opens wide and the other folds to its
title and intro (see the min-width:981px block below). */
.help-panels{display:grid;gap:16px}
.help-panel{--hp:clamp(22px,4vw,40px);--ph:clamp(240px,50vw,380px);position:relative;isolation:isolate;min-width:0;padding:calc(var(--ph) - 40px) var(--hp) var(--hp);border-radius:28px;overflow:hidden}
.help-cmo{background:var(--navy);color:var(--white)}
.help-coach{background:var(--white);color:var(--navy);box-shadow:0 18px 50px var(--glyph)}
.help-photo{position:absolute;z-index:-2;inset:0 0 auto 0;height:var(--ph);isolation:isolate}
.help-photo img{width:100%;height:100%;object-fit:cover}
.help-cmo .help-photo img{object-position:62% 26%}
/* The coaching photo is a wide shot with Devraj in the middle. Like the CMO panel's photo it fills the top of the
panel edge to edge, but it ends above the panel's text: no fade, and no text over it. */
.help-coach{padding-top:calc(var(--ph) + 24px)}
.help-coach .help-photo img{object-position:50% 20%}
.help-coach .help-fade{display:none}
.help-fade{position:absolute;z-index:-1;inset:0 0 auto 0;height:var(--ph);pointer-events:none}
.help-fade::before,.help-fade::after{content:"";position:absolute;inset:0;transition:opacity .6s ease}
.help-cmo .help-fade::before{background:linear-gradient(to bottom,transparent 0%,var(--navy-clear) 45%,var(--navy) 100%)}
.help-fade::after{opacity:0}
.help-open{display:grid;gap:24px}
.help-closed,.help-deco{display:none}
.help-top{display:grid;gap:10px}
.help-top .label{font-size:11.5px}
.help-cmo .help-top .label{color:var(--on-navy-dim)}
.help-coach .help-top .label{color:var(--blue)}
.help-top h3{margin:0;font-family:var(--head);font-size:clamp(28px,2.6vw,40px);font-weight:800;line-height:1.05;letter-spacing:-.03em}
.help-summary{margin:0;max-width:52ch;font-size:17px;line-height:1.5;opacity:.9}
.help-body{min-width:0}
.help-coach-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,2.6vw,40px);align-items:center}
.help-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px}
.help-body h4{margin:0 0 8px;font-family:var(--head);font-size:16px;font-weight:700;color:var(--blue)}
.help-cmo h4{color:var(--gold)}
.help-body ul{margin:0;padding:0;list-style:none}
.help-body li{padding-block:11px;border-top:1px solid var(--ink-hair);font-size:16px;line-height:1.5;color:var(--slate)}
.help-cmo li{border-top-color:var(--navy-line);color:var(--on-navy-soft)}
.help-dots li{position:relative;padding-left:20px}
.help-dots li::before{content:"";position:absolute;left:3px;top:20px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.help-note{margin:14px 0 0;font-size:15.5px;line-height:1.55;color:var(--navy)}
.help-note b{font-weight:700}
.help-cta{display:flex;justify-content:center;margin-top:clamp(28px,3.4vw,44px)}
.help-closed-h{margin:0;font-family:var(--head);font-size:clamp(26px,2.3vw,34px);font-weight:800;line-height:1.05;letter-spacing:-.03em}
.help-more{display:inline-flex;align-items:center;gap:10px;margin-top:8px;font-family:var(--head);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.help-more i{position:relative;display:inline-block;width:30px;height:30px;border:1px solid currentColor;border-radius:50%;opacity:.8;transition:transform .5s var(--ease)}
.help-more i::before,.help-more i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;margin:-1px 0 0 -5.5px;background:currentColor}
.help-more i::after{transform:rotate(90deg)}
@media (min-width:981px){
.help-panels{display:flex}
.help-panel{--hp:clamp(28px,3vw,44px);flex:1 1 0;padding:var(--hp);cursor:pointer;outline-offset:4px;transition:flex-grow .7s var(--ease),box-shadow .4s}
.help-panel.is-active{flex-grow:2.3;cursor:default}
.help-panel:not(.is-active):hover{box-shadow:0 18px 40px var(--lift)}
.help-panel:not(.is-active):hover .help-more i{transform:rotate(90deg)}
.help-panel:focus-visible{outline:2px solid var(--blue)}
/* Only the folded panel shows its photo, filling the top of the panel above the title, so no text crosses
Devraj's face. The panel that opens shows its text alone on plain navy or white: its photo fades out as it opens
and back in once it folds again. */
.help-cmo{background:radial-gradient(70% 60% at 85% 10%,var(--navy-lift),transparent 70%),var(--navy)}
.help-photo,.help-fade{height:auto;transition:opacity .35s ease .3s}
.help-fade{inset:0}
.help-panel.is-active .help-photo,.help-panel.is-active .help-fade{opacity:0;transition:opacity .25s ease}
.help-cmo .help-photo{inset:0 0 34% 0}
.help-cmo .help-photo img{object-position:44% 18%}
.help-coach .help-photo{inset:0 0 calc(var(--hp) + var(--ch,45%) + 24px);height:auto}
.help-cmo .help-fade::before{background:linear-gradient(to top,var(--navy) 0%,var(--navy) 36%,var(--navy-veil) 48%,transparent 66%)}
.help-open{width:var(--ow,auto);transition:opacity .45s ease .12s,visibility 0s}
.help-panel:not(.is-active) .help-open{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility 0s .2s}
.help-closed{position:absolute;left:var(--hp);bottom:var(--hp);display:grid;justify-items:start;gap:10px;width:var(--cw,auto);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s .2s}
.help-panel:not(.is-active) .help-closed{opacity:1;visibility:visible;transition:opacity .45s ease .12s,visibility 0s}
.help-cmo .help-closed .label{color:var(--on-navy-dim)}
.help-coach .help-closed .label{color:var(--blue)}
/* The folded panel's label stays on one line: on smaller laptops it eases down with the panel's text width (--cw),
to no less than 10px. */
.help-closed .label{white-space:nowrap;font-size:clamp(10px,calc(var(--cw,284px) / 23),12px)}
/* The open CMO panel carries a faint compass that slowly turns in its top-right corner, where the folded panel
shows the photo; it fades out (and stops turning) when the panel folds. */
.help-deco{position:absolute;z-index:-1;display:block;right:-150px;top:-150px;width:clamp(380px,34vw,480px);aspect-ratio:1;color:var(--white);opacity:.08;pointer-events:none;transition:opacity .35s ease .3s}
.help-deco svg{display:block;width:100%;height:100%;animation:spin 160s linear infinite}
.help-panel:not(.is-active) .help-deco{opacity:0;transition:opacity .25s ease}
.help-panel:not(.is-active) .help-deco svg{animation-play-state:paused}
/* Both panels share the taller one's height. In the open CMO panel the two lists sit in the middle of the space
below the heading, so the spare height is shared above and below them instead of pooling at the bottom. */
.help-panel{display:flex;flex-direction:column}
.help-open{flex:1 0 auto}
.help-cmo .help-open{grid-template-rows:auto 1fr}
.help-cmo .help-body{align-self:center}
/* Open coaching panel: heading, intro and list down the left; the Compass Wheel centred down the right for the
panel's full height, so the space beside the heading is used. */
.help-coach .help-open{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:clamp(24px,3vw,48px)}
.help-coach .help-body,.help-coach .help-coach-cols{display:contents}
.help-coach .help-top,.help-coach .help-coach-cols > div{grid-column:1}
.help-coach .cw{grid-column:2;grid-row:1 / span 2;align-self:center}
}
/* The Compass Wheel: Devraj's coaching solutions placed clockwise around a compass, North Star on top.
The dial is drawn on a 135 x 100 grid (see tpc_wheel()); labels sit outside the ring and read outwards. */
.cw{display:grid;justify-items:center;gap:4px;min-width:0;margin:0}
.cw-dial{position:relative;width:100%;max-width:440px;aspect-ratio:135/100;container-type:inline-size}
.cw-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cw-ring{fill:var(--white);stroke:var(--gold);stroke-width:.7}
.cw-ring2{fill:none;stroke:var(--ink-hair);stroke-width:.4}
.cw-ticks{fill:none;stroke:var(--navy);stroke-width:.35;opacity:.35}
.cw-spoke{stroke:var(--gold);stroke-width:.5}
.cw-dot,.cw-hub{fill:var(--gold)}
.cw-rose{fill:var(--navy)}
.cw-rose2{fill:var(--blue);opacity:.45}
.cw-north{fill:var(--blue)}
.cw-list{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.help-body .cw-list li{position:absolute;width:max-content;max-width:27%;padding:0;border:0;font-family:var(--head);font-size:clamp(11px,3.3cqw,13px);font-weight:500;line-height:1.15;color:var(--navy)}
.cw-r{transform:translateY(-50%);text-align:left}
.cw-l{transform:translate(-100%,-50%);text-align:right}
.cw-t{transform:translate(-50%,-100%);text-align:center}
.cw-b{transform:translateX(-50%);text-align:center}
/* The North Star's label: like the others, centred just above the star. */
.help-body .cw-list .cw-n{max-width:48%;transform:translate(-50%,-100%);text-align:center}
.cw-cap{margin:0;font-size:14.5px;line-height:1.4;color:var(--slate);text-align:center}
.cw-cap b{font-family:var(--head);font-weight:700;color:var(--navy)}
/* ---------- Meet Devraj ---------- */
.meet-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(44px,6vw,104px);align-items:start}
.meet-media{position:relative;margin:0}
.meet-photo{overflow:hidden;border-radius:24px}
.meet-main{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;object-position:50% 6%;scale:1.1;transform-origin:50% 30%;translate:0 var(--py,0px);transition:scale 1.8s var(--ease)}
.meet-copy{display:grid;gap:20px}
.meet-copy .h2 .gold{color:var(--gold)}
.meet-copy > p:not(.eyebrow){margin:0;font-size:18px;line-height:1.65;color:var(--on-navy-soft)}
.meet-cta{margin-top:12px}
/* Credentials: one white card (most of the logos are dark artwork made for a light ground) with the coaching bodies'
logos spread across it and, under a hairline, the schools on one centred line, each led by a gold dot. */
.creds{container-type:inline-size;margin-top:6px;padding:18px clamp(16px,2vw,26px) 16px;border-radius:18px;background:var(--white);box-shadow:0 16px 36px var(--shadow)}
.cred-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-around;gap:16px 20px;margin:0;padding:0;list-style:none}
.cred-logos li{display:flex;align-items:center;justify-content:center}
.cred-logos img{display:block;width:auto;max-width:100%;height:var(--h,64px)}
/* The schools stay on one line: below 13.5px the text shrinks with the card (3.5cqi), dots and gaps with it. */
.edu{display:flex;justify-content:center;align-items:center;column-gap:1.1em;margin:0;padding:0;list-style:none;font-family:var(--head);font-size:min(13.5px,3.5cqi);font-weight:700;line-height:1.4;white-space:nowrap;color:var(--navy);text-align:center}
.cred-logos + .edu{margin-top:16px;padding-top:14px;border-top:1px solid var(--ink-hair)}
.edu li::before{content:"";display:inline-block;width:.37em;height:.37em;margin-right:.6em;border-radius:50%;background:var(--gold);vertical-align:middle;transform:translateY(-1px)}
/* Smaller laptops have a narrower card: the logos shrink a little to keep all four on one row, and the schools'
line eases down so it stays on one line. */
.belief{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px 32px;margin-top:22px;padding-top:20px;border-top:1px solid var(--navy-line)}
/* With no second column, the belief runs the full width of the photo above it. */
.belief--one{grid-template-columns:minmax(0,1fr)}
.belief--one .belief-quote{font-size:clamp(19px,1.75vw,25px)}
.belief .label{font-size:11px;color:var(--gold)}
.belief-quote{margin:8px 0 0;font-family:var(--head);font-size:17px;font-weight:700;line-height:1.35;color:var(--white);text-wrap:balance}
.belief-by{margin:6px 0 0;font-size:13.5px;font-weight:600;color:var(--on-navy-dim)}
.belief-text{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--on-navy-soft)}
/* ---------- Testimonials ---------- */
/* Testimonials: a scroll reel. The middle column of portraits rolls one way while the side columns roll the
other, and each quote rises in letter by letter. */
.reel{--tile:clamp(240px,21vw,300px);--gap:14px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:calc(var(--tile) + 190px);border-radius:28px;background:var(--white);box-shadow:0 24px 60px var(--lift);overflow:hidden;outline:none}
.reel:focus-visible{box-shadow:0 0 0 3px var(--blue),0 24px 60px var(--lift)}
/* The edges fade into the white card through a white overlay rather than a two-layer mask, which Safari can
composite away entirely. */
.reel-media{position:relative;overflow:hidden}
.reel-media::after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--white),rgba(255,255,255,0) 18%,rgba(255,255,255,0) 82%,var(--white)),linear-gradient(var(--white),rgba(255,255,255,0) 13%,rgba(255,255,255,0) 87%,var(--white))}
.reel-col{position:absolute;top:50%;display:flex;flex-direction:column;gap:var(--gap);width:var(--tile);transition:transform .9s cubic-bezier(.65,0,.35,1);will-change:transform}
.reel.is-still .reel-col{transition:none}
.reel-col--l{left:calc(50% - var(--tile) * 1.5 - var(--gap))}
.reel-col--m{left:calc(50% - var(--tile) / 2)}
.reel-col--r{left:calc(50% + var(--tile) / 2 + var(--gap))}
.reel-tile{flex:0 0 auto;width:var(--tile);height:var(--tile);border-radius:24px;background:linear-gradient(var(--sand),#ECE3D3);box-shadow:inset 0 2px 0 var(--white),0 1px 2px var(--glyph);filter:blur(1px)}
.reel-photo{position:relative;overflow:hidden;background:var(--navy);box-shadow:0 26px 40px -14px rgba(11,31,58,.42),0 6px 14px rgba(11,31,58,.12);filter:none;transform:scale(.9);opacity:.55;transition:transform .9s var(--ease),opacity .9s var(--ease)}
.reel-photo.is-on{transform:none;opacity:1}
.reel-photo img{display:block;width:100%;height:100%;object-fit:cover}
.reel-body{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-width:0;padding:clamp(36px,4vw,56px) clamp(28px,4vw,60px) clamp(28px,3vw,40px) clamp(16px,2vw,28px)}
.reel-mark{display:block;height:44px;font-family:var(--head);font-size:110px;font-weight:800;line-height:.82;color:var(--blue);opacity:.22}
.reel-stage{display:grid;flex:1;align-items:center}
.reel-item{grid-area:1/1;display:flex;flex-direction:column;gap:24px;margin:0}
.reel.is-ready .reel-item{visibility:hidden}
.reel.is-ready .reel-item.is-current,.reel.is-ready .reel-item.is-leaving{visibility:visible}
.reel-item blockquote{margin:0;font-family:var(--head);font-size:clamp(22px,2.1vw,30px);font-weight:700;line-height:1.3;letter-spacing:-.02em;color:var(--navy);text-wrap:pretty}
.reel-item figcaption{display:grid;gap:4px}
.reel-name{font-family:var(--head);font-size:16px;font-weight:700;color:var(--navy)}
.reel-role{font-size:15.5px;line-height:1.4;color:var(--grey)}
.rw{display:inline-block;white-space:nowrap}
.rc{display:inline-block}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.has-motion .reel-item.is-current .rc{animation:rc-rise .42s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--c) * 7ms)}
.has-motion .reel-item.is-current figcaption{animation:fade-up .6s var(--ease) both;animation-delay:var(--cap,300ms)}
.has-motion .reel-item.is-leaving{animation:rc-exit .24s ease-out forwards}
@keyframes rc-rise{from{opacity:0;transform:translateY(.42em)}}
@keyframes rc-exit{to{opacity:0;transform:translateY(-12px)}}
.reel-foot{display:flex;align-items:center;gap:18px}
.reel-count{font-family:var(--head);font-size:14px;font-weight:700;letter-spacing:.08em;color:var(--grey);font-variant-numeric:tabular-nums;white-space:nowrap}
.reel-count b{font-weight:800;color:var(--navy)}
.reel-prog{position:relative;flex:1;height:2px;border-radius:2px;background:var(--ink-hair);overflow:hidden}
.reel-prog i{position:absolute;inset:0;background:var(--navy);transform:scaleX(0);transform-origin:0 50%}
.reel.is-playing .reel-prog i{animation:reel-prog 5.5s linear forwards}
.reel:hover .reel-prog i,.reel:focus-visible .reel-prog i,.reel.is-away .reel-prog i{animation-play-state:paused}
.reel:has(:focus-visible) .reel-prog i{animation-play-state:paused}
@keyframes reel-prog{to{transform:none}}
.reel-nav{display:flex;gap:10px}
.reel-btn{display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--ink-hair);border-radius:50%;background:var(--white);color:var(--navy);cursor:pointer;transition:background-color .25s,border-color .25s,color .25s,transform .25s var(--ease)}
.reel-btn:hover{border-color:var(--navy);background:var(--navy);color:var(--white)}
.reel-btn:active{transform:scale(.92)}
.reel-btn svg{width:18px;height:18px}
/* Without portraits the card holds the quotes alone, each with its name and role underneath. */
.reel--text{grid-template-columns:minmax(0,1fr);min-height:0}
.reel--text .reel-body{padding:clamp(40px,5vw,68px) clamp(28px,7vw,112px) clamp(30px,3.4vw,44px)}
.reel--text .reel-item blockquote{max-width:58ch}
/* ---------- The Compass Conversation and FAQ ---------- */
/* Three step cards, each with a photo (placeholders from Pexels until the client's own images arrive). */
.steps-wrap{--g:clamp(20px,2.4vw,32px);--pad:12px;--mh:clamp(170px,15vw,220px);position:relative}
.conv-cta{display:none}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g);margin:0;padding:0;list-style:none}
.step{position:relative;display:flex;flex-direction:column;min-width:0;padding:var(--pad) var(--pad) 28px;border-radius:26px;background:var(--sand)}
.step-media{position:relative;isolation:isolate;height:var(--mh);margin:0;border-radius:18px;overflow:hidden;background:radial-gradient(80% 90% at 85% 0%,var(--navy-lift),transparent 70%),var(--navy)}
.step-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:scale 1.4s var(--ease)}
.step-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,31,58,.35),transparent 55%);pointer-events:none}
.step:hover .step-media img{scale:1.07}
.step-num{position:relative;z-index:3;display:grid;place-items:center;width:56px;height:56px;margin:-28px 0 0 24px;border-radius:50%;background:var(--navy);box-shadow:0 0 0 6px var(--sand);color:var(--white);font-family:var(--head);font-size:17px;font-weight:800}
.step h3{margin:18px 14px 0;font-family:var(--head);font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.step p{margin:10px 14px 0;font-size:16.5px;line-height:1.6;color:var(--slate)}
.step .step-tag{display:flex;align-items:center;gap:8px;margin:14px 14px 0;font-family:var(--head);font-size:14.5px;font-weight:800;line-height:1.3;color:var(--gold-dark)}
.step-tag svg{flex:0 0 auto;width:16px;height:16px;color:var(--gold)}
.faq-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:clamp(32px,5vw,88px);margin-top:clamp(88px,10vw,140px);padding-top:clamp(56px,7vw,96px);border-top:1px solid var(--ink-hair)}
.faq details{border-bottom:1px solid var(--ink-hair)}
.faq details:first-child{border-top:1px solid var(--ink-hair)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:68px;padding-block:18px;list-style:none;font-family:var(--head);font-size:clamp(17px,1.4vw,20px);font-weight:700;color:var(--navy);cursor:pointer;transition:color .2s}
.faq summary:hover{color:var(--blue)}
.faq summary::-webkit-details-marker{display:none}
.pm{position:relative;flex:0 0 auto;width:34px;height:34px;border:1px solid var(--ink-hair);border-radius:50%;transition:transform .35s var(--ease),background-color .2s}
.pm::before,.pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--navy)}
.pm::after{transform:rotate(90deg);transition:transform .35s var(--ease)}
.faq details.is-open .pm{background:var(--sand);transform:rotate(180deg)}
.faq details.is-open .pm::after{transform:rotate(0)}
.faq-a{overflow:hidden}
.faq-a p{margin:0;padding-bottom:22px;max-width:none;font-size:17.5px;line-height:1.6;color:var(--slate)}
/* ---------- Final booking ----------
Layout: navy ground with a turning compass behind the widget; copy left, booking widget right. */
.book{background:radial-gradient(60% 70% at 85% 50%,var(--blue-glow),transparent 70%),var(--navy)}
.book-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);gap:clamp(40px,6vw,104px);align-items:center}
.book-copy{display:grid;justify-items:start;gap:22px}
.book-lead{margin:0;max-width:44ch;font-size:clamp(18px,1.5vw,22px);line-height:1.5;color:var(--on-navy-soft)}
.book-copy .h2{font-size:clamp(34px,4.6vw,48px);color:var(--white)}
.book-copy .h2 .gold{color:var(--gold)}
.book-copy .label{color:var(--on-navy-dim)}
.widget{overflow:hidden;border-radius:22px;background:var(--white);color:var(--navy);box-shadow:0 30px 80px var(--shadow)}
.wg-head{display:flex;align-items:center;gap:14px;padding:20px 24px 16px;border-bottom:1px solid var(--ink-hair)}
.wg-head img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.wg-title{margin:0;font-family:var(--head);font-size:18px;font-weight:800}
/* Booking popup: every booking button opens the booking card over the page instead of scrolling to it. The popup
has its own copy of the card, so its calendar stays loaded between opens. */
.bk-modal{position:fixed;z-index:60;inset:0;display:grid;place-items:center;padding:24px 16px}
.bk-modal[hidden]{display:none}
.bk-scrim{position:absolute;inset:0;background:rgba(5,14,28,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .35s ease}
.bk-panel{position:relative;width:min(470px,100%);max-height:calc(100svh - 48px);overflow:auto;overscroll-behavior:contain;border-radius:22px;box-shadow:0 40px 90px rgba(0,0,0,.45);opacity:0;transform:translateY(28px) scale(.97);transition:opacity .35s ease,transform .55s var(--ease);scrollbar-width:none}
.bk-panel::-webkit-scrollbar{display:none}
.bk-modal.is-open .bk-scrim{opacity:1}
.bk-modal.is-open .bk-panel{opacity:1;transform:none}
.bk-panel .widget{box-shadow:none}
.bk-close{position:absolute;z-index:2;top:18px;right:18px;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:var(--sand);color:var(--navy);cursor:pointer;transition:background-color .25s,color .25s,transform .25s var(--ease)}
.bk-close:hover{background:var(--navy);color:var(--white);transform:rotate(90deg)}
.bk-close svg{width:18px;height:18px}
/* Long jumps fade through a brief navy veil with the Polaris star instead of racing past every section. */
.jump-veil{position:fixed;z-index:58;inset:0;display:grid;place-items:center;background:var(--navy);opacity:0;pointer-events:none;transition:opacity .28s ease}
.jump-veil svg{width:34px;height:34px;color:var(--gold);transform:scale(.6) rotate(-45deg);transition:transform .5s var(--ease)}
.jump-veil.is-on{opacity:1}
.jump-veil.is-on svg{transform:none}
.wg-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin:2px 0 0;font-size:14px;color:var(--grey)}
.wg-meta b{color:var(--navy)}
/* Calendly's scheduler fills the card below its header; it needs a set height to lay itself out. 570px fits its day
calendar (six week rows and the time zone, 504px) with a little room below; the longer steps scroll inside. */
.wg-cal{position:relative;height:570px;background:var(--white)}
.wg-cal iframe{display:block;width:100%;height:100%;border:0}
.wg-cal-wait{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;padding:24px;font-size:15px;line-height:1.5;color:var(--grey);text-align:center}
.wg-cal-wait p{margin:0}
.wg-cal-slow{display:none}
.wg-cal.is-slow .wg-cal-slow{display:block}
.wg-cal-slow a{font-weight:600;color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.wg-cal-note{max-width:36ch}
.wg-cal.is-loading iframe{opacity:0}
.wg-cal.is-ready .wg-cal-wait{display:none}
.bk-panel .wg-cal{height:min(570px,calc(100svh - 230px))}
.wg-body{display:grid;gap:14px;padding:18px 24px 22px}
.wg-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wg-h{margin:0;font-family:var(--head);font-size:15px;font-weight:700}
.wg-month{display:flex;align-items:center;gap:2px;font-family:var(--head);font-size:14px;font-weight:700}
.wg-month span{min-width:116px;text-align:center}
.wg-nav{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--blue);cursor:pointer;transition:background-color .2s}
.wg-nav:hover:not(:disabled){background:var(--blue-tint)}
.wg-nav:disabled{color:var(--day-off);cursor:default}
.wg-nav svg{width:16px;height:16px}
.wg-dow,.wg-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
.wg-dow span{font-family:var(--head);font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--grey)}
.wg-day{height:40px;border:0;border-radius:10px;background:transparent;color:var(--day-off);font-family:var(--head);font-size:14px;font-weight:700;transition:background-color .2s,color .2s,box-shadow .2s}
.wg-day.is-open{background:var(--blue-tint);color:var(--blue);cursor:pointer}
.wg-day.is-open:hover{box-shadow:inset 0 0 0 1.5px var(--blue)}
.wg-day[aria-pressed="true"]{background:var(--navy);color:var(--white)}
.wg-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.wg-slot{min-height:44px;border:1.5px solid var(--blue);border-radius:10px;background:var(--white);color:var(--blue);font-family:var(--head);font-size:14px;font-weight:700;cursor:pointer;transition:background-color .2s,color .2s,transform .2s}
.wg-slot:hover{transform:translateY(-1px)}
.wg-slot[aria-pressed="true"]{background:var(--blue);color:var(--white)}
.wg-tz{margin:0;font-size:13.5px;line-height:1.4;color:var(--grey)}
.wg-go{min-height:50px;border:0;border-radius:999px;background:var(--blue);color:var(--white);font-family:var(--head);font-size:15px;font-weight:700;cursor:pointer;transition:background-color .25s,color .25s}
.wg-go:disabled{background:var(--blue-tint);color:var(--grey);cursor:not-allowed}
.wg-back{justify-self:start;padding:0;border:0;background:none;color:var(--blue);font-family:var(--head);font-size:14px;font-weight:700;cursor:pointer}
.wg-field{display:grid;gap:6px;font-family:var(--head);font-size:13.5px;font-weight:700}
.wg-field small{font-family:var(--body);font-size:13.5px;font-weight:400;color:var(--grey)}
.wg-field input,.wg-field select,.wg-field textarea{width:100%;min-height:46px;padding:0 12px;border:1px solid var(--field);border-radius:10px;background:var(--white);color:var(--navy);font-family:var(--body);font-size:16px;transition:border-color .2s,box-shadow .2s}
.wg-field textarea{min-height:84px;padding:10px 12px;resize:vertical}
.wg-field input:focus,.wg-field select:focus,.wg-field textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-ring)}
.wg-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wg-err{margin:0;font-size:14px;color:var(--red)}
.wg-done{display:grid;justify-items:start;gap:12px;padding:6px 0}
.wg-done-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--navy);color:var(--gold)}
.wg-done-icon svg{width:26px;height:26px}
.wg-done h3{margin:0;font-family:var(--head);font-size:22px;font-weight:800}
.wg-done p{margin:0;font-size:16px;line-height:1.5;color:var(--slate)}
.wg-done .wg-proto{font-size:14px;color:var(--grey)}
.wg-foot{margin:0;padding:12px 24px;background:var(--sand);font-size:14px;line-height:1.45;color:var(--slate)}
.wg-foot b{color:var(--navy)}
/* ---------- Footer ---------- */
.foot{border-top:1px solid var(--navy-line);background:var(--navy);color:var(--on-navy-dim)}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding-block:32px}
.foot img{height:48px;width:auto}
.foot p{margin:0;font-size:15px;line-height:1.5}
.foot a{color:var(--white);text-decoration-color:var(--navy-line);text-underline-offset:3px}
.foot-ck button{padding:0;border:0;background:none;color:var(--white);font:inherit;text-decoration:underline;text-decoration-color:var(--navy-line);text-underline-offset:3px;cursor:pointer}
.foot-ck button:hover{text-decoration-color:currentColor}
.foot-ck button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.foot-li{display:inline-grid;place-items:center;width:34px;height:34px;margin-left:12px;vertical-align:middle;border-radius:50%;background:var(--glass-pill);transition:background-color .25s}
.foot-li:hover{background:var(--blue)}
.foot-li svg{width:15px;height:15px}
/* ---------- Motion (only when script runs and the visitor has not asked for reduced motion) ---------- */
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.wi{display:inline-block}
.has-motion [data-words] .wi{transform:translateY(112%);transition:transform 1s var(--ease);transition-delay:calc(var(--rd,0) * 1ms + var(--wi) * 45ms)}
.has-motion [data-words].is-in .wi{transform:none}
.has-motion [data-reveal]{opacity:0;transition:opacity .9s var(--ease),transform 1.05s var(--ease),clip-path 1.4s cubic-bezier(.7,0,.2,1);transition-delay:calc(var(--rd,0) * 1ms)}
.has-motion [data-reveal=""],.has-motion [data-reveal="up"]{transform:translateY(40px)}
.has-motion [data-reveal="left"]{transform:translateX(-64px)}
.has-motion [data-reveal="right"]{transform:translateX(64px)}
.has-motion [data-reveal="pop"]{transform:scale(.5) rotate(-16deg)}
.has-motion [data-reveal="spin"]{transform:scale(.3) rotate(-200deg)}
.has-motion [data-reveal="scale"]{transform:scale(.94) translateY(24px)}
.has-motion [data-reveal="card"]{transform:translateY(72px) scale(.92)}
.has-motion [data-reveal="clip"]{opacity:1;clip-path:inset(100% 0 0 0 round 24px)}
.has-motion [data-reveal].is-in{opacity:1;transform:none}
.has-motion [data-reveal="clip"].is-in{clip-path:inset(0 0 0 0 round 24px)}
.has-motion .eyebrow[data-reveal]::before{transform:rotate(-200deg) scale(.2);transition:transform 1.1s var(--ease);transition-delay:calc(var(--rd,0) * 1ms + 150ms)}
.has-motion .eyebrow[data-reveal].is-in::before{transform:none}
/* Who I work with: the panel replays its entrance each time a tab changes */
.has-motion .who-panel:not(.is-live) .who-voice > *,.has-motion .who-panel:not(.is-live) .who-lists,.has-motion .who-panel:not(.is-live) .who-cta{opacity:0}
.has-motion .who-panel.is-live .who-voice::before{animation:glyph-in 1.1s var(--ease) backwards}
.has-motion .who-panel.is-live .who-kicker{animation:fade-up .7s var(--ease) backwards}
.has-motion .who-panel.is-live .who-quote .wi{animation:word-up .95s var(--ease) backwards;animation-delay:calc(120ms + var(--wi) * 38ms)}
.has-motion .who-panel.is-live .who-body{animation:fade-up .8s var(--ease) .38s backwards}
.has-motion .who-panel.is-live .who-cta{animation:fade-up .8s var(--ease) .5s backwards}
.has-motion .who-panel.is-live .who-lists{animation:panel-in 1s var(--ease) .15s backwards}
.has-motion .who-panel.is-live .who-col li{animation:li-in .7s var(--ease) backwards;animation-delay:calc(320ms + var(--i) * 85ms)}
.has-motion .who-panel.is-live .who-col + .who-col li{animation-delay:calc(480ms + var(--i) * 85ms)}
@keyframes fade-up{from{opacity:0;transform:translateY(20px)}}
@keyframes word-up{from{transform:translateY(112%)}}
@keyframes panel-in{from{opacity:0;transform:translateY(30px) scale(.97)}}
@keyframes li-in{from{opacity:0;transform:translateX(-18px)}}
@keyframes glyph-in{from{opacity:0;transform:translateY(30px) scale(.7)}}
/* Record numbers glow once as they finish counting */
.has-motion .rec-num.is-counted{animation:num-glow 1.6s ease-out}
@keyframes num-glow{0%{text-shadow:0 0 0 transparent}35%{text-shadow:0 0 28px var(--gold-glow)}100%{text-shadow:0 0 0 transparent}}
/* Statement underlines draw after the words rise */
/* Statement: star turns in, words rise, the blue then the gold underline draw, then the line beneath fades up. */
.has-motion .statement-star{opacity:0;transform:scale(.3) rotate(-200deg);transition:opacity .8s var(--ease),transform 1.2s var(--ease)}
.has-motion .statement.is-in .statement-star{opacity:1;transform:none}
.has-motion .statement.is-in .wi{transform:none}
.has-motion .statement .u{background-size:0% .12em;transition:background-size 1.1s cubic-bezier(.6,0,.2,1) 1.1s}
.has-motion .statement .u-gold{transition-delay:1.6s}
.has-motion .statement.is-in .u{background-size:100% .12em}
.has-motion .statement-sub{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease) 1.9s,transform 1s var(--ease) 1.9s}
.has-motion .statement.is-in .statement-sub{opacity:1;transform:none}
/* How I help: the seam draws, then the medallion turns into place */
.has-motion .help-panels.is-in .help-panel.is-active .help-body li{animation:li-in .6s var(--ease) backwards;animation-delay:calc(var(--i,0) * 60ms + 420ms)}
/* Meet Devraj: the photo wipes up and settles from a slight zoom */
.has-motion .meet-photo:not(.is-in) .meet-main{scale:1.28}
/* The Compass Conversation: cards rise one by one, each photo settles from a slight zoom and the number pops */
.has-motion .step:not(.is-in) .step-media img{scale:1.2}
.has-motion .step-num{transform:scale(.3);transition:transform .8s cubic-bezier(.3,1.5,.5,1) .35s}
.has-motion .step.is-in .step-num{transform:none}
@keyframes travel{0%{left:0;opacity:0}8%{opacity:1}52%{left:100%;opacity:1}60%,100%{left:100%;opacity:0}}
@keyframes travel-v{0%{top:0;opacity:0}8%{opacity:1}52%{top:100%;opacity:1}60%,100%{top:100%;opacity:0}}
/* Booking widget: days ripple in, slots pop, steps slide */
.has-motion .wg-days > *{animation:day-in .45s var(--ease) backwards;animation-delay:calc(var(--i,0) * 11ms)}
.has-motion .wg-slot{animation:slot-in .45s cubic-bezier(.3,1.4,.5,1) backwards;animation-delay:calc(var(--i,0) * 70ms)}
.has-motion .wg-body{animation:step-in .5s var(--ease) backwards}
.has-motion .wg-done-icon{animation:pop .6s cubic-bezier(.3,1.6,.5,1) .1s backwards}
.has-motion .wg-done-icon path{animation:check 0.6s ease-out .45s backwards}
@keyframes day-in{from{opacity:0;transform:translateY(8px) scale(.9)}}
@keyframes slot-in{from{opacity:0;transform:scale(.85)}}
@keyframes step-in{from{opacity:0;transform:translateX(24px)}}
@keyframes check{from{stroke-dashoffset:1}}
/* Phones' booking band (see the max-width:640px block): off everywhere else. */
.m-cta{display:none}
@media (max-width:1200px){.deco--rec{display:none}}
@media (min-width:981px) and (max-width:1100px){.help-closed .label{letter-spacing:.1em}}
/* The narrowest phones: the panel labels tighten a little to stay on one line. */
@media (max-width:374px){.help-top .label{font-size:11px;letter-spacing:.12em}}
@media (max-width:339px){.help-top .label{font-size:10.5px;letter-spacing:.08em}}
@media (max-width:980px){
.who-panel,.meet-grid,.book-grid,.faq-grid{grid-template-columns:minmax(0,1fr)}
.who-panel{grid-template-rows:none}
.who-voice,.who-lists,.who-cta{grid-column:1;grid-row:auto}
.rec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.rec:nth-child(3n+1){padding-left:clamp(20px,2.4vw,36px);border-left:1px solid var(--navy-line)}
.rec:nth-child(2n+1){padding-left:0;border-left:0}
.reel{--tile:min(56vw,250px);grid-template-columns:minmax(0,1fr);min-height:0}
.reel-media{height:calc(var(--tile) + 70px)}
.reel-body{gap:22px;padding:4px clamp(20px,4vw,40px) 26px}
.reel-mark{height:30px;font-size:80px}
.reel--text .reel-body{padding-top:26px}
.help-coach-cols{grid-template-columns:minmax(0,1fr)}
.cw{justify-self:center;width:min(100%,420px)}
.head-cta{justify-content:flex-start}
/* One column: the photo, then Devraj's story and credentials, then his belief and purpose, and the booking button
last, closing the section. */
.meet-grid{row-gap:20px}
.meet-media,.meet-copy{display:contents}
.meet-photo{order:1;max-width:620px;margin-bottom:clamp(12px,3vw,28px)}
.meet-copy > *{order:2}
.belief{order:3;margin-top:8px}
.meet-copy > .meet-cta{order:4}
.deco--meet,.deco--book{display:none}
.sec-head--split,.sec-head--split:has(> .head-cta){grid-template-columns:minmax(0,1fr)}
.sec-head--split > .lede,.sec-head--split > .head-cta{grid-column:1;grid-row:auto;justify-self:start}
/* The Compass Conversation's booking button closes the section here, after the steps, instead of the heading. */
#conversation .head-cta{display:none}
.conv-cta{display:flex;justify-content:center;margin-top:clamp(24px,5vw,36px)}
/* The steps become a swipeable row, with the next card peeking in from the edge. */
.steps-wrap{--mh:clamp(160px,42vw,220px)}
.steps{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(80%,340px);margin-inline:calc(-1 * var(--gut));padding:0 var(--gut) 6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-width:none}
.steps::-webkit-scrollbar{display:none}
.step{scroll-snap-align:start}
}
@media (max-width:640px){
.has-motion [data-reveal="left"],.has-motion [data-reveal="right"]{transform:translateY(40px)}
.who-switch{--pin:calc(env(safe-area-inset-top,0px) + 78px)}
.who-tab{padding:10px 4px}
.who-tab .sm{font-size:10.5px}
.who-tab .lg{font-size:15px}
/* Phones: one booking band stays at the foot of the screen, from when the opening scene clears until the booking
section comes into view (landing.js toggles .is-on). It stands in for the booking buttons that close the sections
on larger screens. */
.m-cta{position:fixed;z-index:40;left:0;right:0;bottom:0;display:grid;justify-items:center;gap:7px;padding:12px max(var(--gut),env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(var(--gut),env(safe-area-inset-left,0px));border-top:1px solid var(--navy-line);background:var(--navy);box-shadow:0 -12px 30px rgba(5,14,28,.28);visibility:hidden;transform:translateY(105%);transition:transform .45s var(--ease),visibility 0s linear .45s}
.m-cta.is-on{visibility:visible;transform:none;transition:transform .45s var(--ease)}
.m-cta .btn{width:100%;max-width:420px;min-height:48px}
.m-cta .label{font-size:10.5px;color:var(--on-navy-dim)}
.who-cta,.rec-grid .rec-cta,.help-cta,.meet-cta,.conv-cta{display:none}
.who-lists{grid-template-columns:minmax(0,1fr)}
.who-col + .who-col{border-left:0;border-top:1px solid var(--ink-hair)}
.rec-grid{grid-template-columns:minmax(0,1fr)}
.rec,.rec:nth-child(3n+1){padding-left:0;padding-right:0;border-left:0}
.help-cols{grid-template-columns:minmax(0,1fr)}
.reel-foot{gap:14px}
.reel-btn{width:44px;height:44px}
/* On phones the booking popup is a bottom sheet. */
.bk-modal{place-items:end center;padding:0}
.bk-panel{width:100%;max-height:92svh;border-radius:22px 22px 0 0;transform:translateY(100%)}
.bk-panel .widget{border-radius:22px 22px 0 0}
.bk-close{top:14px;right:14px}
.wg-head,.wg-body{padding-left:18px;padding-right:18px}
.wg-month span{min-width:96px}
.belief{grid-template-columns:minmax(0,1fr)}
.cred-logos{column-gap:12px}
.cred-logos img{height:calc(var(--h,64px) * .85)}
.wg-foot{padding-inline:18px}
.bk-panel .wg-cal{height:min(570px,calc(92svh - 150px))}
}
@media (max-width:339px){.cred-logos img{height:calc(var(--h,64px) * .75)}}
@media (prefers-reduced-motion:reduce){
.stage *,.stage *::before,.stage *::after{animation:none!important;transition:none!important}
.h-logos .dup{display:none!important}
.deco svg,.help-deco svg{animation:none}
.bk-scrim,.bk-panel,.jump-veil,.jump-veil svg{transition:none}
.help-panel,.help-open,.help-closed,.help-photo,.help-fade,.help-fade::before,.help-fade::after,.help-photo img{transition:none!important}
.who-panel,.who-ind,.who-switch::before,.pm,.pm::after,.btn,.btn::after,.reel-col,.reel-photo,.reel-btn,.nav,.nav-bar,.nav-logo img,.nav-pill,.menu,.menu-links a,.menu-foot,.m-cta,.m-cta.is-on{transition:none}
.meet-main{scale:1;translate:none}
}
/* ---------- Simple pages (Privacy) ----------
The brand header runs into a navy title band with the slowly turning compass watermark; the page's own text sits on
a white sheet that overlaps the band, with each numbered heading's number as a blue badge; then the usual footer. */
body.tpc-simple{background:var(--sand);color:var(--slate)}
.simple-head{background:var(--navy)}
.simple-head-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:18px}
.simple-logo{display:block;line-height:0}
.simple-logo img{height:56px;width:auto}
.simple-hero{padding-block:clamp(40px,6vw,88px) clamp(104px,11vw,160px)}
.simple-hero-in,.simple-card{max-width:820px;margin-inline:auto}
.deco--simple{--ds:clamp(420px,54vw,780px);right:-10%;top:50%;margin-top:calc(var(--ds) / -2);opacity:.08}
.simple-title{color:var(--white);font-size:clamp(36px,5.2vw,64px)}
.simple-title::after{content:"";display:block;width:64px;height:3px;margin-top:clamp(18px,2vw,26px);border-radius:3px;background:var(--gold)}
.simple-sheet{position:relative;z-index:1;margin-top:clamp(-112px,-7.5vw,-68px);padding-bottom:clamp(56px,7vw,104px)}
.simple-card{padding:clamp(28px,5vw,64px);border-radius:24px;background:var(--white);box-shadow:0 18px 50px var(--glyph),0 2px 6px var(--glyph)}
.simple-body{font-size:18px;line-height:1.7;color:var(--slate)}
.simple-body > :first-child{margin-top:0}
.simple-body > :last-child{margin-bottom:0}
.simple-body > p:first-child{font-size:clamp(19px,1.5vw,21px);line-height:1.6;color:var(--navy)}
.simple-body > p.simple-updated{margin:0 0 .4em;font-size:15px;line-height:1.5;color:var(--grey)}
.simple-body p{margin:0 0 1em}
.simple-body strong{font-weight:700;color:var(--navy)}
.simple-body h2,.simple-body h3,.simple-body h4{display:flex;align-items:baseline;gap:14px;margin:1.8em 0 .6em;padding-top:1.5em;border-top:1px solid var(--ink-hair);font-family:var(--head);font-size:clamp(19px,1.6vw,22px);font-weight:700;line-height:1.3;letter-spacing:-.01em;color:var(--blue)}
.simple-body h4{font-size:18px}
.simple-num{position:relative;top:-3px;flex:0 0 auto;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--blue-tint);font-size:14px;font-weight:800;letter-spacing:0}
.simple-body a{color:var(--blue);text-underline-offset:3px;overflow-wrap:anywhere}
.simple-body ul,.simple-body ol{margin:0 0 1em;padding-left:1.3em}
.simple-body ul{padding-left:0;list-style:none}
.simple-body ul li{position:relative;padding-left:1.7em}
.simple-body li + li{margin-top:.35em}
.simple-body ul li::before{content:"";position:absolute;left:.25em;top:.55em;width:.65em;height:.65em;background:var(--blue);-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
@media (max-width:640px){
.simple-head .btn{display:none}
.simple-logo img{height:44px}
.deco--simple{right:-45%}
.simple-card{border-radius:18px}
.simple-body{font-size:17px}
.simple-body h2,.simple-body h3,.simple-body h4{gap:12px}
}