@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&display=swap');

/* ==========================================================================
   DEJA VU TALENT SQUAD
   Design system v3 — "Evidence"

   Evolved from v2, not replacing it: the layout architecture, hairline logic,
   motion classes and form patterns carry over. What changes is the type system,
   the paw, the connector sub-system and the vacancy image treatment.

   Three colours only, as the brand specifies: orange, black, white.
   The greys below are tints of the ink, not additional hues.

   TYPE — Times New Roman throughout, by brief. Hierarchy is carried entirely by
   scale, case, tracking and italic, never by a second family. Set very large
   and very tight, Times reads editorial and institutional rather than default;
   set small, uppercase and widely tracked, it reads as a considered label.
   That range is the whole system, and it costs nothing to load.

   PAW — the deck's most under-used asset, promoted here to the primary system
   mark. It is the section marker, the hiring-journey step, the scroll position
   indicator, the delivered marker and the list glyph. One small mark used
   everywhere is what makes a brand recognisable at a glance.

   CONNECTOR — hairline runs with small orange junction dots, lifted from the
   deck's sector and at-a-glance slides. This organises content here. There are
   no cards, panels or boxes anywhere in this stylesheet.
   ========================================================================== */

:root{
  --paper:   #FFFFFF;
  --tint:    #FAF9F7;
  --ink:     #17171A;
  --ink-70:  #3E3E45;
  --ink-45:  #60606A;
  --hair:    #E2E0DC;
  --hair-2:  #C6C3BD;
  --orange:  #EF7F1A;

  --font: 'Poppins', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  --shell:  1320px;
  --gut:    clamp(20px, 4vw, 60px);
  --rhythm: clamp(76px, 9.5vw, 158px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font); font-size:16px; line-height:1.62; font-weight:400;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
::selection{ background:var(--orange); color:#fff; }
:focus-visible{ outline:2px solid var(--orange); outline-offset:4px; }

.shell{ width:100%; max-width:var(--shell); margin:0 auto; padding:0 var(--gut); }
.narrow{ max-width:1000px; }

/* --------------------------------------------------------------------------
   TYPE SCALE
   -------------------------------------------------------------------------- */
h1,h2,h3,h4{ margin:0; font-weight:500; letter-spacing:-0.03em; line-height:1.08; text-wrap:balance; }

.d1{ font-size:clamp(2.5rem, 5.6vw, 5rem); line-height:1.04; letter-spacing:-0.042em; font-weight:600; }
.d2{ font-size:clamp(1.85rem, 3.8vw, 3.2rem); line-height:1.1; letter-spacing:-0.034em; font-weight:600; }
.d3{ font-size:clamp(1.25rem, 1.9vw, 1.65rem); line-height:1.2; letter-spacing:-0.022em; font-weight:600; }
.d4{ font-size:clamp(1rem,1.25vw,1.15rem); line-height:1.3; letter-spacing:-0.014em; font-weight:600; }

/* The deck's signature: black headline, one orange word carrying the payload. */
.em{ color:var(--orange); font-style:normal; font-weight:600; }

/* The considered label. Times in caps, widely tracked, is the whole trick. */
.lab{
  font-size:.688rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-45); margin:0 0 clamp(22px,2.6vw,38px);
  display:flex; align-items:center; gap:11px;
}
.lab .paw{ width:13px; height:13px; color:var(--orange); flex:0 0 auto; }

.say{ font-size:clamp(.95rem,1.1vw,1.06rem); line-height:1.72; color:var(--ink-70);
      max-width:33em; margin:0 0 1.05em; }
.say-lg{ font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.5; font-weight:400; color:var(--ink-70);
         max-width:24em; letter-spacing:-.012em; }
.note{ font-size:.85rem; line-height:1.65; color:var(--ink-45); max-width:38em; margin:0; }

.num{ font-variant-numeric:lining-nums tabular-nums; }

/* --------------------------------------------------------------------------
   PAW — the system mark
   -------------------------------------------------------------------------- */
.paw{ display:inline-block; width:16px; height:16px; fill:currentColor; }
.paw-lg{ width:26px; height:26px; }

/* --------------------------------------------------------------------------
   RULES + CONNECTOR
   -------------------------------------------------------------------------- */
.rule{ border:0; border-top:1px solid var(--hair); margin:0; }
.rule-ink{ border:0; border-top:1px solid var(--ink); margin:0; }

.conn{ position:relative; border-top:1px solid var(--hair); }
.conn::before,.conn::after{
  content:''; position:absolute; top:-3.5px; width:7px; height:7px; border-radius:50%;
  background:var(--orange);
}
.conn::before{ left:0; } .conn::after{ right:0; }

.band{ padding:var(--rhythm) 0; }
.band-sm{ padding:clamp(52px,5.5vw,92px) 0; }
.band-tint{ background:var(--tint); }

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */
.top{ position:sticky; top:0; z-index:90; background:var(--paper);
      border-bottom:1px solid var(--hair); }
.top-in{ display:flex; align-items:center; gap:28px; height:88px; }
.logo{ flex:0 0 auto; }
.logo img{ height:58px; width:auto; }

.menu{ display:flex; align-items:center; gap:30px; margin-left:auto; }
.menu a{ flex:0 0 auto; font-size:1rem; color:var(--ink-70); text-decoration:none; position:relative;
         padding:5px 0; white-space:nowrap; }
.menu a::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--orange); transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.7,.3,1); }
.menu a:hover::after,.menu a[aria-current="page"]::after{ transform:scaleX(1); }
.menu a[aria-current="page"]{ color:var(--ink); }

.burger{ display:none; margin-left:auto; width:44px; height:40px; background:none;
         border:0; cursor:pointer; position:relative; }
.burger span,.burger::before,.burger::after{
  content:''; position:absolute; left:11px; width:22px; height:1px; background:var(--ink);
  transition:transform .25s ease, opacity .2s ease; }
.burger::before{ top:14px; } .burger span{ top:20px; } .burger::after{ top:26px; }
.burger[aria-expanded="true"]::before{ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span{ opacity:0; }
.burger[aria-expanded="true"]::after{ transform:translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   ACTIONS
   -------------------------------------------------------------------------- */
.act{ display:inline-flex; align-items:center; gap:12px; flex:0 0 auto; white-space:nowrap; font-size:1.02rem; text-decoration:none;
      padding:16px 30px; background:var(--ink); color:#fff; transition:background .22s ease; }
.act:hover{ background:var(--orange); }
.act .paw{ width:15px; height:15px; transition:transform .3s cubic-bezier(.2,.7,.3,1); }
.act:hover .paw{ transform:translateX(5px); }
.act-sm{ padding:11px 20px; font-size:.95rem; }

.tlink{ display:inline-flex; align-items:center; gap:10px; font-size:1.02rem; text-decoration:none;
        color:var(--ink); padding-bottom:4px; border-bottom:1px solid var(--hair-2);
        transition:border-color .22s ease, color .22s ease; }
.tlink:hover{ border-color:var(--orange); color:var(--orange); }
.tlink .paw{ width:13px; height:13px; transition:transform .3s cubic-bezier(.2,.7,.3,1); }
.tlink:hover .paw{ transform:translateX(4px); }
.acts{ display:flex; flex-wrap:wrap; gap:18px 32px; align-items:center; }

/* --------------------------------------------------------------------------
   SECTION RAIL — paw prints tracking scroll position (desktop only)
   -------------------------------------------------------------------------- */
.rail{ position:fixed; right:clamp(14px,1.6vw,26px); top:50%; transform:translateY(-50%);
       z-index:70; display:flex; flex-direction:column; gap:22px; align-items:center; }
.rail a{ display:block; width:20px; height:20px; color:var(--hair-2); position:relative;
         transition:color .3s ease, transform .3s ease; }
.rail a .paw{ width:20px; height:20px; display:block; }
.rail a:hover{ color:var(--ink); transform:scale(1.15); }
.rail a.on{ color:var(--orange); transform:scale(1.3); }
.rail a span{ position:absolute; right:26px; top:50%; transform:translateY(-50%);
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink);
  white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .25s ease; }
.rail a:hover span{ opacity:1; }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero{ position:relative; padding:clamp(40px,4.5vw,76px) 0 0; }
.hero-in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.58fr);
          gap:clamp(24px,4vw,68px); align-items:end; }
.hero h1{ margin:0 0 clamp(26px,2.8vw,42px); }
.hero .say-lg{ margin-bottom:clamp(30px,3.2vw,46px); }
.lion{ justify-self:end; width:100%; max-width:430px; opacity:.07;
       pointer-events:none; user-select:none; transform:translateY(5%); }

/* --------------------------------------------------------------------------
   FIGURES
   -------------------------------------------------------------------------- */
.figs{ display:grid; grid-template-columns:repeat(4,1fr); }
.figs-3{ grid-template-columns:repeat(3,1fr); }
.figs > div{ padding:clamp(28px,3.2vw,50px) clamp(20px,2.2vw,36px) clamp(28px,3.2vw,50px) 0;
             border-right:1px solid var(--hair); }
.figs > div:last-child{ border-right:0; }
.figs b{ display:block; font-size:clamp(3rem,5.8vw,5.4rem); line-height:.88;
         letter-spacing:-.05em; font-weight:400; font-variant-numeric:lining-nums tabular-nums; }
.figs b i{ font-style:italic; font-size:.3em; color:var(--ink-45); letter-spacing:0; margin-left:.16em; }
.figs > div > span{ display:block; margin-top:clamp(14px,1.6vw,22px); font-size:.92rem; line-height:1.45;
            color:var(--ink-45); max-width:20em; }

.wall{ display:grid; grid-template-columns:repeat(4,1fr); }
.wall > div{ padding:clamp(26px,2.8vw,42px) 28px clamp(26px,2.8vw,42px) 0;
             border-top:1px solid var(--hair); border-right:1px solid var(--hair); }
.wall > div:nth-child(4n){ border-right:0; }
.wall b{ display:block; font-size:clamp(2.3rem,4vw,3.6rem); line-height:.9; letter-spacing:-.045em;
         color:var(--orange); font-variant-numeric:lining-nums tabular-nums; }
.wall > div > span{ display:block; margin-top:13px; font-size:.88rem; line-height:1.45; color:var(--ink-70); max-width:19em; }

/* --------------------------------------------------------------------------
   LEDGER
   -------------------------------------------------------------------------- */
.ledger{ border-top:1px solid var(--ink); }
.led{ display:grid; grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);
      gap:clamp(14px,2vw,40px); align-items:center;
      padding:clamp(22px,2.7vw,36px) 0; border-bottom:1px solid var(--hair); }
.led-p{ font-size:clamp(1.3rem,2.2vw,1.95rem); letter-spacing:-.026em; line-height:1.1; margin:0; }
.led-arrow{ position:relative; height:1px; background:var(--hair); }
.led-arrow i{ position:absolute; inset:0 auto 0 0; height:1px; background:var(--orange);
              width:0; transition:width .75s cubic-bezier(.2,.7,.3,1); }
.led-arrow::after{ content:''; position:absolute; right:0; top:-3.5px; width:7px; height:7px;
                   border-radius:50%; background:var(--hair-2); transition:background .4s ease .5s; }
.led.on .led-arrow i{ width:100%; }
.led.on .led-arrow::after{ background:var(--orange); }
.led-i{ font-size:clamp(1.3rem,2.2vw,1.95rem); letter-spacing:-.026em; line-height:1.1; margin:0; }
.led-i em{ display:block; font-style:normal; font-size:.5em; letter-spacing:0; color:var(--ink-45);
           margin-top:7px; line-height:1.4; }

/* --------------------------------------------------------------------------
   SPLIT
   -------------------------------------------------------------------------- */
.split{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.split > div{ padding:clamp(28px,3.4vw,56px) clamp(24px,3vw,58px) clamp(28px,3.4vw,56px) 0; }
.split > div:last-child{ padding-right:0; padding-left:clamp(24px,3vw,58px);
                         border-left:1px solid var(--hair); }
.slist{ list-style:none; margin:26px 0 0; padding:0; }
.slist li{ padding:15px 0 15px 30px; border-top:1px solid var(--hair); position:relative;
           font-size:1.04rem; color:var(--ink-70); }
.slist li .paw{ position:absolute; left:0; top:19px; width:14px; height:14px; color:var(--hair-2); }
.slist-key li .paw{ color:var(--orange); }
.slist-key li{ color:var(--ink); }

.guar{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--ink); }
.guar > div{ padding:clamp(30px,3.2vw,48px) 32px clamp(30px,3.2vw,48px) 0;
             border-right:1px solid var(--hair); }
.guar > div:last-child{ border-right:0; }
.guar b{ display:block; font-size:clamp(2.7rem,4.8vw,4.2rem); line-height:.9; letter-spacing:-.045em;
         font-weight:400; font-variant-numeric:lining-nums tabular-nums; }
.guar b i{ font-style:italic; font-size:.28em; color:var(--ink-45); letter-spacing:0; margin-left:.16em; }
.guar > div > span{ display:block; margin-top:15px; font-size:.92rem; color:var(--ink-45); max-width:19em; line-height:1.45; }

/* --------------------------------------------------------------------------
   COST OF DELAY
   -------------------------------------------------------------------------- */
.calc{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
       gap:clamp(30px,5vw,82px); align-items:center; }
.calc-controls{ display:grid; gap:clamp(24px,3vw,38px); }
.ctrl label{ display:block; font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
             color:var(--ink-45); margin-bottom:14px; }
.ctrl-val{ font-size:clamp(1.6rem,2.6vw,2.2rem); letter-spacing:-.03em; display:block; margin-bottom:10px; }
.ctrl-val i{ font-style:italic; font-size:.44em; color:var(--ink-45); margin-left:.2em; }
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:1px;
  background:var(--hair-2); outline:none; margin:12px 0; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none;
  width:16px; height:16px; border-radius:50%; background:var(--orange); cursor:pointer; border:0; }
input[type=range]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%;
  background:var(--orange); cursor:pointer; border:0; }
.calc-out{ border-top:1px solid var(--ink); padding-top:clamp(24px,2.8vw,36px); }
.calc-out b{ display:block; font-size:clamp(3rem,7vw,6rem); line-height:.88; letter-spacing:-.05em;
             font-weight:400; font-variant-numeric:lining-nums tabular-nums; }
.calc-out .cap{ display:block; margin-top:18px; font-size:.96rem; color:var(--ink-45);
                max-width:26em; line-height:1.55; }
.calc-note{ margin-top:24px; font-size:.84rem; color:var(--ink-45); line-height:1.6; max-width:34em;
            padding-left:20px; border-left:1px solid var(--orange); }

/* --------------------------------------------------------------------------
   PROOF
   -------------------------------------------------------------------------- */
.proof{ border-top:1px solid var(--ink); }
.pf{ display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.2fr) repeat(3,minmax(0,.44fr));
     gap:clamp(16px,2.4vw,42px); align-items:baseline;
     padding:clamp(28px,3.2vw,46px) 0; border-bottom:1px solid var(--hair); }
.pf-sec{ font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-45);
         margin:0 0 11px; display:flex; align-items:center; gap:9px; }
.pf-sec .paw{ width:12px; height:12px; color:var(--orange); }
.pf h3{ font-size:clamp(1.4rem,2.1vw,1.9rem); margin:0; }
.pf-txt{ font-size:1.02rem; line-height:1.6; color:var(--ink-70); margin:0; }
.pf-n b{ display:block; font-size:clamp(1.65rem,2.7vw,2.4rem); line-height:.95; letter-spacing:-.04em;
         font-weight:400; font-variant-numeric:lining-nums tabular-nums; }
.pf-n b i{ font-style:italic; font-size:.4em; color:var(--ink-45); letter-spacing:0; }
.pf-n span{ display:block; margin-top:9px; font-size:.78rem; letter-spacing:.06em; color:var(--ink-45); }

/* --------------------------------------------------------------------------
   INDEX
   -------------------------------------------------------------------------- */
.index{ border-top:1px solid var(--ink); }
.ix{ display:grid; grid-template-columns:66px minmax(0,1fr) minmax(0,1.15fr) auto;
     gap:clamp(16px,2.4vw,42px); align-items:baseline;
     padding:clamp(24px,2.7vw,38px) 0; border-bottom:1px solid var(--hair);
     text-decoration:none; position:relative; }
.ix::after{ content:''; position:absolute; left:0; bottom:-1px; height:1px; width:0;
            background:var(--orange); transition:width .5s cubic-bezier(.2,.7,.3,1); }
.ix:hover::after{ width:100%; }
.ix-n{ font-size:.86rem; letter-spacing:.1em; color:var(--ink-45); font-variant-numeric:lining-nums; }
.ix h3{ font-size:clamp(1.3rem,2vw,1.75rem); margin:0; }
.ix p{ margin:0; font-size:1.02rem; line-height:1.55; color:var(--ink-70); }
.ix-go{ display:inline-flex; align-items:center; gap:8px; font-size:.92rem; color:var(--ink-45); white-space:nowrap; }
.ix-go .paw{ width:12px; height:12px; }
.ix:hover .ix-go{ color:var(--orange); }

/* --------------------------------------------------------------------------
   WHAT YOU RECEIVE
   -------------------------------------------------------------------------- */
.receive{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--ink); }
.rc{ padding:clamp(26px,3vw,42px) clamp(22px,2.4vw,40px) clamp(26px,3vw,42px) 0;
     border-right:1px solid var(--hair); border-bottom:1px solid var(--hair); }
.rc:nth-child(3n){ border-right:0; }
.rc .paw{ width:19px; height:19px; color:var(--orange); margin-bottom:18px; }
.rc h4{ margin:0 0 9px; }
.rc p{ margin:0; font-size:.92rem; line-height:1.5; color:var(--ink-45); }

/* --------------------------------------------------------------------------
   SECTORS / REACH
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Q&A
   -------------------------------------------------------------------------- */
.qa{ border-top:1px solid var(--ink); }
.qa details{ border-bottom:1px solid var(--hair); }
.qa summary{ cursor:pointer; list-style:none; position:relative;
             padding:clamp(24px,2.6vw,34px) 60px clamp(24px,2.6vw,34px) 0;
             font-size:clamp(1.22rem,1.9vw,1.6rem); letter-spacing:-.024em; line-height:1.18; }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::before,.qa summary::after{
  content:''; position:absolute; right:10px; top:50%; background:var(--orange);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), opacity .25s ease;
}
.qa summary::before{ width:16px; height:1px; margin-top:-.5px; }
.qa summary::after{ width:1px; height:16px; margin-right:7.5px; margin-top:-8px; }
.qa details[open] summary::after{ opacity:0; transform:rotate(90deg); }
.qa .ans{ padding:0 0 clamp(26px,2.8vw,38px); }
.qa .ans p{ font-size:1.08rem; line-height:1.68; color:var(--ink-70); max-width:44em; margin:0 0 .8em; }
.qa .ans p:last-child{ margin:0; }

/* --------------------------------------------------------------------------
   CLOSE / PENDING / PAGE HEAD
   -------------------------------------------------------------------------- */
.close-in{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(28px,4vw,76px); align-items:end; }
.pending{ border-left:1px solid var(--orange); padding:4px 0 4px 24px; }
.pending h3{ font-size:1.3rem; margin:0 0 10px; }
.pending p{ margin:0; font-size:1rem; color:var(--ink-45); line-height:1.6; max-width:44em; }
.phead{ padding:clamp(56px,6.5vw,120px) 0 clamp(38px,4vw,68px); }
.phead h1{ font-size:clamp(2.8rem,6.6vw,5.8rem); margin:0 0 clamp(22px,2.6vw,36px); letter-spacing:-.04em; }

/* --------------------------------------------------------------------------
   FORMS
   -------------------------------------------------------------------------- */
.fld{ margin-bottom:clamp(22px,2.4vw,32px); }
.fld label{ display:block; font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
            color:var(--ink-45); margin-bottom:10px; }
.fld label em{ font-style:italic; text-transform:none; letter-spacing:.02em; }
.fld input,.fld select,.fld textarea{
  width:100%; font-family:var(--font); font-size:1.08rem; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--hair-2);
  padding:11px 0; border-radius:0; transition:border-color .22s ease; }
.fld input:focus,.fld select:focus,.fld textarea:focus{ border-bottom-color:var(--orange); outline:none; }
.fld textarea{ min-height:126px; resize:vertical; }
.fld input[type=file]{ font-size:.94rem; color:var(--ink-45); padding:15px 0; }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(24px,3vw,50px); }
.f3{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 clamp(24px,3vw,50px); }
.fnote{ border-left:1px solid var(--orange); padding:2px 0 2px 20px; margin-bottom:clamp(28px,3vw,42px);
        font-size:.94rem; color:var(--ink-45); line-height:1.6; max-width:44em; }
.fstat{ margin-top:22px; font-size:1rem; display:none; }
.fstat.on{ display:block; }
.fstat.ok{ color:var(--orange); } .fstat.err{ color:var(--ink); border-left:1px solid var(--orange); padding-left:16px; }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.foot{ border-top:1px solid var(--ink); padding:clamp(56px,6.5vw,96px) 0 36px; }
.foot-in{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.25fr; gap:clamp(28px,4vw,60px); }
.foot-lab{ font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-45); margin:0 0 22px; }
.foot ul{ list-style:none; margin:0; padding:0; }
.foot li{ margin-bottom:12px; font-size:1rem; line-height:1.55; color:var(--ink-70); }
.foot a{ text-decoration:none; color:var(--ink-70); border-bottom:1px solid transparent; }
.foot a:hover{ border-bottom-color:var(--orange); color:var(--ink); }
.foot-logo img{ height:60px; margin-bottom:22px; }
.foot-say{ font-size:1.08rem; color:var(--ink-70); max-width:19em; margin:0; }
.foot-base{ margin-top:clamp(44px,5vw,70px); padding-top:24px; border-top:1px solid var(--hair);
            display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
            font-size:.88rem; color:var(--ink-45); }


/* --------------------------------------------------------------------------
   Restored with the journey rebuild: the lion watermark and the icon sizing
   token. Both were carried inside blocks removed during the cleanup.
   -------------------------------------------------------------------------- */
.journey{ position:relative; overflow:hidden; }
.journey-lion{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-48%);
  width:min(620px,68%); opacity:.05; z-index:0;
  pointer-events:none; user-select:none;
}
.journey .shell{ position:relative; z-index:1; }
.ic-w{ width:100%; height:100%; display:block; }

/* Section-label rhythm: one consistent distance from label to headline to
   diagram, so no section sits looser or tighter than its neighbours. */
.band > .shell > .lab + h2,
.band-sm > .shell > .lab + h2{ margin-top:0; }
.band > .shell > h2 + *,
.band-tint > .shell > h2 + *{ margin-top:clamp(42px,5vw,74px) !important; }
.band > .shell > .lab:not(:first-child){ margin-top:clamp(46px,5.5vw,80px); }

/* Diagram blocks centre themselves and never exceed the text column */
.radial,.hub{ max-width:100%; }
.net-svg{ max-width:1200px; margin:0 auto; }

/* Keep the closing rule's junction dots from sitting on the container edge */
.conn{ margin:0 2px; }

/* --------------------------------------------------------------------------
   MOTION
   -------------------------------------------------------------------------- */
.rise{ opacity:0; }
.rise.on{ opacity:1; transition:opacity .7s cubic-bezier(.2,.7,.3,1); }

.wipe{ overflow:hidden; }
.wipe > *{ display:block; transform:translateY(103%); }
.wipe.on > *{ transform:translateZ(0); transition:transform .9s cubic-bezier(.16,.84,.28,1); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .rise{ opacity:1 !important; transform:none !important; }
  .wipe > *{ transform:none !important; }
  .led-arrow i,.steps .step-line i{ width:100% !important; }
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width:1240px){ .rail{ display:none; } }

@media (max-width:1100px){
  .menu{ gap:22px; } .menu a{ font-size:.94rem; }
  .figs,.wall,.receive{ grid-template-columns:repeat(2,1fr); }
  .figs > div:nth-child(2n){ border-right:0; }
  .wall > div:nth-child(2n){ border-right:0; }
  .rc:nth-child(3n){ border-right:1px solid var(--hair); }
  .rc:nth-child(2n){ border-right:0; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .step{ padding-bottom:36px; }
  .step-line{ display:none; }
  .step-mark{ position:static; margin-bottom:18px; }
  .step-top{ height:auto; margin-bottom:14px; }
  .sectors{ grid-template-columns:1fr; }
  .sector{ border-right:0; border-bottom:1px solid var(--hair); }
  .pf{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .calc,.vacancy{ grid-template-columns:1fr; }
  .vac-fig{ max-width:290px; }
}

@media (max-width:860px){
  body{ font-size:17px; }
  .top-in{ height:74px; } .logo img{ height:48px; }
  .burger{ display:block; }
  .menu{ display:none; position:absolute; left:0; right:0; top:74px; flex-direction:column;
         align-items:stretch; gap:0; background:var(--paper); border-bottom:1px solid var(--hair);
         padding:6px var(--gut) 26px; }
  .menu.open{ display:flex; }
  .menu a{ padding:16px 0; border-bottom:1px solid var(--hair); font-size:1.08rem; }
  .menu a::after{ display:none; }
  .menu .act{ margin-top:20px; justify-content:center; }
  .hero-in{ grid-template-columns:1fr; } .lion{ display:none; }
  .split{ grid-template-columns:1fr; }
  .split > div{ padding:clamp(28px,4vw,46px) 0; border-top:1px solid var(--hair); }
  .split > div:last-child{ padding-left:0; border-left:0; }
  .led{ grid-template-columns:1fr; gap:12px; padding:24px 0; }
  .led-arrow{ width:76px; }
  .guar{ grid-template-columns:1fr; }
  .guar > div{ border-right:0; border-bottom:1px solid var(--hair); }
  .ix{ grid-template-columns:48px 1fr; gap:6px 18px; }
  .ix p,.ix-go{ grid-column:2; } .ix p{ margin-top:7px; } .ix-go{ margin-top:12px; }
  .reach{ grid-template-columns:repeat(2,1fr); }
  .reach span:nth-child(3n){ border-right:1px solid var(--hair); }
  .reach span:nth-child(2n){ border-right:0; }
  .close-in{ grid-template-columns:1fr; }
  .foot-in{ grid-template-columns:1fr 1fr; }
  .f2,.f3{ grid-template-columns:1fr; }
}

@media (max-width:560px){
  .figs,.wall,.reach,.receive{ grid-template-columns:1fr; }
  .figs > div,.wall > div,.rc{ border-right:0 !important; border-bottom:1px solid var(--hair); padding-right:0; }
  .reach span{ border-right:0 !important; }
  .steps{ grid-template-columns:1fr; }
  .pf{ grid-template-columns:1fr; gap:16px; }
  .pf-n{ display:flex; align-items:baseline; gap:14px; }
  .pf-n b{ font-size:1.5rem; } .pf-n span{ margin-top:0; }
  .sub-sectors{ flex-direction:column; }
  .sub-sectors span{ padding:16px 0; border-bottom:1px solid var(--hair); }
  .foot-in{ grid-template-columns:1fr; }
}

/* ==========================================================================
   DIAGRAM LAYER — v4
   The deck is picture-led; this is what makes the site picture-led too.
   Every diagram here is authored in BOTH states: a desktop composition and a
   genuine mobile composition. Nothing is hidden or squashed below a breakpoint.
   ========================================================================== */

/* ---- Icon in a thin circle: the deck's container motif ------------------ */
.icn{
  width:var(--s,68px); height:var(--s,68px); border-radius:50%;
  border:1px solid var(--hair-2); background:var(--paper);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  transition:border-color .45s ease, color .45s ease, transform .45s ease;
}
.icn svg{ width:52%; height:52%; display:block; }
.icn img{ width:56%; height:56%; object-fit:contain; display:block; }
.icn-lg img{ width:50%; height:50%; }
/* deck art is fixed two-tone, so the ring must not recolour underneath it */
.icn.art{ border-color:var(--hair-2); }
.on .icn.art{ border-color:var(--hair-2); }
.icn-sm{ --s:46px; }
.icn-lg{ --s:96px; }
.icn.key{ border-color:var(--orange); color:var(--orange); }
.on .icn, .rise.on .icn{ border-color:var(--ink); }
.on .icn.key{ border-color:var(--orange); }

/* Line icons inherit one stroke language everywhere */
.ic{ fill:none; stroke:currentColor; stroke-width:1.7;
     stroke-linecap:round; stroke-linejoin:round; }
.ic-f{ fill:currentColor; stroke:none; }

/* ---- Orange numerals: the deck's fastest-reading device ----------------- */
.figs b,.guar b,.pf-n b,.calc-out b,.wall b{ color:var(--orange); }
.figs b i,.guar b i,.pf-n b i{ color:var(--ink-45); }

/* ---- Connector: hairline with orange junction dots ---------------------- */
.dot{ width:7px; height:7px; border-radius:50%; background:var(--orange); flex:0 0 auto; }
.dot-sm{ width:5px; height:5px; }
.lnk{ flex:1; height:1px; background:var(--hair-2); min-width:14px; }

/* ==========================================================================
   1. PROBLEM -> IMPACT  radial, with the vacancy at the centre
   ========================================================================== */
.radial{
  --dia: min(760px, 86vw);
  --R: calc(var(--dia) * 0.372);
  position:relative; width:var(--dia); height:var(--dia); margin:0 auto;
}
.radial-svg{ position:absolute; inset:0; width:100%; height:100%; z-index:0; overflow:visible; }
.radial-svg line{ stroke:var(--hair); stroke-width:.35; }
.radial-svg circle.j{ fill:var(--orange); }


.radial-core{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:calc(var(--dia) * .3); z-index:2; text-align:center;
}
.radial-core img{ width:100%; filter:drop-shadow(0 18px 26px rgba(23,23,26,.16)); }
.radial-core b{ display:block; margin-top:12px; font-size:.62rem; letter-spacing:.24em;
                text-transform:uppercase; color:var(--ink-45); font-weight:400; }

.rnode{
  position:absolute; left:50%; top:50%; z-index:1;
  width:calc(var(--dia) * .215);
  transform:translate(-50%,-50%) rotate(var(--a)) translate(var(--R)) rotate(calc(-1 * var(--a)));
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
}
.rnode .icn{ --s:calc(var(--dia) * .092); }
.rnode span{ font-size:clamp(.8rem,1.02vw,.98rem); line-height:1.24; letter-spacing:-.012em;
              overflow-wrap:break-word; hyphens:auto; }
.rnode.impact span{ color:var(--orange); }
.rnode.impact .icn{ border-color:var(--hair-2); }
.radial.on .rnode.impact .icn{ border-color:var(--orange); color:var(--orange); }

.radial-key{ display:flex; justify-content:space-between; max-width:var(--dia); margin:22px auto 0;
             font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-45); }

/* mobile: a paired ledger, chair above */
.radial-stack{ display:none; }
@media (max-width:900px){
  .radial,.radial-key{ display:none; }
  .radial-stack{ display:block; }
  .rs-core{ text-align:center; margin-bottom:34px; }
  .rs-core img{ width:150px; margin:0 auto;
                filter:drop-shadow(0 16px 22px rgba(23,23,26,.15)); }
  .rs-core b{ display:block; margin-top:12px; font-size:.6rem; letter-spacing:.24em;
              text-transform:uppercase; color:var(--ink-45); font-weight:400; }
  .rs-head{ display:grid; grid-template-columns:1fr 34px 1fr; gap:10px;
            font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
            color:var(--ink-45); padding-bottom:12px; border-bottom:1px solid var(--ink); }
  .rs-head span:last-child{ text-align:right; }
  .rs-row{ display:grid; grid-template-columns:1fr 34px 1fr; gap:10px; align-items:center;
           padding:18px 0; border-bottom:1px solid var(--hair); }
  .rs-side{ display:flex; align-items:center; gap:11px; font-size:.95rem; line-height:1.2; }
  .rs-side.r{ justify-content:flex-end; text-align:right; color:var(--orange); }
  .rs-side .icn{ --s:38px; }
  .rs-side.r .icn{ order:2; border-color:var(--orange); color:var(--orange); }
  .rs-mid{ display:flex; align-items:center; }
  .rs-mid i{ flex:1; height:1px; background:var(--hair-2); }
  .rs-mid s{ width:5px; height:5px; border-radius:50%; background:var(--orange); }
}

/* ==========================================================================
   2. SECTOR ARC
   ========================================================================== */
.arc{ position:relative; padding-top:104px; }
.arc-svg{ position:absolute; left:0; right:0; top:0; height:104px; width:100%; display:block; }
.arc-svg path{ fill:none; stroke:var(--hair-2); stroke-width:1; }
.arc-svg circle{ fill:var(--orange); }
/* gap must stay 0: equal thirds are what keeps the arc junctions on the nodes */
.arc-nodes{ position:relative; display:grid; grid-template-columns:repeat(3,1fr);
            gap:0; z-index:1; }
.arc-node{ text-align:center; display:flex; flex-direction:column; align-items:center;
           padding:0 clamp(10px,2vw,34px); }

.arc-node .icn{ --s:clamp(76px,8vw,104px); margin-bottom:24px; }
.arc-node h3{ font-size:clamp(1.3rem,2vw,1.85rem); margin:0 0 12px; }
.arc-node p{ margin:0; font-size:.9rem; color:var(--ink-45); line-height:1.5; max-width:17em; }

.subs{ display:grid; grid-template-columns:repeat(6,1fr); margin-top:clamp(40px,5vw,72px);
       border-top:1px solid var(--ink); }
.sub{ padding:clamp(22px,2.6vw,36px) 12px; display:flex; flex-direction:column; align-items:center;
      gap:14px; text-align:center; border-right:1px solid var(--hair); }
.sub:last-child{ border-right:0; }
.sub .icn{ --s:56px; }
.sub span{ font-size:.86rem; color:var(--ink-70); }

@media (max-width:900px){
  .arc-svg{ display:none; }
  .arc-nodes{ grid-template-columns:1fr; gap:0; border-top:1px solid var(--ink); }
  .arc-node{ flex-direction:row; align-items:center; gap:20px; text-align:left;
             padding:24px 0; border-bottom:1px solid var(--hair); }
  .arc-node:nth-child(2){ margin-top:0; }
  .arc-node .icn{ --s:64px; margin:0; }
  .arc-node p{ max-width:none; }
  .subs{ grid-template-columns:repeat(3,1fr); }
  .sub:nth-child(3n){ border-right:0; }
  .sub:nth-child(-n+3){ border-bottom:1px solid var(--hair); }
}
@media (max-width:520px){
  .subs{ grid-template-columns:repeat(2,1fr); }
  .sub:nth-child(3n){ border-right:1px solid var(--hair); }
  .sub:nth-child(2n){ border-right:0; }
}

/* ==========================================================================
   3. SERVICES HUB
   ========================================================================== */
.hub{
  --dia: min(720px, 86vw);
  --R: calc(var(--dia) * 0.345);
  position:relative; width:var(--dia); height:var(--dia); margin:0 auto;
}
.hub-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.hub-svg line{ stroke:var(--hair); stroke-width:.35; }
.hub-svg circle.j{ fill:var(--orange); }

.hub-core{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
           text-align:center; }
.hub-core .icn{ --s:calc(var(--dia) * .17); border-color:var(--ink); }
.hub-core b{ display:block; margin-top:14px; font-size:.6rem; letter-spacing:.24em;
             text-transform:uppercase; color:var(--ink-45); font-weight:400; }
.hnode{ position:absolute; left:50%; top:50%; z-index:1; width:calc(var(--dia) * .29);
        transform:translate(-50%,-50%) rotate(var(--a)) translate(var(--R)) rotate(calc(-1 * var(--a)));
        display:flex; flex-direction:column; align-items:center; gap:12px; text-decoration:none;
        text-align:center; }
.hnode .icn{ --s:calc(var(--dia) * .105); }
.hnode:hover .icn{ border-color:var(--orange); color:var(--orange); transform:scale(1.06); }
.hnode b{ font-size:clamp(.86rem,1.1vw,1.02rem); font-weight:400; letter-spacing:-.014em;
          line-height:1.22; overflow-wrap:break-word; }
.hnode:hover b{ color:var(--orange); }

.hub-stack{ display:none; }
@media (max-width:900px){
  .hub{ display:none; }
  .hub-stack{ display:block; border-top:1px solid var(--ink); }
  .hs{ display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center;
       padding:20px 0; border-bottom:1px solid var(--hair); text-decoration:none; }
  .hs .icn{ --s:54px; }
  .hs b{ font-weight:400; font-size:1.12rem; letter-spacing:-.018em; }
  .hs b em{ display:block; font-style:normal; font-size:.82rem; color:var(--ink-45); margin-top:5px; }
  .hs .dot{ opacity:.45; }
}

/* ==========================================================================
   4. HIRING JOURNEY — a real spine, on both desktop and mobile
   ========================================================================== */
.flow{ position:relative; }
.flow-track{ display:grid; grid-template-columns:repeat(5,1fr); position:relative; z-index:1; }
.fstep{ --m:clamp(74px,7.2vw,98px);
        display:flex; flex-direction:column; align-items:center; text-align:center;
        padding:0 clamp(8px,1.2vw,20px); }
.fstep-mark{ position:relative; z-index:1; margin-bottom:clamp(20px,2.4vw,32px); }
.fstep-mark .icn{ --s:var(--m); }
.fstep-mark .icn .paw{ width:44%; height:44%; }
/* the spine — spans exactly from this cell's centre to the next cell's centre,
   so it can never overshoot or fall short at any viewport width */
.fstep{ position:relative; }
.fstep::after{
  content:''; position:absolute; z-index:0;
  top:calc(var(--m) / 2 - 1px); left:50%; width:100%; height:2px;
  background:linear-gradient(to right,var(--ink) 50%,var(--hair) 50%);
  background-size:200% 100%; background-position:100% 0;
  transition:background-position .55s cubic-bezier(.3,.7,.3,1);
}
.fstep:last-child::after{ display:none; }
.flow.on .fstep::after{ background-position:0 0; }
.flow.on .fstep:nth-child(1)::after{ transition-delay:.15s; }
.flow.on .fstep:nth-child(2)::after{ transition-delay:.5s; }
.flow.on .fstep:nth-child(3)::after{ transition-delay:.85s; }
.flow.on .fstep:nth-child(4)::after{ transition-delay:1.2s; }
.flow.on .icn{ border-color:var(--ink); color:var(--ink); }
.flow.on .fstep.key .icn{ border-color:var(--orange); color:var(--orange); transform:scale(1.1); }
.fstep h4{ margin:0 0 9px; font-size:clamp(1.1rem,1.6vw,1.45rem); }
.fstep.key h4{ color:var(--orange); }
.fstep p{ margin:0; font-size:.87rem; line-height:1.45; color:var(--ink-45); }

@media (max-width:900px){
  .flow-track{ grid-template-columns:1fr; }
  .fstep{ flex-direction:row; align-items:flex-start; text-align:left; gap:20px;
          padding:0 0 30px; position:relative; }
  .fstep-mark{ margin-bottom:0; flex:0 0 auto; }
  .fstep{ --m:60px; }
  /* spine becomes vertical and stays connected */
  .fstep::after{
    top:var(--m); left:calc(var(--m) / 2 - 1px); width:2px; height:calc(100% - var(--m));
    background:linear-gradient(to bottom,var(--ink) 50%,var(--hair) 50%);
    background-size:100% 200%; background-position:0 100%;
  }
  .flow.on .fstep::after{ background-position:0 0; }
  .fstep:last-child::after{ display:none; }
  .fstep-body{ padding-top:8px; }
}

/* ==========================================================================
   5. GLOBAL REACH — origin and connections
   ========================================================================== */
.net{ position:relative; }
.net-svg{ width:100%; height:auto; display:block; overflow:visible; }
.net-svg .line{ fill:none; stroke:var(--hair-2); stroke-width:1;
                stroke-dasharray:var(--len) var(--len); stroke-dashoffset:var(--len);
                transition:stroke-dashoffset 1.1s cubic-bezier(.25,.7,.3,1); }
.net.on .net-svg .line{ stroke-dashoffset:0; }
.net-svg .j{ fill:var(--orange); opacity:0; transition:opacity .4s ease .7s; }
.net.on .net-svg .j{ opacity:1; }
.net-svg .origin-ring{ fill:none; stroke:var(--orange); stroke-width:1.4; }
.net-svg .origin-fill{ fill:var(--paper); }
.net-svg text{ font-family:var(--font); fill:var(--ink); }
.net-svg text.lbl{ font-size:19px; letter-spacing:-.2px; }
.net-svg text.org{ font-size:27px; fill:var(--orange); }
.net-svg text.cap{ font-size:12px; letter-spacing:2.2px; fill:var(--ink-45); }

.net-stack{ display:none; }
@media (max-width:900px){
  .net{ display:none; }
  .net-stack{ display:block; }
  .ns-origin{ display:flex; align-items:center; gap:14px; padding-bottom:20px;
              border-bottom:1px solid var(--ink); }
  .ns-origin .icn{ --s:56px; border-color:var(--orange); color:var(--orange); }
  .ns-origin b{ font-weight:400; font-size:1.5rem; color:var(--orange); letter-spacing:-.024em; }
  .ns-origin b em{ display:block; font-style:normal; font-size:.6rem; letter-spacing:.22em;
                   text-transform:uppercase; color:var(--ink-45); margin-top:4px; }
  .ns-row{ display:flex; align-items:center; gap:12px; padding:15px 0;
           border-bottom:1px solid var(--hair); font-size:1.08rem; }
  .ns-row i{ width:26px; height:1px; background:var(--hair-2); flex:0 0 auto; }
}

/* ==========================================================================
   6. AT A GLANCE — icons on leader lines
   ========================================================================== */
.glance{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--ink); }
.gl{ padding:clamp(28px,3vw,44px) clamp(16px,2vw,32px) clamp(28px,3vw,44px) 0;
     border-right:1px solid var(--hair); }
.gl:last-child{ border-right:0; }
.gl-top{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.gl-top .icn{ --s:54px; }
.gl-top i{ flex:1; height:1px; background:var(--hair); }
.gl b{ display:block; font-size:clamp(2.2rem,3.6vw,3.2rem); line-height:.92; letter-spacing:-.045em;
       font-weight:400; color:var(--orange); font-variant-numeric:lining-nums tabular-nums; }
.gl b.word{ font-size:clamp(1.2rem,1.7vw,1.5rem); line-height:1.35; letter-spacing:-.02em; }
.gl > span{ display:block; margin-top:13px; font-size:.86rem; color:var(--ink-45); line-height:1.45; }

@media (max-width:900px){
  .glance{ grid-template-columns:repeat(2,1fr); }
  .gl:nth-child(2n){ border-right:0; }
  .gl:nth-child(-n+2){ border-bottom:1px solid var(--hair); }
}
@media (max-width:520px){
  .glance{ grid-template-columns:1fr; }
  .gl{ border-right:0; border-bottom:1px solid var(--hair); padding-right:0; }
}

/* ==========================================================================
   WHAT YOU RECEIVE — icons, not paw bullets
   ========================================================================== */
.rc .icn{ --s:56px; margin-bottom:20px; }

/* Guarantee band now carries the deck's own icons on a leader line */
.guar > div .gl-top{ display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.guar > div .gl-top i{ flex:1; height:1px; background:var(--hair); }
.guar > div .icn-sm{ --s:52px; }


/* ==========================================================================
   NUMBER SYSTEM — one size, one weight, one colour across every figure.
   The count-up span must never inherit label styling.
   ========================================================================== */
.figs b span,.wall b span,.gl b span,.guar b span,.pf-n b span{
  font:inherit; color:inherit; display:inline; margin:0; max-width:none; letter-spacing:inherit;
}
.figs b,.guar b,.gl b{
  font-size:clamp(2.4rem,4vw,3.5rem); font-weight:300; line-height:1; letter-spacing:-.045em;
  color:var(--orange); font-variant-numeric:lining-nums tabular-nums;
}
.wall b{ font-size:clamp(2rem,3.2vw,2.9rem); font-weight:300; line-height:1; letter-spacing:-.045em; }
.pf-n b{ font-size:clamp(1.4rem,2.1vw,1.9rem); font-weight:400; letter-spacing:-.035em; color:var(--orange); }
.figs b i,.guar b i,.pf-n b i,.gl b i{
  font-style:normal; font-size:.3em; font-weight:500; color:var(--ink-45);
  letter-spacing:.02em; margin-left:.22em;
}
.gl b.word{ font-size:clamp(1.05rem,1.35vw,1.25rem); font-weight:500; line-height:1.45;
            letter-spacing:-.012em; color:var(--ink); }

/* ==========================================================================
   DEFECT 2: word spaces collapsing in Chrome inside revealed blocks.
   Two delayed variants reproduced it every time. The reveal is not worth a
   single unreadable paragraph, so text no longer animates at all — only the
   SVG spokes and the journey spine, which carry no type.
   ========================================================================== */
.rise{
  opacity:1 !important; transform:none !important; transition:none !important;
}
.wipe > *{ transform:none !important; }

/* ==========================================================================
   DEFECT 3: icons sat tiny and high-left inside their circles
   ========================================================================== */
.icn svg,.icn img{ width:54%; height:54%; display:block; margin:auto; object-fit:contain; }
.icn-lg svg,.icn-lg img{ width:50%; height:50%; }
.icn{ overflow:hidden; }

/* ==========================================================================
   DEFECT: header guillotining headings on scroll
   ========================================================================== */
html{ scroll-padding-top:104px; }
.top{ transition:height .25s ease; }
main > section{ scroll-margin-top:104px; }

/* ==========================================================================
   DEFECT: nav action clipped
   ========================================================================== */
.menu .act{ flex:0 0 auto !important; padding:11px 22px !important; }
.menu{ flex-wrap:nowrap; }

/* Focus ring: keep it for keyboard users, make it read as intentional */
:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; border-radius:2px; }
.menu a:focus:not(:focus-visible){ outline:none; }

/* ==========================================================================
   DEFECT: orange at body size is unreadable — reserve orange for figures
   ========================================================================== */
.rnode.impact span{ color:var(--ink); font-weight:500; }
.reach span.origin{ color:var(--ink); font-weight:500; }

/* ==========================================================================
   DEFECT: paw rail read as grey noise
   ========================================================================== */
.rail{ gap:16px; right:clamp(10px,1.1vw,18px); }
.rail a{ width:9px; height:9px; }
.rail a .paw{ width:9px; height:9px; opacity:.5; }
.rail a.on{ transform:none; }
.rail a.on .paw{ width:16px; height:16px; opacity:1; margin:-3.5px; }

/* ==========================================================================
   DEFECT: dead space and uneven rows
   ========================================================================== */
.figs > div,.wall > div,.gl,.guar > div{ display:flex; flex-direction:column; justify-content:flex-start; }
.wall > div{ padding-bottom:clamp(20px,2vw,28px); }
.figs > div{ padding-bottom:clamp(22px,2.2vw,32px); }
.split > div{ padding-bottom:clamp(20px,2.4vw,34px); }
.band{ padding:clamp(64px,7vw,116px) 0; }

/* ==========================================================================
   DEFECT: chair overwhelmed the radial
   ========================================================================== */
.radial{ --dia:min(700px,84vw); }
.radial-core{ width:calc(var(--dia) * .195); }
.radial-core b{ margin-top:14px; font-size:.6rem; letter-spacing:.18em; font-weight:600; }
.rnode{ width:calc(var(--dia) * .24); }
.rnode .icn{ --s:calc(var(--dia) * .108); }
.rnode span{ font-size:clamp(.78rem,.95vw,.9rem); font-weight:500; line-height:1.3; }

/* Services hub: centre it and stop the labels crowding */
.hub{ --dia:min(690px,84vw); --R:calc(var(--dia) * .355); }
.hnode{ width:calc(var(--dia) * .3); }
.hnode .icn{ --s:calc(var(--dia) * .115); }
.hnode b{ font-size:clamp(.82rem,.98vw,.94rem); font-weight:500; }
.hub-core .icn{ --s:calc(var(--dia) * .175); }
.hub-core b{ margin-top:16px; font-size:.6rem; letter-spacing:.18em; font-weight:600; }

/* Guarantee band leader lines were running into empty space */
.guar > div .gl-top i{ max-width:120px; }
.gl-top i{ max-width:150px; }


/* ==========================================================================
   Guard: a display-size class must never sit on a container whose children
   are small text. letter-spacing inherits as a computed length, so a label
   inside a .d1 block would inherit tracking calculated from 80px type.
   ========================================================================== */
.d1 > *:not(.em),.d2 > *:not(.em),.d3 > *:not(.em),.d4 > *:not(.em){ letter-spacing:initial; }
.figs > div,.wall > div,.gl,.guar > div,.rc,.step,.sub,.arc-node{
  letter-spacing:normal; font-weight:400; font-size:1rem;
}
.figs > div > span,.wall > div > span,.gl > span{
  letter-spacing:.002em; font-weight:400;
}

/* ==========================================================================
   FINAL RENDER CORRECTIONS — found by inspecting the real browser output
   ========================================================================== */

/* Arc junctions: anchored to the node, so they are always true circles and
   always exactly on the column centre. */
.arc-node{ position:relative; }
.arc-node::before{
  content:''; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  width:8px; height:8px; border-radius:50%; background:var(--orange);
}
.arc-node:nth-child(2)::before{ top:-54px; }

/* Guarantee and glance icons were washing out: the deck art is a light orange
   outline, which disappears at 52px. Give them ink weight and more presence. */
.guar .icn,.gl-top .icn{ --s:46px; border-color:var(--ink); }
.guar .icn svg,.gl-top .icn svg{ width:58%; height:58%; color:var(--ink); }

/* The lion was too faint to read as a deliberate mark */
.lion{ opacity:.11; max-width:380px; }
.journey-lion{ opacity:.07; width:min(540px,58%); }

/* Scroll rail: dots were too small to read as anything */
.rail a{ width:11px; height:11px; }
.rail a .paw{ width:11px; height:11px; opacity:.45; }
.rail a.on .paw{ width:17px; height:17px; opacity:1; margin:-3px; }

/* Trim the dead band the tinted sections were leaving behind */
.band + .band-tint,.band-tint + .band{ padding-top:clamp(56px,6vw,96px); }
.hero{ padding-bottom:0; }
.hero .figs{ margin-top:clamp(40px,4.5vw,72px) !important; }

/* Mobile impact labels were inheriting orange at body size — same legibility
   rule as the desktop radial. */
.rs-side.r{ color:var(--ink); font-weight:500; }

/* ==========================================================================
   FINAL CORRECTION PASS
   ========================================================================== */

/* 1. No hairline under the header on any page */
.top{ border-bottom:0 !important; }

/* 2. The CTA is a bold orange link, not a black box */
.act,.cta{
  display:inline-flex; align-items:center; gap:11px;
  background:none !important; border:0; padding:0 !important;
  color:var(--orange) !important; font-weight:600;
  font-size:clamp(1rem,1.15vw,1.1rem); letter-spacing:-.012em;
  text-decoration:none; position:relative; flex:0 0 auto; white-space:nowrap;
  transition:color .2s ease;
}
.cta::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:var(--orange); transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.cta:hover::after{ transform:scaleX(1); }
.cta .paw{ width:15px; height:15px; color:var(--orange);
           transition:transform .3s cubic-bezier(.2,.7,.3,1); }
.cta:hover .paw{ transform:translateX(5px); }
.cta-sm{ font-size:1rem; }
.menu .cta{ font-size:1rem; margin-left:6px; }
/* the page-level CTA gets more presence than the nav one */
.close-in .cta,.acts .cta{ font-size:clamp(1.1rem,1.4vw,1.32rem); }
.close-in .cta::after,.acts .cta::after{ height:2.5px; bottom:-8px; }

/* 5. Diagram circles: a touch more weight, matching the deck */
.icn{ border-width:1.5px; }
.vac-ring,.step-mark{ border-width:1.5px; }
.net-svg .origin-ring{ stroke-width:2; }

/* 6. Deck icons: sit them slightly larger now that they are sharp */
.icn img{ width:60%; height:60%; }
.icn-lg img{ width:54%; height:54%; }

/* 3. Hub: keep the centre optically centred and the labels even */
.hub-core{ z-index:3; }
.hub-core .icn{ border-color:var(--ink); border-width:1.5px; }
.hnode b{ display:block; max-width:13em; margin:0 auto; }

/* 10. Arithmetic: show the chain, and separate it from wider impact */
.chain{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:clamp(10px,1.6vw,26px);
        align-items:center; margin:clamp(26px,3vw,40px) 0 0; }
.chain-step{ text-align:center; }
.chain-step b{ display:block; font-size:clamp(1.5rem,2.6vw,2.3rem); font-weight:300;
               line-height:1; letter-spacing:-.04em; color:var(--orange);
               font-variant-numeric:lining-nums tabular-nums; }
.chain-step b i{ font-style:normal; font-size:.34em; font-weight:500; color:var(--ink-45); margin-left:.2em; }
.chain-step span{ display:block; margin-top:10px; font-size:.78rem; letter-spacing:.06em;
                  color:var(--ink-45); }
.chain-step.is-result b{ font-weight:400; }
.chain-arrow{ display:flex; align-items:center; gap:5px; color:var(--hair-2); }
.chain-arrow i{ display:block; width:clamp(16px,2.4vw,40px); height:1.5px; background:var(--hair-2); }
.chain-arrow s{ width:7px; height:7px; border-radius:50%; background:var(--orange); }
.calc-split{ margin-top:clamp(24px,2.6vw,34px); padding-top:clamp(20px,2.2vw,28px);
             border-top:1px solid var(--hair); }
.calc-split p{ margin:0 0 .5em; font-size:.88rem; line-height:1.65; color:var(--ink-45); max-width:40em; }
.calc-split p b{ color:var(--ink); font-weight:600; }
.calc-split p:last-child{ margin:0; }

@media (max-width:760px){
  .chain{ grid-template-columns:1fr; gap:14px; }
  .chain-arrow{ justify-content:center; transform:rotate(90deg); margin:2px 0; }
}

/* The old .calc-out b rule was unscoped and swallowed the <b> inside the new
   explanation. Scope every figure rule to the element it was written for. */
.calc-out > b{ display:block; }
.calc-split p b,.calc-split b{
  font-size:inherit !important; font-weight:600 !important; line-height:inherit !important;
  letter-spacing:inherit !important; color:var(--ink) !important; display:inline !important;
}
.chain-step b{
  font-size:clamp(1.7rem,3vw,2.6rem) !important; font-weight:300 !important;
  line-height:1 !important; letter-spacing:-.04em !important; color:var(--orange) !important;
  display:block !important;
}
.chain-step.is-result b{ font-weight:400 !important; }

/* Arithmetic layout: controls left, the chain and its explanation right,
   both aligned to the same top edge. */
.calc{ align-items:start; }
.calc-out{ border-top:1px solid var(--ink); padding-top:clamp(22px,2.4vw,30px); }
.chain{ margin-top:0; }
.calc-controls{ padding-top:clamp(22px,2.4vw,30px); border-top:1px solid var(--hair); }
.ctrl-val{ margin-bottom:6px; }

/* Hub caption was sitting on the lower junction dots */
.hub-core b{ margin-top:22px; }

/* ==========================================================================
   FINISHING PASS
   ========================================================================== */

/* 1. Guarantee band: heavier ring to match the deck's weight, icon given room */
.guar .icn{ --s:52px; border-width:2px; border-color:var(--ink); }
.guar .icn svg{ width:56%; height:56%; }
.guar > div .gl-top{ margin-bottom:24px; }

/* 2. Supporting sectors: bold names, heavier ring, icon a touch larger */
.sub .icn{ --s:60px; border-width:2px; }
.sub .icn img{ width:58%; height:58%; }
.sub span{ font-weight:600; color:var(--ink); font-size:.9rem; letter-spacing:-.006em; }
/* the three core sector rings carry the same new weight */
.arc-node .icn{ border-width:2px; }

/* 3. Footer headings: real hierarchy */
.foot-lab{
  font-size:.8rem; font-weight:700; letter-spacing:.14em;
  color:var(--ink); margin:0 0 20px;
}

/* ==========================================================================
   SCREENSHOT CORRECTION PASS
   ========================================================================== */

/* S1 — no visible colour seam between sections. The page is carried by
   hairlines, so the alternating tint is no longer doing any work. */
:root{ --tint:#FFFFFF; }
.band-tint{ background:var(--paper); }
.band + .band-tint,.band-tint + .band{ padding-top:clamp(64px,7vw,116px); }

/* S2 — guarantee band: logo-orange icons, heavier ring, artwork kept sharp */
.guar .icn{ --s:54px; border-width:2.5px; border-color:var(--ink); }
.guar .icn svg{ width:56%; height:56%; margin:auto; }

/* S3 — deliverables: icons centred, logo orange, heavier ring */
.rc .icn{ --s:58px; border-width:2.5px; border-color:var(--ink); color:var(--orange); }
.rc .icn svg{ width:54%; height:54%; margin:auto; display:block; }

/* S4 — open seat: logo-orange icons inside thick black rings, centred */
.rnode .icn{ border-width:2.5px; border-color:var(--ink) !important; color:var(--orange); }
.rnode .icn svg{ width:52%; height:52%; margin:auto; }
.radial.on .rnode.impact .icn{ border-color:var(--ink) !important; color:var(--orange); }
.rs-side .icn{ border-width:2.5px; border-color:var(--ink) !important; color:var(--orange); }
.rs-side.r .icn{ border-color:var(--ink) !important; color:var(--orange); }

/* S5 — services: circle treatment reversed. The outer service rings take the
   logo orange; the centre ring takes the black. */
.hnode .icn{ border-width:2.5px; border-color:var(--orange) !important; }
.hnode:hover .icn{ border-color:var(--orange) !important; }
.hub-core .icn{ border-width:2.5px; border-color:var(--ink) !important; }
.hs .icn{ border-width:2.5px; border-color:var(--orange) !important; }

/* All remaining diagram rings pick up the same slightly heavier weight */
.arc-node .icn,.sub .icn,.gl-top .icn,.ns-origin .icn,.step-mark{ border-width:2.5px; }

/* Section labels: slightly larger and easier to read, not oversized */
.lab{
  font-size:.8rem; font-weight:600; letter-spacing:.15em;
  color:var(--ink-70); gap:12px;
}
.lab .paw{ width:15px; height:15px; }
.foot-lab{ font-size:.82rem; }


/* ==========================================================================
   FINAL POLISH PASS — screenshot corrections
   ========================================================================== */

/* SS1 — the hero figure row is read as one centred band. */
.figs > div{
  text-align:center; align-items:center;
  padding-left:clamp(14px,1.6vw,26px); padding-right:clamp(14px,1.6vw,26px);
}
.figs > div > span{ max-width:22em; margin-left:auto; margin-right:auto; }
.figs b{ text-align:center; }

/* SS2 — every market figure centred inside its own column. */
.wall > div{
  text-align:center; align-items:center;
  padding-left:clamp(14px,1.6vw,24px); padding-right:clamp(14px,1.6vw,24px);
}
.wall > div > span{ max-width:20em; margin-left:auto; margin-right:auto; }
.wall b{ text-align:center; }

/* SS3 — the guarantee rings were losing their flex centring to a broader
   `.guar span` rule, which left the glyph sitting at the top of the circle.
   Re-assert the ring as a centring box and neutralise any inherited offset. */
.icn{
  display:flex !important; align-items:center !important; justify-content:center !important;
  margin-top:0 !important; max-width:none !important; text-align:center;
}
.icn > svg,.icn > img{ margin:auto !important; }

/* SS5 — the logo carries visibly more presence. The header grows with it so
   the mark keeps its clear space and the menu stays on the same baseline. */
.top-in{ height:100px; }
.logo img{ height:78px; }
html{ scroll-padding-top:116px; }
main > section{ scroll-margin-top:116px; }

/* SS7 — count-up: the animated span must never inherit label styling and
   must never change the figure's box while it runs. */
.figs b .cnt,.wall b .cnt,.guar b .cnt,.gl b .cnt,.pf-n b .cnt{
  font:inherit; color:inherit; letter-spacing:inherit; display:inline;
  margin:0; padding:0; max-width:none; font-variant-numeric:lining-nums tabular-nums;
}

@media (max-width:860px){
  .top-in{ height:84px; }
  .logo img{ height:60px; }
  .menu{ top:84px; }
  html{ scroll-padding-top:100px; }
  main > section{ scroll-margin-top:100px; }
}


/* ==========================================================================
   SIXTH PASS — screenshot corrections
   ========================================================================== */

/* SS1 — "What lands on your desk": icon and text centred in each cell. */
.rc{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding-left:clamp(16px,1.8vw,28px); padding-right:clamp(16px,1.8vw,28px);
}
.rc .icn{ margin-left:auto; margin-right:auto; }
.rc h4,.rc p{ width:100%; }
.rc p{ max-width:22em; margin-left:auto; margin-right:auto; }

/* SS3 — the glance row is centred on its icons. The leader line only reads
   as a leader when the column is left-aligned, so it steps aside here. */
.gl{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding-left:clamp(14px,1.6vw,26px); padding-right:clamp(14px,1.6vw,26px);
}
.gl-top{ justify-content:center; width:100%; margin-bottom:20px; }
.gl-top i{ display:none; }
.gl b,.gl > span{ width:100%; }
.gl > span{ max-width:20em; margin-left:auto; margin-right:auto; }

/* SS2 — the centre junction dot sits on the apex of the arc, on the same
   line convention as the two end dots. The dots belong to the drawn arc, so
   they leave with it when the sectors stack. */
@media (max-width:900px){
  .arc-node::before{ display:none !important; }
}


/* The two arcs are drawn at different heights, so the junction dots derive
   their offset from the arc they belong to instead of a fixed number. */
.arc{ --dot-end:-12px; --dot-apex:-54px; }
.arc.arc-flat{ --dot-end:-26px; --dot-apex:-70px; }
.arc-node::before{ top:var(--dot-end); }
.arc-node:nth-child(2)::before{ top:var(--dot-apex); }


/* ==========================================================================
   FINAL REFINEMENT PASS
   ========================================================================== */

/* 2 — arc junction dots centred exactly on the drawn path. The svg is a fixed
   104px band, so the path's own y values are the offsets: endpoints at y=92,
   apex at y=50 from the svg top, with the node box starting at the svg's
   bottom edge (104). Half the dot is subtracted so the dot's CENTRE, not its
   top edge, lands on the line. */
.arc{ --dot-end:-16px; --dot-apex:-58px; }
.arc-node::before{ top:var(--dot-end); }
.arc-node:nth-child(2)::before{ top:var(--dot-apex); }

/* 3 — every service row on one grid. The description column was `auto`, so a
   longer line stole width from the title column and pushed row 01 out of step
   with the rest. Fixed fractions keep number, icon, title and text aligned. */
.ix{ grid-template-columns:66px 96px minmax(0,1fr) minmax(0,1.3fr); align-items:center; }
.ix > .icn{ justify-self:start; }

/* 4 — vertical rhythm. Sections were spending ~202px of empty band between
   one block of content and the next; this brings that to ~144px. */
.band{ padding:clamp(52px,5vw,74px) 0; }
.band-sm{ padding:clamp(44px,4.4vw,64px) 0; }
.band + .band-tint,.band-tint + .band{ padding-top:clamp(48px,4.6vw,68px); }
.hero{ padding-top:clamp(34px,3.4vw,50px); }
.foot{ padding:clamp(44px,4.8vw,70px) 0 32px; }

/* 5 — display type, one step down so a headline no longer fills the viewport
   on its own. Same faces, same weights. */
.d1{ font-size:clamp(2.25rem,4.7vw,4.05rem); }
.d2{ font-size:clamp(1.65rem,3.15vw,2.65rem); }
.d3{ font-size:clamp(1.18rem,1.75vw,1.5rem); }

/* 6 — the form. Labels, values and placeholders carried too little weight to
   read, and the rows sat too far apart. */
.fld{ margin-bottom:clamp(15px,1.5vw,21px); }
.fld label{ color:var(--ink); font-weight:600; font-size:.7rem; margin-bottom:7px; }
.fld label em{ color:var(--ink-70); font-weight:500; }
.fld input,.fld select,.fld textarea{
  color:var(--ink); font-weight:500; border-bottom-color:var(--ink-45); padding:10px 0;
}
.fld input::placeholder,.fld textarea::placeholder{ color:var(--ink-70); opacity:1; font-weight:400; }
.fld select,.fld select option{ color:var(--ink); }
.fld input[type=file]{ color:var(--ink-70); padding:12px 0; }
.fnote{ color:var(--ink-70); margin-bottom:clamp(20px,2.2vw,30px); }
.ctrl label{ color:var(--ink-70); font-weight:600; }
.fld textarea{ min-height:108px; }

/* The handshake is a wide mark, so it needs more of the ring to read at size. */
.hub-core .icn svg{ width:74%; height:74%; }

/* The service grid above is the desktop one; the stacked mobile layout has to
   be restated here, and every cell placed, because the desktop rule now sits
   later in the sheet than the original media query. */
@media (max-width:900px){
  .ix{ grid-template-columns:48px minmax(0,1fr); gap:0 18px; align-items:start; }
  .ix > .ix-n{ grid-column:1; grid-row:1; }
  .ix > .icn{ grid-column:2; grid-row:1; justify-self:start; }
  .ix > h3{ grid-column:2; grid-row:2; margin-top:14px; }
  .ix > p{ grid-column:2; grid-row:3; margin-top:7px; }
  .ix > .ix-go{ grid-column:2; grid-row:4; margin-top:12px; }
}

/* ==========================================================================
   TYPE HIERARCHY — a deliberate scale, not one size for everything.
   At 1440px:  hero 54  >  section headline 35  >  subheading 21
               >  hero lead 19  >  sub-subhead 17  >  body 16.5  >  label 12.8
   Each step is a clear drop, so a heading always reads as the rank it is.
   ========================================================================== */

/* HERO DISPLAY — the largest type on any page, and only on the page's own h1. */
.d1,
.phead h1{ font-size:clamp(2.1rem,3.75vw,3.4rem); line-height:1.07; letter-spacing:-.032em; font-weight:600; }
.phead h1{ margin:0 0 clamp(18px,2vw,28px); }
.hero h1{ margin:0 0 clamp(20px,2.1vw,30px); }

/* SECTION HEADLINE — clearly below the hero, clearly above everything else. */
.d2{ font-size:clamp(1.5rem,2.45vw,2.2rem); line-height:1.14; letter-spacing:-.026em; }

/* SUBHEADING and the rank under it. */
.d3{ font-size:clamp(1.12rem,1.5vw,1.3rem); line-height:1.25; letter-spacing:-.018em; }
.d4{ font-size:clamp(.98rem,1.15vw,1.08rem); line-height:1.32; letter-spacing:-.012em; }

/* SUPPORTING COPY — the hero lead sits just above body copy, never near the headline. */
.say-lg{ font-size:clamp(1.02rem,1.3vw,1.18rem); line-height:1.62; }
.say{ font-size:clamp(.95rem,1.08vw,1.03rem); line-height:1.68; }
.hero .say-lg{ margin-bottom:clamp(22px,2.4vw,34px); }

/* ==========================================================================
   VERTICAL RHYTHM — tighter, not compressed. Related content sits together;
   sections still breathe.
   ========================================================================== */
.band{ padding:clamp(44px,3.9vw,58px) 0; }
.band-sm{ padding:clamp(38px,3.5vw,50px) 0; }
.band + .band-tint,.band-tint + .band{ padding-top:clamp(40px,3.6vw,52px); }
.hero{ padding:clamp(24px,2.2vw,34px) 0 0; }
.phead{ padding:clamp(34px,3.2vw,52px) 0 clamp(26px,2.6vw,40px); }
.note{ margin-top:18px; }
.foot{ padding:clamp(38px,4vw,58px) 0 28px; }

/* ==========================================================================
   SERVICES HUB CORE — the handshake is the mark the section turns on, so it
   is drawn larger and in solid ink, with its label bound close to it rather
   than floating away.
   ========================================================================== */
.hub-core .icn{ --s:calc(var(--dia) * .205); border-width:2.5px; border-color:var(--ink); }
.hub-core .icn svg{ width:76%; height:76%; color:var(--ink); }
.hub-core b{ margin-top:9px; }

/* ==========================================================================
   SHARE-A-REQUIREMENT: COLUMN BALANCE
   The left column (the form itself) was carrying too little weight against a
   right column set at near-headline size. The form gains presence; the
   "what happens next" list steps down to the subheading rank it belongs to.
   ========================================================================== */
.fld label{ font-size:.76rem; letter-spacing:.16em; }
.fld input,.fld select,.fld textarea{ font-size:1.1rem; padding:12px 0; }
.fld input::placeholder,.fld textarea::placeholder{ font-size:1.02rem; }
.f2,.f3{ gap:0 clamp(20px,2.4vw,38px); }

/* right column: subheading rank, not headline rank */
.led-i{ font-size:clamp(1.05rem,1.4vw,1.25rem); letter-spacing:-.016em; line-height:1.3; font-weight:600; }
.led-i em{ font-size:.82em; margin-top:5px; color:var(--ink-70); font-weight:400; }

/* The three-up figure row sits in a narrow side column here, so it takes a
   smaller step of the number scale and stops breaking mid-figure. */
.figs-3 b{ font-size:clamp(1.5rem,2.1vw,1.95rem); white-space:nowrap; }
.figs-3 > div{ padding-left:clamp(8px,1vw,16px); padding-right:clamp(8px,1vw,16px); }
.figs-3 > div > span{ font-size:.82rem; }

/* The market grid now holds seven figures, so the final cell must not leave a
   border hanging in empty space. */
.wall > div:last-child{ border-right:0; }

/* ==========================================================================
   PROOF LABELS — the sector on each case study is evidence of range, so it
   carries more weight. Still a label: well below the case-study title.
   ========================================================================== */
.pf-sec{ font-size:.9rem; font-weight:600; letter-spacing:.16em; color:var(--ink); gap:10px; margin-bottom:13px; }
.pf-sec .paw{ width:15px; height:15px; }

@media (max-width:860px){
  .pf-sec{ font-size:.84rem; letter-spacing:.13em; }
  .pf-sec .paw{ width:14px; height:14px; }
}

/* The footer logo carries slightly more presence. Same file, same proportions. */
.foot-logo img{ height:74px; }
@media (max-width:860px){ .foot-logo img{ height:66px; } }

/* ==========================================================================
   PROOF: SECTOR CHIP + CASE TITLE
   The sector reads as a compact orange chip carrying a white paw and white
   type — it is the proof of range, so it leads. The case title steps down to
   sit under it rather than compete with it.
   ========================================================================== */
.pf-sec{
  display:inline-flex; align-items:center; width:fit-content; align-self:flex-start;
  background:var(--orange); color:#FFFFFF;
  font-size:.92rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:7px 14px 6px; border-radius:3px; gap:8px; margin:0 0 15px; line-height:1.15;
}
.pf-sec .paw{ width:15px; height:15px; color:#FFFFFF; flex:0 0 auto; }

/* case titles: balanced against the chip above them */
.pf h3,.pf-title{ font-size:clamp(1.18rem,1.7vw,1.5rem); line-height:1.2; letter-spacing:-.018em; }
.pf-title{ margin-bottom:clamp(13px,1.4vw,19px); }

@media (max-width:860px){
  .pf-sec{ font-size:.85rem; letter-spacing:.08em; padding:6px 12px 5px; }
  .pf-sec .paw{ width:14px; height:14px; }
}