/* Round 18 pass 2. Six type sizes only: 14 / 17 / 20 / 28 / 36 / 56. Left edge x 48 (laptop) and x 20 (phone). */
:root{--t0:17px;--t1:20px;--t2:28px;--t3:36px;--t4:56px;--s:14px}
.hd.lt{background:rgba(249,248,244,.62);color:var(--ink);border-bottom-color:rgba(17,65,54,.1);box-shadow:0 10px 30px -18px rgba(7,19,15,.35)}
.hd.lt .btn{background:var(--green);color:var(--soft)}
.hd.lt .on{border-color:var(--green)}
.hd .logo-c{display:none}.hd.lt .logo-w{display:none}.hd.lt .logo-c{display:block}
.hd.lt .mb{color:var(--ink);border-color:rgba(17,65,54,.35);background:rgba(17,65,54,.05)}
.hd nav{gap:24px}
.hd nav a:not(.btn){font-size:var(--t0)}
.hd .mb{font-size:var(--s)}
.mnav{display:none}
a.chip{color:inherit;text-decoration:none}
.chip{font-size:var(--t0)}
.chip b{font:300 var(--t2)/1 var(--f-disp);color:var(--mint)}
.pchip{display:none}
.hero .in{will-change:transform}
@media (min-width:861px) and (max-height:760px){.hero .in{top:124px}}
.hero .photo{display:none}   /* round 18 pass 3: the dusk photo stays in the doors section only */
.hero .lead{font-size:var(--t1)}
.replay{display:none;font-size:var(--s);top:auto;bottom:40px;right:160px}
.replay.show{display:block}
.scrollcue{font-size:var(--s)}
.ph{font-size:var(--s);letter-spacing:.06em;border-radius:4px}
/* hero (round 5): pre-rendered video, full width, with a dark green scrim behind the text column */
.hero .hv{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:#0b2c25 center/cover no-repeat}
.hero .hv video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:60% 50%;background:#0b2c25}
.hero .hv.still video{display:none}
.hero .tint{background:linear-gradient(90deg,rgba(11,44,37,.92) 0,rgba(11,44,37,.8) 420px,rgba(11,44,37,.34) 760px,rgba(11,44,37,0) 1000px)}
.sec>.in{max-width:1356px;margin:0 auto}
section[id]{scroll-margin-top:0}
p,li{text-wrap:pretty}
h2{text-wrap:balance}
.sec h2{font-size:var(--t4)}
.sec .hd2{position:relative;max-width:1356px;margin:0 auto}
.sec .hd2 h2{margin-top:12px}
.sec .hd2 .lead{margin-top:14px;max-width:640px}

/* ---------- how we work ---------- */
.how{background:linear-gradient(180deg,#F6F4EE,#EEF1EA);padding:88px var(--edge) 80px}
.how .row{max-width:1356px;margin:0 auto;grid-template-columns:540px 1fr;gap:64px;align-items:stretch}
.rwrap{width:540px}
.paper{font-size:var(--s);padding:30px 30px 44px;max-width:540px}
.paper .h,.paper .g{font-size:var(--s)}
.paper .l{padding:8px 0}
.paper .l span.t{line-height:1.35}
.paper .tot{font-size:var(--s)}
.paper .tot b{font:300 var(--t3)/1 var(--f-disp)}
.paper .ty{font-size:var(--s)}
.paper .l,.paper .g{opacity:0;transform:translateY(6px);transition:opacity .5s,transform .6s var(--ease)}
.paper .l i:after{opacity:0;transition:opacity .3s}
.paper.go .l,.paper.go .g{opacity:1;transform:none}
.paper.go .l i:after{opacity:1}
.paper .l:nth-of-type(n),.paper .g:nth-of-type(n){transition-delay:calc(var(--k,0)*.12s)}
.paper.go .l i:after{transition-delay:calc(var(--k,0)*.12s + .35s)}
.paper>*:nth-child(2){--k:1}.paper>*:nth-child(3){--k:2}.paper>*:nth-child(4){--k:3}.paper>*:nth-child(5){--k:4}.paper>*:nth-child(6){--k:5}.paper>*:nth-child(7){--k:6}.paper>*:nth-child(8){--k:7}.paper>*:nth-child(9){--k:8}.paper>*:nth-child(10){--k:9}
.hp{position:relative;overflow:hidden;border-radius:16px;color:#F6F4EE;padding:48px 44px 44px;display:flex;flex-direction:column;justify-content:space-between;gap:36px;
  background:radial-gradient(110% 80% at 88% 0%,rgba(143,203,176,.24),transparent 58%),radial-gradient(80% 60% at 0% 100%,rgba(46,124,99,.25),transparent 60%),linear-gradient(165deg,#0F3A30,#0B2C25 58%,#07130F);
  box-shadow:0 40px 80px -48px rgba(7,19,15,.7),inset 0 0 0 1px rgba(143,203,176,.18)}
.hp:before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(143,203,176,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(143,203,176,.07) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(ellipse at 70% 30%,#000,transparent 72%);mask-image:radial-gradient(ellipse at 70% 30%,#000,transparent 72%);animation:gdrift 26s linear infinite}
@keyframes gdrift{to{background-position:46px 46px}}
.hp .float{filter:blur(60px);opacity:.45}
.hp .float.a{width:360px;height:360px;right:-90px;top:-80px;left:auto}
.hp .float.b{width:300px;height:300px;left:-80px;bottom:-90px}
.hp>*:not(.float){position:relative}
.hp .lbl{color:var(--mint)}
.hp h2{font-size:var(--t4);margin-top:12px;max-width:620px}
.hp h2 em{color:var(--mint)}
.hp .flow{margin:0;display:grid;grid-template-columns:1fr 26px 1.4fr 26px 1fr 26px 1fr;align-items:stretch}
.hp .fn{background:rgba(246,244,238,.07);border:1px solid rgba(143,203,176,.26);color:#F6F4EE;padding:20px 14px 18px;min-height:128px;border-radius:16px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hp .fn b{display:block;font:300 var(--t1)/1.2 var(--f-disp);min-height:0;white-space:nowrap}
.hp .fn small{text-wrap:balance;font-size:var(--s);color:rgba(246,244,238,.78);margin-top:8px;line-height:1.35}
.hp .fn.mid{background:var(--mint);border-color:var(--mint);color:var(--green);box-shadow:0 0 0 0 rgba(143,203,176,.5);animation:arrive 2.4s linear .8s infinite}
.hp .fn.mid small{color:rgba(17,65,54,.85)}
/* the dot into the Cartesian card (2nd arrow, 0.8 s delay, 2.4 s cycle) lands at 85 percent: the card pulses then */
@keyframes arrive{0%,80%{box-shadow:0 0 0 0 rgba(143,203,176,0);transform:none}85%{box-shadow:0 0 0 0 rgba(143,203,176,.7);transform:scale(1)}92%{transform:scale(1.035)}100%{box-shadow:0 0 0 16px rgba(143,203,176,0);transform:none}}
.hp .ar{align-self:stretch;margin-top:0}
.hp .ar:before{background:var(--mint);opacity:.45;top:64px}
.hp .ar:after{border-color:var(--mint);top:59px;opacity:.8}
.hp .ar i{background:#EAFBF2;box-shadow:0 0 10px var(--mint);top:60px}
.hp .pts{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:32px;border-top:1px solid rgba(143,203,176,.25);padding-top:26px}
.hp .pts b{font:600 var(--t0)/1.3 var(--f-text);color:var(--mint)}
.hp .pts p{color:rgba(246,244,238,.86);margin-top:6px;text-wrap:balance}

/* ---------- areas ---------- */
.areas{position:relative;overflow:hidden;background:radial-gradient(circle at 70% 55%,rgba(143,203,176,.14),transparent 55%),var(--night);padding:88px var(--edge) 80px}
.areas .float.a{right:-8%;top:30%}
.areas .hd2 h2{max-width:none}
.amap{position:relative;max-width:1356px;margin:44px auto 0;height:560px;border-radius:16px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(143,203,176,.18);background:linear-gradient(180deg,rgba(7,19,15,.35),rgba(7,19,15,.1))}
.amap canvas{position:absolute;inset:0;width:100%;height:100%}

/* ---------- why brand new ---------- */
.why{background:var(--soft);padding:88px var(--edge) 80px}
.cmp{max-width:1356px;margin:48px auto 0;display:block}
.cr{display:grid;grid-template-columns:240px 1fr 1fr;gap:0 32px;padding:22px 0;border-top:1px solid rgba(17,65,54,.16);align-items:start}
.cr:last-child{border-bottom:1px solid rgba(17,65,54,.16)}
.cr h3{font:300 var(--t2)/1.15 var(--f-disp);letter-spacing:-.01em}
.cr p{color:var(--ink)}
.cr .e p{color:var(--muted)}
.cr .big{font:300 var(--t2)/1.15 var(--f-disp);color:var(--muted)}
.cr .src{font-size:var(--s);margin-top:8px;max-width:440px;line-height:1.4}
.cr.ch{padding:0 0 18px;border-top:0}
.cr.ch b{display:block;font:300 var(--t2)/1.15 var(--f-disp)}
.cr.ch .n b{color:#2E7C63}.cr.ch .e b{color:var(--muted)}
.cr.ch span{text-wrap:balance;display:block;margin-top:6px;font-size:var(--s);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mt{position:relative;height:8px;border-radius:4px;background:rgba(17,65,54,.1);margin-top:14px;max-width:420px;overflow:hidden}
.mt i{position:absolute;left:var(--l,0);top:0;bottom:0;width:var(--w);border-radius:4px;background:#2E7C63}
.cr .e .mt i{background:#9AAFA6}
.src2{max-width:1356px;margin:16px auto 0;font-size:var(--s);color:var(--muted)}
.areas .src2{color:rgba(246,244,238,.72);margin-top:14px}
.amap .src2{position:absolute;right:16px;bottom:12px;margin:0;max-width:none;color:rgba(246,244,238,.6);line-height:1.2}
.why .src2+.src2{margin-top:4px}

/* ---------- research circle ---------- */
.rsec{position:relative;overflow:hidden;background:radial-gradient(circle at 50% 62%,rgba(143,203,176,.16),transparent 52%),var(--night);padding:88px var(--edge) 80px}
.rsec .float.a{right:-8%;top:8%}.rsec .float.b{left:-6%;bottom:-10%}
.rsec .lead{color:rgba(246,244,238,.82)}
.rcwrap{position:relative;max-width:1356px;margin:20px auto 0}
.rc{position:relative;width:1356px;height:620px;transform-origin:0 0}
.rc svg.rl{position:absolute;left:0;top:0;width:1356px;height:620px;overflow:visible;pointer-events:none}
.rl .ln{fill:none;stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s var(--ease),stroke .3s,stroke-width .3s,opacity .3s;opacity:.7}
.rl .dot{opacity:0;transition:opacity .4s,transform .3s;transform-box:fill-box;transform-origin:center}
.rl .dot.y{fill:#8FCBB0}.rl .dot.g{fill:#2E7C63}
.rl .dot.on{fill:#EAFBF2;transform:scale(1.5);filter:drop-shadow(0 0 8px #8FF0C4)}
.go .rl .ln{stroke-dashoffset:0}
.go .rl .dot{opacity:1}
.rl .ln.y{stroke:#8FCBB0}.rl .ln.g{stroke:#2E7C63}
.rl .ln.on{stroke:#8FF0C4;stroke-width:3;opacity:1}
.rl .ring{fill:none;stroke:rgba(143,203,176,.42);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease)}
.rl .ring2{stroke:rgba(143,203,176,.16);stroke-width:1}
.go .rl .ring{stroke-dashoffset:0}
.rl .orb{opacity:0;transition:opacity .8s 1.8s;transform-origin:678px 215px;animation:orb 36s linear infinite}
.go .rl .orb{opacity:1}
@keyframes orb{to{transform:rotate(360deg)}}
.rcore{position:absolute;left:469.5px;top:6.5px;width:417px;height:417px}
.rcore svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rcore .hf{opacity:0;transform:scale(.9);transform-origin:50% 50%;transition:opacity .9s .35s,transform 1.1s .35s var(--ease),filter .35s}
.rcore .hf.b{transition-delay:.55s}
.go .rcore .hf{opacity:1;transform:none}
.rcore .hf.dim{filter:none}
.rcore .hf.lit{filter:brightness(1.12) drop-shadow(0 0 16px rgba(143,240,196,.5))}
.rcore .ct{position:absolute;left:0;right:0;text-align:center;opacity:0;transform:translateY(10px);transition:opacity .8s,transform .8s var(--ease)}
.go .rcore .ct{opacity:1;transform:none}
.rcore .ct h3{font:300 var(--t2)/1.1 var(--f-disp);letter-spacing:-.01em}
.rcore .ct p{font:400 var(--t0)/1.35 var(--f-text);margin:8px auto 0}
.rcore .ct.y{top:23%;color:var(--green);transition-delay:1s}.rcore .ct.y p{color:rgba(17,65,54,.9)}
.rcore .ct.g{top:57%;color:#F6F4EE;transition-delay:1.2s}.rcore .ct.g p{color:#F6F4EE}
.rn{position:absolute;width:336px;outline:none}
.rn .rt{display:none}
.rn .rx{width:336px;opacity:0;transform:translateY(12px);transition:opacity .6s,transform .7s var(--ease)}
.rn h4{font:300 var(--t2)/32px var(--f-disp);letter-spacing:-.005em;color:#F6F4EE;transition:color .3s}
.rn .rule{display:block;height:2px;width:100%;margin:14px 0 12px;background:#8FCBB0;transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease)}
.rn.l .rule{transform-origin:100% 50%}
.rn.g .rule{background:#2E7C63}
.rn ul{list-style:none;display:grid;grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:max-content;column-gap:28px;row-gap:2px;font:400 var(--t0)/1.5 var(--f-text);color:rgba(246,244,238,.84)}
.rn.c{width:320px}
.rn.c .rx{width:320px;text-align:center;display:flex;flex-direction:column;align-items:center}
.rn.c .rule{order:0;margin:14px 0 12px;transform-origin:50% 50%}
.rn.c ul{justify-content:center}
.go .rn .rx{opacity:1;transform:none}
.go .rn .rule{transform:scaleX(1)}
.rn.on .rule{background:#8FF0C4}
.rn.on h4{color:var(--mint)}
.rn:focus-visible .rx{outline:2px solid #F6F4EE;outline-offset:6px}
.rn .rx,.rn .rule{transition-delay:var(--d,0s)}
.rn.on .rx{transition-delay:0s}
@media (prefers-reduced-motion:reduce){.rc *,.rcore *,.paper *,.hp *{transition:none!important;animation:none!important}.rl .ln,.rl .ring{stroke-dashoffset:0}.rn .rx,.rcore .hf,.rcore .ct,.paper .l,.paper .g{opacity:1;transform:none}.rn .rule{transform:none}.paper .l i:after{opacity:1}}

@media (prefers-reduced-motion:reduce){.float,.hp:before{animation:none}}

/* ---------- team and about ---------- */
.teamsec{background:var(--soft);padding:88px var(--edge) 56px}
.tmh{display:flex;justify-content:space-between;align-items:end;gap:40px}
.tmh h2{margin-top:12px}
.tmh .lead{margin:0;max-width:430px}
.lblrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tg{display:grid;grid-template-columns:repeat(6,1fr);gap:40px 16px;margin-top:48px}
.pp{position:relative}.pp:before{content:'';position:absolute;left:0;top:0;width:100%;aspect-ratio:1/1;background:var(--tint);border-radius:16px}
.pp img{position:relative;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 0;border-radius:16px;display:block;background:none;-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 89%);mask-image:linear-gradient(180deg,#000 80%,transparent 89%)}
.pp strong{display:block;margin-top:10px;font:600 var(--t0)/1.2 var(--f-text)}
.pp span{text-wrap:balance;display:block;font-size:var(--s);color:var(--muted);line-height:1.25;margin-top:2px}
.aboutsec{background:var(--soft);padding:32px var(--edge) 80px}
.about{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:center}
.about h2{margin-top:12px;font-size:var(--t3)}
.about .grp{margin-top:0;height:460px}
.grp .cap{font-size:var(--t0)}

/* ---------- doors ---------- */
.doors{padding:104px var(--edge) 88px}
.doors .in{position:relative;max-width:1356px;margin:0 auto}
.dg{margin-top:36px}
.door .btn{margin-top:auto}
.door ol{margin-bottom:12px}
.door li{text-wrap:balance}
.door li b{flex:none;font-size:var(--t1)}
.door .btn.ghost{background:transparent;color:#F6F4EE;box-shadow:inset 0 0 0 1px rgba(246,244,238,.55)}
.door .btn.ghost:hover{background:rgba(246,244,238,.1)}
/* the accreditation card: what a broker would hold. Example only, it claims nothing beyond the door copy */
.door{position:relative}
.acc{position:absolute;right:34px;bottom:34px;width:280px;height:176px;padding:20px;border-radius:16px;overflow:hidden;color:#F6F4EE;background:#114136;
  background-image:linear-gradient(rgba(143,203,176,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(143,203,176,.07) 1px,transparent 1px);background-size:23px 23px;
  box-shadow:inset 0 0 0 1px rgba(143,203,176,.35),0 24px 40px -24px rgba(7,19,15,.7);display:flex;flex-direction:column;justify-content:space-between;
  opacity:0;transform:perspective(700px) rotateX(12deg);transform-origin:50% 100%;transition:transform .6s var(--ease),opacity .4s}
.acc.vis{opacity:1;transform:none}
.acc img{height:24px;width:auto;align-self:flex-start;display:block}
.acc .ph{position:absolute;right:20px;top:20px;color:#F6F4EE}
.acc .at b{display:block;font:600 var(--s)/1.2 var(--f-text);letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
.acc .at strong{display:block;margin-top:6px;font:300 var(--t1)/1.2 var(--f-disp);color:#F6F4EE}
.acc:after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(246,244,238,.14),transparent);transform:skewX(-18deg);animation:sheen 6.5s ease-in-out 1.4s infinite;pointer-events:none}
@keyframes sheen{0%,70%{left:-60%}100%{left:130%}}
@media (prefers-reduced-motion:reduce){.acc{opacity:1;transform:none;transition:none}.acc:after{display:none}}
.cons{position:absolute;right:34px;bottom:34px;width:220px;height:176px;padding:16px;border-radius:16px;color:#F6F4EE;background:rgba(143,203,176,.2);box-shadow:inset 0 0 0 1px rgba(143,203,176,.38),0 24px 40px -24px rgba(7,19,15,.7);display:flex;flex-direction:column;justify-content:space-between;
  opacity:0;transform:perspective(700px) rotateX(12deg);transform-origin:50% 100%;transition:transform .6s var(--ease),opacity .4s}
.cons.vis{opacity:1;transform:none}
.cons>b{display:block;font:600 var(--s)/1.2 var(--f-text);letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
.cons .cn{font:300 var(--t2)/1.1 var(--f-disp);color:#F6F4EE;white-space:nowrap}
.cons .cq{margin-top:6px;font:400 var(--t0)/1.3 var(--f-text);color:rgba(246,244,238,.86)}
.cons .cq a{display:inline-block;white-space:nowrap;color:#F6F4EE;text-decoration:underline;text-decoration-color:var(--mint);text-underline-offset:4px;font-weight:600;padding:12px 0;margin:-12px 0}   /* cream, not mint: mint on the tint is 3.4:1 */
@media (prefers-reduced-motion:reduce){.cons{opacity:1;transform:none;transition:none}}
/* doors: below 1440 the cards no longer fit beside the steps, so they sit under the button */
@media (min-width:861px) and (max-width:1439px){.cons,.acc{position:relative;right:auto;bottom:auto;margin-top:8px;flex:none}}
.doors .photo{opacity:.45;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 38%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 38%,transparent 100%)}
.doors .photo:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,44,37,.7),rgba(11,44,37,0) 70%)}

/* ---------- narrow screens ---------- */
@media (max-width:860px){
  .how{padding:80px var(--edge)}
  .how .row{grid-template-columns:1fr;gap:32px}
  .how .hp{order:-1}
  .rwrap{width:100%}
  .hp{padding:32px 20px;gap:28px}
  .hp .flow{grid-template-columns:1fr}
  .hp .fn{min-height:0}
  .hp .ar{height:26px;width:100%}
  .hp .ar:before{left:50%;right:auto;top:0;bottom:0;width:1.5px;height:auto;margin-left:-1px}
  .hp .ar:after{left:calc(50% - 4px);right:auto;top:auto;bottom:2px;transform:rotate(135deg)}
  .hp .ar i{display:none}
  .hp .pts{grid-template-columns:1fr;gap:20px}
  .areas{padding:80px var(--edge)}
  .amap{height:380px;margin-top:32px}
  .why{padding:80px var(--edge)}
  .cr{grid-template-columns:1fr;gap:10px;padding:20px 0}
  .cr.ch{display:grid;grid-template-columns:1fr;gap:16px;padding:0 0 22px}
  .cr.ch>span:first-child{display:none}
  .cr.ch .e b{font-size:var(--t1)}.cr.ch .n b{font-size:var(--t1)}
  .cr:not(.ch) .n:before,.cr:not(.ch) .e:before{display:block;font-size:var(--s);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
  .cr:not(.ch) .n:before{content:'Brand new'}.cr:not(.ch) .e:before{content:'Established'}
  .rsec{padding:80px var(--edge)}
  .rcwrap{margin-top:40px}
  .rc{width:auto!important;height:auto!important;transform:none!important}
  .rc svg.rl{display:none}
  .rcore{position:relative;left:auto;top:auto;width:min(100%,380px);height:auto;aspect-ratio:1;margin:0 auto 36px}
  .rn,.rn.l,.rn.c{position:relative;left:auto!important;top:auto!important;right:auto!important;width:100%;flex-direction:row;align-items:flex-start;gap:12px;padding:22px 0;border-top:1px solid rgba(143,203,176,.22)}
  .rn.c .rx,.rn .rx{width:auto;flex:1;text-align:left}
  .rn.c ul{justify-content:flex-start}
  .rn{display:flex}
  .rn .rt{display:block;position:relative;flex:none;width:20px;height:28px;margin-top:2px}
  .rn .rt:after{content:'';position:absolute;left:2px;top:6px;width:14px;height:14px;border-radius:50%}
  .rn.y .rt:after{background:#8FCBB0}.rn.g .rt:after{background:#2E7C63}
  .rn.on .rt:after{background:#A9E3C8;box-shadow:0 0 14px rgba(143,240,196,.7)}
  .rn.c .rx{display:block;text-align:left}
  .rn h4{font-size:var(--t1)}
  .rn h4 br{display:none}
  .rn .rule{display:none}
  .rn ul{margin-top:8px;column-gap:20px}
  .teamsec{padding:80px var(--edge) 48px}
  .tmh{flex-direction:column;align-items:flex-start;gap:14px}
  .tg{grid-template-columns:repeat(2,1fr);gap:28px 14px;margin-top:32px}
  .aboutsec{padding:32px var(--edge) 80px}
  .about{grid-template-columns:1fr;gap:28px}
  .about .grp{height:320px}
  .cons{position:relative;right:auto;bottom:auto;width:100%;height:auto;margin-top:8px;gap:12px}
  .amap .src2{right:auto;left:16px}
  .acc{position:relative;right:auto;bottom:auto;width:100%;max-width:420px;height:auto;aspect-ratio:310/195;margin-top:8px}
  .dg{grid-template-columns:1fr}.door{padding:26px;min-height:0}.door h3{font-size:var(--t2)}.doors{padding:96px var(--edge) 96px}
}
/* How: below 1440 the panel and the receipt can't sit side by side (the flow needs 564 px), so the panel goes full width and the receipt sits centred under it */
@media (min-width:861px) and (max-width:1439px){.how .row{grid-template-columns:1fr;gap:40px}.how .hp{order:-1}.how .hp .pts{grid-template-columns:1fr 1fr;gap:32px}.how .rwrap{justify-self:center}}
/* tablet and landscape phone: Menu button instead of the links; the main button stays */
@media (min-width:601px) and (max-width:1180px){
  .hd nav a:not(.btn){display:none}
  .hd .mb{font:600 var(--s)/1 var(--f-text);display:block;margin-left:auto;margin-right:16px;border-radius:4px;min-height:44px;padding:0 16px;border:1px solid rgba(246,244,238,.4);background:rgba(246,244,238,.08);color:#F6F4EE}
  .hd.lt .mb{color:var(--ink);border-color:rgba(17,65,54,.35);background:rgba(17,65,54,.05)}
  .hd .btn{white-space:nowrap}
  .mnav{display:none;position:fixed;top:72px;left:0;right:0;z-index:49;background:rgba(17,65,54,.97);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:12px var(--edge) 20px;flex-direction:column}
  .mnav.open{display:flex}
  .mnav a{color:#F6F4EE;text-decoration:none;font:600 var(--t0)/1 var(--f-text);padding:16px 0;border-bottom:1px solid rgba(143,203,176,.2)}
  .mnav a:last-child{display:none}
}
@media (max-width:600px){
  :root{--edge:20px;--t4:36px}
  .hd nav{display:none}
  .hd .mb{display:block;border-radius:4px}
  .replay,.replay.show{display:none}
  .mnav{display:none;position:fixed;top:60px;left:0;right:0;z-index:49;background:rgba(7,19,15,.9);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:12px var(--edge) 20px;flex-direction:column}
  .mnav.open{display:flex}
  .mnav a{color:#F6F4EE;text-decoration:none;font:600 var(--t0)/1 var(--f-text);padding:16px 0;border-bottom:1px solid rgba(143,203,176,.2)}
  .hero .in{top:92px}
  .hero h1{font-size:var(--t4)}
  .hero .lead{font-size:var(--t0);margin-top:16px}
  .hero .sub{font-size:var(--t0)}
  .hero .go{margin-top:20px}
  .hero .chips{display:none}
  .pchip{display:inline-flex;margin-top:18px;font-size:var(--s);padding:10px 14px}
  .pchip b{font-size:var(--t2)}
  .amap{height:290px}
  .hero .hv{inset:auto 0 0 0;height:auto;aspect-ratio:4/5;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%);mask-image:linear-gradient(180deg,transparent 0,#000 30%)}
  .hero .hv video{object-position:50% 50%}
  .hero .tint{background:linear-gradient(180deg,rgba(11,44,37,.92) 0,rgba(11,44,37,.6) 52%,rgba(11,44,37,0) 72%)}
  .sticky{display:flex}
  body.scrolled.atdoors .sticky{transform:translateY(100%)}
  .hero:after{height:110px}
  .rcore .ct p{font-size:var(--s)}
  .rsec .hd2 h2,.how h2,.hp h2{font-size:var(--t3)}
  .hp h2{font-size:var(--t3)}
  .about h2{font-size:var(--t3)}
  .paper{padding:24px 18px 40px}
  .paper .h span:last-child{display:none}
  .paper .l .n{width:22px}
  .tmh .lead{max-width:none}
}
@media (min-width:601px) and (max-width:860px){
  .hero .chips{display:none}
  .pchip{display:inline-flex;margin-top:18px;font-size:var(--s);padding:10px 14px}
  .pchip b{font-size:var(--t2)}
  .hero .hv{inset:auto 0 0 0;height:auto;aspect-ratio:4/5;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%);mask-image:linear-gradient(180deg,transparent 0,#000 30%)}
  .hero .hv video{object-position:50% 50%}
  .hero .tint{background:linear-gradient(180deg,rgba(11,44,37,.92) 0,rgba(11,44,37,.6) 64%,rgba(11,44,37,0) 78%)}
}
.door li b{flex:none}

/* ---------- email (design only) and footer ---------- */
.fmail{max-width:1356px;margin:0 auto 56px;padding-bottom:56px;border-bottom:1px solid rgba(246,244,238,.25)}
.mrow{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:start}
.fmail h2{font-size:var(--t3);max-width:640px;margin-top:12px;color:#F6F4EE}
.fmail .lbl{color:var(--mint)}
.fmail .ph{color:#F6F4EE}
.fmail .lead{font-size:var(--t1);margin-top:14px;max-width:520px;text-wrap:balance;color:rgba(246,244,238,.86)}
.mdes{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:36px}
.fmail.mrow{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr)}   /* same columns as the footer below, so the field starts on the Site column */
.fmail .mdes{grid-column:2/4}
.mrow2{display:flex;width:100%;max-width:none}
.fld{flex:1;min-width:0;min-height:52px;display:flex;align-items:center;padding:0 18px;border:1px solid rgba(143,203,176,.4);border-right:0;border-radius:4px 0 0 4px;color:rgba(246,244,238,.72);background:rgba(246,244,238,.08);font-size:var(--t0)}
.fbtn{min-height:52px;display:inline-flex;align-items:center;padding:0 24px;background:#F6F4EE;color:var(--green);font:600 var(--t0)/1 var(--f-text);border-radius:0 4px 4px 0;cursor:default}
.mdes .fine{font-size:var(--s);color:rgba(246,244,238,.78)}
.ft{background:var(--green);color:#F6F4EE;padding:72px var(--edge) 36px;border-top:1px solid rgba(143,203,176,.2)}
.ft a{color:inherit;text-decoration:none}
.ft a:hover{text-decoration:underline;text-decoration-color:var(--mint);text-underline-offset:4px}
.ftg{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:64px;max-width:1356px;margin:0 auto}
.ftb img{height:44px;width:auto;display:block;margin-bottom:20px}
.ftb p{max-width:440px;color:rgba(246,244,238,.86);text-wrap:balance}
.ftb p+p{margin-top:12px}
.ftb .tag{font:300 var(--t1)/1.3 var(--f-disp);color:#F6F4EE}
.ft h3{font:600 14px/1.2 var(--f-text);letter-spacing:.14em;text-transform:uppercase;color:var(--mint);margin-bottom:16px}
.ft ul{list-style:none}.ft li+li{margin-top:10px}
.ft li a{font-weight:600}
.ftbase{max-width:1356px;margin:56px auto 0;padding-top:22px;border-top:1px solid rgba(246,244,238,.25);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:var(--s);color:rgba(246,244,238,.85)}
@media (max-width:860px){
  .fmail{margin-bottom:40px;padding-bottom:40px}.mrow,.fmail.mrow{grid-template-columns:1fr;gap:28px}.mdes,.fmail .mdes{margin-top:0;grid-column:auto}
  .ft{padding:56px var(--edge) 36px}.ftg{grid-template-columns:1fr;gap:36px}
}
@media (max-width:600px){.ft{padding-bottom:92px}.ftb img{height:38px}}

/* landscape phone and any short window: the hero scrolls with the page and the chip sits under the buttons, never over them */
@media (max-height:500px){
  .stage{height:auto}
  .hero{position:relative;height:auto;min-height:var(--hh)}
  .hero .in{position:relative;left:auto;top:auto;width:auto;max-width:720px;padding:104px var(--edge) 64px}
  .hero .chips{display:none}
  .pchip{display:inline-flex;margin-top:18px}
  .scrollcue{display:none}
}
/* short screens: hero in one screen, buttons and the proof chip on one row */
@media (max-height:500px){.hero .in{display:flex;flex-wrap:wrap;align-items:center;column-gap:28px;padding:84px var(--edge) 40px;max-width:none}.hero .in>*{flex:0 0 100%}.hero .in>.go,.hero .in>.pchip{flex:0 0 auto}.hero .eyebrow{display:none}.hero h1{font-size:var(--t3)}.hero .lead{margin-top:12px}.hero .sub{max-width:none}.hero .go{margin-top:20px}.hero .pchip{margin-top:20px}}

/* team: four across below 1140 px, so "Client Services Manager" does not wrap to a lone word */
@media (min-width:861px) and (max-width:1139px){.tg{grid-template-columns:repeat(4,1fr)}}
/* team: three across on tablet */
@media (min-width:640px) and (max-width:860px){.tg{grid-template-columns:repeat(3,1fr)}}

/* touch sizes (tablet, phone, landscape phone, any touch screen): every link and button is 44 px or more. Mouse laptops above 1180 keep the 36 px rhythm (8P-5) */
@media (max-width:1180px),(pointer:coarse){
  .hd>a{display:flex;align-items:center;min-height:44px}
  .hd .mb{min-height:44px}
  .hero .lnk{display:inline-flex;align-items:center;min-height:44px;border-bottom:0;padding-bottom:0;text-decoration:underline;text-underline-offset:6px}
  .ft li+li{margin-top:0}
  .ft li a,.ftbase a{display:inline-flex;align-items:center;min-height:44px}
  .ftbase{align-items:center}
}
@media (min-width:1181px) and (pointer:coarse){.hd nav a:not(.btn){display:inline-flex;align-items:center;min-height:44px}}
/* footer, tablet: the email address needs 258 px, so the third column is fixed; the sign-up field keeps the same columns */
@media (min-width:861px) and (max-width:1180px){.ftg,.fmail.mrow{grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr) 262px;gap:40px}}
@media (min-width:861px) and (max-width:1356px){.fmail .mdes{margin-top:67px}}

/* areas back on the Cartesian dark green */
.areas2{color:#F6F4EE}
.areas2 .hd2 h2{max-width:none}
.areas2 .oldmap{--ink:#F6F4EE;--muted:rgba(246,244,238,.78)}
.areas2 .oldmap .em{background:#0B2C25;border:1px solid rgba(143,203,176,.28)}
.oldmap [hidden]{display:none!important}
.oldmap .map #pin .pt{stroke:#0B2C25;stroke-width:calc(var(--u,1) * 3px);paint-order:stroke;stroke-linejoin:round}
.oldmap .map .ofc path{fill:none;stroke:var(--mint);stroke-linecap:round;stroke-linejoin:round}
.oldmap .map .ofc .gr{stroke-opacity:.34;stroke-width:calc(var(--u,1) * .9px)}
.oldmap .map .ofc .sk{stroke-opacity:.95;stroke-width:calc(var(--u,1) * 2.6px)}
.oldmap .map .ofc .dr{stroke-opacity:.6;stroke-width:calc(var(--u,1) * 1.8px)}
.oldmap .map .ofc .yr{stroke-opacity:.55;stroke-width:calc(var(--u,1) * 3.6px)}
.oldmap .map .ofc .lk{fill:rgba(143,203,176,.26);stroke-opacity:.65;stroke-width:calc(var(--u,1) * 1.2px)}
/* tablet and phone: the map sits straight under the lead line, the text column after it */
@media (max-width:1100px){.oldmap .grid.est{display:flex;flex-direction:column}.oldmap .emw{order:-1}}

/* round 20 fix D: the how-section flow chips are one even width each, tinted, no outline */
.hp .flow{grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr) 26px minmax(0,1fr) 26px minmax(0,1fr)}
.hp .fn,.hp .fn.mid{border:0}
@media (max-width:860px){.hp .flow{grid-template-columns:1fr}}
.hp .fn b{white-space:normal;text-wrap:balance}

/* round 20 fix E (G): the four captions share the chips' bottom line */
.hp .fn{display:flex;flex-direction:column}
.hp .fn small{margin-top:auto;padding-top:8px}