/* ---------------------------------------------------------------------------
   Strong Tail Solar Alliance — site styles
   Loaded after tokens.css, which defines every custom property used here.
   --------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--cream);
  -webkit-font-smoothing:antialiased;font-size:16px}
img,svg{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ============================ shared primitives ========================== */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);
  position:relative;z-index:10}
.sec{position:relative;overflow:hidden;isolation:isolate;padding:var(--s8) 0}
.sec--slim{padding:var(--s6) 0}
.layer{position:absolute;inset:0;z-index:0;pointer-events:none}

/* grounds */
.g-white{background:var(--white)}
.g-tint{background:var(--tint)}
.g-dark{background:var(--blue);color:var(--on-dark)}
.sky{background:linear-gradient(162deg,#ADC4E0 0%,var(--blue-1) 24%,#DEDDE8 50%,var(--salmon-1) 80%,var(--yellow-1) 100%)}
.wash{background:radial-gradient(ellipse 58% 66% at 84% 6%,rgba(255,255,255,.76) 0%,rgba(255,255,255,0) 62%)}
.grain{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:var(--grain);mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px}
.g-dark .grain{mix-blend-mode:screen;opacity:.14}

/* ring geometry: one shared centre, gaps compressed on the right */
.orb{position:absolute;border-radius:50%;z-index:2;pointer-events:none;
  width:calc(var(--r)*2);height:calc(var(--r)*2);
  right:calc(var(--cx) - var(--r) + var(--skew)*(var(--r) - var(--r0)));
  bottom:calc(var(--cy) - var(--r))}
.r1{--r:235px;border:1px solid var(--l1)} .r2{--r:330px;border:1px solid var(--l2)}
.r3{--r:435px;border:1px solid var(--l3)} .r4{--r:548px;border:1px solid var(--l4)}
.horizon{position:absolute;left:var(--gutter);right:var(--gutter);bottom:26px;height:1px;
  background:var(--rule);z-index:3}

/* type */
h1,h2,h3,h4,p{margin:0}
.h1{font-size:clamp(32px,3.9vw,52px);font-weight:600;line-height:1.08;letter-spacing:-.026em}
.h2{font-size:clamp(26px,2.8vw,38px);font-weight:600;line-height:1.14;letter-spacing:-.022em}
.h3{font-size:20px;font-weight:600;line-height:1.28;letter-spacing:-.012em}
.lede{font-size:17.5px;font-weight:400;line-height:1.65;color:var(--ink-soft);max-width:68ch}
.body{font-size:16px;line-height:1.66;color:var(--ink-soft)}
.small{font-size:14.5px;line-height:1.55;color:var(--ink-soft)}
.micro{font-size:13.5px;font-weight:600;color:#42596E;letter-spacing:.015em}
.eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.20em;text-transform:uppercase;color:#8494A3}
.g-dark .lede,.g-dark .body,.g-dark .small{color:var(--on-dark-soft)}
.g-dark .eyebrow{color:#7E93A8}

/* section intro: left aligned, same axis as the hero headline */
.intro{max-width:760px;margin:0 0 var(--s6)}
.intro .eyebrow{margin:0 0 var(--s3)}
.intro .h2{margin:0 0 var(--s4)}
.centred{text-align:center;margin-left:auto;margin-right:auto}

/* buttons: solid yellow everywhere, one primary action on the page */
.btn{border-radius:999px;font-family:var(--font);cursor:pointer;border:0;
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  background:var(--yellow);color:var(--blue);font-weight:700;
  box-shadow:0 10px 26px rgba(0,20,45,.16);transition:background .18s ease,box-shadow .18s ease,transform .18s ease}
.btn:hover{background:var(--yellow-h);box-shadow:0 12px 30px rgba(0,20,45,.20);transform:translateY(-1px)}
.btn--lg{font-size:15.5px;padding:0 30px;min-height:54px}
.btn--sm{font-size:13.5px;padding:0 20px;min-height:44px}
.btn--wide{width:100%}
.tlink{font-size:14px;font-weight:600;color:var(--ink-soft);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color .18s ease,border-color .18s ease}
.tlink .arw{display:inline-block;margin-left:7px;transition:transform .18s ease}
.tlink:hover{color:var(--accent-text);border-bottom-color:rgba(201,72,31,.36)}

/* ============================== header =================================== */
.site-header{order:0;position:sticky;top:0;z-index:120;height:82px;display:flex;align-items:center;
  transition:background .25s ease,box-shadow .25s ease,height .25s ease}
.site-header .bar{max-width:var(--maxw);width:100%;margin:0 auto;padding:0 var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.site-header .nav{display:flex;align-items:center;gap:30px;font-size:13.5px;font-weight:500;color:var(--ink)}
.site-header .nav>a{opacity:.74;text-decoration:none}
.site-header .nav>a.btn{opacity:1}
.cta-short{display:none}
.site-header .nav>a:hover{opacity:1}
.site-header.stuck{background:rgba(255,255,255,.86);height:68px;
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 1px 0 var(--rule-soft),0 8px 24px rgba(0,20,45,.06)}
.wm{color:var(--ink);display:flex;align-items:center;gap:9px;line-height:1}
.wm-a{font-size:15px;font-weight:700;letter-spacing:.13em}
.wm-b{font-size:15px;font-weight:400;letter-spacing:.13em;color:var(--ink-soft)}

/* =============================== hero ==================================== */
.hero{min-height:636px;display:flex;align-items:center;padding:0;margin-top:-82px}
.hero .wrap{width:100%;padding-top:200px;padding-bottom:52px}
.hero .copy{max-width:700px}
.hero .h1{margin:0 0 var(--s4)}
.hero .lede{margin:0 0 36px}
.hero .micro{margin:24px 0 0}

/* ============================ logo strip ================================= */
.strip{padding:30px 0 34px}
.strip .lbl{margin:0 0 var(--s3)}
.logo-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px 44px}
.logo-slot{font-size:13px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
  color:#5A6E80;opacity:.85}

/* ============================== cards ==================================== */
.grid{display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
.grid--3>*{flex:0 1 calc((100% - 44px)/3)}
.card{cursor:pointer;background:var(--white);border:1px solid rgba(0,20,45,.10);border-radius:16px;padding:26px 24px 24px;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.card .cat{position:absolute;top:24px;right:22px;font-size:9.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#7C8FA1;border:1px solid rgba(0,20,45,.14);border-radius:999px;padding:5px 9px}
.card:hover,.card:focus-within{border-color:rgba(255,111,71,.90);
  box-shadow:0 16px 38px rgba(255,111,71,.16);transform:translateY(-3px)}
.card:hover .offer,.card:focus-within .offer{border-bottom-color:rgba(255,111,71,.42)}
.card:hover .cat,.card:focus-within .cat{color:var(--accent-text);border-color:rgba(201,72,31,.38)}
.card:hover .tlink,.card:focus-within .tlink{color:var(--accent-text);border-bottom-color:rgba(201,72,31,.36)}
.card:hover .tlink .arw,.card:focus-within .tlink .arw{transform:translateX(5px)}
.card .slot{height:40px;display:flex;align-items:center;margin:0 0 22px}
.card .slot img.lg{height:var(--lh);width:auto;object-fit:contain}
.card .slot .ph{font-size:14px;font-weight:700;letter-spacing:.06em;color:#3E5468;
  border:1px dashed rgba(0,20,45,.20);border-radius:6px;padding:7px 11px;line-height:1}
.card .offer{font-size:21px;font-weight:600;line-height:1.24;letter-spacing:-.014em;color:var(--ink);
  margin:0 0 14px;padding-bottom:14px;border-bottom:1px solid rgba(0,20,45,.09);
  transition:border-color .18s ease}
.card .slot{max-width:calc(100% - 96px)}
.card .qual{font-size:14px;line-height:1.55;color:var(--ink-soft);margin:0 0 20px}
.card .card-cta{margin-top:auto}
.tail{margin:var(--s6) 0 0;text-align:center}
.tail .small{margin:0 auto}
.target{margin:var(--s5) auto 0;max-width:720px;text-align:center;
  font-size:clamp(19px,1.7vw,23px);font-weight:600;line-height:1.42;letter-spacing:-.012em;color:var(--ink)}
.target b{color:var(--accent-text);font-weight:600}

/* ============================ webinar cards ============================== */
.datebox{display:flex;align-items:baseline;gap:9px;margin:0 0 18px;padding:0 0 16px;
  border-bottom:1px solid rgba(0,20,45,.10)}
.datebox .mo{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-text)}
.datebox .day{font-size:36px;font-weight:700;line-height:.9;letter-spacing:-.035em;color:var(--ink)}
.datebox .yr{font-size:12px;font-weight:600;color:#8494A3;margin-left:auto}
.card--edu .h3{margin:0 0 10px}
.card--edu .with{font-size:13px;font-weight:600;color:#6B8098;margin:0 0 12px}
.card--edu .take{font-size:14px;line-height:1.55;color:var(--ink-soft);margin:0 0 22px}

/* ============================== compact ================================== */
.compact{padding:var(--s8) 0}
.compact .intro{max-width:820px;margin:0 0 var(--s6)}
.pact-label{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--yellow);margin:0 0 var(--s4)}
.pact{max-width:860px;border-top:1px solid rgba(255,255,255,.14)}
.pact .row{display:grid;grid-template-columns:56px 1fr;gap:0 20px;padding:26px 0;
  border-bottom:1px solid rgba(255,255,255,.14)}
.pact .num{font-size:30px;font-weight:700;line-height:1;color:var(--yellow);letter-spacing:-.02em}
.pact .claim{font-size:20px;font-weight:600;line-height:1.3;letter-spacing:-.014em;color:#fff;margin:0 0 8px}
.pact .sup{font-size:15px;line-height:1.6;color:var(--on-dark-soft);margin:0}

/* =============================== FAQ ===================================== */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--rule-soft)}
.faq details:first-of-type{border-top:1px solid var(--rule-soft)}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:1.6px solid var(--ink-soft);border-bottom:1.6px solid var(--ink-soft);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .ans{padding:0 40px 22px 0;font-size:15.5px;line-height:1.62;color:var(--ink-soft)}

/* =============================== join ==================================== */
.join-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.join-copy .h2{margin:0 0 var(--s4)}
.join-copy p{margin:0 0 16px}
.form{background:var(--white);border:1px solid rgba(0,20,45,.10);border-radius:16px;padding:28px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin:0 0 14px}
.field label{display:block;font-size:12px;font-weight:600;letter-spacing:.04em;color:#5A6E80;margin:0 0 6px}
.field input,.field select{width:100%;font-family:var(--font);font-size:16px;color:var(--ink);
  background:#FBFCFD;border:1px solid rgba(0,20,45,.16);border-radius:9px;padding:11px 12px}
.field input:focus,.field select:focus{outline:2px solid var(--ink);outline-offset:1px}
.radios{display:flex;gap:18px;flex-wrap:wrap;font-size:14.5px;color:var(--ink)}
.radios label{display:flex;align-items:center;gap:7px}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;font-size:14px;color:var(--ink-soft)}
.checks label{display:flex;align-items:center;gap:7px}
.fieldset{margin:0 0 18px;padding:0;border:0}
.fieldset legend{padding:0;font-size:12px;font-weight:600;letter-spacing:.04em;color:#5A6E80;margin:0 0 8px}
.steps-list{list-style:none;margin:var(--s5) 0 0;padding:0}
.steps-list li{display:grid;grid-template-columns:38px 1fr;gap:0 16px;padding:0 0 22px;position:relative}
.steps-list li:not(:last-child)::before{content:"";position:absolute;left:18px;top:34px;bottom:4px;
  width:1px;background:rgba(0,20,45,.14)}
.steps-list .sn{width:36px;height:36px;border-radius:50%;background:var(--yellow);color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700}
.steps-list .st{font-size:17px;font-weight:600;letter-spacing:-.01em;margin:6px 0 6px}

/* ============================ closing band =============================== */
.close{padding:var(--s8) 0;min-height:520px;display:flex;align-items:center;
  text-align:center;background:var(--white)}
.close .wrap{width:100%}
.close .h2{font-size:clamp(28px,3.2vw,44px)}
.sec--close .sky{opacity:.72}
.sec--close .orb{opacity:.8}
.close .h2{margin:0 0 var(--s5);max-width:620px;margin-left:auto;margin-right:auto}

/* ============================== footer =================================== */
.foot{background:var(--white);border-top:1px solid var(--rule-soft);padding:44px 0 52px}
.foot .row{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
.foot .op{font-size:13px;line-height:1.7;color:var(--ink-soft);max-width:520px}
.foot .op b{color:var(--ink);font-weight:600}
.foot .links{display:flex;gap:22px;font-size:13px;font-weight:500;color:var(--ink-soft);flex-wrap:wrap}
.foot .links a{text-decoration:none}

/* ====================== rhythm: bookends / alt / continuous ============== */
.sec--edu{background:transparent}
.sec--faqs .layer.sky,.sec--faqs .layer.wash,.sec--faqs .orb,.sec--faqs .grain{display:none}

/* ============================ order control ============================== */
/* The CSS `order` values that used to live here were removed: they made visual
   order diverge from DOM order, so a keyboard user tabbed the FAQ before the
   form they could see above it (WCAG 2.4.3). index.html now carries the
   documented order directly. See DECISIONS.md. */
.page{display:flex;flex-direction:column}
/* grounds for the two sections whose class does not carry them */
.sec--faqs{background:var(--white)}
.sec--join{background:var(--tint)}

/* =============================== mobile ================================== */
@media (max-width:1000px){
  .grid--3>*{flex-basis:calc((100% - 22px)/2)}
  .join-grid{grid-template-columns:1fr;gap:36px}
}
@media (max-width:900px){
  :root{--gutter:26px;--s7:64px;--s8:80px;--cx:180px;--cy:-70px;--r0:150px}
  .r1{--r:150px} .r2{--r:210px} .r3{--r:276px} .r4{--r:348px}
  .site-header .nav>a:not(.btn){display:none}
  .cta-long{display:none} .cta-short{display:inline}
  .hero{min-height:0} .hero .wrap{padding-top:170px;padding-bottom:128px}
  .horizon{bottom:22px}
  .checks{grid-template-columns:1fr}
}
@media (max-width:620px){
  .wm{flex-direction:column;align-items:flex-start;gap:4px}
  .wm-a{font-size:15px;letter-spacing:.02em}
  .wm-b{font-size:9.5px;font-weight:500;letter-spacing:.26em}
  .grid--3>*{flex-basis:100%}
  .f-row{grid-template-columns:1fr}
  .logo-row{gap:14px 26px} .logo-slot{font-size:11px}
  .pact .row{grid-template-columns:38px 1fr;gap:0 14px}
  .pact .num{font-size:24px}
}

/* ====================== project additions ================================
   Two things the reference implementation has no equivalent for, kept in one
   marked block so site.css stays diffable against the design session output.
   Everything above this line is the kit's, minus the removed `order` block. */

/* Skip link. The kit has no landmark navigation of its own. */
.skip-link{position:absolute;left:var(--s3);top:-100px;z-index:200;
  background:var(--yellow);color:var(--blue);padding:12px 18px;border-radius:9px;
  font-size:14.5px;font-weight:700;text-decoration:none}
.skip-link:focus{top:var(--s3)}

/* Status line under the form submit. The kit's form is a visual stand-in with
   an <a> for a button, so it has nothing to report. Remove with the native
   form when the HubSpot embed goes in. */
.form-note{margin:14px 0 0;text-align:center;color:var(--accent-text)}
.form-note:empty{display:none}

/* DESIGN-SYSTEM section 9 requires this and the reference implementation has no
   rule for it, so the card hover, the header fade and the smooth scroll all ran
   regardless of the setting. `transition` is what carries every state change on
   this page, so switching it off is the whole of the work. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
}

/* Founding partner strip: the real marks, at their supplied colours.
   COPY.md section 2 governs this: "Logos as supplied, never tinted, textured or
   recoloured." So no greyscale, no filter, and no opacity dim on an image slot.
   The kit's .logo-slot sets opacity:.85, which is right for grey fallback text
   and wrong for a supplied logo, and a parent opacity creates a group a child
   cannot climb back out of. Hence a class on the slot rather than a rule on the
   img.

   Height derives from the same per-partner optical logoHeight the card uses,
   scaled by --strip-scale. Never set both width and height: constrain one and
   let the mark keep its ratio. DESIGN-SYSTEM section 9. */
.logo-row{ --strip-scale: 1 }
.logo-slot--img{ opacity: 1 }
.logo-slot--img img{
  height: calc(var(--lh) * var(--strip-scale) * var(--strip-fix, 1));
  width: auto; max-width: 100%; object-fit: contain;
}

/* Per-partner optical correction, tuned by eye against the row rather than
   calculated. --lh arrives inline from logoHeight and is the CARD's number, so
   inline wins over any rule here; --strip-fix multiplies it on the slot
   instead. Five marks side by side is a different problem from one mark alone
   in a card slot: JA Solar's chunky wordmark dominated the row at its card
   height, and Damaris's 9.5:1 wordmark disappeared at its.
   DESIGN-SYSTEM section 9: optical weight, never a shared pixel height. */
.logo-slot--climate-first-bank{ --strip-fix: .80 }   /* 36 -> 29 */
.logo-slot--bodhi            { --strip-fix: 1.05 }   /* 23 -> 24 */
.logo-slot--scanifly         { --strip-fix: .96 }    /* 24 -> 23 */
.logo-slot--ja-solar         { --strip-fix: .75 }    /* 24 -> 18 */
.logo-slot--damaris-solutions{ --strip-fix: 1.18 }   /* 17 -> 20 */
/* No step-down at the breakpoints on purpose. Shrinking the marks to hold one
   line is the thing DESIGN-SYSTEM section 9 rules out: "the strip wraps to two
   rows on tablet and three on mobile", and minimum legible height is about
   20px. At scale 1 the row wraps on its own at exactly those points and every
   mark stays legible; stepping --strip-scale down to .78 put JA Solar at 14px
   on a phone. --strip-scale stays as the single knob if the roster grows. */

/* Closing band supporting line. DESIGN-SYSTEM section 8 specified "one line, one
   button, nothing else"; Scott added a supporting line on 27 Aug 2026, so the
   band is now heading, line, button. The heading's bottom margin comes in to
   make room, and .lede has to be re-centred because its own rule is left-ranged
   with a 68ch measure, which fights a centred band. */
/* The kit capped this at 620px for a much shorter line. At 44px the new
   heading broke three ways with "you." alone on the last, so the measure opens
   up to hold it on two. */
.sec--close .h2{ margin-bottom: var(--s4); max-width: 800px }
.close-sub{ max-width: 40em; margin: 0 auto var(--s5); text-align: center }