/* KYHT redesign v2: site layer on top of Wanda's kyht-v2.css (her mock CSS, paths adjusted). Captain, 10 Nov 2026.
   Covers real-site markup the mock didn't have: nav list + mobile menu, filter chips, generic article elements,
   tables, the enquiry form, staging bar, cookie banner. No new colours beyond Wanda's token table. */
[hidden]{display:none!important}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--kyht-bark);color:#fff;padding:12px 16px;border-radius:0 0 6px 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--kyht-rust);outline-offset:2px}
.on-dark :focus-visible,.foot :focus-visible,.glance :focus-visible,.cta :focus-visible{outline-color:var(--kyht-lichen)}
.staging-bar{background:var(--kyht-rust);color:#fff;font:600 .85rem/1.3 var(--body);text-align:center;padding:8px 12px}
.eb-dark{color:var(--kyht-bark)}
.btn{cursor:pointer;font-family:var(--body)}
.btn-primary:hover{background:var(--kyht-moss-deep)}
.btn-paper:hover{background:#fff}
.btn-ghost{background:#fff}
a{text-underline-offset:2px}
/* header + nav */
.site-head .logo img{display:block}
.nav ul{display:flex;align-items:center;gap:22px;list-style:none;margin:0;padding:0}
.nav li{margin:0}
.nav a:not(.btn):hover{color:var(--kyht-moss)}
.nav .btn-primary{color:#fff}
@media (max-width:1340px) and (min-width:761px){.nav ul{gap:16px}.nav{font-size:.9rem}.site-head .logo{margin-right:20px}.site-head .logo img{height:32px}}
@media (max-width:1140px) and (min-width:761px){.nav{display:none}.burger{display:flex;align-items:center;gap:8px;font:600 .95rem var(--body);border:1.5px solid var(--kyht-bark);border-radius:var(--r);padding:9px 12px;background:#fff;color:var(--kyht-bark);cursor:pointer}.burger svg{width:18px;height:18px}}
@media (max-width:1140px){
  .burger{cursor:pointer}
  .site-head .wrap{position:relative}
  .nav.open{display:block;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--kyht-line);box-shadow:0 16px 24px -18px rgba(47,36,24,.5);padding:8px 20px 18px;white-space:normal}
  .nav.open ul{flex-direction:column;align-items:stretch;gap:0}
  .nav.open li a:not(.btn){display:block;padding:13px 2px;border-bottom:1px solid var(--kyht-line);font-size:1.02rem}
  .nav.open li a.cur{box-shadow:inset 4px 0 0 var(--kyht-rust);padding-left:12px}
  .nav.open .nav-cta{margin-top:14px}.nav.open .nav-cta .btn{display:flex;justify-content:center}
}
/* hero */
.hero-meta{list-style:none;margin:0;padding:0}
.hero .lead{color:var(--kyht-paper)}
.hero-art img{height:auto}
/* filter chips + cards */
.chip{cursor:pointer;font-family:var(--body)}
.chip:hover{border-color:var(--kyht-bark)}
.chip i.d-poured{background:#5F5242}.chip i.d-precast{background:#A84E24}.chip i.d-steel{background:#56622A}
.sec-head .chips{flex:0 0 auto}
.chip-count{font-size:.9rem;color:var(--kyht-bark-2);margin:14px 0 0;min-height:1em}
.chip-count:empty{display:none}
.tcard-link{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none}
.tcard{transition:box-shadow .15s,transform .15s}
.tcard:hover{box-shadow:0 1px 0 rgba(47,36,24,.04),0 18px 30px -18px rgba(47,36,24,.5);transform:translateY(-2px)}
.tcard-link:focus-visible{outline-offset:-3px}
.tcard .art img{max-height:220px;object-fit:contain}
.legend .status{margin:0}
@media (prefers-reduced-motion:reduce){.tcard{transition:none}.tcard:hover{transform:none}}
/* bands */
.fig .big{margin:0 0 8px}
.figs .src{display:inline-block}
.why .note{margin-top:8px}
.step .num{margin-bottom:18px}
.discl .lbl{margin:0 0 6px}
.discl p.disclosure{margin:0;font-size:1.06rem;font-weight:500}
.photos img{display:block}
.sec-tail{padding-top:72px}
.sec-tail .rel{margin-top:0}
.sec-pre{padding:40px 0 0}.sec-pre p{font-size:1.08rem}
.sec-types{padding-top:40px}
.sec-plain{padding-top:24px}
.wrap.narrow{max-width:900px}
/* guide hero */
.g-hero:not(.has-visual) .wrap{grid-template-columns:minmax(0,860px)}
.g-hero .status{margin:0 0 12px}
.g-hero .eyebrow{margin-bottom:12px}
.g-hero p.meta{flex-wrap:wrap}
.g-hero .lead{margin:0}
.crumbs span[aria-current]{color:var(--kyht-bark)}
.plate img{width:100%;height:auto}
.plate.photo-plate{padding:12px}
.plate.photo-plate img{height:340px;object-fit:cover;border-radius:6px}
.glance .wrap{display:block}
.glance .gl{display:grid;grid-template-columns:repeat(4,1fr);margin:0}
/* body layout */
.g-body .side{align-self:start;position:sticky;top:20px}
.g-body .side .toc{position:static}
.g-body.g-single .wrap{grid-template-columns:minmax(0,760px)}
.article{min-width:0}
.article ul,.article ol{padding-left:1.3em}
.article li{margin:0 0 .55em;line-height:1.6}
.article h3{margin-top:28px}
.article .prob h3,.article .faq h3{margin-top:0}
.article table{margin:10px 0 18px}
.article .small,.small{font-size:.9rem;color:var(--kyht-bark-2)}
.article p.disclosure,.enq-side p.disclosure{background:var(--kyht-paper);border-left:4px solid var(--kyht-moss);border-radius:8px;padding:14px 16px;font-weight:500}
.note-box{background:var(--kyht-paper);border-radius:var(--r-lg);padding:18px 22px;margin:0 0 18px;line-height:1.6}
.fieldnotes .fn-list{padding:0}
.fieldnotes li{margin:0}
.fieldnotes p:last-child{margin-bottom:0}
.answer{margin:0 0 6px}
.answer .yn-ic svg{width:40px;height:40px}
.problems{margin:8px 0 18px}
.prob p+p{margin-top:10px}
.faq-sec{margin-top:0}
.faq details>summary::-webkit-details-marker{display:none}
.faq .ans{margin-top:12px;color:var(--kyht-bark-2)}
.faq .ans p:last-child{margin-bottom:0}
.cta .discl .btn-primary{color:#fff}
.article .rel-h,.rel-h{border:0;padding:0;margin:56px 0 18px;font-size:1.6rem}
.sec-tail .rel-h{margin-top:0;font-size:2rem}
.article .sources h2,.sources h2{border:0;padding:0;margin:0 0 8px;font-size:1.25rem}
.sources a{word-break:break-word}
.tbl{margin:10px 0 18px}
.tbl .ltable{margin:0}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--kyht-line);border-radius:var(--r-lg)}
.dtable{border-collapse:collapse;width:100%;min-width:640px;font-size:.92rem}
.dtable th{background:var(--kyht-bark);color:var(--kyht-paper);text-align:left;font:600 .76rem/1.25 var(--body);letter-spacing:.08em;text-transform:uppercase;padding:12px 14px;vertical-align:bottom}
.dtable td{padding:12px 14px;border-top:1px solid var(--kyht-line);vertical-align:top;line-height:1.5}
.dtable tr:nth-child(even) td{background:#FBF8F1}
.dtable td:first-child{font-weight:600}
.photo-fig img{display:block}
/* footer */
.foot .h4{font:600 .78rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--kyht-lichen);margin:6px 0 16px}
.foot a:hover{text-decoration:underline}
.foot .linkish{color:var(--kyht-paper);text-decoration:none;font-size:.95rem}
/* cookie banner on brand */
.cookie-banner .btn{justify-content:center}
.cookie-banner #cookie-accept{background:var(--kyht-moss);color:#fff}
/* ---------- survey enquiry form (staging: test sink) ---------- */
.enq-body .wrap{grid-template-columns:minmax(0,1fr) 340px;gap:56px}
.enq{background:#fff;border:1.5px solid var(--kyht-bark);border-radius:var(--r-lg);padding:28px 30px;box-shadow:10px 10px 0 var(--kyht-paper)}
.sink-note{background:var(--kyht-rust-mist);color:var(--kyht-rust);border:1.5px dashed var(--kyht-rust);border-radius:8px;padding:10px 14px;font-size:.92rem}
.stepper{list-style:none;display:flex;gap:10px;margin:6px 0 22px;padding:0;font:600 .9rem/1.2 var(--body);color:var(--kyht-bark-2)}
.stepper li{flex:1;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;background:#FBF8F1;border:1px solid var(--kyht-line)}
.stepper li span{flex:0 0 28px;height:28px;border-radius:50%;background:#fff;border:1.5px solid var(--kyht-bark-2);display:grid;place-items:center;font:400 .95rem var(--display)}
.stepper li.on{background:var(--kyht-paper);border-color:var(--kyht-bark);color:var(--kyht-bark)}
.stepper li.on span{background:var(--kyht-bark);border-color:var(--kyht-bark);color:var(--kyht-paper)}
.stepper li.done span{background:var(--kyht-moss);border-color:var(--kyht-moss);color:#fff}
.enq fieldset{border:0;margin:0;padding:0;min-width:0}
.enq legend{font:400 1.6rem/1.2 var(--display);padding:0;margin:0 0 18px}
.step-of{display:block;font:600 .75rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--kyht-rust);margin-bottom:8px}
.f{margin:0 0 20px}
.f label{display:block;font-weight:600;margin:0 0 6px}
.req,.opt{font-weight:400;color:var(--kyht-bark-2);font-size:.9rem}
.hint{display:block;font-size:.92rem;color:var(--kyht-bark-2);margin:-2px 0 8px;line-height:1.45}
.enq input[type=text],.enq input[type=email],.enq input[type=tel],.enq input[type=url],.enq select,.enq textarea{width:100%;font:400 1.0625rem/1.4 var(--body);color:var(--kyht-bark);background:#fff;border:1.5px solid var(--kyht-bark-2);border-radius:var(--r);padding:12px 14px;min-height:50px}
.enq textarea{resize:vertical;min-height:84px}
.enq select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--kyht-bark) 50%),linear-gradient(135deg,var(--kyht-bark) 50%,transparent 50%);background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px;background-repeat:no-repeat;padding-right:44px}
.enq input:focus,.enq select:focus,.enq textarea:focus{border-color:var(--kyht-moss);outline:3px solid rgba(86,98,42,.25);outline-offset:0}
.enq [aria-invalid=true]{border-color:var(--kyht-rust)!important}
/* postcode lookup (Ideal Postcodes, staging test key) */
.lookup-row{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.lookup-row input{flex:1 1 160px;min-width:0}
.lookup-row #enq-find-address{flex:0 0 auto;padding:12px 18px;min-height:50px;justify-content:center}
#enq-pick-wrap{margin-top:16px}
#enq-pick-wrap label{display:block;font-weight:600;margin:0 0 6px}
#enq-pick-wrap select{width:100%}
.manual{margin:10px 0 0}
.enq .manual-link{background:none;border:0;padding:0;font:600 .95rem/1.4 var(--body);color:var(--kyht-moss-deep);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.enq .manual-link:hover{color:var(--kyht-bark)}
.enq .manual-link:focus{outline:3px solid rgba(86,98,42,.25);outline-offset:3px;border-radius:4px}
.enq #enq-lookup-s{margin-top:8px}
.enq #enq-lookup-s.is-warn{color:var(--kyht-rust);background:var(--kyht-rust-mist)}
@media (max-width:420px){.lookup-row #enq-find-address{flex:1 1 100%;width:100%}}
.fe{color:var(--kyht-rust);font-size:.9rem;font-weight:600;margin:6px 0 0}
.fe:empty,.fs:empty{display:none}
.fs{color:var(--kyht-moss-deep);background:#EEF1DF;border-radius:6px;display:inline-block;padding:5px 9px;font-size:.88rem;font-weight:600;margin:8px 0 0}
.prefix{display:flex;align-items:stretch}
.prefix span{display:grid;place-items:center;padding:0 14px;border:1.5px solid var(--kyht-bark-2);border-right:0;border-radius:var(--r) 0 0 var(--r);background:var(--kyht-paper);font-weight:600}
.prefix input{border-radius:0 var(--r) var(--r) 0!important}
.check{display:flex;gap:12px;align-items:flex-start;margin:0 0 14px;line-height:1.5;cursor:pointer}
.check input{flex:0 0 24px;width:24px;height:24px;margin:1px 0 0;accent-color:var(--kyht-moss)}
.consent{border:1px solid var(--kyht-line);background:#FBF8F1;border-radius:10px;padding:16px 16px 4px;margin:8px 0 16px}
.consent .fe{margin:-6px 0 12px 36px}
.disclosure.plain{font-weight:500;margin:0 0 6px}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;opacity:0}
.err{color:var(--kyht-rust);font-weight:600}
.err:empty{display:none}
.reply-sla{margin:14px 0 4px;font-weight:600}
.actions-row{display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;margin-top:8px}
.actions-row [data-next]{margin-left:auto}
.enq-done{background:#fff;border:1.5px solid var(--kyht-moss);border-radius:var(--r-lg);padding:28px 30px}
.enq-done h2{font-size:1.9rem;margin-bottom:14px}
.sink{margin-top:20px;border:1.5px dashed var(--kyht-rust);border-radius:10px;padding:16px;background:var(--kyht-rust-mist)}
.sink-h{font:600 .8rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--kyht-rust)}
.sink pre{white-space:pre-wrap;word-break:break-word;background:#fff;border:1px solid var(--kyht-line);border-radius:8px;padding:12px;font-size:.82rem;max-height:340px;overflow:auto}
.enq-side{display:grid;gap:16px;align-self:start}
.side-card{border:1px solid var(--kyht-line);border-radius:var(--r-lg);padding:20px;background:#fff}
.side-card .t{font:600 .75rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--kyht-bark-2);margin-bottom:12px}
.side-card p:last-child{margin-bottom:0}
.next{margin:0;padding-left:1.2em}.next li{margin:0 0 8px}
@media (max-width:1020px){.enq-body .wrap{grid-template-columns:1fr;gap:28px}}
/* ---------- mobile ---------- */
@media (max-width:760px){
  .glance .gl{grid-template-columns:1fr 1fr}
  .plate.photo-plate img{height:240px}
  .chips{overflow-x:auto;width:auto;max-width:100%;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .tcard-link{flex-direction:row}
  .tcard .art img{max-height:none}
  .g-body .side{position:static}
  .sec-pre{padding-top:28px}
  .sec-tail{padding-top:48px}
  .sec-tail .rel-h{font-size:1.6rem}
  .enq{padding:20px 16px;box-shadow:6px 6px 0 var(--kyht-paper)}
  .stepper li{padding:8px;font-size:.82rem}
  .enq legend{font-size:1.35rem}
  .actions-row .btn{flex:1;justify-content:center}
  .enq-done{padding:20px 16px}
  .ltable td:first-child{background:#FBF8F1}
}
@media (max-width:380px){.trust .wrap{grid-template-columns:1fr}.trust .item:nth-child(even){padding-left:0;border-left:0}.trust .item:nth-child(n+2){border-top:1px solid var(--kyht-line)}}
.article .survey-list,.article .fn-list,.article .related,.article .steps{padding:0}
.article .survey-list li,.article .related li{margin:0}
.hero h1 .hl{white-space:nowrap}
.hero-copy{max-width:600px}
figure.plate{margin:0}
.hero-meta li{display:flex;align-items:center;gap:8px}
@media (max-width:760px){figure.plate{width:100%}}
/* narrow phones (320-420px): keep logo + Menu button inside the header */
@media (max-width:420px){.site-head .logo{margin-right:10px;flex:0 1 auto;min-width:0}.site-head .logo img{height:auto;max-height:28px;max-width:100%}.burger{flex:0 0 auto;padding:8px 10px}}
/* related tiles: never wider than their column; two columns on tablets */
.related li,.related a{min-width:0}.related b{overflow-wrap:break-word;hyphens:auto}
@media (max-width:1020px){.related{grid-template-columns:1fr 1fr}}