/* ============================================================
   SPECTRA ONE - ABOUT

   Layout follows the reference: badge-led sections, a bento
   mosaic under the hero, a stats strip, split story block,
   2x2 capability grid, a centred manifesto line, a benefits
   split, a two-column FAQ, and a dark footer carrying an
   oversized wordmark.

   Type and colour stay on the existing brand so this page can
   sit beside the marketing site: Space Grotesk for display,
   Inter for prose, JetBrains Mono for anything that behaves
   like data.

   The mosaic tiles are built from the product's own subject
   matter rather than stock photography. A solar company's
   about page should show module arrays, job records and
   certificates, not a person at a laptop.

   Shape lock: 10px small, 16px cards, 22px frames, pill on
   badges only.
   ============================================================ */

:root{
  --paper:#F3F4F6;
  --card:#FFFFFF;
  --ink:#07111F;
  --ink-2:#39434F;
  --muted:#5C6672;
  --line:rgba(10,20,40,.09);
  --line-2:rgba(10,20,40,.055);

  --blue:#1266FF;
  --blue-ink:#0A4AC4;
  --blue-soft:#EBF2FF;
  --navy:#0A1428;
  --navy-deep:#060D1B;

  /* four soft tints, one per capability. A category system,
     not confetti: each tile keeps its colour everywhere. */
  --t-blue:#E9F0FF;   --i-blue:#1266FF;
  --t-lilac:#F0ECFE;  --i-lilac:#6B4EF5;
  --t-mint:#E3F6EC;   --i-mint:#0E9F62;
  --t-amber:#FFF0E1;  --i-amber:#E3720A;

  --display:"Space Grotesk",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  --r-sm:10px; --r:16px; --r-lg:22px; --r-pill:999px;

  --sh-1:0 1px 2px rgba(10,20,40,.04),0 10px 24px -14px rgba(10,20,40,.16);
  --sh-2:0 2px 6px -2px rgba(10,20,40,.05),0 26px 54px -26px rgba(10,20,40,.26);

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.4,0,.2,1);

  --shell:1140px;
  --char-w:clamp(300px,30vw,540px);
  --char-overlap:52px;
  --char-inset:clamp(12px,4.5vw,90px);
  --gut:clamp(18px,3.6vw,40px);
  --pad:clamp(58px,6vw,104px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink-2);
  font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}

h1,h2,h3,h4{
  font-family:var(--display);color:var(--ink);
  margin:0;font-weight:600;letter-spacing:-.03em;line-height:1.08;
  text-wrap:balance;
}
h1{font-size:clamp(32px,4.4vw,54px);letter-spacing:-.035em}
h2{font-size:clamp(27px,3.3vw,42px)}
h3{font-size:clamp(17px,1.5vw,20px);letter-spacing:-.02em;line-height:1.25}
p{margin:0;text-wrap:pretty}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--pad)}
.lede{font-size:clamp(15px,1.15vw,17px);line-height:1.62;color:var(--muted);max-width:60ch}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.skip{position:absolute;left:var(--gut);top:-60px;z-index:99;background:var(--blue);color:#fff;
  padding:10px 16px;border-radius:var(--r-sm);font-weight:600;text-decoration:none;transition:top .18s ease}
.skip:focus{top:10px}

/* ---------- badge ---------- */
.badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px;border-radius:var(--r-pill);
  background:var(--card);border:1px solid var(--line);
  font-family:var(--body);font-size:12px;font-weight:550;color:var(--ink);
  box-shadow:var(--sh-1);
}
.badge--c{margin-inline:auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  padding:12px 20px;border-radius:var(--r-pill);
  font-size:14.5px;font-weight:550;letter-spacing:-.01em;text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  transition:transform .38s var(--ease),box-shadow .38s var(--ease),background-color .22s var(--ease-io);
}
.btn--go{background:var(--ink);color:#fff;box-shadow:0 10px 24px -14px rgba(7,17,31,.9)}
.btn--go:hover{transform:translateY(-1.5px);box-shadow:0 16px 30px -14px rgba(7,17,31,.75)}
.btn--go:active{transform:translateY(1px) scale(.985)}
.btn--line{border-color:var(--line);background:var(--card);color:var(--ink)}
.btn--line:hover{transform:translateY(-1.5px);box-shadow:var(--sh-1)}
.btn__x{
  width:22px;height:22px;border-radius:var(--r-pill);display:grid;place-items:center;
  background:rgba(255,255,255,.16);font-size:11px;
  transition:transform .38s var(--ease);
}
.btn--line .btn__x{background:rgba(10,20,40,.06)}
.btn:hover .btn__x{transform:translate(2px,-1px)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:40;padding-top:14px;padding-bottom:6px}
.nav__in{
  max-width:var(--shell);margin-inline:auto;
  display:flex;align-items:center;gap:22px;
  padding:9px 9px 9px 18px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line);box-shadow:var(--sh-1);
}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:16.5px;letter-spacing:-.035em;color:var(--ink)}
.brand__m{width:24px;height:24px;border-radius:7px;background:var(--blue);display:grid;place-items:center;flex:none}
.brand__m i{display:block;width:12px;height:1.7px;background:#fff;border-radius:2px;
  box-shadow:0 -4px 0 #fff,0 4px 0 #fff}
.nav__links{display:flex;gap:4px;margin-inline:auto}
.nav__links a{
  text-decoration:none;font-size:14px;font-weight:500;color:var(--muted);
  padding:8px 13px;border-radius:var(--r-pill);transition:color .2s var(--ease-io),background-color .2s var(--ease-io);
}
.nav__links a:hover{color:var(--ink);background:rgba(10,20,40,.045)}
.nav__links a[aria-current="page"]{color:var(--ink);background:rgba(10,20,40,.06)}
.nav__end{display:flex;align-items:center;gap:8px}
.nav__end .signin{text-decoration:none;font-size:14px;font-weight:500;color:var(--muted);padding:8px 10px}
.nav__end .signin:hover{color:var(--ink)}
.nav__end .btn{padding:10px 17px}
.burger{display:none;background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:10px 12px;cursor:pointer}
.burger span{display:block;width:15px;height:1.6px;background:var(--ink);border-radius:2px}
.burger span+span{margin-top:4px}
@media (max-width:880px){
  .nav__links,.nav__end .signin{display:none}
  .burger{display:block}
  /* the pill has to hold brand, CTA and burger on one line at 375px */
  .nav__in{gap:10px;padding:8px 8px 8px 14px}
  .brand{white-space:nowrap;font-size:15.5px}
  .brand__m{width:22px;height:22px;border-radius:6px}
  .nav__end{margin-left:auto;gap:7px}
  .nav__end .btn{padding:9px 15px;font-size:13.5px}
  .nav__end .btn .btn__x{display:none}
  .burger{padding:9px 11px}
}
@media (max-width:380px){
  .nav__end .btn{padding:9px 13px;font-size:13px}
}
.drawer{display:none;max-width:var(--shell);margin:8px auto 0;padding:10px 18px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1)}
.drawer.is-open{display:block}
.drawer a{display:block;padding:13px 0;text-decoration:none;color:var(--ink);font-weight:500;border-bottom:1px solid var(--line-2)}
.drawer a:last-child{border-bottom:0}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding-top:clamp(30px,4vw,58px);padding-bottom:clamp(18px,2vw,28px);text-align:center}
.hero h1{margin:18px auto 0;max-width:16ch}
.hero .lede{margin:18px auto 0;max-width:56ch;text-align:center}

/* ============================================================
   BENTO MOSAIC  (the signature)
   Every tile is a surface from the product's own world. Built
   from gradients and type, so the page carries no photography
   it cannot stand behind.
   ============================================================ */


/* --- the module array: a PV field with busbars, lit diagonally --- */
.array{
  --mw:38px;--mh:28px;--gap:#070C16;
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg,transparent 0 11px,rgba(196,216,255,.07) 11px 12px),
    repeating-linear-gradient(90deg,transparent 0 var(--mw),var(--gap) var(--mw) calc(var(--mw) + 3px)),
    repeating-linear-gradient(180deg,transparent 0 var(--mh),var(--gap) var(--mh) calc(var(--mh) + 3px)),
    linear-gradient(163deg,#1B3358 0%,#101C35 46%,#0A1120 100%);
  background-color:#0D1730;
}
.array::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(150deg,rgba(130,170,255,.32) 0%,rgba(130,170,255,.05) 36%,transparent 64%),
    radial-gradient(120% 80% at 6% 0%,rgba(255,255,255,.16),transparent 56%);
}

/* ---------- photography ----------
   Real installation photography from Pexels, which licenses free
   for commercial use. Each photo sits on top of the CSS module
   array, so a slow or blocked image degrades to the array rather
   than to an empty box. The scrim keeps caption type legible on
   any photo, whatever its exposure. */
.ph{position:relative;overflow:hidden;background:#0D1730}
.ph > img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;
  object-position:center 32%;
  transition:transform 1.1s var(--ease);
}
.ph::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(to top,rgba(5,11,22,.74),rgba(5,11,22,.08) 48%,transparent 72%);
}
.ph--plain::after{background:linear-gradient(to top,rgba(5,11,22,.5),transparent 55%)}
/* caption laid over a photo, above its scrim */
.tile__cap{
  position:absolute;left:14px;bottom:13px;right:14px;z-index:4;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.9);
  text-shadow:0 1px 3px rgba(0,0,0,.55);
}

/* --- job record tile --- */

/* --- certificate tile --- */

/* --- stage rail tile --- */
.is-lit .rt__b span i{transform:scaleX(var(--w,1))}

/* --- roof plan tile --- */

/* --- network + claim strips --- */
.st{position:absolute;inset:0;padding:0 clamp(13px,1.4vw,18px);display:flex;align-items:center;gap:11px}
.st__i{width:28px;height:28px;border-radius:9px;flex:none;display:grid;place-items:center;
  font-family:var(--mono);font-size:11px;font-weight:500;color:#fff}
.st__t{font-size:12.5px;font-weight:500;color:var(--ink);line-height:1.3}
.st__t small{display:block;font-weight:400;color:var(--muted);font-size:11.5px}

/* --- floating accents, as in the reference --- */
@media (max-width:760px){.float{display:none}}

/* ---------- stats strip ---------- */

@media (max-width:900px){
  .mosaic{grid-auto-rows:clamp(62px,11vw,88px)}
  .t-array{grid-column:span 6;grid-row:span 4}
  .t-job{grid-column:span 6;grid-row:span 2}
  .t-hands{grid-column:span 6;grid-row:span 2}
  .t-cert{grid-column:span 6;grid-row:span 2}
  .t-roof{grid-column:span 6;grid-row:span 2}
  .t-net,.t-claim{grid-column:span 6}
  .t-rail{grid-column:span 12;grid-row:span 2}
}
@media (max-width:620px){
  .t-array,.t-job,.t-hands,.t-cert,.t-roof,.t-net,.t-claim,.t-rail{grid-column:span 12}
  /* the lead photo is a portrait: a 3-row box crops the person in half */
  .t-array{grid-row:span 5}
  .t-job{grid-row:span 3}.t-roof{grid-row:span 2}.t-hands{grid-row:span 2}
  .stats{grid-template-columns:1fr}
}



/* ---------- icons ----------
   Phosphor's webfont, with each glyph written into the markup as a
   character entity rather than injected through ::before. Both the
   CDN's own .ph.ph-* rules and a local re-declaration of them rendered
   tofu squares in testing, while the identical codepoint as a text node
   rendered correctly every time. A tofu square where an icon should be
   is worse than no icon, so this takes the path that works. Each icon's
   name is kept in its title attribute. */
@font-face{
  font-family:"PhosphorLight";
  src:url("https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/light/Phosphor-Light.woff2") format("woff2");
  font-weight:normal;font-style:normal;font-display:block;
}
.icn{
  font-family:"PhosphorLight";font-style:normal;font-weight:400;
  font-variant:normal;font-feature-settings:normal;font-variant-ligatures:none;
  text-transform:none;line-height:1;letter-spacing:0;
  display:inline-block;-webkit-font-smoothing:antialiased;
}

/* ============================================================
   HERO - copy on the left, a photograph on the right carrying
   three floating panels. The panels are the page's signature:
   they overlap the image, so the composition reads as layered
   rather than as two columns side by side.
   ============================================================ */
.hero2{padding-top:clamp(22px,3vw,44px);padding-bottom:clamp(40px,5vw,76px)}
.hero2__grid{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(30px,4vw,60px);align-items:center}
.hero2 h1{
  font-size:clamp(33px,4.5vw,54px);line-height:1.05;letter-spacing:-.036em;
  max-width:18ch;margin-top:0;
}
.hero2 .lede{margin-top:22px;max-width:46ch}
.hero2__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* Icons sit bare on the surface: no tile, no fill, one weight and
   one colour everywhere. A tinted tile competes with the heading
   next to it; a thin line at low contrast does not. */
.ico{display:block;flex:none;color:var(--ink);opacity:.72}
.ico i{font-size:28px;line-height:1}

/* trust row under the CTAs */
.trust{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px);
  margin-top:clamp(30px,3.4vw,44px);padding-top:clamp(20px,2.4vw,30px);
  border-top:1px solid var(--line-2);
}
.trust__i{display:flex;gap:11px;align-items:flex-start}
.trust__i p{font-size:12.8px;line-height:1.4;color:var(--muted)}
.trust__i i{font-size:22px;color:var(--ink);opacity:.72;flex:none;margin-top:-1px}

/* ---------- the photograph and its panels ---------- */
.shotwrap{position:relative;padding:0 0 30px 0}
.shot2{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:#0D1730;box-shadow:var(--sh-2);
  min-height:180px;
}
/* the image sets the frame's height, so it is never cropped */
.shot2 img{display:block;width:100%;height:auto}

/* Silver glass, built the way the platform panels were: a cool
   low-alpha tint over a blur of what sits behind, so the photograph
   reads through the panel instead of being covered by it. The two
   inset highlights are the edge catching light, which is what stops
   it looking like a flat translucent rectangle. */
.fcard{
  position:absolute;z-index:3;
  border-radius:var(--r);
  padding:clamp(15px,1.5vw,20px);
  background:linear-gradient(152deg,
    rgba(255,255,255,.72) 0%,
    rgba(231,236,244,.60) 54%,
    rgba(248,250,253,.54) 100%);
  backdrop-filter:blur(22px) saturate(175%);
  -webkit-backdrop-filter:blur(22px) saturate(175%);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -1px 0 rgba(255,255,255,.22),
    0 2px 8px -3px rgba(10,20,40,.16),
    0 30px 62px -26px rgba(10,20,40,.42);
}

.fcard__h{margin-bottom:10px}
.fcard__h h3{font-size:14.5px;letter-spacing:-.018em;margin:0;color:#05101E}
/* type on glass needs more weight than type on paper: the panel
   is translucent, so whatever is behind it is competing */
.fcard p{font-size:12.8px;line-height:1.52;color:#2F3A47}

.fcard--mission{bottom:0;right:clamp(-18px,-1.2vw,-8px);width:min(264px,56%)}

@media (max-width:960px){
  .hero2__grid{grid-template-columns:1fr;gap:34px}
  .hero2 h1,.hero2 .lede{max-width:none}
  /* overlapping panels become a readable stack: an absolute layout
     at this width would collide with the photo and with itself */
  .shotwrap{padding:0}
  .shot2{aspect-ratio:16/11}
  .fcard{position:static;width:auto !important;inset:auto;margin-top:12px;
    backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--card);
    border-color:var(--line);box-shadow:var(--sh-1)}
  .fcard p{color:var(--muted)}
}
@media (max-width:620px){
  .trust{grid-template-columns:1fr;gap:14px}
}

/* ============================================================
   VALUES
   ============================================================ */
/* ---- values section, now sharing the row with the character ---- */
.vals-sec{position:relative;overflow:hidden}
/* a pale wash on the right so she is standing in light, not pasted on */
.vals-sec::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 90% at 84% 55%,rgba(126,136,255,.13),transparent 62%);
}
.vals-grid{position:relative;z-index:1}
/* Reserve only what she actually intrudes into the shell, not her
   whole width: she sits at the page edge, so on a wide screen most of
   her is already outside the content column and costs the cards
   nothing. A flat vw reservation shrank the cards as the window grew. */
@media (min-width:1101px){
  /* At wide widths the cards wrap less, so the section gets shorter
     while she gets taller, and overflow:hidden was cutting off her
     head. The section now reserves at least her full height. */
  .vals-sec{min-height:calc(var(--char-w) * 1.21 + 48px)}
  /* The cards keep their left edge on the shell so they stay aligned
     with the nav and every other section; what moves is the right-hand
     boundary, which her inset drives. Push her further in off the page
     edge and the whole group slides left together. */
  .vals-grid{
    padding-bottom:10px;
    padding-right:max(var(--gut),
      calc(var(--char-w) + var(--char-inset) - (100vw - var(--shell)) / 2 - var(--char-overlap)));
  }
}

.vals__head{margin-bottom:clamp(24px,3vw,40px)}
.vals__head h2{margin-top:14px;max-width:12ch}
.vals__head p{font-size:15px;line-height:1.6;color:var(--muted);max-width:44ch;margin-top:16px}
/* ---- the cascade ----
   Three cards overlapping down a shallow arc, first on top. The
   overlap is exactly the extra left padding each overlapped card is
   given, so the hidden strip is always padding: no text is ever
   underneath a neighbour. Rotation is kept near 1 degree, enough to
   read as a curve, not enough to fight the baseline. */
.vals{
  --pad-card:clamp(20px,2.2vw,28px);
  --lap:clamp(26px,2.6vw,38px);
  /* stretch, not flex-start: unequal card heights made the mirrored
     arc land a couple of pixels out of true. Equal heights make the
     symmetry exact. */
  display:flex;align-items:stretch;gap:0;
  padding-top:34px;padding-bottom:46px;
}

/* ---- the character ----
   Soft rounded slabs sit behind her so the column reads as composed
   whether or not the illustration has been dropped in yet. She is
   bottom-aligned and allowed to break the section's lower edge. */
.hero-char{
  position:absolute;right:var(--char-inset);left:auto;bottom:0;z-index:0;
  width:var(--char-w);height:clamp(340px,36vw,600px);
}
.hero-char__shapes{position:absolute;inset:0;pointer-events:none}
.hero-char__shapes i{
  position:absolute;display:block;border-radius:clamp(26px,3.4vw,46px);
  background:linear-gradient(150deg,rgba(146,156,255,.30),rgba(190,214,255,.16));
}
.hero-char__shapes i:nth-child(1){right:6%;top:4%;width:62%;height:52%;transform:rotate(-28deg)}
.hero-char__shapes i:nth-child(2){right:-8%;top:38%;width:54%;height:46%;transform:rotate(-28deg);
  background:linear-gradient(150deg,rgba(168,196,255,.34),rgba(214,228,255,.12))}
.hero-char__shapes i:nth-child(3){right:30%;bottom:2%;width:40%;height:30%;transform:rotate(-28deg);
  background:linear-gradient(150deg,rgba(198,208,255,.26),transparent)}

/* She stands on the section's lower edge rather than floating in the
   slot: anchored to the bottom, so whatever her height, her feet meet
   the boundary the way the reference shows. */
.hero-char__img{
  position:absolute;left:0;right:0;bottom:0;z-index:2;display:block;
  width:100%;height:auto;
}
/* until the illustration exists, the slab composition stands alone */
.hero-char__img[data-missing]{display:none}
.val{
  --ty:0px; --rot:0deg; --lift:0px;
  flex:0 0 calc((100% + 2 * var(--lap)) / 3);min-width:0;position:relative;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--pad-card);
  transform:translateY(calc(var(--ty) + var(--lift))) rotate(var(--rot));
  transform-origin:50% 60%;
  box-shadow:0 1px 2px rgba(10,20,40,.04), 0 18px 36px -20px rgba(10,20,40,.24);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),
              border-color .25s var(--ease-io),background-color .3s var(--ease-io),
              color .25s var(--ease-io);
}
/* the overlapped pair carry the lap as extra padding */
.val + .val{margin-left:calc(var(--lap) * -1);padding-left:calc(var(--pad-card) + var(--lap))}

/* An even staircase: first highest, second exactly between, third
   lowest. The step is the same both times and the tilt increments by
   the same amount, so the run is regular rather than eyeballed. */
.val:nth-child(1){--ty:-30px;--rot:-1.3deg;z-index:3;
  box-shadow:0 2px 4px rgba(10,20,40,.05), 0 28px 52px -24px rgba(10,20,40,.32)}
.val:nth-child(2){--ty:0px;  --rot:0deg;   z-index:2}
.val:nth-child(3){--ty:30px; --rot:1.3deg; z-index:1}

/* Hover turns the card into pale blue glass: a light tint over a blur
   of whatever is behind it, with a 1px inner highlight along the top
   edge so it refracts rather than just tinting. Most visible on the
   third card, where she is the thing being blurred. The card also
   comes to the front, so the one being read is never clipped. */
.val:hover{
  --lift:-9px;z-index:4;
  background:linear-gradient(155deg,
    rgba(222,235,255,.78) 0%,
    rgba(238,245,255,.62) 55%,
    rgba(248,251,255,.58) 100%);
  backdrop-filter:blur(16px) saturate(165%);
  -webkit-backdrop-filter:blur(16px) saturate(165%);
  border-color:rgba(18,102,255,.26);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(255,255,255,.3),
    0 3px 8px -3px rgba(18,102,255,.16),
    0 36px 64px -26px rgba(16,42,96,.34);
}
.val:hover h3{color:#05101E}
.val:hover p{color:#2C3746}

/* The cards also carry .rv, and .rv.in sets transform:none at a higher
   specificity than .val, which flattened the whole cascade. These two
   rules fold the reveal into the stagger instead of fighting it: the
   card enters from 18px below its own resting place. */
.val.rv{opacity:0;transform:translateY(calc(var(--ty) + 18px)) rotate(var(--rot))}
.val.rv.in{opacity:1;transform:translateY(calc(var(--ty) + var(--lift))) rotate(var(--rot))}
.val .ico{margin-bottom:18px}
.val h3{margin-bottom:9px}
.val p{font-size:13.8px;line-height:1.6;color:var(--muted)}
@media (max-width:1100px){
  /* below this the cards would be too narrow beside her, so the copy
     takes the full row and she steps out */
  .hero-char{display:none}
}
@media (max-width:900px){
  /* no rotation, no overlap, no stagger: a cascade on a narrow screen
     is just cards covering each other */
  .vals{display:grid;grid-template-columns:1fr;gap:clamp(14px,1.6vw,22px);
    padding-top:0;padding-bottom:0}
  .val,.val:nth-child(1),.val:nth-child(2),.val:nth-child(3){
    --ty:0px;--rot:0deg;z-index:auto}
  .val.rv{transform:translateY(18px)}
  .val.rv.in{transform:none}
  .val + .val{margin-left:0;padding-left:var(--pad-card)}
  .vals__head h2{max-width:none}
  .vals__head p{max-width:none}
}


/* ============================================================
   STORY
   ============================================================ */
/* One full-bleed photograph with the headline set straight onto it.
   It is the only edge-to-edge band on the page, which is what makes
   it read as a chapter break rather than one more card in a stack. */
.story-sec{padding-top:clamp(40px,4.4vw,76px);padding-bottom:var(--pad)}
.story-band{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(340px,58vw,820px);
  display:flex;align-items:flex-end;
  background:#050B16;
}
.story-band img{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:50% 30%;
}
/* White type over a photograph of a bright roof needs a real scrim,
   not a token one. The text column is held inside the zone where the
   wash is at least 80 percent, so the headline clears AA for large
   text against the lightest thing the crop can put behind it. */
.story-band::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top,
      rgba(4,10,22,.92) 0%,  rgba(4,10,22,.86) 24%, rgba(4,10,22,.74) 38%,
      rgba(4,10,22,.46) 45%, rgba(4,10,22,.16) 55%, rgba(4,10,22,.04) 70%,
      rgba(4,10,22,0) 100%),
    linear-gradient(100deg,rgba(4,10,22,.18) 0%,rgba(4,10,22,.06) 48%,
      rgba(4,10,22,0) 72%);
}
.story-band__in{
  position:relative;z-index:2;width:100%;max-width:var(--shell);
  margin-inline:auto;
  padding:clamp(54px,7vw,110px) var(--gut) clamp(34px,4.6vw,72px);
}
.story-eyebrow{
  display:inline-block;font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.94);
  /* 12px sits at the top of the wash where it is thinnest; a soft
     shadow buys the margin without darkening the photograph again */
  text-shadow:0 1px 12px rgba(4,10,22,.6);
  margin-bottom:clamp(14px,1.8vw,24px);
}
.story-band h2{
  color:#FFF;max-width:11ch;
  font-size:clamp(38px,7.2vw,104px);line-height:.94;letter-spacing:-.042em;
}

/* Under the photograph the story resolves into two panels: the old way
   on the dark ground sitting high, the new way light and set lower, so
   the eye travels down out of the dark half into the light one. */
.story-after{
  width:100%;max-width:var(--shell);margin-inline:auto;
  padding:clamp(34px,4vw,60px) var(--gut) 0;
}
.story-lead{
  font-family:var(--display);font-weight:500;color:var(--ink);
  font-size:clamp(23px,2.9vw,38px);line-height:1.16;letter-spacing:-.032em;
  max-width:24ch;text-wrap:balance;
}
.story-k{
  display:block;font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.story-pair{
  margin-top:clamp(26px,3.2vw,44px);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,32px);align-items:start;
}
.story-side{border-radius:var(--r-lg);padding:clamp(22px,2.6vw,36px)}
/* shared rule first: the two modifiers below weigh exactly the same as
   this one, so they have to come after it to be able to win */
.story-side p{
  font-size:clamp(14.5px,1.1vw,16.5px);line-height:1.68;color:var(--ink-2);margin-top:16px;
}
.story-side p + p{margin-top:12px}
.story-side--was{
  background:linear-gradient(168deg,var(--navy),var(--navy-deep));box-shadow:var(--sh-2);
}
.story-side--was .story-k{color:#8FB6FF}
.story-side--was p{color:rgba(255,255,255,.82)}
.story-side--is{
  background:var(--card);border:1px solid var(--line);margin-top:clamp(20px,3.4vw,52px);
}
.story-side--is .story-k{color:var(--blue-ink)}
.story-turn{
  margin:clamp(28px,3.4vw,48px) auto 0;text-align:center;
  font-family:var(--display);font-weight:500;color:var(--ink);
  font-size:clamp(19px,2.3vw,30px);line-height:1.32;letter-spacing:-.028em;
  max-width:34ch;text-wrap:balance;
}
.story-foot{
  margin-top:clamp(26px,3vw,42px);padding-top:clamp(22px,2.6vw,32px);
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,48px);align-items:start;
}
.story-foot p{font-size:clamp(15px,1.15vw,17px);line-height:1.66;color:var(--ink-2)}
.story-foot p.story-close{color:var(--ink);font-size:clamp(15px,1.2vw,17.5px);line-height:1.64}
.story-foot .btn{margin-top:20px}

@media (max-width:880px){
  .story-pair,.story-foot{grid-template-columns:1fr}
  /* the offset is a two column device; stacked it would just be a gap */
  .story-side--is{margin-top:0}
  .story-foot{gap:22px}
  .story-lead{max-width:none}
}
@media (max-width:700px){
  /* the type spans the whole frame here, so the side bias comes off
     and the rise from the floor does all the work */
  .story-band::after{
    background:linear-gradient(to top,
      rgba(4,10,22,.90) 0%,rgba(4,10,22,.82) 42%,
      rgba(4,10,22,.48) 62%,rgba(4,10,22,.18) 80%,rgba(4,10,22,.06) 100%);
  }
  .story-band h2{max-width:none}
}

/* ---------- manifesto ---------- */
.manifesto{text-align:center;padding-block:clamp(40px,5vw,78px)}
.manifesto p{
  max-width:44ch;margin-inline:auto;
  font-family:var(--display);font-size:clamp(18px,2.1vw,27px);font-weight:500;
  line-height:1.42;letter-spacing:-.024em;color:var(--muted);text-wrap:balance;
}
.manifesto b{color:var(--ink);font-weight:500}

/* ============================================================
   FAQ
   ============================================================ */
.faq{background:var(--card);border-block:1px solid var(--line-2)}
.faq h2{margin-top:16px;max-width:18ch}
.faq .lede{margin-top:14px}
.faq__cols{margin-top:clamp(26px,3.2vw,42px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,18px)}
.faq__c{display:grid;gap:clamp(10px,1.1vw,14px);align-content:start}
.qa{
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r);
  transition:border-color .25s var(--ease-io),background-color .25s var(--ease-io);
}
.qa[open]{background:var(--card);border-color:var(--line)}
.qa summary{
  list-style:none;cursor:pointer;padding:16px 18px;
  display:flex;align-items:center;gap:14px;
  font-size:14.5px;font-weight:500;color:var(--ink);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";margin-left:auto;flex:none;width:17px;height:17px;
  background:
    linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;
  color:var(--muted);transition:transform .34s var(--ease),color .2s ease;
}
.qa[open] summary::after{transform:rotate(90deg);color:var(--ink)}
.qa[open] summary::before{content:none}
.qa__b{padding:0 18px 17px;font-size:13.5px;color:var(--muted);line-height:1.6}
.qa__b p+p{margin-top:9px}
@media (max-width:760px){.faq__cols{grid-template-columns:1fr}}

/* ============================================================
   CTA + FOOTER
   ============================================================ */
.foot{background:var(--navy-deep);color:#93A0B4;margin-top:clamp(34px,4vw,58px);
  border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden;position:relative}
.foot__in{max-width:var(--shell);margin-inline:auto;padding:clamp(38px,4.4vw,64px) var(--gut) 0}
.foot__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px;padding-bottom:38px}
.foot .brand{color:#fff}
.foot__blurb{margin-top:14px;font-size:13.5px;max-width:32ch;line-height:1.6}
.foot h4{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:#7C8798;margin:0 0 14px}
.foot ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.foot ul a{font-size:13.5px;color:#AEB9C9;text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .34s var(--ease),color .2s ease}
.foot ul a:hover{color:#fff;background-size:100% 1px}
.foot__mark{
  font-family:var(--display);font-weight:700;letter-spacing:-.055em;
  font-size:clamp(56px,15vw,210px);line-height:.78;color:rgba(255,255,255,.055);
  padding:0 var(--gut);max-width:var(--shell);margin:0 auto;
  user-select:none;pointer-events:none;white-space:nowrap;
}
.foot__btm{
  max-width:var(--shell);margin-inline:auto;padding:18px var(--gut) 22px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;flex-wrap:wrap;gap:10px 22px;font-size:12.5px;color:#7C8798;
}
.foot__btm a{text-decoration:none;color:#7C8798}
.foot__btm a:hover{color:#fff}
.foot__btm .sp{margin-left:auto}
@media (max-width:820px){
  .foot__top{grid-template-columns:1fr 1fr;gap:26px}
  .foot__blurb{max-width:none}
  .foot__btm .sp{margin-left:0;width:100%}
}

/* ============================================================
   MOTION
   ============================================================ */
.rv{opacity:0;transform:translateY(16px)}
.rv.in{opacity:1;transform:none;
  transition:opacity .62s var(--ease) var(--rd,0ms),transform .62s var(--ease) var(--rd,0ms)}

@media (prefers-reduced-transparency:reduce){
  .fcard{background:rgba(248,250,252,.97);backdrop-filter:none;-webkit-backdrop-filter:none;
    border-color:var(--line)}
  .val:hover{background:#EFF5FF;backdrop-filter:none;-webkit-backdrop-filter:none}
}
/* no pointer, no hover state worth building for */
@media (hover:none){
  .val:hover{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--card)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.mosaic .tile{opacity:1;transform:none;transition:none}
  /* the stagger is layout, not motion, so it stays; only the lift goes */
  .val:hover{--lift:0px}
  .is-lit .rt__b span i,.rt__b span i{transition:none;transform:scaleX(var(--w,1))}
  .btn,.tile,.cap,.lg{transition:none}
  .btn:hover,.tile:hover,.cap:hover,.lg:hover{transform:none}
}

/* ---------- touch targets ----------
   Declared last so nothing later in the sheet can shrink one back
   under the 44px minimum for a coarse pointer. */
@media (pointer:coarse){
  .btn,.nav__end .btn,.burger{min-height:44px}
  .brand,.nav__links a,.foot ul a,.foot__btm a,.lg,.qa summary{
    min-height:44px;display:inline-flex;align-items:center;
  }
  .qa summary{display:flex}
  .foot ul{gap:2px}
}
/* the narrow-screen hide must still win over the rule above */
@media (max-width:880px){
  .nav__links,.nav__end .signin{display:none}
}
/* Six items need more room than the bar has below this, and the main
   site drops its own links at exactly this width, so both pages now
   change shape at the same point. The burger comes in here too: hiding
   the links without offering the menu leaves no way to navigate. */
@media (max-width:1180px){
  .nav__links{display:none}
  .burger{display:block}
}

/* ---------- brand mark ----------
   The drawn blue square is replaced by the monogram from the logo.
   On the navy footer the dark mark would vanish, so that one gets the
   light cut of the same drawing. */
.brand__m{
  background:url("../img/logo-mark.webp") center/contain no-repeat;
  border-radius:0;
}
.brand__m i{display:none}
.foot .brand__m{background-image:url("../img/logo-mark-light.webp")}

/* ============================================================
   MOTION
   One orchestrated moment, one stagger that means something, and
   one piece of feedback. Everything here moves on transform and
   opacity only, so none of it touches layout.
   ============================================================ */

/* ---- the photograph drifts as the band passes ----
   Held at 1.08 so the drift can never expose an edge of the frame. */
.story-band img{transform:scale(1.08) translate3d(0,var(--py,0%),0)}
.story-band.is-live img{will-change:transform}

/* ---- the heading arrives a line at a time ----
   The script measures where the text actually breaks, then rebuilds
   it as masked lines. Until that runs the heading is just a heading,
   which is what a visitor with no scripting should get. */
.bandline.is-split .ln{display:block;overflow:hidden;padding-bottom:.045em}
.bandline.is-split .ln__i{
  display:block;transform:translateY(110%);
  transition:transform .95s var(--ease) calc(var(--li) * 110ms);
}
.bandline.is-split.in .ln__i{transform:none}

/* ---- the two panels keep different time ----
   Same distance, same easing, same duration. Only the rhythm differs:
   the scattered side arrives out of step, the connected side in step.
   That is the one thing this section is actually about, so it is the
   one thing the motion is allowed to say. */
.story-side p{
  opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--ease) var(--d,0ms),transform .7s var(--ease) var(--d,0ms);
}
.story-pair.in .story-side p{opacity:1;transform:none}
.story-side--was p:nth-of-type(1){--d:40ms}
.story-side--was p:nth-of-type(2){--d:300ms}
.story-side--was p:nth-of-type(3){--d:470ms}
.story-side--is  p:nth-of-type(1){--d:130ms}
.story-side--is  p:nth-of-type(2){--d:260ms}
.story-side--is  p:nth-of-type(3){--d:390ms}

/* ---- the bar lifts off the page once you leave the top ---- */
.nav__in{transition:box-shadow .35s var(--ease-io),background-color .35s var(--ease-io)}
.nav.is-stuck .nav__in{
  background:rgba(255,255,255,.93);
  box-shadow:0 1px 2px rgba(10,20,40,.05),0 18px 38px -22px rgba(10,20,40,.38);
}

@media (prefers-reduced-motion:reduce){
  .story-band img{transform:scale(1.08)}
  .bandline.is-split .ln__i{transform:none;transition:none}
  .story-side p{opacity:1;transform:none;transition:none}
  .nav__in{transition:none}
}

/* ============================================================
   NAV — matched to the landing page (spectra-one_45_panels.html)
   Same bar geometry, same link rhythm, same blue CTA, so the
   three pages read as one site. Declared last so it wins.
   ============================================================ */
.nav{padding-top:14px;padding-bottom:0}
.nav > .shell{--gut:36px;max-width:calc(1120px + 72px)}
.nav__in{
  gap:26px;padding:11px 12px 11px 20px;border-radius:15px;
  background:rgba(255,255,255,.55);border:1px solid rgba(10,20,40,.05);
  box-shadow:0 1px 1px rgba(10,20,40,.02);
  backdrop-filter:blur(0px) saturate(1);-webkit-backdrop-filter:blur(0px) saturate(1);
  transition:background-color .5s,box-shadow .5s,border-color .5s,padding .5s,
             backdrop-filter .5s,transform .5s cubic-bezier(.2,.8,.2,1);
}
.nav.is-stuck .nav__in{
  background:rgba(255,255,255,.82);border-color:rgba(10,20,40,.09);
  box-shadow:0 1px 2px rgba(10,20,40,.05),0 12px 34px -18px rgba(10,20,40,.28);
  backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);
  padding:8px 10px 8px 18px;transform:scale(.985);
}
.brand{gap:10px;font-weight:600;font-size:16.5px;letter-spacing:-.02em}
.brand__m{width:26px;height:26px}
.nav__links{gap:3px;margin:0 auto 0 0}
.nav__links a{padding:7px 12px;border-radius:8px;font-size:14px;font-weight:450;color:var(--muted)}
.nav__links a:hover{color:var(--ink);background:rgba(10,20,40,.04)}
.nav__links a[aria-current="page"]{color:var(--ink);background:transparent;font-weight:500}
.nav__links a[aria-current="page"]:hover{background:rgba(10,20,40,.04)}
.nav__end{gap:6px}
.nav__end .signin{padding:9px 12px;font-size:14px;font-weight:450;color:var(--ink);border-radius:9px;transition:background-color .2s}
.nav__end .signin:hover{background:rgba(10,20,40,.04);color:var(--ink)}
.nav__end .btn{
  padding:9px 16px;border-radius:9px;font-size:13.5px;font-weight:550;letter-spacing:-.006em;
  background:var(--blue);color:#fff;border-color:transparent;
  box-shadow:0 10px 30px -10px rgba(18,102,255,.45);
}
.nav__end .btn:hover{transform:none;background:var(--blue);box-shadow:0 14px 34px -8px rgba(18,102,255,.55)}
.nav__end .btn:active{transform:translateY(1px) scale(.99)}
.nav__end .btn .btn__x{display:none}
.burger{width:38px;height:38px;padding:0;border-radius:10px;display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.burger span+span{margin-top:0}
@media (max-width:1180px){ .burger{display:flex} }
@media (max-width:880px){
  .nav__in{gap:10px;padding:8px 8px 8px 14px}
  .brand{font-size:15.5px}
  .brand__m{width:22px;height:22px}
  .nav__end .btn{padding:9px 14px;font-size:13.5px}
}