/* ============================================================================
   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.
   ------------------------------------------------------------------------ */
@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;transition:transform 1s var(--ease)}
.browser:hover img{transform:scale(1.02)}
/* 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}
.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))}}
.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 :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)}

/* ---- 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 h4{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>h4{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 ----------------------------------------------
   The brand's own horizon device: the mark sits on a hairline, the line runs
   out to full width, then the two halves part like a sunrise. First visit of a
   session only, motion permitting, and it never exists without JS. */
.curtain{display:none}
.scd-intro .curtain{
  display:block;position:fixed;inset:0;z-index:200;pointer-events:none;overflow:hidden;
}
.curtain-half{position:absolute;left:0;right:0;height:50%;background:var(--midnight);
  will-change:transform}
.curtain-top{top:0;animation:scd-part .78s cubic-bezier(.76,0,.24,1) 1.02s forwards}
.curtain-bottom{bottom:0;animation:scd-part-b .78s cubic-bezier(.76,0,.24,1) 1.02s forwards}
@keyframes scd-part{to{transform:translateY(-100%)}}
@keyframes scd-part-b{to{transform:translateY(100%)}}

.curtain-mark{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:20px;
  animation:scd-mark-out .34s var(--ease) .84s forwards;
}
@keyframes scd-mark-out{to{opacity:0;transform:translateY(-8px)}}
.curtain-mark img{
  width:64px;height:64px;border-radius:15px;
  opacity:0;transform:scale(.86);
  animation:scd-mark-in .62s cubic-bezier(.22,.61,.36,1) .06s forwards;
}
@keyframes scd-mark-in{to{opacity:1;transform:scale(1)}}
/* the horizon runs out from under the mark to the full width of the screen */
.curtain-line{
  position:absolute;left:0;right:0;top:50%;height:1px;margin-top:52px;
  transform:scaleX(0);transform-origin:center;
  background:var(--ramp);opacity:.9;
  animation:scd-line .82s cubic-bezier(.22,.61,.36,1) .30s forwards;
}
@keyframes scd-line{to{transform:scaleX(1)}}
.curtain-word{
  font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--fg-mute);opacity:0;animation:scd-word .5s var(--ease) .42s forwards}
@keyframes scd-word{to{opacity:1}}
/* 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}