/* ═══════════════════════════════════════════════════════
   REDWOOD BRAND TOKENS — the only lines you need to touch
   ═══════════════════════════════════════════════════════ */
:root{
  --maroon:#401216;   /* Rich Redwood — client brand main colour */
  --action:#6E2226;   /* button/link tone derived from Rich Redwood */
  --deep:#2B0C0F;     /* footer and dark panels */
  --gold:#9C7961;     /* Faded Copper — client accent colour */
  --ink:#101010;      /* headings */
  --body:#3A3A3A;     /* body text */
  --muted:#6B6B6B;
  --line:#DADADA;
  --cream:#FFEDDA;    /* Antique White — client second colour */
  --grey:#FAF4EC;     /* light panel, warmed towards Antique White */
  --white:#FFFFFF;
  --sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --serif:'Cormorant Infant',Georgia,'Times New Roman',serif;
  --max:1280px;
  --pad:max(40px,calc((100vw - 1280px)/2 + 40px)); /* aligns full-bleed sections with the container */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--body);background:var(--white);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--sans);color:var(--ink);font-weight:300;line-height:1.18;letter-spacing:-.005em}
.hero h1,.statement h2,.solve h2,.feature h2,.projects h2,.band h2,.phero h1,.mapsec .section-head h2,.quotes .section-head h2{font-family:var(--serif);font-weight:400;letter-spacing:0;line-height:1.1}
.hero h1{font-size:clamp(40px,4vw,56px)}
h1 .em,h2 .em{color:var(--action)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 40px}
.sr{position:absolute;left:-9999px}
:focus-visible{outline:2px solid var(--action);outline-offset:3px}

/* ── Buttons & links: J.P. Morgan's small tracked-out uppercase, squared ── */
.btn{display:inline-block;font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:13px 26px;background:var(--action);color:var(--white);border:1px solid var(--action);cursor:pointer;transition:background .18s,border-color .18s}
.btn:hover{background:var(--maroon);border-color:var(--maroon)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--white)}
.more{font-size:13px;font-weight:600;color:var(--action);display:inline-flex;align-items:center;gap:8px}
.more::after{content:"\203A";font-size:18px;line-height:1;transition:transform .18s}
.more:hover::after{transform:translateX(3px)}

/* ── Header: short maroon bar above the logo, nav left, utility links right ── */
header.main{background:var(--white);position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line)}
header.main .wrap{display:flex;align-items:center;height:84px;gap:48px;position:relative}
header.main .wrap::before{content:"";position:absolute;left:40px;top:0;width:150px;height:4px;background:var(--maroon)}
.logo img{height:44px;width:auto}
nav.primary ul{display:flex;list-style:none;gap:34px}
nav.primary a{font-size:14px;font-weight:600;color:var(--ink);padding:31px 0;display:inline-flex;align-items:center;gap:6px;border-bottom:3px solid transparent}
nav.primary a::after{content:"";width:6px;height:6px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg) translateY(-2px)}
nav.primary a:hover{border-bottom-color:var(--action)}
.utility{margin-left:auto;display:flex;gap:22px;font-size:12px;font-weight:500;color:var(--body);align-items:center}
.utility a:hover{color:var(--action)}
.utility .tel{font-weight:700;color:var(--ink)}
.burger{display:none;margin-left:auto;background:none;border:0;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink)}

/* ── Hero: copy left, photo bleeding off the right edge, quote tool sitting on the photo ── */
.hero{position:relative;background:var(--white)}
.hero .wrap,.statement .wrap,.feature .wrap{max-width:none;padding:0}
.hero>.wrap>.grid{display:grid;grid-template-columns:42% 58%;min-height:700px}
.hero .copy{padding:96px 56px 120px var(--pad);display:flex;flex-direction:column;justify-content:center}
.hero h1{font-size:clamp(32px,3.2vw,44px);margin-bottom:22px;max-width:16ch}
.hero .copy p{font-size:15.5px;max-width:44ch;margin-bottom:34px;color:var(--body)}
.hero .copy .actions{display:flex;gap:14px;flex-wrap:wrap}
.hero .photo{position:relative;margin-top:32px;min-height:700px}
.hero .photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(43,12,15,.60),rgba(43,12,15,.26) 55%,rgba(43,12,15,.42))}

/* ── Quote tool placement ── */
#quote{position:absolute;right:160px;left:auto;top:40px;width:min(520px,calc(100% - 88px));z-index:3}
#quote .tool{max-width:none;border-radius:0;box-shadow:0 30px 70px -30px rgba(0,0,0,.65)}
#quote .head{padding:24px 28px 18px}
#quote .head h2{font-family:var(--serif);font-size:27px;font-weight:400;line-height:1.12;letter-spacing:0}
#quote .headrow{align-items:flex-end;gap:20px}
#quote .head .badge{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);
  font-weight:600;padding-bottom:4px}
#quote .body{min-height:392px;padding:26px 26px 22px}
#quote .cta{border-radius:0;letter-spacing:.14em;text-transform:uppercase;font-size:12px;padding:13px 26px}
#quote .q{font-size:22px}

/* Light-grey teaser strip overlapping the bottom of the hero photo */
.teasers{position:relative;z-index:4;margin:-92px 0 0 var(--pad);width:min(58%,720px);background:var(--grey)}
.teasers .grid{display:grid;grid-template-columns:repeat(3,1fr);padding:0 28px}
.teaser{padding:34px 26px 34px 0;border-right:1px solid var(--line);font-size:13px;font-weight:600;color:var(--ink);line-height:1.45}
.teaser:nth-child(2){padding-left:26px}
.teaser:last-child{border-right:0;padding-left:26px}
.teaser span{display:block;font-weight:400;color:var(--muted);margin-top:6px;font-size:12.5px}
.teaser:hover{color:var(--action)}


/* ── Seven-day promise ── */
.hero .promise{display:flex;align-items:center;gap:18px;margin:0 0 32px;padding:18px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:46ch}
.hero .promise .seal{flex:none;width:62px;height:62px;border-radius:50%;border:1.5px solid var(--gold);
  display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--maroon)}
.hero .promise .seal b{font-family:var(--serif);font-size:30px;font-weight:400;line-height:.9}
.hero .promise .seal i{font-style:normal;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-top:3px}
.hero .promise .say{font-size:14px;color:var(--body);line-height:1.5}
.hero .promise .say strong{display:block;font-weight:600;color:var(--ink);font-size:15px;margin-bottom:3px}
@media (max-width:1100px){.hero .promise{max-width:none}}

/* ── Statement: text left, photo right with a grey column behind it ── */
.statement{position:relative;padding:120px 0 110px}
.statement::before{content:"";position:absolute;top:0;bottom:0;right:0;width:36%;background:var(--grey)}
.statement .grid{position:relative;display:grid;grid-template-columns:46% 54%;align-items:center}
.statement .grid>div:first-child{padding:0 64px 0 var(--pad)}
.statement h2{font-size:clamp(32px,3.6vw,48px);margin-bottom:26px}
.statement p{font-size:16px;max-width:46ch;margin-bottom:30px}
.statement .stats{display:grid;grid-template-columns:repeat(3,1fr);margin:0 0 34px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.statement .stats div{padding:22px 22px 20px;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-start}
.statement .stats div:first-child{padding-left:0}
.statement .stats div:last-child{border-right:0;padding-right:0}
.statement .stats strong{display:block;font-family:var(--serif);font-size:38px;font-weight:400;color:var(--maroon);line-height:1;letter-spacing:0;white-space:nowrap}
.statement .stats span{display:block;font-size:12px;color:var(--muted);margin-top:10px;line-height:1.45}
@media (max-width:720px){.statement .stats{grid-template-columns:1fr}
.statement .stats div{padding:16px 0;border-right:0;border-bottom:1px solid var(--line)}
.statement .stats div:last-child{border-bottom:0}
.statement .stats span{max-width:none}}
.statement .photo{border-bottom:3px solid var(--gold)}
.statement .photo img{width:100%;height:520px;object-fit:cover}

/* ── "What problem can we solve together?" — photo top-left, headline, four white cards on grey ── */
.solve{position:relative;background:var(--grey);padding:0 0 72px;margin-top:40px}
.boroughsec{padding:0 0 84px;margin-top:0}
.boroughsec .boroughs{margin-top:0}
.boroughsec .boroughs .mrqband{margin:0}
.solve .photo{position:absolute;left:0;top:-40px;width:31%;height:560px;overflow:hidden}
.solve .photo img{width:100%;height:100%;object-fit:cover}
.solve .wrap{max-width:none;padding:0}
.solve .headrow{padding:72px var(--pad) 44px calc(31% + 56px)}
.solve h2{font-size:clamp(34px,3.8vw,50px);max-width:18ch}
.solve .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:0 var(--pad) 0 calc(24% + 40px);position:relative;z-index:2}
.solve .card{background:var(--white);padding:34px 26px 30px;display:flex;flex-direction:column;min-height:340px}
.solve .card .icon{width:34px;height:34px;color:var(--action);margin-bottom:22px}
.solve .card .icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.solve .card h3{font-size:20px;font-weight:400;margin-bottom:12px}
.solve .card p{font-size:13.5px;color:var(--body);line-height:1.6;margin-bottom:22px}
.solve .card .more{margin-top:auto}
.solve .dots{display:flex;gap:14px;align-items:center;margin:34px 0 0 calc(24% + 40px)}
.solve .dots{padding-left:0}
.solve .dots i{width:7px;height:7px;border-radius:50%;background:#B9B9B9}
.solve .dots i:first-child{background:var(--ink)}
.solve .serve{margin:56px var(--pad) 0 calc(24% + 40px);border-top:1px solid #D2D2D2;padding-top:28px}
.solve .serve h3{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.solve .serve .row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.solve .serve a strong{display:block;font-size:15px;font-weight:600;color:var(--ink);margin-bottom:5px}
.solve .serve a span{display:block;font-size:13px;color:var(--body);line-height:1.55}
.solve .serve a:hover strong{color:var(--action)}
/* ── Borough marquee ── */
.solve .boroughs{margin-top:56px}
.mrqband{display:flex;align-items:stretch;background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mrq-label{flex:none;width:210px;margin:0;padding:0 26px;display:flex;align-items:center;border-right:1px solid var(--line);
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);line-height:1.5}
.mrqband .mrq{flex:1;min-width:0;border-top:0;border-bottom:0}
.mrq{position:relative;overflow:hidden;background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mrq::before,.mrq::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.mrq::before{left:0;background:linear-gradient(90deg,var(--white),rgba(255,255,255,0))}
.mrq::after{right:0;background:linear-gradient(270deg,var(--white),rgba(255,255,255,0))}
.mrq-track{display:flex;width:max-content;animation:mrqscroll 110s linear infinite}
.mrq:hover .mrq-track{animation-play-state:paused}
.mrq-item{display:flex;align-items:center;justify-content:center;padding:22px 42px;
  border-right:1px solid var(--line);min-width:210px;height:96px}
.mrq-item img{max-height:46px;max-width:170px;width:auto;object-fit:contain;opacity:.72;transition:opacity .2s}
.mrq-item:hover img{opacity:1}
@keyframes mrqscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mrq-track{animation:none}.mrq{overflow-x:auto}}


/* ── Feature: photo bleeding off the page, text on a grey column ── */
.feature{position:relative;padding:96px 0}
.feature::before{content:"";position:absolute;top:0;bottom:0;right:0;width:72%;background:var(--grey)}
.feature .grid{position:relative;display:grid;grid-template-columns:50% 50%;align-items:center}
.feature .grid>div:last-child{padding:0 var(--pad) 0 64px}

.feature .photo img{width:100%;height:540px;object-fit:cover}
.feature h2{font-size:clamp(30px,3.4vw,44px);margin-bottom:22px}
.feature p{font-size:16px;max-width:48ch;margin-bottom:16px}
.feature ul{list-style:none;margin:8px 0 30px;max-width:48ch}
.feature li{padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px;display:flex;gap:12px}
.feature li::before{content:"";width:7px;height:7px;background:var(--action);margin-top:9px;flex-shrink:0}


/* ── Coverage map ── */
.mapsec{padding:84px 0 72px;background:var(--grey)}
.mapsec .section-head{margin-bottom:36px}
.maprow{display:grid;grid-template-columns:1.55fr 1fr;gap:44px;align-items:stretch}
.mapwrap{background:var(--white);border:1px solid var(--line);padding:18px}
.mapwrap svg{width:100%;height:auto;display:block}
.mapwrap .bo path{fill:#EFE3D6;stroke:var(--white);stroke-width:1.6;transition:fill .18s ease;cursor:pointer}
.mapwrap .bo.core path{fill:#E2CDB8}
.mapwrap .bo:hover path,.mapwrap .bo:focus path{fill:var(--maroon)}
.mapwrap .bo:focus{outline:none}
.mapwrap .bo:focus-visible path{stroke:var(--gold);stroke-width:2.6}
.mapwrap.on .bo path{fill:#F3EAE1}
.mapwrap.on .bo.core path{fill:#EBDDCD}
.mapwrap.on .bo:hover path,.mapwrap.on .bo:focus path{fill:var(--maroon)}
.mappanel{background:var(--white);border:1px solid var(--line);padding:34px 32px;display:flex;flex-direction:column;justify-content:center}
.mp-kicker{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.mappanel h3{font-family:var(--serif);font-size:30px;font-weight:400;line-height:1.1;margin-bottom:14px}
.mappanel p{font-size:14.5px;color:var(--body);margin-bottom:22px}
.mp-stats{list-style:none;border-top:1px solid var(--line);margin-bottom:22px}
.mp-stats li{padding:13px 0;border-bottom:1px solid var(--line)}
.mp-stats strong{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.mp-stats span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.45}
.mp-areas{font-size:15px;color:var(--ink);line-height:1.6}
.mp-go{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--action);padding-top:16px;border-top:1px solid var(--line)}
.mapfoot{margin-top:28px;font-size:14px;color:var(--muted);max-width:92ch}
@media (max-width:1000px){.maprow{grid-template-columns:1fr;gap:24px}.mappanel{padding:26px 24px}.mappanel h3{font-size:25px}}
@media (max-width:720px){.mapsec{padding:64px 0}.mapwrap{padding:10px}}

/* ── Projects: three cards, image on top ── */
.projects{padding:96px 0}
.projects h2{font-size:clamp(30px,3.4vw,42px);margin-bottom:12px}
.projects .intro{max-width:60ch;color:var(--muted);margin-bottom:44px}
.projects .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.projects .card{background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column}
.projects .card img{width:100%;height:200px;object-fit:cover}
.projects .card .in{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.projects .card .tag{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--action);margin-bottom:12px}
.projects .card h3{font-size:20px;font-weight:400;margin-bottom:8px}
.projects .card .loc{font-size:12.5px;color:var(--muted);margin-bottom:12px}
.projects .card p{font-size:14px;margin-bottom:22px}
.projects .card .more{margin-top:auto}

/* ── Remaining sections ── */
.partners{padding:64px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.partners h2{font-size:13px;font-weight:600;color:var(--muted);text-align:center;margin-bottom:36px}
.logos{display:grid;grid-template-columns:repeat(7,1fr);gap:28px;align-items:center}
.logos img{max-height:56px;width:auto;margin:0 auto;filter:grayscale(1);opacity:.7}
.logos img:hover{filter:none;opacity:1}
.logos .sq{max-height:84px}
.logos img[src$=".svg"]{filter:brightness(0);opacity:.55}
.logos img[src$=".svg"]:hover{opacity:.9}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:48px;flex-wrap:wrap}
.section-head h2{font-size:clamp(30px,3.4vw,42px)}
.section-head p{max-width:56ch;font-size:16px;color:var(--muted)}
.quotes{padding:96px 0;background:var(--grey)}
.quotes .grid{display:grid;grid-template-columns:repeat(3,1fr)}
.quote{border-left:2px solid var(--action);padding:6px 40px 0 28px}
.quote p{font-family:var(--serif);font-size:20px;line-height:1.45;color:var(--ink);margin-bottom:20px;font-weight:300}
.quote cite{font-style:normal;font-size:13px;font-weight:600;color:var(--action)}
.faqs{padding:96px 0}
.faqs .wrap{display:grid;grid-template-columns:1fr 1.6fr;gap:64px}
.faqs h2{font-size:clamp(30px,3.4vw,42px);margin-bottom:18px}
.faqs .intro p{color:var(--muted);margin-bottom:24px}
.textlink{font-weight:600;font-size:14px;color:var(--action);border-bottom:1.5px solid var(--action);padding-bottom:2px}
.textlink:hover{color:var(--ink);border-color:var(--ink)}
details{border-top:1px solid var(--line)}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:20px 0;font-size:18px;font-weight:400;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:24px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:24px;color:var(--action);font-weight:300;transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details .a{padding:0 0 22px;font-size:15px;max-width:64ch}
.contact{padding:96px 0;background:var(--grey)}
.contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.contact h2{font-size:clamp(30px,3.6vw,46px);margin-bottom:18px}
.contact .lead{font-size:16.5px;margin-bottom:36px;max-width:48ch}
.contact dl{display:grid;grid-template-columns:auto 1fr;gap:12px 28px;font-size:15px}
.contact dt{font-weight:600;color:var(--ink)}
.contact dd a{border-bottom:1px solid var(--line)}
.contact dd a:hover{border-color:var(--action);color:var(--action)}
form.enq .row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
form.enq label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin:0 0 6px}
form.enq input,form.enq select,form.enq textarea{width:100%;font:inherit;font-size:15px;padding:12px 14px;border:1px solid var(--line);background:var(--white);margin-bottom:18px;color:var(--ink)}
form.enq input:focus,form.enq select:focus,form.enq textarea:focus{border-color:var(--action);outline:none}
form.enq textarea{min-height:120px;resize:vertical}
form.enq .consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted);margin-bottom:22px}
form.enq .consent input{width:auto;margin:4px 0 0}
footer{background:var(--deep);color:rgba(255,255,255,.8);padding:72px 0 36px;font-size:14px}
footer .top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.15)}
footer .brand img{height:38px;width:auto;filter:brightness(0) invert(1);margin-bottom:18px}
footer .brand p{max-width:40ch;font-weight:300}
footer h4{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--white);margin-bottom:16px}
footer ul{list-style:none}
footer li{margin-bottom:10px}
footer a:hover{color:var(--white);text-decoration:underline}
footer .bottom{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:28px;font-size:12.5px;color:rgba(255,255,255,.55)}
footer .bottom a{margin-right:20px}

/* ── Responsive ── */
@media (max-width:1280px){
  .hero>.wrap>.grid{grid-template-columns:38% 62%}
  #quote{right:100px;left:auto;width:min(480px,calc(100% - 72px))}
}
@media (max-width:1100px){
  .hero .wrap,.statement .wrap,.feature .wrap,.solve .wrap{max-width:var(--max);padding:0 40px}
  .hero>.wrap>.grid{grid-template-columns:1fr;min-height:0}
  .hero .copy{padding:64px 0 40px}
  .hero .photo{margin:0 -40px;min-height:0;padding:40px 24px 130px;position:relative}
  .statement .grid>div:first-child,.feature .grid>div:last-child{padding:0}
  .teasers{margin:-78px 0 0;width:100%}
  .teasers .grid{padding:0 28px}
  .solve .headrow{padding:48px 0 32px}
  .solve .cards{margin:0}
  #quote{position:relative;left:auto;right:auto;top:auto;width:min(620px,100%);margin:0 auto}
  .statement::before,.feature::before{display:none}
  .statement .grid,.feature .grid{grid-template-columns:1fr;gap:40px}
  .statement .photo,.feature .photo{margin:0}
  .statement .photo img,.feature .photo img{height:380px}
  .solve .photo{position:relative;width:100%;height:280px;top:0}
  .solve .dots{margin-left:0}
  .solve .cards{grid-template-columns:1fr 1fr}
  .solve .serve{margin:48px 0 0}
  .mrq-label{width:150px;padding:0 16px;font-size:10px}
  .solve .serve .row{grid-template-columns:1fr 1fr}
  .projects .cards{grid-template-columns:1fr}
  .logos{grid-template-columns:repeat(4,1fr)}
  .quotes .grid{grid-template-columns:1fr;gap:32px}
  .quote{padding-right:0}
  .faqs .wrap,.contact .wrap{grid-template-columns:1fr;gap:40px}
  footer .top{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .wrap{padding:0 20px}
  header.main .wrap::before{left:20px;width:90px}
  nav.primary,.utility{display:none}
  .burger{display:inline-block}
  header.main .wrap{height:68px}
  .logo img{height:36px}
  .hero .wrap,.statement .wrap,.feature .wrap,.solve .wrap{padding:0 20px}
  .hero .photo{margin:0 -20px}
  .teasers .grid{grid-template-columns:1fr;padding:0 20px}
  .teaser{border-right:0;border-bottom:1px solid var(--line);padding:18px 0!important}
  .teaser:last-child{border-bottom:0}
  .solve .cards{grid-template-columns:1fr}
  .solve .serve .row{grid-template-columns:1fr;gap:18px}
  .logos{grid-template-columns:repeat(2,1fr)}
  form.enq .row{grid-template-columns:1fr}
  footer .top{grid-template-columns:1fr}
  .statement,.feature,.projects,.faqs,.contact,.quotes{padding:64px 0}
  .statement{padding-bottom:80px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

/* ═══ 60-second rental quote tool (scoped to #quote) ═══ */
#quote{
  --maroon:#3E1215;      
  --action:#7E2A2E;      
  --deep:#2B0D0F;        
  --gold:#B08D57;        
  --paper:#F4F2EF;       
  --ink:#1C1917;         
}
#quote{
  --rule:#E4DFD9; --rule2:#F0ECE7; --muted:#6E6660; --white:#fff;
  --sans:'Libre Franklin',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
}
#quote h1, #quote h2, #quote h3, #quote h4, #quote .serif{font-family:var(--serif);font-weight:400;letter-spacing:0;line-height:1.2}
@media(max-width:620px){}
#quote .tool{width:100%;max-width:620px;background:var(--white);border:1px solid var(--rule);border-radius:3px;
  box-shadow:0 1px 2px rgba(28,25,23,.04),0 22px 55px -34px rgba(62,18,21,.4);overflow:hidden}
#quote .head{background:var(--maroon);padding:20px 28px 17px;color:#fff}
#quote .headrow{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
#quote .head h2{font-size:19px;color:#fff;font-weight:400}
#quote .head .badge{font-size:11px;color:rgba(255,255,255,.62);white-space:nowrap;letter-spacing:.01em}
#quote .track{height:2px;background:rgba(255,255,255,.18);margin-top:16px;position:relative}
#quote .track i{position:absolute;left:0;top:0;bottom:0;background:var(--gold);width:0;transition:width .5s cubic-bezier(.4,0,.2,1)}
#quote .meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;
  font-size:11.5px;color:rgba(255,255,255,.6);letter-spacing:.01em}
#quote .body{padding:32px 28px 26px;min-height:410px;display:flex;flex-direction:column}
@media(max-width:540px){#quote .body{padding:24px 18px 20px}
#quote .head{padding:17px 18px 15px}}
#quote .step{display:flex;flex-direction:column;flex:1;animation:in .38s cubic-bezier(.22,1,.36,1)}
@keyframes in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
#quote .q{font-family:var(--serif);font-size:25px;color:var(--maroon);line-height:1.25;letter-spacing:-.005em}
#quote .sub{font-size:14.5px;color:var(--muted);margin-top:9px;max-width:54ch}
#quote .hr{height:1px;background:var(--rule2);margin:20px 0 0}
#quote .opts{margin-top:20px;display:grid;gap:0;border-top:1px solid var(--rule2)}
#quote .opts.two{grid-template-columns:1fr 1fr;column-gap:26px}
@media(max-width:540px){#quote .opts.two{grid-template-columns:1fr;column-gap:0}}
#quote .opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:none;
  border:0;border-bottom:1px solid var(--rule2);padding:15px 4px;font:inherit;font-size:15.5px;
  color:var(--ink);cursor:pointer;transition:background .14s,padding-left .14s;position:relative}
#quote .opt:hover{background:#FBF9F7;padding-left:10px}
#quote .opt:focus-visible{outline:2px solid var(--action);outline-offset:-2px}
#quote .opt.on{background:#FBF7F6}
#quote .opt.on:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--action)}
#quote .mark{flex:none;width:17px;height:17px;border:1px solid #CBC2BA;border-radius:50%;position:relative;transition:.14s}
#quote .opt:hover .mark{border-color:var(--action)}
#quote .opt.on .mark{border-color:var(--action)}
#quote .opt.on .mark:after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--action)}
#quote .ot{flex:1}
#quote .oh{display:block;font-weight:500;line-height:1.35}
#quote .os{display:block;font-size:13px;color:var(--muted);margin-top:2px;line-height:1.45}
#quote label.fl{display:block;font-size:12.5px;font-weight:600;color:var(--maroon);margin:0 0 8px;letter-spacing:.01em}
#quote input, #quote textarea, #quote select{width:100%;border:0;border-bottom:1px solid #CBC2BA;border-radius:0;padding:11px 2px;
  font:inherit;font-size:16px;background:none;color:var(--ink)}
#quote input:focus, #quote textarea:focus, #quote select:focus{outline:0;border-bottom-color:var(--action);box-shadow:0 1px 0 var(--action)}
#quote textarea{border:1px solid #CBC2BA;border-radius:3px;padding:12px 13px;resize:vertical;line-height:1.65;font-size:15px}
#quote textarea:focus{box-shadow:none;border-color:var(--action)}
#quote select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8A807A 50%),linear-gradient(135deg,#8A807A 50%,transparent 50%);
  background-position:calc(100% - 11px) 19px,calc(100% - 6px) 19px;background-size:5px 5px;background-repeat:no-repeat}
#quote .fgrid{display:grid;gap:24px;margin-top:26px}
#quote .two-up{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:540px){#quote .two-up{grid-template-columns:1fr}}
#quote .postcode{font-size:26px!important;font-family:var(--serif);letter-spacing:.03em;text-transform:uppercase;padding:10px 2px!important}
#quote .foot{margin-top:auto;padding-top:26px;display:flex;align-items:center;justify-content:space-between;gap:16px}
#quote .back{background:none;border:0;font:inherit;font-size:13.5px;color:var(--muted);cursor:pointer;padding:8px 2px}
#quote .back:hover{color:var(--action);text-decoration:underline;text-underline-offset:3px}
#quote .cta{background:var(--action);color:#fff;border:0;border-radius:2px;padding:14px 30px;font:inherit;
  font-weight:600;font-size:15px;letter-spacing:.01em;cursor:pointer;transition:background .15s}
#quote .cta:hover{background:var(--maroon)}
#quote .cta:disabled{background:#CFC6BE;cursor:not-allowed}
#quote .hint{font-size:12.5px;color:#948A83;text-align:center;margin-top:18px}
#quote .calc{flex:1;display:flex;flex-direction:column;justify-content:center;padding:24px 0;text-align:center}
#quote .ring{width:92px;height:92px;margin:0 auto 24px;position:relative}
#quote .ring svg{transform:rotate(-90deg)}
#quote .ring .pct{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);font-size:21px;color:var(--maroon)}
#quote .calc h3{font-size:21px;color:var(--maroon)}
#quote .log{margin:22px auto 0;max-width:330px;text-align:left;border-top:1px solid var(--rule2)}
#quote .log div{display:flex;gap:11px;align-items:center;font-size:13.5px;color:#B3A89F;
  padding:9px 0;border-bottom:1px solid var(--rule2);transition:color .3s}
#quote .log div.done{color:var(--ink)}
#quote .log i{width:15px;height:15px;border-radius:50%;border:1px solid #DCD4CC;flex:none;position:relative;transition:.3s}
#quote .log div.done i{background:var(--maroon);border-color:var(--maroon)}
#quote .log div.done i:after{content:"";position:absolute;left:4.8px;top:2.2px;width:3.5px;height:7px;
  border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(42deg)}
#quote .rband{background:var(--maroon);border-radius:3px;padding:22px 24px;color:#fff;margin-top:24px}
#quote .rband .lab{font-size:11.5px;color:rgba(255,255,255,.58);letter-spacing:.02em}
#quote .rband .val{font-family:var(--serif);font-size:23px;margin-top:7px;line-height:1.3}
#quote .cards{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:1px;background:var(--rule);
  border:1px solid var(--rule);border-top:0}
@media(max-width:540px){#quote .cards{grid-template-columns:1fr}}
#quote .card{padding:20px 20px 18px;position:relative;background:var(--white)}
#quote .card h4{font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--maroon);letter-spacing:.01em}
#quote .card .tagb{display:inline-block;font-size:10.5px;font-weight:600;color:var(--gold);letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:7px}
#quote .amt{font-family:var(--serif);font-size:29px;margin:9px 0 3px;filter:blur(8px);color:#8C827B;user-select:none}
#quote .per{font-size:12.5px;color:var(--muted);line-height:1.5}
#quote .card ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:7px}
#quote .card li{font-size:13px;color:var(--muted);padding-left:16px;position:relative}
#quote .card li:before{content:"";position:absolute;left:0;top:6px;width:4px;height:7px;
  border:solid var(--gold);border-width:0 1.5px 1.5px 0;transform:rotate(42deg)}
#quote .note{margin-top:20px;padding:16px 18px;background:#FAF7F3;border-left:2px solid var(--gold);
  font-size:13.5px;line-height:1.6;color:var(--maroon)}
#quote .tick{width:52px;height:52px;border-radius:50%;background:var(--maroon);margin:8px auto 20px;position:relative;
  animation:pop .45s cubic-bezier(.22,1.4,.36,1)}
@keyframes pop{from{transform:scale(.55);opacity:0}to{transform:scale(1);opacity:1}}
#quote .tick:after{content:"";position:absolute;left:19px;top:14px;width:10px;height:18px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(42deg)}
#quote .next{margin-top:26px;border-top:1px solid var(--rule2)}
#quote .nr{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--rule2);align-items:flex-start}
#quote .nr b{flex:none;font-family:var(--serif);font-size:16px;color:var(--gold);width:16px;font-weight:400}
#quote .nr strong{display:block;font-size:14.5px;font-weight:600;color:var(--maroon)}
#quote .nr span{display:block;font-size:13.5px;color:var(--muted);margin-top:3px;line-height:1.55}
#quote .smlab{margin:28px 0 0;font-size:12.5px;font-weight:600;color:var(--maroon);
  padding-bottom:10px;border-bottom:1px solid var(--maroon)}
#quote .summary .r{display:flex;justify-content:space-between;gap:18px;padding:11px 0;font-size:13.5px;
  border-bottom:1px solid var(--rule2)}
#quote .summary .r span:first-child{color:var(--muted)}
#quote .summary .r span:last-child{font-weight:500;text-align:right}
@media(prefers-reduced-motion:reduce){}

/* ── East London projects map ── */
.eastmap{padding:84px 0 72px}
.eastmap .section-head{margin-bottom:30px}
.emwrap{background:var(--white);border:1px solid var(--line);padding:16px 10px}
.emwrap svg{width:100%;height:auto;display:block;overflow:visible}
.emwrap .eb{fill:#F1E7DC;stroke:var(--white);stroke-width:1.8}
.emwrap .eb.core{fill:#E3CFBB}
.emwrap .pin{cursor:pointer}
.emwrap .pin .stem{fill:none;stroke:var(--maroon);stroke-width:1.4;stroke-dasharray:3 3;opacity:.75}
.emwrap .pin .halo{fill:var(--maroon);opacity:.14;transition:r .2s ease,opacity .2s ease}
.emwrap .pin .dot{fill:var(--maroon);stroke:var(--white);stroke-width:2.4;transition:r .2s ease}
.emwrap .pin.office .dot{fill:var(--gold)}
.emwrap .pin.office .stem{stroke:var(--gold)}
.emwrap .pin .lab{font-family:var(--serif);font-size:19px;fill:var(--ink)}
.emwrap .pin .sub{font-family:var(--sans);font-size:11.5px;fill:var(--muted);letter-spacing:.01em}
.emwrap .pin:hover .dot,.emwrap .pin:focus .dot{r:8}
.emwrap .pin:hover .halo,.emwrap .pin:focus .halo{r:20;opacity:.22}
.emwrap .pin:hover .lab,.emwrap .pin:focus .lab{fill:var(--maroon)}
.emwrap .pin:focus{outline:none}
.emkey{display:flex;flex-wrap:wrap;gap:26px;margin-top:22px;font-size:12.5px;color:var(--muted);align-items:center}
.emkey i{display:inline-block;width:12px;height:12px;margin-right:9px;vertical-align:-1px;border-radius:2px}
.emkey .k-core{background:#E3CFBB}
.emkey .k-dot{background:var(--maroon);border-radius:50%}
.emkey .k-off{background:var(--gold);border-radius:50%}
@media (max-width:900px){
  .emwrap{padding:10px 4px}
  .emwrap .pin .lab{font-size:26px}
  .emwrap .pin .sub{font-size:16px}
  .emwrap .pin .dot{stroke-width:3}
}

.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}
.gal figure{position:relative;overflow:hidden;background:var(--deep);margin:0}
.gal img{width:100%;height:230px;object-fit:cover;display:block;transition:transform .5s ease}
.gal figure:hover img{transform:scale(1.04)}
.gal .g-tall{grid-row:span 2}
.gal .g-tall img{height:476px}
.gal .g-wide{grid-column:span 2}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 20px 16px;color:var(--white);
  background:linear-gradient(180deg,rgba(43,12,15,0),rgba(43,12,15,.88));font-size:12.5px;line-height:1.45}
.gal figcaption strong{display:block;font-family:var(--serif);font-size:19px;font-weight:400;margin-bottom:3px}
@media (max-width:1000px){.gal{grid-template-columns:repeat(2,1fr)}.gal .g-tall{grid-row:auto}.gal .g-tall img{height:230px}}
@media (max-width:620px){.gal{grid-template-columns:1fr}.gal .g-wide{grid-column:auto}}

header.main .wrap{gap:36px}
nav.primary ul{gap:26px}
nav.primary a{font-size:13.5px;white-space:nowrap}
.utility{gap:16px;font-size:11.5px}
.utility a{white-space:nowrap}
.utility .btn.navcta{padding:10px 16px;font-size:10.5px;letter-spacing:.1em}
@media (max-width:1240px){.utility a:not(.tel):not(.navcta){display:none}}

.phero h1,.prose h2,.band h2{font-family:var(--serif);font-weight:400;letter-spacing:0;line-height:1.12}

/* ── Footer accreditations ── */
footer .accreds{padding:30px 0 26px;border-bottom:1px solid rgba(255,255,255,.15)}
footer .accreds .marks{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin-bottom:20px}
footer .accreds .mark{padding:0 34px;border-right:1px solid rgba(255,255,255,.18);display:flex;align-items:center;height:54px}
footer .accreds .mark:first-child{padding-left:0}
footer .accreds .mark:last-child{border-right:0}
footer .accreds img{max-height:40px;max-width:150px;width:auto;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.8;transition:opacity .2s}
footer .accreds .mark:hover img{opacity:1}
footer .accreds p{font-size:12px;line-height:1.7;color:rgba(255,255,255,.6);max-width:110ch}
@media (max-width:720px){
  footer .accreds .mark{padding:0 18px;height:46px}
  footer .accreds .mark:first-child{padding-left:0}
}

/* ═══ Multi-page additions ═══ */
nav.primary a::after{display:none}
.phero{position:relative;background:var(--deep);color:var(--white);overflow:hidden}
.phero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.phero .wrap{position:relative;z-index:2;padding-top:92px;padding-bottom:76px;max-width:var(--max)}
.phero .crumb{font-size:12px;color:rgba(255,255,255,.65);margin-bottom:20px}
.phero .crumb a:hover{color:var(--white);text-decoration:underline}
.phero h1{color:var(--white);font-size:clamp(32px,4vw,52px);max-width:20ch;margin-bottom:18px}
.phero p{font-size:17px;max-width:62ch;color:rgba(255,255,255,.9);font-weight:300}
.phero .actions{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}
.phero .btn.ghost{border-color:var(--white);color:var(--white)}
.phero .btn.ghost:hover{background:var(--white);color:var(--ink)}

.prose{padding:80px 0}
.prose.grey{background:var(--grey)}
.prose h2{font-size:clamp(26px,3vw,38px);margin-bottom:20px;max-width:24ch}
.prose h3{font-size:22px;margin:34px 0 12px}
.prose p{font-size:16px;max-width:70ch;margin-bottom:16px}
.prose ul{list-style:none;margin:6px 0 24px;max-width:70ch}
.prose li{padding:10px 0;border-bottom:1px solid var(--line);display:flex;gap:12px;font-size:15.5px}
.prose li::before{content:"";width:7px;height:7px;background:var(--action);margin-top:9px;flex-shrink:0}
.prose .two{display:grid;grid-template-columns:1.25fr 1fr;gap:64px;align-items:start}
.prose .side{background:var(--white);border:1px solid var(--line);padding:28px}
.prose.grey .side{background:var(--white)}
.prose .side h3{margin-top:0;font-size:19px}
.prose .side ul{margin-bottom:0}
.prose .side li:last-child{border-bottom:0}

.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.g3 .card{border:1px solid var(--line);background:var(--white);padding:30px 26px;display:flex;flex-direction:column}
.g3 .card h3{font-size:20px;margin:0 0 10px}
.g3 .card p{font-size:14.5px;margin-bottom:20px}
.g3 .card .more{margin-top:auto}
.g3 .card img{width:100%;height:180px;object-fit:cover;margin:-30px -26px 22px;width:calc(100% + 52px)}

.band{background:var(--deep);color:var(--white);padding:64px 0}
.band .wrap{display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap}
.band h2{color:var(--white);font-size:clamp(26px,2.8vw,36px);max-width:22ch;margin:0}
.band p{color:rgba(255,255,255,.8);max-width:52ch;margin-top:12px;font-size:15.5px}
.band .btn{background:var(--white);border-color:var(--white);color:var(--ink)}
.band .btn:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}

.arealist{margin-top:16px}
.arealist .region{padding:34px 0;border-top:1px solid var(--line)}
.arealist h3{font-size:22px;margin-bottom:6px}
.arealist .region>p{font-size:14.5px;color:var(--muted);margin-bottom:18px;max-width:70ch}
.arealist ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:2px 24px}
.arealist li{padding:8px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.arealist li::before,.pills a::before{display:none}
.arealist li{display:block}
.arealist li a{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.arealist li a:hover{color:var(--action)}
.arealist li span{font-size:12px;color:var(--muted)}

.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.pills a{font-size:13px;padding:8px 14px;border:1px solid var(--line);background:var(--white)}
.pills a:hover{border-color:var(--action);color:var(--action)}

.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:28px 0 34px}
.facts div{background:var(--white);padding:20px 22px}
.facts dt{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.facts dd{font-size:16px;color:var(--ink)}

.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.posts article{border:1px solid var(--line);display:flex;flex-direction:column}
.posts img{width:100%;height:180px;object-fit:cover}
.posts .in{padding:24px;display:flex;flex-direction:column;flex:1}
.posts .tag{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--action);margin-bottom:10px}
.posts h3{font-size:19px;margin-bottom:8px}
.posts p{font-size:14px;margin-bottom:20px}
.posts .more{margin-top:auto}
.postbody{max-width:74ch}
.postbody p{font-size:16.5px;margin-bottom:18px}
.postbody h2{font-size:26px;margin:34px 0 14px}

@media (max-width:1100px){
  .prose .two{grid-template-columns:1fr;gap:36px}
  .g3,.posts{grid-template-columns:1fr 1fr}
  .arealist ul{grid-template-columns:repeat(2,1fr)}
  .facts{grid-template-columns:1fr}
}
@media (max-width:720px){
  .g3,.posts{grid-template-columns:1fr}
  .arealist ul{grid-template-columns:1fr}
  .phero .wrap{padding-top:56px;padding-bottom:52px}
  .prose{padding:56px 0}
}

/* ── Area long-form guide ── */
.quick{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--gold);padding:18px 22px;margin:0 0 30px;max-width:70ch}
.quick .ql{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.quick p{font-size:16px;color:var(--ink);margin:0;line-height:1.6}
.longform{padding:80px 0}
.longform .lf{max-width:78ch}
.longform .toc{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;margin:0 0 44px}
.longform .toc strong{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.longform .toc ul{margin:0;columns:2;column-gap:36px}
.longform .toc li{border:0;padding:4px 0 4px 16px;font-size:14px;break-inside:avoid}
.longform .toc li::before{top:12px;width:5px;height:5px}
.longform .toc a:hover{color:var(--action)}
.longform h2{margin-top:52px;scroll-margin-top:110px}
.longform h2:first-of-type{margin-top:0}
.longform h3{font-size:19px;margin:26px 0 10px}
.longform p{font-size:16.5px;line-height:1.72}
.longform li,.prose .lf li{display:block;position:relative;padding:9px 0 9px 20px;line-height:1.6}
.longform li::before{position:absolute;left:0;top:18px;margin:0}
.longform table{width:100%;border-collapse:collapse;margin:18px 0 28px;font-size:14.5px;background:var(--white);border:1px solid var(--line)}
.longform th,.longform td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
.longform thead th{background:var(--deep);color:var(--white);font-weight:600;font-size:13px;letter-spacing:.02em}
.longform tbody th{font-weight:600;color:var(--ink);width:26%}
.longform tbody tr:nth-child(even) td,.longform tbody tr:nth-child(even) th{background:var(--grey)}
.longform .updated{font-size:12.5px;color:var(--muted);margin-top:40px;padding-top:16px;border-top:1px solid var(--line)}
@media (max-width:720px){
  .longform{padding:56px 0}
  .longform .toc ul{columns:1}
  .longform table{display:block;overflow-x:auto;white-space:normal;font-size:13.5px}
  .longform th,.longform td{padding:10px;min-width:120px}
}

/* ═══ Rich area guides ═══ */
.rich .kick{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.rich .lf{max-width:74ch}
.rich h2{margin-top:0}
.rich .lf+.lf,.rich figure+.lf,.rich aside+.lf,.rich .statband+.lf{margin-top:64px}
.rich .lf p{font-size:17px;line-height:1.75;color:var(--body)}
.rich .lf h3{font-family:var(--serif);font-size:23px;font-weight:500;margin:30px 0 8px;color:var(--ink)}
.rich .ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* snapshot */
.snap{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:start;margin:0 0 72px}
.snap-l{display:flex;flex-direction:column}
.takeaways{list-style:none;margin:0 0 26px;max-width:none}
.rich .takeaways li{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.55}
.rich .takeaways li::before{display:none}
.takeaways .ic{color:var(--action);margin-top:1px;width:24px;height:24px}
.takeaways strong{color:var(--ink);font-weight:600}
.rich .toc{margin:auto 0 0;border:0;padding:0}
.rich .toc ul{columns:1;margin:0}
.rich .toc li{padding:7px 0 7px 18px}
.snap-map{margin:0;background:var(--white);border:1px solid var(--line);padding:18px 18px 14px;display:flex;flex-direction:column}
.loc{width:100%;height:auto;display:block}
.loc .lb{fill:#F1E6DA;stroke:var(--white);stroke-width:1.1}
.loc .lb.on{fill:#D9BFA7}
.loc .od{fill:#C9B4A2}
.loc .nd{fill:var(--gold);stroke:var(--white);stroke-width:1.5}
.loc .nl{font-family:var(--sans);font-size:12.5px;fill:var(--muted);font-weight:500}
.loc .rg{font-family:var(--sans);font-size:10px;letter-spacing:.2em;fill:#B8A493;font-weight:700}
.loc .me{fill:var(--maroon);stroke:var(--white);stroke-width:2.5}
.loc .pulse{fill:var(--maroon);opacity:.25;transform-box:fill-box;transform-origin:center;animation:locpulse 2.4s ease-out infinite}
.loc .tag{fill:var(--deep)}
.loc .tl{font-family:var(--serif);font-size:17px;fill:#fff}
@keyframes locpulse{0%{transform:scale(1);opacity:.35}100%{transform:scale(3.4);opacity:0}}
.snap-map figcaption{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:12px;color:var(--muted);margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.snap-map figcaption span{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:-10px}
.snap-map .k1{background:var(--maroon)}.snap-map .k2{background:var(--gold)}.snap-map .k3{background:#C9B4A2}

/* section with local photo */
.split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:56px;align-items:start}
.split .lf{max-width:none}
.afig{margin:0;position:sticky;top:120px}
.afig img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.afig figcaption{padding:12px 0 0;font-size:11.5px;color:var(--muted);line-height:1.5;border-bottom:1px solid var(--line);padding-bottom:12px}
.afig figcaption strong{display:block;font-family:var(--serif);font-size:20px;font-weight:500;color:var(--ink);margin-bottom:2px}
.afig figcaption a:hover{color:var(--action);text-decoration:underline}

/* stat band */
.statband{display:grid;grid-template-columns:repeat(4,1fr);background:var(--deep);color:#fff;margin:64px 0 0}
.statband div{padding:30px 28px;border-right:1px solid rgba(255,255,255,.12)}
.statband div:last-child{border-right:0}
.statband strong{display:block;font-family:var(--serif);font-size:40px;font-weight:400;line-height:1;color:#fff}
.statband span{display:block;font-size:12.5px;color:rgba(255,255,255,.72);margin-top:10px;line-height:1.4}

/* graphics shared */
.gfx{margin:56px 0 0;background:var(--white);border:1px solid var(--line);padding:40px 40px 36px}
.gfx-h{margin-bottom:30px}
.gfx-h h3{font-family:var(--serif);font-size:30px;font-weight:400;line-height:1.15;color:var(--ink);margin:0;max-width:30ch}

/* process */
.steps{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin:0;padding:0;position:relative;max-width:none}
.rich .steps li{display:block;padding:0 18px 0 0;border:0;position:relative}
.rich .steps li::before{content:"";position:absolute;left:28px;right:0;top:27px;height:2px;width:auto;margin:0;background:repeating-linear-gradient(90deg,var(--gold) 0 6px,transparent 6px 11px)}
.rich .steps li:last-child::before{display:none}
.bub{position:relative;width:56px;height:56px;border-radius:50%;background:var(--grey);border:1.5px solid var(--gold);display:flex;align-items:center;justify-content:center;color:var(--maroon);margin-bottom:18px;z-index:1}
.bub .ic{width:24px;height:24px}
.bub b{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;background:var(--maroon);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;font-weight:700}
.steps li:last-child .bub{background:var(--maroon);border-color:var(--maroon);color:#fff}
.steps li:last-child .bub b{background:var(--gold)}
.steps h4{font-size:15.5px;font-weight:600;color:var(--ink);margin:0 0 6px}
.steps p{font-size:13.5px;line-height:1.55;color:var(--muted);margin:0}

/* income rhythm */
.rows{display:flex;flex-direction:column;gap:22px}
.row{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:end}
.rl strong{display:block;font-size:15px;color:var(--ink);font-weight:600}
.rl span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.4}
.bars{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;height:130px;align-items:end;border-bottom:1.5px solid var(--ink);padding-bottom:0}
.bar{position:relative;height:calc(var(--h)*100%);min-height:0}
.bar.g{background:var(--maroon)}
.bar.m{background:var(--gold)}
.bar.z{background:transparent;border:1.5px dashed #CDB7A3;border-bottom:0;height:34%}
.bar i{position:absolute;bottom:-22px;left:0;right:0;text-align:center;font-style:normal;font-size:11px;color:var(--muted)}
.bar em{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);white-space:nowrap;font-style:normal;font-size:10.5px;font-weight:600;color:var(--action);background:var(--white);padding:0 3px}
.rhythm .row+.row .bars{margin-top:8px}
.rhythm figcaption{margin-top:38px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px}

/* included tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.tile{background:var(--white);padding:24px 22px}
.tile .ic{width:28px;height:28px;color:var(--action);margin-bottom:14px}
.tile h4{font-size:15px;font-weight:600;color:var(--ink);margin:0 0 4px}
.tile p{font-size:13px;color:var(--muted);margin:0;line-height:1.5}

/* quote band */
.qband{position:relative;margin:64px 0 0;min-height:360px;display:flex;align-items:flex-end;overflow:hidden;background:var(--deep)}
.qband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.qband::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(43,12,15,.92) 0%,rgba(43,12,15,.55) 55%,rgba(43,12,15,.15) 100%)}
.qband blockquote{position:relative;z-index:1;margin:0;padding:52px 56px;max-width:60ch}
.qband p{font-family:var(--serif);font-size:30px;line-height:1.3;color:#fff;margin:0 0 16px;font-weight:400}
.qband p::before{content:"\201C";display:block;font-size:64px;line-height:.6;color:var(--gold);margin-bottom:10px}
.qband cite{font-style:normal;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}

/* mid CTA */
.midcta{margin:64px 0 0;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;background:var(--grey);border:1px solid var(--line);border-left:4px solid var(--maroon);padding:34px 40px}
.midcta h3{font-family:var(--serif);font-size:30px;font-weight:400;color:var(--ink);margin:0 0 8px;line-height:1.15}
.midcta p{font-size:15px;color:var(--body);margin:0;max-width:60ch}
.midcta-a{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.midcta .ph{font-size:13px;color:var(--muted)}
.midcta .ph:hover{color:var(--action)}

.rich .longform table,.rich table{margin:22px 0 8px}
.rich .updated{max-width:74ch}

@media (max-width:1000px){
  .snap,.split{grid-template-columns:1fr;gap:28px}
  .afig{position:static}.afig img{aspect-ratio:16/10}
  .statband{grid-template-columns:1fr 1fr}
  .statband div:nth-child(2){border-right:0}
  .statband div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.12)}
  .steps{grid-template-columns:1fr;gap:0}
  .rich .steps li{display:grid;grid-template-columns:56px 1fr;column-gap:18px;padding:0 0 24px}
  .rich .steps li::before{left:27px;top:56px;bottom:0;right:auto;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--gold) 0 6px,transparent 6px 11px)}
  .steps .bub{grid-row:span 2;margin:0}
  .steps h4{margin-top:6px}
  .tiles{grid-template-columns:1fr 1fr}
  .row{grid-template-columns:1fr;gap:10px}
  .midcta{grid-template-columns:1fr;gap:20px}
}
@media (max-width:620px){
  .gfx{padding:26px 18px 24px}
  .gfx-h h3,.midcta h3{font-size:24px}
  .statband strong{font-size:30px}
  .statband div{padding:22px 18px}
  .qband blockquote{padding:34px 24px}.qband p{font-size:22px}
  .bars{gap:3px;height:110px}
  .bar em{font-size:9px;transform:translateX(-50%) rotate(-50deg);transform-origin:center;bottom:calc(100% + 16px)}
  .midcta{padding:26px 22px}
}
@media (prefers-reduced-motion:reduce){.loc .pulse{animation:none}}
.loc .ld{stroke:var(--gold);stroke-width:1;fill:none;opacity:.8}

/* ── Featured film: Hopgarden House ── */
.film{background:var(--deep);color:#EFE3D6;padding:110px 0}
.film-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center;padding:0 var(--pad)}
.film-eyebrow{display:block;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.film h2{font-family:var(--serif);font-weight:400;font-size:clamp(38px,4.2vw,58px);line-height:1.04;color:var(--white);letter-spacing:.01em;margin-bottom:14px}
.film-loc{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#CDB9A7;margin-bottom:26px}
.film-loc span{margin:0 10px;color:var(--gold)}
.film-lead{font-size:16px;line-height:1.65;max-width:44ch;color:#E6D8CB;margin-bottom:30px}
.film-facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,237,218,.18);border-bottom:1px solid rgba(255,237,218,.18);margin-bottom:26px}
.film-facts div{padding:18px 16px;border-right:1px solid rgba(255,237,218,.18)}
.film-facts div:first-child{padding-left:0}
.film-facts div:last-child{border-right:0}
.film-facts strong{display:block;font-family:var(--serif);font-weight:400;font-size:36px;line-height:1;color:var(--white)}
.film-facts span{display:block;font-size:12px;color:#BFA894;margin-top:8px}
.film-facts div:first-child strong{color:var(--cream)}
.film-feat{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px}
.film-feat li{font-size:12px;letter-spacing:.04em;padding:7px 12px;border:1px solid rgba(156,121,97,.55);color:#E6D8CB}
.film-cta{background:var(--cream);color:var(--deep);border-color:var(--cream)}
.film-cta:hover{background:var(--white);border-color:var(--white);color:var(--deep)}
.film-cta span{margin-left:10px;padding-left:10px;border-left:1px solid rgba(43,12,15,.3);font-weight:500}
.film-frame{position:relative;margin:0}
.film-v{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#1a0709;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.film-frame::after{content:"";position:absolute;left:0;right:0;top:0;aspect-ratio:16/9;background:linear-gradient(180deg,rgba(43,12,15,0) 55%,rgba(43,12,15,.55) 100%);pointer-events:none;transition:opacity .3s}
.film-play{position:absolute;left:50%;top:0;margin-top:calc(28.125% - 42px);margin-left:-42px;width:84px;height:84px;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:rgba(43,12,15,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s,background .2s;z-index:2}
.film-play svg{width:30px;height:30px;fill:var(--white);margin-left:4px}
.film-play:hover{transform:scale(1.06);background:rgba(110,34,38,.85)}
.film-frame figcaption{display:flex;justify-content:space-between;gap:16px;font-size:12px;letter-spacing:.06em;color:#BFA894;padding-top:14px}
.film-frame figcaption span{color:var(--gold)}
.film.is-playing .film-play,.film.is-playing .film-frame::after{opacity:0;pointer-events:none}
@media (max-width:980px){
  .film{padding:80px 0}
  .film-in{grid-template-columns:1fr;gap:0;padding:0 24px}
  .film-copy{display:contents}
  .film-eyebrow{order:1}.film h2{order:2}.film-loc{order:3}
  .film-frame{order:4;margin:4px 0 32px}
  .film-lead{order:5;max-width:none}.film-facts{order:6}.film-feat{order:7}.film-cta{order:8;justify-self:start}
}
@media (max-width:560px){
  .film{padding:64px 0}
  .film-in{padding:0 16px}
  .film-facts{grid-template-columns:repeat(2,1fr)}
  .film-facts div{padding:14px 0 14px 14px}
  .film-facts div:nth-child(2){border-right:0}
  .film-facts div:nth-child(odd){padding-left:0}
  .film-facts div:nth-child(-n+2){border-bottom:1px solid rgba(255,237,218,.18)}
  .film-play{width:68px;height:68px;margin-left:-34px;margin-top:calc(28.125% - 34px)}
  .film-frame figcaption{flex-direction:column;gap:4px}
  .film-cta{width:100%;text-align:center;justify-self:stretch}
}

/* ── Hero: Hopgarden House film playing behind the copy and quote tool ── */
.hero.has-video>.wrap{position:relative}
.hero-media{position:absolute;inset:0;overflow:hidden;z-index:0;background:var(--deep)}
.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(32,8,11,.90) 0%,rgba(32,8,11,.78) 30%,rgba(32,8,11,.38) 62%,rgba(32,8,11,.50) 100%)}
.hero.has-video>.wrap>.grid{position:relative;z-index:1}
.hero.has-video .photo{margin-top:0}
.hero.has-video .photo>img,.hero.has-video .photo::after{display:none}
.hero.has-video h1{color:var(--white)}
.hero.has-video h1 .em{color:var(--cream)}
.hero.has-video .copy p{color:#E9DCD0}
.hero.has-video .promise{border-color:rgba(255,237,218,.22)}
.hero.has-video .promise .seal{color:var(--cream);border-color:var(--gold)}
.hero.has-video .promise .say{color:#D9C8B9}
.hero.has-video .promise .say strong{color:var(--white)}
.hero.has-video .copy .btn{background:var(--cream);border-color:var(--cream);color:var(--deep)}
.hero.has-video .copy .btn:hover{background:var(--white);border-color:var(--white)}
.hero.has-video .copy .btn.ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.75)}
.hero.has-video .copy .btn.ghost:hover{background:var(--white);color:var(--deep);border-color:var(--white)}
.hero-tag{position:absolute;right:var(--pad);bottom:26px;z-index:2;display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#E9DCD0}
.hero-tag i{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.6);transition:background .2s}
.hero-tag i svg{width:11px;height:11px;fill:var(--white);margin-left:2px}
.hero-tag b{font-weight:600;color:var(--white)}
.hero-tag>span{white-space:nowrap;display:inline}
.hero-tag>span b,.hero-tag>span span{display:inline;margin:0}
.hero-tag:hover i{background:var(--action);border-color:var(--action)}
@media (max-width:1280px){.hero-tag{right:40px}}
@media (max-width:1100px){
  .hero-media::after{background:linear-gradient(180deg,rgba(32,8,11,.72) 0%,rgba(32,8,11,.58) 40%,rgba(32,8,11,.42) 100%)}
  .hero.has-video .photo{padding-bottom:150px}
  .hero-tag{left:40px;right:auto;bottom:112px}
}
@media (max-width:720px){
  .hero-tag{left:20px;bottom:96px;font-size:10px;gap:10px}
  .hero-tag .loc{display:none}
}

/* Quote tool: short thank-you screen */
#quote .thanks{text-align:center;padding:26px 6px 0}
#quote .thanks .q{margin-top:6px}
#quote .thanks .sub{margin:12px auto 0;max-width:36ch;font-size:15px;line-height:1.6;color:var(--ink)}
#quote .thanks .sub2{margin:12px auto 0;max-width:38ch;font-size:13.5px;line-height:1.55;color:var(--muted)}
#quote .thanks .sub2 strong{color:var(--ink);font-weight:600;overflow-wrap:anywhere}
#quote .thanks .ref{margin-top:18px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}