/* Homeguard Damp & Timber: "Safe hands" direction. One stylesheet for every page. */

/* ---------- Fonts (self-hosted, SIL OFL; variable) ---------- */
@font-face{font-family:"Lora";src:url("fonts/lora-variable.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Lora";src:url("fonts/lora-italic-variable.woff2") format("woff2");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:"Figtree";src:url("fonts/figtree-variable.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}

/* ---------- The one token source ---------- */
:root{
  color-scheme: light only;
  /* grounds */
  --paper:#FBF8F3;      /* page: warm plaster white */
  --sand:#F3ECE1;       /* alternate band */
  --mist:#E4EFEC;       /* soft teal wash */
  --card:#FFFFFF;
  /* text */
  --ink:#1D2433;        /* body text */
  --ink-2:#4A5262;      /* secondary text */
  --navy:#1A2153;       /* headings: kin to the logo navy */
  /* action */
  --teal:#0A6B6B;       /* primary, links */
  --teal-deep:#074F4F;  /* hover, pressed */
  --teal-soft:#CFE3DF;  /* chip fill, quiet borders */
  --on-teal:#FFFFFF;
  /* warmth (decoration only, never text) */
  --apricot:#E3A266;
  /* lines */
  --line:#E2D8C8;       /* hairlines */
  --field-line:#8C8577; /* form field borders: 3:1 on white */
  --focus:#1A2153;
  --scroll-thumb:#C9BDA9;
  --scroll-thumb-hover:#A99B84;
  --shadow:0 12px 32px #1D24331F; /* menu panel only */

  /* type */
  --serif:"Lora", Georgia, "Times New Roman", serif;
  --sans:"Figtree", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

  /* shape */
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-pill:999px;
  --gutter:20px;
  --max:1180px;

  /* logo: never below these heights; clear space = height of the "h" in "homeguard" (12.8% of logo height) */
  --logo-h:112px;        /* desk: "Damp & Timber Ltd" cap height 7.3px */
  --logo-clear:16px;     /* >= 14.3px */
  --logo-h-foot:128px;   /* footer: cap height 8.3px */
  --logo-clear-foot:0px; /* footer grid gaps (40px) and band padding already exceed 16.4px */
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:64px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--sans);text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--serif);color:var(--navy);font-weight:600;line-height:1.18;margin:0;text-wrap:balance}
h2{font-size:clamp(1.75rem,1.3rem + 1.6vw,2.5rem);letter-spacing:-.005em}
h3{font-size:1.25rem}
p{margin:0}
a{color:var(--teal);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--teal-deep)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.icon{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Scrollbars: slim, drawn, never default ---------- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:10px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover);background-clip:padding-box}
::-webkit-scrollbar-button{display:none;width:0;height:0}
::-webkit-scrollbar-corner{background:transparent}
@supports (-moz-appearance:none){
  html,textarea,.menu-panel,.frames{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) transparent}
}

/* ---------- Buttons: slim, sized by label ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:38px;padding:0 20px;border-radius:var(--r-pill);border:1px solid transparent;
  font:600 1rem/1 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color .15s,color .15s,border-color .15s}
.btn::before{content:"";position:absolute;inset:-3px 0}          /* 38 + 3 + 3 = 44px touch target, invisible */
.btn-primary{background:var(--teal);color:var(--on-teal)}
.btn-primary:hover{background:var(--teal-deep);color:var(--on-teal)}
.btn-primary:active{background:var(--navy)}
.btn-sm{height:32px;padding:0 14px;font-size:.9375rem}
.btn-sm::before{inset:-6px 0}                                    /* 32 + 6 + 6 = 44px */
.btn-ghost{background:transparent;color:var(--teal);border-color:var(--teal)}
.btn-ghost:hover{background:var(--mist);color:var(--teal-deep);border-color:var(--teal-deep)}
.btn-ghost:active{background:var(--teal-soft)}
.btn .icon{width:18px;height:18px}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- Skip link ---------- */
.skip{position:absolute;left:16px;top:-60px;z-index:50;background:var(--card);padding:8px 14px;border-radius:var(--r-sm)}
.skip:focus{top:12px}

/* ---------- Masthead (scrolls away) ---------- */
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:var(--logo-clear)}
.logo{display:block;flex:0 0 auto;border-radius:8px}
.logo img{height:var(--logo-h);width:auto;flex-shrink:0;max-width:none}
.mast-side{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.mast-tag{font:italic 500 1.125rem/1.3 var(--serif);color:var(--navy)}
.mast-meta{font-size:.9375rem;color:var(--ink-2)}

/* ---------- Sticky bar: nav, phone, survey ---------- */
.bar{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:12px;height:52px}
.nav-list{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav-list a{position:relative;display:inline-flex;align-items:center;height:32px;padding:0 10px;border-radius:var(--r-pill);
  color:var(--ink);text-decoration:none;font-weight:500;font-size:.9688rem}
.nav-list a::before{content:"";position:absolute;inset:-6px 0}
.nav-list a:hover{background:var(--sand);color:var(--navy)}
.bar-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.bar-call .num{font-variant-numeric:tabular-nums}

/* Menu (phone + tablet) — works with JS off via <details> */
.menu{position:relative;display:none}
.menu summary{list-style:none}
.menu summary::-webkit-details-marker{display:none}
.menu summary .icon{width:18px;height:18px}
.menu[open] summary{background:var(--mist)}
.menu-panel{position:absolute;left:0;top:calc(100% + 10px);width:min(280px,calc(100vw - 32px));max-height:calc(100vh - 80px);overflow-y:auto;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:8px;box-shadow:var(--shadow)}
.menu-panel ul{list-style:none;margin:0;padding:0}
.menu-panel a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--r-sm);color:var(--ink);text-decoration:none;font-weight:500}
.menu-panel a:hover{background:var(--sand)}

/* ---------- Opening ---------- */
.hero{padding-block:40px 64px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:56px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.9375rem;font-weight:600;color:var(--teal);margin-bottom:14px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--apricot)}
.hero h1{font-size:clamp(2.375rem,1.6rem + 3.4vw,4rem);letter-spacing:-.01em;line-height:1.08}
.hand{position:relative;white-space:nowrap}
.hand svg{position:absolute;left:0;right:0;bottom:-.2em;width:100%;height:.32em;overflow:visible;color:var(--apricot)}
.hand path{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.lead{margin-top:22px;font-size:clamp(1.125rem,1rem + .4vw,1.3125rem);line-height:1.6;max-width:36em}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:28px}
.or-call{color:var(--ink-2)}
.or-call a{font-weight:600;white-space:nowrap}

.assure{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.assure li{display:flex;gap:12px;align-items:flex-start;background:var(--mist);border-radius:var(--r-md);padding:14px 16px;font-size:.9688rem;line-height:1.45}
.assure .icon{color:var(--teal);margin-top:1px}
.assure strong{display:block;color:var(--navy);font-weight:700}

.paul{position:relative;justify-self:center;margin:0;display:flex;flex-direction:column;align-items:center}
.paul::before{content:"";position:absolute;z-index:0;width:400px;height:400px;left:50%;top:44%;transform:translate(-50%,-50%);border-radius:50%;background:var(--mist)}
.paul img{position:relative;z-index:1;width:246px;height:337px;border-radius:var(--r-lg);object-fit:cover}
.paul figcaption{position:relative;z-index:1;margin-top:14px;text-align:center;line-height:1.35}
.paul figcaption strong{display:block;font:600 1.125rem/1.3 var(--serif);color:var(--navy)}
.paul figcaption span{font-size:.9375rem;color:var(--ink-2)}

/* ---------- Bands ---------- */
.band{padding-block:72px}
.band-sand{background:var(--sand)}
.band-mist{background:var(--mist)}
.head{max-width:40em;margin-bottom:36px}
.head p{margin-top:12px;color:var(--ink-2);font-size:1.125rem}

/* How it works */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;counter-reset:s}
.steps li{background:var(--card);border-radius:var(--r-lg);padding:24px 22px 26px;counter-increment:s}
.steps li::before{content:counter(s);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--mist);color:var(--teal);font:600 1.125rem/1 var(--serif);margin-bottom:16px}
.steps h3{margin-bottom:8px}
.steps p{color:var(--ink-2);font-size:1rem;line-height:1.55}
.steps-foot{margin-top:28px;font:italic 500 1.25rem/1.4 var(--serif);color:var(--navy)}

/* Services */
.svc-group + .svc-group{margin-top:44px}
.svc-group > h3{font:700 .875rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:16px}
.svc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.svc li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:center;align-content:start;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:20px 22px 22px}
.svc .ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--mist);color:var(--teal)}
.svc h4{font:600 1.1875rem/1.25 var(--serif);color:var(--navy);margin:0}
.svc p{grid-column:1/-1;margin-top:14px;font-size:.9688rem;line-height:1.55;color:var(--ink-2)}
.svc-note{margin-top:28px;color:var(--ink-2)}

/* Recent work */
.seq{background:var(--card);border-radius:var(--r-lg);padding:24px}
.seq > h3{margin-bottom:4px}
.seq > p{color:var(--ink-2);margin-bottom:18px}
.frames{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.frames-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.frames figure{margin:0}
.frames img{width:100%;aspect-ratio:500/374;object-fit:cover;border-radius:var(--r-sm)}
.frames figcaption{margin-top:8px;font-size:.9375rem;line-height:1.4;color:var(--ink)}
.frames figcaption b{color:var(--teal);font-weight:700;margin-right:4px}
.jobs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;margin-top:20px}
.jobs > .seq{grid-column:span 3}
.jobs > .seq.wide{grid-column:span 4}
.jobs > .seq.narrow{grid-column:span 2}
.seq.narrow .frames{max-width:480px}
.jobs .frames{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.jobs .frames img{aspect-ratio:4/3}

/* About */
.about .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.about-photo{margin:0}
.about-photo img{width:459px;max-width:100%;border-radius:var(--r-lg)}
.about-photo figcaption{margin-top:10px;font-size:.9375rem;color:var(--ink-2)}
.about-copy p + p{margin-top:16px}
.about-copy h2{margin-bottom:18px}
.creds{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:10px}
.creds li{display:flex;gap:12px;align-items:flex-start}
.creds .icon{color:var(--teal);margin-top:2px}

/* Quote */
.quote{text-align:center}
.quote blockquote{margin:0 auto;max-width:24em}
.quote blockquote p{font:italic 500 clamp(1.625rem,1.2rem + 1.8vw,2.5rem)/1.35 var(--serif);color:var(--navy)}
.quote .mark{display:block;margin:0 auto 12px;width:40px;height:30px;color:var(--teal)}
.quote figcaption{margin-top:18px;font-weight:600}
.quote figcaption span{font-weight:400;color:var(--ink-2)}

/* Areas */
.areas .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.places{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.places li{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:var(--r-pill);background:var(--card);border:1px solid var(--line);font-weight:500}
.places li.home{background:var(--mist);border-color:var(--teal-soft);color:var(--navy)}
.places li.home .icon{width:16px;height:16px;color:var(--teal)}
.areas-copy p{margin-top:14px;font-size:1.125rem}
.areas-copy .small{font-size:1rem;color:var(--ink-2)}

/* Survey form */
.survey .wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:start}
.survey-intro p{margin-top:14px;font-size:1.125rem}
.talk{margin-top:28px;background:var(--card);border-radius:var(--r-md);padding:20px 22px}
.talk p{margin:0;font-size:1rem}
.talk .big{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font:600 1.375rem/1.3 var(--sans);color:var(--navy);text-decoration:none}
.talk .big .icon{color:var(--teal)}
.talk .big:hover{color:var(--teal-deep)}
.talk .mail{margin-top:6px;display:inline-block;overflow-wrap:anywhere}
form.card{background:var(--card);border-radius:var(--r-lg);padding:28px}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
label,.legend{font-weight:600;font-size:.9688rem;color:var(--ink)}
.opt{font-weight:400;color:var(--ink-2)}
input[type=text],input[type=tel],input[type=email],textarea{width:100%;font:400 1rem/1.4 var(--sans);color:var(--ink);background:var(--card);
  border:1px solid var(--field-line);border-radius:var(--r-sm);padding:0 12px;height:42px}
textarea{height:auto;min-height:120px;padding:10px 12px;resize:vertical}
input:hover,textarea:hover{border-color:var(--ink-2)}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
fieldset{border:0;margin:0;padding:0;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{position:relative;display:inline-flex;align-items:center;height:32px;padding:0 13px;border-radius:var(--r-pill);border:1px solid var(--field-line);
  font-size:.9375rem;font-weight:500;color:var(--ink);cursor:pointer;background:var(--card)}
.chip span::before{content:"";position:absolute;inset:-6px 0}
.chip span:hover{background:var(--sand)}
.chip input:checked + span{background:var(--teal);border-color:var(--teal);color:var(--on-teal)}
.chip input:checked + span::after{content:"✓";margin-left:6px;font-size:.875rem}
.chip input:focus-visible + span{outline:2px solid var(--focus);outline-offset:2px}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:22px}
.preview-note{font-size:.9375rem;color:var(--ink-2)}
.preview-note a{font-weight:600;white-space:nowrap}

/* Footer */
.foot{background:var(--sand);padding-block:56px 32px;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:40px}
.foot-logo{justify-self:start;align-self:start;padding:var(--logo-clear-foot)}
.foot-logo img{height:var(--logo-h-foot);width:auto;flex-shrink:0;max-width:none}
.foot h3{font:700 .8125rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.foot ul a{display:inline-flex;align-items:center;min-height:32px;color:var(--ink);text-decoration:none}
.foot ul a:hover{color:var(--teal-deep);text-decoration:underline}
.foot .line{overflow-wrap:anywhere}
.legal{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:.875rem;color:var(--ink-2);line-height:1.6}

/* ---------- Review counts (Amendment 1): full + compact ---------- */
.rv{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:760px;text-align:left}
.rv a{display:flex;flex-direction:column;height:100%;background:var(--card);border:1px solid var(--card);border-radius:var(--r-lg);padding:22px 26px 20px;color:var(--ink);text-decoration:none;transition:border-color .15s}
.rv a:hover{border-color:var(--teal-soft);color:var(--ink)}
.rv a:focus-visible{border-radius:var(--r-lg)}
.rv-site{font:700 .8125rem/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.rv-count{display:flex;align-items:baseline;gap:10px;margin-top:12px}
.rv-num{font:600 4.25rem/.9 var(--serif);color:var(--navy);font-variant-numeric:lining-nums;letter-spacing:-.02em}
.rv-word{font:italic 500 1.5rem/1 var(--serif);color:var(--navy)}
.rv-score{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:14px;font-size:.9688rem;font-weight:600;color:var(--ink)}
.rv-dev{display:block;height:12px;width:auto;color:var(--teal);fill:currentColor}
.rv-go{display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:.9375rem;font-weight:600;color:var(--teal)}
.rv a:hover .rv-go{color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px}
.rv-date{margin:14px auto 44px;font-size:.875rem;color:var(--ink-2)}
.rv-mini{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 32px}
.rv-mini a{display:flex;align-items:flex-start;gap:10px;min-height:44px;color:var(--ink);text-decoration:none;border-radius:var(--r-sm)}
.m-num{font:600 2.375rem/1 var(--serif);margin-top:2px;color:var(--navy);font-variant-numeric:lining-nums;letter-spacing:-.01em}
.m-txt{display:flex;flex-direction:column;gap:2px}
.m-word{font:italic 500 1.0625rem/1.15 var(--serif);color:var(--navy)}
.m-site{font-size:.875rem;line-height:1.25;color:var(--ink-2)}
.m-score{font-size:.875rem;line-height:1.25;font-weight:600;color:var(--ink)}
.rv-mini a:hover .m-site{color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px}
.rv-mini-date{margin-top:4px;font-size:.8125rem;color:var(--ink-2)}
@media (max-width:620px){
  .rv-mini{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}
  .rv{grid-template-columns:minmax(0,1fr);gap:12px}
  .rv a{padding:20px 20px 18px}
  .rv-num{font-size:3.5rem}
}

/* ---------- Responsive ---------- */
@media (max-width:1060px){
  .nav-list{display:none}
  .menu{display:block}
  .assure{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .hero .wrap,.about .wrap,.areas .wrap,.survey .wrap{grid-template-columns:minmax(0,1fr);gap:36px}
  .hero{padding-block:24px 56px}
  .hero .wrap{gap:28px}
  /* Paul leads on phone: a small portrait row above the heading */
  .paul{order:-1;justify-self:stretch;flex-direction:row;align-items:center;gap:16px}
  .paul::before{display:none}
  .paul img{width:84px;height:115px;border-radius:var(--r-md)}
  .paul figcaption{margin:0;text-align:left}
  .jobs{grid-template-columns:minmax(0,1fr)}
  .jobs > .seq,.jobs > .seq.wide,.jobs > .seq.narrow{grid-column:auto}
  .svc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .frames-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-logo{grid-column:1/-1}
  .band{padding-block:56px}
}
@media (max-width:560px){
  :root{--gutter:16px;--logo-h:88px;--logo-clear:14px;--logo-h-foot:104px}  /* phone: cap height 5.7px; clear space >= 11.3px */
  .mast-tag{font-size:1rem}
  .mast-meta{font-size:.875rem}
  .bar .wrap{gap:8px}
  .bar-call .num{display:none}
  .steps{grid-template-columns:minmax(0,1fr);gap:12px}
  .steps li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;padding:18px 18px 20px}
  .steps li::before{grid-row:span 2;margin:0}
  .steps h3{align-self:center;margin:0 0 4px}
  .svc{grid-template-columns:minmax(0,1fr);gap:12px}
  .svc li{padding:18px 18px 20px}
  .fields{grid-template-columns:minmax(0,1fr)}
  form.card,.seq{padding:20px 16px}
  .foot-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:359px){
  .bar .lbl,.bar .lbl-m{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .bar .menu summary,.bar .bar-call{width:44px;padding:0}
}
@media (min-width:561px){
  .bar-call .lbl{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ---------- Pages (Amendment 2): built only from the components above ---------- */
/* current page in the nav: weight and a filled shape, not colour alone */
.nav-list a[aria-current],.menu-panel a[aria-current]{background:var(--mist);color:var(--navy);font-weight:700}
.bar-actions a[aria-current="page"]{background:var(--mist)}
/* "Guides": visibly disabled, not a link */
.nav-soon{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;color:var(--ink-2);font-weight:500;font-size:.9688rem;cursor:default}
.menu-panel .nav-soon{min-height:44px;height:auto;padding:0 12px;font-size:1rem}
.soon{display:inline-flex;align-items:center;height:20px;padding:0 7px;border:1px solid var(--line);border-radius:var(--r-pill);font-size:.75rem;font-weight:600;letter-spacing:.02em;color:var(--ink-2)}
.foot .nav-soon{height:auto;min-height:32px;padding:0;font-size:1rem;font-weight:400}

/* page opening for inner pages */
.page-head{padding-block:40px 48px}
.page-head h1{font-size:clamp(2.25rem,1.6rem + 2.4vw,3.25rem);letter-spacing:-.01em;line-height:1.1}
.page-head .lead{margin-top:16px}
.crumbs{margin:0 0 12px;font-size:.9375rem;color:var(--ink-2)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li + li::before{content:"›";margin-right:6px;color:var(--ink-2)}
.band-top{padding-top:0}

/* the closing action, on every page except the form page */
.cta .wrap{display:block}
.cta-card{background:var(--card);border-radius:var(--r-lg);padding:32px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:center}
.cta-card p{margin-top:8px;color:var(--ink-2)}
.cta-card .actions{margin:0}

/* home: services teaser */
.tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tiles a{display:flex;align-items:center;gap:12px;min-height:64px;height:100%;padding:10px 16px 10px 10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);color:var(--navy);text-decoration:none;font:600 1.0625rem/1.25 var(--serif)}
.tiles a:hover{border-color:var(--teal-soft);color:var(--teal-deep)}
.tiles a:focus-visible{border-radius:var(--r-md)}
.tiles .ico{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:12px;background:var(--mist);color:var(--teal)}
.more{display:inline-flex;align-items:center;gap:6px;margin-top:24px;font-weight:600}

/* home: recent-jobs strip */
.strip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.strip figure{margin:0}
.strip img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-sm)}
.strip figcaption{margin-top:8px;font-size:.9375rem;line-height:1.4}

/* services page: one action per entry */
.svc-act{grid-column:1/-1;margin-top:16px}
.svc-soon{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:var(--r-pill);border:1px dashed var(--field-line);color:var(--ink-2);font-size:.9375rem;font-weight:600;cursor:not-allowed}
.svc-soon .icon{width:16px;height:16px}

/* rising-damp page */
.prose{max-width:40em}
.prose p + p{margin-top:16px}
.prose h2{margin-bottom:16px}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.facts{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.facts li{display:flex;gap:12px;align-items:flex-start;background:var(--mist);border-radius:var(--r-md);padding:14px 16px;line-height:1.5}
.facts .icon{color:var(--teal);margin-top:1px}

/* contact page */
.contact-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.contact-list li{background:var(--card);border-radius:var(--r-lg);padding:22px 24px}
.contact-list h2{font-size:1.25rem;margin-bottom:6px}
.contact-list .big{display:inline-flex;align-items:center;gap:8px;font:600 1.375rem/1.3 var(--sans);color:var(--navy);text-decoration:none}
.contact-list .big .icon{color:var(--teal)}
.contact-list .big:hover{color:var(--teal-deep)}
.contact-list p{color:var(--ink-2)}
.contact-list address{font-style:normal;line-height:1.6}

@media (max-width:1060px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .two-col{grid-template-columns:minmax(0,1fr);gap:36px}
  .cta-card{grid-template-columns:minmax(0,1fr)}
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-list{grid-template-columns:minmax(0,1fr)}
  .page-head{padding-block:28px 40px}
}
@media (max-width:560px){
  .tiles{grid-template-columns:minmax(0,1fr)}
  .cta-card{padding:24px 18px}
}
.foot .foot-h{font:700 .8125rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:14px}
.svc-group > .svc-gh{font:700 .875rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:16px}
.svc .svc-h{font:600 1.1875rem/1.25 var(--serif);color:var(--navy);margin:0}
.svc li{scroll-margin-top:72px}
.steps-on-paper li{border:1px solid var(--line)}
.talk-first{margin-top:0}
.survey .wrap > form{order:0}
@media (max-width:860px){.survey .wrap > form{order:-1}}
.contact-list .big.line{font-size:1.125rem;overflow-wrap:anywhere}
.contact-list li > p a{font-weight:600}

/* ---------- Amendment 4: short on phones ---------- */
.swipe{display:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* folds: <details>/<summary>, work with JavaScript off */
.fold{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md)}
.fold-sum{display:flex;align-items:center;gap:14px;min-height:56px;padding:6px 16px;cursor:pointer;list-style:none;border-radius:var(--r-md)}
.fold-sum::-webkit-details-marker{display:none}
.fold-sum::marker{content:""}
.fold-sum:hover .chev{color:var(--teal-deep)}
.fold-sum:hover .svc-h,.fold-sum:hover .fold-title{color:var(--teal-deep)}
.fold-sum:focus-visible{border-radius:var(--r-md);outline-offset:2px}
.chev{margin-left:auto;color:var(--teal);transition:transform .15s}
.fold[open] > .fold-sum .chev{transform:rotate(180deg)}
.fold-body{padding:0 16px 18px}
.fold-title{font:600 1.125rem/1.3 var(--serif);color:var(--navy)}
.fold-card .fold-body{padding-top:6px}
.fold-card .steps-foot{margin-top:18px}

/* services: one fold per service */
.svc{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:12px}
.svc > li{display:block;padding:0;border:0;background:transparent}
.svc .fold-body p{grid-column:auto;margin-top:0}
.svc .fold-body .svc-act{margin-top:14px}

/* home: two doorways and one line of the quote */
.doors{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.door{display:flex;flex-direction:column;height:100%;background:var(--card);border:1px solid var(--card);border-radius:var(--r-lg);padding:24px;color:var(--ink);text-decoration:none;transition:border-color .15s}
.door:hover{border-color:var(--teal-soft);color:var(--ink)}
.door:focus-visible{border-radius:var(--r-lg)}
.door-eyebrow{font:700 .8125rem/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.door-h{margin-top:8px;font:600 1.625rem/1.2 var(--serif);color:var(--navy)}
.door-p{margin-top:8px;color:var(--ink-2);font-size:1rem;line-height:1.55}
.door-icons{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;color:var(--teal)}
.door-icons .icon{width:36px;height:36px;padding:7px;border-radius:10px;background:var(--mist)}
.thumbs{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.thumbs img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px}
.door-go{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:16px;font-weight:600;color:var(--teal)}
.door:hover .door-go{color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px}
.quote-line{margin:28px auto 0;max-width:40em;text-align:center}
.quote-line blockquote{margin:0}
.quote-line blockquote p{font:italic 500 1.25rem/1.45 var(--serif);color:var(--navy)}
.quote-line figcaption{margin-top:8px;font-size:.9375rem;color:var(--ink-2)}
.quote-line figcaption a{font-weight:600}

@media (max-width:560px){
  :root{--logo-h-foot:88px}
  .band{padding-block:36px}
  .page-head{padding-block:20px 24px}
  .page-head .lead{margin-top:10px}
  .head{margin-bottom:18px}
  .hero{padding-block:16px 32px}
  .hero .wrap{gap:18px}
  .lead{margin-top:14px}
  .actions{margin-top:20px}
  .rv-mini{margin-top:16px}
  /* the three proofs: one soft card, three lines */
  .assure{margin-top:18px;gap:0;background:var(--mist);border-radius:var(--r-md);padding:4px 14px}
  .assure li{background:transparent;padding:9px 0;border-radius:0}
  .assure li + li{border-top:1px solid var(--teal-soft)}
  .svc{grid-template-columns:minmax(0,1fr);gap:8px}
  .svc-group + .svc-group{margin-top:24px}
  .doors{grid-template-columns:minmax(0,1fr);gap:12px}
  .door{padding:18px}
  .door-h{font-size:1.375rem}
  .quote-line{margin-top:20px}
  .quote-line blockquote p{font-size:1.0625rem}
  .cta{padding-block:4px 32px}
  .cta-card{padding:18px 16px;gap:12px}
  .cta-card h2{font-size:1.5rem}
  .cta-card .actions{gap:8px 14px}
  .facts{gap:8px}
  .facts li{padding:10px 14px}
  .two-col{gap:20px}
  /* photo sequences: one strip that scrolls inside its own box, never the page */
  .frames,.frames-4,.jobs .frames{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 10px) / 2);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-bottom:10px;gap:10px}
  .frames > li{scroll-snap-align:start}
  .frames img{aspect-ratio:4/3}
  .seq{padding:16px 14px}
  .seq > p{margin-bottom:12px}
  .jobs{gap:12px;margin-top:12px}
  .seq.narrow .frames{max-width:none}
  .seq.has-swipe{position:relative}
  .seq.has-swipe > h2,.seq.has-swipe > h3{padding-right:72px}
  .swipe{display:inline-flex;position:absolute;top:18px;right:14px;align-items:center;gap:4px;font-size:.8125rem;font-weight:600;color:var(--teal)}
  /* compact footer: contact beside the logo, then one wrapped link list, then the legal line */
  .foot{padding-block:28px 20px}
  .foot-grid{grid-template-columns:auto minmax(0,1fr);gap:16px 20px}
  .foot-logo{grid-column:auto}
  .foot-grid > div:nth-child(n+3){grid-column:1/-1}
  .foot .foot-h{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .foot ul{gap:0}
  .foot-grid > div:nth-child(n+3) ul{display:flex;flex-wrap:wrap;gap:0 16px}
  .foot-grid > div:nth-child(4){margin-top:-16px}
  .legal{margin-top:14px;padding-top:12px;font-size:.8125rem;line-height:1.5}
  .foot-grid > div:nth-child(2) a{font-size:.9375rem}
  .assure strong{display:inline}
  .frames figcaption{font-size:.875rem;line-height:1.35;margin-top:6px}
  .door-icons{margin-top:12px;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}
  .door-icons .icon{width:100%;height:auto;aspect-ratio:1;padding:18%}
  .thumbs{margin-top:12px}
  .door-go{padding-top:12px}
}
@media (max-width:360px){
  .hero .lead{font-size:1.0625rem}
  .paul img{width:72px;height:99px}
  .hero{padding-block:12px 24px}
  .hero .wrap{gap:14px}
  .doors-band{padding-block:28px}
  .assure li{padding:8px 0}
}