/* ============================================================================
   Sun Coast Digital, "Sunrise" design system
   Tokens verbatim from Sun Coast Brand Palette.pdf (page 2).
   The sunrise is drawn, not photographed: a luminous sun, the logo ramp as a
   horizon hairline, water beneath. No borrowed imagery outside the portfolio.
   ========================================================================= */

/* ---- 0. Display face ----------------------------------------------------
   Sentient (Indian Type Foundry, via Fontshare) is the display face: a
   contemporary editorial serif with enough weight in the stem to hold its own
   on a navy ground, where a high-contrast Didone would lose its hairlines.
   Two files, each a variable weight axis 200-700, roman and true italic.
   Self-hosted, so the site carries no third-party font dependency; ITF Free
   Font Licence permits commercial use and self-hosting. See
   assets/fonts/README.md.
   ------------------------------------------------------------------------ */
/* ---- Self-hosted UI and mono faces ------------------------------------
   Hanken Grotesk and JetBrains Mono, both SIL Open Font License 1.1, which
   permits self-hosting. Served from our own origin so no page makes a
   render-blocking request to a third-party font host.
   ---------------------------------------------------------------------- */
/* Hanken Grotesk, latin-ext */
@font-face{
  font-family:'Hanken Grotesk';
  src:url('../fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Hanken Grotesk, latin */
@font-face{
  font-family:'Hanken Grotesk';
  src:url('../fonts/hanken-grotesk-latin.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* JetBrains Mono, latin-ext */
@font-face{
  font-family:'JetBrains Mono';
  src:url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  font-weight:400 500;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono, latin */
@font-face{
  font-family:'JetBrains Mono';
  src:url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
  font-weight:400 500;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
  font-family:'Sentient';
  src:url('../fonts/sentient-variable.woff2') format('woff2');
  font-weight:200 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Sentient';
  src:url('../fonts/sentient-variable-italic.woff2') format('woff2');
  font-weight:200 700;font-style:italic;font-display:swap;
}

/* ---- 1. Tokens ---------------------------------------------------------- */
/* Brand constants: fixed values from the palette sheet, never context dependent. */
:root{
  --midnight:#06080E;
  --navy:#0C1424;
  --navy-raised:#0C233E;
  --rust-glow:#351D17;

  --amber:#E58C4E;
  --coral:#DD968A;
  --rose:#D397AB;
  --lavender:#A895C8;
  --periwinkle:#909DD7;
  --sky-c:#789DD8;
  --cyan:#5DADCE;
  --ramp:linear-gradient(90deg,#E58C4E 0%,#DD968A 22%,#D397AB 40%,#A895C8 58%,
                                #909DD7 72%,#789DD8 86%,#5DADCE 100%);
  --peach:#D9B0A4;
  --water:#6493C4;

  --display:'Sentient','Iowan Old Style','Times New Roman',serif;
  --ui:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;
  --body:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --gutter:44px;
  --maxw:1340px;
  --section:clamp(68px,7.6vw,112px);
  --nav-h:88px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media(max-width:700px){:root{--gutter:22px;--nav-h:72px}}
@media(max-width:380px){:root{--gutter:16px}}

/* ---------------------------------------------------------------------------
   Two dark grounds and one paper ground, one component layer. Every component
   reads --fg / --fg-soft / --fg-mute / --accent / --rule, so a section flips
   simply by redeclaring them.

   The default ground is NAVY, not midnight. The old site sat on midnight
   throughout; running the body on the palette's navy and dropping to midnight
   only for the deep bands (hero, CTA, footer) is what gives this build a
   different register while every value still comes off the brand sheet.
   ------------------------------------------------------------------------ */
:root,
.surface-dark{
  /* Sits on the line between the sheet's --navy (#0C1424) and --navy-raised
     (#0C233E): far enough off midnight that the band rhythm reads, still the
     same hue the palette specifies. */
  --bg:#0C1A2E;
  --bg-2:#06080E;
  --fg:#F4F7FB;
  --fg-soft:#9EABC0;
  --fg-mute:#8391A8;
  --accent:#E58C4E;
  --accent-link:#93B7E6;
  --on-accent:#06080E;
  --rule:rgba(244,247,251,.13);
  --rule-soft:rgba(244,247,251,.08);
  --rule-strong:rgba(244,247,251,.22);
  --raised:rgba(244,247,251,.028);
  --raised-2:rgba(244,247,251,.055);
  --band:#06080E;
}

/* The deep ground: midnight. Hero, CTA band, footer, nav. Bands drop away from
   the navy body rather than lifting off it, which is the inverse of the old
   site and reads as depth instead of stacked panels. */
.surface-deep{
  --bg:#06080E;
  --bg-2:#0C1424;
  --fg:#F4F7FB;
  --fg-soft:#94A2B8;
  --fg-mute:#7C8AA1;
  --accent:#E58C4E;
  --accent-link:#93B7E6;
  --on-accent:#06080E;
  --rule:rgba(244,247,251,.115);
  --rule-soft:rgba(244,247,251,.07);
  --rule-strong:rgba(244,247,251,.20);
  --raised:rgba(244,247,251,.026);
  --raised-2:rgba(244,247,251,.05);
  --band:#0C1424;
  background:var(--bg);
  color:var(--fg-soft);
}

/* Paper. Kept for anything that needs to invert (print, an embedded light
   panel); the amber measures 2.37:1 on paper, far under AA, so the light
   surface swaps in a deepened rust for anything that carries meaning. */
.surface-light{
  --bg:#F4F6F9;
  --bg-2:#E9EDF3;
  --fg:#06080E;
  --fg-soft:#3A4356;
  --fg-mute:#5A6478;
  --accent:#AB5214;
  --accent-link:#1F5FA8;
  --on-accent:#FFFFFF;
  --rule:rgba(6,8,14,.14);
  --rule-soft:rgba(6,8,14,.085);
  --rule-strong:rgba(6,8,14,.30);
  --raised:rgba(6,8,14,.022);
  --raised-2:rgba(6,8,14,.045);
  --band:#E9EDF3;
  background:var(--bg);
  color:var(--fg-soft);
}
.surface-dark{background:var(--bg);color:var(--fg-soft)}

/* ---- 2. Reset ----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px;overflow-x:clip}
body{
  margin:0;background:var(--bg);color:var(--fg-soft);
  font-family:var(--body);font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5,p,figure,ul,ol,dl,dd,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;
  box-shadow:0 0 0 6px var(--bg)}
/* summary and details need it too, and must not lose it to overflow clipping */
summary:focus-visible{outline-offset:-3px}

/* ---- 3. The sunrise ----------------------------------------------------- */
/* Drawn in CSS from the brand's own light. Used full-strength on the home
   hero, and as a quieter wash at the top of interior pages. */
.sky{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sky::before{                                   /* the sun */
  content:'';position:absolute;left:56%;bottom:-6%;width:min(70vw,820px);aspect-ratio:1;
  transform:translateX(-50%);border-radius:50%;filter:blur(2px);
  background:radial-gradient(circle,
    rgba(255,236,214,.30) 0%,
    rgba(229,140,78,.26) 26%,
    rgba(211,151,171,.14) 46%,
    rgba(144,157,215,.07) 64%,
    transparent 72%);
}
.sky::after{                                    /* the water */
  content:'';position:absolute;inset:auto 0 0;height:12%;
  background:linear-gradient(180deg,rgba(100,147,196,.16) 0%,rgba(12,35,62,.34) 44%,var(--midnight) 100%);
}
.sky-soft::before{width:min(58vw,660px);bottom:-18%;left:70%;opacity:.72}
.sky-soft::after{display:none}
.horizon{                                       /* the logo ramp, as a hairline */
  position:absolute;left:0;right:0;bottom:12%;height:1px;background:var(--ramp);
  opacity:.85;box-shadow:0 0 46px 4px rgba(229,140,78,.18);pointer-events:none;
}
.grain{
  position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* a ramp hairline used as a section divider */
.rule-ramp{height:1px;border:0;margin:0;background:var(--ramp);opacity:.65}

main{position:relative}
main>section,main>div{position:relative;z-index:1}
.page-light{display:none}

/* ---- 4. Layout ---------------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:860px}
.section{padding-block:var(--section)}
.section-tight{padding-block:clamp(52px,5.4vw,80px)}
.band{background:var(--bg-2)}
.rule-top{border-top:1px solid var(--rule-soft)}

/* ---- 5. Type ------------------------------------------------------------ */
.display{font-family:var(--display);font-weight:400;color:var(--fg);
  letter-spacing:-.008em;line-height:1.0;text-wrap:balance;font-synthesis:none}
.d1{font-size:clamp(48px,7.2vw,108px);line-height:.94}
.d2{font-size:clamp(38px,5.2vw,76px);line-height:.98}
.d3{font-size:clamp(28px,3.2vw,46px);line-height:1.06;letter-spacing:-.016em}
.d4{font-size:clamp(21px,1.9vw,28px);line-height:1.2;letter-spacing:-.014em}
.tone{color:var(--accent);font-style:italic}
.dim{color:var(--fg-mute)}

.lede{font-size:clamp(17px,1.4vw,19.5px);line-height:1.62;max-width:60ch;color:var(--fg-soft)}
.prose{max-width:68ch}
.prose p+p{margin-top:1.05em}
.prose em{color:var(--fg);font-style:italic}
.small{font-size:14.5px;line-height:1.6}
.tiny{font-size:12.5px;line-height:1.6;color:var(--fg-mute)}

.label{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-mute);display:flex;align-items:center;gap:12px}
.label::before{content:'';width:24px;height:1px;background:var(--accent);opacity:.85;flex:none}
.label-num{color:var(--accent)}
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-mute)}
h2.label,h3.label{margin:0}

/* Section headers run the full measure. The heading spans the top edge of the
   section and the standfirst sits under it, rather than the heading being
   penned into a left column with the copy stranded in the opposite corner. */
.head{display:grid;gap:20px;margin-bottom:clamp(38px,4.2vw,58px)}
.head .display{max-width:22ch}
.head-split .display{max-width:none}
@media(min-width:920px){
  .head-split{gap:26px}
  .head-split .lede{max-width:74ch;font-size:clamp(17.5px,1.5vw,20.5px)}
}

/* ---- 6. Buttons --------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:54px;padding:0 26px;border:1px solid transparent;border-radius:0;
  /* <button> carries a light UA background; without this, ghost buttons render
     white-on-white. Every variant sets its own background below. */
  background:transparent;-webkit-appearance:none;appearance:none;
  font-family:var(--ui);font-size:15.5px;font-weight:600;letter-spacing:-.012em;
  cursor:pointer;white-space:nowrap;
  transition:background .18s var(--ease),color .18s var(--ease),
             border-color .18s var(--ease),transform .18s var(--ease)}
.btn svg{flex:none;transition:transform .22s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:#F0A268;transform:translateY(-1px)}
.btn-ghost{background:transparent;border-color:var(--rule-strong);color:var(--fg)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.btn-sm{height:44px;padding:0 20px;font-size:14px}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}

.tlink{display:inline-flex;align-items:center;gap:9px;color:var(--fg);
  font-family:var(--ui);font-size:15.5px;font-weight:600;
  padding-bottom:4px;border-bottom:1px solid var(--accent);
  transition:color .18s var(--ease)}
.tlink:hover{color:var(--accent)}
.tlink svg{transition:transform .22s var(--ease)}
.tlink:hover svg{transform:translateX(3px)}

/* ---- 7. Nav ------------------------------------------------------------- */
.nav{position:sticky;top:0;z-index:60;background:var(--bg);
  border-bottom:1px solid var(--rule-soft);transition:box-shadow .3s var(--ease)}
.nav.is-stuck{box-shadow:0 14px 34px -22px rgba(6,8,14,.8)}
.nav-inner{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  height:var(--nav-h);display:flex;align-items:center;gap:26px}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand-mark{width:36px;height:36px;border-radius:9px;flex:none;display:block}
.brand-name{font-family:var(--ui);font-size:16.5px;font-weight:700;
  color:var(--fg);letter-spacing:-.024em;line-height:1}
.nav-links{display:none;align-items:center;gap:22px;margin-left:auto;white-space:nowrap}
.nav-links a{position:relative;display:inline-block;min-height:24px;font-size:14.5px;
  color:var(--fg-soft);padding-block:8px;transition:color .18s var(--ease)}
.nav-links a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .26s var(--ease)}
.nav-links a:hover{color:var(--fg)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--fg)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-end{display:flex;align-items:center;gap:16px;margin-left:auto}
.nav-tel{display:none;align-items:center;min-height:24px;padding-block:4px;
  font-family:var(--mono);font-size:12.5px;color:var(--fg-soft);transition:color .18s var(--ease)}
.nav-tel:hover{color:var(--accent)}
/* the nav CTA is white over the sunrise, the one high-contrast element up top */
.nav-end .btn{flex:none;align-self:center;background:var(--accent);color:var(--on-accent);
  border-color:transparent;display:none}
.nav-end .btn:hover{filter:brightness(1.08)}
@media(min-width:560px){.nav-end .btn{display:inline-flex}}
.nav-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;padding:0 10px;background:none;border:1px solid var(--rule);cursor:pointer}
.nav-burger span{display:block;height:1.5px;background:var(--fg);
  transition:transform .26s var(--ease),opacity .2s var(--ease)}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(min-width:1180px){
  .nav-links{display:flex}
  .nav-end{margin-left:0}
  .nav-tel{display:inline-flex}
  .nav-burger{display:none}
}
.nav-panel{position:fixed;inset:var(--nav-h) 0 0;z-index:55;background:var(--bg);
  padding:26px var(--gutter) 40px;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s}
.nav-panel.is-open{opacity:1;visibility:visible;transform:none}
.nav-panel a:not(.btn){display:flex;align-items:center;justify-content:space-between;
  padding:16px 0;border-bottom:1px solid var(--rule-soft);
  font-family:var(--ui);font-size:22px;font-weight:600;color:var(--fg);letter-spacing:-.03em}
.nav-panel a:not(.btn) span{font-family:var(--mono);font-size:11px;color:var(--fg-mute)}
.nav-panel .btn{margin-top:26px}
@media(min-width:1180px){.nav-panel{display:none}}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);
  color:var(--on-accent);padding:12px 18px;font-weight:600}
.skip:focus{left:12px;top:12px}

/* ---- 8. Hero ------------------------------------------------------------ */
/* The hero, the CTA and the footer stay on midnight so the sunrise still reads;
   everything between them is paper. */
.hero{position:relative;overflow:hidden;min-height:min(90vh,820px);display:flex;align-items:flex-end;
  background:var(--bg)}
.hero>.wrap{position:relative;z-index:3;width:100%;
  padding-top:clamp(72px,10vh,124px);padding-bottom:clamp(84px,11vh,132px)}
.hero h1{margin:22px 0 28px}
.hero .lede{max-width:56ch}
.hero .btn-row{margin-top:36px}

/* interior page hero: the same light, held back */
.phero{position:relative;overflow:hidden;background:var(--bg-2);
  border-bottom:1px solid var(--rule-soft);
  padding-top:clamp(52px,6vw,86px);padding-bottom:clamp(40px,4.6vw,64px)}
.phero>.wrap{position:relative;z-index:3}
.phero h1{margin:20px 0 24px}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-mute)}
.crumb a{display:inline-block;min-height:24px;padding-block:5px}
.crumb a:hover{color:var(--accent)}
.crumb i{font-style:normal;opacity:.5}

.engines-seen{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.engines-seen li{font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;padding:6px 11px;border:1px solid rgba(229,140,78,.42);
  color:var(--accent)}
.engines-seen li span{color:var(--fg-mute)}

.hero-loc{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:40px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-mute)}
.hero-loc b{color:var(--fg-soft);font-weight:400}
.hero-loc i{width:3px;height:3px;border-radius:50%;background:var(--accent);font-style:normal;flex:none}
.hero-grid{display:grid;gap:0}

/* ---- 9. Ticker ---------------------------------------------------------- */
.ticker{border-block:1px solid var(--rule-soft);overflow:hidden;background:var(--bg-2)}
.ticker-in{display:flex;gap:52px;padding:16px 0;white-space:nowrap;width:max-content;
  animation:scd-slide 46s linear infinite;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-mute)}
.ticker-in b{color:var(--accent);font-weight:500}
@keyframes scd-slide{to{transform:translateX(-50%)}}

/* ---- 10. Proof strip & stats -------------------------------------------- */
.proofs{display:flex;flex-wrap:wrap;gap:10px 36px;margin-top:clamp(38px,4.4vw,54px);
  padding-top:22px;border-top:1px solid var(--rule-soft)}
.proofs li{display:flex;align-items:baseline;gap:9px;font-size:13.5px;color:var(--fg-soft)}
.proofs b{font-family:var(--ui);font-size:16px;font-weight:700;color:var(--accent);
  letter-spacing:-.035em;font-variant-numeric:tabular-nums}

.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--rule)}
@media(min-width:860px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{padding:28px 26px 32px 0;border-bottom:1px solid var(--rule)}
.stat+.stat{border-left:1px solid var(--rule);padding-left:26px}
@media(max-width:859px){.stat:nth-child(odd){border-left:0;padding-left:0}}
.stat-n{font-family:var(--display);font-weight:400;color:var(--fg);
  font-size:clamp(38px,4.4vw,56px);letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums;margin-bottom:12px}
.stat-n em{font-style:normal;color:var(--accent)}
.stat p{font-size:13.5px;line-height:1.5;max-width:24ch}
.stat cite{display:block;margin-top:9px;font-family:var(--mono);font-size:9.5px;
  font-style:normal;letter-spacing:.1em;color:var(--fg-mute)}

/* ---- 11. Framed browser window (the only place client work appears) ------ */
.browser{display:block;border:1px solid var(--rule);background:var(--bg-2);overflow:hidden;
  box-shadow:0 30px 70px -40px rgba(6,8,14,.45);
  transition:border-color .28s var(--ease),transform .4s var(--ease)}
.browser:hover{border-color:rgba(229,140,78,.42)}
.browser-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;
  border-bottom:1px solid var(--rule-soft)}
.browser-dot{width:8px;height:8px;border-radius:50%;background:var(--rule-strong);flex:none}
.browser-url{margin-left:10px;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;color:var(--fg-mute);overflow:hidden;text-overflow:ellipsis}
.browser img{width:100%;display:block}
/* the frame is a window onto the full page; hovering scrolls the real site
   through it, so four screenshots stop being four dead rectangles */
.browser-view{display:block;overflow:hidden;aspect-ratio:1200 / 630;background:var(--bg-2)}
.browser-view img{width:100%;height:auto;display:block;
  transition:transform 3.4s cubic-bezier(.25,.62,.25,1)}
.browser:hover .browser-view img,
.work-tile:hover .browser-view img{transform:translateY(var(--scroll,-70%))}
@media(prefers-reduced-motion:reduce){
  .browser-view img{transition:none}
  .browser:hover .browser-view img,
  .work-tile:hover .browser-view img{transform:none}
}
/* a typographic stand-in where no screenshot exists, never a borrowed image */
.browser-blank{aspect-ratio:16/10;display:grid;place-content:center;gap:10px;text-align:center;
  padding:30px;background:linear-gradient(180deg,rgba(12,35,62,.34),rgba(6,8,14,.6))}
.browser-blank b{font-family:var(--ui);font-size:22px;font-weight:700;
  color:var(--fg);letter-spacing:-.03em}
.browser-blank span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-mute)}

/* ---- 12. Hairline matrix ------------------------------------------------ */
.matrix{display:grid;gap:0;border:1px solid var(--rule)}
@media(min-width:760px){.matrix-2,.matrix-3,.matrix-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1040px){.matrix-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .matrix-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cell{position:relative;padding:32px 30px 36px;
  border-top:1px solid var(--rule);margin-top:-1px;
  border-left:1px solid var(--rule);margin-left:-1px;
  transition:background .28s var(--ease)}
.cell::after{content:'';position:absolute;left:-1px;right:-1px;top:-1px;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .38s var(--ease)}
.cell:hover{background:var(--raised)}
.cell:hover::after{transform:scaleX(1)}
.cell-n{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--accent);margin-bottom:16px}
.cell h3{font-family:var(--ui);font-size:20px;font-weight:600;color:var(--fg);
  letter-spacing:-.028em;line-height:1.2;margin-bottom:10px}
.cell p{font-size:14.5px;line-height:1.6}
a.cell{display:block}
a.cell .tlink{margin-top:18px}

/* Two shelves side by side */
.also-pair{display:grid;gap:20px}
@media(min-width:1000px){.also-pair{grid-template-columns:repeat(2,minmax(0,1fr))}}
.also-pair .also{align-content:start}
/* The NVIDIA card is a credential, so it gets room rather than a sidebar slot. */
.nvidia-badge{width:100%;border:1px solid var(--rule);
  box-shadow:0 30px 66px -38px rgba(6,8,14,.5)}
.nvidia .split{align-items:center}
@media(min-width:1000px){.also-pair .also{grid-template-columns:minmax(0,1fr)}}

/* Included-with-every-plan, as one compact row */
.incl{display:grid;gap:12px}
@media(min-width:860px){.incl{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 40px}}
@media(min-width:1200px){.incl{grid-template-columns:repeat(4,minmax(0,1fr))}}
.incl li{font-size:14.5px;line-height:1.5;padding-top:14px;border-top:1px solid var(--rule)}
.incl b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:7px;font-weight:500}

/* Compact three-up proof strip of live client sites */
.work-strip{display:grid;gap:26px}
@media(min-width:820px){.work-strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
.work-tile{display:block}
.work-tile .browser{display:block}
.work-tile img{aspect-ratio:16/10;object-fit:cover;object-position:center top}
/* the scrolling frame supplies its own window, so the full-page capture inside
   it must keep its real height instead of being cropped to the tile ratio */
.work-tile .browser-view img{aspect-ratio:auto;object-fit:fill;height:auto}
.work-tile b{display:block;margin-top:16px;font-family:var(--ui);font-size:17px;
  font-weight:700;letter-spacing:-.03em;color:var(--fg)}
.work-tile .work-tile-meta{display:block;margin-top:5px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute)}
.work-tile:hover b{color:var(--accent)}

/* ---- 12b. Service cards ------------------------------------------------- */
.cell-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}
.cell-top .cell-n{margin-bottom:0}
.svc-icon{flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:9px;
  border:1px solid var(--rule);background:var(--raised-2);color:var(--accent);
  transition:border-color .28s var(--ease),background .28s var(--ease)}
.svc-icon svg{width:18px;height:18px;display:block}
.cell:hover .svc-icon{border-color:rgba(229,140,78,.5);background:rgba(229,140,78,.10)}
.cell-lg{padding:34px 30px 34px;display:flex;flex-direction:column}
.cell-lg h3{font-size:21px;margin-bottom:12px}
.cell-lg p{font-size:15px;line-height:1.62}
.cell-lg .chips{margin-top:auto;padding-top:20px}
.cell-lg .tlink{margin-top:20px;align-self:flex-start}

/* A quieter shelf for services we still sell but no longer lead with. */
.also{display:grid;gap:20px;padding:26px 28px;border:1px solid var(--rule-soft);
  background:var(--raised);align-items:center}
@media(min-width:860px){.also{grid-template-columns:minmax(0,1fr) auto;gap:40px}}
.also h3{color:var(--fg)}
.also p{max-width:64ch}

/* ---- 13. Numbered rows -------------------------------------------------- */
.rows{border-top:1px solid var(--rule)}
.row{display:grid;gap:14px 44px;padding:32px 0;border-bottom:1px solid var(--rule);
  position:relative;transition:background .3s var(--ease),padding-left .3s var(--ease)}
@media(min-width:920px){
  .row{grid-template-columns:74px minmax(0,4fr) minmax(0,6fr);align-items:start}
  .row:hover{padding-left:14px}
}
.row:hover{background:var(--raised)}
.row-n{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--fg-mute);
  padding-top:6px;transition:color .28s var(--ease)}
.row:hover .row-n{color:var(--accent)}
.row h3{font-family:var(--ui);font-size:clamp(22px,2.3vw,30px);font-weight:700;
  color:var(--fg);letter-spacing:-.038em;line-height:1.08}
.row-body p{font-size:15.5px;line-height:1.62}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}
.chip{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 10px;border:1px solid var(--rule);color:var(--fg-mute);
  transition:border-color .24s var(--ease),color .24s var(--ease)}
.row:hover .chip{border-color:var(--rule-strong);color:var(--fg-soft)}

/* ---- 14. Lists ---------------------------------------------------------- */
.checks{display:grid;gap:13px}
.checks li{display:flex;gap:13px;font-size:15.5px;line-height:1.5}
.checks li::before{content:'';flex:none;width:16px;height:16px;margin-top:3px;
  border:1px solid rgba(229,140,78,.45);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.3 2.3 4.7-5' fill='none' stroke='%23E58C4E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/11px}
.checks-tight li{font-size:14.5px}
.dots{display:grid;gap:11px}
.dots li{display:flex;gap:12px;font-size:14.5px;line-height:1.55}
.dots li::before{content:'';flex:none;width:5px;height:5px;background:var(--accent);margin-top:9px}

/* ---- 15. Pricing -------------------------------------------------------- */
.tier-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px;margin-bottom:22px}
.plans{display:grid;gap:0;border:1px solid var(--rule)}
@media(min-width:900px){.plans-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .plans-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.plan{position:relative;display:flex;flex-direction:column;padding:36px 30px 32px;
  border-top:1px solid var(--rule);margin-top:-1px;
  border-left:1px solid var(--rule);margin-left:-1px;transition:background .28s var(--ease)}
.plan:hover{background:var(--raised)}
.plan-featured{background:var(--raised-2)}
.plan-featured::before{content:'';position:absolute;left:-1px;right:-1px;top:-1px;height:3px;background:var(--ramp)}
.plan-flag{position:absolute;top:0;right:24px;transform:translateY(-50%);
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  background:var(--accent);color:var(--on-accent);padding:4px 10px;font-weight:500}
.plan h3{font-family:var(--ui);font-size:21px;font-weight:700;color:var(--fg);
  letter-spacing:-.03em;margin-bottom:16px}
.plan-price{font-family:var(--display);font-size:clamp(40px,4vw,52px);font-weight:400;
  color:var(--fg);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.plan-per{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-mute);margin-top:10px}
.plan-desc{font-size:14.5px;line-height:1.6;margin:20px 0 22px;padding-top:20px;
  border-top:1px solid var(--rule-soft)}
.plan .checks{margin-bottom:26px}
.plan-best{margin-top:auto;padding-top:20px;border-top:1px solid var(--rule-soft);margin-bottom:18px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute)}
.plan-best b{display:block;margin-top:7px;color:var(--fg-soft);font-weight:400;
  letter-spacing:.02em;text-transform:none;font-size:12.5px}

/* ---- 16. Steps ---------------------------------------------------------- */
.steps{display:grid;gap:0;border-top:1px solid var(--rule)}
@media(min-width:900px){.steps-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .steps-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.step{padding:30px 26px 34px 0;border-bottom:1px solid var(--rule);position:relative}
@media(min-width:900px){.step{border-bottom:0;padding-right:34px}
  .step+.step{border-left:1px solid var(--rule);padding-left:26px}}
.step-n{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:18px}
.step h3{font-family:var(--ui);font-size:20px;font-weight:700;color:var(--fg);
  letter-spacing:-.03em;line-height:1.16;margin-bottom:10px}
.step p{font-size:14.5px;line-height:1.6}

/* ---- 17. Quotes --------------------------------------------------------- */
.quotes{display:grid;gap:0;border:1px solid var(--rule)}
@media(min-width:880px){.quotes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1040px){.quotes.quotes-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.quote{padding:36px 32px 30px;border-top:1px solid var(--rule);margin-top:-1px;
  border-left:1px solid var(--rule);margin-left:-1px;display:flex;flex-direction:column}
.quote-stars{display:flex;gap:3px;margin-bottom:20px}
.quote-stars svg{width:14px;height:14px;fill:var(--accent)}
.quote blockquote{font-family:var(--display);font-size:clamp(20px,2vw,26px);font-weight:400;
  line-height:1.34;color:var(--fg);letter-spacing:-.012em;margin-bottom:26px}
.quote figcaption{display:flex;align-items:center;gap:12px;margin-top:auto;
  padding-top:22px;border-top:1px solid var(--rule-soft)}
.avatar{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1px solid var(--rule-strong);background:var(--raised-2);
  font-family:var(--mono);font-size:10.5px;color:var(--fg-soft)}
.quote figcaption b{display:block;font-family:var(--ui);font-size:15px;
  font-weight:600;color:var(--fg);letter-spacing:-.02em}
.quote figcaption span span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-mute)}
.rating{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:24px 0;
  border-block:1px solid var(--rule);margin-bottom:38px}
.rating-n{font-family:var(--display);font-size:54px;font-weight:400;color:var(--fg);
  letter-spacing:-.02em;line-height:1}
.rating p{font-size:13.5px;line-height:1.5}

/* ---- 18. Split ---------------------------------------------------------- */
.split{display:grid;gap:46px}
@media(min-width:960px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
  .split-wide{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
  .split-rev>*:first-child{order:2}
}

/* ---- 19. Pulse panel ---------------------------------------------------- */
.panel{border:1px solid var(--rule);background:var(--raised);
  overflow:hidden;position:relative}
.panel::before{content:'';position:absolute;inset:0 0 auto;height:1px;background:var(--ramp);opacity:.9}
.panel-bar{display:flex;align-items:center;gap:10px;padding:13px 16px;
  border-bottom:1px solid var(--rule-soft);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-mute)}
.panel-dot{width:7px;height:7px;border-radius:50%;background:var(--rule-strong);flex:none}
.panel-dot.on{background:var(--accent)}
.panel-tag{margin-left:auto;padding:3px 8px;border:1px solid var(--rule);
  font-size:9px;letter-spacing:.16em;color:var(--fg-mute)}
.panel-body{padding:24px 22px 26px}
.panel-note{padding:13px 22px 17px;font-family:var(--mono);font-size:9.5px;line-height:1.7;
  letter-spacing:.04em;color:var(--fg-mute);border-top:1px solid var(--rule-soft)}
.gauge{display:flex;align-items:center;gap:22px;margin-bottom:24px}
.gauge-ring{position:relative;width:96px;height:96px;flex:none}
.gauge-ring svg{transform:rotate(-90deg)}
.gauge-ring circle{fill:none;stroke-width:5}
.gauge-track{stroke:var(--rule)}
.gauge-val{stroke:var(--accent);stroke-linecap:round}
.gauge-num{position:absolute;inset:0;display:grid;place-content:center;text-align:center;
  font-family:var(--display);font-weight:400;color:var(--fg)}
.gauge-num b{display:block;font-size:30px;letter-spacing:-.02em;line-height:1}
.gauge-num span{font-family:var(--mono);font-size:8px;letter-spacing:.18em;
  color:var(--fg-mute);font-weight:400}
.bars{display:grid;gap:11px;flex:1;min-width:0}
.bar{display:grid;grid-template-columns:80px 1fr;align-items:center;gap:12px}
.bar span{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--fg-soft)}
.bar i{display:block;height:3px;background:var(--rule);position:relative;overflow:hidden}
.bar i::after{content:'';position:absolute;inset:0 auto 0 0;width:var(--w,60%);background:var(--accent)}
.spark{margin-top:6px;padding-top:18px;border-top:1px solid var(--rule-soft)}
.spark-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.spark-top span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-mute)}
.spark-top b{font-family:var(--ui);font-size:19px;font-weight:700;
  color:var(--accent);letter-spacing:-.04em}
.spark svg{width:100%;height:44px;overflow:visible}

/* ---- 20. Accordion ------------------------------------------------------ */
.acc{border-top:1px solid var(--rule)}
.acc details{border-bottom:1px solid var(--rule)}
.acc summary{display:flex;align-items:flex-start;gap:18px;padding:24px 0;cursor:pointer;
  list-style:none;font-family:var(--ui);font-size:clamp(16.5px,1.6vw,19.5px);
  font-weight:600;color:var(--fg);letter-spacing:-.028em;line-height:1.32;
  transition:color .2s var(--ease)}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--accent)}
.acc-icon{margin-left:auto;flex:none;width:18px;height:18px;position:relative;margin-top:4px}
.acc-icon::before,.acc-icon::after{content:'';position:absolute;background:var(--accent);
  transition:transform .3s var(--ease),opacity .3s var(--ease)}
.acc-icon::before{left:0;right:0;top:8px;height:1.5px}
.acc-icon::after{top:0;bottom:0;left:8px;width:1.5px}
.acc details[open] .acc-icon::after{transform:rotate(90deg);opacity:0}
.acc-body{padding:0 44px 28px 0;font-size:15.5px;line-height:1.66}
.acc-body p+p{margin-top:.95em}
@media(min-width:760px){.acc-body{padding-right:140px}}

/* ---- 21. Work cards & figures ------------------------------------------- */
.work-card{display:block;position:relative;padding:36px 32px 34px;
  border-top:1px solid var(--rule);margin-top:-1px;
  border-left:1px solid var(--rule);margin-left:-1px;transition:background .28s var(--ease)}
.work-card:hover{background:var(--raised)}
.work-card::after{content:'';position:absolute;left:-1px;right:-1px;top:-1px;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.work-card:hover::after{transform:scaleX(1)}
.work-meta{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-mute);margin-bottom:16px}
.work-card h3{font-family:var(--ui);font-size:22px;font-weight:700;color:var(--fg);
  letter-spacing:-.035em;margin-bottom:9px}
.work-card .work-line{font-size:15.5px;line-height:1.5;margin-bottom:22px}

.figures{display:grid;gap:0;border:1px solid var(--rule);margin:34px 0}
@media(min-width:700px){.figures{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1040px){.figures{grid-template-columns:repeat(4,minmax(0,1fr))}}
.figure{padding:28px 26px 30px;border-top:1px solid var(--rule);margin-top:-1px;
  border-left:1px solid var(--rule);margin-left:-1px}
.figure b{display:block;font-family:var(--display);font-size:clamp(30px,3vw,40px);
  font-weight:400;color:var(--fg);letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums;margin-bottom:11px}
.figure span{font-size:13.5px;line-height:1.5}

.note{border-left:2px solid rgba(229,140,78,.45);padding:2px 0 2px 20px;margin:30px 0;
  font-size:14.5px;line-height:1.65}
.note b{color:var(--fg);font-weight:600}
.source{font-family:var(--mono);font-size:10.5px;line-height:1.8;color:var(--fg-mute);margin-top:22px}

/* ---- 22. Forms ---------------------------------------------------------- */
.field{display:grid;gap:8px;margin-bottom:18px}
.field label{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-mute)}
.field label em{color:var(--accent);font-style:normal}
.field input,.field select,.field textarea{width:100%;padding:14px 15px;
  background:var(--bg);border:1px solid var(--rule);color:var(--fg);
  font-size:15px;font-family:var(--body);
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.field textarea{min-height:120px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-mute)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent)}
.field input:focus:not(:focus-visible),.field select:focus:not(:focus-visible),
.field textarea:focus:not(:focus-visible){outline:none}
.field-err{display:none;font-size:12.5px;color:var(--err);margin-top:2px}
.field-hint{font-size:12.5px;line-height:1.5;color:var(--fg-soft);margin-top:2px}
.field :user-invalid~.field-err{display:block}
.field :user-invalid{border-color:var(--err)}
.field-2{display:grid;gap:18px}
@media(min-width:640px){.field-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.form-note{font-size:12.5px;line-height:1.6;color:var(--fg-mute);margin-top:14px}
.form-note a{color:var(--accent-link);border-bottom:1px solid rgba(107,143,199,.35)}
.form-alert{border:1px solid var(--rule);border-left:2px solid var(--accent);
  padding:14px 16px;margin-bottom:20px;font-size:13.5px;line-height:1.6;color:var(--fg-soft)}
.form-alert a{color:var(--accent-link);border-bottom:1px solid rgba(107,143,199,.35)}
.form-card{border:1px solid var(--rule);background:var(--raised);padding:clamp(26px,3.4vw,40px)}
.inline-form{display:flex;flex-wrap:wrap;gap:10px;max-width:500px}
.inline-form input{flex:1 1 220px;padding:14px 15px;background:var(--bg);
  border:1px solid var(--rule);color:var(--fg);font-size:15px}
/* Cloudflare Turnstile. appearance="interaction-only" renders nothing at all
   unless a challenge is actually required, so this box must collapse to zero
   height rather than reserve space for a widget that is usually invisible. */
.ts-box{display:flex;justify-content:flex-start}
.ts-box:not(:empty){margin-bottom:18px}
.ts-box iframe{max-width:100%}
.inline-form .ts-box{flex-basis:100%}

.inline-form input:focus{border-color:var(--accent)}
.inline-form input:focus:not(:focus-visible){outline:none}

/* ---- 23. Contact cards, tags, TOC, defs --------------------------------- */
.contacts{display:grid;gap:0;border:1px solid var(--rule)}
@media(min-width:640px){.contacts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.contact{padding:26px 28px 28px;border-top:1px solid var(--rule);margin-top:-1px;
  border-left:1px solid var(--rule);margin-left:-1px}
.contact span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-mute);margin-bottom:11px}
.contact b{font-family:var(--ui);font-size:17.5px;font-weight:600;
  color:var(--fg);letter-spacing:-.028em;line-height:1.3}
.contact a{display:inline-flex;align-items:center;min-height:24px;padding-block:2px;
  font-family:var(--ui);font-size:17.5px;font-weight:600;
  color:var(--fg);letter-spacing:-.028em;line-height:1.3}
.contact a:hover{color:var(--accent)}
.contact p{font-size:14px;margin-top:6px}

.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  padding:8px 13px;border:1px solid var(--rule);color:var(--fg-soft);
  transition:border-color .22s var(--ease),color .22s var(--ease)}
a.tag:hover{border-color:var(--accent);color:var(--accent)}

.toc{border:1px solid var(--rule);padding:24px 26px;background:var(--raised)}
.toc span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-mute);margin-bottom:15px}
.toc li+li{margin-top:10px}
.toc a{display:flex;gap:12px;min-height:24px;padding-block:2px;font-size:14.5px;
  color:var(--fg-soft);transition:color .2s var(--ease)}
.toc a b{font-family:var(--mono);font-size:10.5px;color:var(--accent);font-weight:500;flex:none}
.toc a:hover{color:var(--fg)}

.defs{display:grid;gap:0;border-top:1px solid var(--rule)}
.def{padding:30px 0;border-bottom:1px solid var(--rule)}
@media(min-width:900px){.def{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:44px}}
.def h3{font-family:var(--ui);font-size:20px;font-weight:700;color:var(--fg);
  letter-spacing:-.032em;line-height:1.22}
.def-body p{font-size:15px;line-height:1.65}
.def-body p+p{margin-top:.9em;color:var(--fg-mute)}

/* ---- 24. Long-form legal ------------------------------------------------ */
.legal h2{font-family:var(--ui);font-size:clamp(22px,2.2vw,30px);font-weight:700;
  color:var(--fg);letter-spacing:-.042em;margin:48px 0 15px}
.legal h2:first-child{margin-top:0}
.legal h3{font-family:var(--ui);font-size:17.5px;font-weight:600;color:var(--fg);
  letter-spacing:-.028em;margin:26px 0 10px}
.legal p{font-size:15.5px;line-height:1.72;margin-bottom:1em;max-width:74ch}
.legal ul{margin:0 0 1.1em;display:grid;gap:10px}
.legal li{display:flex;gap:13px;font-size:15.5px;line-height:1.65;max-width:72ch}
.legal li::before{content:'';flex:none;width:5px;height:5px;background:var(--accent);margin-top:10px}
.legal a{color:var(--accent-link);border-bottom:1px solid rgba(107,143,199,.35)}
.legal code{font-family:var(--mono);font-size:.9em;color:var(--fg)}

/* ---- 25. Badge card ----------------------------------------------------- */
.badge-card{border:1px solid var(--rule);overflow:hidden;background:var(--raised)}
.badge-card img{width:100%;display:block}
.badge-card p{padding:16px 20px 18px;font-family:var(--mono);font-size:10px;
  line-height:1.72;letter-spacing:.03em;color:var(--fg-mute);border-top:1px solid var(--rule-soft)}

/* ---- 25c. Founder portrait ---------------------------------------------
   Same card treatment as every other framed asset on the site: a hairline
   border, the raised surface, and a mono caption strip under the image. */
.founder-shot{
  border:1px solid var(--rule);background:var(--raised);overflow:hidden;
  max-width:340px;
}
.founder-shot img{width:100%;height:auto;display:block}
.founder-shot figcaption{
  padding:14px 18px 16px;border-top:1px solid var(--rule-soft);
}
.founder-shot figcaption b{
  display:block;font-family:var(--ui);font-size:15px;font-weight:600;
  color:var(--fg);letter-spacing:-.02em;
}
.founder-shot figcaption span{
  display:block;margin-top:4px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-mute);
}
/* the founder avatar carries a photo rather than initials */
.avatar-photo{overflow:hidden;padding:0}
.avatar-photo img,.avatar-photo picture{width:100%;height:100%;display:block;object-fit:cover}

/* ---- 25d. Before and after ---------------------------------------------
   Two captures of the same page, same size, shown whole. The range input is the
   real control: it is a native slider, so it works with a mouse, a finger, a
   keyboard and a screen reader. The handle is decoration drawn on top of it. */
.ba{border:1px solid var(--rule);background:var(--raised);overflow:hidden}
.ba-stage{position:relative;aspect-ratio:1200 / 900;overflow:hidden;
  background:var(--bg-2);touch-action:pan-y}
.ba-img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
/* the "before" sits on top and is revealed from the left */
.ba-clip{position:absolute;inset:0;overflow:hidden;
  width:calc(var(--ba, 50) * 1%);will-change:width}
.ba-clip .ba-img{width:100cqw}
.ba-stage{container-type:inline-size}

.ba-tag{position:absolute;bottom:14px;z-index:3;pointer-events:none;
  padding:6px 11px;border:1px solid rgba(244,247,251,.22);
  background:rgba(6,8,14,.72);backdrop-filter:blur(3px);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#EAF0F8}
.ba-tag-l{left:14px}
.ba-tag-r{right:14px}

/* the divider */
.ba-handle{position:absolute;top:0;bottom:0;z-index:4;pointer-events:none;
  left:calc(var(--ba, 50) * 1%);width:2px;margin-left:-1px;background:var(--ramp)}
.ba-handle i{position:absolute;top:50%;left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;
  border-radius:50%;border:1px solid rgba(244,247,251,.38);background:rgba(6,8,14,.78);
  backdrop-filter:blur(3px);display:block}
.ba-handle i::before,.ba-handle i::after{content:'';position:absolute;top:50%;
  width:0;height:0;border-block:5px solid transparent;margin-top:-5px}
.ba-handle i::before{left:11px;border-right:6px solid #EAF0F8}
.ba-handle i::after{right:11px;border-left:6px solid #EAF0F8}

/* the native slider, stretched over the whole stage and made invisible */
.ba-range{position:absolute;inset:0;z-index:5;width:100%;height:100%;margin:0;
  -webkit-appearance:none;appearance:none;background:transparent;cursor:ew-resize}
.ba-range::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:100%;
  background:transparent;cursor:ew-resize}
.ba-range::-moz-range-thumb{width:44px;height:100vh;border:0;background:transparent;
  cursor:ew-resize}
.ba-range::-moz-range-track{background:transparent}
.ba-range:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

.ba figcaption{padding:16px 20px 18px;border-top:1px solid var(--rule-soft);
  font-family:var(--mono);font-size:10px;line-height:1.72;letter-spacing:.03em;
  color:var(--fg-mute)}

/* without JS the slider still works: the clip sits at its authored 50% */
@media(max-width:560px){
  .ba-tag{font-size:8.5px;padding:5px 9px;bottom:10px}
  .ba-tag-l{left:10px}.ba-tag-r{right:10px}
  .ba-handle i{width:34px;height:34px;margin:-17px 0 0 -17px}
}

/* ---- 25e. Solo section --------------------------------------------------
   One section on the homepage deliberately breaks the eyebrow / split / grid
   rhythm the other five share: centred, no label, no two-column split, and a
   wider figure. Scoped to .section-solo so no other page is touched. */
.section-solo{text-align:center}
.section-solo .solo-lead{margin-inline:auto}
.section-solo h2{max-width:18ch;margin-inline:auto}
.section-solo .lede{max-width:56ch;margin-inline:auto}
.section-solo .solo-figure{max-width:820px;margin-inline:auto}
.section-solo .solo-figure img{width:100%;height:auto;display:block}
.section-solo .tiny{max-width:52ch}
@media(max-width:760px){
  .section-solo h2{max-width:none}
}

/* ---- 26. CTA band ------------------------------------------------------- */
.cta{position:relative;background:var(--bg);overflow:hidden}
.cta::before{content:'';position:absolute;inset:0 0 auto;height:2px;background:var(--ramp)}
.cta::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(820px 460px at 14% 122%,
    color-mix(in srgb,var(--rust-glow) 92%, transparent), transparent 66%)}
.cta .wrap{position:relative;z-index:1}
.cta-grid{display:grid;gap:34px}
@media(min-width:900px){.cta-grid{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:56px}}

/* ---- 27. Footer --------------------------------------------------------- */
.foot{background:var(--bg);position:relative}
.foot::before{content:'';position:absolute;inset:0 0 auto;height:1px;background:var(--ramp);opacity:.45}
.foot-top{padding-block:clamp(56px,6vw,80px)}
.foot-grid{display:grid;gap:44px}
@media(min-width:900px){.foot-grid{grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2.4fr));gap:48px}}
.foot-about p{font-size:14.5px;line-height:1.65;max-width:40ch;margin:18px 0 22px}
.foot h2{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg-mute);margin-bottom:18px;font-weight:500}
.foot-links li+li{margin-top:10px}
.foot-links a{display:inline-block;min-height:24px;padding-block:2px;
  font-size:14.5px;color:var(--fg-soft);transition:color .2s var(--ease)}
.foot-links a:hover{color:var(--accent)}
.foot-cities{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:var(--mono);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-mute)}
.foot-cities a{display:inline-block;min-height:24px;padding-block:4px}
.foot-cities a:hover{color:var(--accent)}
.foot-map{padding-block:34px;border-top:1px solid var(--rule-soft)}
.foot-map-grid{display:grid;gap:32px 40px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:760px){.foot-map-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1040px){.foot-map-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.foot-map>h2{margin-bottom:24px}
.foot-map .foot-links a{font-size:13.5px}
.foot-related{padding-block:26px;border-top:1px solid var(--rule-soft)}
.foot-related-links{display:flex;flex-wrap:wrap;gap:10px 26px}
.foot-related-links a{display:inline-block;min-height:24px;padding-block:3px;
  font-size:13.5px;color:var(--accent-link);transition:color .2s var(--ease)}
.foot-related-links a:hover{color:var(--accent)}
.foot-bottom{padding-block:26px;border-top:1px solid var(--rule-soft);
  display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center}
.foot-bottom p{font-size:12.5px;color:var(--fg-mute)}
.foot-bottom a{display:inline-block;min-height:24px;padding-block:4px;font-size:12.5px;color:var(--fg-mute)}
.foot-bottom a:hover{color:var(--accent)}
.foot-legal{padding-block:30px 46px;border-top:1px solid var(--rule-soft)}
.foot-legal p{font-size:12px;line-height:1.8;color:var(--fg-mute)}
.foot-legal p+p{margin-top:12px}
.foot-legal a{color:var(--fg-soft);border-bottom:1px solid rgba(143,157,179,.4)}
.foot-legal a:hover{color:var(--accent)}

/* ---- 27b. Opening curtain ----------------------------------------------
   Three beats, in order.
     1. 0.00s to 1.10s  A sunrise over the coast: the sun climbs out of the sea,
                        the horizon runs out to the full width, light scatters
                        on the water.
     2. 1.10s to 2.18s  The sunrise clears and the mark and full name take the
                        screen on their own.
     3. 2.18s to 2.76s  The sea and sky part and the site is behind them.
   First visit of a session only, motion permitting, and it never exists without
   JS. The wrapper must stay transparent: its own surface background would sit
   over the page and the parting would reveal nothing. */
.curtain{display:none}
.scd-intro .curtain{
  display:block;position:fixed;inset:0;z-index:200;pointer-events:none;overflow:hidden;
  background:transparent;
}
.curtain-half{position:absolute;left:0;right:0;height:50.2%;background:var(--midnight);
  z-index:1;will-change:transform}
.curtain-top{top:0;animation:scd-part .58s cubic-bezier(.36,.82,.18,1) 2.18s forwards}
.curtain-bottom{bottom:0;animation:scd-part-b .58s cubic-bezier(.36,.82,.18,1) 2.18s forwards}
@keyframes scd-part{to{transform:translateY(-100%)}}
@keyframes scd-part-b{to{transform:translateY(100%)}}

.curtain-mark{
  position:absolute;inset:0;z-index:2;
  display:grid;place-content:center;justify-items:center;
  animation:scd-mark-out .24s var(--ease) 2.20s forwards;
}
@keyframes scd-mark-out{to{opacity:0}}
.curtain-stage{position:relative;display:block;width:min(860px,88vw)}

/* ---- beat one: the sunrise ---- */
.curtain-sunrise{display:block;animation:scd-scene-out .40s var(--ease) 1.10s forwards}
@keyframes scd-scene-out{to{opacity:0;transform:translateY(-12px)}}

.curtain-glow{
  position:absolute;left:50%;bottom:-40px;width:min(620px,110%);height:300px;
  transform:translateX(-50%);pointer-events:none;
  /* the last stop lands well inside the box, so no edge of the box is ever visible */
  background:radial-gradient(ellipse at 50% 74%,
    rgba(229,140,78,.30) 0%, rgba(226,146,110,.14) 14%, rgba(221,150,138,.06) 28%,
    rgba(229,140,78,.02) 42%, rgba(229,140,78,0) 56%);
  opacity:0;animation:scd-glow .66s var(--ease) .16s forwards;
}
@keyframes scd-glow{to{opacity:1}}

/* the sky clips the disc, so the sun genuinely rises out of the water */
.curtain-sky{position:relative;display:block;height:104px;overflow:hidden}
.curtain-sun{
  position:absolute;left:50%;bottom:0;width:92px;height:92px;margin-left:-46px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 42%,
    #FFF6EA 0%, #FFE0B4 24%, #F4AE70 56%, #E58C4E 84%, #D9814A 100%);
  box-shadow:0 0 40px rgba(229,140,78,.42);
  --sun:92px;--rest:14px;
  transform:translateY(var(--sun));
  animation:scd-rise .62s cubic-bezier(.22,.66,.28,1) .02s forwards;
}
@keyframes scd-rise{to{transform:translateY(var(--rest))}}

.curtain-horizon{position:relative;display:block;height:1px}
.curtain-rule{
  position:absolute;left:0;right:0;top:50%;height:1px;
  background:var(--ramp);opacity:.95;
  transform:scaleX(0);transform-origin:center;
  animation:scd-line .56s cubic-bezier(.22,.61,.36,1) .20s forwards;
}
@keyframes scd-line{to{transform:scaleX(1)}}

.curtain-water{position:relative;display:block;height:54px}
.curtain-water i{
  position:absolute;left:50%;top:var(--d);width:var(--w);height:1px;
  margin-left:calc(var(--w) / -2);
  background:linear-gradient(90deg,rgba(229,140,78,0),rgba(244,174,112,var(--o)),rgba(229,140,78,0));
  transform:scaleX(0);transform-origin:center;
  animation:scd-ripple .42s var(--ease) var(--t) forwards;
}
@keyframes scd-ripple{to{transform:scaleX(1)}}

/* ---- beat two: the mark and the name, alone on the screen ---- */
.curtain-brand{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:20px;
  opacity:0;animation:scd-brand-in .42s var(--ease) 1.24s forwards;
}
@keyframes scd-brand-in{to{opacity:1}}
.curtain-brand img{
  width:84px;height:84px;border-radius:19px;
  transform:scale(.82);
  animation:scd-brand-pop .52s cubic-bezier(.22,.7,.3,1) 1.24s forwards;
}
@keyframes scd-brand-pop{to{transform:scale(1)}}
.curtain-word{
  white-space:nowrap;
  font-family:var(--mono);font-size:14px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--fg);
  opacity:0;transform:translateY(4px);
  animation:scd-word .34s var(--ease) 1.42s forwards}
@keyframes scd-word{to{opacity:1;transform:translateY(0)}}

/* narrow screens: same three beats, scaled down */
@media(max-width:640px){
  .curtain-stage{width:min(860px,84vw)}
  .curtain-sky{height:80px}
  .curtain-sun{--sun:68px;--rest:10px;width:68px;height:68px;margin-left:-34px}
  .curtain-water{height:50px}
  .curtain-brand{gap:16px}
  .curtain-brand img{width:66px;height:66px;border-radius:15px}
  .curtain-word{font-size:10px;letter-spacing:.2em}
}
/* nothing about the intro may hold the page hostage */
@media(prefers-reduced-motion:reduce){.scd-intro .curtain{display:none}}

/* ---- 28. Reveal --------------------------------------------------------- */
.anim [data-reveal]{opacity:0;transform:translateY(14px)}
.anim .rv{transition:opacity .7s var(--ease),transform .7s var(--ease)}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .anim [data-reveal]{opacity:1;transform:none}
  .ticker-in{animation:none}
}

/* ---- 29. Utilities ------------------------------------------------------ */
.stack-sm{display:grid;gap:14px}
.stack{display:grid;gap:22px}
.stack-lg{display:grid;gap:36px}
.mt-s{margin-top:18px}.mt-m{margin-top:28px}.mt-l{margin-top:46px}
.sticky-rail{position:sticky;top:118px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Form states (live forms) */
.field.is-invalid .field-err{display:block}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:var(--err)}
.form-err{margin:14px 0 0;padding:10px 12px;border-left:3px solid var(--err);background:rgba(0,0,0,.18);font-size:13.5px;line-height:1.55;color:var(--fg)}
.form-err[hidden]{display:none}
button[aria-busy="true"]{opacity:.6;cursor:progress}
:root{--err:#FF9B8E}
.surface-light{--err:#B3261E}

/* Four client tiles on the homepage: 2x2 */
@media(min-width:820px){.work-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* hidden must beat component display rules (form rows after a successful send) */
[hidden]{display:none!important}

/* Miles reel showcase, added 19 September 2026. Covers are static stills that link out;
   no third-party script, no CSP change, nothing to break if a post is removed. */
.reel-h{font-family:var(--ui);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute);margin:44px 0 18px}
.reels{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))}
.reel{display:block;text-decoration:none;color:inherit;border:1px solid var(--rule);background:rgba(244,247,251,.02);transition:background .22s var(--ease)}
.reel:hover,.reel:focus-visible{background:rgba(244,247,251,.055)}
.reel-cv{display:block;position:relative;aspect-ratio:532/750;overflow:hidden;background:#000}
.reel-cv img{width:100%;height:100%;object-fit:cover;display:block}
.reel-m{display:block;padding:16px 18px 18px}
.reel-n{display:block;font-family:var(--display);font-size:30px;line-height:1}
.reel-l{display:block;font-size:13.5px;line-height:1.5;color:var(--fg-soft);margin-top:8px}
.reel-go{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--fg-mute);margin-top:12px}
@media(max-width:760px){
.reels{grid-auto-flow:column;grid-auto-columns:74%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
.reel{scroll-snap-align:start}
}