/* ===========================================================
   HEYGUS - site design system
   Layered on style.css, which keeps the shared shell (tokens,
   buttons, nav, footer, modal) and the components the Gus page
   still depends on. Loaded by every page except Gus.

   Motion policy: everything below degrades to a static page.
   Entrances that matter are CSS-only, scroll choreography is
   gated behind the .js class, and the whole lot is switched off
   under prefers-reduced-motion.
   =========================================================== */

:root{
  --sp-sec:clamp(84px,9vw,140px);
  --r-sm:12px;
  --r-md:18px;
  --r-lg:28px;
  --r-xl:36px;
  --sh-sm:0 2px 8px -3px rgba(26,28,26,.10);
  --sh-md:0 18px 40px -24px rgba(26,28,26,.34);
  --sh-lg:0 56px 90px -46px rgba(26,28,26,.55);
  --ease:cubic-bezier(.22,.68,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

.site section{padding:var(--sp-sec) 0;position:relative}

/* Fine paper grain over the whole page. Costs one gradient, adds the texture
   flat colour blocks otherwise lack. */
.site::after{
  content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(26,28,26,.045) 1px,transparent 1px);
  background-size:3px 3px;mix-blend-mode:multiply;
}

/* ===================== SCROLL PROGRESS ===================== */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:90;transform-origin:0 50%;
          transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--flame),var(--copper));
          transition:transform .1s linear}

/* ===================== SECTION FURNITURE ===================== */
.s-head.centre{margin:0 auto;text-align:center}
.s-eyebrow{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:12px;letter-spacing:.14em;
           text-transform:uppercase;color:var(--flame-deep);margin-bottom:18px}
.s-eyebrow::before{content:attr(data-i);font-variant-numeric:tabular-nums;opacity:.55}
.s-eyebrow::after{content:"";width:26px;height:1px;background:currentColor;opacity:.4}
.s-head.centre .s-eyebrow{justify-content:center}

.s-title{font-family:var(--font-display);font-weight:600;letter-spacing:-0.035em;line-height:1.02;
         font-size:clamp(31px,4.4vw,54px);max-width:17em;text-wrap:balance}
.s-title em{font-family:var(--font-accent);font-style:italic;font-weight:400;letter-spacing:-0.01em;
            color:var(--flame)}
.s-lead{font-size:17.5px;line-height:1.62;color:var(--ink-soft);margin-top:18px;max-width:40em}
.s-head.centre .s-title{max-width:15em;margin-left:auto;margin-right:auto}
.s-head.centre .s-lead{margin-left:auto;margin-right:auto}

.on-dark .s-eyebrow{color:#F0A184}
.on-dark .s-title{color:#fff}
.on-dark .s-lead{color:rgba(243,239,230,.70)}

/* ===================== HERO ===================== */
.h-hero{position:relative;padding:clamp(60px,7vw,96px) 0 clamp(70px,7vw,104px);overflow:hidden;text-align:center;
        --mx:50%;--my:26%}
/* The glow tracks the pointer on a device that has one. */
.h-hero-glow{position:absolute;inset:-20% -10% auto;height:150%;pointer-events:none;z-index:0;
             background:radial-gradient(46% 46% at var(--mx) var(--my),rgba(226,86,43,.20),rgba(226,86,43,0) 70%);
             transition:background-position .3s linear}
.h-hero .wrap{position:relative;z-index:1}

.h-eyebrow{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:12.5px;letter-spacing:.08em;
           text-transform:uppercase;color:var(--flame-deep);background:rgba(255,255,255,.72);
           backdrop-filter:blur(8px);border:1px solid var(--line);padding:9px 18px;border-radius:100px;
           box-shadow:var(--sh-sm)}

.h-title{font-family:var(--font-display);font-weight:600;letter-spacing:-0.042em;line-height:1.0;
         font-size:clamp(38px,6.4vw,82px);margin:28px auto 0;max-width:14em;text-wrap:balance}
.h-title em{font-family:var(--font-accent);font-style:italic;font-weight:400;letter-spacing:-0.01em;
            color:var(--flame)}

.h-claim{font-family:var(--font-display);font-weight:500;font-size:clamp(18px,1.9vw,24px);line-height:1.32;
         letter-spacing:-0.02em;color:var(--ink);margin:26px auto 0;max-width:26em;text-wrap:balance}
.h-sub{font-size:17.5px;line-height:1.64;color:var(--ink-soft);margin:16px auto 0;max-width:38em;text-wrap:pretty}
.h-cta{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:36px}

.h-notes{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 30px;margin-top:36px;
         font-size:14.5px;color:var(--ink-soft)}
.h-notes span{display:inline-flex;align-items:center;gap:9px}
.h-notes span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--flame);flex:none}
.h-notes a{color:var(--flame-deep);font-weight:600;text-decoration:none;border-bottom:1.5px solid transparent;
           padding-bottom:1px;transition:border-color .18s}
.h-notes a:hover{border-bottom-color:var(--flame-deep)}

/* ---- before / after ---- */
.ba{margin-top:clamp(52px,6vw,84px);background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
    box-shadow:var(--sh-lg);overflow:hidden;text-align:left}
.ba-grid{display:grid;grid-template-columns:1fr 1fr}
@media(max-width:860px){.ba-grid{grid-template-columns:1fr}}
.ba-side{padding:clamp(26px,3vw,38px)}
.ba-side + .ba-side{border-left:1px solid var(--line)}
@media(max-width:860px){.ba-side + .ba-side{border-left:none;border-top:1px solid var(--line)}}
.ba-after{background:#10241B}

.ba-tag{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;letter-spacing:.12em;
        text-transform:uppercase;color:var(--ink-soft)}
.ba-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--copper)}
.ba-after .ba-tag{color:#7BE0AB}
.ba-after .ba-tag::before{background:#7BE0AB;animation:blip 2.4s var(--ease) infinite}
@keyframes blip{0%,100%{box-shadow:0 0 0 0 rgba(123,224,171,.5)}60%{box-shadow:0 0 0 8px rgba(123,224,171,0)}}
.ba-h{font-family:var(--font-display);font-weight:600;letter-spacing:-0.028em;font-size:clamp(20px,2.2vw,25px);
      margin-top:12px;color:var(--ink)}
.ba-after .ba-h{color:#EAF7F0}

.ba-steps{list-style:none;margin:22px 0 0;padding:0;counter-reset:ba}
.ba-steps li{position:relative;padding:9px 0 9px 32px;font-size:14.5px;line-height:1.5;color:var(--ink-soft);
             border-radius:10px;transition:background .45s var(--ease),opacity .45s var(--ease)}
/* Steps only dim once the walker is actually running, so a page with the script
   blocked, or one captured before the loop starts, reads at full strength. */
.ba.walking .ba-steps li{opacity:.5}
.ba-steps li::before{content:"";position:absolute;left:8px;top:17px;width:8px;height:8px;border-radius:50%;
                     background:var(--line);box-shadow:0 0 0 3px #fff;transition:background .45s var(--ease),
                     transform .45s var(--ease)}
.ba-steps li::after{content:"";position:absolute;left:11.5px;top:26px;bottom:-4px;width:1px;background:var(--line)}
.ba-steps li:last-child::after{display:none}
.ba-steps b{display:block;color:var(--ink);font-weight:700;font-size:14px;letter-spacing:-0.01em}
/* the walker highlights one step at a time down both columns */
.ba.walking .ba-steps li.on{opacity:1;background:rgba(226,86,43,.06)}
.ba-steps li.on::before{background:var(--flame);transform:scale(1.25)}
.ba-after .ba-steps li{color:rgba(234,247,240,.66)}
.ba-after .ba-steps li::before{background:rgba(123,224,171,.45);box-shadow:0 0 0 3px #10241B}
.ba-after .ba-steps li::after{background:rgba(123,224,171,.26)}
.ba-after .ba-steps b{color:#EAF7F0}
.ba-after .ba-steps li.on{background:rgba(123,224,171,.10)}
.ba-after .ba-steps li.on::before{background:#7BE0AB}
.ba-note{margin-top:22px;padding-top:18px;border-top:1px dashed var(--line);font-size:13.5px;color:var(--ink-soft);
         font-style:italic}
.ba-after .ba-note{border-top-color:rgba(123,224,171,.28);color:#7BE0AB;font-style:normal;font-weight:600}

/* ===================== MARQUEE ===================== */
/* A slow band of the work, so the breadth is felt before it is read. */
.marquee{background:var(--ink);color:var(--paper);padding:22px 0;overflow:hidden;
         -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
         mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content;animation:slide 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee-track span{display:inline-flex;align-items:center;gap:26px;padding-right:26px;white-space:nowrap;
                    font-family:var(--font-display);font-weight:500;letter-spacing:-0.02em;
                    font-size:clamp(17px,1.9vw,22px);color:rgba(243,239,230,.82)}
.marquee-track span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--flame);flex:none}

/* ===================== THE PROBLEM ===================== */
.h-problem{background:var(--steel);color:var(--paper)}
.shapes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,30px);margin-top:56px}
@media(max-width:900px){.shapes{grid-template-columns:1fr;gap:22px}}
.shape{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:var(--r-lg);
       padding:clamp(22px,2.3vw,30px);transition:transform .5s var(--ease-out),border-color .35s,background .35s}
.shape:hover{transform:translateY(-5px);border-color:rgba(226,86,43,.42);background:rgba(255,255,255,.06)}
.shape-h{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:600;
         letter-spacing:-0.028em;font-size:clamp(18px,2vw,22px);color:#fff;padding-bottom:18px;margin-bottom:6px;
         border-bottom:1px solid rgba(255,255,255,.12)}
.shape-h::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--flame);flex:none}
.shape ul{list-style:none;margin:0;padding:0}
.shape li{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.shape li:last-child{border-bottom:none;padding-bottom:0}
.shape li b{display:block;font-family:var(--font-display);font-weight:600;font-size:16.5px;color:#fff;
            line-height:1.24;letter-spacing:-0.02em;margin-bottom:6px}
.shape li span{font-size:14px;line-height:1.5;color:rgba(243,239,230,.62)}

.not-menu{margin-top:clamp(44px,5vw,62px);padding-top:34px;border-top:1px solid rgba(255,255,255,.14);
          display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,60px);align-items:start}
@media(max-width:820px){.not-menu{grid-template-columns:1fr;gap:20px}}
.not-menu h3{font-family:var(--font-display);font-weight:600;letter-spacing:-0.032em;
             font-size:clamp(23px,2.9vw,34px);line-height:1.1;color:#fff}
.not-menu p{font-size:16px;line-height:1.62;color:rgba(243,239,230,.70)}
.not-menu p + p{margin-top:14px}
.not-menu .nm-cta{color:#F0A184;font-family:var(--font-accent);font-style:italic;font-size:19px}

/* ===================== THE DIFFERENCE ===================== */
.h-diff{background:var(--paper)}
.vs{margin-top:56px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;
    box-shadow:var(--sh-md)}
.vs-row{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.vs-row:last-child{border-bottom:none}
@media(max-width:760px){.vs-row{grid-template-columns:1fr}}
.vs-cell{padding:21px clamp(18px,2.2vw,30px);font-size:15.5px;line-height:1.55;color:var(--ink-soft);
         transition:background .3s}
.vs-cell + .vs-cell{border-left:1px solid var(--line)}
@media(max-width:760px){.vs-cell + .vs-cell{border-left:none;border-top:1px solid var(--paper-deep)}}
.vs-them{background:var(--paper-deep)}
.vs-us{background:#fff;color:var(--ink)}
.vs-row:not(.vs-head):hover .vs-us{background:rgba(226,86,43,.05)}
.vs-head .vs-cell{padding-top:23px;padding-bottom:23px;font-family:var(--font-display);font-weight:600;
                  letter-spacing:-0.028em;font-size:clamp(17px,2vw,22px);color:var(--ink)}
.vs-head .vs-them{color:var(--ink-soft)}
.vs-mark{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;letter-spacing:.1em;
         text-transform:uppercase;margin-bottom:9px}
.vs-them .vs-mark{color:var(--ink-soft)}
.vs-us .vs-mark{color:var(--flame-deep)}
@media(min-width:761px){.vs-row:not(.vs-head) .vs-mark{display:none}}

/* ===================== WHAT WE BUILD ===================== */
.h-range{background:var(--paper-deep)}
.range-list{list-style:none;margin:52px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;
            gap:0 clamp(30px,4vw,64px)}
@media(max-width:820px){.range-list{grid-template-columns:1fr}}
.range-list li{position:relative;padding:19px 0 19px 30px;border-bottom:1px solid var(--line);
               font-size:16px;line-height:1.55;color:var(--ink-soft);
               transition:color .3s,padding-left .4s var(--ease-out)}
.range-list li::before{content:"";position:absolute;left:0;top:27px;width:9px;height:9px;border-radius:50%;
                       background:var(--flame);opacity:.8;transition:transform .4s var(--ease-out)}
.range-list li:hover{color:var(--ink);padding-left:38px}
.range-list li:hover::before{transform:scale(1.35)}
.range-note{margin-top:38px;font-size:17.5px;font-weight:500;color:var(--ink);max-width:38em}

/* ===================== HOW IT WORKS ===================== */
.h-process{background:var(--ink);color:var(--paper)}
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.2vw,28px);margin-top:60px;
        counter-reset:step}
@media(max-width:940px){.steps4{grid-template-columns:repeat(2,1fr);row-gap:40px}}
@media(max-width:560px){.steps4{grid-template-columns:1fr}}
.step4{position:relative;padding-top:34px;counter-increment:step}
/* the rule draws itself across as the row comes into view */
.step4::before{content:"";position:absolute;left:0;top:14px;height:1px;width:0;
               background:rgba(255,255,255,.20);transition:width 1s var(--ease-out)}
.js .step4.in::before{width:calc(100% + 14px)}
.step4:last-child.in::before{width:100%}
@media(max-width:940px){.js .step4.in::before{width:100%}}
.step4::after{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:0;
              width:29px;height:29px;border-radius:50%;background:var(--flame);color:#fff;
              font-family:var(--font-body);font-weight:700;font-size:11.5px;display:flex;align-items:center;
              justify-content:center;letter-spacing:.02em;
              box-shadow:0 0 0 0 rgba(226,86,43,.45)}
.js .step4.in::after{animation:pop .6s var(--ease-out) backwards}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.step4 h3{font-family:var(--font-display);font-weight:600;letter-spacing:-0.028em;font-size:clamp(19px,2.1vw,23px);
          color:#fff;margin:24px 0 10px}
.step4 p{font-size:14.5px;line-height:1.6;color:rgba(243,239,230,.66)}

/* ===================== FAQ ===================== */
.h-faq{background:var(--paper)}
.faq{margin-top:52px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 48px 24px 0;position:relative;
             font-family:var(--font-display);font-weight:600;letter-spacing:-0.026em;
             font-size:clamp(17px,1.95vw,21px);line-height:1.3;color:var(--ink);
             transition:color .18s,padding-left .35s var(--ease-out)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--flame-deep);padding-left:8px}
.faq summary::after{content:"";position:absolute;right:10px;top:50%;width:11px;height:11px;
                    border-right:2px solid var(--flame);border-bottom:2px solid var(--flame);
                    transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease-out)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq details p{padding:0 0 26px;margin:0;font-size:16px;line-height:1.68;color:var(--ink-soft);max-width:52em}
.js .faq details[open] p{animation:unfold .45s var(--ease-out)}
@keyframes unfold{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ===================== CTA ===================== */
.h-cta-band{background:var(--flame);color:#fff;text-align:center;overflow:hidden}
.h-cta-band::before{content:"";position:absolute;inset:auto 0 -60% 0;height:120%;pointer-events:none;
                    background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.16),transparent 70%)}
.h-cta-band .wrap{position:relative;z-index:1}
.h-cta-band h2{font-family:var(--font-display);font-weight:600;color:#fff;line-height:1.02;
               letter-spacing:-0.038em;font-size:clamp(32px,5vw,60px);max-width:14em;margin:0 auto;
               text-wrap:balance}
.h-cta-band p{font-size:17.5px;line-height:1.6;color:rgba(255,255,255,.92);margin:20px auto 34px;max-width:33em}
.h-cta-band .btn{background:#fff;color:var(--flame-deep)}
.h-cta-band .btn:hover{background:var(--ink);color:#fff;box-shadow:0 14px 30px -12px rgba(0,0,0,.45)}
.h-cta-band .cta-small{margin:24px auto 0;font-size:14.5px;color:rgba(255,255,255,.8)}

/* ===================== MOTION ===================== */
/* Hero entrance is pure CSS, so it never depends on the script. */
.rise{opacity:0;animation:rise .9s var(--ease-out) forwards}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.r1{animation-delay:.07s}.r2{animation-delay:.16s}.r3{animation-delay:.25s}
.r4{animation-delay:.34s}.r5{animation-delay:.46s}

/* Scroll choreography is gated on .js, so with the script blocked or broken the
   page is simply visible rather than blank. */
.js .up{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.js .up.in{opacity:1;transform:none}
.js .up.d1{transition-delay:.09s}
.js .up.d2{transition-delay:.18s}
.js .up.d3{transition-delay:.27s}

/* buttons lean very slightly towards the pointer */
.btn.big{transition:transform .3s var(--ease-out),background .18s,box-shadow .18s}

@media(prefers-reduced-motion:reduce){
  .rise{opacity:1;animation:none}
  .js .up{opacity:1;transform:none;transition:none}
  .marquee-track{animation:none}
  .ba.walking .ba-steps li{opacity:1}
  .ba-after .ba-tag::before{animation:none}
  .js .step4.in::before{width:100%;transition:none}
  .js .step4.in::after{animation:none}
  .js .faq details[open] p{animation:none}
  .home::after{display:none}
}

/* ===========================================================
   INNER PAGES
   Smaller hero, then the same components as the home page.
   =========================================================== */

/* ===================== INNER HERO ===================== */
.pg-hero{position:relative;overflow:hidden;background:var(--paper);
         padding:clamp(52px,6vw,84px) 0 clamp(44px,5vw,64px)}
.pg-hero::before{content:"";position:absolute;left:50%;top:-40%;width:min(900px,110%);aspect-ratio:1/.6;
                 transform:translateX(-50%);pointer-events:none;
                 background:radial-gradient(50% 50% at 50% 50%,rgba(226,86,43,.14),rgba(226,86,43,0) 70%)}
.pg-hero .wrap{position:relative;z-index:1}
.pg-title{font-family:var(--font-display);font-weight:600;letter-spacing:-0.04em;line-height:1.0;
          font-size:clamp(36px,5.6vw,68px);max-width:15em;text-wrap:balance}
.pg-title em{font-family:var(--font-accent);font-style:italic;font-weight:400;letter-spacing:-0.01em;
             color:var(--flame)}
.pg-lead{font-size:18.5px;line-height:1.62;color:var(--ink-soft);margin-top:22px;max-width:40em;
         text-wrap:pretty}
.pg-crumb{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-soft);
          text-decoration:none;margin-bottom:26px;transition:color .18s}
.pg-crumb:hover{color:var(--flame-deep)}

/* ===================== AREA BLOCKS ===================== */
/* What we build, organised by the part of the business it touches. */
.areas{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.4vw,28px);margin-top:56px}
@media(max-width:860px){.areas{grid-template-columns:1fr}}
.area{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,2.6vw,32px);
      transition:transform .5s var(--ease-out),border-color .35s,box-shadow .35s}
.area:hover{transform:translateY(-4px);border-color:rgba(226,86,43,.4);box-shadow:var(--sh-md)}
.area h3{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:600;
         letter-spacing:-0.028em;font-size:clamp(19px,2.1vw,23px);color:var(--ink);
         padding-bottom:18px;margin-bottom:4px;border-bottom:1px solid var(--paper-deep)}
.area h3::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--flame);flex:none}
.area ul{list-style:none;margin:0;padding:0}
.area li{padding:14px 0;border-bottom:1px solid var(--paper-deep);font-size:15.5px;line-height:1.55;
         color:var(--ink-soft)}
.area li:last-child{border-bottom:none;padding-bottom:0}

/* ===================== TWO KINDS ===================== */
.kinds{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.4vw,30px);margin-top:52px}
@media(max-width:820px){.kinds{grid-template-columns:1fr}}
.kind{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:var(--r-lg);
      padding:clamp(24px,2.6vw,32px)}
.kind h3{font-family:var(--font-display);font-weight:600;letter-spacing:-0.028em;font-size:clamp(20px,2.2vw,25px);
         color:#fff}
.kind .k-lead{font-size:15.5px;color:#F0A184;font-weight:600;margin:8px 0 20px}
.kind p{font-size:15.5px;line-height:1.62;color:rgba(243,239,230,.70)}
.kind p + p{margin-top:13px}

/* ===================== KEEP / NEVER ===================== */
.keeps{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.4vw,30px);margin-top:52px}
@media(max-width:820px){.keeps{grid-template-columns:1fr}}
.keep{border-radius:var(--r-lg);padding:clamp(24px,2.6vw,32px);border:1px solid var(--line);background:#fff}
.keep.no{background:var(--paper-deep);border-color:var(--line)}
.keep h3{font-family:var(--font-display);font-weight:600;letter-spacing:-0.028em;font-size:clamp(19px,2.1vw,23px);
         margin-bottom:18px}
.keep ul{list-style:none;margin:0;padding:0}
.keep li{position:relative;padding:0 0 14px 30px;font-size:15.5px;line-height:1.55;color:var(--ink-soft)}
.keep li:last-child{padding-bottom:0}
.keep li::before{content:"";position:absolute;left:2px;top:7px;width:8px;height:8px;border-radius:50%;
                 background:var(--flame)}
.keep.no li::before{background:none;border:1.5px solid var(--ink-soft);opacity:.5;width:9px;height:9px;top:6px}

/* ===================== FACTS ===================== */
/* Plain company detail, so a proposal can be checked against something. */
.facts{margin-top:48px;border-top:1px solid var(--line)}
.facts div{display:grid;grid-template-columns:14em 1fr;gap:8px 30px;padding:18px 0;
           border-bottom:1px solid var(--line)}
@media(max-width:640px){.facts div{grid-template-columns:1fr;gap:4px}}
.facts dt{font-weight:700;font-size:14px;letter-spacing:.02em;color:var(--ink)}
.facts dd{margin:0;font-size:16px;line-height:1.55;color:var(--ink-soft)}
.facts a{color:var(--flame-deep);text-decoration:none;border-bottom:1.5px solid transparent;
         transition:border-color .18s}
.facts a:hover{border-bottom-color:var(--flame-deep)}

/* ===================== PROSE ===================== */
.prose{max-width:44em}
.prose p{font-size:17px;line-height:1.68;color:var(--ink-soft)}
.prose p + p{margin-top:16px}
.prose strong{color:var(--ink)}
.on-dark .prose p{color:rgba(243,239,230,.72)}
.on-dark .prose strong{color:#fff}

/* ===================== NEXT LINKS ===================== */
.next{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:52px}
@media(max-width:700px){.next{grid-template-columns:1fr}}
.next a{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
        padding:24px 26px;text-decoration:none;transition:transform .4s var(--ease-out),border-color .3s}
.next a:hover{transform:translateY(-3px);border-color:rgba(226,86,43,.45)}
.next .n-lab{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
             color:var(--flame-deep)}
.next .n-t{display:block;font-family:var(--font-display);font-weight:600;letter-spacing:-0.026em;
           font-size:20px;color:var(--ink);margin-top:8px}

/* ===================== ONE WE BUILT ===================== */
.built{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,60px);margin-top:48px;
       align-items:start}
@media(max-width:900px){.built{grid-template-columns:1fr;gap:32px}}
.built-facts{list-style:none;margin:0;padding:clamp(22px,2.4vw,28px);background:#fff;
             border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm)}
.built-facts li{padding:15px 0;border-bottom:1px solid var(--paper-deep);font-size:15px;line-height:1.5;
                color:var(--ink-soft)}
.built-facts li:last-child{border-bottom:none;padding-bottom:0}
.built-facts li:first-child{padding-top:0}
.built-facts b{display:block;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
               color:var(--flame-deep);margin-bottom:5px}