/* Middlesbrough Driveways - brand sheet in plan.md. Written from scratch for this site. */
:root{
 --moss:#14463f; --moss-deep:#0c2f2a; --ochre:#f2b705; --ochre-deep:#c99500;
 --stone:#efe7d8; --stone-line:#ddd2bd; --ink:#1d2421; --ink-mute:#4f5a55; --paper:#fffdf8;
 --head:"Bitter",Georgia,serif; --text:"Work Sans",system-ui,sans-serif; --max:1180px;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--text);font-size:17px;line-height:1.7;color:var(--ink);background:var(--paper)}
img{max-width:100%;height:auto}
a{color:var(--moss);text-underline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:var(--head);line-height:1.2;color:var(--moss-deep)}
h1{font-size:clamp(2rem,4.4vw,3rem);font-weight:800;margin:.2em 0 .45em;color:#fff}
h2{font-size:clamp(1.4rem,2.6vw,1.95rem);font-weight:800;margin:2.2em 0 .6em;padding-top:.6em;border-top:4px solid var(--ochre);display:inline-block}
h3{font-size:1.15rem;font-weight:600;margin:1.6em 0 .4em}
/* top bar */
.top{background:#fff;border-bottom:1px solid var(--stone-line);position:sticky;top:0;z-index:20}
.top-row{display:flex;align-items:center;gap:20px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--moss-deep)}
.mk-bg{fill:var(--moss)} .mk-road{fill:none;stroke:#fff;stroke-width:4;stroke-linejoin:round} .mk-line{stroke:var(--ochre);stroke-width:2.5}
.wm{display:flex;flex-direction:column;line-height:1}
.wm-top{font:600 .68rem/1 var(--text);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute)}
.wm-main{font:800 1.45rem/1.05 var(--head);color:var(--moss-deep)}
.main-nav{margin-left:auto}
.main-nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.main-nav a{display:block;padding:6px 10px;text-decoration:none;color:var(--ink);font-weight:500;font-size:.95rem}
.main-nav a:hover{background:var(--stone)}
/* buttons */
.btn{display:inline-block;font:600 1rem/1 var(--text);padding:15px 22px;text-decoration:none;border:2px solid transparent;border-radius:2px;cursor:pointer}
.btn-call{background:var(--ochre);color:var(--moss-deep)} .btn-call:hover{background:var(--ochre-deep)}
.btn-go{background:var(--moss);color:#fff} .btn-go:hover{background:var(--moss-deep)}
.btn-ghost{border-color:#fff;color:#fff} .btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn.disabled{opacity:.6;cursor:not-allowed;text-align:center;width:100%}
.top-call{padding:11px 16px;font-size:.95rem}
/* hero: full-bleed moss band with a stretcher-bond texture */
.hero{background:
 repeating-linear-gradient(0deg,transparent 0 38px,rgba(255,255,255,.05) 38px 40px),
 linear-gradient(135deg,var(--moss) 0%,var(--moss-deep) 100%);color:#e9f1ee;padding:38px 0 54px}
.hero-grid{display:grid;grid-template-columns:1.25fr .9fr;gap:44px;align-items:start}
.crumbs{font-size:.85rem;opacity:.85}.crumbs a{color:#e9f1ee}
.lead{font-size:1.12rem;max-width:62ch}
.answer{background:rgba(255,255,255,.08);border-left:5px solid var(--ochre);padding:14px 18px;margin:18px 0}
.answer-label{font:700 .75rem/1 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--ochre);margin:0 0 8px}
.answer p:last-child{margin:0}
.readon{font-style:italic;opacity:.9}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.hero-plain{padding:30px 0 34px}
/* quote card */
.quote-card{background:#fff;color:var(--ink);padding:24px;border-top:6px solid var(--ochre);box-shadow:0 18px 40px rgba(0,0,0,.25)}
.quote-kicker{font:700 .75rem/1 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);margin:0}
.quote-title{border:0;padding:0;margin:.3em 0 .7em;font-size:1.45rem;display:block}
.form-mock label{display:block;font-size:.9rem;font-weight:500;margin-bottom:10px}
.form-mock input,.form-mock select{display:block;width:100%;padding:10px;border:1px solid var(--stone-line);background:#faf8f3;margin-top:4px}
.quote-alt{font-size:.92rem;margin:14px 0 0}
.call-inline{font-weight:700}
.ph{background:#fff3c4;border:2px dashed var(--ochre-deep);padding:8px 10px;font-weight:600;font-size:.88rem}
/* body */
.body-grid{display:grid;grid-template-columns:240px 1fr;gap:48px;padding:30px 22px 50px}
.toc{position:sticky;top:90px;align-self:start;background:var(--stone);padding:18px 18px 10px;font-size:.92rem}
.toc-h{font:800 1rem var(--head);margin:0 0 8px;color:var(--moss-deep)}
.toc ol{padding-left:18px;margin:0} .toc li{margin-bottom:8px}
.prose{max-width:74ch}
.prose table{border-collapse:collapse;width:100%;margin:1em 0;font-size:.95rem}
.prose th,.prose td{border:1px solid var(--stone-line);padding:8px 10px;text-align:left}
.prose th{background:var(--stone)}
.prose blockquote{margin:1.2em 0;padding:12px 18px;background:var(--stone);border-left:5px solid var(--moss)}
.faq-open h3{background:var(--stone);padding:10px 14px;margin:1.4em 0 .5em;border-left:5px solid var(--ochre)}
.legal{padding:30px 22px 60px;max-width:820px}
.legal h2{font-size:1.3rem}
/* links band */
.links-band{background:var(--stone);border-top:1px solid var(--stone-line);padding:34px 0}
.links-grid{display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:34px}
.lb-h{font-size:1.1rem;border:0;padding:0;margin:0 0 .6em;display:block}
.links-band ul{list-style:none;padding:0;margin:0}.links-band li{padding:3px 0}
.cols{columns:2}
.foot{background:var(--moss-deep);color:#cfe0da;font-size:.9rem;padding:18px 0 24px}
.foot a{color:#fff}.foot-row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sticky-call{display:none}
@media (max-width:960px){
 .hero-grid,.body-grid,.links-grid{grid-template-columns:1fr}
 .toc{position:static}.hide-s{display:none}.main-nav{display:none}.top-call{margin-left:auto}
 .sticky-call{display:block;position:fixed;left:0;right:0;bottom:0;background:var(--ochre);color:var(--moss-deep);text-align:center;font-weight:700;padding:15px;text-decoration:none;z-index:30}
}
/* quote form */
.qform label{display:block;font-size:.9rem;font-weight:500;margin-bottom:10px}
.qform input,.qform select,.qform textarea{display:block;width:100%;padding:10px;border:1px solid var(--stone-line);background:#faf8f3;margin-top:4px;font:inherit;border-radius:2px}
.qform input:focus,.qform select:focus,.qform textarea:focus{outline:3px solid var(--ochre);border-color:var(--moss)}
.qform .opt{font-weight:400;color:var(--ink-mute)}
.qform .hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.qsubmit{width:100%;margin-top:6px}.qsubmit:disabled{opacity:.6;cursor:wait}
.qnote{font-size:.8rem;color:var(--ink-mute);margin:10px 0 0}.qmsg{font-weight:600;color:#8a1c1c;margin:6px 0 0}
.cf-turnstile{margin:6px 0 4px}
/* launch mode: quotes opening soon (no form, no phone) */
.soon-card p{margin:0 0 .8em;font-size:.98rem}
.soon-links{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--stone-line)}
.soon-links li{border-bottom:1px solid var(--stone-line)}
.soon-links a{display:block;padding:9px 0;font-weight:600;text-decoration:none}
.soon-links a::after{content:" \203A";color:var(--ochre-deep)}
.soon-links a:hover{text-decoration:underline}
.lb-note{font-size:.9rem;color:var(--ink-mute);margin-top:.6em}
@media (max-width:960px){.foot{padding-bottom:24px}}
/* photos (illustrative, see images.yaml) */
.pf{margin:1.6em 0 1.8em;background:var(--stone)}
.pf img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:cover}
.pf figcaption{font-size:.86rem;line-height:1.5;color:var(--ink-mute);padding:8px 12px 10px;border-left:4px solid var(--ochre)}
.pf-hero{margin-top:0}
.pf-two{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pf-two img{aspect-ratio:4/3}
.legal .pf-hero{margin-bottom:1.4em}
@media (max-width:600px){.pf-two{grid-template-columns:1fr}}