/* ==========================================================================
   Gridstratos

   Achromatic by decision: ink #0B0D10, bone #FAF9F7, grey #6B7484, no hue
   anywhere. Depth therefore has to come from light rather than colour, so the
   whole surface system is built as if lit from above and slightly left:
   raised panels carry a highlight on their top edge and fall away below.
   ========================================================================== */

@font-face{
  font-family:"Switzer";
  src:url(../fonts/Switzer-Variable.woff2) format("woff2-variations");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* ---------- tokens ------------------------------------------------------ */
:root{
  --ink:#0B0D10;
  --bone:#FAF9F7;
  --grey:#6B7484;

  --bg:#0B0D10;
  --bg-deep:#07080A;
  --panel:#101318;
  --panel-hi:#151920;

  --fg:#FAF9F7;
  --fg-2:#A9AFBA;
  --fg-3:#7C8492;

  --line:rgba(250,249,247,.09);
  --field-line:#606673;          /* 3.3:1 on --field, for WCAG 1.4.11 */
  --line-2:rgba(250,249,247,.17);
  --edge:rgba(250,249,247,.07);       /* the lit top edge of a raised surface */
  --wash:rgba(250,249,247,.028);      /* the light falling on a surface */
  --field:#0D1015;

  --lift:0 24px 60px -34px rgba(0,0,0,.95);
  --lift-hi:0 34px 80px -34px rgba(0,0,0,1);

  --sans:"Switzer",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;

  --r-lg:16px;
  --r:11px;
  --r-sm:7px;

  --gutter:clamp(1.25rem,4vw,3rem);
  --max:78rem;
  --section:clamp(4.25rem,8vw,7.5rem);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  color-scheme:dark;
}

[data-theme="light"]{
  --bg:#FAF9F7;
  --bg-deep:#F1EFEC;
  --panel:#FFFFFF;
  --panel-hi:#FFFFFF;

  --fg:#0B0D10;
  --fg-2:#4C5462;
  --fg-3:#6B7484;

  --line:rgba(11,13,16,.11);
  --field-line:#848A97;          /* 3.5:1 on --field, for WCAG 1.4.11 */
  --line-2:rgba(11,13,16,.2);
  --edge:rgba(255,255,255,.9);
  --wash:rgba(11,13,16,.015);
  --field:#FFFFFF;

  --lift:0 18px 44px -30px rgba(11,13,16,.5);
  --lift-hi:0 26px 60px -30px rgba(11,13,16,.55);

  color-scheme:light;
}

/* ---------- reset ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:1.0625rem;
  font-weight:400;
  line-height:1.55;
  letter-spacing:-.006em;
  font-feature-settings:"ss01";
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
  overflow-x:hidden;
}
main{flex:1}

/* ---------- layout ------------------------------------------------------ */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);width:100%}
.wrap--wide{max-width:88rem}
.section{padding-block:var(--section)}
.section--half{padding-block:calc(var(--section) * .58)}
.grid{display:grid;gap:clamp(1rem,2vw,1.5rem)}
.grid>*{min-width:0}

/* ---------- type -------------------------------------------------------- */
h1,h2,h3,h4{font-weight:500;line-height:1.05;letter-spacing:-.032em;text-wrap:balance;margin:0}

.display{
  font-size:clamp(3rem,7.4vw,6rem);
  font-weight:500;
  letter-spacing:-.045em;
  line-height:.96;
}
h1{font-size:clamp(2.5rem,5.6vw,4.25rem);letter-spacing:-.04em}
h2{font-size:clamp(2rem,3.9vw,3.25rem);letter-spacing:-.038em}
h3{font-size:clamp(1.25rem,1.7vw,1.5rem);letter-spacing:-.024em;line-height:1.2}
h4{font-size:1.0625rem;letter-spacing:-.018em}
/* Correct heading level, previous visual weight. */
.h3{font-size:clamp(1.25rem,1.7vw,1.5rem);letter-spacing:-.024em;line-height:1.2}
.h4{font-size:1.0625rem;letter-spacing:-.018em}

p{max-width:62ch}
.lede{
  font-size:clamp(1.125rem,1.55vw,1.375rem);
  line-height:1.45;letter-spacing:-.014em;
  color:var(--fg-2);max-width:46ch;font-weight:400;
}
.muted{color:var(--fg-2)}
/* stacked prose paragraphs, scoped so grid-gap layouts are left alone */
.split__copy p+p,.entry p+p,.card p+p,.panel p+p,.page-head p+p,.feature__copy p+p{margin-top:1.1rem}
.small{font-size:.9375rem;line-height:1.5;color:var(--fg-2)}

/* Eyebrows are set in the text face, not a monospace: the mono version read as
   engineering documentation rather than as a company that sells to property. */
.eyebrow{
  display:inline-block;
  font-size:.75rem;font-weight:500;letter-spacing:.02em;
  color:var(--fg-3);
  padding:.4rem .7rem .42rem;
  border:1px solid var(--line);border-radius:999px;
  background:var(--wash);
}

a{color:inherit;text-decoration:none}
p a,li a{text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:.2em}
p a:hover,li a:hover{text-decoration-color:currentColor}

/* ---------- surfaces ---------------------------------------------------- */
.surface{
  position:relative;
  background:
    linear-gradient(180deg,var(--wash),transparent 42%),
    var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:0 1px 0 var(--edge) inset, var(--lift);
}

/* ---------- header ------------------------------------------------------ */
.masthead{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
          backdrop-filter:blur(22px) saturate(150%);
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease),background-color .35s var(--ease);
}
.masthead[data-scrolled="true"]{
  border-bottom-color:var(--line);
  background:color-mix(in srgb,var(--bg) 88%,transparent);
}
.masthead__inner{
  display:flex;align-items:center;gap:clamp(.75rem,3vw,2.5rem);
  height:4.75rem;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);
}
.brand{display:inline-flex;align-items:center;flex:none;padding-block:.5rem}
.wordmark{
  display:block;width:10.75rem;height:2.2rem;background:currentColor;
  -webkit-mask:url(../img/lockup.svg) left center/contain no-repeat;
          mask:url(../img/lockup.svg) left center/contain no-repeat;
}
@media (max-width:40em){.wordmark{width:8.75rem;height:1.8rem}}

.nav{display:flex;align-items:center;gap:.25rem;margin-left:auto}
.nav a{
  font-size:.9375rem;font-weight:450;color:var(--fg-2);
  padding:.65rem .85rem;border-radius:999px;
  transition:color .2s var(--ease),background-color .2s var(--ease);
}
.nav a:hover{color:var(--fg);background:var(--wash)}
.nav a[aria-current="page"]{color:var(--fg);background:var(--wash)}
@media (max-width:64em){.nav{display:none}}

.controls{display:flex;align-items:center;gap:.5rem;margin-left:auto}
@media (min-width:64em){.controls{margin-left:1.25rem}}
.controls .btn{padding:.65rem 1.1rem;font-size:.9rem}
@media (max-width:48em){.controls .btn--nav{display:none}}

.icon-btn{
  width:2.75rem;height:2.75rem;display:grid;place-items:center;
  background:var(--wash);border:1px solid var(--line);border-radius:999px;
  cursor:pointer;color:var(--fg-2);
  transition:border-color .2s var(--ease),color .2s var(--ease),background-color .2s var(--ease);
}
.icon-btn:hover{border-color:var(--line-2);color:var(--fg)}
.icon-btn svg{width:1rem;height:1rem}
.theme-toggle .sun{display:none}
[data-theme="light"] .theme-toggle .sun{display:block}
[data-theme="light"] .theme-toggle .moon{display:none}
.menu-btn{display:none}
@media (max-width:64em){.menu-btn{display:grid}}

.drawer{
  position:fixed;inset:4.75rem .75rem auto;z-index:59;
  background:color-mix(in srgb,var(--bg) 94%,transparent);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--lift-hi);
  display:grid;padding:.6rem;gap:.1rem;
  transform:translateY(-10px) scale(.99);opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .25s var(--ease),transform .25s var(--ease-out),visibility .25s;
}
.drawer[data-open="true"]{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.drawer a{font-size:1.0625rem;padding:.85rem 1rem;border-radius:var(--r-sm)}
.drawer a:hover{background:var(--wash)}
@media (min-width:64em){.drawer{display:none}}

/* ---------- buttons ----------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem 1.5rem;font-size:.9688rem;font-weight:500;letter-spacing:-.01em;
  border-radius:999px;border:1px solid transparent;cursor:pointer;
  background:var(--fg);color:var(--bg);
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease),opacity .2s var(--ease);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 12px 28px -14px rgba(0,0,0,.9)}
.btn:active{transform:translateY(0)}
.btn--ghost{
  background:var(--wash);color:var(--fg);border-color:var(--line-2);
  box-shadow:0 1px 0 var(--edge) inset;
}
.btn--ghost:hover{background:var(--panel-hi);border-color:var(--fg-3)}
.btn__arrow{width:.7rem;height:.7rem;flex:none;transition:transform .3s var(--ease-out)}
.btn:hover .btn__arrow{transform:translateX(3px)}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem}

.link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.9688rem;font-weight:500;color:var(--fg);
  padding-block:.625rem;
}
.link-arrow svg{width:.7rem;height:.7rem;transition:transform .3s var(--ease-out)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ---------- hero -------------------------------------------------------- */
.hero{
  position:relative;isolation:isolate;
  padding-block:clamp(5rem,13vw,10rem) clamp(4rem,9vw,7rem);
  overflow:hidden;
}
/* The light. A single soft source above and left, no hue in it. */
.hero::before{
  content:"";position:absolute;z-index:-2;
  top:-45vh;left:-10vw;width:90vw;height:110vh;
  background:radial-gradient(50% 50% at 50% 50%,rgba(250,249,247,.075),rgba(250,249,247,0) 68%);
  pointer-events:none;
}
[data-theme="light"] .hero::before{
  background:radial-gradient(50% 50% at 50% 50%,rgba(11,13,16,.05),rgba(11,13,16,0) 68%);
}

/* The signature: the mark as a heavy object sitting in that light, catching a
   rim on the edges facing the source. Not a watermark. It has mass. */
.hero__object{
  position:absolute;z-index:-1;pointer-events:none;
  right:-14vw;top:50%;translate:0 -50%;
  width:min(62vw,46rem);
  will-change:transform;
}
.hero__object .face{fill:#111519}
[data-theme="light"] .hero__object .face{fill:#EDEBE7}
.hero__object .rim{fill:none;stroke:rgba(250,249,247,.22);stroke-width:3}
[data-theme="light"] .hero__object .rim{stroke:rgba(11,13,16,.16)}
@media (max-width:64em){.hero__object{right:-32vw;width:80vw;opacity:.4}}

.hero__inner{position:relative;max-width:52rem}
.hero .display{margin-top:1.75rem}
.hero .lede{margin-top:1.6rem;max-width:40ch}
.hero .btn-row{margin-top:2.5rem}

/* the line of substantiating facts under the hero, not boxed */
.hero__facts{
  display:grid;gap:1.75rem;margin-top:clamp(3.5rem,7vw,5.5rem);
  padding-top:2rem;border-top:1px solid var(--line);
}
@media (min-width:48em){.hero__facts{grid-template-columns:repeat(3,1fr);gap:2.5rem}}
.hero__fact h2{margin-bottom:.4rem}
.hero__fact p{color:var(--fg-2);font-size:.9375rem;line-height:1.5;max-width:34ch}

/* ---------- statement --------------------------------------------------- */
.statement{
  font-size:clamp(1.75rem,3.7vw,3rem);
  font-weight:450;line-height:1.14;letter-spacing:-.035em;
  max-width:24ch;
}
.statement em{font-style:normal;color:var(--fg-3)}

/* ---------- bento ------------------------------------------------------- */
.bento{display:grid;gap:clamp(.75rem,1.4vw,1.15rem)}
@media (min-width:52em){
  .bento{grid-template-columns:repeat(12,1fr)}
  .bento__lead{grid-column:span 12}
  .bento__item{grid-column:span 6}
}
@media (min-width:72em){
  /* One tall statement card, four supporting cards in a 2x2 beside it. */
  .bento__lead{grid-column:span 6;grid-row:span 2;display:flex;flex-direction:column;justify-content:space-between}
  .bento__item{grid-column:span 3}
}
.card{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--wash),transparent 40%),var(--panel);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 1px 0 var(--edge) inset,var(--lift);
  padding:clamp(1.5rem,2.4vw,2.25rem);
  transition:border-color .35s var(--ease),transform .35s var(--ease-out),box-shadow .35s var(--ease);
}
.card:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:0 1px 0 var(--edge) inset,var(--lift-hi)}
.card h3{margin-bottom:.65rem}
.card p{color:var(--fg-2);font-size:.9688rem;line-height:1.55;max-width:44ch}
.card__mark{
  position:absolute;right:-2.5rem;bottom:-3rem;width:11rem;color:var(--fg);
  opacity:.028;pointer-events:none;
}
.bento__lead{padding:clamp(1.75rem,3vw,2.75rem)}
.bento__lead h3{font-size:clamp(1.5rem,2.2vw,1.9rem);letter-spacing:-.032em;line-height:1.1}
.bento__lead p{max-width:46ch;margin-top:1rem}

/* ---------- split ------------------------------------------------------- */
.split{display:grid;gap:clamp(2.5rem,5vw,4.5rem)}
@media (min-width:64em){
  .split{grid-template-columns:minmax(0,.85fr) minmax(0,1fr);align-items:start}
  .split--reverse>*:first-child{order:2}
}
/* heading on the left, supporting copy on the right, both top-aligned */
@media (min-width:64em){.split--intro{align-items:start;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.split__copy .lede{margin-top:1.35rem}
.split__copy .btn-row{margin-top:2rem}
.split__copy .link-arrow{margin-top:1.375rem}

/* ---------- list -------------------------------------------------------- */
.ticks{display:grid;gap:0;margin-top:1.75rem}
.ticks li{
  display:grid;grid-template-columns:1.5rem 1fr;gap:.9rem;
  color:var(--fg-2);font-size:.9688rem;line-height:1.5;
  padding-block:.85rem;border-top:1px solid var(--line);
}
.ticks li:last-child{border-bottom:1px solid var(--line)}
.ticks--tight{margin-top:2rem}
.ticks--tight li{padding-block:.7rem;font-size:.9375rem}
.ticks li::before{
  content:"";width:.85rem;height:1px;margin-top:.75rem;justify-self:start;
  background:var(--fg-3);
}

/* ---------- photography and customer outcomes ------------------------- */
.photo{
  position:relative;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--panel);box-shadow:0 1px 0 var(--edge) inset,var(--lift);
  aspect-ratio:4/3;
}
.photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,8,10,.02),rgba(7,8,10,.36));
}
.photo picture{display:block;width:100%;height:100%}
.photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.04)}
[data-theme="light"] .photo img{filter:saturate(.82) contrast(1.02)}
.photo--wide{aspect-ratio:3/2}
.photo--solar img{object-position:center 62%}
.photo--plug img{object-position:center 52%}
.photo--rain img{object-position:center 48%}

.feature{display:grid;gap:clamp(2.5rem,6vw,6rem);align-items:center}
@media (min-width:64em){
  .feature{grid-template-columns:minmax(0,1.08fr) minmax(18rem,.82fr)}
  .feature--reverse{grid-template-columns:minmax(18rem,.82fr) minmax(0,1.08fr)}
  .feature--reverse .photo{order:2}
}
.feature__copy .lede{margin-top:1.35rem}
.feature__copy .btn-row{margin-top:2rem}
.feature__copy .link-arrow{margin-top:1.375rem}

.outcomes{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
.outcome{background:var(--bg);padding:clamp(1.5rem,3vw,2.25rem) 0}
.outcome h3{margin-bottom:.55rem}
.outcome p{color:var(--fg-2);font-size:.9688rem;max-width:50ch}
@media (min-width:48em){
  .outcomes{grid-template-columns:repeat(3,1fr);column-gap:clamp(1.5rem,3vw,3rem);background:transparent}
  .outcome{border-right:1px solid var(--line);padding-right:clamp(1.5rem,3vw,3rem)}
  .outcome:last-child{border-right:0;padding-right:0}
}

.plain-rows{display:grid;border-top:1px solid var(--line);margin-top:1.75rem}
.plain-row{padding-block:1.15rem;border-bottom:1px solid var(--line)}
.plain-row h3{font-size:1.0625rem;margin-bottom:.35rem}
.plain-row p{color:var(--fg-2);font-size:.9688rem;max-width:58ch}

.partner{
  position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(145deg,var(--panel-hi),var(--panel));
  padding:clamp(2rem,5vw,4.5rem);box-shadow:0 1px 0 var(--edge) inset,var(--lift);
}
.partner__grid{display:grid;gap:clamp(2.5rem,5vw,5rem);align-items:start}
@media (min-width:64em){.partner__grid{grid-template-columns:minmax(0,.78fr) minmax(0,1fr)}}
.partner .lede{margin-top:1.25rem}
.partner__note{margin-top:1.5rem;color:var(--fg-3);font-size:.875rem;max-width:58ch}

/* ---------- entries (interior pages) ------------------------------------ */
.entries{display:grid;gap:clamp(.75rem,1.4vw,1.15rem)}
@media (min-width:52em){.entries--two{grid-template-columns:1fr 1fr}}
.entry{
  background:linear-gradient(180deg,var(--wash),transparent 40%),var(--panel);
  border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 1px 0 var(--edge) inset;
  padding:clamp(1.35rem,2.2vw,1.9rem);
  transition:border-color .3s var(--ease);
}
.entry:hover{border-color:var(--line-2)}
.entry h3{margin-bottom:.55rem}
.entry p{color:var(--fg-2);font-size:.9688rem;line-height:1.55;max-width:52ch}

/* ---------- panel (generic raised block) -------------------------------- */
.panel{
  background:linear-gradient(180deg,var(--wash),transparent 40%),var(--panel);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 1px 0 var(--edge) inset,var(--lift);
  padding:clamp(1.75rem,3vw,2.75rem);
  display:flex;flex-direction:column;
  transition:border-color .3s var(--ease),transform .35s var(--ease-out);
}
.panel:hover{border-color:var(--line-2)}
.panel h3{margin-bottom:.75rem}
.panel p{color:var(--fg-2);flex:1;max-width:44ch}
.panel .link-arrow{margin-top:1.375rem;align-self:flex-start}

/* ---------- closing panel ----------------------------------------------- */
.cta{position:relative;overflow:hidden;isolation:isolate;
  border-radius:clamp(var(--r-lg),3vw,28px);
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--wash),transparent 50%),var(--panel);
  box-shadow:0 1px 0 var(--edge) inset,var(--lift);
  padding:clamp(2.5rem,6vw,5.5rem);
}
.cta::before{
  content:"";position:absolute;z-index:-1;inset:auto auto -60% -20%;
  width:70%;padding-bottom:70%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(250,249,247,.06),rgba(250,249,247,0) 70%);
}
[data-theme="light"] .cta::before{background:radial-gradient(50% 50% at 50% 50%,rgba(11,13,16,.045),rgba(11,13,16,0) 70%)}
.cta .lede{margin-top:1.35rem}
.cta .btn-row{margin-top:2.5rem}

/* ---------- form -------------------------------------------------------- */
.form{display:grid;gap:1.15rem;max-width:38rem}
.field{display:grid;gap:.5rem}
.field label{font-size:.875rem;font-weight:500;color:var(--fg-2);letter-spacing:-.01em}
.field input,.field select,.field textarea{
  background:var(--field);border:1px solid var(--field-line);border-radius:var(--r-sm);
  color:var(--fg);padding:.85rem .95rem;font-size:.9688rem;width:100%;
  box-shadow:0 1px 0 var(--edge) inset;
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-3)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--fg-3)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--fg-2);background:var(--panel-hi)}
/* :focus above clears the ring for pointer use; :focus-visible puts it back
   for keyboard use, and wins on source order at equal specificity. */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.field textarea{resize:vertical;min-height:8.5rem}
.field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 49%,currentColor 50%),linear-gradient(-45deg,transparent 49%,currentColor 50%);
  background-position:calc(100% - 1.2rem) 1.45rem,calc(100% - .85rem) 1.45rem;
  background-size:.35rem .35rem;background-repeat:no-repeat;
}
.field-row{display:grid;gap:1.15rem}
@media (min-width:40em){.field-row{grid-template-columns:1fr 1fr}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__note{font-size:.8125rem;color:var(--fg-3);max-width:38rem}
.form__status{font-size:.9375rem;padding:.9rem 1.05rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--wash);display:none}
.form__status[data-state]{display:block}
.form__status[data-state="ok"]{border-color:var(--line-2)}

/* ---------- footer ------------------------------------------------------ */
.footer{border-top:1px solid var(--line);padding-block:clamp(3.5rem,6vw,5rem) 2rem;background:var(--bg-deep)}
.footer__grid{display:grid;gap:2.5rem}
@media (min-width:52em){.footer__grid{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr))}}
.footer h2{font-size:.8125rem;font-weight:500;color:var(--fg-3);margin-bottom:1.1rem;letter-spacing:-.005em}
.footer ul{display:grid;gap:.1rem;list-style:none;padding:0;margin:0}
.footer li a{display:inline-block;font-size:.9375rem;color:var(--fg-2);text-decoration:none;
  padding-block:.7rem;transition:color .2s var(--ease)}
.footer li a:hover{color:var(--fg)}
.footer .wordmark{width:10rem;height:2.05rem;color:var(--fg)}
.footer__blurb{font-size:.9375rem;color:var(--fg-2);margin-top:1.35rem;max-width:30ch}
.footer__base{
  display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center;
  margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--line);
  font-size:.8125rem;color:var(--fg-3);
}

/* ---------- page head --------------------------------------------------- */
.page-head{position:relative;overflow:hidden;padding-block:clamp(4rem,9vw,7rem) clamp(2rem,4vw,3rem)}
.page-head::before{
  content:"";position:absolute;z-index:-1;top:-60vh;left:50%;translate:-50% 0;
  width:120vw;height:100vh;
  background:radial-gradient(40% 45% at 50% 50%,rgba(250,249,247,.06),rgba(250,249,247,0) 70%);
}
[data-theme="light"] .page-head::before{background:radial-gradient(40% 45% at 50% 50%,rgba(11,13,16,.04),rgba(11,13,16,0) 70%)}
.page-head h1{margin-top:1.6rem}
.page-head .lede{margin-top:1.5rem;max-width:52ch}

/* ---------- motion ------------------------------------------------------ */
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.js [data-reveal].is-in{opacity:1;transform:none}

/* The hero load is one orchestrated move rather than several scattered ones.
   This is a CSS animation rather than a JS-applied class because the hero is
   the first thing anyone sees: gating it on script meant that a failed
   site.js, or any context that never produced a frame, left the h1, the lede
   and both buttons at opacity 0 permanently. An animation needs nothing but
   the stylesheet, and `both` holds the finished state. */
@keyframes gs-enter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero [data-enter]{animation:gs-enter .9s var(--ease-out) var(--d,0ms) both}

@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .hero [data-enter]{animation:none;opacity:1;transform:none}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

.skip{position:absolute;left:-9999px;top:0;background:var(--fg);color:var(--bg);padding:.75rem 1rem;z-index:100;border-radius:var(--r-sm)}
.skip:focus{left:1rem;top:1rem}