/* NorthStar front door. The --ns-* values are copied from look C ("Prism Foil"),
   board/deliverables/site_elevation_20261013/skin/look-c-prism-foil.css; change them there first.
   Dark for every visitor: the ground is set here and never follows the device setting.
   No text under 14px; no button or link shorter than 44px. */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url("/static/fonts/space-grotesk-latin-ext.woff2") format("woff2");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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url("/static/fonts/space-grotesk-latin.woff2") format("woff2");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}

html:root{
  --ns-foil:linear-gradient(115deg,#7df0e6 0%,#8aa8ff 22%,#c58bff 44%,#ff8fd0 62%,#ffd47a 82%,#7df0e6 100%);
  --ns-bg:#06060f;--ns-bg-2:#0c0c1c;--ns-card:#0e0e20;--ns-line:rgba(170,160,255,.3);--ns-line-strong:rgba(190,180,255,.5);
  --ns-ink:#f5f3ff;--ns-muted:#bbb8d6;--ns-gold:#f2d27a;--ns-gold-ink:#0b0a14;--ns-accent:#7df0e6;
  --ns-display:"Space Grotesk","Segoe UI",system-ui,sans-serif;--ns-h3-font:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --ns-body:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --ns-h-weight:700;--ns-h-spacing:-.025em;
  --ns-radius:18px;--ns-btn-radius:12px;--ns-btn-spacing:.01em;--ns-btn-transform:none;
  --ns-card-bg:linear-gradient(#0e0e20,#0e0e20) padding-box,var(--ns-foil) border-box;
  --ns-shadow:0 14px 46px rgba(0,0,0,.55),0 0 34px rgba(138,168,255,.07);
  --ns-btn-bg:rgba(255,255,255,.035);
  --ns-primary-bg:var(--ns-foil);--ns-primary-shadow:0 6px 26px rgba(197,139,255,.3);
  --ns-header-bg:rgba(8,8,18,.84);
  --ns-page-glow:radial-gradient(ellipse at 92% -6%,rgba(125,240,230,.09),transparent min(38rem,95vw)),radial-gradient(ellipse at -8% 30%,rgba(197,139,255,.07),transparent min(34rem,85vw));
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--ns-bg);color:var(--ns-ink);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;overflow-x:hidden;background:var(--ns-page-glow),var(--ns-bg);background-attachment:fixed;color:var(--ns-ink);font:17px/1.6 var(--ns-body)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--ns-display);font-weight:var(--ns-h-weight);letter-spacing:var(--ns-h-spacing);margin:0;line-height:1.15}
p{margin:0}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;z-index:20;padding:.75rem 1rem;background:var(--ns-ink);color:var(--ns-bg);font-weight:700;min-height:44px}
.skip:focus{left:1rem;top:1rem}
/* focus ring drawn inside each link's own box, so a card that hides its overflow cannot clip it */
a:focus-visible{outline:3px solid var(--ns-accent);outline-offset:-3px}
a.card:focus-visible{border-color:var(--ns-accent)}
.button.primary:focus-visible{box-shadow:inset 0 0 0 6px var(--ns-bg),var(--ns-primary-shadow)}
.skip:focus-visible{outline-color:var(--ns-bg)}

/* header: the only blurred surface */
.top{position:sticky;top:0;z-index:10;background:var(--ns-header-bg);border-bottom:1px solid var(--ns-line);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:.5rem 1.5rem;padding-block:.35rem}
.brand{display:inline-flex;align-items:center;gap:.6rem;min-height:48px;text-decoration:none;font-family:var(--ns-display);font-weight:700;font-size:19px;letter-spacing:-.01em}
.brand img{width:36px;height:36px;border-radius:50%}
.menu{display:flex;gap:.25rem}
.menu a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.4rem .8rem;border-radius:var(--ns-btn-radius);text-decoration:none;font-size:16px;font-weight:600;color:var(--ns-ink)}
.menu a:hover{color:var(--ns-gold);background:rgba(255,255,255,.04)}

/* buttons: one shape, one size floor */
.button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.7rem 1.3rem;border-radius:var(--ns-btn-radius);border:1px solid var(--ns-line-strong);background:var(--ns-btn-bg);color:var(--ns-ink);font:650 16px/1.2 var(--ns-body);letter-spacing:var(--ns-btn-spacing);text-transform:var(--ns-btn-transform);text-decoration:none}
.button:hover{border-color:var(--ns-gold);color:var(--ns-gold)}
.button.primary{background:var(--ns-primary-bg);color:var(--ns-gold-ink);border-color:transparent;box-shadow:var(--ns-primary-shadow);font-weight:750}
.button.primary:hover{color:var(--ns-gold-ink);filter:brightness(1.07)}

.eyebrow{color:var(--ns-gold);font-size:14px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1.4}
.foil{background:var(--ns-foil);-webkit-background-clip:text;background-clip:text;color:transparent}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);grid-template-rows:1fr auto auto 1fr;column-gap:2.5rem;padding-block:2.5rem 2rem}
.hero h1{grid-column:1;grid-row:2;font-size:clamp(30px,4.6vw,58px);max-width:16ch}
.hero-art{grid-column:2;grid-row:1 / -1;width:100%;aspect-ratio:1;object-fit:contain}
.hero .lead{grid-column:1;grid-row:3;margin-top:1rem;color:var(--ns-muted);font-size:19px;max-width:40ch}
.hero .actions{grid-column:1;grid-row:4;align-self:start;display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}

/* cards: foil hairline round every card */
.card{position:relative;display:flex;flex-direction:column;background:var(--ns-card-bg);border:1px solid transparent;border-radius:var(--ns-radius);box-shadow:var(--ns-shadow);overflow:hidden;text-decoration:none;color:var(--ns-ink)}
.card-body{display:flex;flex-direction:column;gap:.35rem;padding:1.15rem 1.25rem 1.25rem;flex:1}
.card h3{font-size:22px}
.card p{color:var(--ns-muted);font-size:16px;line-height:1.5}
.card .go{margin-top:auto;padding-top:.5rem;color:var(--ns-accent);font-weight:650;font-size:15px}
a.card:hover{border-color:var(--ns-accent);transform:translateY(-2px)}
@media (hover:hover){a.card{transition:transform .22s cubic-bezier(.22,.68,.3,1),border-color .22s ease}}
.card-pic{width:100%;aspect-ratio:1;object-fit:cover;background:var(--ns-bg-2)}

.services{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem 2rem;padding:1.6rem 1.8rem}
.services h2{font-size:clamp(24px,3vw,34px)}
.services p{color:var(--ns-muted);margin-top:.4rem;max-width:56ch}

.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto;gap:1rem;margin-top:1rem}
.doors-text{display:grid;grid-column:1;grid-row:1 / 3;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:subgrid;gap:1rem}
.section{padding-block:1rem}
/* wide screens: each picture card shares a row with two text cards, so every row is as tall as its words */
@media (min-width:721px){
  .doors .pictured{grid-column:2;--pic:min(30%,200px)}
  .doors .pictured .card-pic{position:absolute;inset:0 auto 0 0;width:var(--pic);height:100%;aspect-ratio:auto}
  .doors .pictured .card-body{margin-left:var(--pic)}
}

/* footer */
.foot{margin-top:2rem;padding-block:1.5rem 2rem;border-top:1px solid var(--ns-line);color:var(--ns-muted);font-size:15px}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem}
.foot nav{display:flex;flex-wrap:wrap;gap:0 .25rem}
.foot a{display:inline-flex;align-items:center;min-height:44px;padding-inline:.5rem;text-decoration:underline;text-decoration-color:var(--ns-line-strong);text-underline-offset:3px}
.foot a:hover{color:var(--ns-gold)}

/* small pages that say where a thing lives now */
.moved{min-height:70vh;display:grid;place-items:center;padding-block:3rem}
.moved .card{max-width:560px;width:100%}
.moved .card-body{gap:.8rem;padding:2rem}
.moved h1{font-size:clamp(28px,6vw,40px)}
.moved p{color:var(--ns-muted);font-size:17px}
.moved .eyebrow{color:var(--ns-gold);font-size:14px}
.moved .button{align-self:flex-start;margin-top:.5rem}

@media (max-width:720px){
  body{font-size:16px}
  .top .wrap{flex-direction:column;align-items:stretch;gap:0;padding-block:.15rem .2rem}
  .brand{min-height:44px;font-size:18px}
  .brand img{width:32px;height:32px}
  .menu{justify-content:space-between;margin-inline:-.4rem}
  .menu a{padding-inline:.45rem;font-size:16px}
  .hero{grid-template-columns:minmax(0,1fr) 112px;grid-template-rows:auto;gap:.6rem 1rem;padding-block:1rem .5rem}
  .hero h1{font-size:28px;grid-column:1;grid-row:1;align-self:center}
  .hero-art{grid-column:2;grid-row:1}
  .hero .lead{grid-column:1 / -1;grid-row:2}
  .hero .actions{grid-column:1 / -1;grid-row:3}
  .hero .lead{margin-top:0;font-size:17px}
  .hero .actions{margin-top:.4rem}
  .hero .actions .button{flex:1}
  .services{grid-template-columns:1fr;padding:1.1rem 1.15rem 1.2rem;gap:.6rem}
  .services h2{font-size:22px}
  .services .button{width:100%}
  .services p{margin-top:.2rem;font-size:15px}
  .doors{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin-top:.6rem}
  .doors-text{display:contents}
  .card-body{padding:.8rem .9rem .9rem;gap:.2rem}
  .card h3{font-size:19px}
  .card p{font-size:15px;line-height:1.45}
  .card .go{display:none}
  .section{padding-block:.5rem}
  .foot{margin-top:1rem;padding-block:.5rem .75rem}
  .foot nav{margin-inline:-.4rem}
  .foot a{padding-inline:.4rem}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media (forced-colors:active){.card,.button{border:1px solid CanvasText}.foil{color:CanvasText;background:none}}

/* Six equal journeys: art is fully visible, with labels beneath each image. */
.journey-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1rem}.journey-art{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:var(--ns-bg)}.journey-card .card-body{min-height:160px}.journey-card .go{display:block}@media(max-width:900px){.journey-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:480px){.journey-grid{grid-template-columns:minmax(0,1fr)}.journey-card .card-body{min-height:0}.journey-art{aspect-ratio:auto}}