/* ═══════════════════════════════════════════════════════════════════════════ iManageWorks — Instrument Design system. Career infrastructure rendered as measurement apparatus. ═══════════════════════════════════════════════════════════════════════════ */ /* ── tokens ────────────────────────────────────────────────────────────── Dark is the default. Light is applied when the OS asks for it, and either can be forced with data-theme on . Every colour below is a token — nothing in this file hardcodes a surface or ink value, which is the only way a two-theme system stays honest. */ :root{ color-scheme:light dark; --shadow-tint:rgba(15,23,42,.10); --void:#FFFFFF; --surface:#FFFFFF; --surface-2:#F7F8FA; --surface-3:#EEF0F4; --line:rgba(15,23,42,.08); --line-2:rgba(15,23,42,.14); --track:rgba(15,23,42,.08); --hover:rgba(15,23,42,.035); --grid:rgba(15,23,42,.030); --grid-2:rgba(15,23,42,.026); --tick:rgba(15,23,42,.20); --tick-maj:rgba(15,23,42,.38); --nav:rgba(255,255,255,.86); --nav-on:rgba(255,255,255,.97); --ink:#0F172A; --ink-2:#41506A; --ink-3:#6C7C93; --gold:#1A56DB; --gold-on:#1A56DB; --gold-dim:rgba(26,86,219,.08); --gold-line:rgba(26,86,219,.24); --gold-fill:rgba(26,86,219,.05); --gold-glow:rgba(26,86,219,.24); --teal:#2563EB; --teal-on:#1D4ED8; --teal-dim:rgba(37,99,235,.08); --teal-line:rgba(37,99,235,.24); --teal-fill:rgba(37,99,235,.05); --on-gold:#FFFFFF; --saffron:#1A56DB; --green:#2563EB; --mesh-1:rgba(26,86,219,.13); --mesh-2:rgba(37,99,235,.10); --mesh-3:rgba(120,160,250,.14); --mesh-op:1; --shadow:0 4px 24px rgba(15,23,42,.08); /* type */ /* One family across the whole site. Emphasis is weight and colour only — no italics, no second family. --display stays as a token so the dozen rules that reference it keep working. */ --display:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif; --body:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif; --mono:'DM Mono','SF Mono',ui-monospace,monospace; /* metrics */ --gut:clamp(20px,5vw,64px); --max:1200px; --rad:10px; --ease-expo:cubic-bezier(.16,1,.3,1); --ease-back:cubic-bezier(.34,1.56,.64,1); --notch:10px; --sec:clamp(54px,7.5vw,104px); } /* Light. Warm paper rather than clinical white — the gold and teal need a little warmth under them or they read as alerts. Gold is darkened for text use only; fills keep the brand value. */ @media(prefers-color-scheme:dark){ :root:not([data-theme=light]){ color-scheme:dark; --void:#070B14; --surface:#0D1425; --surface-2:#121C31; --surface-3:#18243D; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --track:rgba(255,255,255,.08); --hover:rgba(255,255,255,.04); --grid:rgba(255,255,255,.026); --grid-2:rgba(255,255,255,.022); --tick:rgba(255,255,255,.18); --tick-maj:rgba(255,255,255,.34); --nav:rgba(7,11,20,.74); --nav-on:rgba(7,11,20,.94); --ink:#E9EEF7; --ink-2:#9FB0C8; --ink-3:#6B7C96; --gold:#3B7BF0; --gold-on:#6FA0F7; --gold-dim:rgba(59,123,240,.16); --gold-line:rgba(59,123,240,.34); --gold-fill:rgba(59,123,240,.08); --gold-glow:rgba(59,123,240,.32); --teal:#60A5FA; --teal-on:#7DB6FB; --teal-dim:rgba(96,165,250,.16); --teal-line:rgba(96,165,250,.32); --teal-fill:rgba(96,165,250,.07); --on-gold:#061024; --saffron:#3B7BF0; --green:#60A5FA; --mesh-1:rgba(26,86,219,.20); --mesh-2:rgba(37,99,235,.14); --mesh-3:rgba(96,165,250,.12); --mesh-op:.8; --shadow:0 24px 60px rgba(0,0,0,.55); --shadow-tint:rgba(0,0,0,.45); } } :root[data-theme=dark]{ color-scheme:dark; --void:#070B14; --surface:#0D1425; --surface-2:#121C31; --surface-3:#18243D; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --track:rgba(255,255,255,.08); --hover:rgba(255,255,255,.04); --grid:rgba(255,255,255,.026); --grid-2:rgba(255,255,255,.022); --tick:rgba(255,255,255,.18); --tick-maj:rgba(255,255,255,.34); --nav:rgba(7,11,20,.74); --nav-on:rgba(7,11,20,.94); --ink:#E9EEF7; --ink-2:#9FB0C8; --ink-3:#6B7C96; --gold:#3B7BF0; --gold-on:#6FA0F7; --gold-dim:rgba(59,123,240,.16); --gold-line:rgba(59,123,240,.34); --gold-fill:rgba(59,123,240,.08); --gold-glow:rgba(59,123,240,.32); --teal:#60A5FA; --teal-on:#7DB6FB; --teal-dim:rgba(96,165,250,.16); --teal-line:rgba(96,165,250,.32); --teal-fill:rgba(96,165,250,.07); --on-gold:#061024; --saffron:#3B7BF0; --green:#60A5FA; --mesh-1:rgba(26,86,219,.20); --mesh-2:rgba(37,99,235,.14); --mesh-3:rgba(96,165,250,.12); --mesh-op:.8; --shadow:0 24px 60px rgba(0,0,0,.55); --shadow-tint:rgba(0,0,0,.45); } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;} body{background:var(--void);color:var(--ink);font-family:var(--body); font-weight:300;line-height:1.65;overflow-x:hidden; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;} img,svg{display:block;max-width:100%;} a{color:inherit;text-decoration:none;} ::selection{background:var(--gold);color:var(--on-gold);} :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px;} /* ── blueprint field ───────────────────────────────────────────────────── */ .field{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55; background-image: linear-gradient(var(--grid) 1px,transparent 1px), linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 0%,transparent 75%); -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 0%,transparent 75%);} /* Mesh. Four offset radial blooms on a slow drift — the light theme lets them run much stronger, because on paper a faint wash just reads as a printing fault, while on black it would blow out. */ .aura{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--mesh-op); background: radial-gradient(ellipse 52% 44% at 14% 4%,var(--mesh-1),transparent 60%), radial-gradient(ellipse 46% 42% at 86% 14%,var(--mesh-3),transparent 62%), radial-gradient(ellipse 54% 46% at 78% 82%,var(--mesh-2),transparent 62%), radial-gradient(ellipse 40% 36% at 22% 92%,var(--mesh-1),transparent 64%); filter:blur(18px);animation:drift 26s ease-in-out infinite alternate;} @keyframes drift{ 0% {transform:translate3d(0,0,0) scale(1);} 50% {transform:translate3d(-1.5%,1.2%,0) scale(1.06);} 100%{transform:translate3d(1.8%,-1%,0) scale(1.03);} } /* A hairline of brand colour where the mesh meets the top of the page. */ .aura::after{content:'';position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,var(--saffron),var(--gold),var(--teal),var(--mesh-3)); opacity:.5;} main,nav,footer{position:relative;z-index:1;} /* ── nav ───────────────────────────────────────────────────────────────── */ nav{position:fixed;top:0;left:0;right:0;z-index:900;height:62px; display:flex;align-items:center;justify-content:space-between; padding:0 var(--gut);background:var(--nav); backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4); border-bottom:1px solid var(--line);transition:background .3s;} /* The wordmark sits in a rounded rule. Built in CSS, not shipped as an image, so the ink follows the theme and the mark stays crisp at any size — an exported PNG would be locked to one palette and would go invisible on the other. */ .brand{font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-.5px; color:var(--ink);white-space:nowrap;display:inline-flex;align-items:center; border:2px solid var(--gold);border-radius:12px;padding:7px 14px;line-height:1; transition:border-color .22s,background .22s;} .brand b{font-weight:inherit;color:var(--gold-on);} .brand:hover{background:var(--gold-dim);} @media(max-width:560px){.brand{font-size:16.5px;padding:6px 11px;border-radius:10px;}} .nlinks{display:flex;gap:26px;align-items:center;list-style:none;} .nlinks a{font-size:13.5px;color:var(--ink-2);letter-spacing:.1px;transition:color .18s; position:relative;padding:4px 0;} .nlinks a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px; background:var(--gold);transition:right .25s cubic-bezier(.2,.8,.2,1);} .nlinks a:hover{color:var(--ink);} .nlinks a:hover::after,.nlinks a[aria-current]::after{right:0;} .nlinks a[aria-current]{color:var(--ink);} /* `.nlinks a` is (0,1,1) and would otherwise beat a bare `.ncta` on padding and font-size, which is exactly what kept this button looking squashed. */ .ncta,.nlinks a.ncta,.tray a.ncta{background:var(--gold);color:#FFFFFF!important; font-family:var(--body);font-size:12px;font-weight:500;letter-spacing:1.2px; text-transform:uppercase;line-height:1; padding:13px 26px;border-radius:0;margin-left:14px;border:none; clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px)); display:inline-flex;align-items:center;justify-content:center;white-space:nowrap; transition:background .2s,transform .2s var(--ease-back);} .ncta::after{display:none!important;} .ncta:hover,.nlinks a.ncta:hover{background:var(--teal);transform:translateY(-2px);} .ncta:active{transform:translateY(0);} nav .nlinks li:last-child{margin-left:4px;} .burger{display:none;width:42px;height:42px;border:none;background:none;cursor:pointer; flex-direction:column;justify-content:center;align-items:center;gap:5px;} .burger span{width:20px;height:1.5px;background:var(--ink);border-radius:2px; transition:transform .3s,opacity .3s;} .burger.on span:nth-child(1){transform:translateY(6.5px) rotate(45deg);} .burger.on span:nth-child(2){opacity:0;} .burger.on span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);} .tray{position:fixed;inset:0;z-index:899;background:var(--void); padding:clamp(66px,10vh,88px) var(--gut) clamp(18px,3vh,32px); transform:translateY(-100%);visibility:hidden; transition:transform .34s cubic-bezier(.4,0,.2,1),visibility 0s linear .34s; overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;} .tray.on{transform:translateY(0);visibility:visible;transition:transform .34s cubic-bezier(.4,0,.2,1),visibility 0s;} .tray-h{font-family:var(--mono);font-size:9.5px;letter-spacing:2.4px;text-transform:uppercase; color:var(--ink-3);margin-bottom:2px;} /* Sized against viewport height, not width — seven links plus a CTA and a contact block have to clear a 667px phone without scrolling. */ .tray a{position:relative;font-family:var(--display); font-size:clamp(17px,2.9vh,26px); font-weight:600;letter-spacing:-.6px;color:var(--ink); padding:clamp(8px,1.5vh,15px) 0 clamp(8px,1.5vh,15px) 30px; border-bottom:1px solid var(--line);transition:color .2s,padding-left .28s,opacity .3s; opacity:0;transform:translateY(10px);} .tray.on a{opacity:1;transform:none; transition:color .2s,padding-left .28s,opacity .42s ease,transform .42s cubic-bezier(.16,1,.3,1);} .tray.on a:nth-child(1){transition-delay:.06s}.tray.on a:nth-child(2){transition-delay:.10s} .tray.on a:nth-child(3){transition-delay:.14s}.tray.on a:nth-child(4){transition-delay:.18s} .tray.on a:nth-child(5){transition-delay:.22s}.tray.on a:nth-child(6){transition-delay:.26s} .tray.on a:nth-child(7){transition-delay:.30s}.tray.on a:nth-child(8){transition-delay:.34s} /* mono index down the left edge — the instrument language, at menu scale */ .tray a::before{content:attr(data-n);position:absolute;left:0;top:50%;transform:translateY(-50%); font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:1.2px; color:var(--ink-3);transition:color .2s;} .tray a:hover{color:var(--gold-on);padding-left:38px;} .tray a:hover::before{color:var(--gold-on);} .tray a[aria-current]{color:var(--gold-on);} .tray .ncta{font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:1.2px; justify-content:center;margin-top:clamp(12px,2.4vh,26px);border-bottom:none; padding:clamp(11px,2vh,16px);color:#FFFFFF!important;transform:none;} .tray .ncta::before{display:none;} .tray-f{margin-top:auto;padding-top:clamp(12px,2.2vh,26px);font-family:var(--mono); font-size:10px;letter-spacing:1.1px;color:var(--ink-3);line-height:1.75;} .tray-f a{font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:1.2px; color:var(--ink-3);padding:0;border:none;opacity:1;transform:none;display:block;} .tray-f a:hover{color:var(--gold-on);padding-left:0;} @media(max-width:1020px){.nlinks{display:none;}.burger{display:flex;}} @media(min-width:1021px){.tray{display:none;}} /* ── layout ────────────────────────────────────────────────────────────── */ .wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut);} section{padding:var(--sec) 0;position:relative;} .rule{height:1px;background:var(--line);max-width:var(--max);margin:0 auto;} /* ── eyebrow / labels ──────────────────────────────────────────────────── */ /* Rounded pill with a leading dot — the blue-white badge treatment, used for every eyebrow on every page. */ .eye{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:2.2px; text-transform:uppercase;color:var(--gold-on); display:inline-flex;align-items:center;gap:9px;margin-bottom:22px; padding:9px 20px;border-radius:100px; background:var(--gold-dim);border:1px solid var(--gold-line); transition:background .25s,border-color .25s;} .eye::before{content:'';width:7px;height:7px;border-radius:50%;flex-shrink:0; background:var(--gold);} .eye.t{color:var(--teal-on);background:var(--teal-dim);border-color:var(--teal-line);} .eye.t::before{background:var(--teal);} .eye.plain{background:transparent;border-color:transparent;padding:0;} .eye.plain::before{display:none;} .tricolour{display:inline-flex;gap:3px;margin-right:8px;} .tricolour i{width:9px;height:2px;border-radius:1px;display:block;} .tricolour i:nth-child(1){background:var(--saffron);} .tricolour i:nth-child(2){background:#F1F5F9;} .tricolour i:nth-child(3){background:var(--green);} /* ── type ──────────────────────────────────────────────────────────────── */ /* Sans at display sizes wants heavier weight and tighter tracking than the serif did, or it reads thin and loose. */ h1{font-family:var(--display);font-weight:700;letter-spacing:-2px;line-height:1.1; font-size:clamp(34px,4.8vw,60px);} h2{font-family:var(--display);font-weight:600;letter-spacing:-1.3px;line-height:1.16; font-size:clamp(27px,3.7vw,45px);} h3{font-family:var(--display);font-size:clamp(18px,1.9vw,22px);font-weight:600; letter-spacing:-.4px;line-height:1.3;} h1 em,h1 b,h2 em,h2 b,h3 em,h3 b{font-style:normal;font-weight:700;color:var(--gold-on);} h2.t em,h2.t b,h3.t em,h3.t b{color:var(--teal-on);} .lede{font-size:clamp(16px,1.5vw,19px);color:var(--ink-2);line-height:1.78; max-width:62ch;margin-top:20px;font-weight:300;} p{color:var(--ink-2);font-size:15.5px;line-height:1.75;} strong{color:var(--ink);font-weight:500;} .mono{font-family:var(--mono);} /* ── buttons ───────────────────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:500; padding:13px 21px;border-radius:7px;border:1px solid transparent;cursor:pointer; background:transparent;color:var(--ink);appearance:none;-webkit-appearance:none; transition:transform .18s,box-shadow .18s,border-color .18s,background .18s; font-family:var(--body);white-space:nowrap;} /* Chamfered corners, uppercase, tight tracking — the blue-white button geometry: an 8-10px notch top-right and bottom-left via clip-path. */ .btn-a{background:var(--gold);color:var(--on-gold); font-size:13px;font-weight:500;letter-spacing:1px;text-transform:uppercase; padding:16px 30px;border-radius:0;position:relative;overflow:hidden; clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch), 100% 100%,var(--notch) 100%,0 calc(100% - var(--notch))); transition:background .2s,transform .2s var(--ease-back);} .btn-a::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,0); transition:background .2s;} .btn-a > svg,.btn-a > span{position:relative;} .btn-a:hover{background:var(--teal);transform:translateY(-3px);box-shadow:none;} .btn-a:hover::before{background:rgba(255,255,255,.08);} .btn-a:active{transform:translateY(-1px);} .btn-b{border-color:var(--line-2);color:var(--ink);} .btn-b{font-size:13px;font-weight:500;letter-spacing:1px;text-transform:uppercase; padding:15px 28px;border-radius:0; clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch), 100% 100%,var(--notch) 100%,0 calc(100% - var(--notch))); transition:color .2s,background .2s,border-color .2s,transform .2s var(--ease-back);} .btn-b:hover{border-color:var(--gold);color:var(--gold-on);background:var(--gold-dim); transform:translateY(-3px);} .btn svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none; transition:transform .2s;} .btn:hover svg{transform:translateX(3px);} /* ── hero ──────────────────────────────────────────────────────────────── */ .hero{padding:clamp(104px,11vh,124px) 0 calc(var(--sec) * .72);} .hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,5vw,72px); align-items:center;} @media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:48px;}} /* ── readouts (stat strip) ─────────────────────────────────────────────── */ .readouts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px; border-top:1px solid var(--line);border-bottom:1px solid var(--line);} .ro{padding:22px 20px 22px 0;border-right:1px solid var(--line);} .ro:last-child{border-right:none;} .ro b{display:block;font-family:var(--display);font-size:clamp(24px,3vw,34px); font-weight:600;letter-spacing:-1px;color:var(--ink);line-height:1;} .ro b i{font-style:normal;color:var(--gold-on);} .ro span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:1.4px; text-transform:uppercase;color:var(--ink-3);margin-top:9px;} @media(max-width:700px){ .readouts{grid-template-columns:1fr 1fr;} .ro{border-bottom:1px solid var(--line);padding-left:0;} .ro:nth-child(2n){border-right:none;padding-left:20px;} .ro:nth-child(n+3){border-bottom:none;} } /* ── panels & cards ────────────────────────────────────────────────────── */ .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad); padding:clamp(24px,3vw,34px);position:relative;overflow:hidden; transition:transform .3s var(--ease-expo),border-color .3s,box-shadow .3s;} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;} @media(max-width:940px){.grid-3,.grid-4{grid-template-columns:1fr 1fr;}} @media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}} .card-i{width:40px;height:40px;border-radius:9px;background:var(--teal-dim); border:1px solid var(--teal-line);display:flex;align-items:center;justify-content:center; margin-bottom:18px;} .card-i svg{width:19px;height:19px;stroke:var(--teal-on);stroke-width:1.6;fill:none; stroke-linecap:round;stroke-linejoin:round;} .card-i.g{background:var(--gold-dim);border-color:var(--gold-line);} .card-i.g svg{stroke:var(--gold-on);} .panel h3{margin-bottom:9px;} .panel p{font-size:14.5px;} /* ── numbered sequence (only where order is real) ──────────────────────── */ .seq{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;} .seq-i{background:var(--surface);padding:32px 26px;position:relative;} .seq-n{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--gold-on); margin-bottom:22px;display:block;} .seq-i h3{font-size:17px;font-weight:600;margin-bottom:9px; letter-spacing:0;} .seq-i p{font-size:14px;} @media(max-width:940px){.seq{grid-template-columns:1fr 1fr;}} @media(max-width:560px){.seq{grid-template-columns:1fr;}} /* ── dial (signature) ──────────────────────────────────────────────────── */ .dial-wrap{position:relative;display:flex;flex-direction:column;align-items:center;} .dial{width:100%;max-width:400px;height:auto;overflow:visible;} .dial-arc-bg{fill:none;stroke:var(--track);stroke-width:9;stroke-linecap:round;} .dial-arc{fill:none;stroke:url(#dialgrad);stroke-width:9;stroke-linecap:round; stroke-dasharray:var(--len);stroke-dashoffset:var(--len); transition:stroke-dashoffset 1.9s cubic-bezier(.16,1,.3,1);} .in-view .dial-arc{stroke-dashoffset:var(--off);} .dial-tick{stroke:var(--tick);stroke-width:1;} .dial-tick.maj{stroke:var(--tick-maj);stroke-width:1.4;} .dial-num{font-family:var(--mono);font-size:9.5px;fill:var(--ink-3);letter-spacing:.5px;} .dial-val{font-family:var(--display);font-size:46px;font-weight:600;fill:var(--ink); letter-spacing:-2px;} .dial-cap{font-family:var(--mono);font-size:9.5px;fill:var(--ink-3);letter-spacing:2.2px;} .dial-band{font-family:var(--body);font-size:12.5px;fill:var(--teal-on);font-weight:500;} /* dimension bars */ .dims{width:100%;max-width:400px;margin-top:8px;display:flex;flex-direction:column;gap:13px;} .dim{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;} .dim-l{font-size:12.5px;color:var(--ink-2);} .dim-v{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);} .dim-t{display:block;grid-column:1/-1;height:5px;background:var(--track);border-radius:2px; overflow:hidden;} .dim-f{display:block;height:100%;border-radius:3px;width:0; transition:width 1.5s cubic-bezier(.16,1,.3,1);} .in-view .dim-f{width:var(--w);} .dim:nth-child(1) .dim-f{background:var(--gold);transition-delay:.15s;} .dim:nth-child(2) .dim-f{background:var(--teal);transition-delay:.3s;} .dim:nth-child(3) .dim-f{background:#60A5FA;transition-delay:.45s;} .dim:nth-child(4) .dim-f{background:#93C0FD;transition-delay:.6s;} /* ── blueprint diagram ─────────────────────────────────────────────────── */ .bp{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad); padding:clamp(22px,3vw,38px);position:relative;overflow:hidden;} .bp::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5; background-image:linear-gradient(var(--grid-2) 1px,transparent 1px), linear-gradient(90deg,var(--grid-2) 1px,transparent 1px); background-size:28px 28px;} .bp>*{position:relative;} .bp-cap{font-family:var(--mono);font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase; color:var(--ink-3);margin-bottom:22px;display:flex;justify-content:space-between;gap:12px;} .bp svg{width:100%;height:auto;} .bp-node{fill:var(--surface-2);stroke:var(--line-2);stroke-width:1;} .bp-node.acc{stroke:var(--gold-line);fill:var(--gold-fill);} .bp-node.tl{stroke:var(--teal-line);fill:var(--teal-fill);} .bp-t{font-family:var(--body);font-size:12.5px;fill:var(--ink);font-weight:500;} .bp-s{font-family:var(--mono);font-size:9px;fill:var(--ink-3);letter-spacing:1.2px;} .bp-link{stroke:var(--line-2);stroke-width:1;fill:none;stroke-dasharray:3 4;} .bp-flow{stroke:var(--gold-on);stroke-width:1.4;fill:none;stroke-dasharray:5 6; animation:flow 2.4s linear infinite;opacity:.7;} @keyframes flow{to{stroke-dashoffset:-22;}} /* ── definition rows ───────────────────────────────────────────────────── */ .defs{margin-top:6px;} .def{display:grid;grid-template-columns:130px 1fr;gap:18px;padding:15px 0; border-top:1px solid var(--line);align-items:start;} .def:first-child{border-top:none;} .def dt{font-family:var(--mono);font-size:11.5px;color:var(--gold-on);letter-spacing:.4px; padding-top:2px;} .def.t dt{color:var(--teal-on);} .def dd{font-size:14.5px;color:var(--ink-2);line-height:1.7;} .def dd b{color:var(--ink);font-weight:500;} @media(max-width:600px){.def{grid-template-columns:1fr;gap:5px;}} /* ── quote ─────────────────────────────────────────────────────────────── */ .quote{border-left:2px solid var(--gold);padding:6px 0 6px 26px;margin:44px 0 0;} .quote p{font-family:var(--display);font-size:clamp(18px,2.3vw,25px);font-weight:300; font-style:normal;font-weight:500;color:var(--ink);line-height:1.5;max-width:30ch;} .quote cite{display:block;font-family:var(--mono);font-size:11px;letter-spacing:1.6px; text-transform:uppercase;color:var(--ink-3);margin-top:16px;font-style:normal;} /* ── chips ─────────────────────────────────────────────────────────────── */ .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px;} .chip{font-family:var(--mono);font-size:11px;letter-spacing:.6px;color:var(--ink-2); border:1px solid var(--line-2);border-radius:100px;padding:7px 15px; max-width:100%;overflow-wrap:anywhere;} .chip b{color:var(--gold-on);font-weight:500;} .chip.t b{color:var(--teal-on);} /* ── price ─────────────────────────────────────────────────────────────── */ .price{font-family:var(--display);font-size:clamp(34px,4.5vw,46px);font-weight:600; letter-spacing:-1.6px;color:var(--ink);line-height:1;} .price small{font-family:var(--mono);font-size:12px;letter-spacing:1px;color:var(--ink-3); font-weight:400;letter-spacing:1.4px;} .price.free{color:var(--teal-on);} /* ── table ─────────────────────────────────────────────────────────────── */ .tbl{width:100%;border-collapse:collapse;font-size:14.5px;} .tbl th{font-family:var(--mono);font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase; color:var(--ink-3);text-align:left;padding:0 16px 13px 0;border-bottom:1px solid var(--line-2); font-weight:400;} .tbl td{padding:15px 16px 15px 0;border-bottom:1px solid var(--line);color:var(--ink-2); vertical-align:top;} .tbl td:first-child{color:var(--ink);font-weight:400;} .tbl tr:last-child td{border-bottom:none;} @media(max-width:620px){.tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%;} .tbl thead{display:none;} .tbl tr{border-bottom:1px solid var(--line);padding:14px 0;} .tbl td{border:none;padding:3px 0;} .tbl td:first-child{font-weight:500;margin-bottom:4px;}} /* ── cta band ──────────────────────────────────────────────────────────── */ .band{background:var(--surface);border-top:1px solid var(--line); border-bottom:1px solid var(--line);text-align:center;} .band .btns{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:34px;} /* ── footer ────────────────────────────────────────────────────────────── */ @media(max-width:520px){footer{padding-top:44px!important;padding-bottom:26px!important;}} footer{border-top:1px solid var(--line);padding:60px 0 34px;} .f-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:36px;} @media(max-width:860px){.f-grid{grid-template-columns:1fr 1fr;gap:30px;}} .f-h{font-family:var(--mono);font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase; color:var(--ink-3);margin-bottom:15px;} footer a{display:block;font-size:14px;color:var(--ink-2);padding:5px 0;transition:color .18s;} footer a:hover{color:var(--gold-on);} .f-legal{flex-wrap:wrap;gap:12px 26px;margin-top:44px;padding-top:24px;border-top:1px solid var(--line); display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; font-family:var(--mono);font-size:10.5px;letter-spacing:.7px;color:var(--ink-3);} /* ── scroll reveal ─────────────────────────────────────────────────────── */ .rv{opacity:0;transform:translateY(22px); transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);} .rv.in-view{opacity:1;transform:none;} .rv-d1{transition-delay:.08s;}.rv-d2{transition-delay:.16s;} .rv-d3{transition-delay:.24s;}.rv-d4{transition-delay:.32s;} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important;} .rv{opacity:1;transform:none;} .dial-arc{stroke-dashoffset:var(--off);} .dim-f{width:var(--w);} } /* ── legal documents ───────────────────────────────────────────────────── */ .doc{max-width:820px;margin:0 auto;} .doc-meta{font-family:var(--mono);font-size:11px;letter-spacing:1.4px;text-transform:uppercase; color:var(--ink-3);margin-top:18px;} .doc h2{font-size:clamp(21px,2.5vw,28px);margin:46px 0 12px;letter-spacing:-.7px;} .doc h3{font-size:18px;margin:32px 0 8px;color:var(--ink);font-weight:600; letter-spacing:-.3px;} .doc p,.doc li{color:var(--ink-2);font-size:15px;line-height:1.8;} .doc p{margin:10px 0;} .doc ul,.doc ol{padding-left:20px;margin:12px 0;} .doc li{margin:7px 0;} .doc a{color:var(--gold-on);} .doc a:hover{text-decoration:underline;} .doc strong{color:var(--ink);font-weight:500;} .callout{background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--gold); border-radius:var(--rad);padding:clamp(18px,2.4vw,26px);margin:26px 0;} .callout p{margin:0;} .callout.t{border-left-color:var(--teal);} .factbox{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--rad); padding:clamp(18px,2.4vw,26px);margin:22px 0;} .factbox p{margin:0;font-size:14.5px;line-height:1.95;} .doc-foot{margin-top:52px;padding-top:22px;border-top:1px solid var(--line); font-family:var(--mono);font-size:10.5px;letter-spacing:.7px;color:var(--ink-3);line-height:1.9;} /* ── commerce ──────────────────────────────────────────────────────────── */ /* [hidden] must beat the display:flex on .total, or hidden rows still show */ [hidden]{display:none!important;} .sku{display:grid;grid-template-columns:26px 1fr auto;gap:14px;align-items:center; padding:15px 0;border-bottom:1px solid var(--line);} .sku:last-of-type{border-bottom:none;} .sku-t{font-size:14.5px;color:var(--ink);line-height:1.4;} .sku-t small{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:1.2px; text-transform:uppercase;color:var(--ink-3);margin-top:4px;} .sku-p{font-family:var(--mono);font-size:14px;color:var(--gold-on);white-space:nowrap;text-align:right;} .sku-p s{display:block;color:var(--ink-3);font-size:11px;} .sku input[type=checkbox]{appearance:none;-webkit-appearance:none;width:19px;height:19px; border:1px solid var(--line-2);border-radius:5px;background:var(--surface-2);cursor:pointer; position:relative;transition:border-color .18s,background .18s;flex-shrink:0;} .sku input[type=checkbox]:checked{background:var(--gold);border-color:var(--gold);} .sku input[type=checkbox]:checked::after{content:'';position:absolute;left:6px;top:2px; width:5px;height:10px;border:solid var(--void);border-width:0 2px 2px 0;transform:rotate(45deg);} .fld{margin-bottom:14px;} .fld label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:1.4px; text-transform:uppercase;color:var(--ink-3);margin-bottom:7px;} .fld input,.fld select{width:100%;background:var(--surface-2);border:1px solid var(--line-2); border-radius:8px;padding:12px 14px;color:var(--ink);font-family:var(--body);font-size:14.5px; transition:border-color .18s;} .fld input:focus,.fld select:focus{outline:none;border-color:var(--gold);} .fld input::placeholder{color:var(--ink-3);} .fld select option{background:var(--surface-2);color:var(--ink);} .row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;} @media(max-width:520px){.row-2{grid-template-columns:1fr;gap:0;}} .total{display:flex;justify-content:space-between;align-items:baseline;gap:14px; padding:18px 0;margin-top:6px;border-top:1px solid var(--line-2);} .total span{font-family:var(--mono);font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase; color:var(--ink-3);} .total b{font-family:var(--display);font-size:32px;font-weight:600;letter-spacing:-1.4px;color:var(--ink);} .note{font-family:var(--mono);font-size:10.5px;letter-spacing:.8px;line-height:1.8; color:var(--ink-3);margin-top:14px;} .note.err{color:#F87171;} .note.ok{color:var(--teal-on);} .btn[disabled]{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important;} /* ── marquee ───────────────────────────────────────────────────────────── */ .mq-wrap{position:relative;overflow:hidden;padding:4px 0; mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);} .mq-lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:2.2px; text-transform:uppercase;color:var(--ink-3);text-align:center;margin-bottom:26px;} .mq-track{display:flex;width:max-content;animation:slide 42s linear infinite;} .mq-wrap:hover .mq-track{animation-play-state:paused;} .mq-track.rev{animation-direction:reverse;animation-duration:52s;} .mq-set{display:flex;flex-shrink:0;} .mq-i{display:inline-flex;align-items:center;gap:10px;white-space:nowrap; padding:11px 20px;margin:0 7px;border:1px solid var(--line-2);border-radius:100px; background:var(--surface);font-size:13.5px;color:var(--ink-2); transition:border-color .25s,color .25s,transform .25s;} .mq-i:hover{border-color:var(--gold-line);color:var(--ink);transform:translateY(-1px);} .mq-i b{font-family:var(--mono);font-size:10.5px;letter-spacing:1.4px; text-transform:uppercase;color:var(--gold-on);font-weight:500;} .mq-i.t b{color:var(--teal-on);} .mq-i i{width:6px;height:6px;border-radius:50%;background:var(--teal); flex-shrink:0;font-style:normal;} @keyframes slide{from{transform:translateX(0);}to{transform:translateX(-50%);}} @media(prefers-reduced-motion:reduce){ .mq-track{animation:none;} .mq-wrap{overflow-x:auto;mask-image:none;-webkit-mask-image:none;} } /* ── theme toggle ──────────────────────────────────────────────────────── */ .tt{width:36px;height:36px;border-radius:9px;border:1px solid var(--line-2); background:transparent;color:var(--ink-2);cursor:pointer;display:inline-flex; align-items:center;justify-content:center;flex-shrink:0; transition:border-color .2s,color .2s,background .2s;} .tt:hover{border-color:var(--ink-3);color:var(--ink);background:var(--hover);} .tt svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.7;fill:none; stroke-linecap:round;stroke-linejoin:round;} .tt .moon{display:none;} :root[data-theme=light] .tt .moon, :root[data-theme=dark] .tt .sun{display:block;} :root[data-theme=light] .tt .sun, :root[data-theme=dark] .tt .moon{display:none;} @media(prefers-color-scheme:dark){ :root:not([data-theme]) .tt .moon{display:none;} :root:not([data-theme]) .tt .sun{display:block;} } .nav-r{display:flex;align-items:center;gap:12px;} /* ── founder page ──────────────────────────────────────────────────────── */ .roles{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:10px; margin-top:34px;} .role{display:flex;align-items:center;gap:12px;border:1px solid var(--line-2); border-radius:10px;padding:13px 16px;background:var(--surface); transition:border-color .22s,transform .22s;} .role:hover{border-color:var(--gold-line);transform:translateY(-1px);} .role n{font-family:var(--mono);font-size:10px;color:var(--ink-3);min-width:18px; font-style:normal;} .role s{text-decoration:none;font-size:13.5px;color:var(--ink);} .role.a{border-left:2px solid var(--gold);} .role.t{border-left:2px solid var(--teal);} .certs{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px; margin-top:30px;} .cert{background:var(--surface);border:1px solid var(--line);border-radius:11px; padding:15px 15px 13px;border-top:2px solid var(--line-2);transition:transform .22s,border-color .22s;} .cert:hover{transform:translateY(-2px);border-color:var(--line-2);} .cert-p{font-family:var(--mono);font-size:10px;letter-spacing:1.3px;text-transform:uppercase; color:var(--gold-on);margin-bottom:6px;} .cert.t{border-top-color:var(--teal-line);} .cert.t .cert-p{color:var(--teal-on);} .cert-n{font-size:13px;color:var(--ink);line-height:1.45;margin-bottom:10px;} .cert-y{font-family:var(--mono);font-size:10px;color:var(--ink-3);} .edu{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:32px;} @media(max-width:640px){.edu{grid-template-columns:1fr;}} .pquote{font-family:var(--display);font-size:clamp(19px,2.6vw,28px);font-weight:300; font-style:normal;font-weight:500;color:var(--ink);line-height:1.45;padding:26px 0; border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:30px 0;} .pquote em{font-style:normal;font-weight:600;color:var(--teal-on);} /* ── footer (restored layout) ───────────────────────────────────────────── */ /* Wordmark only — the crown is gone, so this is just the lockup's own breathing room rather than an image-plus-text row. */ .f-brand{display:block;margin-bottom:18px;line-height:1;} .f-brand .brand{line-height:1;display:inline-flex;align-items:center;white-space:nowrap; font-size:20px;padding:8px 15px;} .f-tag{font-size:14px;color:var(--ink-2);line-height:1.75;max-width:32ch;} .f-reg{margin-top:22px;padding-top:16px;border-top:1px solid var(--line); font-family:var(--mono);font-size:10.5px;letter-spacing:.5px;line-height:2;color:var(--ink-3);} .f-reg b{display:block;color:var(--ink-2);font-weight:400;letter-spacing:1px;margin-bottom:3px;} /* founder portrait — a portrait, not a billboard */ .portrait{max-width:330px;margin-left:auto;} @media(max-width:940px){.portrait{max-width:280px;margin:0 auto;}} .portrait img{width:100%;height:auto;display:block;border-radius:var(--rad); border:1px solid var(--line);box-shadow:var(--shadow);object-fit:cover;aspect-ratio:446/548;} /* ── centred layout ───────────────────────────────────────────────────── Everything reads from the middle now: hero blocks, section intros and the closing bands. Card interiors and legal prose stay left, because centred body copy at paragraph length is a readability tax. */ .hero .wrap{text-align:center;} .hero .lede,.hero p{margin-left:auto;margin-right:auto;} .hero .hero-grid{grid-template-columns:1fr;justify-items:center;gap:44px;} .hero .hero-grid > *{width:100%;max-width:820px;} .hero .hero-grid .dial-wrap,.hero .hero-grid .dims{margin-left:auto;margin-right:auto;} .hero .chips,.hero .btns{justify-content:center;} /* button rows in the heroes are inline-styled flex containers, not .btns — text-align cannot centre a flex row, so target them directly */ .hero [style*="display:flex"], section > .wrap > .rv:has(> .eye) [style*="display:flex"]{justify-content:center;} .hero .defs [style*="display:flex"]{justify-content:flex-start;} .hero .eye{justify-content:center;} .hero .readouts .ro{text-align:center;padding-left:20px;padding-right:20px;} .hero .portrait{margin-left:auto;margin-right:auto;} /* section intros — the eyebrow / heading / lede stack */ section > .wrap > .rv:has(> .eye), section > .wrap > div.rv:has(> .eye){text-align:center;} section > .wrap > .rv:has(> .eye) .eye{justify-content:center;} section > .wrap > .rv:has(> .eye) .lede{margin-left:auto;margin-right:auto;} .band .wrap{text-align:center;} .band .eye{justify-content:center;} .doc{text-align:left;} .doc .eye{justify-content:flex-start;} .hero .doc,.hero .doc .lede{text-align:left;margin-left:0;} /* ── course catalogue ───────────────────────────────────────────────────── */ .filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:34px;} .fchip{font-family:var(--body);font-size:13.5px;color:var(--ink-2);background:var(--surface); border:1px solid var(--line-2);border-radius:100px;padding:9px 18px;cursor:pointer; transition:background .2s,color .2s,border-color .2s;} .fchip:hover{border-color:var(--ink-3);color:var(--ink);} .fchip.on{background:var(--ink);color:var(--void);border-color:var(--ink);} .cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px;} @media(max-width:980px){.cgrid{grid-template-columns:1fr 1fr;}} @media(max-width:640px){.cgrid{grid-template-columns:1fr;}} .ccard{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad); overflow:hidden;display:flex;flex-direction:column;text-align:left; transition:transform .25s,border-color .25s,box-shadow .25s;} .ccard:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:var(--shadow);} .ccard[hidden]{display:none;} .ctop{height:132px;display:flex;align-items:center;justify-content:center;position:relative; font-size:44px;line-height:1;} .ctop span{position:absolute;top:12px;right:12px;font-family:var(--mono);font-size:10px; letter-spacing:1px;text-transform:uppercase;background:var(--gold);color:#0A1628; padding:4px 10px;border-radius:100px;font-weight:500;} .cbody{padding:18px 18px 0;flex:1;} .cmeta{display:flex;justify-content:space-between;align-items:baseline;gap:10px; font-family:var(--mono);font-size:10px;letter-spacing:1.2px;text-transform:uppercase; color:var(--ink-3);margin-bottom:8px;} .cmeta b{color:var(--gold-on);font-weight:500;} .ccard h3{font-size:18px;font-weight:600;letter-spacing:-.3px; line-height:1.3;margin-bottom:8px;} .ccard p{font-size:13.5px;line-height:1.65;} .cfoot{padding:16px 18px 18px;} .cprice{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:13px;} .cprice s{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);} .cprice b{font-family:var(--display);font-size:25px;font-weight:600;letter-spacing:-1px; color:var(--ink);} .cprice i{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.8px; color:var(--teal-on);background:var(--teal-dim);border:1px solid var(--teal-line); border-radius:100px;padding:3px 9px;} .cadd{width:100%;justify-content:center;} .cadd.in{background:var(--teal);color:#fff;} .cadd.in:hover{background:var(--teal);box-shadow:0 10px 24px var(--teal-dim);} .cempty{text-align:center;color:var(--ink-3);font-family:var(--mono);font-size:12px; letter-spacing:1.2px;padding:40px 0;} .f-legal a{display:inline;font-family:inherit;font-size:inherit;letter-spacing:inherit; color:var(--ink-3);padding:0;transition:color .18s;} .f-legal a:hover{color:var(--gold-on);text-decoration:underline;} .fld textarea{width:100%;background:var(--surface-2);border:1px solid var(--line-2); border-radius:8px;padding:12px 14px;color:var(--ink);font-family:var(--body); font-size:14.5px;line-height:1.6;resize:vertical;min-height:120px;transition:border-color .18s;} .fld textarea:focus{outline:none;border-color:var(--gold);} .fld textarea::placeholder{color:var(--ink-3);} /* ── premium hover, ported from the blue-white build ───────────────────── A lift on an expo curve, the border picking up the accent, and a corner wash fading in underneath. Same numbers as the source: -6px lift, a 135deg gradient, accent border on hover. */ .panel::before,.ccard::before,.cert::before,.role::before{ content:'';position:absolute;inset:0;pointer-events:none; background:linear-gradient(135deg,var(--gold-dim) 0%,transparent 60%); opacity:0;transition:opacity .3s;} .panel > *,.ccard > *{position:relative;} .panel:hover,.ccard:hover{transform:translateY(-6px);border-color:var(--gold-line); box-shadow:0 20px 60px var(--shadow-tint),0 0 40px var(--gold-dim);} .panel:hover::before,.ccard:hover::before,.cert:hover::before,.role:hover::before{opacity:1;} .cert,.role{position:relative;overflow:hidden; transition:transform .3s var(--ease-expo),border-color .3s,box-shadow .3s;} .cert:hover,.role:hover{transform:translateY(-4px);border-color:var(--gold-line); box-shadow:0 14px 40px var(--shadow-tint);} .fchip{transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease-back);} .fchip:hover{transform:translateY(-2px);} .chip{transition:border-color .25s,transform .25s var(--ease-back);} .chip:hover{border-color:var(--gold-line);transform:translateY(-2px);} .card-i{transition:transform .3s var(--ease-back);} .panel:hover .card-i{transform:scale(1.08) rotate(-4deg);} .rv{transition:opacity .7s var(--ease-expo),transform .7s var(--ease-expo);} /* ── custom cursor ─────────────────────────────────────────────────────── Desktop pointers only. Touch devices and anyone who asked for reduced motion keep the native cursor — a hidden cursor you cannot track is a usability problem, not a flourish. */ .cur-dot,.cur-ring{position:fixed;top:0;left:0;z-index:9999;pointer-events:none; border-radius:50%;opacity:0;transition:opacity .3s;} .cur-dot{width:7px;height:7px;background:var(--gold);margin:-3.5px 0 0 -3.5px;} .cur-ring{width:32px;height:32px;border:1px solid var(--gold-line);margin:-16px 0 0 -16px; transition:width .3s var(--ease-expo),height .3s var(--ease-expo), margin .3s var(--ease-expo),border-color .3s,opacity .3s;} .cur-ring.on{width:52px;height:52px;margin:-26px 0 0 -26px;border-color:var(--gold);} @media(hover:hover) and (pointer:fine){ html.cur-live .cur-dot,html.cur-live .cur-ring{opacity:1;} } @media(prefers-reduced-motion:reduce){ .cur-dot,.cur-ring{display:none;} .panel:hover,.ccard:hover,.cert:hover,.role:hover,.btn-a:hover,.btn-b:hover{transform:none;} } /* ── footer line ─────────────────────────────────────────────────────────── */ .f-india{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono); font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink-3);} .f-india i{display:inline-block;width:22px;height:3px;border-radius:2px;font-style:normal; background:linear-gradient(90deg,#FF9933 0 33.3%,#FFFFFF 33.3% 66.6%,#138808 66.6% 100%); box-shadow:0 0 0 1px var(--line);} /* A flex item defaults to min-width:auto, so the code input refuses to shrink past its intrinsic size; with the wider uppercase Apply button beside it the pair overflowed a 360px screen. */ .fld input,.fld select{min-width:0;} @media(max-width:420px){ .btn-a,.btn-b{padding:14px 20px;font-size:12px;letter-spacing:.8px;} .ncta,.nlinks a.ncta,.tray a.ncta{padding:12px 18px;} } /* Heroes that pin their column with an inline max-width were centring their text inside a left-aligned box. Centre the box too. */ .hero .wrap > div[style*="max-width"]{margin-left:auto;margin-right:auto;} /* Hero weight, applied per page while we settle on it. 700 reads heavy at display size in DM Sans; 600 keeps the presence without the shout. */ /* 500 rather than 600 — at 56px DM Sans medium still holds the page without shouting, and the accent colour carries the emphasis instead of the weight. */ h1.lite{font-weight:500;letter-spacing:-1.6px;} h1.lite em,h1.lite b{font-weight:600;} /* ── split hero ────────────────────────────────────────────────────────── Copy on the left, the dial on the right. Opt-in per page: the markup is already a two-column grid, the centred treatment just collapses it. Below 940px it folds back to the stacked, centred layout. */ .hero.split .wrap{text-align:left;} .hero.split .hero-grid{grid-template-columns:1.18fr .82fr; align-items:center;gap:clamp(30px,4.5vw,60px);justify-items:stretch;} .hero.split .hero-grid > *{width:auto;max-width:none;} .hero.split .lede,.hero.split p{margin-left:0;margin-right:0;} .hero.split .eye{justify-content:flex-start;} .hero.split [style*="display:flex"]{justify-content:flex-start;} .hero.split .readouts .ro{text-align:center;} .hero.split .dial-wrap{margin-left:auto;margin-right:0;} /* Three buttons will not sit on one line in a half-width column without shrinking them past comfort, so the wrap is made deliberate instead: the primary takes its own row, the two secondaries sit together beneath it. */ @media(min-width:941px){ .hero.split .rv-d3:has(> .btn){display:grid!important; grid-template-columns:max-content max-content;gap:11px;justify-content:start;} .hero.split .rv-d3:has(> .btn) .btn-a{grid-column:1 / -1;justify-self:start;padding:15px 26px;} .hero.split .rv-d3:has(> .btn) .btn-b{padding:14px 20px;} } @media(max-width:940px){ .hero.split .wrap{text-align:center;} .hero.split .hero-grid{grid-template-columns:1fr;justify-items:center;} .hero.split .hero-grid > *{max-width:820px;} .hero.split .lede,.hero.split p{margin-left:auto;margin-right:auto;} .hero.split .eye,.hero.split [style*="display:flex"]{justify-content:center;} .hero.split .readouts .ro{text-align:center;padding-left:20px;} .hero.split .dial-wrap{margin-left:auto;margin-right:auto;} } /* On a phone this footer ran to two full screens. The waste was structural: Legal has four links but stretched to match the eight-link Pages column. Now the brand spans the width, Pages flows in two sub-columns, and Legal and Contact sit side by side underneath. */ @media(max-width:520px){ .f-grid{grid-template-columns:1fr 1fr;gap:20px 16px;align-items:start;} .f-grid > div:first-child, .f-grid > div:nth-child(2){grid-column:1 / -1;} .f-grid > div:nth-child(2){columns:2;column-gap:16px;} .f-grid > div:nth-child(2) .f-h{column-span:all;} .f-h{font-size:9.5px;letter-spacing:1.4px;margin-bottom:10px;} footer a{font-size:13px;margin-bottom:8px;} .f-tag{font-size:13.5px;line-height:1.6;max-width:none;} .f-reg{margin-top:14px;padding-top:12px;font-size:9px;line-height:1.65;letter-spacing:.2px;} .f-brand{margin-bottom:13px;} .f-brand .brand{font-size:18px;padding:7px 13px;} .f-legal{margin-top:24px;padding-top:14px;gap:8px 16px;font-size:9.5px;line-height:1.7;} } /* ── founder story photography ──────────────────────────────────────────── */ .fig{margin:0;} .fig img{width:100%;height:auto;display:block;border-radius:var(--rad); border:1px solid var(--line);box-shadow:var(--shadow);} .fig figcaption{font-family:var(--mono);font-size:10px;letter-spacing:1.8px; text-transform:uppercase;color:var(--ink-3);margin-top:12px;text-align:center;} /* No aspect-ratio and no object-fit at all: width:100% with height:auto lets each photograph scale whole, at its own proportions. object-fit:none was worse than the crop it replaced — it renders at intrinsic size and clips. */ .fig-wide{max-width:760px;margin-left:auto;margin-right:auto;} /* ── spacing pass ──────────────────────────────────────────────────────── The desktop rhythm was tuned for the serif build and reads loose in sans. Phones get a further reduction — vertical space is the scarce resource. */ .readouts{margin-top:clamp(30px,4vw,48px); grid-template-columns:repeat(auto-fit,minmax(150px,1fr));} .rule{margin:0;} @media(max-width:760px){ .hero{padding:clamp(92px,13vh,108px) 0 40px;} section{padding:clamp(40px,7vw,56px) 0;} .hero-grid{gap:26px;} .grid-2,.grid-3{gap:14px;} .lede{margin-top:14px;} .readouts{margin-top:26px;} .panel{padding:20px;} .band{padding:clamp(44px,8vw,60px) 0;} h1{margin-bottom:0;} .eye{margin-bottom:16px;padding:7px 16px;font-size:10px;letter-spacing:1.8px;} /* keep the indent from the vertical rule; only the vertical padding shrinks */ .quote{margin:20px 0 0;padding:6px 0 6px 18px;} .pquote{margin:20px 0;padding:18px 0;} .defs{margin-top:16px;} .fig figcaption{margin-top:9px;} } @media(max-width:420px){ .hero{padding-bottom:32px;} section{padding:36px 0;} .readouts{margin-top:22px;} } /* Grid and flex items default to min-width:auto, so a single unbreakable run of mono text can push a whole column past a 320px screen. */ .grid-2 > *,.grid-3 > *,.hero-grid > *,.readouts > *,.sku > *{min-width:0;} @media(max-width:400px){ .bp-cap,.mono,.f-reg,.doc-meta{overflow-wrap:anywhere;} .sku{gap:10px;} .sku-t small{overflow-wrap:anywhere;} } /* On a phone the three hero buttons stacked into three rows. The primary keeps its own full-width row; the two secondaries share the next one. */ @media(max-width:760px){ .hero .rv-d3:has(> .btn){display:grid!important;grid-template-columns:1fr 1fr;gap:10px; justify-content:stretch;max-width:420px;margin-left:auto;margin-right:auto;} .hero .rv-d3:has(> .btn) .btn-a{grid-column:1 / -1;justify-content:center;} .hero .rv-d3:has(> .btn) .btn-b{justify-content:center;padding:14px 10px;font-size:11.5px; letter-spacing:.6px;} } /* ── iCourses: the all-access callout is a flex row that has to become a stack on a phone, or the copy compresses to one word per line. ────────── */ @media(max-width:640px){ .ac-note{flex-direction:column;gap:12px!important;text-align:left;} .ac-note .card-i{margin-bottom:0;} } /* View course sits under Add to cart */ .cfoot .cadd{margin-bottom:8px;} .cview{width:100%;justify-content:center;font-size:11.5px;padding:11px 14px;} /* Inline ch-based caps are tuned for side-by-side desktop stats; on a phone they squeeze the copy to three or four words a line. */ @media(max-width:640px){ [style*="max-width:20ch"],[style*="max-width:22ch"],[style*="max-width:24ch"], [style*="max-width:26ch"],[style*="max-width:30ch"]{max-width:none!important;} .quote p{max-width:none;} }