/* ==========================================================================
   FONTS : self-hosted, preloaded, and metric-matched
   --------------------------------------------------------------------------
   Myles, 27 Aug 2026 : 'on desktop this text loads very weird when i do a hard
   refresh - vision starts on the second row then moves up, and the lede shifts
   one word up at a time.'

   That is a font swap reflow, and it had three causes stacked up :
     1. The face came from Google, so the browser made TWO third-party round
        trips (their CSS, then the font files) before it could paint properly.
     2. FIVE weights were requested. It is a variable font ; one file covers
        400 to 800.
     3. font-display:swap paints in the fallback first and re-lays out on
        arrival, and the fallback is 5.4% NARROWER than Plus Jakarta Sans
        (measured : 5363 against 5653 for the same string at 100px). Narrower
        text fits more words per line, so when the real font landed everything
        got wider and words were pushed onto different lines.

   Fixed by removing all three : the font is now same-origin, one 27KB variable
   file, preloaded in the head so it is requested with the CSS rather than
   after it. And the fallback below carries size-adjust:104.31%, measured
   against Arial, so it occupies the same width as the real face. Even if a
   swap does happen, nothing moves.

   Arial is the deliberate source for the fallback rather than system-ui :
   system-ui is Segoe UI on Windows and SF on a Mac, which need different
   adjustments. Arial is on every platform and measures the same everywhere.
   ========================================================================== */
@font-face{
  font-family:'Plus Jakarta Sans';
  src:url('assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
  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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Plus Jakarta Sans';
  src:url('assets/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'PJS Fallback';
  src:local('Arial'),local('Helvetica'),local('Liberation Sans');
  size-adjust:104.31%;
  ascent-override:96%;
  descent-override:24%;
  line-gap-override:0%;
}

/*
Theme Name:   Silverpoint Construction
Theme URI:    https://silverpointconstruction.co.uk
Author:       Silverpoint Construction
Description:  Purpose-built theme for Silverpoint Construction. No page builder, no framework.
              Ported from the approved static redesign (Aug 2026). Design system locked :
              Plus Jakarta Sans, navy #1F2B40 / gold #EABA82 / ivory #F4F0E9, headline
              treatment 4 (uppercase, 800 weight, +0.005em tracking).
Version:      1.4.1
Requires PHP: 8.0
Text Domain:  silverpoint
*/

/* ==========================================================================
   BASE : tokens, layout, header, footer, homepage sections
   ========================================================================== */

:root{
  --ink:#0E1826;--ink-2:#16233A;--ink-3:#1F2B40;
  --gold:#EABA82;--gold-d:#C39157;
  --ivory:#F4F0E9;--ivory-2:#EAE4D9;
  --line:rgba(234,186,130,.3);--soft:rgba(255,255,255,.12);
  --maxw:1280px;--gut:clamp(20px,4vw,64px);
  --f:"Plus Jakarta Sans",'PJS Fallback',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:#fff;font-family:var(--f);font-weight:400;font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}
svg{display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

/* type */
h1,h2{text-transform:uppercase;font-weight:800;letter-spacing:.005em;line-height:1.14}
h3{font-weight:700;letter-spacing:-.02em;line-height:1.24}
.h-xl{font-size:clamp(29px,4.3vw,62px)}
.h-lg{font-size:clamp(23px,2.9vw,42px)}
.lede{font-size:clamp(16px,1.35vw,19px);color:rgba(255,255,255,.94);max-width:60ch}
.eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--gold)}
.btn{display:inline-flex;align-items:center;gap:11px;padding:16px 28px;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--gold);color:var(--ink);border:1px solid var(--gold);transition:.28s;cursor:pointer}
.btn:hover{background:transparent;color:var(--gold)}
.btn2{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn2:hover{background:#fff;color:var(--ink);border-color:#fff}
.sec{padding:clamp(56px,8vh,110px) 0}
.light{background:var(--ivory);color:var(--ink)}
.light h2,.light h3{color:var(--ink)}
.light .lede{color:rgba(14,24,38,.86)}
.light .eyebrow{color:var(--gold-d)}
.light p{color:rgba(14,24,38,.84)}
.ic{width:30px;height:30px;stroke:var(--gold);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.light .ic{stroke:var(--gold-d)}
.ic-lg{width:38px;height:38px}
.rule{height:1px;background:linear-gradient(90deg,var(--gold),transparent);opacity:.6}

/* reveal (progressive enhancement) */
.js .rv{opacity:0;transform:translateY(26px);transition:.9s cubic-bezier(.2,.7,.3,1)}
.js .rv.in{opacity:1;transform:none}
.js .rv[data-d="1"]{transition-delay:.09s}.js .rv[data-d="2"]{transition-delay:.18s}
.js .rv[data-d="3"]{transition-delay:.27s}.js .rv[data-d="4"]{transition-delay:.36s}

/* header */
.topbar{border-bottom:1px solid rgba(255,255,255,.1);font-size:13px;color:#fff}
.topbar .wrap{display:flex;justify-content:space-between;gap:18px;padding:11px var(--gut);flex-wrap:wrap}
.topbar a:hover{color:var(--gold)}
.topbar .tb{display:inline-flex;align-items:center;gap:8px}
/* HIDDEN ON PHONES. At 390px the bar wrapped to two rows and stood 117px tall,
   which is 14 per cent of the screen spent before the logo, and it pushed the
   headline down to y=377. Nothing is lost by removing it : on a phone the same
   phone number, mobile and email all appear in the slide-in menu foot, and the
   sticky call bar sits on screen the whole time.
   Phones only. At 640px and up it is 67px on a single row and earns its place.
   Myles' call, 27 Aug 2026. */
@media(max-width:640px){.topbar{display:none}}
.topbar .tb .ic{width:15px;height:15px;flex:none;color:var(--gold)}
.tb-right{display:inline-flex;align-items:center;gap:26px}
/* The header is SOLID at all times. It used to be fully transparent at rest and
   fade to rgba(14,24,38,.95) over .45s on stick, so you watched the page scroll
   through it during the fade, and even settled it was never solid : 5 per cent
   bled through and a 14px backdrop blur smeared whatever was under it.
   Safe to make permanent because the header sits ABOVE the hero, it does not
   overlay it : measured header bottom 145px against hero top 145px on every
   page. Nothing at the top of the page changes.
   Only the hairline border still transitions : that is the cue that it has
   stuck, and a border is not a transparency. Myles' call, 26 Aug 2026. */
header{position:sticky;top:0;z-index:70;background:var(--ink);transition:border-color .45s;border-bottom:1px solid transparent}
header.stuck{border-bottom-color:rgba(255,255,255,.1)}
/* padding-block, NOT the padding shorthand. These elements also carry .wrap,
   which sets padding:0 var(--gut). Both selectors are a single class, so the
   later one wins outright and a shorthand here silently wiped the horizontal
   gutter. Above ~1300px it looked fine because .wrap's max-width centred it
   and produced a margin by accident ; below that the margin vanished and the
   content sat hard against x=0 on every phone and tablet. Found 26 Aug 2026. */
.nav{display:flex;align-items:center;justify-content:space-between;gap:28px;padding-block:20px}
/* The header sticks but keeps its height. It used to shrink on scroll, which
   fired a second animation immediately after the stick and read as a jolt.
   Myles' call, 26 Aug 2026 : one movement, not two. */
/* height:auto on every logo, permanently. These images carry width/height
   attributes for aspect-ratio, so any CSS that sets width alone leaves them on
   the attribute height and squashes them. That happened three times to this
   logo before this rule existed. Do not remove it to 'tidy up'. */
.logo img,.f-logo img,.mnav__top img{height:auto}
.logo img{width:186px}
.menu{display:flex;gap:32px;font-size:15.5px;font-weight:500;color:#fff}
.menu a{position:relative;padding:6px 0}
.menu a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--gold);transition:width .4s cubic-bezier(.7,0,.2,1)}
.menu a:hover::after{width:100%}

/* hero */
.hero{position:relative;overflow:hidden;min-height:clamp(560px,84vh,880px);display:flex;align-items:flex-end}
.hero__bg{position:absolute;inset:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;transform:none}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,24,38,.84),rgba(14,24,38,.42) 40%,rgba(14,24,38,.94)),linear-gradient(90deg,rgba(14,24,38,.8),rgba(14,24,38,.08) 64%)}
.hero__in{position:relative;z-index:2;width:100%;padding-block:120px 0}
.hero h1{max-width:19ch;margin:20px 0 22px}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero .lede{max-width:54ch}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
/* trust row : hairline layout with icons */
.trust{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:clamp(44px,7vh,80px)}
.trust>div{padding:24px 28px 30px;border-right:1px solid var(--soft);display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.trust>div:last-child{border-right:0}
.trust b{display:block;color:var(--gold);font-size:16px;font-weight:700;margin-bottom:5px}
.trust span{font-size:14.5px;color:rgba(255,255,255,.9);line-height:1.55}

/* who we are */
.intro__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,5vw,74px);align-items:center}
.intro__media{position:relative;overflow:hidden}
.intro__media img{width:100%;aspect-ratio:1;object-fit:cover}
.intro__tag{position:absolute;left:0;top:0;background:var(--gold);color:var(--ink);font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:9px 16px;z-index:2}
.ticks{list-style:none;margin-top:28px;display:grid}
.ticks li{display:flex;gap:15px;align-items:center;padding:15px 0;border-top:1px solid rgba(14,24,38,.15);font-weight:500;color:rgba(14,24,38,.92)}
.ticks li:last-child{border-bottom:1px solid rgba(14,24,38,.15)}
.ticks i{font-style:normal;color:var(--gold-d);font-weight:800;font-size:13px}

/* section heads */
.sh{display:grid;grid-template-columns:1.05fr .95fr;gap:8px clamp(30px,6vw,80px);align-items:end;margin-bottom:clamp(34px,5vh,58px)}
.sh .eyebrow{grid-column:1/-1;margin-bottom:18px}
.sh .rule{grid-column:1/-1;margin-top:26px}
@media(max-width:880px){.sh{grid-template-columns:1fr;gap:14px}}

/* services */
.svcs{background:var(--ink)}
.svc-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2vw,26px);grid-auto-rows:1fr}
.svc{position:relative;display:block;overflow:hidden;background:var(--ink-2);height:100%}
.svc:nth-child(1){grid-column:span 7}.svc:nth-child(2){grid-column:span 5}
.svc:nth-child(3){grid-column:span 5}.svc:nth-child(4){grid-column:span 7}
.svc__img{height:100%;overflow:hidden;position:relative}
.svc__img img{width:100%;height:100%;min-height:300px;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.svc:hover .svc__img img{transform:scale(1.06)}
.svc__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(14,24,38,.9))}
/* The New Builds tile is the only real photograph in this grid : the other three
   are purpose-made images already lit for dusk, so ungraded it sat cold and flat
   beside them. Myles' call, 26 Aug 2026 : grade the real photo rather than
   replace it with a fourth generated one.
   A grade shifts the colours that are in the file, it CANNOT add a light source,
   so the vignette does the other half of the work : it darkens the untidy edges
   and the bare ground and pulls the eye onto the houses.
   No z-index anywhere : ::before must paint over the photo and under ::after,
   which is exactly what DOM order already gives, and a z-index here would lift
   the warm wash above the dark scrim the caption needs to stay readable.
   STRENGTH : chosen by rendering four steps beside the untouched Extensions
   tile and matching to it. Myles' first read of the mild version was 'still too
   bright'. The reference tile is a genuinely dark dusk photograph, so warming
   alone was never going to reach it : it had to go DARKER first, or it just
   turned orange.
   Myles bracketed it himself : .96 'still too bright', .70 'slightly too dark'.
   .81 sits near the midpoint and is the last step that keeps the sky deep while
   the brick still reads. Do not nudge this without rendering it beside the
   Extensions tile : the match is to that photograph, not to taste. */
.svc--new-builds .svc__img img{filter:saturate(1.30) sepia(.44) hue-rotate(-10deg) contrast(1.12) brightness(.81)}
.svc--new-builds .svc__img::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 42%,rgba(234,186,130,.28),rgba(14,24,38,.53) 100%);
  mix-blend-mode:soft-light}
.svc__body{position:absolute;left:0;right:0;bottom:0;padding:26px 30px;z-index:2}
.svc__body h3{font-size:clamp(20px,1.9vw,25px);margin-bottom:7px}
.svc__body p{font-size:15px;color:rgba(255,255,255,.9);max-width:40ch}
.svc__more{display:inline-flex;align-items:center;gap:9px;margin-top:14px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--gold);opacity:0;transform:translateY(8px);transition:.45s cubic-bezier(.2,.7,.3,1)}
.svc:hover .svc__more{opacity:1;transform:none}
/* No hover on a touch screen, so the reveal never fires and the label was
   invisible on every phone and tablet. Show it outright where hover does not
   exist. Found 26 Aug 2026. */
@media(hover:none){.svc__more{opacity:1;transform:none}}

/* why choose : icon cards on ivory */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px)}
.why-grid>div{background:#fff;padding:34px 30px 36px;border-bottom:3px solid var(--gold);
  transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s,border-bottom-color .45s}
/* Restraint is the whole point on these : a small lift, a soft shadow and the
   gold deepening. Anything larger stops reading as premium and starts reading
   as a template. Added 26 Aug 2026 at Myles' request. */
.why-grid>div:hover{transform:translateY(-5px);border-bottom-color:var(--gold-d);
  box-shadow:0 20px 44px -26px rgba(14,24,38,.5)}
.why-grid .ic{transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.why-grid>div:hover .ic{transform:translateY(-3px)}
.why-grid .ic{margin-bottom:22px}
.why-grid h3{font-size:18.5px;margin-bottom:9px}
.why-grid p{font-size:14.5px}

/* projects */
.proj-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,40px)}
.proj{position:relative;overflow:hidden;display:block}
.proj img{width:100%;aspect-ratio:5/4;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.3,1)}
.proj:hover img{transform:scale(1.05)}
.proj__scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 46%,rgba(14,24,38,.93))}
.proj__body{position:absolute;left:0;right:0;bottom:0;padding:clamp(24px,3vw,38px)}
.proj__body h3{font-size:clamp(21px,2.1vw,28px);margin-bottom:12px}
.proj__meta{display:flex;flex-wrap:wrap;gap:0 22px;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--gold)}

/* process : centred circles */
.proc-track{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,34px);text-align:center;position:relative;margin-top:8px}
.proc-track::before{content:"";position:absolute;left:12%;right:12%;top:31px;height:2px;background:var(--gold-d);opacity:.45}
.proc-track .dot{position:relative;z-index:2;width:62px;height:62px;border-radius:50%;background:var(--ivory);border:2px solid var(--gold-d);display:grid;place-items:center;margin:0 auto 20px}
/* The step circles fill with gold and the icon flips to ivory. These are not
   links, so the movement is deliberately small : enough to feel alive, not
   enough to promise a click that does not exist. */
.proc-track>div .dot{transition:background .45s,border-color .45s,transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s}
.proc-track>div .dot .ic{transition:color .45s}
.proc-track>div:hover .dot{background:var(--gold-d);border-color:var(--gold-d);transform:scale(1.07);
  box-shadow:0 12px 30px -14px rgba(195,145,87,.75)}
.proc-track>div:hover .dot .ic{color:var(--ivory)}
.proc-track h3{font-size:18.5px;margin-bottom:9px}
.proc-track p{font-size:14.5px;max-width:32ch;margin:0 auto}

/* areas */
.areas{background:var(--ink-2)}.essexmap svg{width:100%;height:auto;display:block;font-family:"Plus Jakarta Sans",'PJS Fallback',Arial,sans-serif}
.areas__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(26px,5vw,70px);align-items:center}
.dial{position:relative;aspect-ratio:1;max-width:420px;width:100%;margin:0 auto}
.dial i{position:absolute;inset:0;border:1px solid rgba(234,186,130,.32);border-radius:50%}
.dial i:nth-child(2){inset:17%}.dial i:nth-child(3){inset:34%}
.dial .pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--gold);color:var(--ink);padding:13px 20px;font-weight:800;font-size:15px;letter-spacing:.04em;text-transform:uppercase;z-index:3;white-space:nowrap}
.dial .tn{position:absolute;font-size:clamp(13px,1.2vw,16px);font-weight:700;color:#fff;background:var(--ink-2);padding:3px 9px;white-space:nowrap}

/* testimonials */
.revs{background:var(--ink-3)}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,32px)}
.rev{border:1px solid var(--soft);padding:clamp(26px,2.8vw,38px);position:relative;transition:.45s}
.rev:hover{border-color:var(--line);transform:translateY(-5px)}
.rev .st{color:var(--gold);letter-spacing:.22em;font-size:13px;margin-bottom:16px}
.rev p{font-size:15.5px;color:rgba(255,255,255,.94);margin-bottom:24px}
.rev__by{border-top:1px solid var(--soft);padding-top:17px;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--gold)}
.rev__by small{display:block;text-transform:none;letter-spacing:0;font-size:13.5px;color:rgba(255,255,255,.7);font-weight:400;margin-top:4px}

/* faq */
.faq-list{max-width:940px}
.faq-list .qa{padding:28px 0;border-top:1px solid rgba(14,24,38,.15)}
.faq-list .qa:last-child{border-bottom:1px solid rgba(14,24,38,.15)}
.faq-list h3{font-size:clamp(18px,1.9vw,24px);margin-bottom:11px}
.faq-list p{font-size:16px;max-width:72ch}

/* cta */
.cta{background:var(--gold);color:var(--ink);position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;opacity:.15;background-image:linear-gradient(rgba(14,24,38,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(14,24,38,.5) 1px,transparent 1px);background-size:64px 64px}
.cta__in{position:relative;z-index:2;display:grid;grid-template-columns:1.2fr auto;gap:36px;align-items:center;padding-block:clamp(48px,7vh,88px)}
.cta h2{font-size:clamp(26px,3.4vw,50px);margin-bottom:14px}
.cta p{font-size:18px;color:rgba(14,24,38,.82);max-width:52ch}
.cta .btn{border-color:var(--ink);background:var(--ink);color:var(--gold)}
.cta .btn:hover{background:transparent;color:var(--ink)}

/* footer */
footer{background:var(--ink);padding-top:clamp(58px,8vh,94px)}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(28px,4vw,60px);padding-bottom:56px}
footer h3{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:22px}
footer ul{list-style:none;display:grid;gap:11px;font-size:15px;color:rgba(255,255,255,.9)}
footer ul a:hover{color:var(--gold)}
footer .f-logo img{width:196px;margin-bottom:20px}
footer .f-blurb{font-size:15px;color:rgba(255,255,255,.88);max-width:34ch}
.f-bot{border-top:1px solid var(--soft);padding:24px 0;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13.5px;color:rgba(255,255,255,.72)}



/* mobile sticky call bar */
.callbar{display:none}
/* The call bar icon sits with the word, not beside it. */
.callbar .call{display:flex;align-items:center;justify-content:center;gap:9px}
@media(max-width:820px){
  .callbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:200}
  .callbar a{padding:17px 10px;text-align:center;font-weight:800;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase}
  .callbar .call{background:var(--gold);color:var(--ink)}
  .callbar .quote{background:var(--ink-3);color:#fff}
  body{padding-bottom:56px}
}

@media(max-width:1000px){
  .intro__grid,.why-grid,.areas__grid,.rev-grid,.cta__in,.f-grid{grid-template-columns:1fr}
  .proc-track{grid-template-columns:repeat(2,1fr);gap:36px}
  .proc-track::before{display:none}
  .svc:nth-child(n){grid-column:span 6}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .f-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .menu{display:none}
  .trust{grid-template-columns:1fr}
  .trust>div{border-right:0;border-bottom:1px solid var(--soft)}
  .svc:nth-child(n){grid-column:span 12}
  .proj-grid,.why-grid,.proc-track,.f-grid{grid-template-columns:1fr}
}

/* ---- rhythm fix : areas(navy) > testimonials(ivory) > faq(navy) ---- */
.revs{background:var(--ivory);color:var(--ink)}
.revs h2,.revs h3{color:var(--ink)}
.revs .eyebrow{color:var(--gold-d)}
.revs .lede{color:rgba(14,24,38,.86)}
.revs .rev{background:#fff;border-color:rgba(14,24,38,.12)}
.revs .rev:hover{border-color:var(--gold-d)}
.revs .rev p{color:rgba(14,24,38,.86)}
.revs .rev .st{color:var(--gold-d)}
.revs .rev__by{color:var(--gold-d);border-top-color:rgba(14,24,38,.12)}
.revs .rev__by small{color:rgba(14,24,38,.6)}
/* faq moves onto navy so it doesn't sit light-on-light */
.faqsec{background:var(--ink-2)!important;color:#fff}
.faqsec h2,.faqsec h3{color:#fff}
.faqsec .eyebrow{color:var(--gold)}
.faqsec .qa{border-top-color:var(--soft)}
.faqsec .qa:last-child{border-bottom-color:var(--soft)}
.faqsec p{color:rgba(255,255,255,.9)}

/* FAQ layout C4 : questions lead on the left, navy contact card on the right, on navy */
.faqC{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(26px,5vw,64px);align-items:start}
.faqsec details{border-top:1px solid var(--soft);padding:20px 0}
.faqsec details:last-of-type{border-bottom:1px solid var(--soft)}
.faqsec summary{cursor:pointer;font-weight:700;font-size:18px;letter-spacing:-.01em;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:flex-start;color:#fff}
.faqsec summary::-webkit-details-marker{display:none}
.faqsec summary::after{content:'+';color:var(--gold);font-weight:800;font-size:22px;line-height:1}
.faqsec details[open] summary::after{content:'\2013'}
.faqsec details p{margin-top:12px;color:rgba(255,255,255,.82);max-width:64ch}
/* The question warms on hover so it reads as something you can open. */
.faqsec summary{transition:color .3s}
.faqsec summary:hover{color:var(--gold)}
.faqsec summary::after{transition:transform .35s cubic-bezier(.2,.7,.3,1),color .3s}
.faqsec summary:hover::after{transform:scale(1.15)}
.faqsec summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.cta-card{background:var(--ink-3);color:#fff;padding:34px 30px}
.cta-card h3{font-size:21px;font-weight:800;text-transform:uppercase;letter-spacing:.01em;margin-bottom:10px;color:#fff}
.cta-card p{font-size:15.5px;color:rgba(255,255,255,.8);margin-bottom:20px}
.cta-card .tel,.cta-card .mail{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--gold);font-weight:800;font-size:22px;letter-spacing:-.01em;margin-bottom:10px}
.cta-card .tel.sm{font-size:17px;opacity:.85}
.cta-card .mail{font-size:14.5px;font-weight:600;color:rgba(255,255,255,.78);word-break:break-all}
.cta-card .tel .ic,.cta-card .mail .ic{width:19px;height:19px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cta-card .hours{margin-top:16px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.faqC .stick{position:sticky;top:24px}
@media(max-width:900px){
  .faqC{grid-template-columns:1fr}
  .faqC .cta-card{order:2}
  .faqC .stick{position:static}
}

/* ===================== MOBILE NAVIGATION + TAP TARGETS ===================== */
.burger{display:none;width:46px;height:46px;background:transparent;border:1px solid rgba(255,255,255,.22);cursor:pointer;padding:0;place-items:center;transition:border-color .25s,background .25s}
.burger:hover{border-color:var(--gold)}
.burger:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.burger span{display:block;width:20px;height:2px;background:#fff;position:relative;transition:background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:#fff;transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.burger span::before{top:-6px}
.burger span::after{top:6px}
body.mnav-open .burger span{background:transparent}
body.mnav-open .burger span::before{transform:translateY(6px) rotate(45deg)}
body.mnav-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}

.mnav{position:fixed;inset:0;z-index:400;background:var(--ink);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .34s cubic-bezier(.2,.7,.3,1);visibility:hidden}
body.mnav-open .mnav{transform:none;visibility:visible}
.mnav__top{display:flex;align-items:center;justify-content:space-between;padding:20px var(--gut);border-bottom:1px solid var(--soft)}
.mnav__top img{width:160px}
/* The page header matches the menu panel wherever the burger is in use.
   Measured before changing anything : the page header was the BIGGER of the two
   at 100px with a 186px logo, against the panel's 91px and 160px. Opening the
   menu therefore shrank the logo, which is the jump Myles noticed.
   Matched DOWN to the panel rather than up, on his instruction, which also
   returns 9px of a phone screen. The panel is what the shared 160px belongs to,
   so it is defined once here and the header follows it.
   880px because that is where the burger takes over from the desktop menu :
   above it there is no panel to match. */
@media(max-width:880px){
  /* height:auto is REQUIRED, not tidiness. The img carries width="186"
     height="59" attributes, and when CSS sets only the width the browser keeps
     the attribute height : the logo came out 160 wide by 59 tall and visibly
     squashed. Same trap as the 12 Aug squash. */
  .logo img{width:160px;height:auto}
}
.mnav__close{width:46px;height:46px;background:transparent;border:1px solid rgba(255,255,255,.22);color:#fff;font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center}
.mnav__close:hover{border-color:var(--gold);color:var(--gold)}
.mnav__close:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.mnav__links{flex:1;overflow-y:auto;padding:8px var(--gut) 24px}
.mnav__links a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:16px 0;border-bottom:1px solid var(--soft);font-size:20px;font-weight:800;letter-spacing:-.01em;color:#fff;text-transform:uppercase}
.mnav__links a:hover,.mnav__links a:focus-visible{color:var(--gold)}
.mnav__links a::after{content:"";width:9px;height:9px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg);flex:0 0 auto}
/* flex:none is load-bearing. .mnav is a flex COLUMN, so this foot had the
   default flex-shrink:1 and was being squeezed whenever the panel was full :
   the email link measured 40px in a real browser no matter what min-height it
   was given, because it was being compressed rather than styled. The links
   list above already scrolls, so that is the part that should absorb a short
   screen, not the fixed footer. Found 26 Aug 2026 after two failed attempts
   to fix this by raising min-height. */
.mnav__foot{flex:0 0 auto;padding:22px var(--gut) calc(22px + env(safe-area-inset-bottom));border-top:1px solid var(--soft);display:grid;gap:12px}
.mnav__foot a.tel{display:flex;align-items:center;gap:11px;min-height:48px;font-size:22px;font-weight:800;color:var(--gold);letter-spacing:-.01em}
/* min-height 48 to match the phone link above it : it measured 40px in a real
   browser despite a 44px minimum, and 44 is the floor for a finger, not a target. */
.mnav__foot a.mail{display:flex;align-items:center;gap:11px;min-height:48px;font-size:15px;color:rgba(255,255,255,.8);word-break:break-all}
.mnav__foot a.mail .ic{flex:none;color:var(--gold)}
.mnav__foot .btn{justify-content:center;text-align:center}

@media(max-width:880px){
  .menu{display:none}
  .burger{display:grid}
  header .nav .btn{display:none}          /* quote button lives in the panel + call bar */
}
@media(min-width:881px){
  .mnav{display:none}
}

/* ---- tap targets : nothing interactive under 44px on touch widths (incl. iPad landscape) ---- */
@media(max-width:1024px){
  .topbar .wrap{gap:6px}
  .topbar a,.topbar span{display:inline-flex;align-items:center;min-height:44px}
  footer .f-links a,footer a{display:inline-flex;align-items:center;min-height:44px}
  .crumb{display:flex;flex-wrap:wrap;align-items:center;min-height:44px}
  .crumb a{display:inline-flex;align-items:center;min-height:44px;padding-right:4px}
  .more,.go{min-height:44px;align-items:center}
  .cta-card .tel,.cta-card .mail,.dcard .dv{min-height:44px;align-items:center}
  summary{min-height:52px;align-items:center !important}
  .s3band a .in{min-height:44px}
  .fnote{font-size:14px}
  .menu a{display:inline-flex;align-items:center;min-height:44px}
  .menu a::after{bottom:9px}
  section.assure .wrap,.pgrid{grid-template-columns:repeat(2,1fr)}
}
/* ===================== END MOBILE NAVIGATION ===================== */


/* ==========================================================================
   SERVICES
   ========================================================================== */
body.page-template-services .crumb{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:700}
body.page-template-services .crumb a{color:rgba(255,255,255,.55)}body.page-template-services .crumb a:hover{color:var(--gold)}
body.page-template-services .ph h1{font-size:clamp(30px,4.4vw,60px);text-transform:uppercase;font-weight:800;letter-spacing:.005em;line-height:1.06;margin:16px 0 20px}
body.page-template-services .ph .lede{font-size:clamp(16px,1.3vw,19px);color:rgba(255,255,255,.86);max-width:60ch}
body.page-template-services .ph .btn{margin-top:28px}
body.page-template-services .assure{background:var(--ivory);color:var(--ink)}
body.page-template-services .assure .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(22px,3vw,44px)}
body.page-template-services .assure h2{grid-column:1/-1;font-size:clamp(22px,2.4vw,34px);text-transform:uppercase;font-weight:800;color:var(--ink);margin-bottom:6px}
body.page-template-services .asr h3{font-size:17px;font-weight:800;color:var(--ink);margin-bottom:8px}
body.page-template-services .asr p{font-size:15px;color:rgba(14,24,38,.8)}
body.page-template-services .asr .ic{margin-bottom:14px;stroke:var(--gold-d)}
body.page-template-services .slist{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:9px}
body.page-template-services .slist li{display:flex;gap:11px;font-size:15px;color:rgba(255,255,255,.8)}
body.page-template-services .slist li::before{content:"";width:7px;height:7px;margin-top:8px;flex:0 0 auto;background:var(--gold)}
body.page-template-services .more{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--gold);align-self:flex-start;transition:gap .3s}
body.page-template-services .more:hover{gap:15px}

body.page-template-services .hK{position:relative;overflow:hidden;display:flex;align-items:flex-end;min-height:clamp(460px,62vh,600px);background:var(--ink-2)}
body.page-template-services .hK__bg{position:absolute;inset:0}
body.page-template-services .hK__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;filter:saturate(1.18) sepia(.22) hue-rotate(-6deg) contrast(1.04);transform:none}
body.page-template-services .hK__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,24,38,.84),rgba(14,24,38,.42) 40%,rgba(14,24,38,.94)),linear-gradient(90deg,rgba(14,24,38,.8),rgba(14,24,38,.08) 64%)}
body.page-template-services .hK__in{position:relative;z-index:2;width:100%;padding:110px 0 clamp(38px,5vh,62px)}
body.page-template-services .hK .inner{max-width:620px}
body.page-template-services .hK h1{font-size:clamp(30px,4vw,54px)}
@media(max-width:880px){body.page-template-services .hK{min-height:auto}body.page-template-services .hK__in{padding:80px 0 46px}}

body.page-template-services .band-s{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:clamp(400px,58vh,560px);background:var(--ink-2);position:relative}
body.page-template-services .band-s + .band-s{border-top:1px solid var(--soft)}
body.page-template-services .band-s:nth-child(even) .band-s__media{order:2}
body.page-template-services .band-s__media{position:relative;height:100%;min-height:clamp(320px,52vh,560px);overflow:hidden}
body.page-template-services .band-s__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.3s cubic-bezier(.2,.7,.3,1)}
body.page-template-services .band-s:hover .band-s__media img{transform:scale(1.04)}
body.page-template-services .band-s__body{padding:clamp(34px,5vw,88px);max-width:640px;justify-self:center}
body.page-template-services .bnum{font-size:clamp(46px,6vw,88px);font-weight:800;line-height:.9;color:transparent;-webkit-text-stroke:1.5px rgba(234,186,130,.55);margin-bottom:18px;display:block}
body.page-template-services .band-s h2{font-size:clamp(24px,2.7vw,40px);text-transform:uppercase;font-weight:800;letter-spacing:.005em;margin-bottom:16px}
body.page-template-services .band-s p{color:rgba(255,255,255,.86);margin-bottom:20px}
@media(max-width:860px){body.page-template-services .band-s,body.page-template-services .band-s:nth-child(even){grid-template-columns:1fr}body.page-template-services .band-s:nth-child(even) .band-s__media{order:0}body.page-template-services .band-s__media{min-height:240px}}


/* ==========================================================================
   SERVICE
   ========================================================================== */
/* ===== interior page shell ===== */
body.page-template-service-detail .crumb{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:700}
body.page-template-service-detail .crumb a{color:rgba(255,255,255,.6)}body.page-template-service-detail .crumb a:hover{color:var(--gold)}

/* hero : locked treatment, homepage overlay + W1 grade */
body.page-template-service-detail .hK{position:relative;overflow:hidden;display:flex;align-items:flex-end;min-height:clamp(440px,58vh,560px);background:var(--ink-2)}
body.page-template-service-detail .hK__bg{position:absolute;inset:0}
body.page-template-service-detail .hK__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:saturate(1.18) sepia(.22) hue-rotate(-6deg) contrast(1.04);transform:none}
body.page-template-service-detail .hK__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,24,38,.84),rgba(14,24,38,.42) 40%,rgba(14,24,38,.94)),linear-gradient(90deg,rgba(14,24,38,.8),rgba(14,24,38,.08) 64%)}
body.page-template-service-detail .hK__in{position:relative;z-index:2;width:100%;padding:104px 0 clamp(36px,5vh,58px)}
body.page-template-service-detail .hK .inner{max-width:640px}
body.page-template-service-detail .hK h1{font-size:clamp(28px,3.6vw,50px);text-transform:uppercase;font-weight:800;letter-spacing:.005em;line-height:1.07;margin:16px 0 18px}
body.page-template-service-detail .hK .lede{font-size:clamp(15.5px,1.2vw,18px);color:rgba(255,255,255,.9);max-width:54ch}
body.page-template-service-detail .hK .btn{margin-top:26px}
@media(max-width:880px){body.page-template-service-detail .hK{min-height:auto}body.page-template-service-detail .hK__in{padding:76px 0 44px}}
/* House Extensions hero : sit the frame lower so the extension is the subject and
   not the roof above it. PER PAGE on purpose - object-position is a per-image
   decision, and the other three service photos are framed correctly at 30%.
   Must come AFTER the .page-template-service-detail rule : identical specificity,
   so source order is what decides the winner. */
body.page-house-extensions .hK__bg img{object-position:50% 58%}

/* intro + benefits */
body.page-template-service-detail .intro .wrap{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(26px,4vw,68px);align-items:start}
body.page-template-service-detail .intro h2{font-size:clamp(23px,2.5vw,36px);text-transform:uppercase;font-weight:800;letter-spacing:.005em;margin:14px 0 18px}
body.page-template-service-detail .intro p{color:rgba(255,255,255,.86);margin-bottom:14px;max-width:56ch}
body.page-template-service-detail .benbox{background:var(--ink-3);padding:clamp(26px,3vw,44px);border-top:3px solid var(--gold)}
body.page-template-service-detail .benbox h3{font-size:19px;font-weight:800;text-transform:uppercase;letter-spacing:.01em;margin-bottom:18px}
body.page-template-service-detail .benlist{list-style:none;margin:0;padding:0;display:grid;gap:14px}
body.page-template-service-detail .benlist li{display:flex;gap:13px;font-size:15.5px;color:rgba(255,255,255,.88);align-items:flex-start}
body.page-template-service-detail .benlist .ic{width:19px;height:19px;flex:0 0 auto;margin-top:2px;stroke:var(--gold);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:880px){body.page-template-service-detail .intro .wrap{grid-template-columns:1fr}}

/* process */
body.page-template-service-detail .proc{background:var(--ivory);color:var(--ink)}
body.page-template-service-detail .proc .eyebrow{color:var(--gold-d)}
body.page-template-service-detail .proc h2{font-size:clamp(23px,2.5vw,36px);text-transform:uppercase;font-weight:800;color:var(--ink);margin:14px 0 12px}
body.page-template-service-detail .proc .lede{color:rgba(14,24,38,.8);max-width:62ch;margin-bottom:clamp(28px,3.4vw,46px)}
body.page-template-service-detail .pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.2vw,32px)}
body.page-template-service-detail .pstep{border-top:2px solid rgba(14,24,38,.16);padding-top:20px}
body.page-template-service-detail .pstep .n{font-family:ui-monospace,Consolas,monospace;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--gold-d);display:block;margin-bottom:12px}
body.page-template-service-detail .pstep h3{font-size:17.5px;font-weight:800;color:var(--ink);margin-bottom:9px;letter-spacing:-.01em}
body.page-template-service-detail .pstep p{font-size:14.5px;color:rgba(14,24,38,.78)}
@media(max-width:980px){body.page-template-service-detail .pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){body.page-template-service-detail .pgrid{grid-template-columns:1fr}}

/* recent work */
body.page-template-service-detail .work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}
body.page-template-service-detail .wcard{position:relative;overflow:hidden;background:var(--ink-2);min-height:290px;display:block}
body.page-template-service-detail .wcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
body.page-template-service-detail .wcard:hover img{transform:scale(1.05)}
body.page-template-service-detail .wcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,24,38,.05) 40%,rgba(14,24,38,.9))}
body.page-template-service-detail .wcard__in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:22px 24px}
body.page-template-service-detail .wcard h3{font-size:17.5px;font-weight:800;letter-spacing:-.01em;margin-bottom:5px}
body.page-template-service-detail .wcard .meta{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
@media(max-width:880px){body.page-template-service-detail .work-grid{grid-template-columns:1fr}}

/* faq : same C4 pattern as the homepage */
body.page-template-service-detail .faqsec2{background:var(--ink-2)}
body.page-template-service-detail .faqC{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(26px,5vw,64px);align-items:start}
body.page-template-service-detail .faqsec2 details{border-top:1px solid var(--soft);padding:20px 0}
body.page-template-service-detail .faqsec2 details:last-of-type{border-bottom:1px solid var(--soft)}
body.page-template-service-detail .faqsec2 summary{cursor:pointer;font-weight:700;font-size:17.5px;letter-spacing:-.01em;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:flex-start;color:#fff}
body.page-template-service-detail .faqsec2 summary::-webkit-details-marker{display:none}
body.page-template-service-detail .faqsec2 summary::after{content:'+';color:var(--gold);font-weight:800;font-size:22px;line-height:1}
body.page-template-service-detail .faqsec2 details[open] summary::after{content:'\2013'}
body.page-template-service-detail .faqsec2 details p{margin-top:12px;color:rgba(255,255,255,.82);max-width:64ch}
body.page-template-service-detail .faqsec2 summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
body.page-template-service-detail .cta-card{background:var(--ink-3);color:#fff;padding:32px 28px}
body.page-template-service-detail .cta-card h3{font-size:20px;font-weight:800;text-transform:uppercase;letter-spacing:.01em;margin-bottom:10px;color:#fff}
body.page-template-service-detail .cta-card p{font-size:15px;color:rgba(255,255,255,.8);margin-bottom:20px}
body.page-template-service-detail .cta-card .tel,body.page-template-service-detail .cta-card .mail{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--gold);font-weight:800;font-size:21px;letter-spacing:-.01em;margin-bottom:10px}
body.page-template-service-detail .cta-card .tel.sm{font-size:16.5px;opacity:.85}
body.page-template-service-detail .cta-card .mail{font-size:14px;font-weight:600;color:rgba(255,255,255,.78);word-break:break-all}
body.page-template-service-detail .cta-card .tel .ic,body.page-template-service-detail .cta-card .mail .ic{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
body.page-template-service-detail .cta-card .hours{margin-top:16px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55)}
body.page-template-service-detail .faqC .stick{position:sticky;top:24px}
@media(max-width:900px){body.page-template-service-detail .faqC{grid-template-columns:1fr}body.page-template-service-detail .faqC .cta-card{order:2}body.page-template-service-detail .faqC .stick{position:static}}

/* other services : S3 full-bleed band */
body.page-template-service-detail .others{background:var(--ink)}
body.page-template-service-detail .s3band{display:grid;grid-template-columns:repeat(3,1fr)}
body.page-template-service-detail .s3band a{position:relative;display:block;text-decoration:none;height:clamp(300px,38vh,400px);overflow:hidden}
body.page-template-service-detail .s3band a + a{border-left:1px solid rgba(255,255,255,.14)}
body.page-template-service-detail .s3band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:transform 1.2s cubic-bezier(.2,.7,.3,1),filter .4s}
body.page-template-service-detail .s3band a:hover img{transform:scale(1.06);filter:saturate(1.05)}
body.page-template-service-detail .s3band a::after{content:"";position:absolute;inset:0;background:rgba(14,24,38,.72);transition:background .35s}
body.page-template-service-detail .s3band a:hover::after{background:rgba(14,24,38,.5)}
body.page-template-service-detail .s3band a:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
body.page-template-service-detail .s3band .in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:26px}
body.page-template-service-detail .s3band .rule{width:44px;height:3px;background:var(--gold);margin-bottom:18px}
body.page-template-service-detail .s3band h3{font-size:clamp(18px,1.9vw,25px);font-weight:800;text-transform:uppercase;letter-spacing:.01em;color:#fff;margin-bottom:9px}
body.page-template-service-detail .s3band p{font-size:14.5px;color:rgba(255,255,255,.82);max-width:26ch}
@media(max-width:760px){body.page-template-service-detail .s3band{grid-template-columns:1fr}body.page-template-service-detail .s3band a + a{border-left:0;border-top:1px solid rgba(255,255,255,.14)}body.page-template-service-detail .s3band a{height:230px}}


/* ==========================================================================
   CONTACT
   ========================================================================== */
body.page-template-contact .crumb{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:700}
body.page-template-contact .crumb a{color:rgba(255,255,255,.6)}body.page-template-contact .crumb a:hover{color:var(--gold)}

/* hero : locked treatment */
body.page-template-contact .hK{position:relative;overflow:hidden;display:flex;align-items:flex-end;min-height:clamp(360px,46vh,460px);background:var(--ink-2)}
body.page-template-contact .hK__bg{position:absolute;inset:0}
body.page-template-contact .hK__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;filter:saturate(1.18) sepia(.22) hue-rotate(-6deg) contrast(1.04);transform:none}
body.page-template-contact .hK__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,24,38,.84),rgba(14,24,38,.42) 40%,rgba(14,24,38,.94)),linear-gradient(90deg,rgba(14,24,38,.8),rgba(14,24,38,.08) 64%)}
body.page-template-contact .hK__in{position:relative;z-index:2;width:100%;padding:100px 0 clamp(34px,4.5vh,52px)}
body.page-template-contact .hK .inner{max-width:640px}
body.page-template-contact .hK h1{font-size:clamp(30px,3.8vw,52px);text-transform:uppercase;font-weight:800;letter-spacing:.005em;line-height:1.07;margin:16px 0 18px}
body.page-template-contact .hK .lede{font-size:clamp(15.5px,1.2vw,18px);color:rgba(255,255,255,.9);max-width:52ch}
@media(max-width:880px){body.page-template-contact .hK{min-height:auto}body.page-template-contact .hK__in{padding:74px 0 40px}}

/* main grid */
body.page-template-contact .cgrid{display:grid;grid-template-columns:1.32fr .68fr;gap:clamp(24px,3.2vw,56px);align-items:start}
@media(max-width:960px){body.page-template-contact .cgrid{grid-template-columns:1fr}}

/* form */
body.page-template-contact .fcard{background:var(--ink-2);padding:clamp(28px,3.4vw,52px);border-top:3px solid var(--gold)}
body.page-template-contact .fcard h2{font-size:clamp(21px,2.2vw,30px);text-transform:uppercase;font-weight:800;letter-spacing:.005em;margin-bottom:10px}
body.page-template-contact .fcard .sub{color:rgba(255,255,255,.78);margin-bottom:clamp(22px,2.6vw,32px);max-width:54ch}
body.page-template-contact .frow{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
body.page-template-contact .frow.one{grid-template-columns:1fr}
body.page-template-contact .fld label{display:block;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:8px;font-weight:700}
body.page-template-contact .fld .req{color:var(--gold)}
body.page-template-contact .fld input,body.page-template-contact .fld select,body.page-template-contact .fld textarea{width:100%;background:var(--ink);border:1px solid rgba(255,255,255,.16);color:#fff;font:inherit;font-size:15.5px;padding:14px 16px;border-radius:0;transition:border-color .2s,background .2s}
body.page-template-contact .fld textarea{min-height:150px;resize:vertical}
body.page-template-contact .fld select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,rgba(234,186,130,.9) 50%),linear-gradient(135deg,rgba(234,186,130,.9) 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px}
body.page-template-contact .fld input:hover,body.page-template-contact .fld select:hover,body.page-template-contact .fld textarea:hover{border-color:rgba(255,255,255,.3)}
body.page-template-contact .fld input:focus,body.page-template-contact .fld select:focus,body.page-template-contact .fld textarea:focus{outline:none;border-color:var(--gold);background:#0B1421}
body.page-template-contact .fld input::placeholder,body.page-template-contact .fld textarea::placeholder{color:rgba(255,255,255,.34)}
body.page-template-contact .fsubmit{display:inline-flex;align-items:center;gap:11px;margin-top:8px;padding:16px 28px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;background:var(--gold);color:var(--ink);border:0;cursor:pointer;font-family:inherit;transition:background .25s,gap .3s}
body.page-template-contact .fsubmit:hover{background:#fff;gap:17px}
body.page-template-contact .fsubmit:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* Full width on a phone. At 390px the button sat at 72 per cent of the form,
   which on a touch screen reads as unfinished rather than restrained : a primary
   form action wants the whole measure and the whole thumb. Left inline above
   640px : at 834px the button came out 711px wide, which looks stretched rather
   than confident. Phones only. */
@media(max-width:640px){
  body.page-template-contact .fsubmit{width:100%;justify-content:center;font-size:13px;padding:18px 24px}
}
body.page-template-contact .fnote{margin-top:16px;font-size:14.5px;color:rgba(255,255,255,.5)}
@media(max-width:640px){body.page-template-contact .frow{grid-template-columns:1fr}}

/* contact details */
body.page-template-contact .dcard{background:var(--ink-3);padding:clamp(26px,3vw,40px)}
body.page-template-contact .dcard h2{font-size:19px;text-transform:uppercase;font-weight:800;letter-spacing:.01em;margin-bottom:6px}
body.page-template-contact .dcard .sub{font-size:14.5px;color:rgba(255,255,255,.68);margin-bottom:26px}
body.page-template-contact .drow{display:flex;gap:15px;padding:18px 0;border-top:1px solid rgba(255,255,255,.12);align-items:flex-start}
body.page-template-contact .drow:first-of-type{border-top:0;padding-top:0}
/* color, not just stroke. The WhatsApp mark is a FILLED glyph carrying an
   inline fill:currentColor, and inline styles beat this rule, so fill:none was
   ignored and it inherited the white body colour while every stroke icon beside
   it was gold. Stroke icons follow stroke ; filled icons follow color. Set both. */
body.page-template-contact .drow .ic{width:20px;height:20px;flex:0 0 auto;margin-top:3px;fill:none;color:var(--gold);stroke:var(--gold);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body.page-template-contact .dk{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.5);display:block;margin-bottom:5px;font-weight:700}
body.page-template-contact .dv{font-size:19px;font-weight:800;letter-spacing:-.01em;color:var(--gold);text-decoration:none;display:block;line-height:1.3}
body.page-template-contact a.dv:hover{color:#fff}
body.page-template-contact .dv.sm{font-size:15px;font-weight:600;color:rgba(255,255,255,.86);word-break:break-word}
body.page-template-contact .dv.addr{font-size:15.5px;font-weight:600;color:rgba(255,255,255,.86);font-style:normal}
body.page-template-contact .hoursbox{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
body.page-template-contact .hrow{display:flex;justify-content:space-between;gap:16px;font-size:14.5px;padding:6px 0;color:rgba(255,255,255,.82)}
body.page-template-contact .hrow span:last-child{font-variant-numeric:tabular-nums;color:#fff;font-weight:600}
body.page-template-contact .hrow.shut span:last-child{color:rgba(255,255,255,.45);font-weight:400}


/* ==========================================================================
   PROJECTS
   ========================================================================== */
body.page-template-projects .crumb{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:700}
body.page-template-projects .crumb a{color:rgba(255,255,255,.6)}body.page-template-projects .crumb a:hover{color:var(--gold)}

/* hero */
body.page-template-projects .hK{position:relative;overflow:hidden;display:flex;align-items:flex-end;min-height:clamp(400px,52vh,500px);background:var(--ink-2)}
body.page-template-projects .hK__bg{position:absolute;inset:0}
body.page-template-projects .hK__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;filter:saturate(1.18) sepia(.22) hue-rotate(-6deg) contrast(1.04);transform:none}
body.page-template-projects .hK__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,24,38,.84),rgba(14,24,38,.42) 40%,rgba(14,24,38,.94)),linear-gradient(90deg,rgba(14,24,38,.8),rgba(14,24,38,.08) 64%)}
body.page-template-projects .hK__in{position:relative;z-index:2;width:100%;padding:100px 0 clamp(34px,4.5vh,54px)}
body.page-template-projects .hK .inner{max-width:640px}
body.page-template-projects .hK h1{font-size:clamp(30px,3.8vw,52px);text-transform:uppercase;font-weight:800;letter-spacing:.005em;line-height:1.07;margin:16px 0 18px}
body.page-template-projects .hK .lede{font-size:clamp(15.5px,1.2vw,18px);color:rgba(255,255,255,.9);max-width:54ch}
@media(max-width:880px){body.page-template-projects .hK{min-height:auto}body.page-template-projects .hK__in{padding:74px 0 42px}}

/* project */
body.page-template-projects section.proj{padding:clamp(48px,7vh,90px) 0}
body.page-template-projects section.proj:nth-of-type(even){background:var(--ink-2)}
body.page-template-projects .phead{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,3.4vw,60px);align-items:end;margin-bottom:clamp(24px,3vw,38px)}
body.page-template-projects .pnum{font-size:clamp(40px,5vw,70px);font-weight:800;line-height:.9;color:transparent;-webkit-text-stroke:1.5px rgba(234,186,130,.5);display:block;margin-bottom:14px}
body.page-template-projects .phead h2{font-size:clamp(24px,2.7vw,40px);text-transform:uppercase;font-weight:800;letter-spacing:.005em;line-height:1.08}
body.page-template-projects .phead p{color:rgba(255,255,255,.86);margin-bottom:12px;max-width:56ch}
body.page-template-projects .pmeta{display:grid;gap:0;align-self:end}
body.page-template-projects .mrow{display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-top:1px solid var(--soft);font-size:14.5px}
body.page-template-projects .mrow:last-child{border-bottom:1px solid var(--soft)}
body.page-template-projects .mrow .k{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:700;align-self:center}
body.page-template-projects .mrow .v{color:#fff;font-weight:600;text-align:right}
@media(max-width:880px){body.page-template-projects .phead{grid-template-columns:1fr}}

body.page-template-projects .plead{position:relative;overflow:hidden;aspect-ratio:21/9;background:var(--ink-3);cursor:zoom-in;display:block;width:100%;padding:0;border:0}
body.page-template-projects .plead img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.3,1)}
body.page-template-projects .plead:hover img{transform:scale(1.03)}
@media(max-width:760px){body.page-template-projects .plead{aspect-ratio:4/3}}

body.page-template-projects .pgal{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1vw,14px);margin-top:clamp(8px,1vw,14px)}
body.page-template-projects .pgal button{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--ink-3);cursor:zoom-in;padding:0;border:0;display:block}
body.page-template-projects .pgal img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.3,1),opacity .3s}
body.page-template-projects .pgal button:hover img{transform:scale(1.06)}
body.page-template-projects .pgal button:focus-visible,body.page-template-projects .plead:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
@media(max-width:760px){body.page-template-projects .pgal{grid-template-columns:repeat(2,1fr)}}

/* honest note */
body.page-template-projects .pnote{background:var(--ink-3);border-left:3px solid var(--gold);padding:20px 24px;margin-top:clamp(22px,2.6vw,34px);max-width:78ch}
body.page-template-projects .pnote p{font-size:15px;color:rgba(255,255,255,.82);margin:0}

/* lightbox */
body.page-template-projects .lb{position:fixed;inset:0;background:rgba(8,13,21,.94);z-index:900;display:none;align-items:center;justify-content:center;padding:clamp(16px,4vw,60px)}
body.page-template-projects .lb.open{display:flex}
body.page-template-projects .lb img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 20px 70px rgba(0,0,0,.6)}
body.page-template-projects .lb__close,body.page-template-projects .lb__nav{position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;width:46px;height:46px;cursor:pointer;font-size:22px;line-height:1;display:grid;place-items:center;transition:background .2s}
body.page-template-projects .lb__close:hover,body.page-template-projects .lb__nav:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
body.page-template-projects .lb__close{top:clamp(14px,2vw,28px);right:clamp(14px,2vw,28px)}
body.page-template-projects .lb__nav.prev{left:clamp(10px,1.6vw,24px);top:50%;transform:translateY(-50%)}
body.page-template-projects .lb__nav.next{right:clamp(10px,1.6vw,24px);top:50%;transform:translateY(-50%)}
body.page-template-projects .lb__count{position:absolute;bottom:clamp(14px,2vw,26px);left:50%;transform:translateX(-50%);font-family:ui-monospace,Consolas,monospace;font-size:12px;letter-spacing:.12em;color:rgba(255,255,255,.7)}
body.page-template-projects .lb__close:focus-visible,body.page-template-projects .lb__nav:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ==========================================================================
   THEME ADDITIONS (not in the static build : WordPress needs these)
   ========================================================================== */

/* skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--gold);color:var(--ink);padding:12px 20px;font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.skip:focus{left:12px;top:12px}

/* OpenStreetMap attribution row on the homepage */
.f-credit{padding-top:0;border-top:0;justify-content:center;font-size:12px;opacity:.6}
.f-credit a{text-decoration:underline}

/* editor prose, used by page.php and the hybrid content blocks */
.prose > *+*{margin-top:1.1em}
.prose h2{font-size:clamp(22px,2.4vw,34px);text-transform:uppercase;font-weight:800;letter-spacing:.005em;line-height:1.12;margin-top:1.6em}
.prose h3{font-size:clamp(18px,1.6vw,22px);font-weight:700;margin-top:1.4em}
.prose ul,.prose ol{padding-left:1.2em}
.prose li+li{margin-top:.4em}
.prose a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.prose blockquote{border-left:3px solid var(--gold);padding-left:20px;color:rgba(255,255,255,.82)}
.sec.light .prose a{color:var(--gold-d)}

/* contact form states */
.fmsg{padding:16px 20px;margin-bottom:22px;font-size:15px;line-height:1.55;border-left:3px solid var(--gold)}
.fmsg.ok{background:rgba(234,186,130,.14);color:#fff}
.fmsg.err{background:rgba(210,90,70,.16);border-left-color:#D25A46;color:#fff}
.fld .ferr{display:block;margin-top:6px;font-size:13px;color:#F0A493}
.fld.has-error input,.fld.has-error select,.fld.has-error textarea{border-color:#D25A46}
.hp-wrap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* 404 */
.e404{padding:clamp(90px,14vh,170px) 0;text-align:center}
.e404 .code{font-size:clamp(64px,10vw,140px);font-weight:800;line-height:.9;color:transparent;-webkit-text-stroke:2px rgba(234,186,130,.45)}
.e404 h1{font-size:clamp(24px,3vw,40px);text-transform:uppercase;font-weight:800;letter-spacing:.005em;margin:22px 0 14px}
.e404 p{color:rgba(255,255,255,.8);max-width:52ch;margin:0 auto 28px}
.e404 .btn{margin:0 6px 10px}

/* wp_link_pages on multi-page prose */
.pagelinks{margin-top:28px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.pagelinks a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;margin:0 4px}

/* Mobile nav : on a 375x812 phone the eight links plus the contact block
   overflowed, leaving the last item sliced in half at the scroll boundary,
   which reads as broken rather than scrollable. Tightened so the full list
   fits. Tap targets stay above 44px. */
@media(max-width:880px){
  .mnav__links{padding-bottom:10px}
  .mnav__links a{min-height:54px;padding:11px 0;font-size:19px}
  .mnav__foot{padding-top:16px;gap:10px}
  .mnav__foot a.tel{font-size:20px;min-height:44px}
  .mnav__foot a.mail{min-height:44px;font-size:14.5px}
}

/* ==========================================================================
   GENERIC PAGE HERO
   The four page templates above carry their own hero scale, scoped by body
   class, because each approved mockup sized its hero differently. Pages on the
   default template (Privacy Policy, and anything added later) need a baseline
   or they render an unstyled hero. Values follow the service-detail page.
   ========================================================================== */
.hK{position:relative;overflow:hidden;display:flex;align-items:flex-end;min-height:clamp(440px,58vh,560px);background:var(--ink-2)}
.hK__bg{position:absolute;inset:0}
.hK__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:saturate(1.18) sepia(.22) hue-rotate(-6deg) contrast(1.04)}
.hK__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,24,38,.84),rgba(14,24,38,.42) 40%,rgba(14,24,38,.94)),linear-gradient(90deg,rgba(14,24,38,.8),rgba(14,24,38,.08) 64%)}
.hK__in{position:relative;z-index:2;width:100%;padding:104px 0 clamp(36px,5vh,58px)}
.hK .inner{max-width:640px}
.hK h1{font-size:clamp(28px,3.6vw,50px);text-transform:uppercase;font-weight:800;letter-spacing:.005em;line-height:1.07;margin:16px 0 18px}
.hK .lede{font-size:clamp(15.5px,1.2vw,18px);color:rgba(255,255,255,.9);max-width:54ch}
.crumb{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:700}
.crumb a{color:rgba(255,255,255,.6)}
.crumb a:hover{color:var(--gold)}
@media(max-width:880px){.hK{min-height:auto}.hK__in{padding:76px 0 44px}}


/* Placed LAST on purpose. A media query further up sets .f-grid to a single
   column, and both selectors carry the same specificity, so whichever comes
   later wins. This block sat at line 315 and the two-column layout silently
   did nothing : the footer measured 1161px instead of the 752px it should.
   Anything added below here must stay below. */
/* ==========================================================================
   FOOTER ON PHONES
   --------------------------------------------------------------------------
   The footer stood 1221px tall on a 390px phone, 1.4 full screens, because the
   desktop grid collapsed to a single column and kept its desktop spacing : four
   stacked blocks with roughly 110px between every link.

   Rebuilt to Myles' picks, 27 Aug 2026 : logo and blurb centred, the two link
   lists side by side and centred, and the contact block as a pair of tappable
   cards. Roughly 38 per cent shorter.

   The icons, the small labels and the opening hours are hidden above 640px, so
   the desktop footer is untouched.
   ========================================================================== */
.f-contact .ic,.f-contact .k,.f-hours{display:none}

@media(max-width:640px){
  footer{padding-top:44px}
  .f-grid{grid-template-columns:1fr 1fr;gap:0;padding-bottom:26px}

  /* Logo and blurb span the full width and centre. The blurb is capped in
     CHARACTERS rather than pixels : centred text needs a short measure or the
     ragged edges stop reading as deliberate. */
  .f-grid>:nth-child(1){grid-column:1/-1;text-align:center;padding-bottom:26px;border-bottom:1px solid var(--soft)}
  footer .f-logo img{width:168px;height:auto;margin:0 auto 16px;display:block}
  footer .f-blurb{font-size:14px;max-width:32ch;margin-inline:auto;line-height:1.6}

  /* The two link lists, side by side and centred. Capped and centred rather
     than filling the width : two centred columns pushed to opposite edges leave
     a gutter down the middle that reads as a mistake. */
  .f-grid>:nth-child(2),.f-grid>:nth-child(3){text-align:center;padding:26px 0 0}
  .f-grid>:nth-child(2){padding-left:14px}
  .f-grid>:nth-child(3){padding-right:14px}
  footer h3{margin-bottom:10px;letter-spacing:.14em}
  footer ul{gap:9px;font-size:14.5px}
  footer ul a{display:block;padding:4px 0}

  /* Contact : full width, centred, phone and WhatsApp as a pair of cards. */
  .f-contact{grid-column:1/-1;text-align:center;border-top:1px solid var(--soft);margin-top:26px;padding-top:26px}
  .f-contact ul{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .f-contact .ic{display:block;width:20px;height:20px;color:var(--gold)}
  .f-contact .f-tel,.f-contact .f-wa{margin:0}
  .f-contact .f-tel a,.f-contact .f-wa a{display:flex;flex-direction:column;align-items:center;gap:6px;
    background:var(--ink-3);padding:14px 8px;border-radius:5px;min-height:44px}
  .f-contact .k{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
    color:rgba(255,255,255,.5);font-weight:700}
  .f-contact .v{font-size:15px;font-weight:800;color:var(--gold)}
  /* The three full-width rows below the pair. */
  .f-contact .f-mail{grid-column:1/-1;margin-top:5px}
  .f-contact .f-mail a{font-size:14px;color:var(--gold);font-weight:700;word-break:break-all;display:block;padding:6px 0}
  .f-contact .f-addr{grid-column:1/-1;font-size:13px;color:rgba(255,255,255,.6);line-height:1.6}
  .f-contact .f-hours{grid-column:1/-1;display:block;font-size:13px;color:rgba(255,255,255,.6)}
  /* Address sits under the email, hours under the address : source order puts
     the address first, so it is moved rather than the markup being reordered. */
  .f-contact .f-addr{order:4}
  .f-contact .f-mail{order:3}
  .f-contact .f-hours{order:5}
  .f-contact .f-tel{order:1}
  .f-contact .f-wa{order:2}

  .f-bot{justify-content:center;text-align:center;padding:16px 0;font-size:12px}
}


/* Hero top padding on phones.
   120px sat above the eyebrow at every width. On a phone that follows a 91px
   header, so 211px passed before a single word, on a hero that is already
   1061px tall against an 844px screen. 56px here.
   Phones only : at 834px the hero is 718px in a 1112px screen and the room is
   not costing anything.
   At the END of the file with the footer block, for the same reason : an
   equal-specificity rule further up would otherwise win on source order. */
@media(max-width:640px){
  .hero__in{padding-block:56px 0}
}