/* Wards Wardrobes - Design B "the frontier case" (DESIGN, 16 Oct 2026). One stylesheet for home + shower screens. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/archivo-var.woff2) format('woff2')}
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/archivo-black.woff2) format('woff2')}
:root{
  --ground:#0F1110;--paper:#F4F3EE;--lime:#56EA00;--orange:#FF563C;--green-text:#1A6B1A;
  --ink:#1B1D1B;--ink-2:#4A4C47;--grey:#B9B7AF;--panel:#171A18;
  --display:'Archivo Black','Archivo',Arial Black,Arial,sans-serif;
  --sans:'Archivo',Arial,Helvetica,sans-serif;
  --gut:clamp(18px,4vw,56px);--max:1440px;--hdr:76px;
  --ease:cubic-bezier(.2,.7,.1,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--hdr) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.6 var(--sans);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,blockquote,figure{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--lime);color:var(--ground);padding:10px 16px;font-weight:800;text-decoration:none}
.skip:focus{top:12px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:52px;padding:0 26px;border-radius:999px;
  font:800 15px/1 var(--sans);letter-spacing:.02em;text-decoration:none;white-space:nowrap;border:2px solid transparent;
  transition:transform .25s var(--ease),background-color .25s,color .25s,box-shadow .25s}
.btn-lime{background:var(--lime);color:var(--ground)}
.btn-lime:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(86,234,0,.55)}
.btn-call{background:#fff;color:var(--ground);border-color:var(--ground)}
.on-dark .btn-call{border-color:#fff}
.btn-call:hover{background:var(--ground);color:#fff;border-color:#fff}
.btn .arr{display:inline-block;transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}

/* ---------- Wardy's logo (Design A markup and look, unchanged) ---------- */
.logo-mark{font-size:15px;width:8.1em;display:inline-flex;flex-direction:column;border-radius:.32em;border:.11em solid #fff;
  background:#1E7A1C;overflow:hidden;flex-shrink:0}
.logo-tiles{display:flex;gap:.14em;padding:.28em .28em 0}
.logo-tile{flex:1;aspect-ratio:1;border-radius:.16em;background:#6C6C6C;display:flex;align-items:center;justify-content:center;
  color:#fff;font:800 .8em/1 var(--display);box-shadow:inset 0 -.05em .1em rgba(0,0,0,.35),inset 0 .05em 0 rgba(255,255,255,.15)}
.logo-band{margin-top:.28em;background:#0F1110;color:#EDEDED;text-align:center;font:800 .385em/1.3 var(--sans);letter-spacing:.09em;padding:.5em .3em .6em;text-transform:uppercase}

/* ---------- header: glass, sticky, quote always in reach ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--hdr);color:#fff;
  background:rgba(15,17,16,.78);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,.08);transition:background-color .35s,border-color .35s}
html.js .hdr.top{background:linear-gradient(180deg,rgba(15,17,16,.82),rgba(15,17,16,.35));border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.hdr-in{height:100%;display:flex;align-items:center;gap:20px;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.brandlink{display:inline-flex;text-decoration:none}
.nav{display:flex;gap:4px;margin-left:12px}
.nav a{position:relative;padding:10px 14px;font:700 15px/1 var(--sans);text-decoration:none;color:#fff;border-radius:999px;transition:background-color .2s}
.nav a:hover,.nav a[aria-current]{background:rgba(255,255,255,.12)}
.nav a[aria-current]::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;background:var(--lime)}
.hdr-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.hdr .phone{font:800 15px/1 var(--sans);text-decoration:none;color:#fff;padding:10px 8px;white-space:nowrap}
.hdr .phone span{display:block;font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#E6E5DF;margin-bottom:4px}
.hdr .btn{min-height:44px;padding:0 20px;font-size:14px}
.icon-btn{display:none;width:44px;height:44px;border-radius:50%;align-items:center;justify-content:center;background:rgba(255,255,255,.12);color:#fff;text-decoration:none}
.icon-btn svg{width:20px;height:20px}
/* menu: <details> so it works with JavaScript off */
.menu{position:relative}
.menu>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;
  border:1.5px solid rgba(255,255,255,.4);font:800 14px/1 var(--sans);position:relative;z-index:2}
.menu>summary::-webkit-details-marker{display:none}
.menu .bars{display:inline-grid;gap:4px}.menu .bars i{display:block;width:16px;height:2px;background:currentColor;transition:transform .3s var(--ease),opacity .2s}
.menu[open] .bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}.menu[open] .bars i:nth-child(2){opacity:0}.menu[open] .bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu-panel{position:fixed;inset:var(--hdr) 0 0 0;background:rgba(15,17,16,.96);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  overflow:auto;padding:28px var(--gut) 48px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px 56px;align-content:start}
.menu-panel h2{font:700 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin:6px 0 14px}
.menu-panel a{display:block;color:#fff;text-decoration:none}
.menu-big a{font:400 clamp(32px,4.4vw,60px)/1.12 var(--display);letter-spacing:-.02em;padding:2px 0}
.menu-big a:hover{color:var(--lime)}
.menu-small a{font:600 19px/1.3 var(--sans);padding:7px 0}
.menu-small a:hover{color:var(--lime)}
.menu-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

/* ---------- shared section language ---------- */
section{position:relative;isolation:isolate}
.dark{background:var(--ground);color:var(--paper)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:700 14px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--green-text)}
.eyebrow::before{content:"";width:28px;height:2px;background:currentColor}
.dark .eyebrow,.on-photo .eyebrow{color:var(--lime)}
.h2{font:800 clamp(38px,5.6vw,84px)/.98 var(--sans);letter-spacing:-.035em;margin-top:18px;max-width:16ch;text-wrap:balance}
.lede{font:400 clamp(19px,1.6vw,23px)/1.5 var(--sans);color:var(--ink-2);max-width:56ch;margin-top:22px}
.dark .lede{color:var(--grey)}
.pad{padding:clamp(80px,11vw,168px) 0}

/* ---------- HERO: a photo edge to edge, a short big headline ---------- */
.hero{min-height:100vh;min-height:100svh;display:grid;align-items:end;color:#fff;background:var(--ground);overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(0deg,rgba(15,17,16,.94) 0%,rgba(15,17,16,.78) 34%,rgba(15,17,16,.25) 66%,rgba(15,17,16,.35) 100%),
  linear-gradient(90deg,rgba(15,17,16,.6) 0%,rgba(15,17,16,0) 65%)}
.hero-in{width:100%;max-width:var(--max);margin:0 auto;padding:calc(var(--hdr) + 80px) var(--gut) clamp(36px,6vw,72px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end}
.h1-brand{display:table;font:700 clamp(13px,1.15vw,16px)/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--lime);margin-bottom:20px;padding:9px 14px;border-radius:10px;background:rgba(15,17,16,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.h1-big{display:block;font:400 clamp(52px,9.4vw,152px)/.88 var(--display);letter-spacing:-.035em;text-wrap:balance;max-width:11ch}
.h1-big.long{font-size:clamp(44px,7vw,112px);max-width:13ch}
.hero-sub{font:500 clamp(18px,1.55vw,22px)/1.5 var(--sans);color:#E6E5DF;max-width:44ch;margin-top:26px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-ctas .btn{min-height:56px;font-size:16px}
.hero-side{display:grid;gap:12px;justify-items:end;text-align:right}
.chip-glass{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;font:600 15px/1.35 var(--sans);color:#fff;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);max-width:300px;text-align:left}
.chip-glass .dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 5px rgba(86,234,0,.18)}
.hero-cap{font:500 13px/1.4 var(--sans);color:#D9D8D2;max-width:300px}
.scrollcue{display:inline-flex;align-items:center;gap:10px;font:700 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#D9D8D2;text-decoration:none;margin-top:6px}
.scrollcue i{width:1px;height:38px;background:linear-gradient(var(--lime),transparent);display:block}

/* ---------- intro: Wardy says hello ---------- */
.intro-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:center}
.intro-say{font:500 clamp(23px,2.35vw,36px)/1.38 var(--sans);letter-spacing:-.012em;color:var(--ink)}
.intro-say strong{font-weight:800}
.intro-say .hl{background:linear-gradient(transparent 62%,rgba(86,234,0,.45) 62%);padding:0 .08em}
.intro-photos{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ph{position:relative;overflow:hidden;border-radius:18px;background:#DDDBD3}
.ph img{width:100%;height:100%;object-fit:cover}
.intro-photos .ph-a{grid-column:1/3;aspect-ratio:5/4}
.intro-photos .ph-b{aspect-ratio:4/5}
.cap{font:500 14px/1.45 var(--sans);color:var(--ink-2);margin-top:10px}
.intro-sign{display:flex;flex-direction:column;justify-content:end;gap:8px;padding:18px;border-radius:18px;background:var(--ground);color:var(--paper)}
.intro-sign b{font:400 28px/1 var(--display);color:var(--lime)}
.intro-sign span{font:500 15px/1.4 var(--sans);color:var(--grey)}

/* ---------- services bento ---------- */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(380px,auto);gap:16px;margin-top:clamp(40px,5vw,72px)}
.tile{position:relative;overflow:hidden;border-radius:22px;color:#fff;background:var(--ground);display:flex;flex-direction:column;justify-content:end;
  min-height:300px;isolation:isolate;text-decoration:none}
.tile>.tile-img{position:absolute;inset:0;z-index:-2}
.tile>.tile-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),opacity .45s}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(15,17,16,.93) 0%,rgba(15,17,16,.72) 38%,rgba(15,17,16,.05) 72%)}
.tile:hover>.tile-img img,.tile:focus-within>.tile-img img{transform:scale(1.05)}
.tile-body{padding:clamp(20px,2.2vw,32px)}
.tile h3{font:800 clamp(24px,2.2vw,34px)/1.05 var(--sans);letter-spacing:-.02em}
.tile p{font:400 16px/1.5 var(--sans);color:#E3E2DC;margin-top:10px;max-width:46ch}
.tile .more{display:inline-flex;align-items:center;gap:10px;margin-top:16px;font:800 15px/1 var(--sans);color:var(--lime);text-decoration:none}
.tile .more::after{content:"";position:absolute;inset:0;z-index:1}
.tile .more .arr{transition:transform .3s var(--ease)}.tile:hover .more .arr{transform:translateX(6px)}
.tile-big{grid-column:1/3;grid-row:1/3;min-height:776px}
.tile-big h3{font-size:clamp(34px,3.6vw,58px)}
.tile-tall{grid-column:3/4;grid-row:1/3}
.tile-sb{grid-column:4/5;grid-row:1/2}
.tile-mi{grid-column:4/5;grid-row:2/3}
.tile-sb::after{background:linear-gradient(0deg,rgba(15,17,16,.94) 0%,rgba(15,17,16,.86) 60%,rgba(15,17,16,.55) 100%)}
.tile-sb h3{font-size:clamp(24px,2vw,30px)}
.swatches{display:none;gap:8px;margin-top:14px;position:relative;z-index:2}
html.js .swatches{display:flex}
.swatches button{width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.75);background:var(--c);cursor:pointer;padding:0;transition:transform .2s}
.swatches button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--ground),0 0 0 5px var(--lime);transform:scale(1.08)}
.swatch-name{font:600 13px/1 var(--sans);color:#E3E2DC;margin-top:10px;min-height:13px;display:none}
html.js .swatch-name{display:block}

/* ---------- before / after (drag) ---------- */
.ba-sec .ba-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(28px,5vw,80px);align-items:center;margin-top:0}
.ba{margin:0}
.ba-stage{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ba-stage .ba-img{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:3/2}
.ba-stage .ba-img img{width:100%;height:100%;object-fit:cover}
.ba-tag{position:absolute;top:14px;padding:8px 14px;border-radius:999px;font:800 13px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;z-index:3;pointer-events:none}
.ba-tag-b{left:14px;background:rgba(15,17,16,.82);color:#fff}
.ba-tag-a{right:14px;background:var(--lime);color:var(--ground)}
.ba-range,.ba-handle{display:none}
/* live (JS) version: one frame, drag to compare */
.ba.live .ba-stage{display:block;border-radius:22px;overflow:hidden;aspect-ratio:3/2;--p:50%;touch-action:pan-y}
.ba.live .ba-img{position:absolute;inset:0;border-radius:0;aspect-ratio:auto}
.ba.live .ba-before{z-index:2;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba.live .ba-range{display:block;position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:5}
.ba.live .ba-handle{display:block;position:absolute;top:0;bottom:0;left:var(--p);width:3px;margin-left:-1.5px;background:#fff;z-index:4;pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.ba.live .ba-handle::after{content:"";position:absolute;top:50%;left:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;
  background:rgba(255,255,255,.22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center/26px no-repeat;
  border:2px solid #fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ba.live .ba-range:focus-visible~.ba-handle::after{outline:3px solid var(--lime);outline-offset:3px}
.ba figcaption{font:500 14px/1.45 var(--sans);color:var(--ink-2);margin-top:12px}
.dark .ba figcaption{color:var(--grey)}
.ba-hint{display:none;font:700 14px/1 var(--sans);color:var(--green-text);margin-top:22px;align-items:center;gap:10px}
html.js .ba-hint{display:inline-flex}
.dark .ba-hint{color:var(--lime)}

/* ---------- range strip ---------- */
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,24%);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--gut) 18px;
  margin:clamp(40px,5vw,64px) calc(var(--gut) * -1) 0;scrollbar-width:thin}
.strip figure{scroll-snap-align:start}
.strip .ph{aspect-ratio:4/5;border-radius:18px}
.strip figcaption{font:700 16px/1.3 var(--sans);margin-top:12px}

/* ---------- how a job comes together (no numbers; a line that fills as you scroll) ---------- */
.how-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(40px,7vw,120px)}
.how-head{position:sticky;top:calc(var(--hdr) + 40px);align-self:start}
.steps{position:relative;list-style:none;margin:0;padding:0 0 0 38px}
.steps::before,.steps::after{content:"";position:absolute;left:6px;top:10px;bottom:10px;width:2px;background:rgba(185,183,175,.22)}
.steps::after{background:var(--lime);transform-origin:top;transform:scaleY(var(--fill,1))}
html.js .steps::after{transform:scaleY(var(--fill,0))}
.step{position:relative;padding:0 0 clamp(44px,6vw,80px)}
.step:last-child{padding-bottom:0}
.step::before{content:"";position:absolute;left:-38px;top:8px;width:14px;height:14px;border-radius:50%;background:var(--ground);border:2px solid var(--lime)}
.step h3{font:800 clamp(26px,2.8vw,42px)/1.08 var(--sans);letter-spacing:-.02em;color:#fff}
.step p{font:400 clamp(17px,1.35vw,20px)/1.55 var(--sans);color:var(--grey);margin-top:12px;max-width:44ch}

/* ---------- giant quote ---------- */
.bigquote{background:var(--lime);color:var(--ground);overflow:hidden}
.bigquote blockquote{font:400 clamp(44px,8vw,132px)/.95 var(--display);letter-spacing:-.04em;max-width:14ch;text-wrap:balance}
.bigquote.dq{background:var(--ground);color:#fff}
.bigquote.dq blockquote .w{color:#8C8F88;transition:color .5s}
.bigquote.dq blockquote .w.lit{color:#fff}
.bigquote blockquote .w{transition:color .5s}
.bigquote .by{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:baseline;margin-top:clamp(28px,4vw,48px);font:600 clamp(18px,1.6vw,23px)/1.4 var(--sans)}
.bigquote .by b{font:400 1.1em/1 var(--display)}
.bigquote.dq .by b{color:var(--lime)}

/* ---------- where we work ---------- */
.towns{overflow:hidden;margin-top:clamp(36px,5vw,64px);border-top:1px solid rgba(15,17,16,.14);border-bottom:1px solid rgba(15,17,16,.14);padding:22px 0}
.towns-track{display:flex;width:max-content;animation:marq 48s linear infinite}
.towns:hover .towns-track{animation-play-state:paused}
.towns ul{display:flex;list-style:none;margin:0;padding:0}
.towns li{font:400 clamp(40px,5.6vw,88px)/1 var(--display);letter-spacing:-.03em;padding:0 .45em;white-space:nowrap;color:var(--ink)}
.towns li::after{content:"";display:inline-block;width:.22em;height:.22em;border-radius:50%;background:var(--lime);margin-left:.9em;vertical-align:middle}
.towns li.main{color:var(--green-text)}
@keyframes marq{to{transform:translateX(-50%)}}
.findus{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:16px;margin-top:clamp(36px,5vw,64px)}
.findus-card{border-radius:22px;background:var(--ground);color:var(--paper);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:14px;justify-content:space-between}
.findus-card .addr{font:800 clamp(24px,2.3vw,34px)/1.15 var(--sans);letter-spacing:-.015em}
.findus-card .hours{color:var(--grey);font-weight:500}
.findus-card .eyebrow{color:var(--lime)}
.mapcard{border-radius:22px;overflow:hidden;min-height:360px;background:#DDDBD3}
.mapcard iframe{display:block;width:100%;height:100%;min-height:360px;border:0;filter:grayscale(.3) contrast(1.05)}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:0 clamp(28px,4vw,64px);margin-top:clamp(36px,5vw,64px)}
.faq-col{border-top:2px solid var(--ink)}
.faq-grp{font:800 15px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--green-text);margin:22px 0 4px}
.faq details{border-bottom:1px solid rgba(15,17,16,.16)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:flex-start;padding:24px 0;
  font:700 clamp(19px,1.55vw,23px)/1.3 var(--sans);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;margin-top:-1px;
  background:var(--ground) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356EA00' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/16px no-repeat;
  transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq summary:hover{color:var(--green-text)}
.faq .a{padding:0 48px 26px 0;font:400 18px/1.6 var(--sans);color:var(--ink-2)}

/* ---------- notes rows ---------- */
.notes{margin-top:clamp(28px,4vw,48px);border-top:2px solid var(--ink)}
.notes a{display:grid;grid-template-columns:200px 1fr auto;gap:24px;align-items:center;padding:28px 0;border-bottom:1px solid rgba(15,17,16,.16);text-decoration:none;
  font:700 clamp(21px,2.1vw,32px)/1.2 var(--sans);letter-spacing:-.015em;transition:padding .35s var(--ease),color .2s}
.notes a:hover{padding-left:14px;color:var(--green-text)}
.notes .topic{font:700 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.notes .arr{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--lime);color:var(--ground);font-size:22px}

/* ---------- statement callout (shower page) ---------- */
.statement{font:500 clamp(24px,2.6vw,40px)/1.32 var(--sans);letter-spacing:-.015em;max-width:30ch}
.statement strong{font-weight:800}
.statement-sub{font:400 clamp(18px,1.4vw,21px)/1.55 var(--sans);color:var(--ink-2);max-width:56ch;margin-top:24px}

/* ---------- screen types (shower page) ---------- */
.types{display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:auto auto;gap:16px;margin-top:clamp(40px,5vw,72px)}
.types .tile{min-height:340px;cursor:default}
.types .tile:first-child{grid-row:1/3;min-height:700px}
.types .tile:nth-child(4){grid-column:2/4}

/* ---------- CTA band on a photo ---------- */
.cta{color:#fff;background:var(--ground);overflow:hidden}
.cta .hero-media{z-index:-2}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(15,17,16,.94) 0%,rgba(15,17,16,.82) 50%,rgba(15,17,16,.45) 100%)}
.cta h2{font:400 clamp(46px,7.4vw,120px)/.92 var(--display);letter-spacing:-.04em;max-width:12ch;text-wrap:balance}
.cta p{font:500 clamp(18px,1.5vw,22px)/1.5 var(--sans);color:#E6E5DF;max-width:46ch;margin-top:26px}

/* ---------- footer (Design A content) ---------- */
footer{position:relative;isolation:isolate;background:var(--ground);color:var(--grey);padding:clamp(64px,8vw,110px) 0 32px;font-size:15px}
footer .wrap{max-width:var(--max);padding:0 var(--gut)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:40px}
.footer-col{display:flex;flex-direction:column;gap:8px}
.footer-col h4{margin:0 0 8px;font:800 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#fff}
.footer-col a{color:var(--grey);text-decoration:none}
.footer-col a:hover{color:var(--lime)}
.footer-col p{margin:0}
.footer-about{font:600 20px/1.35 var(--sans)!important;color:#fff;max-width:22ch;margin-top:18px!important}
footer address p{margin:0}
.hairline{border:0;border-top:1px solid rgba(185,183,175,.18);margin:48px 0 24px}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;align-items:center}
.footer-legal{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:13px}
.studio-lockup{display:inline-flex;flex-direction:column;align-items:flex-start;gap:.45em;text-decoration:none;font-size:11px;opacity:.85}
.studio-lockup .madeby{font:700 .72em var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#ECEAE8}
.studio-lockup .mark-cs{display:block;height:22px;width:auto}

/* ---------- motion (JS adds .js; nothing is hidden without it) ---------- */
html.js [data-rv]{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.js [data-rv].in{opacity:1;transform:none}
html.js [data-rv="2"]{transition-delay:.12s}html.js [data-rv="3"]{transition-delay:.24s}html.js [data-rv="4"]{transition-delay:.36s}
.hero-media img{animation:kb 9s var(--ease) both}
@keyframes kb{from{transform:scale(1.09)}to{transform:scale(1)}}
.hero .h1-big,.hero .h1-brand,.hero-sub,.hero-ctas,.hero-side{animation:up 1s var(--ease) both}
.hero .h1-brand{animation-delay:.05s}.hero .h1-big{animation-delay:.15s}.hero-sub{animation-delay:.3s}.hero-ctas{animation-delay:.42s}.hero-side{animation-delay:.6s}
@keyframes up{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@supports (animation-timeline: scroll()){
  .hero-media{animation:par linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  @keyframes par{to{transform:translateY(18%)}}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  html.js [data-rv]{opacity:1;transform:none}
  .towns-track{flex-wrap:wrap;width:auto}.towns-track ul+ul{display:none}.towns ul{flex-wrap:wrap;row-gap:12px}
  html.js .steps::after{transform:scaleY(1)}
  .bigquote.dq blockquote .w{color:#fff}
}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .nav{display:none}
  .hdr .phone{display:none}
  .icon-btn{display:inline-flex}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile-big{grid-column:1/3;grid-row:auto;min-height:520px}
  .tile-tall,.tile-sb,.tile-mi{grid-column:auto;grid-row:auto;min-height:420px}
  .menu-panel{grid-template-columns:1fr 1fr}
  .menu-big{grid-column:1/3}
}
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr}
  .hero-side{justify-items:start;text-align:left}
  .intro-grid,.how-grid,.ba-sec .ba-wrap,.findus{grid-template-columns:1fr}
  .how-head{position:static}
  .types{grid-template-columns:1fr 1fr}
  .types .tile:first-child{grid-column:1/3;grid-row:auto;min-height:480px}
  .types .tile:nth-child(4){grid-column:auto}
  .faq{--cols:1!important}
  .footer-grid{grid-template-columns:1fr 1fr}
  .notes a{grid-template-columns:1fr auto}.notes .topic{grid-column:1/3}
}
@media (max-width:640px){
  :root{--hdr:68px}
  body{font-size:17px}
  .logo-mark{font-size:12.5px}
  .hdr-in{gap:8px}
  .hdr .btn{padding:0 14px;font-size:13.5px}
  .menu>summary{padding:0 12px}.menu>summary .lbl{display:none}
  .menu>summary{width:44px;justify-content:center;padding:0}
  .hero-in{padding-top:calc(var(--hdr) + 140px)}
  .h1-big{font-size:44px}.h1-big.long{font-size:38px}
  .hero::after{background:linear-gradient(0deg,rgba(15,17,16,.95) 0%,rgba(15,17,16,.85) 52%,rgba(15,17,16,.2) 82%,rgba(15,17,16,.45) 100%)}
  .hero-ctas .btn{flex:1 1 100%}
  .hero-side .hero-cap,.scrollcue{display:none}
  .bento{grid-template-columns:1fr}
  .tile-big{grid-column:auto;min-height:480px}
  .tile-tall,.tile-sb,.tile-mi{min-height:380px}
  .types{grid-template-columns:1fr}
  .types .tile:first-child{grid-column:auto;min-height:440px}
  .types .tile{min-height:340px}
  .ba-stage{grid-template-columns:1fr}
  .strip{grid-auto-columns:72%}
  .menu-panel{grid-template-columns:1fr}.menu-big{grid-column:auto}
  .footer-grid{grid-template-columns:1fr}
  .faq .a{padding-right:0}
  .cta .btn{flex:1 1 100%}
}


/* ===== f3: whole-site conversion system (DESIGN 16 Oct 2026, Chris 18:39: "an absolute powerhouse for converting customers").
   Appended after the f2 sheet. Components: home H1, trust strip, next steps, quote form, prompts, page sections for the
   service pages, split hero, contact rows. Light background kept (f2). Nothing fixed except the f2 header. */

/* home H1 (BOSS ruling 1: Design A's H1 text exactly, big lead words + smaller tail) */
.display-line{display:table;font:400 clamp(15px,1.4vw,20px)/1.2 var(--display);letter-spacing:.01em;color:var(--lime);margin-bottom:18px;
  padding:9px 14px;border-radius:10px;background:rgba(15,17,16,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.h1-home{max-width:none}
.h1-home .h1-lead{display:block;max-width:16ch;font:400 clamp(44px,6.6vw,108px)/.92 var(--display);letter-spacing:-.035em;text-wrap:balance}
.h1-home .h1-tail{display:block;font:700 clamp(21px,2.3vw,34px)/1.18 var(--sans);letter-spacing:-.012em;color:#F1F0EA;margin-top:18px;max-width:26ch;text-wrap:balance}
.hero .h1-home,.hero .display-line{animation:up 1s var(--ease) both}.hero .display-line{animation-delay:.05s}.hero .h1-home{animation-delay:.15s}

/* page heroes: long Design A H1s at a size that keeps the ask on the first screen */
.hero-page .h1-big.long{font-size:clamp(34px,4.5vw,74px);line-height:.96;max-width:19ch}
.hero-page .hero-sub{font-size:clamp(17px,1.3vw,20px);max-width:62ch}
.hero-split .h1-big.long{font-size:clamp(34px,4.6vw,76px);line-height:.96;max-width:16ch}
.hero-page{min-height:92vh;min-height:92svh}

/* trust strip */
.trust-sec{background:var(--paper);border-bottom:1px solid rgba(15,17,16,.12)}
.trust{list-style:none;margin:0;padding:22px 0;display:flex;flex-wrap:wrap;gap:12px 34px;align-items:center}
.trust li{display:flex;align-items:baseline;gap:7px;font:500 16px/1.3 var(--sans);color:var(--ink-2)}
.trust li::before{content:"";flex:none;align-self:center;width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px rgba(86,234,0,.22)}
.trust b{font-weight:800;color:var(--ink)}

/* steps on paper (what happens next) + the home "free" line */
.steps.on-paper::before{background:rgba(15,17,16,.16)}
.steps.on-paper .step::before{background:var(--paper)}
.steps.on-paper .step h3{color:var(--ink)}
.steps.on-paper .step p{color:var(--ink-2)}
.steps.on-paper::after{background:#2E9E14}
.free-line{margin-top:clamp(40px,5vw,64px);padding-top:28px;border-top:1px solid rgba(185,183,175,.25);display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center}
.free-line p{font:700 clamp(19px,1.6vw,23px)/1.4 var(--sans);color:#fff;max-width:36ch}

/* prompts: the ask, right where interest peaks */
.prompt{margin-top:clamp(36px,4.5vw,56px);display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;padding:clamp(22px,2.6vw,32px);
  border-radius:22px;background:rgba(86,234,0,.10);border:1px solid rgba(86,234,0,.45)}
.prompt p{font:600 clamp(18px,1.5vw,22px)/1.45 var(--sans);max-width:52ch;flex:1 1 320px}
.dark .prompt{background:rgba(86,234,0,.08)}
.dark .prompt p{color:#fff}
.picker-line{font:500 clamp(22px,2.2vw,32px)/1.35 var(--sans);color:#fff;max-width:40ch;margin:22px 0 clamp(36px,4vw,56px)}
.picker-line a{color:var(--lime);text-underline-offset:5px}

/* what to send */
.send{margin-top:28px;padding-top:24px;border-top:1px solid rgba(185,183,175,.25)}
.send-h{font:800 15px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--lime)}
.send-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.send-list li,.send .send-one{font:400 17px/1.5 var(--sans);color:#E3E2DC}
.send b{color:#fff}
.send-close{margin-top:12px;font:600 16px/1.5 var(--sans);color:var(--grey)}
.send-one{margin-top:26px;font:400 18px/1.55 var(--sans);color:var(--ink-2);max-width:60ch;padding-left:18px;border-left:3px solid var(--lime)}
.send-one b{color:var(--ink)}
.send-one.on-d{color:var(--grey)}.send-one.on-d b{color:#fff}

/* quote section + form */
.quote-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,96px);align-items:start}
.quote-min{margin-top:16px;font:600 17px/1.5 var(--sans);color:#fff}
.form-off{margin-top:16px;font:400 16px/1.5 var(--sans);color:var(--grey)}
.form-off a,.quote-side .send a{color:var(--lime)}
.routes{display:grid;gap:10px;margin-top:28px}
.route{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 20px;border-radius:16px;text-decoration:none;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);transition:background-color .25s,border-color .25s}
.route:hover{background:rgba(86,234,0,.12);border-color:var(--lime)}
.route-k{font:800 13px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--lime)}
.route-v{font:800 clamp(17px,1.5vw,21px)/1.2 var(--sans);color:#fff;overflow-wrap:anywhere}
.qcard{background:var(--paper);color:var(--ink);border-radius:26px;padding:clamp(22px,3vw,44px);box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.qf fieldset{border:0;margin:0;padding:0;min-width:0}
.qf .frow{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.qf .field{margin-bottom:18px}
.qf label{display:block;font:800 15px/1.3 var(--sans);margin-bottom:7px;color:var(--ink)}
.qf label em{font:600 12px/1 var(--sans);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--green-text);margin-left:6px}
.qf input,.qf select,.qf textarea{width:100%;font:500 17px/1.4 var(--sans);color:var(--ink);background:#fff;border:2px solid #C9C7BF;border-radius:12px;padding:13px 14px;min-height:52px}
.qf textarea{resize:vertical;min-height:120px}
.qf input::placeholder,.qf textarea::placeholder{color:#6B6D67}
.qf input:focus,.qf select:focus,.qf textarea:focus{outline:none;border-color:var(--ground);box-shadow:0 0 0 3px var(--lime)}
.qf [aria-invalid="true"]{border-color:#B3261E}
.qf .selwrap{position:relative}
.qf .helper{font:400 14px/1.45 var(--sans);color:var(--ink-2);margin-top:7px}
.qf .helper a,.qf .demo-note a{color:var(--green-text);font-weight:700}
.qf .ferr{font:700 14px/1.4 var(--sans);color:#B3261E;margin-top:6px}
.qf .form-errsum{font:700 15px/1.4 var(--sans);color:#B3261E;margin-bottom:16px;padding:12px 14px;border-radius:10px;background:#FBE9E7}
.btn-block{width:100%}.btn-tall{min-height:60px;font-size:17px}
.qf button[type=submit]{border:0;cursor:pointer;margin-top:4px}
.qf .demo-note{font:400 14px/1.5 var(--sans);color:var(--ink-2);margin-top:14px}
.qf .form-off-btn{font:600 15px/1.45 var(--sans);color:var(--ink);margin-top:14px;padding:12px 14px;border-radius:10px;background:#ECEAE2}
.qf fieldset:disabled{opacity:.62}
.qf fieldset:disabled button{cursor:not-allowed}
.wq-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.formstatus:empty{display:none}
.formstatus{margin-top:16px;padding:18px;border-radius:14px;background:#E9F7DE;color:var(--ink);font:500 17px/1.55 var(--sans)}
.formstatus.is-fail{background:#FBE9E7}
.formstatus a{color:var(--green-text);font-weight:800}
.formstatus .ty-h{font:400 clamp(26px,2.6vw,36px)/1.05 var(--display);letter-spacing:-.02em;margin-bottom:10px}
.formstatus p+p{margin-top:10px}
.formstatus .btn{margin-top:14px;color:var(--ground)}
.qf.sent fieldset,.qf.sent .form-off-btn{display:none}
.next-compact{margin-top:30px;padding-top:24px;border-top:1px solid rgba(185,183,175,.25)}
.next-compact .h3x{font:800 clamp(22px,2vw,28px)/1.15 var(--sans);color:#fff;margin-bottom:22px}
.next-compact .steps .step{padding-bottom:22px}
.next-compact .steps .step h3{font-size:19px;color:#fff}
.next-compact .steps .step p{font-size:16px;color:var(--grey);margin-top:6px}
.next-compact .steps.on-paper::before{background:rgba(185,183,175,.22)}
.next-compact .steps.on-paper .step::before{background:var(--ground)}
.next-compact .steps.on-paper::after{background:var(--lime)}

.send .send-one{margin-top:14px;padding-left:0;border-left:0;color:#E3E2DC}
.send .send-one b{color:#fff}
.hero-home .hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(15,17,16,.5) 0%,rgba(15,17,16,.3) 55%,rgba(15,17,16,0) 80%)}

/* split hero (about, contact) */
.hero-split{padding:calc(var(--hdr) + clamp(48px,7vw,110px)) 0 clamp(56px,7vw,110px);color:#fff}
.hs-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(32px,5vw,80px);align-items:center}
.hs-text .eyebrow{display:flex;color:var(--lime);margin-bottom:18px}
.hs-photo{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/5;background:#222}
.hs-photo img{width:100%;height:100%;object-fit:cover}
.hero-contact .hs-photo{aspect-ratio:5/4}
.hs-cap{position:absolute;left:12px;right:12px;bottom:12px;font:500 13px/1.4 var(--sans);color:#fff;background:rgba(15,17,16,.78);padding:8px 12px;border-radius:10px}
.hero-mail{margin-top:18px;font:600 16px/1.5 var(--sans);color:#E6E5DF}
.hero-mail a{color:var(--lime);text-underline-offset:4px}
.hero-split .hero-sub{color:#E6E5DF}

/* page sections */
.spec-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(36px,6vw,96px);align-items:start}
.bigl{display:grid;grid-template-columns:1fr 1fr;gap:28px;border-top:2px solid var(--ink);padding-top:22px}
.bigl h3{font:800 15px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--green-text);margin-bottom:12px}
.bigl ul{list-style:none;margin:0;padding:0}
.bigl li{font:800 clamp(20px,1.9vw,28px)/1.2 var(--sans);letter-spacing:-.015em;padding:10px 0;border-bottom:1px solid rgba(15,17,16,.14)}
.finishes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:clamp(36px,5vw,64px)}
.finish .ph{aspect-ratio:3/4;border-radius:18px}
.finish figcaption{font:800 clamp(18px,1.6vw,22px)/1.2 var(--sans);margin-top:12px;color:#fff}
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:clamp(36px,5vw,64px)}
.gallery .ph{aspect-ratio:4/3}
.gallery figcaption{font:600 16px/1.4 var(--sans);margin-top:10px;color:var(--ink-2)}
.gallery figcaption strong{color:var(--ink);margin-right:6px}
.ba-hint-a{display:inline-flex;margin-top:22px;font:600 16px/1.4 var(--sans);color:var(--green-text)}
.duo{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin-top:clamp(36px,5vw,64px)}
.duo .ph{aspect-ratio:4/3}
.duo figcaption{font:700 16px/1.3 var(--sans);margin-top:12px}
.ticks{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:34px;font:700 clamp(18px,1.5vw,21px)/1.4 var(--sans);color:#fff}
.ticks li::before{content:"";position:absolute;left:0;top:.28em;width:20px;height:11px;border-left:3px solid var(--lime);border-bottom:3px solid var(--lime);transform:rotate(-45deg)}
.callout-d{margin-top:28px;padding:20px 22px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);font:500 17px/1.55 var(--sans);color:#E3E2DC;max-width:60ch}
.callout-l{margin-top:26px;padding:18px 20px;border-radius:16px;background:rgba(86,234,0,.16);font:700 19px/1.45 var(--sans);max-width:50ch}
.tall-ph{aspect-ratio:4/5;border-radius:22px}
.ph-cap{position:absolute;left:12px;right:12px;bottom:12px;font:500 13px/1.4 var(--sans);color:#fff;background:rgba(15,17,16,.8);padding:8px 12px;border-radius:10px}
.quad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:clamp(36px,5vw,64px)}
.quad .tile{min-height:420px}
.tile.tile-text{background:#1D211F;border:1px solid rgba(255,255,255,.12);justify-content:space-between}
.tile.tile-text::after{display:none}
.glass-l .tile.tile-text{background:var(--ground)}
.points{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.points li{display:grid;gap:6px;padding:20px 0;border-bottom:1px solid rgba(15,17,16,.14)}
.points b{font:800 clamp(21px,1.9vw,27px)/1.2 var(--sans);letter-spacing:-.015em}
.points span{color:var(--ink-2)}
.letter{max-width:900px;padding:clamp(28px,4vw,56px);border-radius:26px;background:#fff;border:1px solid rgba(15,17,16,.1);
  font:500 clamp(21px,2vw,29px)/1.45 var(--sans)}
.letter .sig{margin-top:18px;font:400 clamp(26px,2.4vw,36px)/1 var(--display);color:var(--green-text)}

/* splashback picker */
.picker{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(24px,3.5vw,56px);margin-top:clamp(36px,5vw,64px);align-items:start}
.picker-stage .ph{aspect-ratio:3/2;border-radius:22px}
.picker-stage .ph img{transition:opacity .35s}
.picker-stage figcaption{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px;font:700 16px/1.3 var(--sans)}
.picker .swatch-name{display:inline!important;margin:0;font:inherit;color:inherit}
.cc-note{font-weight:500;color:var(--ink-2)}
.picker-side h3{font:800 clamp(26px,2.4vw,36px)/1.1 var(--sans);letter-spacing:-.02em}
.picker-side p{margin-top:14px;color:var(--ink-2)}
.swatches.swatches-lg{gap:12px;margin-top:24px;flex-wrap:wrap}
.swatches.swatches-lg button{width:58px;height:58px}
.sw-names{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font:700 15px/1.3 var(--sans);color:var(--ink-2)}
html.js .sw-names{display:none}

/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr) minmax(0,.9fr);gap:16px;margin-top:clamp(36px,5vw,64px);align-items:stretch}
.rows{margin:0;border-top:2px solid var(--ink)}
.rows div{display:grid;gap:4px;padding:18px 0;border-bottom:1px solid rgba(15,17,16,.14)}
.rows dt{font:800 13px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--green-text)}
.rows dd{margin:0;font:800 clamp(19px,1.7vw,24px)/1.25 var(--sans);overflow-wrap:anywhere}
.rows a{text-decoration-thickness:1px;text-underline-offset:4px}
.contact-grid .tall-ph{aspect-ratio:auto;min-height:420px}

/* FAQ on a dark section */
.dark .faq-col{border-top-color:rgba(255,255,255,.6)}
.dark .faq details{border-bottom-color:rgba(255,255,255,.16)}
.dark .faq summary{color:#fff}
.dark .faq summary:hover{color:var(--lime)}
.dark .faq .a{color:var(--grey)}
.dark .faq-grp{color:var(--lime)}

@media (max-width:1180px){
  .contact-grid{grid-template-columns:1fr 1fr}
  .contact-grid .findus-card{grid-column:1/-1}
}
@media (max-width:900px){
  .quote-grid,.spec-grid,.hs-grid,.picker{grid-template-columns:1fr}
  .hs-photo{max-width:520px}
  .finishes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quad{grid-template-columns:1fr}
}
@media (max-width:640px){
  .hero-in>div:first-child,.hs-text{display:flex;flex-direction:column;align-items:flex-start}
  .hero-in .hero-ctas,.hs-text .hero-ctas{order:4;width:100%}
  .hero-in .hero-sub,.hs-text .hero-sub{order:5}
  .hs-text .hero-mail{order:6}
  .hero-page .h1-big.long,.hero-split .h1-big.long{font-size:clamp(30px,8.6vw,40px)}
  .hero-page .hero-sub{font-size:16px;margin-top:18px}
  .hero-in .hero-ctas{margin-top:22px}
  .swatches.swatches-lg button{width:46px;height:46px}
  .trust{gap:10px 20px;padding:18px 0}
  .trust li{font-size:15px}
  .qf .frow{grid-template-columns:1fr}
  .gallery,.duo,.bigl,.contact-grid{grid-template-columns:1fr}
  .quad .tile{min-height:360px}
  .h1-home .h1-lead{font-size:clamp(40px,11.5vw,56px)}
  .contact-grid .tall-ph{min-height:0;aspect-ratio:4/5}
  .letter{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  .hero .h1-home,.hero .display-line{animation:none}
}
@media (max-width:640px){.cta::after{background:linear-gradient(180deg,rgba(15,17,16,.9),rgba(15,17,16,.82))}}

/* ================= run 2: towns, notes, 404 (DESIGN 16 Oct) ================= */
.cta .cta-extra{font-weight:700;color:#fff;margin-top:14px}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(36px,5vw,64px)}
.trio .ph{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/5;background:#ddd}
.trio .ph img{width:100%;height:100%;object-fit:cover}
.trio figcaption{position:absolute;left:12px;bottom:12px;font:700 14px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(15,17,16,.82);padding:9px 12px;border-radius:999px}
.findus-town{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.findus-town .findus-card{grid-column:auto}
.findus-btns{display:flex;flex-wrap:wrap;gap:10px}
.town-nav{display:flex;flex-direction:column;justify-content:center;border-top:2px solid var(--ink)}
.town-nav .eyebrow{margin:18px 0 6px}
.town-nav a{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid rgba(15,17,16,.16);font:800 clamp(24px,2.4vw,36px)/1.1 var(--sans);letter-spacing:-.02em;color:var(--ink);text-decoration:none;transition:padding .3s var(--ease),color .3s}
.town-nav a:hover,.town-nav a:focus-visible{padding-left:12px;color:var(--green-text)}
.town-nav .arr{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--lime);color:var(--ground);font-size:20px}
/* notes */
.note-hero{padding:calc(var(--hdr) + clamp(40px,6vw,96px)) 0 clamp(48px,6vw,96px);color:#fff}
.nh-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(28px,5vw,80px);align-items:end}
.note-back{display:inline-flex;gap:8px;font:700 15px/1 var(--sans);color:var(--lime);text-decoration:none;margin-bottom:26px}
.note-back:hover{text-decoration:underline}
.nh-text .eyebrow{display:flex;color:var(--lime);margin-bottom:16px}
.note-h1{font:400 clamp(36px,5vw,80px)/.96 var(--display);letter-spacing:-.035em;max-width:17ch;text-wrap:balance}
.nh-by{margin-top:22px;font:500 15px/1.4 var(--sans);color:var(--grey)}
.nh-photo{border-radius:24px;overflow:hidden;aspect-ratio:4/5;background:#222}
.nh-photo img{width:100%;height:100%;object-fit:cover}
.pad-note{padding:clamp(56px,7vw,112px) 0}
.note-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(32px,6vw,96px);align-items:start}
.note-body{max-width:68ch}
.note-body>p{font:400 clamp(18px,1.3vw,20px)/1.68 var(--sans);color:var(--ink);margin-top:20px}
.note-body>p:first-child{font-size:clamp(20px,1.6vw,24px);line-height:1.55;font-weight:500;margin-top:0}
.note-body>h2{font:800 clamp(26px,2.4vw,38px)/1.1 var(--sans);letter-spacing:-.02em;margin-top:clamp(40px,4.5vw,60px);text-wrap:balance}
.note-body a{color:var(--green-text);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.note-body .prompt a.btn{color:var(--ground);text-decoration:none}
.note-aside{position:sticky;top:calc(var(--hdr) + 24px)}
.na-card{background:var(--ground);color:var(--paper);border-radius:22px;padding:28px;display:flex;flex-direction:column;gap:14px}
.na-card .eyebrow{color:var(--lime)}
.na-card p{font:600 18px/1.45 var(--sans)}
.na-mail{color:var(--lime);font-weight:700;text-align:center}
.pad-s{padding:clamp(40px,5vw,72px) 0}
.note-related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}
.note-related a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 24px;border-radius:18px;background:#fff;border:1px solid rgba(15,17,16,.14);font:800 18px/1.3 var(--sans);color:var(--ink);text-decoration:none;transition:border-color .3s,transform .3s var(--ease)}
.note-related a:hover,.note-related a:focus-visible{border-color:var(--ink);transform:translateY(-2px)}
.note-related .arr{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--lime);color:var(--ground)}
.notes-quad .tile{min-height:520px}
.note-card .topic{display:inline-block;font:700 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--lime);margin-bottom:12px}
.note-card .nc-h{font:800 clamp(24px,2.2vw,34px)/1.08 var(--sans);letter-spacing:-.02em;max-width:20ch}
/* 404 */
.nf-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.nf-links a{padding:12px 18px;border-radius:999px;border:1.5px solid rgba(255,255,255,.7);color:#fff;font:700 16px/1 var(--sans);text-decoration:none;background:rgba(15,17,16,.45)}
.nf-links a:hover,.nf-links a:focus-visible{background:var(--lime);color:var(--ground);border-color:var(--lime)}
@media (max-width:1000px){
  .note-grid{grid-template-columns:1fr}
  .note-aside{position:static;max-width:520px}
  .findus-town{grid-template-columns:1fr}
}
@media (max-width:900px){
  .nh-grid{grid-template-columns:1fr}
  .nh-photo{aspect-ratio:16/10;max-width:620px}
  .note-related{grid-template-columns:1fr}
}
@media (max-width:640px){
  .trio{grid-template-columns:1fr 1fr}
  .trio .ph:last-child{grid-column:1/-1;aspect-ratio:16/10}
  .notes-quad .tile{min-height:440px}
}
.hero-eb{display:flex;color:var(--lime);margin:14px 0 16px}
.hero-eb{background:rgba(15,17,16,.85);padding:9px 14px;border-radius:8px;width:fit-content}
.note-card .topic{background:rgba(15,17,16,.88);padding:8px 12px;border-radius:999px}

/* f4 (INSPECTOR 7): the 4th screen-type tile (Sliders) spans both columns in the two-column band, no orphan cell */
@media (min-width:641px) and (max-width:900px){.types .tile:nth-child(4){grid-column:1/3}}


/* ===== f5 (DESIGN 16 Oct 2026, Chris's phone review of Design B: BOSS-FIX-LIST B1-B5, L1-L4) ===== */

/* B1 menu: the header's backdrop-filter made it the containing block for the position:fixed menu panel, so once the page
   scrolled (or on pages with no photo hero, e.g. /about/, /contact/) the panel was squeezed into the 68-76 px header.
   The blur now lives on a pseudo-element, so the header itself never creates a containing block and the panel always
   fills the screen below the header, from any scroll position, on every page. */
.hdr,html.js .hdr.top{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
html.js .hdr.top::before{-webkit-backdrop-filter:none;backdrop-filter:none}
.hdr:has(.menu[open]){background:rgba(15,17,16,.98)}
.menu-panel{z-index:99;overscroll-behavior:contain}

/* L4 the glass / sun-ray background is gone site-wide (f6: its rules deleted at source): plain dark ground */

/* L1 no green dots: trust rows become a typographic list split by hairline rules */
.trust li::before{content:none!important;display:none!important}
.trust{gap:0;padding:0}
.trust li{padding:20px 26px 20px 0;margin-right:26px;border-right:1px solid rgba(15,17,16,.2)}
.trust li:last-child{border-right:0;margin-right:0}
.chip-glass{border-radius:0;border:1px solid rgba(255,255,255,.4);border-width:1px 0;padding:12px 0;background:none!important;-webkit-backdrop-filter:none;backdrop-filter:none}
.chip-glass .dot{display:none}
.towns li::after{content:"/";width:auto;height:auto;border-radius:0;background:none;color:#B9B7AF;margin-left:.45em;vertical-align:baseline}

/* L2 the marker highlight is gone: emphasis is plain weight, the way a printed page does it */
.intro-say .hl,.hl{background:none!important;padding:0;font-weight:800;color:inherit}

/* L3 one corner rule: photographs, panels and cards are square-cut, separated by hairlines and full-bleed bands.
   Only things you press stay round (pill buttons, the round call / arrow / swatch controls). */
.ph,.intro-sign,.tile,.ba-stage .ba-img,.ba.live .ba-stage,.strip .ph,.findus-card,.mapcard,.prompt,.route,.qcard,
.qf input,.qf select,.qf textarea,.qf .form-errsum,.qf .form-off-btn,.formstatus,.hs-photo,.hs-cap,.finish .ph,
.callout-d,.callout-l,.tall-ph,.ph-cap,.letter,.picker-stage .ph,.trio .ph,.trio figcaption,.nh-photo,.na-card,.note-related a,
.h1-brand,.hero-eb,.note-card .topic,.ba-tag,.chip-glass,.logo-mark{border-radius:0}
.logo-mark{border-radius:.32em}
.tile.tile-text{border:0;border-top:2px solid var(--lime)}
.qcard{box-shadow:none;border-top:4px solid var(--lime)}
.route{border-width:0 0 1px 0!important;padding:16px 0;background:none}
.route:hover{background:none}
.prompt{background:none!important;border:0;border-top:1px solid rgba(15,17,16,.25);border-bottom:1px solid rgba(15,17,16,.25);padding:clamp(20px,2.4vw,30px) 0}
.dark .prompt{border-color:rgba(255,255,255,.22)}
.callout-l{background:none;border-left:3px solid var(--ink);padding:4px 0 4px 18px}
.letter{border:0;border-top:2px solid var(--ink);border-bottom:1px solid rgba(15,17,16,.2)}
.findus-card,.na-card{border-top:4px solid var(--lime)}
/* offset frames on the portrait photographs, so not every picture is the same cut-out shape */
@media (min-width:901px){
  .tall-ph,.hs-photo{overflow:visible!important}
  .tall-ph>img,.hs-photo>img{position:relative;z-index:1}
  .tall-ph>.ph-cap,.hs-photo>.hs-cap{z-index:2}
  .tall-ph::after,.hs-photo::after{content:"";position:absolute;inset:18px -18px -18px 18px;border:1px solid currentColor;opacity:.35;pointer-events:none;z-index:0}
}

/* B2 swatches: bigger targets on a phone */
@media (max-width:900px){
  .swatches button{width:40px;height:40px}
  .swatches{gap:10px;flex-wrap:wrap}
}

/* B3 + B4 long button labels inside a prompt or band: wrap and centre inside the box, never past it */
.prompt .btn,.cta .btn,.free-line .btn{max-width:100%;white-space:normal;text-align:center;line-height:1.25}
@media (max-width:640px){
  .prompt{display:grid;gap:16px;justify-items:stretch}
  .prompt .btn,.free-line .btn{width:100%;justify-content:center;padding:14px 18px;min-height:56px}
  .cta .hero-ctas .btn{width:100%;padding:14px 18px}
  .trust li{padding:14px 18px 14px 0;margin-right:18px}
}

/* B5 home splashback tile: on a phone the photo sits above the words, nothing printed over it */
@media (max-width:900px){
  .tile-sb{justify-content:flex-start;min-height:0!important}
  .tile-sb>.tile-img{position:relative;inset:auto;z-index:0;aspect-ratio:4/3}
  .tile-sb::after{content:none}
  .tile-sb .tile-body{padding-top:18px}
}

/* W3 contact: "Call before you come down" leads the Find us block */
.visit-lead{font:400 clamp(30px,3.4vw,48px)/1.05 var(--display);letter-spacing:-.02em;color:var(--ink);margin-top:18px}
.visit-sub{margin-top:10px;max-width:56ch}
.visit-sub a{color:inherit;font-weight:800}
.measure-sec .statement{max-width:26ch}

/* menu buttons keep their own colours (the panel's white link colour was bleeding into them: white on lime, white on white) */
.menu-panel .menu-cta a.btn-lime,.menu-panel .menu-cta a.btn-call{color:var(--ground)}
.menu-panel .menu-cta a.btn{display:inline-flex}

/* f6 (INSPECTOR 16 Oct): the dead glass / light-lines rules are deleted from frontier-f2.css, so no override is needed here. */
/* SF4: the photo line is plain small text at the very bottom of the form, below Send my details (no tinted box) */
.qf .photo-note{font:400 14px/1.5 var(--sans);color:var(--ink-2);margin-top:12px}
.qf .photo-note a{color:var(--green-text);font-weight:700}
/* SF6: the wardrobes gallery has three photos; the third (the open fit-out) runs full width so there is no gap */
.gallery figure:nth-child(3):last-child{grid-column:1/-1}
.gallery figure:nth-child(3):last-child .ph{aspect-ratio:16/9}

/* ===== f7 (17 Oct 2026, go-live build: Chris "no bleeds, no issues with perspective") ===== */
/* S1a suppliers section on Home (typographic only: no supplier logo has been supplied, and none is drawn) */
.sup-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.sup-card{border-top:4px solid var(--lime);padding-top:clamp(22px,2.6vw,32px)}
.sup-name{font:400 clamp(30px,3.4vw,52px)/1.02 var(--display);letter-spacing:-.02em;color:var(--paper);overflow-wrap:anywhere}
.sup-card p{font:400 clamp(17px,1.35vw,20px)/1.55 var(--sans);color:var(--grey);margin-top:16px;max-width:52ch}
.sup-card p:first-of-type{margin-top:20px}
.sup-card p a{color:var(--lime);font-weight:700;text-underline-offset:4px}
.btn-line{background:none;border:2px solid var(--lime);color:var(--lime);margin-top:28px;max-width:100%;white-space:normal;text-align:center}
.btn-line:hover{background:var(--lime);color:var(--ground)}
@media (max-width:900px){.sup-grid{grid-template-columns:1fr}}
/* S1b/S1c one-line supplier credit on Wardrobes and Shower Screens */
.sup-line{font:400 17px/1.55 var(--sans);color:var(--ink-2);margin-top:clamp(24px,3vw,36px);max-width:62ch}
.dark .sup-line{color:var(--grey)}
.sup-line a{color:var(--green-text);font-weight:700;text-underline-offset:4px}
.dark .sup-line a{color:var(--lime)}

/* Task 2: the home splashback tile. At 901 px and up the photo sat under a 55-94% dark gradient with the words printed over it, so a
   colour swap barely showed and the picture read as blurred and covered (Chris, 17 Oct 23:39). Now, at every width, the photo sits on
   top with nothing over it, and the words and swatches sit below it. */
.tile-sb{justify-content:flex-start;min-height:0!important}
.tile-sb>.tile-img{position:relative;inset:auto;z-index:0;aspect-ratio:16/10;flex:none}
.tile-sb::after{content:none}
.tile-sb .tile-body{padding-top:18px}
.tile-sb>.tile-img img{transform:none!important}
@media (max-width:900px){.tile-sb>.tile-img{aspect-ratio:4/3}}
/* every swatch is at least 44 x 44 px, at every width */
.swatches{gap:10px;flex-wrap:wrap}
.swatches button{width:44px;height:44px}
.swatches.swatches-lg button{width:52px;height:52px}
.swatches button:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
/* /splashbacks/ picker on a phone or tablet: the swatches sit right under the photo's caption, so the kitchen stays on screen while you tap */
@media (max-width:900px){
  .picker{gap:20px}
  .picker-side{display:flex;flex-direction:column}
  .picker-side h3{order:1}
  .picker-side .swatches{order:2;margin-top:16px}
  .picker-side p{order:3}
  .picker-side .sw-names{order:4}
}
/* header logo link: a 44 px tap target like every other header control */
.hdr .brandlink{min-height:44px;align-items:center}
.nav a{display:inline-flex;align-items:center;min-height:44px}
.nav a[aria-current]::after{bottom:6px}
/* a phone: all six finishes on one row under the photo */
@media (max-width:480px){.swatches.swatches-lg{gap:9px}.swatches.swatches-lg button{width:46px;height:46px}}

/* f8 (17 Oct 2026, launch audit fixes, brief wardy-b-f8-audit-fixes-20261017). Appended after f7.css. */

/* LA-1-01 home "The range": the heading column can never be narrower than its longest word, so no word can run under
   the before/after photo at any width (the photo column gives way instead). The heading's top size comes down a step so
   the photo keeps most of the row on desktop. No hyphenation, no per-width patch. */
@media (min-width:901px){
  .ba-sec .ba-wrap{grid-template-columns:minmax(min-content,1fr) minmax(0,2fr)}
  .ba-sec .ba-wrap>div:first-child{min-width:min-content}
}
.ba-sec .h2{font-size:clamp(38px,4.3vw,68px);hyphens:manual;overflow-wrap:normal;word-break:normal}

/* LA-2-02 320 px: the header fits (the quote pill steps aside under 361 px; Get a quote stays in the menu, the hero and
   every page's quote section) and the home H1 brand line is sized from the space it has, so its longest word fits. */
@media (max-width:360px){
  .hdr-r>.btn-lime{display:none}
  .logo-mark{font-size:11.5px}
}
@media (max-width:640px){
  .h1-home .h1-lead{font-size:min(56px,calc((100vw - 2 * var(--gut)) / 8.6))}
}

/* LA-2-06 the photo strip is a focusable, named region holding a real list (Safari keyboard users can scroll it) */
.strip{display:block;scroll-padding-inline:var(--gut)}
.strip:focus-visible{outline:3px solid var(--green-text);outline-offset:-3px}
.strip-list{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,24%);gap:16px}
.strip-list>li{scroll-snap-align:start}
@media (max-width:640px){.strip-list{grid-auto-columns:72%}}

/* LA-2-08 footer column titles are h2 now (heading order), styled exactly as the old h4 */
.footer-col h2.footer-h{margin:0 0 8px;font:800 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#fff}

/* LA-4-02 the form's privacy line only shows when the form can be used (form off = the call-or-email line instead) */
.qf fieldset:disabled .demo-note{display:none}

/* /privacy/ and the no-JavaScript enquiry pages */
.legal-hero .nh-grid{grid-template-columns:minmax(0,1fr)}
.legal-body>h2:first-of-type{margin-top:clamp(32px,3.5vw,48px)}
.legal-body a{overflow-wrap:anywhere}
.note-body>p.legal-updated{margin-top:clamp(36px,4vw,56px);font-size:15px;color:var(--ink-2)}

/* f11 (17 Oct 2026, Chris 19:50 "On mobile, this section is ugly across each page"): the trust strip on phones and tablets.
   Same words, same order, markup unchanged.
   Desktop (1025 px and up): the f5 inline strip (label + detail on one line, hairline rules) kept, but as cells that fill each row:
   when the strip wraps (1280/1440 on seven pages did, with ragged floating rules), every row stretches to the full width, rules
   run only between cells and a full-width hairline separates the rows; outer edge rules are clipped.
   Phones (767 px and down): a spec list, one item per row, label left / detail right on one baseline, full-width hairlines
   between rows only (no vertical rules, so nothing can dangle). An item with no detail spans the row.
   Tablets (768-1024 px): equal tiles, three to a row (two when there are four items), the last row stretches to the full width;
   hairlines only between tiles (the outer edge lines are clipped), labels aligned to the page gutter. */
@media (max-width:767px){
  .trust{display:block;padding:6px 0;gap:0}
  .trust li{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);column-gap:18px;align-items:baseline;
    margin:0;padding:15px 0;border-right:0;border-top:1px solid rgba(15,17,16,.14);font:500 15px/1.4 var(--sans);color:var(--ink-2)}
  .trust li:first-child{border-top:0}
  .trust li>b{font-weight:800;color:var(--ink)}
  .trust li>b:only-child{grid-column:1/-1}
}
@media (max-width:359px){
  .trust li{grid-template-columns:minmax(0,54fr) minmax(0,46fr);column-gap:14px;font-size:14.5px}
}
@media (min-width:768px) and (max-width:1024px){
  .trust{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;padding:0;margin:-1px 0 0 -23px;clip-path:inset(1px 0 0 23px)}
  .trust li{flex:1 1 30%;display:flex;flex-direction:column;align-items:flex-start;gap:3px;margin:0;padding:20px 22px 20px 22px;
    border-right:0;border-left:1px solid rgba(15,17,16,.16);border-top:1px solid rgba(15,17,16,.16);font:500 15px/1.4 var(--sans);color:var(--ink-2)}
  .trust li:first-child:nth-last-child(4),.trust li:first-child:nth-last-child(4)~li{flex-basis:40%}
  .trust li>b{font-weight:800;font-size:16px;color:var(--ink)}
}
@media (min-width:1025px){
  .trust{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;padding:0;margin:-1px 0 0 -27px;clip-path:inset(1px 0 0 27px)}
  .trust li{flex:1 1 auto;margin:0;padding:20px 26px;border-right:0;border-left:1px solid rgba(15,17,16,.2);border-top:1px solid rgba(15,17,16,.2)}
}

/* f12 (17 Oct 2026, INSPECTOR f11 recheck finding 2; Chris 21:20 "Finish this"): the trust strip on desktop (1025 px and up).
   f11 let the inline strip wrap, so at 1280-1920 six pages left one item alone on a full-width second row and the rules between
   rows did not line up. Now: ONE row at every desktop width, equal columns (4, 5 or 6, as many as the page has), label over
   detail like the tablet tiles, hairlines between cells only (the outer left rule is clipped), text aligned to the page gutter.
   Same words, same order, markup unchanged. Phones and tablets (1024 px and down) are exactly f11. */
@media (min-width:1025px){
  .trust{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);flex-wrap:nowrap;align-items:stretch;gap:0;padding:0;
    margin:0 0 0 -27px;clip-path:inset(0 0 0 27px)}
  .trust li{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:3px;margin:0;padding:22px 26px;
    border:0;border-left:1px solid rgba(15,17,16,.2);font:500 15px/1.4 var(--sans);color:var(--ink-2);min-width:0}
  .trust li>b{font-weight:800;font-size:16px;line-height:1.3;color:var(--ink)}
}

/* f13 (17 Oct 2026, brief wardy-b-f13-images): no service tile reads as a sliver on home or /services/.
   Desktop (>= 1181): two rows of two equal-width tiles - wardrobes + shower screens, then splashbacks + mirrors.
   Tablet (641-1180): every tile takes the full row. Phones are unchanged (every tile is already full width). */
@media (min-width:1181px){
  .bento .tile-big{grid-column:1/3;grid-row:1/2;min-height:560px}
  .bento .tile-tall{grid-column:3/5;grid-row:1/2}
  .bento .tile-sb{grid-column:1/3;grid-row:2/3}
  .bento .tile-mi{grid-column:3/5;grid-row:2/3}
}
@media (min-width:641px) and (max-width:1180px){
  .bento .tile-tall,.bento .tile-sb,.bento .tile-mi{grid-column:1/3}
}