/* Self-hosted, so there are no third-party requests and no layout shift.
   Archivo carries the headlines (tight, architectural); Inter carries the body
   and the small labels. No monospace anywhere. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-display:swap;src:url('/assets/fonts/archivo-var.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter-var.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@import url('/assets/fonts/fonts.css');

/* ==========================================================================
   Adrian & Sons Group — design system
   Image-led, dark and gold, built to read as a premium contractor rather than
   a template. Every surface is either photography or a warm dark tone, so
   there is no stark white anywhere.
   ========================================================================== */

:root{
  --ink:#100E0C;
  --ink-2:#191512;
  --ink-3:#241F1A;
  --paper:#F6F3EE;
  --paper-2:#EDE7DE;
  --gold:#C2913F;
  --gold-2:#E2BA76;
  --gold-3:#8E6A28;
  /* Two names were referenced but never defined, so anything using them fell
     back to the initial value: the star row, the review card rules, the
     accreditation mark and the intro rule were all silently broken. */
  --gold-1:#C2913F;
  --line-2:rgba(140,132,120,.45);
  --text:#1A1714;
  --muted:#6E655B;
  --muted-2:#9C9287;
  --on-dark:#F3EFE9;
  --on-dark-muted:#B6ADA2;
  --line:rgba(26,23,20,.14);
  --line-dark:rgba(255,255,255,.13);

  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'Inter','Helvetica Neue',Arial,sans-serif;

  --wrap:1280px;
  --gut:clamp(18px,4vw,52px);
  --sec:clamp(56px,7vw,104px);
  --r:2px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --shadow:0 26px 60px -30px rgba(16,14,12,.55);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}

html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.62;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* --------------------------------------------------------------- typography */
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.02;
  letter-spacing:-.033em;color:inherit;text-wrap:balance}
h1{font-size:clamp(2.3rem,5.4vw,4.6rem)}
h2{font-size:clamp(1.75rem,3.4vw,2.9rem);line-height:1.04}
h3{font-size:clamp(1.12rem,1.5vw,1.35rem);font-weight:700;letter-spacing:-.02em;line-height:1.2}
h4{font-size:.82rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
p{max-width:68ch}
strong,b{font-weight:650}
a:hover{color:var(--gold)}

/* small uppercase label */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.72rem;font-weight:650;letter-spacing:.19em;text-transform:uppercase;
  color:var(--gold-3);margin:0 0 clamp(12px,1.6vw,20px);
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);flex:none}
.eyebrow--plain::before{display:none}
.section--dark .eyebrow,.hero .eyebrow,.phead .eyebrow{color:var(--gold-2)}

.lead{font-size:clamp(1.05rem,1.35vw,1.2rem);line-height:1.6;color:var(--muted)}
.section--dark .lead,.hero .lead,.phead .lead{color:var(--on-dark-muted)}
.measure{max-width:62ch}
.small{font-size:.9rem;color:var(--muted)}

/* ------------------------------------------------------------------ layout */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--sec);position:relative}
.section--tight{padding-block:clamp(34px,4vw,58px)}
.section--dark{background:var(--ink);color:var(--on-dark)}
.section--dark h1,.section--dark h2,.section--dark h3{color:#fff}
.section--warm{background:var(--paper-2)}

.sec-head{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(18px,2.6vw,50px);align-items:start;
  margin-bottom:clamp(26px,3.2vw,48px)}
.sec-head>*{min-width:0}
.sec-head--stack{grid-template-columns:1fr;max-width:70ch}
.sec-head .lead{margin-top:clamp(10px,1.2vw,18px)}
/* A heading and the rows beneath it are one block: the default gap left a hollow
   band between "Main services" and the first group row. */
.sec-head + .acc{margin-top:clamp(-36px,-3vw,-18px)}

.grid{display:grid;gap:clamp(16px,1.8vw,26px)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--6{grid-template-columns:repeat(6,minmax(0,1fr))}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,68px);align-items:center}
.split--rev>.split__media{order:-1}
.mt-sm{margin-top:14px}.mt-md{margin-top:clamp(20px,2.4vw,32px)}
.mt-lg{margin-top:clamp(32px,4vw,56px)}.mt-xl{margin-top:clamp(44px,6vw,82px)}
.stack>*+*{margin-top:14px}
.center{text-align:center;margin-inline:auto}

/* ------------------------------------------------------------------ buttons */
.btn{
  --bg:var(--gold);--fg:#1A1305;--bd:var(--gold);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.5rem;background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  border-radius:var(--r);font-family:var(--body);font-size:.82rem;font-weight:650;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  transition:transform .25s var(--ease),filter .25s var(--ease),background .25s,color .25s,border-color .25s;
}
.btn svg{width:17px;height:17px;flex:none}
.btn:hover{filter:brightness(1.09);transform:translateY(-1px);color:var(--fg)}
.btn--lg{padding:1.12rem 1.85rem;font-size:.86rem}
.btn--ghost{--bg:transparent;--fg:currentColor;--bd:var(--line)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold);filter:none}
.section--dark .btn--ghost,.hero .btn--ghost,.phead .btn--ghost,.band .btn--ghost{--bd:rgba(255,255,255,.34);color:#fff}
.section--dark .btn--ghost:hover,.hero .btn--ghost:hover,.phead .btn--ghost:hover,.band .btn--ghost:hover{
  border-color:var(--gold-2);color:var(--gold-2)}
.btn--sm{padding:.62rem 1rem;font-size:.72rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ------------------------------------------------------------------ images */
.media{position:relative;overflow:hidden;background:var(--ink-3);border-radius:var(--r)}
.media picture,.media>img{display:block;width:100%;height:100%}
.media img{width:100%;height:100%;object-fit:cover;object-position:center}
.media--43{aspect-ratio:4/3}
.media--32{aspect-ratio:3/2}
.media--169{aspect-ratio:16/9}
.media--11{aspect-ratio:1/1}
.media--tall{aspect-ratio:3/4}
.media--zoom img{transition:transform .9s var(--ease)}
a:hover>.media--zoom img,.svc:hover .media--zoom img,.proj:hover .media--zoom img{transform:scale(1.055)}
.media__cap{
  position:absolute;left:0;right:0;bottom:0;padding:clamp(14px,1.6vw,22px);
  background:linear-gradient(to top,rgba(9,8,7,.9),rgba(9,8,7,.45) 55%,transparent);
  color:#fff;font-size:.72rem;font-weight:650;letter-spacing:.14em;text-transform:uppercase;
}
.media__tag{
  position:absolute;top:0;left:0;background:var(--gold);color:#1A1305;
  font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:.42rem .7rem
}

/* ------------------------------------------------------------ header / nav */
.masthead{
  position:fixed;inset:0 0 auto;z-index:60;
  transition:background .35s var(--ease),box-shadow .35s var(--ease);
}
.masthead__bar{background:linear-gradient(to bottom,rgba(9,8,7,.78),rgba(9,8,7,.32) 70%,transparent);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.10)}
/* On a dark page head the bar used to be the same black as the section behind
   it, so the navigation read as part of the hero. Once it leaves the top it
   becomes a slightly lighter black with a gold hairline beneath it. */
.masthead.is-stuck .masthead__bar{background:#1B1611;
  box-shadow:inset 0 -1px 0 rgba(194,145,63,.38),0 18px 40px -26px rgba(0,0,0,.95)}
.masthead__in{display:flex;align-items:center;gap:clamp(14px,2vw,34px);padding-block:clamp(11px,1.4vw,18px)}
.brand{display:flex;align-items:center;gap:.75rem;flex:none}
.brand img{height:clamp(30px,3.4vw,42px);width:auto}
.brand__txt{
  display:flex;flex-direction:column;font-family:var(--display);font-weight:800;
  font-size:clamp(.95rem,1.15vw,1.1rem);line-height:1;letter-spacing:-.025em;color:#fff
}
.brand__txt em{
  font-style:normal;font-weight:550;font-size:.56em;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-2);margin-top:.34em
}
@media(max-width:560px){.brand__txt{display:none}}
.masthead__nav{margin-left:auto}
.masthead__nav ul{display:flex;gap:clamp(12px,1.7vw,30px)}
.masthead__nav a{
  color:#fff;font-size:.82rem;font-weight:550;letter-spacing:.04em;
  padding:.4rem 0;position:relative;white-space:nowrap
}
.masthead__nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--gold);
  transition:right .3s var(--ease)
}
.masthead__nav a:hover::after,.masthead__nav a[aria-current="page"]::after{right:0}
.masthead__nav a:hover{color:#fff}
.masthead__cta{display:flex;align-items:center;gap:14px;flex:none}
.masthead__tel{display:inline-flex;align-items:center;gap:.5rem;color:#fff;font-weight:600;font-size:.9rem;white-space:nowrap}
.masthead__tel svg{width:16px;height:16px;color:var(--gold-2)}
.burger{display:none;margin-left:auto;background:none;border:1px solid rgba(255,255,255,.3);
  border-radius:var(--r);padding:.5rem;color:#fff;cursor:pointer}
.burger svg{width:22px;height:22px}
@media(max-width:1080px){
  .masthead__nav{
    position:fixed;inset:0 0 0 auto;width:min(86vw,380px);background:var(--ink);
    padding:clamp(72px,12vh,110px) clamp(22px,5vw,38px) 38px;transform:translateX(100%);
    transition:transform .34s var(--ease);margin:0;overflow-y:auto
  }
  .masthead__nav[data-open]{transform:none}
  .masthead__nav ul{flex-direction:column;gap:4px}
  .masthead__nav a{font-family:var(--display);font-weight:750;font-size:1.5rem;
    letter-spacing:-.02em;display:block;padding:.5rem 0}
  .burger{display:inline-flex}
  .masthead__tel{display:none}
}
@media(max-width:620px){.masthead__cta .btn{display:none}}

/* ------------------------------------------------------------ hero slider */
/* --------------------------------------------------------- hero collage */
/* A mosaic of four square tiles rather than one full-bleed photograph: the
   tiles render at about 300 CSS pixels each, which a 1000px source resolves
   perfectly, and the set rotates. */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;
  padding-block:clamp(104px,14vh,158px) clamp(26px,3.2vw,42px)}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--line-dark)}
.hero__in{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(28px,4vw,66px);align-items:center}
.hero__body{max-width:46ch}
.hero h1{color:#fff}
.hero__sub{font-size:clamp(1.02rem,1.5vw,1.24rem);color:#EAE4DB;
  margin-top:clamp(14px,1.8vw,22px);max-width:44ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,2.6vw,32px)}
.hero__proof{display:flex;flex-wrap:wrap;gap:.55rem 1.5rem;margin-top:clamp(22px,2.6vw,34px);
  padding-top:clamp(18px,2.2vw,26px);border-top:1px solid var(--line-dark);
  font-size:.86rem;color:var(--on-dark-muted)}
.hero__proof li{display:flex;align-items:center;gap:.5rem}
.hero__proof svg{width:15px;height:15px;color:var(--gold-2);flex:none}
.hero__art{position:relative;min-width:0}
.hero__mosaic{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1vw,14px)}
.hero__tile{position:relative;overflow:hidden;border-radius:var(--r);background:var(--ink-3);aspect-ratio:1/1}
.hero__tile picture,.hero__tile img{width:100%;height:100%;object-fit:cover;display:block}
.hero__tile img{transition:opacity .5s var(--ease)}
.hero__tile--1{outline:1px solid rgba(194,145,63,.45);outline-offset:5px}
.hero__caption{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:clamp(14px,1.6vw,20px);font-size:.7rem;font-weight:650;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-dark-muted);min-height:2.4em}
.hero__caption span{min-height:1.2em}
.hero__pause{width:44px;height:44px;flex:none;border:1px solid rgba(255,255,255,.28);
  background:transparent;color:#fff;border-radius:var(--r);display:grid;place-items:center;
  cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.hero__pause:hover{background:var(--gold);border-color:var(--gold);color:#1A1305}
.hero__pause svg{width:18px;height:18px}
@media(max-width:1000px){
  .hero__in{grid-template-columns:1fr;gap:34px}
  .hero__mosaic{max-width:520px}
}

/* --------------------------------------------------- page head (sub pages) */
/* Also a tile, not a bleed. Type on the dark panel, the picture beside it. */
.phead{background:var(--ink);color:#fff}
.phead__in{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(24px,3.6vw,62px);
  align-items:center;padding-block:clamp(104px,13vh,164px) clamp(42px,5.4vw,78px)}
.phead__text{max-width:52ch;min-width:0}
.phead h1{color:#fff;max-width:26ch}
.phead__sub{margin-top:clamp(12px,1.6vw,20px);font-size:clamp(1rem,1.35vw,1.16rem);
  color:#DDD6CC;max-width:56ch}
.phead__art{position:relative;overflow:hidden;border-radius:var(--r);
  background:var(--ink-3);aspect-ratio:4/3}
.phead__art picture,.phead__art img{width:100%;height:100%;object-fit:cover;display:block}
.phead__art::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
@media(max-width:900px){
  .phead__in{grid-template-columns:1fr;gap:30px;
    padding-block:clamp(96px,12vh,132px) clamp(36px,5vw,56px)}
  .phead__art{aspect-ratio:16/9}
}
.crumbs{display:flex;gap:.5rem;flex-wrap:wrap;font-size:.76rem;letter-spacing:.05em;
  color:var(--muted-2);margin-bottom:clamp(14px,1.8vw,22px)}
.phead .crumbs{color:#A79E93}
.crumbs a:hover{color:var(--gold-2)}
.crumbs span{opacity:.55}

/* ------------------------------------------------------------ trust strip */
.strip{background:var(--ink-2);color:var(--on-dark);border-top:1px solid var(--line-dark)}
.strip__grid{display:grid;grid-template-columns:repeat(3,1fr)}
.strip__item{display:flex;gap:clamp(12px,1.4vw,20px);align-items:flex-start;
  padding:clamp(22px,2.6vw,34px) clamp(14px,2vw,30px);border-left:1px solid var(--line-dark)}
.strip__item:first-child{border-left:0}
.strip__ico{flex:none;width:38px;height:38px;display:grid;place-items:center;
  border:1px solid rgba(194,145,63,.5);border-radius:50%;color:var(--gold-2)}
.strip__ico svg{width:19px;height:19px}
.strip b{color:#fff;font-family:var(--display);font-size:1.02rem;font-weight:750;
  letter-spacing:-.01em;display:block}
.strip p{font-size:.9rem;color:var(--on-dark-muted);margin-top:.25rem;max-width:36ch}
@media(max-width:860px){
  .strip__grid{grid-template-columns:1fr}
  .strip__item{border-left:0;border-top:1px solid var(--line-dark)}
  .strip__item:first-child{border-top:0}
}

/* --------------------------------------------------------- service cards */
.svc-grid{display:grid;gap:clamp(16px,1.8vw,26px);grid-template-columns:repeat(4,1fr)}
.svc{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;position:relative;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(194,145,63,.5)}
.svc__body{padding:clamp(16px,1.7vw,22px);display:flex;flex-direction:column;flex:1;gap:.5rem}
.svc__body h3{margin:0}
.svc__body p{font-size:.92rem;color:var(--muted);margin:0;line-height:1.55}
.svc__more{margin-top:auto;padding-top:.9rem;display:inline-flex;align-items:center;gap:.5rem;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-3)}
.svc__more svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.svc:hover .svc__more svg{transform:translateX(4px)}
.svc--dark{background:var(--ink-3);border-color:var(--line-dark)}
.svc--dark h3{color:#fff}
.svc--dark .svc__body p{color:var(--on-dark-muted)}
.svc--dark .svc__more{color:var(--gold-2)}
@media(max-width:1080px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.svc-grid{grid-template-columns:1fr}}

/* --------------------------------------------------------------- slider */
.slider{position:relative}
.slider__track{
  display:flex;gap:clamp(12px,1.5vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:4px
}
.slider__track::-webkit-scrollbar{display:none}
.slider__item{flex:0 0 clamp(250px,29vw,400px);scroll-snap-align:start}
.slider__item--wide{flex-basis:clamp(290px,44vw,640px)}
.slider__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  margin-bottom:clamp(20px,2.4vw,34px)}
.slider__nav{display:flex;gap:8px;flex:none}
.slider__nav button{
  width:46px;height:46px;border:1px solid var(--line);background:transparent;color:var(--text);
  cursor:pointer;border-radius:var(--r);display:grid;place-items:center;transition:all .25s
}
.slider__nav button:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.slider__nav button[disabled]{opacity:.28;cursor:default}
.slider__nav button[disabled]:hover{background:transparent;color:var(--text);border-color:var(--line)}
.slider__nav svg{width:18px;height:18px}
@media(max-width:620px){.slider__nav{display:none}}

/* ---------------------------------------------------- uniform project grid */
.proj-grid{display:grid;gap:clamp(12px,1.4vw,20px);grid-template-columns:repeat(4,1fr)}
.proj{position:relative;display:block;overflow:hidden;border-radius:var(--r);background:var(--ink-3)}
.proj__cap{
  position:absolute;inset:auto 0 0;padding:clamp(12px,1.4vw,18px);color:#fff;
  background:linear-gradient(to top,rgba(9,8,7,.92),transparent);
  font-size:.72rem;font-weight:650;letter-spacing:.13em;text-transform:uppercase;
  opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease)
}
.proj:hover .proj__cap,.proj:focus-visible .proj__cap{opacity:1;transform:none}
@media(max-width:1080px){.proj-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.proj-grid{grid-template-columns:repeat(2,1fr)}}

/* --------------------------------------------------------------- stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)}
.stat{border-top:2px solid var(--gold);padding-top:clamp(14px,1.6vw,20px)}
.stat b{display:block;font-family:var(--display);font-weight:850;line-height:.95;
  font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.04em;color:#fff}
.stat span{display:block;margin-top:.5rem;font-size:.76rem;font-weight:650;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold-2)}
.stat p{margin-top:.55rem;font-size:.92rem;color:var(--on-dark-muted)}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}

/* --------------------------------------------------------------- cards */
.cards{display:grid;gap:clamp(16px,1.8vw,24px);grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,2.2vw,30px)}
.card h3{margin-bottom:.5rem}
.card p{font-size:.95rem;color:var(--muted)}
.card__no{display:block;font-family:var(--display);font-weight:850;font-size:1.5rem;
  color:var(--gold);letter-spacing:-.03em;margin-bottom:.6rem}
.section--dark .card{background:var(--ink-3);border-color:var(--line-dark)}
.section--dark .card p{color:var(--on-dark-muted)}
@media(max-width:980px){.cards{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.cards{grid-template-columns:1fr}}

/* --------------------------------------------------------------- steps */
.steps{display:grid;gap:clamp(16px,1.8vw,26px);grid-template-columns:repeat(3,1fr);counter-reset:step}
.step{padding-top:clamp(16px,1.8vw,22px);border-top:1px solid var(--line)}
.section--dark .step{border-color:var(--line-dark)}
.step::before{counter-increment:step;content:"0" counter(step);
  display:block;font-family:var(--display);font-weight:850;font-size:1.35rem;
  color:var(--gold);letter-spacing:-.03em;margin-bottom:.5rem}
.step h3{margin-bottom:.45rem}
.step p{font-size:.95rem;color:var(--muted)}
.section--dark .step p{color:var(--on-dark-muted)}
@media(max-width:760px){.steps{grid-template-columns:1fr}}

/* --------------------------------------------------------------- CTA band */
/* No background photograph: a 1440px bleed is the one thing this source set
   cannot carry. The imagery is a row of small, sharp tiles instead. */
/* A shade lighter than the footer, so the enquiry block and the site footer do
   not merge into one enormous dark slab. */
.band{position:relative;background:var(--ink-2);color:#fff;overflow:hidden;
  padding-block:clamp(48px,6vw,86px)}
.band::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--gold)}
.band__in{position:relative;display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(26px,4vw,72px);align-items:start}
.band__text{max-width:52ch;min-width:0}
.band h2{color:#fff;max-width:24ch}
.band .lead{margin-top:clamp(12px,1.4vw,18px)}
.band__list{margin-top:clamp(18px,2.2vw,28px);display:grid;gap:10px}
.band__list li{display:flex;gap:.65rem;align-items:flex-start;color:#DDD6CC;font-size:.96rem}
.band__list svg{width:18px;height:18px;flex:none;margin-top:.22rem;color:var(--gold-2)}
.band__phone{margin-top:clamp(18px,2.2vw,26px);display:inline-flex;align-items:center;gap:.85rem;
  color:#fff;font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,2.4vw,2rem);
  letter-spacing:-.02em}
.band__phone svg{width:26px;height:26px;color:var(--gold-2);flex:none}
.band__phone:hover{color:var(--gold-2)}
.band__form{position:sticky;top:104px}
.tiles--band{margin-top:clamp(20px,2.4vw,30px)}
@media(max-width:900px){
  .band__in{grid-template-columns:1fr}
  .band__form{position:static}
}

/* --------------------------------------------------------------- form */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,2.4vw,34px);box-shadow:var(--shadow)}
.form__intro{font-size:1rem;line-height:1.6;color:var(--text);margin:0 0 1.2rem}
.form__note{font-size:.86rem;color:var(--muted);margin-top:1rem}
.form__fallback{border-left:3px solid var(--gold);background:rgba(194,145,63,.1);
  padding:.95rem 1.15rem;margin:0 0 1.2rem;font-size:.93rem;line-height:1.6}
.form__fallback[hidden]{display:none}
.form__fallback strong{display:block;margin-bottom:.3rem}
.form__row{display:grid;gap:14px;margin-bottom:14px}
.form__row--2{grid-template-columns:1fr 1fr}
.field{margin-bottom:14px}
.field label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.field input,.field select,.field textarea{
  width:100%;padding:.82rem .9rem;border:1px solid var(--line);border-radius:var(--r);
  font-family:var(--body);font-size:1rem;background:var(--paper);color:var(--text)
}
.field textarea{min-height:126px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--gold);background:#fff;box-shadow:0 0 0 3px rgba(194,145,63,.16)
}
.field input[readonly]{color:var(--muted);background:var(--paper-2)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:560px){.form__row--2{grid-template-columns:1fr}}

/* --------------------------------------------------------------- faqs */
.faqs{border-top:1px solid var(--line)}
.section--dark .faqs{border-color:var(--line-dark)}
.faqs details{border-bottom:1px solid var(--line)}
.section--dark .faqs details{border-color:var(--line-dark)}
.faqs summary{
  cursor:pointer;list-style:none;padding:clamp(15px,1.7vw,21px) 2.6rem clamp(15px,1.7vw,21px) 0;
  font-family:var(--display);font-weight:700;font-size:clamp(1rem,1.3vw,1.14rem);
  letter-spacing:-.015em;position:relative
}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary::after{
  content:"";position:absolute;right:.3rem;top:50%;width:11px;height:11px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)
}
.faqs details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faqs summary:hover{color:var(--gold)}
.faq__a{padding:0 clamp(20px,4vw,70px) clamp(17px,1.9vw,24px) 0;color:var(--muted);
  font-size:.98rem;line-height:1.65}
.section--dark .faq__a{color:var(--on-dark-muted)}

/* --------------------------------------------------------------- chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{border:1px solid var(--line);border-radius:100px;padding:.42rem .95rem;
  font-size:.84rem;color:var(--muted)}
.section--dark .chips li{border-color:var(--line-dark);color:var(--on-dark-muted)}

/* --------------------------------------------------------------- facts list */
.facts{display:grid;gap:0;border-top:1px solid var(--line)}
.facts>div{display:grid;grid-template-columns:minmax(120px,.4fr) 1fr;gap:16px;
  padding:clamp(12px,1.4vw,17px) 0;border-bottom:1px solid var(--line)}
.facts dt{font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.facts dd{font-size:.96rem}
.section--dark .facts,.section--dark .facts>div{border-color:var(--line-dark)}
.section--dark .facts dd{color:var(--on-dark)}
@media(max-width:560px){.facts>div{grid-template-columns:1fr;gap:4px}}

/* --------------------------------------------------------------- footer */
.foot{background:var(--ink);color:var(--on-dark-muted);
  padding-block:clamp(30px,3.6vw,50px) 0;border-top:1px solid var(--line-dark)}
/* Five columns so the company links sit on the same row as the three service
   groups instead of dropping onto a second row by themselves. */
.foot__grid{display:grid;grid-template-columns:1.5fr .82fr .82fr .82fr .92fr;
  gap:clamp(18px,2.2vw,38px)}
.foot h4{color:#fff;margin-bottom:.7rem}
.foot a{color:var(--on-dark-muted);font-size:.9rem}
.foot a:hover{color:var(--gold-2)}
.foot ul{display:grid;gap:.4rem}
.foot__brand img{width:clamp(108px,11.5vw,140px);height:auto;margin-bottom:.8rem}
.foot__brand p{font-size:.88rem;max-width:32ch;line-height:1.55}
.foot address{font-style:normal;display:grid;gap:.55rem;font-size:.94rem}
.foot__bar{margin-top:clamp(20px,2.4vw,32px);border-top:1px solid var(--line-dark);
  padding-block:clamp(13px,1.5vw,18px);display:flex;justify-content:space-between;gap:14px;
  flex-wrap:wrap;font-size:.8rem}
.foot__social{display:flex;gap:1.1rem}
@media(max-width:1080px){.foot__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.foot__grid{grid-template-columns:1fr}}

/* --------------------------------------------------------------- dock */
.dock{display:none}
@media(max-width:760px){
  .dock{
    display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:var(--ink);border-top:1px solid var(--line-dark)
  }
  .dock a{padding:.95rem 1rem;text-align:center;font-size:.78rem;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;color:#fff}
  .dock a:first-child{background:var(--gold);color:#1A1305}
  body{padding-bottom:52px}
}

/* --------------------------------------------------------------- misc */
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:#1A1305;
  padding:.7rem 1rem;z-index:200}
.skip:focus{left:0;top:0}
.rise{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rise.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
main{padding-top:0}

@media(max-width:900px){
  .sec-head,.split,.split--rev>.split__media{grid-template-columns:1fr;order:0}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--6{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:620px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .grid--6{grid-template-columns:repeat(2,1fr)}
}
/* ==========================================================================
   Sectioned groups, filters, tiles and the area map
   ========================================================================== */

/* ------------------------------------------------- service group accordion */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__item summary{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(12px,2vw,30px);align-items:center;
  padding:clamp(18px,2.1vw,30px) 0;cursor:pointer;list-style:none
}
.acc__item summary::-webkit-details-marker{display:none}
.acc__thumb{width:clamp(64px,7vw,96px);flex:none;aspect-ratio:1/1;overflow:hidden;
  border-radius:var(--r);background:var(--ink-3);position:relative}
.acc__thumb picture,.acc__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.acc__item summary:hover .acc__thumb img{transform:scale(1.05)}
.acc__thumb img{transition:transform .6s var(--ease)}
.acc__title{min-width:0}
.acc__title b{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(1.22rem,2.4vw,2rem);letter-spacing:-.033em;line-height:1.05}
.acc__title em{font-style:normal;display:block;color:var(--muted);font-size:.94rem;
  margin-top:.42rem;max-width:56ch;line-height:1.5}
.acc__ico{width:46px;height:46px;flex:none;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;color:var(--gold-3);
  transition:transform .32s var(--ease),background .28s,color .28s,border-color .28s}
.acc__ico svg{width:18px;height:18px}
.acc__item summary:hover .acc__title b{color:var(--gold-3)}
.acc__item[open] .acc__ico{transform:rotate(180deg);background:var(--gold);
  border-color:var(--gold);color:#1A1305}
.acc__body{padding-bottom:clamp(26px,3.2vw,48px)}
.acc__body>.lead{margin-bottom:clamp(20px,2.4vw,32px);max-width:62ch}
.section--dark .acc,.section--dark .acc__item{border-color:var(--line-dark)}
.section--dark .acc__title b{color:#fff}
.section--dark .acc__title em{color:var(--on-dark-muted)}
.section--dark .acc__ico{border-color:var(--line-dark)}
@media(max-width:760px){
  .acc__item summary{grid-template-columns:auto minmax(0,1fr) auto;gap:12px}
  .acc__title em{font-size:.88rem}
}

/* --------------------------------------------------------- project filters */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(22px,2.6vw,34px)}
.filters button{
  border:1px solid var(--line);background:transparent;border-radius:100px;
  padding:.56rem 1.05rem;font-size:.78rem;font-weight:650;letter-spacing:.05em;
  cursor:pointer;color:var(--muted);transition:all .25s var(--ease)
}
.filters button em{font-style:normal;color:var(--muted-2);font-size:.9em;margin-left:.2rem}
.filters button:hover{border-color:var(--gold);color:var(--text)}
.filters button.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.filters button.is-on em{color:var(--gold-2)}
.proj[hidden]{display:none}
.proj__cap{opacity:1;transform:none;font-size:.7rem;line-height:1.4}
.proj__cap b{display:block;font-weight:650;letter-spacing:.11em}
.proj__cap em{font-style:normal;display:block;margin-top:.2rem;letter-spacing:.14em;
  color:var(--gold-2);font-size:.92em}
.filter-empty{color:var(--muted);font-size:.95rem;padding:1.5rem 0}
.filter-empty[hidden]{display:none}

/* ------------------------------------------------------------ tile rows */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1vw,14px)}

/* ------------------------------------------------------------ area map */
.map{position:relative;background:var(--ink-2);border:1px solid var(--line-dark);
  border-radius:var(--r);aspect-ratio:16/11;overflow:hidden}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.map__road{fill:none;stroke:rgba(255,255,255,.10);stroke-width:2}
.map__river{fill:none;stroke:rgba(116,158,196,.18);stroke-width:3}
.map__ring{fill:none;stroke:rgba(194,145,63,.22);stroke-dasharray:3 7}
.map__ring--2{stroke:rgba(194,145,63,.15)}
.map__ring--3{stroke:rgba(194,145,63,.09)}
.map__pin,.map__base{position:absolute;left:var(--x);top:var(--y);
  transform:translate(-50%,-50%);display:flex;align-items:center;gap:.5rem;color:#fff}
.map__pin{z-index:2}
.map__base{z-index:3}
.map__dot{width:11px;height:11px;border-radius:50%;background:var(--gold);flex:none;
  box-shadow:0 0 0 5px rgba(194,145,63,.20)}
.map__pin--core .map__dot{background:var(--gold-2);box-shadow:0 0 0 6px rgba(226,186,118,.24)}
.map__hq{width:15px;height:15px;background:#fff;transform:rotate(45deg);flex:none;
  box-shadow:0 0 0 1px var(--gold),0 0 0 7px rgba(255,255,255,.09)}
.map__label{border:1px solid rgba(255,255,255,.18);background:rgba(9,8,7,.82);
  padding:.36rem .62rem;border-radius:2px;white-space:nowrap;
  transition:background .25s,border-color .25s,color .25s}
.map__label b{display:block;font-family:var(--display);font-size:.82rem;font-weight:750;
  letter-spacing:-.01em}
.map__label em{font-style:normal;font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold-2)}
.map__pin:hover .map__label{background:var(--gold);border-color:var(--gold)}
.map__pin:hover .map__label b,.map__pin:hover .map__label em{color:#1A1305}
.map__key{position:absolute;left:0;right:0;bottom:0;display:flex;gap:1.3rem;flex-wrap:wrap;
  padding:.8rem 1.05rem;border-top:1px solid var(--line-dark);background:rgba(9,8,7,.66);
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-muted)}
.map__key span{display:flex;align-items:center;gap:.45rem}
.map__key i{width:9px;height:9px;border-radius:50%;background:var(--gold);flex:none}
.map__key i.map__hq{width:10px;height:10px;background:#fff;transform:rotate(45deg);box-shadow:none}
@media(max-width:760px){
  .map{aspect-ratio:4/5}
  .map__label em{display:none}
  .map__label{padding:.3rem .5rem}
  .map__label b{font-size:.74rem}
}

/* ------------------------------------------------------- nav sub-panels */
.masthead__item{position:relative}
.masthead__panel{
  position:absolute;top:calc(100% + 16px);left:-18px;min-width:300px;
  background:var(--ink-2);border:1px solid var(--line-dark);border-radius:var(--r);
  padding:.55rem;opacity:0;visibility:hidden;transform:translateY(-6px);z-index:5;
  box-shadow:0 34px 64px -32px rgba(0,0,0,.92);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s
}
.masthead__item.has-kids:hover .masthead__panel,
.masthead__item.has-kids:focus-within .masthead__panel{
  opacity:1;visibility:visible;transform:none
}
.masthead__panel ul{display:grid;gap:2px}
.masthead__panel a{padding:.6rem .75rem;border-radius:2px}
.masthead__panel a::after{display:none}
.masthead__panel a span{display:block;font-size:.9rem;font-weight:600;color:#fff}
.masthead__panel a em{font-style:normal;display:block;font-size:.74rem;color:var(--muted-2);
  margin-top:.12rem}
.masthead__panel a:hover{background:rgba(255,255,255,.06)}
.masthead__panel a:hover span{color:var(--gold-2)}
@media(max-width:1080px){
  .masthead__panel{position:static;opacity:1;visibility:visible;transform:none;border:0;
    background:transparent;padding:0 0 .6rem;min-width:0;box-shadow:none}
  .masthead__panel a{padding:.3rem 0}
  .masthead__panel a span{font-size:1rem;font-weight:550;color:var(--on-dark-muted)}
}

/* --------------------------------------------------------- tighter slider */
/* Items stay under about 470 CSS pixels so the source photography resolves. */
.slider__item--wide{flex-basis:clamp(260px,32vw,470px)}
/* --------------------------------------------------- map context villages */
/* No link, no pin: these place the four core areas in a real landscape. */
.map__ctx{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:.4rem;z-index:1;
  font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(243,239,233,.42);white-space:nowrap;pointer-events:none}
.map__ctx i{width:5px;height:5px;border-radius:50%;background:rgba(243,239,233,.34);flex:none}
@media(max-width:760px){
  .map__ctx{font-size:.55rem}
  .map__ctx:nth-of-type(n+7){display:none}
}
/* ------------------------------------------------- project tile labels */
.proj__idx{display:block;font-family:var(--display);font-weight:850;font-size:.95rem;
  letter-spacing:-.02em;color:var(--gold-2);margin-bottom:.25rem}
.proj__cap b{font-size:.68rem;line-height:1.35;letter-spacing:.09em}

/* ==========================================================================
   Review round two: mosaic page heads, quieter lists, three-up recent work
   ========================================================================== */

/* --------------------------------------------------- page head as a mosaic */
/* Four tiles rather than one stretched square. A single 1000px frame blown up
   to the width of a page head is exactly what looked distorted; four small
   tiles stay sharp and read as a portfolio. */
.phead__art--mosaic{display:grid;grid-template-columns:1fr 1fr;gap:clamp(6px,.8vw,12px);
  background:none;aspect-ratio:auto;overflow:visible;border-radius:0}
.phead__art--mosaic::after{display:none}
.phead__tile{position:relative;overflow:hidden;border-radius:var(--r);
  background:var(--ink-3);aspect-ratio:1/1}
.phead__tile picture,.phead__tile img{width:100%;height:100%;object-fit:cover;display:block}
.phead__tile:first-child{outline:1px solid rgba(194,145,63,.32);outline-offset:4px}

/* ------------------------------------------------------ hero caption note */
.hero__hint{letter-spacing:.12em;color:rgba(243,239,233,.5);font-weight:650}

/* --------------------------------------------------- benefits and scope */
.ticks{display:grid;gap:clamp(14px,1.7vw,24px);grid-template-columns:repeat(2,minmax(0,1fr))}
.tick{display:flex;gap:.85rem;align-items:flex-start;border-top:1px solid var(--line);
  padding-top:clamp(12px,1.4vw,18px)}
.tick__ico{flex:none;width:26px;height:26px;border:1px solid rgba(194,145,63,.5);
  border-radius:50%;display:grid;place-items:center;color:var(--gold-3);margin-top:.15rem}
.tick__ico svg{width:13px;height:13px}
/* Plain weight and sentence case. A numbered "01 prevent costly repairs" in
   display bold reads as a lecture nobody finishes. */
.tick h3{font-family:var(--body);font-weight:650;font-size:1.02rem;letter-spacing:-.005em;
  text-transform:none;line-height:1.3;margin-bottom:.3rem}
.tick p{font-size:.94rem;color:var(--muted);line-height:1.6}
.section--dark .tick{border-color:var(--line-dark)}
.section--dark .tick h3{color:#fff}
.section--dark .tick p{color:var(--on-dark-muted)}
.section--dark .tick__ico{border-color:rgba(226,186,118,.45);color:var(--gold-2)}
@media(max-width:820px){.ticks{grid-template-columns:1fr}}

/* ---------------------------------------------------- three-up recent work */
.recent{display:grid;gap:clamp(10px,1.4vw,20px);grid-template-columns:repeat(3,minmax(0,1fr))}
.recent__item{display:block}
@media(max-width:820px){.recent{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.recent{grid-template-columns:1fr}}

/* A split with no figure of its own — used where a trade has no photographs
   left to show. Full width text instead of an empty column. */
.split--single { grid-template-columns: minmax(0, 1fr); }
.split--single .split__text { max-width: 78ch; }

/* ------------------------------------------------- page header background band */
/* Not flat black: a row of photographs stretched across the section, with a
   scrim over the top so the heading still reads. Narrow slices mean ordinary
   photographs hold up at this size. */
.phead{position:relative;overflow:hidden}
.phead__band{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  z-index:0;pointer-events:none}
.phead__bandcell{overflow:hidden;display:block}
.phead__bandcell picture,.phead__bandcell img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.9) contrast(1.05) brightness(.86)}
.phead__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(12,12,13,.30) 0%,rgba(12,12,13,.48) 58%,rgba(12,12,13,.74) 100%),
    linear-gradient(90deg,rgba(12,12,13,.70) 0%,rgba(12,12,13,.52) 48%,rgba(12,12,13,.28) 100%)}
.phead__in{position:relative;z-index:2}
@media(max-width:900px){
  .phead__band{grid-template-columns:repeat(3,minmax(0,1fr))}
  .phead__bandcell:nth-child(n+4){display:none}
  .phead__scrim{background:
    linear-gradient(180deg,rgba(12,12,13,.42) 0%,rgba(12,12,13,.68) 58%,rgba(12,12,13,.86) 100%)}
}

/* ------------------------------------------------- home hero: logo, stretched */
/* The top of the home page is backed by the crest itself rather than by a
   photograph: the mark blown up until only part of it is in frame, so the roof
   lines and the window squares read as abstract shapes, under a veil that keeps
   the heading legible. Vector, so it stays sharp at any size. */
.hero__mark{position:absolute;inset:-14% -8%;z-index:0;pointer-events:none;
  background-image:url("/assets/brand/logo-mark.svg");
  background-repeat:no-repeat;background-position:55% 24%;background-size:142% auto;
  opacity:.62}
.hero__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(12,12,13,.60) 0%,rgba(12,12,13,.76) 56%,rgba(12,12,13,.93) 100%),
    linear-gradient(90deg,rgba(12,12,13,.86) 0%,rgba(12,12,13,.58) 54%,rgba(12,12,13,.30) 100%)}
.hero__in{position:relative;z-index:2}
@media(max-width:900px){
  .hero__mark{background-position:50% 18%;background-size:185% auto;opacity:.5}
  .hero__veil{background:
    linear-gradient(180deg,rgba(12,12,13,.68) 0%,rgba(12,12,13,.84) 58%,rgba(12,12,13,.95) 100%)}
}

/* ------------------------------------------------------- FMB accreditation */
/* Their mark, in their own carrier, used as supplied and never recoloured.
   Sized explicitly so the footer's generic image rule cannot resize it. */
.fmb{display:inline-flex;align-items:center;gap:clamp(10px,1.1vw,15px);
  text-decoration:none;max-width:100%;margin-top:clamp(16px,2vw,24px)}
.fmb img{display:block;width:auto;height:auto;margin:0;border-radius:2px}
.fmb--sm img{width:clamp(92px,9.6vw,118px)}
.fmb--md img{width:clamp(116px,12.5vw,158px)}
.fmb__note{display:grid;gap:3px;line-height:1.3;min-width:0}
.fmb__note b{color:#fff;font-size:.84rem;letter-spacing:.01em}
.fmb__note em{color:var(--on-dark-muted);font-style:normal;font-size:.75rem;display:inline-flex;
  align-items:center;gap:6px}
.fmb__note svg{width:13px;height:13px;flex:none;transition:transform .18s ease}
.fmb:hover .fmb__note em{color:var(--gold-2)}
.fmb:hover .fmb__note svg{transform:translateX(3px)}
.fmb:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
.fmb__promises{display:grid;gap:.5rem;margin-top:clamp(14px,1.6vw,20px);padding:0;list-style:none}
.fmb__promises li{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem;color:#DDD6CC}
.fmb__promises svg{width:16px;height:16px;flex:none;margin-top:.28em;color:var(--gold-2)}
.fmb__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  margin-top:clamp(20px,2.4vw,30px);background:var(--line-dark);border:1px solid var(--line-dark)}
.fmb__facts > div{background:var(--ink);padding:clamp(12px,1.4vw,17px) clamp(13px,1.5vw,19px)}
.fmb__facts dt{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted)}
.fmb__facts dd{margin:.35rem 0 0;font-weight:700;color:#fff;font-size:1rem}
.cert{margin:0;background:#fff;padding:clamp(9px,1.1vw,15px);border-radius:var(--r);
  box-shadow:0 18px 44px rgba(0,0,0,.34)}
.cert img{width:100%;height:auto;display:block}
.cert figcaption{margin-top:.7rem;font-size:.76rem;color:#5D564C;text-align:center}
@media(max-width:560px){.fmb__facts{grid-template-columns:1fr}}
.split__media--cert{display:grid;justify-items:center;align-content:start}
.fmb__plaque{width:clamp(176px,21vw,248px);height:auto;display:block;border-radius:2px;
  margin-bottom:clamp(16px,2vw,24px);box-shadow:0 12px 30px rgba(0,0,0,.34)}
.cert{width:100%;max-width:520px}

/* ------------------------------------------- credentials bar (top of home) */
/* Sits directly under the dark hero, on white, behind a hairline so the two
   blocks read as separate things rather than one long slab. */
.cred{border-bottom:1px solid var(--line)}
.cred__in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line)}
.cred__item{display:flex;align-items:center;gap:clamp(10px,1.2vw,16px);
  background:var(--paper);padding:clamp(16px,1.9vw,24px) clamp(14px,1.7vw,26px);
  text-decoration:none;transition:background .18s ease}
.cred__item:hover{background:var(--warm)}
.cred__item img{width:clamp(76px,8vw,104px);height:auto;display:block;border-radius:2px;flex:none}
.cred__mark{width:clamp(30px,3.4vw,40px);height:clamp(30px,3.4vw,40px);flex:none;
  display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--gold-1)}
.cred__mark svg{width:56%;height:56%}
.cred__txt{display:grid;gap:3px;min-width:0}
.cred__txt b{font-size:.95rem;color:var(--ink)}
.cred__txt em{font-style:normal;font-size:.79rem;color:var(--muted)}
.stars{display:inline-flex;gap:2px;flex:none}
.stars svg{fill:var(--line-2)}
.stars svg.on{fill:var(--gold-1)}
@media(max-width:900px){
  .cred__in{grid-template-columns:1fr}
  .cred__item{padding-inline:clamp(14px,4vw,22px)}
}

/* --------------------------------------------------------------- reviews */
.rev{display:grid;gap:clamp(22px,3vw,40px)}
.rev__panel{max-width:60ch}
.rev__score{display:flex;align-items:center;gap:clamp(14px,1.8vw,22px);margin-top:clamp(16px,2vw,24px)}
.rev__score > b{font-family:var(--display);font-size:clamp(42px,5.4vw,64px);line-height:.9;color:var(--ink)}
.rev__score > div{display:grid;gap:5px}
.rev__score span{font-size:.82rem;color:var(--muted)}
.rev__note{font-size:.85rem;color:var(--muted);margin-top:clamp(12px,1.5vw,18px)}
.rev .btn-row{margin-top:clamp(18px,2.2vw,26px)}
.rev__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line)}
.rev__card{margin:0;background:var(--paper);padding:clamp(20px,2.4vw,30px);
  border-top:3px solid var(--gold-1)}
.rev__card blockquote{margin:clamp(12px,1.4vw,16px) 0 0;font-size:1.02rem;line-height:1.6;color:var(--ink)}
.rev__card figcaption{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  margin-top:clamp(14px,1.7vw,20px);padding-top:clamp(12px,1.4vw,16px);border-top:1px solid var(--line);
  font-size:.82rem;color:var(--muted)}
.rev__card figcaption b{color:var(--ink);font-size:.92rem}

/* ------------------------------------------------------ hero credentials */
/* The accreditation, the review score and the coverage sit in one panel at the
   foot of the hero. The panel is full-bleed through the shadow/clip trick so it
   reads as part of the hero rather than a floating row of text. */
.hero__cred{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin-top:clamp(18px,2.2vw,30px);padding-block:clamp(12px,1.4vw,17px);
  border-top:1px solid rgba(194,145,63,.32);background:#0B0A09;
  box-shadow:0 0 0 100vmax #0B0A09;clip-path:inset(0 -100vmax)}
.hero__cred li{display:flex;align-items:center;min-width:0;
  padding-inline:clamp(0px,1.6vw,24px);border-left:1px solid rgba(255,255,255,.10)}
.hero__cred li:first-child{padding-left:0;border-left:0}
.hero__cred a{display:inline-flex;align-items:center;gap:.6rem;color:var(--on-dark-muted);
  text-decoration:none;transition:color .18s ease;min-width:0}
.hero__cred a:hover{color:#fff}
.hero__cred a:hover b{color:var(--gold-2)}
.hero__cred-txt{display:grid;gap:1px;min-width:0}
.hero__cred b{color:#fff;font-weight:650;font-size:.84rem;letter-spacing:.01em;transition:color .18s ease}
.hero__cred em{font-style:normal;font-size:.72rem;color:var(--on-dark-muted)}
.hero__cred img{height:22px;width:auto;display:block;border-radius:1px;flex:none}
.hero__cred .stars{flex:none}
.hero__cred .stars svg{width:15px;height:15px;fill:rgba(255,255,255,.20)}
.hero__cred .stars svg.on{fill:#C2913F}
.hero__cred svg{width:16px;height:16px;color:var(--gold-2);flex:none}
@media(max-width:820px){
  .hero__cred{grid-template-columns:1fr}
  .hero__cred li{padding-inline:0;padding-block:11px;border-left:0;
    border-top:1px solid rgba(255,255,255,.10)}
  .hero__cred li:first-child{border-top:0;padding-top:2px}
}

/* ------------------------------------------------------------ brand intro */
/* The logo hands over to the page in about a second and a half. It is a
   decorative layer only: the content is already in the document, it cannot be
   clicked, it removes itself, and it never runs for anyone who has asked their
   system for reduced motion. */
.intro{position:fixed;inset:0;z-index:200;background:#100E0C;display:grid;place-items:center;
  pointer-events:none;animation:introOut .45s var(--ease) 1.05s forwards}
.intro img{width:clamp(190px,26vw,290px);height:auto;opacity:0;
  transform:translateY(12px) scale(.97);animation:introIn .72s var(--ease) .06s forwards}
.intro span{position:absolute;left:50%;transform:translateX(-50%);width:min(34vw,220px);height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-1),transparent);opacity:0;
  top:calc(50% + clamp(120px,17vw,190px));animation:introIn .6s var(--ease) .5s forwards}
@keyframes introIn{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes introOut{to{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){.intro{display:none}}

/* The strip already closes the band above it, so the section that follows does
   not need a full section's breathing room on top of that. */
.strip + .section{padding-top:clamp(34px,3.6vw,48px)}

/* ============================================================ review fixes */

/* `[hidden]` has to beat any component's own display rule. The project filter
   sets the hidden property, and `.proj{display:block}` was overriding the user
   agent's `[hidden]{display:none}` — which is why "nothing happened". */
[hidden]{display:none!important}

/* =============================================== hero collage cross-fade */
.hero__tile{aspect-ratio:1/1}
.hero__layer{position:absolute;inset:0;opacity:0;transition:opacity .8s var(--ease)}
.hero__layer.is-on{opacity:1}
.hero__layer picture,.hero__layer img{width:100%;height:100%;object-fit:cover;display:block}
.hero__caption{align-items:center}
.hero__count{display:flex;align-items:baseline;gap:.1rem;margin-left:auto;margin-right:.5rem;
  font-size:.72rem;letter-spacing:.1em;color:rgba(243,239,233,.5)}
.hero__count b{font-family:var(--display);font-weight:800;font-size:1.1rem;color:#fff;letter-spacing:-.02em}
.hero__prog{position:absolute;left:0;right:0;bottom:-10px;height:2px;display:block;
  background:rgba(255,255,255,.13);overflow:hidden}
.hero__prog i{display:block;height:100%;background:var(--gold-2);transform-origin:left;
  transform:scaleX(0);animation:heroProg 6s linear forwards}
@keyframes heroProg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero__pause[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#1A1305}
@media(prefers-reduced-motion:reduce){
  .hero__layer{transition:none}
  .hero__prog i{animation:none;transform:scaleX(1)}
}

/* =========================================================== lightbox */
.lb{border:0;padding:0;width:100%;max-width:min(1180px,94vw);background:transparent;color:#fff}
.lb::backdrop{background:rgba(9,8,7,.92)}
.lb__stage{background:var(--ink-2);display:grid;place-items:center;border-radius:var(--r);
  max-height:76vh;overflow:hidden}
.lb__stage img{width:100%;height:auto;max-height:76vh;object-fit:contain;display:block}
.lb__bar{display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;padding:16px 2px 0}
.lb__meta b{display:block;font-family:var(--display);font-weight:800;font-size:1.02rem;
  letter-spacing:.01em;text-transform:uppercase}
.lb__meta span{display:block;margin-top:.2rem;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-2)}
.lb__x{position:absolute;top:-48px;right:0;width:40px;height:40px;display:grid;place-items:center;
  background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;
  border-radius:var(--r);cursor:pointer}
.lb__x svg{width:18px;height:18px}
.lb__x:hover{background:#fff;color:var(--ink)}
.lb__nav{position:fixed;top:50%;transform:translateY(-50%);width:48px;height:48px;
  display:grid;place-items:center;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.24);color:#fff;border-radius:50%;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s}
.lb__nav svg{width:20px;height:20px}
.lb__nav--prev{left:max(10px,2.5vw)}
.lb__nav--next{right:max(10px,2.5vw)}
.lb__nav:hover{background:var(--gold);border-color:var(--gold);color:#1A1305}
@media(max-width:760px){.lb__nav{display:none}.lb__x{top:-44px}}

/* ==================================================== project tile labels */
/* Always visible: the caption is how a visitor knows what the job was. */
.proj__cap{opacity:1;transform:none}
.proj__cap b{display:block}
.proj__cap em{display:block;font-style:normal;font-size:.66rem;letter-spacing:.12em;
  color:var(--gold-2);margin-top:.25rem}

/* ========================================================== facts row */
/* Long values — a planning note runs to several lines — so these sit full
   width rather than being squeezed into half a column. */
.facts-row{display:grid;gap:clamp(18px,2.4vw,34px);grid-template-columns:repeat(3,1fr)}
.fact{border-top:2px solid var(--gold-2);padding-top:1rem;min-width:0}
.fact>span{display:block;margin-bottom:.55rem;font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fact>div{font-size:.98rem;line-height:1.65}
.fact--wide{grid-column:span 2}
@media(max-width:900px){
  .facts-row{grid-template-columns:1fr}
  .fact--wide{grid-column:auto}
}

/* ======================================================== footer phone */
.foot__phone{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.1rem;
  font-family:var(--display);font-weight:800;font-size:clamp(1.2rem,1.7vw,1.5rem);
  letter-spacing:-.02em;color:#fff}
.foot__phone svg{width:20px;height:20px;flex:none;color:var(--gold-2)}
.foot__phone:hover{color:var(--gold-2)}

/* The backstop. Icons carry their own width/height attributes, and the rules
   above set the exact size; this only catches an icon that has neither, so it
   can never render at the SVG default of 300x150. */
a>svg,button>svg,span>svg{width:1.05em;height:1.05em}
/* ============================================ small photo sets (< 3 images) */
/* A horizontal scroller with one or two photographs strands them at the left
   edge of an empty track. These layouts fill the width instead. */
.split--photos{align-items:start}
.split--photos .split__text{max-width:none}
.split--photos .slider__head{display:block;margin-bottom:clamp(20px,2.4vw,30px)}
.split--photos .slider__head .btn-row{margin-top:1.4rem}
.showcase__grid{display:grid;gap:clamp(12px,1.6vw,22px);
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:700px){.showcase__grid{grid-template-columns:1fr}}