/* ==========================================================================
   Radius Solar — v2 ("Editorial")
   Design system. Every page uses this file; fix things here, not per page.

   The two-token orange rule is absolute, and it governs INK, not fills:
     orange ink on a light ground -> --orange-dark (#A55F09)  4.95:1 on white
     orange ink on navy           -> --orange      (#E8850C)  5.28:1 on navy

   --orange-dark is NEVER a background. It exists so that 11px eyebrow labels
   and hairline strokes survive on off-white. Turn it into a button fill and
   the logic inverts: navy on #A55F09 measures 2.87:1 and fails AA outright.
   Orange fills are --orange at rest, --orange-lift on hover (light grounds)
   or --orange-soft on hover (navy grounds).

   Text on an orange fill is navy in EVERY state, hover included.

   Orange is NEVER faded on navy. Reducing its opacity over navy is exactly
   what produced the muddy brown in the v1 review. Hold the hue at full
   strength and let off-white carry the recessive strokes instead.

   Instrument Serif is a DISPLAY face. It is used for h1/h2/h3 and nothing
   smaller than ~22px. Body, labels, buttons and forms are Instrument Sans.
   ========================================================================== */

:root{
  --navy:#1B2A4A;
  --navy-deep:#152139;
  --off:#FBFAF7;          /* page ground */
  --paper:#F7F5F1;        /* tinted sections, image slots — the brand off-white,
                             which is the ground --orange-dark was calibrated on */
  --ink:#2A2A2A;          /* body text on light */
  --orange:#E8850C;       /* fills at rest; orange ink on navy */
  --orange-dark:#A55F09;  /* orange INK on light only — never a fill */
  --orange-lift:#FCA62B;  /* hover fill on light grounds: navy on it = 7.20:1 */
  --orange-soft:#FFD9A6;  /* hover fill on navy grounds:  navy on it = 10.65:1 */
  --rule:rgba(27,42,74,.22);
  --rule-soft:rgba(27,42,74,.12);
  --rule-dark:rgba(247,245,241,.22);
  --pad:clamp(20px,5vw,88px);
  --gap:clamp(24px,4vw,64px);
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--off);
  color:var(--navy);
  font-family:var(--sans);
  font-size:18px;
  line-height:30px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit}
::selection{background:var(--orange);color:var(--navy)}

/* --------------------------------------------------------------- skip link */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--navy);color:var(--off);
  padding:12px 20px;border-radius:9999px;font-size:15px;text-decoration:none;
}
.skip:focus{left:16px;top:16px}

/* ------------------------------------------------------------------- shell */
.wrap{
  max-width:1440px;margin:0 auto;
  border-left:1px solid var(--rule);
  border-right:1px solid var(--rule);
  min-height:100vh;
}
.pad{padding-left:var(--pad);padding-right:var(--pad)}

/* ------------------------------------------------------------------ header */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--off);
  border-bottom:1px solid var(--rule);
}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:84px}
.hdr .logo{display:block;flex:none}
.hdr .logo img{width:106px;height:33px}
.site-nav{display:flex;align-items:center;gap:clamp(12px,1.9vw,30px);flex-wrap:wrap}
.site-nav a:not(.btn){text-decoration:none;font-size:16px;position:relative;padding:4px 0}
.site-nav a.btn{text-decoration:none;flex:none}
.site-nav a:not(.btn):hover{color:var(--orange-dark)}
.site-nav a[aria-current="page"]:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--orange-dark);
}

/* mobile nav toggle — hidden on desktop */
.nav-toggle{
  display:none;flex:none;width:44px;height:44px;border:1px solid var(--rule);
  border-radius:9999px;background:transparent;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
}
.nav-toggle span{display:block;width:18px;height:1.5px;background:var(--navy);transition:transform .2s,opacity .2s}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------------------------------------------------------------- typography
   Hierarchy comes from size, family and case — not from weight.            */
.display{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(42px,6.6vw,86px);line-height:1.03;letter-spacing:-.012em;
}
.display em,.accent{font-style:italic;color:var(--orange-dark)}
h2,.h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,3.8vw,50px);line-height:1.07;letter-spacing:-.01em;
}
h3,.h3{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(22px,2.2vw,29px);line-height:1.18;
}
.lede{font-size:clamp(18px,1.35vw,21px);line-height:1.62;color:var(--ink);max-width:60ch}
.lede-lg{font-size:clamp(20px,1.7vw,25px);line-height:1.5;color:var(--navy);max-width:52ch;font-family:var(--sans)}
p{color:var(--ink);max-width:68ch}
strong{font-weight:500;color:var(--navy)}
.eyebrow{
  font-family:var(--sans);font-size:11px;line-height:16px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--orange-dark);
}
.num{font-family:var(--serif);font-size:15px;letter-spacing:.1em;opacity:.55;margin-top:10px}

/* ---------------------------------------------------------------- sections */
section{
  border-bottom:1px solid var(--rule);
  padding-top:clamp(52px,6.6vw,100px);
  padding-bottom:clamp(52px,6.6vw,100px);
}
section.tint{background:var(--paper)}
section:last-of-type{border-bottom:0}

/* The sidenote spread: a narrow left rail carrying the eyebrow, section
   number and an optional aside, against a wide content column. The rail is
   what stops the left margin reading as dead space. */
.spread{display:grid;grid-template-columns:.5fr 1.5fr;gap:var(--gap);align-items:start}
.rail{position:sticky;top:110px}
.rail .aside{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--rule-soft);
  font-size:15px;line-height:24px;color:var(--ink);opacity:.85;max-width:30ch;
  font-family:var(--serif);font-style:italic;
}

/* ------------------------------------------------------------------- hero */
.hero{padding-top:clamp(48px,5.6vw,84px);padding-bottom:clamp(48px,5.6vw,84px)}
.hero-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:var(--gap);align-items:end}
.hero .display{margin:18px 0 24px;max-width:16ch}
.hero .lede{margin-bottom:4px}
.hero-art{align-self:stretch;display:flex;align-items:flex-end;justify-content:center}
.hero-art svg{width:100%;max-width:300px;height:auto}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-block;border-radius:9999px;padding:14px 30px;
  font-family:var(--sans);font-size:16px;line-height:1.25;text-decoration:none;
  border:1px solid var(--navy);background:transparent;color:var(--navy);
  cursor:pointer;transition:background .18s,color .18s,border-color .18s;
}
.btn:hover{background:var(--navy);color:var(--off)}
.btn-primary{background:var(--orange);border-color:var(--orange);color:var(--navy)}
/* Hover LIFTS the fill rather than deepening it, so the label can stay navy.
   Deepening to --orange-dark was the old behaviour and it forced off-white
   type onto a brown button, contradicting the rule at the top of this file. */
.btn-primary:hover{background:var(--orange-lift);border-color:var(--orange-lift);color:var(--navy)}
.btn:focus-visible{outline:3px solid var(--orange-dark);outline-offset:3px}
.on-dark .btn{border-color:var(--off);color:var(--off)}
.on-dark .btn:hover{background:var(--off);color:var(--navy)}
.on-dark .btn-primary{background:var(--orange);border-color:var(--orange);color:var(--navy)}
.on-dark .btn-primary:hover{background:var(--orange-soft);border-color:var(--orange-soft);color:var(--navy)}
.on-dark .btn:focus-visible{outline-color:var(--orange)}

/* -------------------------------------------------------------- link style */
.link{
  font-family:var(--sans);font-size:16px;text-decoration:none;
  color:var(--orange-dark);border-bottom:1px solid currentColor;padding-bottom:2px;
}
.link:hover{color:var(--navy)}
.on-dark .link,
.site-footer .link,
.cta-band .link{color:var(--orange)}
.on-dark .link:hover,
.site-footer .link:hover,
.cta-band .link:hover{color:var(--off)}

/* ------------------------------------------------------------ two-up doors */
.doors{display:grid;grid-template-columns:1fr 1fr}
.door{padding:clamp(28px,3.2vw,48px) 0;display:flex;flex-direction:column}
.door:first-child{padding-right:var(--gap)}
.door+.door{border-left:1px solid var(--rule);padding-left:var(--gap)}
.door h3{margin:14px 0 12px;max-width:19ch}
.door p{flex:1}
.door .slot{margin-top:28px}
.door .btn{margin-top:26px;align-self:flex-start}

/* ------------------------------------------------- image slot (3:2)
   Motif artwork now; real photography drops into the same box later.  */
.slot{
  aspect-ratio:3/2;background:var(--paper);border:1px solid var(--rule);
  position:relative;overflow:hidden;
}
section.tint .slot{background:var(--off)}
.slot svg,.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ----------------------------------------------------------- benefits list */
.benefits{list-style:none;display:grid;gap:0;max-width:none}
.benefits li{
  padding:clamp(20px,2.2vw,28px) 0;border-top:1px solid var(--rule-soft);
  display:grid;grid-template-columns:.34fr 1fr;gap:var(--gap);align-items:baseline;
}
.benefits li:last-child{border-bottom:1px solid var(--rule-soft)}
.benefits li strong{
  font-family:var(--serif);font-weight:400;font-size:clamp(20px,1.8vw,24px);
  line-height:1.2;color:var(--navy);display:block;
}
.benefits li span{color:var(--ink);display:block}

/* ---------------------------------------------------------------- numbered */
.steps{display:grid;grid-template-columns:repeat(3,1fr)}
.step{padding:clamp(26px,3vw,40px) 0}
.step:first-child{padding-right:var(--gap)}
.step+.step{border-left:1px solid var(--rule);padding-left:var(--gap);padding-right:var(--gap)}
.step:last-child{padding-right:0}
.step .step-num{
  font-family:var(--serif);font-size:clamp(34px,3.6vw,46px);line-height:1;
  color:var(--orange-dark);display:block;margin-bottom:16px;
}
.step h3{margin-bottom:10px;max-width:18ch}
.step p{font-size:16px;line-height:27px}

/* --------------------------------------------------------------------- FAQ */
.faq{border-top:1px solid var(--rule-soft)}
.faq-item{
  border-bottom:1px solid var(--rule-soft);
  padding:clamp(24px,2.6vw,34px) 0;
  display:grid;grid-template-columns:.5fr 1.5fr;gap:var(--gap);align-items:start;
}
.faq-item h3{max-width:22ch}

/* ---------------------------------------------------------------- CTA band */
.cta-band{background:var(--navy);color:var(--off);border-bottom:0}
.cta-band h2{color:var(--off)}
.cta-band p{color:rgba(247,245,241,.88);max-width:52ch}
.cta-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:var(--gap);align-items:end}
.cta-band .cta-art{margin-left:auto;width:100%;max-width:190px}
.cta-band .cta-art svg{width:100%;height:auto}

/* ------------------------------------------------------------------- cards */
.card{border:1px solid var(--rule);padding:clamp(26px,3vw,40px);background:var(--off)}
section.tint .card{background:var(--off)}
.card h3{margin-bottom:12px}
.card .btn{margin-top:22px}

/* -------------------------------------------------------------------- form */
.form-wrap{max-width:680px}
.form-grid{display:grid;gap:26px}
.field label{
  display:block;font-family:var(--sans);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navy);margin-bottom:9px;
}
.field .optional{letter-spacing:0;text-transform:none;opacity:.6;font-size:13px}
.field .helper{font-family:var(--sans);font-size:14px;line-height:21px;color:var(--ink);opacity:.78;margin-top:8px}
.consent{font-size:14px;line-height:22px;color:var(--ink);opacity:.85;margin-top:16px;max-width:46ch}
.consent a{color:var(--orange-dark)}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--sans);font-size:17px;line-height:1.5;color:var(--navy);
  background:var(--off);border:0;border-bottom:1px solid var(--rule);
  padding:12px 2px;border-radius:0;
}
.field textarea{min-height:130px;resize:vertical}
.field select{appearance:none;background-image:none}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-bottom-color:var(--orange-dark);box-shadow:0 1px 0 0 var(--orange-dark);
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:3px solid var(--orange-dark);outline-offset:4px;
}
.error-msg{display:none;color:#9A2C1B;font-size:14px;margin-top:8px}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-bottom-color:#9A2C1B;box-shadow:0 1px 0 0 #9A2C1B}
.field.invalid .error-msg{display:block}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{margin-top:24px;font-size:16px;padding:16px 20px;border-left:2px solid var(--rule);display:none}
.form-note.notice,.form-note.success{display:block}
.form-note.notice{border-left-color:var(--orange-dark);background:var(--paper)}
.form-note.success{border-left-color:#2E6F40;background:var(--paper)}

/* ------------------------------------------------------------------ footer */
.site-footer{background:var(--navy);color:var(--off);padding-top:clamp(48px,5vw,76px);padding-bottom:32px}
.site-footer p{color:rgba(247,245,241,.85)}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--gap)}
.site-footer img{width:94px;height:29px}
.site-footer .tagline{margin-top:20px;max-width:34ch;font-size:16px;line-height:26px}
.site-footer .name-note{
  margin-top:16px;max-width:34ch;font-size:15px;line-height:24px;
  font-family:var(--serif);font-style:italic;color:rgba(247,245,241,.62);
}
.footer-nav a{display:block;padding:5px 0;font-size:16px;text-decoration:none}
.footer-nav a:hover{color:var(--orange)}
.footer-cta p{font-size:16px;line-height:26px;max-width:26ch;margin-bottom:12px}
/* A row, not a single line: copyright on the left, legal links on the right,
   with room for the company number and registered office once they exist. */
.footer-bottom{
  border-top:1px solid var(--rule-dark);margin-top:clamp(38px,4vw,56px);
  padding-top:22px;font-size:14px;
  display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;align-items:baseline;
}
.footer-bottom p{color:rgba(247,245,241,.6)}
.footer-legal{display:flex;flex-wrap:wrap;gap:8px 24px}
.footer-legal a{color:rgba(247,245,241,.6);text-decoration:none;font-size:14px}
.footer-legal a:hover{color:var(--orange)}


/* -------------------------------------------------------------- schematic
   The private-wire arrangement, drawn rather than photographed. Deliberately
   NOT one wide SVG: three HTML blocks carrying small inline marks reflow to a
   single column on a phone, and the labels stay real text at a real size
   instead of shrinking with the artwork.                                  */
.schematic{
  margin-top:clamp(28px,3vw,44px);
  display:grid;grid-template-columns:1fr .62fr 1fr;
  gap:clamp(10px,1.6vw,26px);align-items:center;
  border:1px solid var(--rule);background:var(--off);
  padding:clamp(26px,3.4vw,48px) clamp(18px,2.6vw,40px);
}
section.tint .schematic{background:var(--off)}
.sch-node,.sch-link{text-align:center}
.sch-art svg{width:100%;height:auto;max-width:250px;margin:0 auto;display:block}
.sch-link .sch-art svg{max-width:150px}
.sch-label{
  font-family:var(--sans);font-size:15px;line-height:22px;color:var(--navy);
  margin:14px auto 0;max-width:20ch;
}
.sch-link .eyebrow{margin-top:10px}
@media (max-width:760px){
  .schematic{grid-template-columns:1fr;gap:clamp(14px,3vw,24px)}
  /* The wire turns to point down the column rather than across it. */
  .sch-link .sch-art svg{max-width:52px;transform:rotate(90deg)}
}

/* Mobile-only hero mark. The full HERO_ART is hidden at 880px; without this
   the mobile hero is nothing but type. */
.hero-mark{display:none;width:120px;height:auto;margin-top:26px}
@media (max-width:880px){.hero-mark{display:block}}


/* ------------------------------------------------------------------ media
   Three brand illustrations live in assets/. They are DECORATIVE support for
   the copy, never evidence of a built project — alt text describes the
   picture, and never claims it is a Radius site.
   Every <img> carries width/height so nothing shifts as the page loads.   */

/* Large in-column figure — same 3:2 box as .slot, but at content width */
.figure{
  margin-top:clamp(28px,3vw,44px);
  border:1px solid var(--rule);
  overflow:hidden;aspect-ratio:3/2;background:var(--paper);
}
.figure img{width:100%;height:100%;object-fit:cover;display:block}

/* Full-bleed strip — spans the wrap edge to edge, ignoring .pad */
.band-media{padding:0;line-height:0;border-bottom:1px solid var(--rule)}
.band-media img{
  width:100%;height:clamp(160px,24vw,280px);
  object-fit:cover;display:block;
}


/* Founder portrait — a byline image in the sidenote rail. 4:5, capped so it
   never dominates the rail on desktop or blow up when the rail goes
   full-width on mobile. */
.portrait{
  margin-top:24px;max-width:280px;
  border:1px solid var(--rule);overflow:hidden;
  aspect-ratio:4/5;background:var(--paper);
}
.portrait img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:880px){
  .portrait{max-width:220px;margin-bottom:6px}
}

/* ------------------------------------------------------------------ motion
   Enhancement only. Content is fully visible by default; the reveal is
   opted into by JS, honours prefers-reduced-motion, and a safety timeout in
   main.js force-reveals anything the observer misses. Nothing may end at
   opacity 0. This is the v1 bug that must never come back.               */
.fade{opacity:1;transform:none}
.js-anim .fade{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
.js-anim .fade.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js-anim .fade{opacity:1!important;transform:none!important;transition:none!important}
}

/* ------------------------------------------------------------- responsive */
@media (max-width:1000px){
  .steps{grid-template-columns:1fr}
  .step,.step+.step{border-left:0;padding-left:0;padding-right:0}
  .step+.step{border-top:1px solid var(--rule)}
}
@media (max-width:880px){
  .hero-grid,.spread,.doors,.cta-grid,.faq-item,.footer-top,.benefits li{grid-template-columns:1fr}
  .rail{position:static}
  .rail .aside{display:none}
  .hero-art{display:none}
  .cta-band .cta-art{display:none}
  .door:first-child{padding-right:0}
  .door+.door{border-left:0;border-top:1px solid var(--rule);padding-left:0}
  .benefits li{gap:8px}
  .faq-item{gap:12px}

  /* mobile navigation */
  .nav-toggle{display:flex}
  .site-nav{
    position:fixed;inset:84px 0 0 0;background:var(--off);
    flex-direction:column;align-items:flex-start;justify-content:flex-start;
    gap:6px;padding:32px var(--pad);
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .2s ease,transform .2s ease;overflow-y:auto;
  }
  .site-nav.open{opacity:1;transform:none;pointer-events:auto}
  .site-nav a{font-family:var(--serif);font-size:28px;padding:10px 0}
  .site-nav a.btn{font-family:var(--sans);font-size:16px;margin-top:18px}
  body.nav-open{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){
  .site-nav{transition:none}
}