/* /next/: eight sections and a close below the /logos/ hero. Hanken Grotesk below the hero; seven colours and nothing
   hand mixed: black #090B0C, green #24BC5B, light green #5EC269, dark green #3C7E44, white, stone #F4F4F2, lines #E3E6E4.
   Every rule sits under "#main .n-sec", a second defence now that the borrowed sheets no longer load (the shell is /next/shell.css). */
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url(../_design/home-v3/fonts-one/hanken-grotesk-latin.woff2) format("woff2")}
main#main{background:#FFFFFF}
#main .n-sec{
  --ink:#090B0C;--green:#24BC5B;--light:#5EC269;--dark:#3C7E44;--stone:#F4F4F2;--line:#E3E6E4;
  --body:rgba(9,11,12,.78);--mute:rgba(9,11,12,.62);--line-dark:rgba(255,255,255,.14);
  --pad:clamp(96px,10vw,160px);--x:clamp(16px,6vw,110px);--gap:clamp(32px,5vw,96px);--hdr:64px;
  font-family:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;color:var(--ink);scroll-margin-top:var(--hdr);
  position:relative;padding:var(--pad) 0;
  @media (min-width:900px){--hdr:104px}
  @media (max-width:760px){--pad:64px;--gap:28px}   /* the phone rhythm, 23 October 2026 */
  & *{box-sizing:border-box}
  & h2,& h3,& p,& ul,& ol,& figure{margin:0;padding:0}
  & ul,& ol{list-style:none}
  & a{color:inherit}
  .n-wrap{width:min(1440px,calc(100% - 2*var(--x)));margin:0 auto}
  .n-dot{color:var(--green)}
  .n-q{font-weight:500}

  /* the scale */
  .n-eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 24px;font-family:inherit;font-weight:600;font-size:.74rem;line-height:1;letter-spacing:.2em;text-transform:uppercase;color:var(--dark)}
  .n-eyebrow i{display:block;width:34px;height:1px;background:currentColor}
  .n-eyebrow--light{color:var(--light)}
  .n-eyebrow--centre{justify-content:center}
  .n-eyebrow--sub{margin:40px 0 16px}
  .n-eyebrow--xs{font-size:.66rem;margin:0}
  .n-eyebrow--num{color:var(--green);margin:0}
  .n-display{margin:0 0 28px;font-family:inherit;font-weight:100;font-size:clamp(2.2rem,4vw,4.2rem);line-height:1.06;letter-spacing:-.02em;color:var(--dark);text-transform:none;text-wrap:balance}
  .n-display b{font-weight:400}
  .n-display--light{color:#FFFFFF}
  .n-display--light b{color:var(--green)}
  .n-display--centre{text-align:center}
  .n-lead{max-width:36em;font-family:inherit;font-weight:300;font-size:clamp(1.1rem,1.4vw,1.3rem);line-height:1.45;color:var(--ink)}
  .n-lead--centre{margin:0 auto;text-align:center}
  @media (max-width:760px){.n-eyebrow--centre{justify-content:flex-start}.n-display--centre{text-align:left}.n-lead--centre{text-align:left;margin:20px 0 0}}
  .n-sub{font-family:inherit;font-weight:500;font-size:clamp(1.2rem,1.6vw,1.5rem);line-height:1.2;color:var(--ink);text-transform:none;letter-spacing:0}
  .n-sub--sm{font-size:1.1rem}
  .n-outcome{font-weight:300;font-size:1.1rem;line-height:1.35}
  .n-body{max-width:40em;font-weight:400;font-size:1rem;line-height:1.6;color:var(--body)}
  .n-small{font-weight:400;font-size:.82rem;line-height:1.45;color:var(--mute)}
  .n-fig,.n-figs b{font-weight:500;font-size:clamp(2.6rem,5vw,5.2rem);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums lining-nums;color:var(--ink)}
  .n-ledger b,.n-ledger__fig b,b.n-ledger__fig{font-weight:500;font-size:clamp(1.9rem,2.8vw,3rem);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums lining-nums;color:var(--dark)}
  .n-pill{display:inline-flex;align-items:center;min-height:34px;padding:8px 16px;line-height:1.25;border:1px solid var(--line);border-radius:999px;font-family:inherit;font-weight:500;font-size:.85rem;line-height:1;color:var(--ink)}
  .n-tag{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border:1px solid var(--ink);border-radius:999px;background:#FFFFFF;font-size:.82rem;line-height:1;color:var(--mute);vertical-align:middle;white-space:nowrap}
  .n-tag b{font-weight:600;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
  .n-btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 30px;border-radius:999px;background:var(--green);color:var(--ink);font-family:inherit;font-weight:600;font-size:.95rem;line-height:1;text-decoration:none;white-space:nowrap;transition:transform .22s ease,background .22s ease}
  .n-btn:hover{background:var(--light);transform:translateY(-1px)}
  .n-body a,.n-small a{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--line);text-underline-offset:3px}
  .n-body a:hover,.n-body a:focus{text-decoration-color:var(--green);text-decoration-thickness:2px}
  .n-rows{display:grid}
  .n-rows li{padding:20px 0;border-top:1px solid var(--line);font-size:1rem;line-height:1.6;color:var(--body)}
  .n-rows li:last-child{border-bottom:1px solid var(--line)}
  .n-rows li b{font-weight:500;color:var(--ink)}
  .n-rows--fig li{display:flex;align-items:baseline;gap:14px}
  .n-rows--fig li b{font-size:1.5rem;font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.02em;min-width:5.2ch}
  .n-covers li{display:flex;align-items:baseline;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
  .n-covers li::before{content:"";flex:none;width:12px;height:1px;background:currentColor;opacity:.6;transform:translateY(-.3em)}
  .n-covers li:last-child{border-bottom:1px solid var(--line)}
  .n-photo{margin:0;display:grid;gap:10px}
  .n-photo img{display:block;width:100%;height:auto;border-radius:64px 22px 22px 22px;object-fit:cover}

  /* two columns either side of a hairline, under 05 and under 07 */
  .n-cols{display:grid;grid-template-columns:1fr 1px 1fr;gap:var(--gap);margin-top:clamp(48px,5vw,72px);padding-top:clamp(40px,4vw,64px);border-top:1px solid var(--line)}
  .n-cols::before{content:"";grid-column:2;grid-row:1;width:1px;background:var(--line)}
  .n-cols__col:nth-child(2){grid-column:3}
  .n-cols .n-sub{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px}

  /* reveal: the page's own script adds .in as each element scrolls into view */
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
  .reveal.in{opacity:1;transform:none}
}

/* 01 proof: the crescent ring under the hero holds the title in its white disc; the REST case below on white */
#main .n-sec.n-proof{padding:0 0 var(--pad);
  .n-ring{--drift:0px;position:relative;container-type:inline-size;overflow:hidden;background:#FFFFFF;padding-bottom:4cqw;min-height:54cqw}
  .n-ring__band{position:absolute;left:50%;top:-92cqw;width:144cqw;height:144cqw;border-radius:50%;transform:translate(-50%,var(--drift));will-change:transform;
    background:linear-gradient(to bottom,#090B0C 72%,#3C7E44 94%,#5EC269 99%,#5EC269 100%)}
  /* the four figures sit on the crescent, centred, white on the dark green, and move with the band; they count up on first view */
  .n-ring__figs{position:absolute;left:50%;top:38.5cqw;z-index:1;display:grid;grid-template-columns:repeat(4,auto);gap:12px clamp(28px,4.5cqw,72px);transform:translate(-50%,var(--drift));will-change:transform;color:#FFFFFF;text-align:center}
  .n-ring__figs li{display:grid;gap:8px;justify-items:center}
  .n-ring__figs b{font-weight:500;font-size:clamp(1.7rem,3.2cqw,3rem);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums lining-nums;min-width:3.2em}
  .n-ring__figs span{font-size:.82rem;line-height:1.3;color:rgba(255,255,255,.72)}
  .n-ring__disc{position:absolute;left:50%;top:-64cqw;width:100cqw;height:100cqw;border-radius:50%;transform:translate(-50%,calc(var(--drift)*1.3));background:#FFFFFF;will-change:transform}
  .n-ring__in{position:relative;width:min(1440px,calc(100% - 2*var(--x)));margin:0 auto;padding:5cqw 12cqw 0 0;display:flex;flex-direction:column;align-items:flex-end;text-align:right}
  .n-ring__in .n-eyebrow{justify-content:flex-end;margin-bottom:20px}
  .n-ring__in .n-display{max-width:12em;font-size:clamp(2rem,3.6cqw,4.2rem)}
  .n-ring__in .n-lead{max-width:34em}
  .n-ring__src{margin-top:20px;max-width:34em}
  .n-case{display:grid;grid-template-columns:7fr 5fr;gap:clamp(40px,5vw,72px) var(--gap);margin-top:clamp(40px,4cqw,64px);padding:clamp(32px,4vw,56px);background:var(--stone);border-radius:24px}
  .n-case__logo{display:block;height:44px;width:auto;margin-bottom:24px;filter:brightness(0)}
  .n-case__sub{margin-top:-12px}
  .n-case__deck{margin-top:24px;padding-bottom:32px;border-bottom:1px solid var(--line)}
  .n-case__copy .n-rows{margin-bottom:32px}
  .n-case__copy .n-body + .n-body{margin-top:16px}
  .n-ledger{display:grid;grid-template-columns:1fr 1fr;gap:32px 24px;padding-bottom:24px;border-bottom:1px solid var(--line)}
  .n-ledger li{display:grid;gap:10px}
  .n-ledger span{font-size:.82rem;line-height:1.45;color:var(--mute)}
  .n-ledger__foot{margin-top:16px}
  .n-photos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .n-ledger__fig{display:flex;align-items:baseline;gap:14px}
  .n-ledger__fig span{font-size:.82rem;color:var(--mute)}
  .n-brands{margin-top:clamp(48px,5vw,72px)}
  .n-brands__row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px 40px;padding:24px 0;border-bottom:1px solid var(--line);font-weight:500;font-size:1.05rem}
  .n-brands__row img{display:block;height:36px;width:auto;filter:brightness(0);opacity:.88}
  @media (max-width:900px){
    /* one column: the copy and side children become the grid's items, with no row gap, each carrying its own margin */
    .n-case{grid-template-columns:1fr;row-gap:0}
    .n-case__side{display:contents}
    .n-case__copy{display:contents}
    .n-case > * > *{order:5}
    .n-case__copy > .n-case__logo{order:0;margin-bottom:16px}.n-case__copy > .n-case__logo + .n-eyebrow{order:1;margin-bottom:0}.n-case__sub{order:2;margin-top:8px}.n-case__deck{order:3;margin-top:24px;border:0;padding-bottom:0}
    .n-photos{order:6;margin-top:32px}.n-case__side .n-eyebrow--sub,.n-rows--fig,.n-case__side > .n-small:last-child{order:7}
    .n-case__copy .n-eyebrow--sub{margin-top:40px}
    }
  @media (max-width:760px){
    /* the band and the disc hang from the ring's foot, so the crescent follows the copy at every width: the band's foot
       sits 48px up (the scroll drift moves it by up to 45px, so the rim is never clipped), the disc's edge 16cqw above
       that at the centre and about 7cqw more at the copy's edge, and the copy ends 64px above that at rest */
    .n-ring{min-height:0;padding-bottom:calc(112px + 23cqw)}
    .n-ring__figs{position:static;transform:none;grid-template-columns:1fr 1fr;gap:20px 16px;width:min(100%,calc(100% - 2*var(--x)));margin:28px auto 0;color:var(--ink);text-align:left}
    .n-ring__figs li{justify-items:start}.n-ring__figs span{color:var(--mute)}
    .n-ring__band{top:auto;bottom:48px;width:320cqw;height:320cqw;background:linear-gradient(to bottom,#090B0C 94%,#3C7E44 97%,#5EC269 99%,#5EC269 100%)}
    .n-ring__disc{top:auto;bottom:calc(48px + 16cqw);width:300cqw;height:300cqw}
    .n-ring__in{padding:7cqw 0 0;align-items:flex-start;text-align:left}
    .n-case{margin-top:32px;padding:24px;border-radius:16px}
    .n-ring__in .n-eyebrow{justify-content:flex-start}
    .n-ring__in .n-display{font-size:clamp(1.9rem,7.6cqw,2.6rem);max-width:none;margin-bottom:16px}
    .n-ring__in .n-lead{font-size:1.05rem;max-width:30em}
    .n-ring__src{margin-top:12px}
    .n-brands__row{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;font-size:.95rem}   /* two even columns on a phone (23 October 2026) */
    .n-brands__row li{display:flex;align-items:center;justify-content:center;height:84px;border-bottom:1px solid var(--line)}
    .n-brands__row li:nth-child(odd){border-right:1px solid var(--line)}
    .n-brands__row li:nth-last-child(-n+2){border-bottom:0}
    .n-brands__row img{height:auto;width:auto;max-height:34px;max-width:72%}
    .n-photos{grid-template-columns:1fr 1fr;gap:12px}}
}

/* 02 one team: the copy and office ledger beside the dot globe, the office photo, the figures and the tagged row */
#main .n-sec.n-team{
  .n-team__grid{display:grid;grid-template-columns:1fr 1.4fr;gap:var(--gap);align-items:center}
  .n-team__copy .n-body{margin-top:20px;font-size:.94rem;line-height:1.55}
  .n-team__copy .n-eyebrow--sub{margin:28px 0 10px}
  .n-offices li{display:flex;align-items:baseline;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:.95rem;line-height:1.5}
  .n-offices li:last-child{border-bottom:1px solid var(--line)}
  .n-offices b{font-weight:500;color:var(--ink)}
  .n-offices span{color:var(--mute)}
  .n-offices .n-tag{margin-left:auto}
  .n-offices em{margin-left:auto;font-family:inherit;font-weight:600;font-size:.66rem;line-height:1;font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--dark)}
  .n-team__globe{position:relative;overflow:hidden;min-width:0}
  .n-globe__stage{aspect-ratio:1;width:100%}
  .n-globe__stage canvas{display:block;width:100%;height:100%}
  .n-globe__cap{margin-top:8px}
  .n-photo--office{margin-top:clamp(48px,5vw,72px)}
  .n-photo--office img{aspect-ratio:21/9;object-position:50% 50%}
  .n-eyebrow--gap{margin-top:clamp(48px,5vw,72px)}
  .n-figs{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 24px}
  .n-figs li{display:grid;gap:16px;justify-items:start}
  .n-ph{display:flex;align-items:center;gap:24px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
  .n-ph__fig{display:flex;align-items:baseline;gap:14px}
  .n-ph__fig b{font-weight:500;font-size:clamp(1.9rem,2.8vw,3rem);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums lining-nums;color:var(--mute)}
  .n-ph__fig span{font-size:1rem;color:var(--body)}
  @media (max-width:900px){
    .n-team__grid{grid-template-columns:1fr}
    .n-team__globe{overflow:visible}
    .n-globe__stage{width:min(100%,320px);margin:24px auto 0;transform:none}
    .n-globe__cap{margin-top:8px;text-align:center}
    .n-figs{grid-template-columns:1fr 1fr}
    .n-ph{flex-direction:column;align-items:flex-start;gap:12px}}
}



/* 03 channels: the statement beside a rule, then the buyer's path as five columns and the engine row */
#main .n-sec.n-ch{padding-bottom:calc(var(--pad)/2);
  .n-ch__head{display:grid;grid-template-columns:1.3fr 1px 1fr;gap:var(--gap);align-items:start}
  .n-ch__rule{display:block;width:1px;height:100%;min-height:200px;background:var(--dark);transform-origin:50% 0}
  .n-ch__rule.reveal{opacity:1;transform:scaleY(0);transition:transform 1.1s cubic-bezier(.4,0,.2,1) .2s}
  .n-ch__rule.reveal.in{transform:scaleY(1)}
  .n-ch__answer .n-lead{max-width:none}
  & > .n-wrap > .n-eyebrow--sub{margin-top:clamp(48px,5vw,72px)}
  .n-path{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line)}
  .n-path__col{padding:28px 24px 28px 0;border-left:1px solid var(--line);padding-left:24px;display:grid;align-content:start;gap:12px}
  .n-path__col:first-child{border-left:0;padding-left:0}
  .n-path__place{color:var(--ink)}
  .n-engines{display:grid;grid-template-columns:auto 1fr;gap:12px 32px;align-items:center;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .n-engines__row{display:flex;flex-wrap:wrap;gap:10px 14px;color:var(--ink)}
  .n-engines__row li{display:flex;align-items:center;gap:8px}
  .n-engines__row img{display:block;width:22px;height:22px}
  @media (max-width:1100px){.n-path{grid-template-columns:repeat(3,1fr)}.n-path__col:nth-child(4){border-left:0;padding-left:0}.n-path__col:nth-child(n+4){border-top:1px solid var(--line)}}
  @media (max-width:760px){
    .n-ch__head{grid-template-columns:1fr;gap:28px}
    .n-ch__rule{width:100%;height:1px;min-height:0;transform-origin:0 50%}
    .n-ch__rule.reveal{transform:scaleX(0)}.n-ch__rule.reveal.in{transform:scaleX(1)}
    .n-path{grid-template-columns:1fr}
    .n-path__col,.n-path__col:nth-child(4){border-left:0;padding:24px 0;border-top:1px solid var(--line)}
    .n-path__col:first-child{border-top:0}
    .n-engines{grid-template-columns:1fr;gap:12px}}
}

/* 04 services: the deep green field, eight rows and two proof cards in one column */
#main .n-sec.n-svc{
  .n-svc__head{max-width:640px;margin-bottom:clamp(40px,4vw,64px)}
  /* the index: eight ruled rows, the number, the name and what it produces, a plus at the right; the row opens in place */
  .n-index{display:grid;border-top:1px solid var(--line)}
  .n-row{border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--hdr) + 16px)}
  .n-det summary{display:grid;grid-template-columns:3.5rem 1fr 24px;gap:12px 24px;align-items:start;padding:26px 0;cursor:pointer;list-style:none}
  .n-det summary::-webkit-details-marker{display:none}
  .n-row__num{margin:7px 0 0;color:var(--dark);transition:color .3s}
  .n-row__title{display:grid;gap:6px}
  .n-row__title .n-sub{transition:color .3s}
  .n-row__outcome{color:var(--body);max-width:40em}
  .n-det summary:hover .n-sub,.n-det[open] summary .n-sub{color:var(--dark)}
  .n-det[open] .n-row__num{color:var(--green)}
  .n-det summary i{position:relative;flex:none;width:18px;height:18px;margin-top:8px;color:var(--mute);transition:color .3s}
  .n-det summary i::before,.n-det summary i::after{content:"";position:absolute;left:0;top:8px;width:18px;height:2px;background:currentColor;border-radius:2px;transition:transform .3s ease}
  .n-det summary i::after{transform:rotate(90deg)}
  .n-det summary:hover i{color:var(--ink)}
  .n-det[open] summary i{color:var(--green)}
  .n-det[open] summary i::after{transform:rotate(0)}
  .n-det__body{overflow:hidden}
  .n-det__in{display:grid;gap:16px;padding:0 0 30px calc(3.5rem + 24px);max-width:calc(42em + 3.5rem + 24px)}
  .n-det__in .n-eyebrow--xs{margin-top:8px}
  .n-index .n-covers{display:grid;color:var(--body)}
  .n-index .n-covers li{padding:9px 0;border-top:1px solid var(--line)}
  .n-row__tools{color:var(--mute)}
  .n-row__tools b{font-weight:500;color:var(--ink)}
  /* the two records, on the stone panel of the case study */
  .n-svc__proof{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;gap:24px;margin-top:clamp(40px,4vw,64px)}
  .n-panel--rest{grid-column:1;grid-row:1}
  .n-panel--solar{grid-column:1;grid-row:2}
  .n-panel--ai{grid-column:2;grid-row:1/3}
  .n-panel__figs{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px;margin:4px 0}
  .n-panel__figs .n-ledger__fig{display:grid;gap:6px;justify-items:start}   /* the number over its label; the sheet's flex rule loses to the borrowed sheet on a p here */
  .n-panel__figs .n-ledger__fig b,.n-panel__figs .n-ledger__fig span{display:block}
  .n-panel .n-link{color:var(--dark);text-decoration:underline;text-underline-offset:3px}
  .n-panel{display:grid;gap:16px;align-content:start;padding:clamp(28px,3vw,44px);background:var(--stone);border-radius:24px;scroll-margin-top:calc(var(--hdr) + 16px)}
  .n-panel .n-sub{color:var(--dark)}
  .n-panel .n-body{max-width:none}
  .n-chart__title{margin:16px 0 0}
  .n-chart{display:block;width:100%;height:auto;max-width:720px;font-family:inherit}
  .n-chart__val{font-size:12px;font-weight:500;fill:var(--ink);font-variant-numeric:tabular-nums}
  .n-chart__ax{font-size:11px;fill:var(--mute)}
  .n-chart__bar{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
  .n-chart.in .n-chart__bar{transform:none}
  .n-svc__cta{margin-top:clamp(40px,4vw,64px);padding-top:clamp(32px,3vw,48px);border-top:1px solid var(--line);text-align:center}
  @media (max-width:900px){.n-svc__proof{grid-template-columns:1fr;grid-template-rows:none}.n-panel--rest,.n-panel--solar,.n-panel--ai{grid-column:auto;grid-row:auto}}
  @media (max-width:760px){
    .n-det summary{grid-template-columns:2.5rem 1fr 20px;gap:10px 14px;padding:20px 0}
    .n-det__in{padding-left:0}
    .n-chart__val{font-size:28px}.n-chart__ax{font-size:26px}}
  @media (prefers-reduced-motion:reduce){.n-chart__bar{transform:none;transition:none}}
}

/* 05 how we work: four steps down a centre line that draws itself, the o1 outline behind, two columns beneath */
#main .n-sec.n-how{isolation:isolate;overflow:clip;padding-top:calc(var(--pad)/2);--drift:0px;--p:0;
  /* the o1 mark behind the steps (inside .n-steps, so it starts under the lead): the 1 on the centre line, the ring to the left;
     it drifts a little slower than the page and its ring draws as the steps pass the focus line (--p, set by the script) */
  .n-how__mark{position:absolute;left:calc(50% - .8*min(64vw,920px));top:-2%;width:min(64vw,920px);aspect-ratio:1;z-index:-1;pointer-events:none;transform:translateY(calc(var(--drift)*.7));will-change:transform}
  .n-how__mark svg{display:block;width:100%;height:100%;overflow:visible}
  .n-how__ring{fill:none;stroke:rgba(94,194,105,.18);stroke-width:15;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p));transition:stroke-dashoffset .2s linear}
  .n-how__ring--track{stroke:rgba(94,194,105,.06);stroke-dashoffset:0}
  .n-how__one{fill:rgba(94,194,105,.18)}
  /* one line down the centre: a hairline track, a green fill that grows with the scroll, and a dot at its head */
  .n-steps{margin:clamp(48px,5vw,72px) auto 0;max-width:1080px;position:relative;--p:0}
  .n-steps__track{position:absolute;left:50%;top:21px;bottom:clamp(24px,2.6vw,40px);width:1px;margin-left:-.5px;background:var(--line)}
  .n-steps__fill{position:absolute;left:0;top:0;width:100%;height:calc(var(--p)*100%);background:var(--green);transition:height .15s linear}
  .n-steps__head{position:absolute;left:50%;top:calc(var(--p)*100%);width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(36,188,91,.16);transition:top .15s linear}
  /* each step slides in from its side; the step on the line is the active one */
  .n-step{position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(60px,8vw,120px);padding-bottom:clamp(24px,2.6vw,40px)}
  .n-step--right.reveal{transform:translate(28px,0)}
  .n-step--left.reveal{transform:translate(-28px,0)}
  .n-step.reveal.in{transform:none}
  .n-step__pill{position:relative;z-index:1;grid-column:1/-1;justify-self:center;display:inline-flex;align-items:center;height:42px;padding:0 30px;border-radius:999px;background:var(--ink);color:#FFFFFF;font-family:inherit;font-weight:500;font-size:.85rem;line-height:1;transition:background .35s,color .35s,transform .35s,box-shadow .35s}
  .n-step.is-active .n-step__pill{background:var(--green);color:var(--ink);transform:scale(1.06);box-shadow:0 0 0 6px rgba(36,188,91,.14)}
  .n-step__body h3{transition:color .35s}
  .n-step.is-active h3,.n-step__body:hover h3{color:var(--dark)}
  .n-step__body{padding-top:clamp(24px,2.6vw,40px)}
  .n-step--right .n-step__body{grid-column:2}
  .n-step--left .n-step__body{grid-column:1;text-align:right}
  .n-step__body h3{font-family:inherit;font-weight:400;font-size:clamp(1.5rem,2.3vw,2.4rem);line-height:1.12;letter-spacing:-.02em;color:var(--ink);text-transform:none}
  .n-step__body .n-body{margin-top:16px;max-width:400px}
  .n-step--left .n-step__body .n-body{margin-left:auto}
  .n-step__get{display:grid;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line);max-width:400px}
  .n-step--left .n-step__get{margin-left:auto;justify-items:end}
  .n-step--left .n-step__get .n-eyebrow{flex-direction:row-reverse}
  @media (max-width:760px){
    .n-step{grid-template-columns:1fr;column-gap:0;padding-left:28px}
    .n-steps__track{left:8px;top:18px}.n-steps__head{left:8px}
    .n-step--right.reveal,.n-step--left.reveal{transform:translate(0,22px)}
    .n-step__pill{justify-self:start;margin-left:-28px;height:36px;padding:0 20px;font-size:.8rem}
    .n-step--right .n-step__body,.n-step--left .n-step__body{grid-column:1;text-align:left;padding-top:16px}
    .n-step--left .n-step__body .n-body,.n-step--left .n-step__get{margin-left:0;justify-items:start}
    .n-step--left .n-step__get .n-eyebrow{flex-direction:row}
    .n-how__mark{display:none}
    .n-cols{grid-template-columns:1fr;gap:32px}.n-cols::before{display:none}.n-cols__col:nth-child(2){grid-column:1;padding-top:32px;border-top:1px solid var(--line)}}
}

/* 06 your market: the four questions as a hairline cross */
#main .n-sec.n-mkt{
  .n-mkt__head{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--gap);align-items:end;margin-bottom:clamp(48px,5vw,72px)}
  .n-mkt__head .n-display{margin-bottom:0}
  .n-cells{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .n-cell{padding:clamp(28px,3vw,44px) clamp(24px,3vw,48px) clamp(28px,3vw,44px) 0;display:grid;gap:16px;align-content:start}
  .n-cell:nth-child(even){border-left:1px solid var(--line);padding-left:clamp(24px,3vw,48px);padding-right:0}
  .n-cell:nth-child(n+3){border-top:1px solid var(--line)}
  .n-cell .n-eyebrow{margin:0}
  .n-cell .n-sub{color:var(--dark)}
  .n-cell__ph{display:grid;gap:10px;justify-items:start;margin-top:8px}
  @media (max-width:760px){
    .n-mkt__head{grid-template-columns:1fr;gap:24px}
    .n-cells{grid-template-columns:1fr}
    .n-cell,.n-cell:nth-child(even){border-left:0;padding-left:0;padding-right:0}
    .n-cell:nth-child(n+2){border-top:1px solid var(--line)}}
}

/* 07 ways to start: the inset dark panel with a straight foot */
#main .n-sec.n-start{padding:0 var(--x);
  .n-start__panel{position:relative;isolation:isolate;overflow:hidden;border-radius:32px;background:#090B0C;color:#FFFFFF;padding:clamp(48px,5vw,96px) clamp(24px,4vw,80px)}
  .n-start__panel::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 50% 40% at 0% 0%,rgba(60,126,68,.35),transparent 70%)}
  .n-start__head{max-width:640px}
  .n-start__head .n-lead{color:rgba(255,255,255,.82)}
  .n-start__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(48px,5vw,72px)}
  .n-start__card{display:grid;gap:14px;align-content:start;border-radius:22px;background:var(--stone);color:var(--ink);padding:clamp(24px,2.6vw,36px);transition:transform .3s ease,box-shadow .3s ease}
  .n-start__card:hover{transform:translateY(-4px);box-shadow:0 24px 48px rgba(9,11,12,.18)}
  .n-start__card .n-eyebrow--sub{margin:0}
  .n-start__card .n-covers{margin-top:8px;color:var(--mute)}
  .n-cols--dark{border-top:1px solid var(--line-dark)}
  .n-cols--dark::before{background:var(--line-dark)}
  .n-cols--dark .n-sub{color:#FFFFFF}
  .n-cols--dark .n-rows li{border-color:var(--line-dark);color:rgba(255,255,255,.82)}
  .n-cols--dark .n-rows li b{color:#FFFFFF}
  .n-start__cta{margin-top:clamp(40px,4vw,64px)}
  @media (max-width:900px){.n-start__cards{grid-template-columns:1fr}}
  @media (max-width:760px){
    & {padding:0 16px}
    .n-cols--dark{grid-template-columns:1fr;gap:32px}.n-cols--dark::before{display:none}.n-cols--dark .n-cols__col:nth-child(2){grid-column:1;padding-top:32px;border-top:1px solid var(--line-dark)}
    .n-start__cta .n-btn{width:100%}}
}

/* 08 questions: the heading beside three details rows */
#main .n-sec.n-faqs{
  .n-faqs__grid{display:grid;grid-template-columns:1fr 1.4fr;gap:var(--gap);align-items:start}
  .n-faqs__head{position:sticky;top:calc(var(--hdr) + 16px)}
  .n-faqs__list{border-top:1px solid var(--line)}
  .n-faq{border-bottom:1px solid var(--line)}
  .n-faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:44px;padding:24px 0;cursor:pointer;list-style:none}
  .n-faq summary::-webkit-details-marker{display:none}
  .n-faq summary i{position:relative;flex:none;width:18px;height:18px;color:var(--dark)}
  .n-faq summary i::before,.n-faq summary i::after{content:"";position:absolute;left:0;top:8px;width:18px;height:2px;background:currentColor;border-radius:2px;transition:transform .3s ease}
  .n-faq summary i::after{transform:rotate(90deg)}
  .n-faq[open] summary i{color:var(--green)}
  .n-faq[open] summary i::after{transform:rotate(0)}
  .n-faq .n-det__in{padding:0 0 24px}
  .n-faq .n-body{max-width:62ch}
  @media (max-width:760px){.n-faqs__grid{grid-template-columns:1fr}.n-faqs__head{position:static}}
}

/* the close (23 October 2026, Gio's frame): the hero's arc, glow and the 1 on black, shifted up so the arc meets the top edge;
   the three lines in the hero's face, One in white, the rest in green; the pill button. logos.css draws the background through
   the hero's own rules (.hero-b and its children), scaled to this band by --u */
#main .n-sec.n-close{position:relative;isolation:isolate;overflow:hidden;background:#090B0C;color:#FFFFFF;padding:clamp(48px,5vw,76px) 0 clamp(56px,6vw,100px);min-height:max(360px,29vw);   /* the block stays open: its rules nest, closed at the foot (23 October 2026) */
  .n-close__bg{--u:min(1vw,17.3px);position:absolute;left:0;right:0;top:calc(-10*var(--u));bottom:0;height:auto;min-height:0;max-height:none;container-type:normal;z-index:-1}
  .n-close__in{position:relative;display:grid;gap:clamp(28px,3vw,40px);justify-items:start}
  .n-close__title{font-family:var(--m-text);font-weight:300;font-size:clamp(2.2rem,4.3vw,4.6rem);line-height:1.08;letter-spacing:-.015em;color:var(--green);text-transform:none}
  .n-close__title b{font-weight:700;color:#FFFFFF}
  .n-close__btn{display:inline-flex;align-items:center;min-height:48px;padding:0 26px;border-radius:999px;background:var(--green);color:var(--ink);font:600 .95rem/1 var(--m-text);text-decoration:none;transition:background .22s ease,transform .22s ease}
  .n-close__btn:hover{background:var(--light);transform:translateY(-1px)}
  @media (max-width:760px){.n-close__bg{--u:1.5vw}}
}

/* the contact page (23 October 2026): the close's band as the page's head, clearing the header, then two columns of ruled
   rows on white */
#main .n-sec.n-chero{padding:calc(var(--hdr) + clamp(48px,7vw,112px)) 0 clamp(56px,6vw,96px);min-height:0}
#main .n-sec.n-chero .n-close__in{gap:0}
#main .n-sec.n-chero .n-eyebrow{margin-bottom:28px}
#main .n-sec.n-chero .n-display{margin-bottom:24px;max-width:13em}
#main .n-sec.n-chero .n-lead{margin-bottom:0;color:rgba(255,255,255,.82)}
#main .n-sec.n-contact{
  .n-contact__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap);align-items:start}
  .n-contact__col .n-eyebrow{margin-bottom:20px}
  .n-contact__title{font-weight:300;font-size:clamp(1.7rem,2.6vw,2.4rem);line-height:1.15;letter-spacing:-.015em;color:var(--dark);margin-bottom:20px;text-transform:none;font-family:inherit}
  .n-contact__title b{font-weight:500;color:var(--ink)}
  .n-contact__rows{margin-top:36px}
  .n-contact__rows li{display:grid;grid-template-columns:7em 1fr;gap:16px}
  .n-contact__rows li b,.n-rows li a{color:var(--ink)}
  .n-rows li a{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--line);text-underline-offset:3px}
  .n-rows li a:hover,.n-rows li a:focus{text-decoration-color:var(--green);text-decoration-thickness:2px}
  /* the form (23 October 2026, Gio: more corporate and professional): a bordered panel with a small radius, boxed white
     fields with a hairline border and a green ring on focus, labels in the ink, a black button */
  .n-contact__panel{background:var(--stone);border:1px solid var(--line);border-radius:12px;padding:clamp(24px,3.5vw,48px)}
  .n-form{position:relative;display:grid;gap:28px}
  .n-form__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;padding-bottom:20px;border-bottom:1px solid var(--line)}
  .n-form__head .n-small{margin:0}
  .n-form abbr{text-decoration:none;color:var(--dark);margin-left:3px}
  .n-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px}
  .n-field{display:grid;gap:8px;align-content:start}
  .n-field--wide{grid-column:1/-1}
  .n-field label{font-weight:500;font-size:.88rem;line-height:1.3;color:var(--ink)}
  .n-field input,.n-field select,.n-field textarea{display:block;width:100%;margin:0;height:48px;padding:0 14px;border:1px solid var(--line);border-radius:6px;background:#FFFFFF;font-family:inherit;font-size:1rem;line-height:1.4;color:var(--ink);outline:none;box-shadow:0 0 0 0 transparent;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
  .n-field textarea{height:auto;min-height:150px;padding:12px 14px;resize:vertical}
  .n-field select{padding-right:40px;background:#FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23090B0C' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center/12px 12px}
  .n-field input::placeholder,.n-field textarea::placeholder{color:rgba(9,11,12,.4)}
  .n-field input:hover,.n-field select:hover,.n-field textarea:hover{border-color:rgba(9,11,12,.35)}
  .n-field input:focus,.n-field select:focus,.n-field textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(36,188,91,.18)}
  .n-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
  .n-form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;padding-top:4px}
  .n-form__btn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 32px;border:0;border-radius:6px;background:var(--ink);color:#FFFFFF;font-family:inherit;font-weight:600;font-size:.95rem;line-height:1;cursor:pointer;transition:background .2s}
  .n-form__btn:hover,.n-form__btn:focus-visible{background:var(--dark)}
  .n-form__foot .n-small{max-width:24em;margin:0}
  .n-form__note{padding:18px 22px;border:1px solid var(--line);border-left:3px solid var(--green);border-radius:6px;background:#FFFFFF;font-size:1rem;line-height:1.5;color:var(--ink)}
  .n-form__note--err{border-left-color:var(--ink);margin-bottom:24px}
  /* the careers page (23 October 2026): the roles as ruled rows with the apply link at the right, then two columns */
  .n-roles{margin-top:32px}
  .n-role{display:flex;align-items:center;justify-content:space-between;gap:24px}
  .n-role__text b{display:block;font-weight:500;font-size:1.15rem;color:var(--ink)}
  .n-role__text span{display:block;margin-top:4px;font-size:.9rem;color:var(--mute)}
  .n-role__apply{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-weight:600;font-size:.95rem;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--green);padding-bottom:3px}
  .n-role__apply i{font-style:normal;color:var(--green);transition:transform .2s}
  .n-role__apply:hover i{transform:translateX(4px)}
  .n-careers__grid{margin-top:clamp(48px,5vw,80px);padding-top:clamp(40px,4vw,64px);border-top:1px solid var(--line)}
  @media (max-width:760px){.n-role{flex-direction:column;align-items:flex-start;gap:12px}}
  @media (max-width:760px){.n-contact__grid{grid-template-columns:1fr;gap:44px}.n-contact__rows li{grid-template-columns:1fr;gap:4px}.n-form__grid{grid-template-columns:1fr}.n-form__btn{width:100%}}
}

@media (prefers-reduced-motion:reduce){
  #main .n-sec .reveal,#main .n-sec .n-ch__rule.reveal{opacity:1;transform:none;transition:none}
  #main .n-sec .n-step::before{transform:none;transition:none}
  #main .n-sec .n-card:hover,#main .n-sec .n-start__card:hover,#main .n-sec .n-btn:hover{transform:none}
}

/* the hero's Trustpilot line on a phone (23 October 2026): logos.css lays it out as a flex row, which breaks the sentence into
   columns at 375px; here it flows as text with the stars inline */
@media (max-width:760px){
  #main .hero-b .hb-tp{display:block;line-height:1.4}
  #main .hero-b .hb-tp .hb-tpstars{display:inline-block;vertical-align:-2px;margin-left:.35em}
}

/* the laurels beside the award pill (23 October 2026): logos.css sizes them in hero units, 3 by 7 pixels on a phone; here they
   keep the laurel's own 28 by 66 shape at no less than 9 by 21 pixels */
#main .hero-b .hb-pill .crest{width:max(9px,calc(.8*var(--u)));height:max(21px,calc(1.9*var(--u)));-webkit-mask-size:contain;mask-size:contain}
#main .hero-b .hb-pill{gap:.45em}

/* the phone menu (23 October 2026, Gio: make it white and improve the design): a white panel, the colour lockup, a hairline
   circle close button in ink, the nine links as the page's numbered index in the page's own type, then the button and the
   address. The rules sit on html body so they win over the borrowed sheet and logos.css, which paint the menu dark. */
html body .mnav .mnav-panel{background:#FFFFFF;color:#090B0C}
html body .mnav .mnav-bar{padding:20px 24px 16px;border-bottom:1px solid #E3E6E4}
html body .mnav .mnav-close{width:44px;height:44px;background:transparent;border:1px solid #E3E6E4;color:#090B0C}
html body .mnav .mnav-close:hover{border-color:#090B0C}
html body .mnav .mnav-body{padding:4px 24px 16px}
html body .mnav .mnav-root{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
html body .mnav .mnav-root li{display:block;margin:0}
html body .mnav .mnav-direct{display:flex;align-items:baseline;gap:16px;min-height:0;padding:13px 0;border-bottom:1px solid #E3E6E4;color:#090B0C;font-family:"Hanken Grotesk",sans-serif;font-weight:300;font-size:1.5rem;line-height:1.15;letter-spacing:-.02em;text-decoration:none}
html body .mnav .mnav-direct::before{content:attr(data-n);flex:none;min-width:2.4em;font-size:.7rem;font-weight:600;letter-spacing:.14em;color:#3C7E44;font-variant-numeric:tabular-nums}
html body .mnav .mnav-direct:hover{color:#3C7E44;text-decoration:none}
html body .mnav .mnav-foot{padding:16px 24px calc(24px + env(safe-area-inset-bottom));border-top:1px solid #E3E6E4;display:flex;flex-direction:column;gap:14px}
html body .mnav .mnav-cta{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:52px;padding:0 24px;border-radius:999px;background:#24BC5B;color:#090B0C;font-weight:600;text-decoration:none}
html body .mnav .mnav-cta .chip-arrow{display:none}
html body .mnav .mnav-mail{display:block;color:#090B0C;font-size:.95rem;font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#E3E6E4}