:root{--p:#8C4121;--primary:#8C4121;--lk:#8C4121;--ink:#271811;--text:#271811;--a:#0F766E;--accent:#0F766E;--bg:#F9F5F3;--background:#F9F5F3;--band:#3D2314;--soft:#EEE3DE;--line:#D3CDCA;--muted:#625650;--r:4px;--btn-txt:#FFFFFF;--acc-dark:#63A6A1;--f1:'Josefin Sans',system-ui,sans-serif;--f2:'Mulish',system-ui,sans-serif;--wrap:min(1180px,92vw)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:120px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.65 var(--f2);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--lk)}
h1,h2,h3,h4{font-family:var(--f1);font-weight:700;line-height:1.08;margin:0 0 .6em;text-wrap:balance;}
h1{font-size:calc(clamp(2.2rem,4.6vw,4.1rem)*1)} h2{font-size:calc(clamp(1.5rem,2.6vw,2.25rem)*1)} h3{font-size:calc(1.2rem*1)}
p,li{text-wrap:pretty}
.wrap{width:var(--wrap);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:99}.skip:focus{left:8px}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.35rem;border-radius:var(--r);background:var(--lk);color:var(--btn-txt);text-decoration:none;font-weight:700;font-family:var(--f2);border:2px solid var(--lk);text-box:trim-both cap alphabetic;white-space:nowrap}
.btn.ghost{background:transparent;color:var(--lk)}
.on-dark .btn.ghost{color:#fff;border-color:#fff}
.eyebrow{display:inline-block;font:700 .78rem/1 var(--f2);letter-spacing:.14em;text-transform:uppercase;color:var(--lk);margin-bottom:1rem;text-box:trim-both cap alphabetic}
.on-dark .eyebrow{color:var(--acc-dark)}
.on-dark{background:var(--band);color:#F5F5F2} .on-dark a{color:#fff}
/* header */
.hdr{position:sticky;top:0;z-index:50;transition:box-shadow .3s}
.hdr-in{width:var(--wrap);margin-inline:auto;display:flex;align-items:center;gap:1.5rem;min-height:88px}
.logo{position:relative;display:block;height:64px;flex:none}
.logo img{height:64px;width:auto;transition:opacity .35s ease}
.logo .lg-d{position:absolute;left:0;top:0}
.hdr .nav{display:flex;gap:clamp(.9rem,1.6vw,1.6rem);align-items:center;margin-left:auto}
.hdr .nav a{white-space:nowrap;text-decoration:none;font-weight:600;font-size:.98rem;color:inherit;padding:.3rem 0;border-bottom:2px solid transparent}
.hdr .nav a[aria-current]{border-bottom-color:var(--a)}
.hdr .nav a.btn{color:var(--btn-txt);padding:.7rem 1.1rem;border-bottom:2px solid var(--lk)}
.menu-btn{display:none;margin-left:auto;background:none;border:2px solid currentColor;color:inherit;border-radius:var(--r);padding:.55rem .8rem;font:700 .9rem var(--f2)}
.hdr{background:#3D2314;color:#F5F5F2;--hdr-panel:#3D2314;--hdr-panel-fg:#F5F5F2;box-shadow:none}
.hdr .lg-l{opacity:0} .hdr .lg-d{opacity:1}
/* 1111a steady header (Eric 1110k): same at-rest colours and logo on scroll; only a soft shadow */
.hdr.scrolled{box-shadow:0 6px 24px rgba(0,0,0,.22)}
.hdr.scrolled .lg-l{opacity:0} .hdr.scrolled .lg-d{opacity:1}
.hdr.scrolled .nav a.btn{color:var(--btn-txt)}
.util{background:#2E1A0F;color:#EDEDE8;font-size:.86rem} .util .wrap{display:flex;justify-content:space-between;gap:1rem;padding:.45rem 0} .util a{color:#fff}
@media (max-width:600px){.util span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .util a{white-space:nowrap}}
@media (prefers-reduced-motion:reduce){.logo img{transition:none}}
.hdr-in{display:grid;grid-template-columns:1fr auto 1fr;gap:1.6rem}.hdr .nav{margin:0}.hdr .nav.l{justify-content:flex-end}.hdr .nav.r{justify-content:flex-start}
.hdr .logo{grid-column:2;grid-row:1}.hdr .nav.l{grid-column:1;grid-row:1}.hdr .nav.r{grid-column:3;grid-row:1}
@media (max-width:1180px){.hdr-in{display:flex}}
@media (max-width:1180px){.menu-btn{display:block}.hdr .nav{display:none}
.hdr.open .navs{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;width:100%;background:var(--hdr-panel);color:var(--hdr-panel-fg);padding:1rem 4vw 1.4rem;gap:.2rem;z-index:2;box-shadow:0 14px 32px rgba(0,0,0,.2)}
.hdr.open .navs .nav{display:flex;flex-direction:column;align-items:flex-start;margin:0;gap:.7rem}
.hdr.open .navs .logo{display:none}
.hdr-in{position:static}}
@media (max-width:1199px){body{padding-left:0}}
@media (max-width:700px){.hdr-in{min-height:72px}.logo,.logo img{height:48px}}
@media (max-width:360px){.logo,.logo img{height:40px}}
.navs{display:contents}

.hero{position:relative}
.hero h1{max-width:18ch}
.hero .lede{font-size:clamp(1.08rem,1.4vw,1.3rem);max-width:56ch}
.hero .acts{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.hero-img{width:100%;height:100%;object-fit:cover}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2rem}
.stats div{background:var(--bg);padding:1rem 1.1rem} .stats b{display:block;font:700 1.5rem/1.1 var(--f1);color:var(--lk);text-box:trim-both cap alphabetic;margin-bottom:.4rem} .stats span{font-size:.9rem;color:var(--muted)}
.on-dark .stats{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.15)} .on-dark .stats div{background:var(--band)} .on-dark .stats b{color:var(--acc-dark)} .on-dark .stats span{color:#D9D9D2}
.crumbs{font-size:.85rem;margin-bottom:1rem;color:var(--muted)} .crumbs a{color:inherit} .on-dark .crumbs{color:#CFCFC8}
.edge{clip-path:polygon(0 0,100% 0,100% 95%,0 100%)}
@supports (clip-path:shape(from 0 0,line to 1px 1px)){.edge{clip-path:shape(from 0 0, line to 100% 0, line to 100% calc(100% - clamp(16px,3.5vw,48px)), line to 0 100%, close)}}
.hero{min-height:min(84vh,780px);display:flex;align-items:flex-end;color:#fff;isolation:isolate}.hero .pic{position:absolute;inset:0;z-index:-1}.hero .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.22) 50%,rgba(0,0,0,0) 78%),linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.25) 40%,#3D2314EE 100%)}
.hero .txt{width:var(--wrap);margin-inline:auto;padding:clamp(2rem,5vw,4rem) 0 max(clamp(2.5rem,5vw,4rem),7rem)}.hero .eyebrow{color:#fff;background:var(--band);padding:.4em .72em;border-radius:999px;text-shadow:none}.hero h1{color:#fff;max-width:16ch}.hero .lede{color:#F1F1EC}
.hero .btn.ghost{color:#fff;border-color:#fff}

.phead{padding:clamp(2rem,4vw,3.5rem) 0 0}
.phead .g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.phead .pic img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.phead .lede{font-size:1.15rem;max-width:58ch}
.phead.plain .g{grid-template-columns:1fr}
@media (max-width:900px){.phead .g{grid-template-columns:1fr}}
.phead .g{grid-template-columns:1.1fr 1fr}.phead .pic img{aspect-ratio:5/4;border-radius:999px 999px var(--r) var(--r)}
.phead.plain{text-align:center}.phead.plain h1,.phead.plain .lede{margin-inline:auto}
@media (max-width:900px){.phead .g{grid-template-columns:1fr}}

main section{padding:clamp(2.5rem,5vw,4.5rem) 0}
.prose{max-width:72ch} .prose h2{margin-top:0}
.prose ul{padding-left:1.15rem} .prose li{margin:.3rem 0} .prose li::marker{color:var(--lk)}
.body{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(2rem,4vw,4rem);align-items:start}
.body .aside-col{position:sticky;top:110px;display:grid;gap:1.2rem}
.spec-sheet{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden} .spec-sheet h3{margin:0;padding:.9rem 1.1rem;background:var(--band);color:#fff;font-size:1rem}
.spec-sheet dl{margin:0;padding:.4rem 1.1rem 1rem} .spec-sheet dt{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-top:.7rem} .spec-sheet dd{margin:.1rem 0 0;font-weight:600}
.pull-aside{font:700 1.35rem/1.25 var(--f1);color:var(--lk);border-left:4px solid var(--a);padding:.4rem 0 .4rem 1rem;margin:0}
.sec{padding:0 0 2.2rem;margin:0 0 2.2rem;border-bottom:1px solid var(--line)} .sec:last-child{border-bottom:0}
@media (max-width:980px){.body{grid-template-columns:1fr}.body .aside-col{position:static}}
.body{grid-template-columns:minmax(0,1fr) 300px}.secs .sec:first-child p:first-of-type::first-letter{float:left;font:600 4.2rem/.8 var(--f1);padding:.3rem .6rem 0 0;color:var(--p)}
.sec h2{font-size:clamp(1.5rem,2.4vw,2.1rem)}.sec{border-bottom:0}.sec h2::after{content:'';display:block;width:56px;height:2px;background:#0F766E;margin-top:.8rem}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.4rem;max-width:1180px}
@media (min-width:1000px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.1)}
.card .cm{height:200px;overflow:hidden} .card .cm img{width:100%;height:100%;object-fit:cover}
.card .cb{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.35rem;flex:1} .card h3{font-size:1.15rem;margin:0} .card p{margin:0;font-size:.95rem;color:var(--muted)}
.card .go{margin-top:auto;padding-top:.5rem;font-weight:700;color:var(--lk);font-size:.92rem}
@media (max-width:700px){.card .cm{height:150px}}
.card{background:var(--band);color:#fff;border:0}.card p{color:#DADAD4}.card .go{color:var(--acc-dark)}.card h3{color:#fff}

.rows{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:900px){.rows{grid-template-columns:1fr 1fr}}
.row{display:grid;grid-template-columns:96px 1fr;gap:1rem;align-items:center;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:.7rem}
.row img{width:96px;height:72px;object-fit:cover;border-radius:calc(var(--r)/2)} .row b{display:block;font-family:var(--f1);font-size:1.05rem;line-height:1.2} .row span{font-size:.9rem;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.band{background:var(--band);color:#F3F3EE} .band h2{color:#fff}
.split2{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:center}
.split2 .pic img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.split2.bleed{width:min(1360px,100%);margin-inline:auto} 
@media (max-width:900px){.split2{grid-template-columns:1fr}}
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;margin-top:1.5rem} .pillars div{border-top:3px solid var(--a);padding-top:.9rem} .pillars b{display:block;font-family:var(--f1);font-size:1.15rem;margin-bottom:.3rem}
.cta{text-align:center;padding-bottom:7rem} .cta h2{max-width:24ch;margin-inline:auto} .cta p{max-width:56ch;margin:0 auto 1.4rem}
.faq details{border-bottom:1px solid var(--line);padding:1rem 0} .faq summary{cursor:pointer;font-weight:700;font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;gap:1rem} .faq summary::after{content:'+';color:var(--lk);font-weight:800} .faq details[open] summary::after{content:'\2212'} .faq summary::-webkit-details-marker{display:none}
.faq details p{margin:.7rem 0 0}
@media (prefers-reduced-motion:no-preference){.faq details::details-content{opacity:0;translate:0 4px;transition:opacity .28s ease,translate .28s ease,content-visibility .28s allow-discrete}.faq details[open]::details-content{opacity:1;translate:0 0}
@supports (interpolate-size:allow-keywords){:root{interpolate-size:allow-keywords}.faq details::details-content{block-size:0;overflow:clip;transition:opacity .28s ease,translate .28s ease,block-size .3s ease,content-visibility .3s allow-discrete}.faq details[open]::details-content{block-size:auto}}}
.rvwrap{background:var(--soft)} .rvwrap h2{margin-bottom:.2rem} .rvwrap .sub{margin:0 0 1.5rem;color:var(--ink)}
.amr-root{--amr-accent:var(--lk);--amr-bg:#fff;--amr-text:var(--ink);--amr-muted:var(--muted);--amr-border:var(--line);--amr-radius:var(--r);font-family:var(--f2)}
table.pl{width:100%;border-collapse:collapse;background:#fff;font-size:.95rem} table.pl caption{text-align:left;font-weight:700;padding:.6rem 0;font-family:var(--f1)} table.pl th,table.pl td{padding:.75rem .8rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top} table.pl th{background:var(--band);color:#fff;font-weight:600} table.pl td:last-child{font-weight:700;white-space:nowrap;color:var(--lk)}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.deals{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.2rem}
.deal{background:#fff;border:2px solid var(--ink);border-radius:var(--r);padding:1.2rem;display:flex;flex-direction:column;gap:.45rem;position:relative}
.deal .gr{align-self:flex-start;background:var(--a);color:var(--ink);font:700 .75rem/1 var(--f2);padding:.4rem .6rem;border-radius:999px;text-box:trim-both cap alphabetic} .deal h3{font-size:1.08rem;margin:0} .deal .pr{display:flex;gap:.7rem;align-items:baseline} .deal .now{font:800 1.5rem var(--f1);color:var(--lk)} .deal .was{text-decoration:line-through;color:var(--muted)}
.deal .meta{display:flex;justify-content:space-between;font-size:.88rem;border-top:1px dashed var(--line);padding-top:.5rem;margin-top:auto} .deal .meta b{color:var(--ink)}
.tool{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.5rem} .tool label{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--line)} .tool .tot{font:800 1.6rem var(--f1);color:var(--lk);margin-top:1rem}
.tool input[type=number]{width:9rem;padding:.5rem;border:1px solid var(--line);border-radius:var(--r);font:inherit}
/* footer */
.ftr{background:var(--band);color:#E8E8E2;padding:3.5rem 0 7rem;margin-top:0} .ftr a{color:#fff;text-decoration:none} .ftr a:hover{text-decoration:underline}
.ftr .g{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem} .ftr h4{font-size:.95rem;letter-spacing:.08em;text-transform:uppercase;color:var(--acc-dark);margin-bottom:.9rem} .ftr nav{display:grid;gap:.5rem}
.ftr .flogo img{height:64px;width:auto} .ftr .fine{border-top:1px solid rgba(255,255,255,.15);margin-top:2.5rem;padding-top:1.2rem;font-size:.86rem;color:#CFCFC8}
@media (max-width:900px){.ftr .g{grid-template-columns:1fr 1fr}.ftr .g>div:first-child{grid-column:1/-1}}
@media (max-width:480px){.ftr .g{grid-template-columns:1fr}}
/* motion */
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}}
@supports ((animation-timeline:view()) and (animation-range:entry)){@media (prefers-reduced-motion:no-preference){
.rv-a{animation:rvA linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
.rv-b{animation:rvB linear both;animation-timeline:view();animation-range:entry 10% cover 30%}
.rv-c{animation:rvC linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
.cards>*,.rows>*,.deals>*{animation:rvA linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
@supports (width:calc(sibling-index() * 1px)){.cards>*,.rows>*,.deals>*{animation-range:entry min(calc((sibling-index() - 1) * 6%),30%) entry min(calc(60% + (sibling-index() - 1) * 6%),95%)}}
.hero .pic img,.phead .pic img{animation:kb linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
}}
@keyframes rvA{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes rvB{from{opacity:.2;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes rvC{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.07) translateY(2%)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* fin1109 */@media (max-width:980px){.body{grid-template-columns:minmax(0,1fr)}}
/* 1111a: 1110b/f/g widget-clearance fills removed (Eric no-blank rule, 1110m). 3.js untouched. */

/* 1110d: 320px first-screen compaction so page-head text and hero CTAs clear the 3.js corners. Do not hide, move or restyle 3.js. */
@media (max-width:360px){
h1{font-size:1.62rem!important;line-height:1.12}
.lede,.phead .lede,.hero .lede,.hero .txt p{font-size:.93rem;line-height:1.5}
.phead,.phead.plain{padding-top:1.2rem}
.hero .txt{padding-top:1.1rem}
.eyebrow{margin-bottom:.6rem}
.crumbs,.bc{margin-bottom:.4rem}
}
/* 1111a: hero photo zoom must not widen the page */
.hero .pic{overflow:hidden}
/* 1110p: no orphan card in a 3-col grid */
@media (min-width:700px){.cards:has(> :nth-child(4):last-child),.cards:has(> :nth-child(10):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:601px){.sec:not(.pf-sec)>*{grid-column:2}}
/* 1111b: Poppy 11 Nov — four hero stats as one desktop row and a clean 2x2 on small screens (was auto-fit 3+1 with an empty bordered cell). Three-card .rows ('Also worth a look') use three columns from 900px so the last card does not leave a half-width hole. One- and two-card .cards hubs drop the forced 3-col so they do not sit beside empty tracks. No widget-clearance padding. 3.js untouched. Steady header unchanged. */
.hero .stats,.stats:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.hero .stats,.stats:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.rows:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1000px){
.cards:has(> :nth-child(1):last-child){grid-template-columns:minmax(0,1fr);max-width:26rem}
.cards:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* 1111c: Poppy 11 Nov re-Proof — 1- and 2-card .cards rules apply above the single-column breakpoint, not only from 1000px, so 900px (and any mid width) never leaves an empty auto-fill track. Contact form submit gets 6rem clear space below the button at max-width 600px only, so it can be scrolled above the 3.js widgets. Form section only; no page-wide clearance. Widgets and steady header untouched. */
.cards:has(> :nth-child(1):last-child){grid-template-columns:minmax(0,1fr);max-width:26rem}
@media (min-width:700px){.cards:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.pf-sec #pfForm .pf-actions{padding-bottom:6rem}}

/* 1111b: five-card .cards bands fill both rows (3 then 2 wider cards) instead of 3+2 with an empty slot. */
@media (min-width:700px){.cards:has(> :nth-child(5):last-child){grid-template-columns:repeat(6,minmax(0,1fr))}
.cards:has(> :nth-child(5):last-child)>*{grid-column:span 2}
.cards:has(> :nth-child(5):last-child)>:nth-child(n+4){grid-column:span 3}}

/* 1111g: first-screen hero CTAs must clear the 3.js chips at 390 and 320.
   Compact the hero photo, type and act spacing so the buttons sit above
   the corners. Do not hide, move or restyle 3.js. No large blank fills
   (the inset 7rem padding-bottom sits below the fold when copy is long
   and does not lift the CTAs). */
@media (max-width:420px){
.hero h1{font-size:clamp(1.52rem,6.8vw,1.95rem);line-height:1.12}
.hero .lede,.hero .txt p{font-size:.9rem;line-height:1.42}
.hero .acts{margin-top:1rem;gap:.5rem}
.hero .acts .btn{padding:.68rem .9rem}
.hero .eyebrow{margin-bottom:.45rem}
/* inset hero: shorter photo and tighter card padding so a long heading
   still leaves the act row above the chips at 390 and 320 */
.hero .frame img{height:100px}
.hero .frame .txt{padding-top:1.1rem;padding-bottom:1.25rem}
}
@media (max-width:330px){
/* editorial / in-flow hero photo only at 320. Leave 390 alone: on
   reliable-generator the buttons already sit below the first screen
   there. Split heroes use an absolutely positioned image, so max-height
   does not shrink those frames. */
.hero .pic > img.hero-img{aspect-ratio:16/9;max-height:190px}
.hero .acts{margin-top:.85rem}
}

/* 1111rv: review section follows the site theme colour (band -> 50% primary mix keeps white text >=5:1 even on yellow primaries) */
.rvwrap{background:var(--band) linear-gradient(135deg,var(--band) 0%,color-mix(in srgb,var(--p) 50%,var(--band)) 100%);color:#fff}
.rvwrap h2{color:#fff}.rvwrap .sub{color:rgba(255,255,255,.82)}
.rvwrap .amr-root{--amr-bg:#fff;--amr-card-border:color-mix(in srgb,var(--p) 30%,#fff);--amr-text:var(--ink);--amr-muted:var(--muted);--amr-link:var(--lk)}
.rvwrap .amr-card{border-top:4px solid var(--p);box-shadow:0 10px 28px rgba(0,0,0,.18)}
.rvwrap a:not(.amr-link){color:#fff}

/* 1112b: close the blank band under the page-head / arch hero. 7rem was leftover
   widget-clearance in document flow. 3.js is position:fixed and is not hidden,
   moved or restyled. Footer, .cta and .pf-sec keep their 7rem clearance. The
   next section's padding is the normal gap to the first body text. */
.phead, .phead.plain { padding-bottom: 0; }
/* 1112b: reviewer initials fallback must be >=4.5:1 (muted on 30% primary mix failed).
   Band + white follows the site theme colour and stays well above AA. */
.rvwrap .amr-photo-fallback { background: var(--band); color: #fff; }
/* 1112b: town/label over a fullbleed or poster photo uses a solid band chip so
   text meets WCAG AA 4.5:1 on any photograph. */
.hero.fullbleed .eyebrow, .hero.poster .eyebrow {
  color: #fff; background: var(--band); padding: .4em .72em; border-radius: 999px; text-shadow: none;
}

/* 1112b: inset town label can fall below 4.5:1 when the 92% band panel lets the photo through (sellthose Midrand at 390 was 4.0:1). White on the dark panel stays AA. */
.hero .frame .txt .eyebrow { color: #fff; }

/* 1112d: first-screen hero CTAs must clear the 3.js chips at any
   viewport height, for every hero type (split, deals, inset,
   editorial, poster, fullbleed, stacked, grid, ledger), without
   pushing the heading under the in-flow sticky header. The 1112c
   rules only covered poster/fullbleed; split homes (dialysismachine
   Proof FAIL 12 Nov 2026) still used min-height:min(78vh,720px) and
   7rem text padding, so the act row sat at a nearly constant y and
   hit the chips on short real-browser viewports (1280x720, 1280x650,
   1366x657, 1536x730, 320x568). Do not hide, move or restyle 3.js.
   The Ask AI chip is a 56x56 button at left 20-76px, bottom 24px;
   WhatsApp is ~54px tall at the bottom-right, bottom 24px.
   padding-bottom is chip height + bottom offset + 24px = 104px so
   the act row ends at least 24px above the nearest chip top.
   Height-keyed clamps shrink type, padding and stats on short
   viewports so that padding stays on the first screen.
   min-height (not max-height) lets the hero grow downward. */

/* ---- poster / fullbleed (kept from 1112c, still min-height not max-height) ---- */
@media (min-width: 421px) {
  .hero.poster,
  .hero.fullbleed {
    align-items: flex-start;
    padding-top: clamp(0.45rem, 3.2vh, 4rem);
    padding-bottom: 0;
    min-height: min(84vh, 780px, calc(100svh - 9rem));
    max-height: none;
  }
  .hero.poster .txt,
  .hero.fullbleed .txt {
    padding-top: clamp(0.35rem, 1.8vh, 2.5rem);
    padding-bottom: calc(56px + 24px + 24px);
  }

  /* split / deals / editorial: in-flow .pic + .txt columns.
     Exclude poster/fullbleed — those also have > .txt and > .pic, but
     their photo is position:absolute; inset:0 on the hero. */
  .hero:not(.poster):not(.fullbleed):has(> .txt):has(> .pic) {
    align-items: start;
    min-height: min(78vh, 720px, calc(100svh - 8rem));
    padding-bottom: 0;
    max-height: none;
  }
  .hero:not(.poster):not(.fullbleed):has(> .txt):has(> .pic) .txt {
    padding-top: clamp(0.7rem, 2.2vh, 2.5rem);
    padding-bottom: calc(56px + 24px + 24px);
  }

  /* inset: photo frame with overlaid / stacked card */
  .hero .frame {
    align-items: flex-start;
    min-height: min(560px, calc(100svh - 9rem));
    max-height: none;
  }
  .hero .frame .txt {
    padding-top: clamp(0.8rem, 2vh, 2.2rem);
    padding-bottom: calc(56px + 24px + 24px);
  }

  /* stacked / grid / ledger typographic heroes */
  .hero:not(.poster):not(.fullbleed):not(:has(> .pic)):not(:has(.frame)) {
    padding-top: clamp(0.8rem, 2.8vh, 3.5rem);
    padding-bottom: 0;
  }
}

/* 1112d pic fix: split/editorial .pic img is position:absolute; inset:0
   with height:100%. align-items:start plus min-height:0 let the column
   collapse (img rendered 624x0, empty navy half on dialysismachine).
   Stretch the column to the grid row and keep a real min-height so the
   absolutely positioned image has a definite box. Two-column breakpoint
   only (stacked layout starts at max-width 900px). */
@media (min-width: 901px) {
  .hero:not(.poster):not(.fullbleed):has(> .txt):has(> .pic) .pic {
    align-self: stretch;
    position: relative;
    min-height: 340px;
  }
  .hero:not(.poster):not(.fullbleed):has(> .txt):has(> .pic) .pic > img.hero-img,
  .hero:not(.poster):not(.fullbleed):has(> .txt):has(> .pic) .pic img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
  }
}

/* Shared type and spacing steps for every hero type */
@media (min-width: 421px) and (max-height: 960px) {
  .hero h1,
  .hero .txt h1 {
    font-size: clamp(2.05rem, 5.4vh, 3.2rem);
    line-height: 1.06;
    max-width: 18ch;
    margin-bottom: clamp(0.3rem, 1.2vh, 0.55rem);
  }
  .hero .lede,
  .hero .txt p {
    font-size: clamp(0.95rem, 1.7vh, 1.12rem);
    line-height: 1.4;
  }
  .hero .acts {
    margin-top: clamp(0.55rem, 1.5vh, 1.1rem);
  }
  .hero .eyebrow {
    margin-bottom: 0.35rem;
  }
  .hero .stats {
    margin-top: 0.85rem;
  }
  .hero .stats div {
    padding: 0.65rem 0.8rem;
  }
  .hero .stats b {
    font-size: 1.2rem;
    margin-bottom: 0.2rem;
  }
}
@media (min-width: 421px) and (max-height: 720px) {
  .hero.poster,
  .hero.fullbleed,
  .hero:not(.poster):not(.fullbleed):has(> .txt):has(> .pic) {
    padding-top: 0.4rem;
  }
  .hero.poster .txt,
  .hero.fullbleed .txt,
  .hero:not(.poster):not(.fullbleed):has(> .txt):has(> .pic) .txt,
  .hero .frame .txt {
    padding-top: 0.35rem;
  }
  .hero h1,
  .hero .txt h1 {
    font-size: clamp(1.6rem, 4.4vh, 2.15rem);
    line-height: 1.06;
    max-width: 20ch;
    margin-bottom: 0.28rem;
  }
  .hero .lede,
  .hero .txt p {
    font-size: clamp(0.86rem, 1.5vh, 1rem);
    line-height: 1.35;
  }
  .hero .acts {
    margin-top: 0.5rem;
  }
  .hero .acts .btn {
    padding: 0.55rem 0.9rem;
  }
  .hero .stats {
    margin-top: 0.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hero .stats div {
    padding: 0.45rem 0.6rem;
  }
  .hero .stats b {
    font-size: 1.05rem;
    margin-bottom: 0.1rem;
  }
  .hero .stats span {
    font-size: 0.8rem;
  }
}
@media (min-width: 421px) and (max-height: 600px) {
  .hero h1,
  .hero .txt h1 {
    font-size: clamp(1.4rem, 3.8vh, 1.8rem);
    line-height: 1.05;
    max-width: 22ch;
    margin-bottom: 0.18rem;
  }
  .hero .lede,
  .hero .txt p {
    font-size: 0.84rem;
    line-height: 1.3;
  }
  .hero .acts {
    margin-top: 0.35rem;
  }
  .hero .stats {
    margin-top: 0.35rem;
  }
  .hero .stats div {
    padding: 0.35rem 0.5rem;
  }
}

/* Tall phones (390x844): stacked editorial/split photos stay at their
   aspect-ratio height (~320px) unless capped, so the second CTA can land
   on the Ask AI chip. Do not cap poster/fullbleed fills. Tighter caps
   below still apply when the viewport is also short. */
@media (max-width: 420px) {
  .hero:not(.poster):not(.fullbleed):has(> .txt):has(> .pic) {
    align-items: flex-start;
    padding-top: 0.35rem;
  }
  .hero:not(.poster):not(.fullbleed):has(> .txt):has(> .pic) .pic {
    position: relative;
    min-height: 160px;
    height: 160px;
    max-height: 160px;
  }
  .hero:not(.poster):not(.fullbleed):has(> .txt):has(> .pic) .pic > img.hero-img,
  .hero:not(.poster):not(.fullbleed):has(> .txt):has(> .pic) .pic img {
    max-height: 160px;
    height: 160px;
    object-fit: cover;
  }
}

/* Short mobile, every hero type. 1111g already compacts type at max-width
   420; this also shortens stacked photos and keeps 104px act clearance
   when the viewport is short (320x568). */
@media (max-width: 420px) and (max-height: 720px) {
  .hero.poster,
  .hero.fullbleed {
    align-items: flex-start;
    padding-top: 0.25rem;
    padding-bottom: 0;
    min-height: min(70vh, calc(100svh - 7rem));
    max-height: none;
  }
  .hero:not(.poster):not(.fullbleed):has(> .txt):has(> .pic),
  .hero:not(.poster):not(.fullbleed) {
    align-items: flex-start;
    padding-top: 0.25rem;
    padding-bottom: 0;
    min-height: 0;
    max-height: none;
  }
  .hero .txt,
  .hero .frame .txt {
    padding-top: 0.25rem;
    padding-bottom: calc(56px + 24px + 24px);
  }
  .hero h1,
  .hero .txt h1 {
    font-size: 1.28rem;
    line-height: 1.08;
    margin-bottom: 0.2rem;
  }
  .hero .lede,
  .hero .txt p {
    font-size: 0.78rem;
    line-height: 1.28;
  }
  .hero .acts {
    margin-top: 0.35rem;
    gap: 0.35rem;
  }
  .hero .acts .btn {
    padding: 0.4rem 0.55rem;
    font-size: 0.84rem;
  }
  .hero .stats {
    margin-top: 0.3rem;
  }
  /* Shrink stacked column / inset photos only. Poster and fullbleed
     photos are absolute fills of the hero — do not cap them at 72px
     or zero the .pic min-height (that would leave an empty hero).
     Give split .pic a real height so the absolute img can paint. */
  .hero:not(.poster):not(.fullbleed):has(> .txt):has(> .pic) .pic {
    position: relative;
    min-height: 72px;
    height: 72px;
  }
  .hero:not(.poster):not(.fullbleed):has(> .txt):has(> .pic) .pic > img.hero-img,
  .hero:not(.poster):not(.fullbleed):has(> .txt):has(> .pic) .pic img,
  .hero .frame img {
    max-height: 72px;
    height: 72px;
    object-fit: cover;
  }
  .hero .frame {
    min-height: 0;
  }
  .hero .frame img {
    position: relative;
    height: 72px;
    max-height: 72px;
  }
}
@media (max-width: 420px) and (max-height: 600px) {
  .hero h1,
  .hero .txt h1 {
    font-size: 1.15rem !important;
    line-height: 1.08;
    margin-bottom: 0.15rem;
  }
  .hero .lede,
  .hero .txt p {
    font-size: 0.74rem !important;
    line-height: 1.25;
  }
  .hero .txt,
  .hero .frame .txt {
    padding-top: 0.2rem;
    padding-bottom: calc(56px + 24px + 24px);
  }
  .hero:not(.poster):not(.fullbleed):has(> .txt):has(> .pic) .pic {
    min-height: 52px !important;
    height: 52px !important;
  }
  .hero:not(.poster):not(.fullbleed):has(> .txt):has(> .pic) .pic > img.hero-img,
  .hero:not(.poster):not(.fullbleed):has(> .txt):has(> .pic) .pic img,
  .hero .frame img {
    max-height: 52px !important;
    height: 52px !important;
  }
  .hero .acts {
    margin-top: 0.25rem;
  }
  .hero .acts .btn {
    padding: 0.32rem 0.45rem;
    font-size: 0.78rem;
  }
}

/* Inner-page and contact .phead photo columns. The 1112d contact compact
   rules used to target every .phead, so at 1280x650 the right-hand photo
   collapsed to ~536x48 (and ~536x208 at 1280x800) on inner pages and on
   contact (dialysissa, africaexhibitions). Give every page-head photo
   column a real height and never cap the image on desktop. The img stays
   able to honor the skin's aspect-ratio (in-flow) so photos cannot shrink
   below their pre-1112d box; stretch fills a taller text column.
   Contact form/chip clearance is kept by compacting type, padding and
   the intro column — not by shrinking the photo. */
@media (min-width: 901px) {
  .phead .g {
    align-items: stretch;
  }
  .phead .pic {
    align-self: stretch;
    position: relative;
    min-height: 300px;
  }
  .phead .pic img {
    max-height: none !important;
    min-height: 300px;
    width: 100%;
    object-fit: cover;
  }
}

/* On short desktops a restored ~428px contact photo leaves the enquiry
   heading/fields sitting on the chips (the same first-screen overlap
   pre-1112d had). Do not shrink the photo. Instead grow the contact
   page-head to fill the first screen so the form starts below the fold;
   the photo column stretches and covers it. Taller than pre-1112d is
   fine; shorter is not. */
@media (min-width: 901px) and (max-height: 900px) {
  body:has(.pf-sec) .phead {
    box-sizing: border-box;
    min-height: 100svh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }
  body:has(.pf-sec) .phead > .wrap {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
  }
  body:has(.pf-sec) .phead .g {
    flex: 1 1 auto;
    width: 100%;
    align-items: stretch;
    min-height: 100%;
  }
  body:has(.pf-sec) .phead .pic {
    position: relative;
    align-self: stretch;
    min-height: 428px;
    height: auto;
  }
  body:has(.pf-sec) .phead .pic img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none !important;
    min-height: 0;
    object-fit: cover;
    aspect-ratio: auto;
  }
}

/* Contact form clearance on short viewports: compact .phead type and
   padding, and the intro column, so first-screen fields stay above the
   chips when they fit. Do not cap .phead photos (see the 901px block).
   Padding-bottom on the form section is chip height + offset + 24px;
   do not move or restyle 3.js. */
@media (min-width: 421px) and (max-height: 900px) {
  body:has(.pf-sec) .phead .txt {
    padding-top: clamp(0.7rem, 2vh, 1.6rem);
    padding-bottom: 0.8rem;
  }
  body:has(.pf-sec) .phead h1 {
    font-size: clamp(1.7rem, 4.2vh, 2.7rem);
    line-height: 1.08;
    margin-bottom: 0.35rem;
  }
  body:has(.pf-sec) .phead .lede {
    font-size: clamp(0.92rem, 1.5vh, 1.08rem);
    line-height: 1.4;
  }
  body:has(.pf-sec) .phead {
    padding-bottom: 0;
  }
  .pf-sec {
    padding-top: 1.25rem;
    padding-bottom: max(7rem, calc(56px + 24px + 24px));
  }
}
@media (min-width: 421px) and (max-height: 800px) {
  body:has(.pf-sec) .phead .txt {
    padding-top: 0.45rem;
    padding-bottom: 0.35rem;
  }
  body:has(.pf-sec) .phead h1 {
    font-size: 1.45rem;
    line-height: 1.08;
    margin-bottom: 0.18rem;
  }
  body:has(.pf-sec) .phead .lede {
    font-size: 0.86rem;
    line-height: 1.3;
    margin-bottom: 0;
  }
  body:has(.pf-sec) .phead .eyebrow,
  body:has(.pf-sec) .phead .crumbs {
    margin-bottom: 0.15rem;
  }
  .pf-sec {
    padding-top: 0.6rem;
    padding-bottom: max(7rem, calc(56px + 24px + 24px));
  }
}
@media (min-width: 421px) and (max-height: 680px) {
  body:has(.pf-sec) .phead .txt {
    padding-top: 0.2rem;
    padding-bottom: 0.1rem;
  }
  body:has(.pf-sec) .phead h1 {
    font-size: 1.15rem;
    line-height: 1.08;
    margin-bottom: 0.08rem;
  }
  body:has(.pf-sec) .phead .lede {
    font-size: 0.78rem;
    line-height: 1.22;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .pf-sec {
    padding-top: 0.3rem;
    padding-bottom: max(7rem, calc(56px + 24px + 24px));
  }
  /* Keep the intro column above the Ask AI chip on short desktops.
     Bottom padding alone cannot lift a long intro, so cap its type
     and lines; the full page still scrolls. */
  .pf-intro {
    padding-bottom: calc(56px + 24px + 24px);
  }
  .pf-intro p,
  .pf-intro li {
    font-size: 0.85rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
@media (max-width: 420px) and (max-height: 700px) {
  body:has(.pf-sec) .phead h1 {
    font-size: 1.45rem;
    margin-bottom: 0.3rem;
  }
  .pf-sec {
    padding-top: 1rem;
    padding-bottom: max(7rem, calc(56px + 24px + 24px));
  }
}

/* Mobile contact: a restored page-head photo can leave the enquiry
   heading/intro peeking under the chips at 390x844. Fill the first
   screen so the form starts below the fold; the photo grows to cover
   the leftover column (never shrink it). */
@media (max-width: 900px) and (max-height: 900px) {
  body:has(.pf-sec) .phead {
    box-sizing: border-box;
    min-height: 100svh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }
  body:has(.pf-sec) .phead > .wrap {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
  }
  body:has(.pf-sec) .phead .g {
    flex: 1 1 auto;
    width: 100%;
    min-height: 100%;
    align-items: stretch;
    grid-template-rows: auto 1fr;
  }
  body:has(.pf-sec) .phead .pic {
    position: relative;
    min-height: 140px;
    height: auto;
  }
  body:has(.pf-sec) .phead .pic img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none !important;
    min-height: 0;
    object-fit: cover;
    aspect-ratio: auto;
  }
}