/* Outfit — self-hosted (variable, weights 200–800 used). No external request,
   works under the all-'self' CSP. Replaces the Google Fonts @import. */
@font-face{
  font-family:'Outfit';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/assets/fonts/outfit-latin.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Outfit';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/assets/fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ============================================================
   Sterling Site Services Ltd — Civil Engineering Contractor
   Light, corporate, plain-background theme. Outfit throughout.
   ============================================================ */

:root{
  --white:#ffffff;
  --stone:#f4f5f3;
  --stone-2:#eceeea;
  --line:#e2e4df;
  --ink:#161c22;          /* deep graphite / steel */
  --ink-soft:#2b333b;
  --muted:#5c6670;
  --muted-2:#828b93;
  --amber:#d9862a;        /* single restrained accent */
  --amber-deep:#b96f1c;
  --amber-wash:rgba(217,134,42,.10);
  --steel:#3d4b57;
  --radius:4px;
  --radius-lg:8px;
  --maxw:1200px;
  --pad:clamp(20px,5vw,64px);
  --wash:linear-gradient(180deg,rgba(15,20,26,.30),rgba(15,20,26,.62));
  --shadow:0 1px 2px rgba(16,24,32,.05),0 14px 40px -18px rgba(16,24,32,.22);
  --shadow-sm:0 1px 2px rgba(16,24,32,.06),0 8px 24px -16px rgba(16,24,32,.20);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Outfit',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:var(--white);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}

/* micro label */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--amber-deep);margin:0 0 1.1rem;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--amber);display:inline-block}
.eyebrow.center::after{content:"";width:26px;height:1px;background:var(--amber);display:inline-block}
.eyebrow.center{justify-content:center}

h1,h2,h3{margin:0;font-weight:300;letter-spacing:-.02em;line-height:1.08;color:var(--ink)}
h2{font-size:clamp(2rem,4.4vw,3.15rem)}
h3{font-size:1.28rem;font-weight:500;letter-spacing:-.01em}
p{margin:0 0 1rem}
.lede{font-size:clamp(1.05rem,1.7vw,1.28rem);color:var(--muted);font-weight:300;line-height:1.6}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-weight:500;font-size:.98rem;letter-spacing:.01em;
  padding:.92em 1.5em;border-radius:var(--radius);
  border:1px solid transparent;cursor:pointer;transition:.22s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#000;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);background:var(--white);transform:translateY(-2px)}
.btn-amber{background:var(--amber);color:#fff}
.btn-amber:hover{background:var(--amber-deep);transform:translateY(-2px)}
.btn svg{width:16px;height:16px}

/* ===== Header ===== */
.site-head{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:.28s ease;
}
.site-head.scrolled{border-bottom-color:var(--line);box-shadow:0 6px 24px -20px rgba(16,24,32,.5)}
.head-in{display:flex;align-items:center;justify-content:space-between;height:74px;gap:1.5rem}
.brand{display:inline-flex;align-items:center;text-decoration:none}
/* Typographic wordmark logo */
.wordmark{display:flex;flex-direction:column;line-height:1.02}
.wm-name{
  font-size:1.34rem;font-weight:300;letter-spacing:-.015em;color:var(--ink);
  white-space:nowrap;
}
.wm-name i{font-style:normal;font-weight:700}
.wm-kicker{
  display:flex;align-items:center;gap:.55em;margin-top:6px;
  font-size:.58rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--muted-2);white-space:nowrap;
}
.wm-kicker::before{content:"";width:22px;height:2px;background:var(--amber);flex:none}
.wm-kicker b{color:var(--amber-deep);font-weight:600}
.nav{display:flex;align-items:center;gap:2rem}
.nav a{font-size:.95rem;color:var(--ink-soft);font-weight:400;transition:.18s}
.nav a:hover{color:var(--amber-deep)}
.head-cta{display:flex;align-items:center;gap:.9rem}

/* burger */
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:24px;height:2px;background:var(--ink);transition:.25s}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:70;background:var(--white);
  padding:26px var(--pad);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);
}
.drawer[hidden]{display:none}
.drawer.open{transform:translateX(0)}
.drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:2.4rem}
.drawer-close{background:none;border:0;font-size:2rem;line-height:1;cursor:pointer;color:var(--ink)}
.drawer nav{display:flex;flex-direction:column;gap:.2rem}
.drawer nav a{font-size:1.5rem;font-weight:300;padding:.7rem 0;border-bottom:1px solid var(--line);color:var(--ink)}
.drawer .btn{margin-top:1.8rem;justify-content:center}

/* ===== Hero ===== */
.hero{background:var(--stone);border-bottom:1px solid var(--line);position:relative}
.hero-in{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);
  align-items:center;padding-block:clamp(3.5rem,7vw,6rem);
}
.hero h1{font-size:clamp(2.5rem,5.6vw,4.35rem);max-width:14ch}
.hero h1 b{font-weight:500;color:var(--ink)}
.hero .lede{max-width:46ch;margin-top:1.5rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.1rem}
.hero-trust{
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin-top:2.4rem;
  padding-top:1.6rem;border-top:1px solid var(--line);
  font-size:.82rem;color:var(--muted);letter-spacing:.02em;
}
.hero-trust b{color:var(--ink);font-weight:600}
.hero-trust .dot{color:var(--amber)}
.hero-visual{position:relative}
.hero-img{
  aspect-ratio:4/4.4;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--wash),var(--stone-2);background-size:cover;background-position:center;
  box-shadow:var(--shadow);
}
.hero-video{background:var(--stone-2)}
.hero-video video{width:100%;height:100%;object-fit:cover;display:block}
.hero-badge{
  position:absolute;left:-18px;bottom:26px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);padding:.9rem 1.15rem;
  box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:.85rem;
}
.hero-badge .n{font-size:1.9rem;font-weight:300;color:var(--ink);line-height:1}
.hero-badge .n b{font-weight:500;color:var(--amber-deep)}
.hero-badge small{font-size:.72rem;color:var(--muted);letter-spacing:.02em;line-height:1.3;max-width:12ch}

/* ===== Credential strip ===== */
.strip{background:var(--ink);color:#fff}
.strip-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.09)}
.strip-cell{background:var(--ink);padding:1.7rem var(--pad)}
.strip-cell:first-child{padding-left:0}
.strip-in{padding-inline:0}
.strip-cell .k{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:300;letter-spacing:-.02em}
.strip-cell .k b{font-weight:500;color:var(--amber)}
.strip-cell .l{font-size:.8rem;color:rgba(255,255,255,.6);letter-spacing:.04em;margin-top:.25rem}

/* section frame */
.section{padding-block:clamp(4rem,8vw,7rem)}
.section.alt{background:var(--stone)}
.sec-head{max-width:60ch;margin-bottom:clamp(2.2rem,4vw,3.2rem)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head p{color:var(--muted);margin-top:1rem;font-weight:300;font-size:1.08rem}

/* ===== Services ===== */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.1rem,2.2vw,1.6rem)}
.svc{
  position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;transition:.28s ease;display:flex;flex-direction:column;
}
.svc:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#d3d6cf}
.svc-img{
  aspect-ratio:16/9;background:var(--wash),var(--stone-2);
  background-size:cover;background-position:center;transition:.5s ease;
}
.svc:hover .svc-img{transform:scale(1.045)}
.svc-body{padding:1.6rem 1.7rem 1.8rem;flex:1;display:flex;flex-direction:column}
.svc-num{
  position:absolute;top:1rem;left:1rem;z-index:2;
  width:38px;height:38px;border-radius:3px;background:rgba(22,28,34,.82);
  color:#fff;display:grid;place-items:center;font-size:.85rem;font-weight:600;letter-spacing:.02em;
}
.svc h3{margin-bottom:.55rem}
.svc p{font-size:.96rem;color:var(--muted);margin:0}
.svc .svc-tag{margin-top:1.1rem;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-deep)}

/* ===== Capabilities ===== */
.cap{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.cap-img{
  aspect-ratio:4/3.4;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--wash),var(--stone-2);background-size:cover;background-position:center;box-shadow:var(--shadow-sm);
}
.cap-list{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;grid-template-columns:1fr 1fr;gap:.1rem 2rem}
.cap-list li{
  display:flex;align-items:flex-start;gap:.7rem;padding:.72rem 0;
  border-bottom:1px solid var(--line);font-size:.98rem;color:var(--ink-soft);
}
.cap-list li svg{width:16px;height:16px;flex:none;margin-top:.32rem;color:var(--amber)}

/* ===== Clients ===== */
.clients{text-align:center}
.client-row{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(1rem,3vw,2.6rem);margin-top:2.4rem;
}
.client{
  font-size:clamp(1.15rem,2.4vw,1.7rem);font-weight:600;letter-spacing:.02em;
  color:var(--steel);padding:.7rem 1.4rem;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--white);opacity:.9;transition:.25s;
}
.client:hover{opacity:1;color:var(--ink);border-color:#cfd2cb}
.client i{font-style:normal;color:var(--amber-deep)}

/* ===== Recent projects ===== */
.project{margin-top:clamp(2.4rem,4vw,3.4rem)}
.project + .project{margin-top:clamp(3rem,5vw,4.4rem);padding-top:clamp(2.4rem,4vw,3.4rem);border-top:1px solid var(--line)}
.project-head{max-width:70ch;margin-bottom:1.6rem}
.project-head h3{font-size:clamp(1.5rem,3vw,2.1rem)}
.project-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin:.6rem 0 0;font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-deep)}
.project-meta .dot{color:var(--muted-2)}
.project-desc{color:var(--muted);margin:.9rem 0 0;font-weight:300;font-size:1.02rem}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:clamp(.6rem,1.2vw,1rem)}
.shot{margin:0;aspect-ratio:3/4;border-radius:var(--radius-lg);overflow:hidden;background:var(--stone-2);box-shadow:var(--shadow-sm);cursor:zoom-in;position:relative}
.shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.shot:hover img{transform:scale(1.06)}
.shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,20,26,0) 55%,rgba(15,20,26,.28));opacity:0;transition:.3s}
.shot:hover::after{opacity:1}

/* ===== Lightbox ===== */
.lightbox{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);background:rgba(12,16,20,.9);backdrop-filter:blur(4px);opacity:0;transition:opacity .28s ease}
.lightbox[hidden]{display:none}
.lightbox.open{opacity:1}
.lb-figure{margin:0;max-width:min(92vw,900px);max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:.8rem}
.lb-figure img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:var(--radius);box-shadow:0 20px 60px -20px rgba(0,0,0,.6)}
.lb-figure figcaption{color:#e7e9ec;font-size:.92rem;text-align:center;font-weight:300;max-width:60ch}
.lb-close,.lb-nav{position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:center}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.22)}
.lb-close{top:clamp(.8rem,2vw,1.4rem);right:clamp(.8rem,2vw,1.4rem);width:44px;height:44px;border-radius:50%;font-size:1.7rem;line-height:1}
.lb-nav{top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;font-size:2rem;line-height:1}
.lb-prev{left:clamp(.6rem,2vw,1.6rem)}
.lb-next{right:clamp(.6rem,2vw,1.6rem)}
.lb-count{position:absolute;bottom:clamp(.9rem,2.4vw,1.6rem);left:50%;transform:translateX(-50%);color:#c8ccd1;font-size:.8rem;letter-spacing:.14em;font-weight:600}
@media (max-width:560px){.lb-nav{width:42px;height:42px;font-size:1.6rem}}

/* ===== Accreditations ===== */
.accr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.accr{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.6rem 1.5rem;display:flex;flex-direction:column;align-items:flex-start;transition:.25s;
}
.accr:hover{border-color:#cfd2cb;box-shadow:var(--shadow-sm);transform:translateY(-3px)}
.accr .badge{
  width:48px;height:48px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:var(--amber-wash);color:var(--amber-deep);margin-bottom:1.15rem;
}
.accr .badge svg{width:24px;height:24px}
.accr-txt b{font-weight:600;font-size:1.05rem;display:block;line-height:1.25;letter-spacing:-.01em;white-space:nowrap}
.accr-txt small{display:block;font-size:.82rem;color:var(--muted);margin-top:.25rem}
.accr-flag{margin-top:1rem;font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.accr-flag.ok{color:var(--amber-deep)}

/* ===== About ===== */
.about{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.about-img{
  aspect-ratio:5/5.4;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--wash),var(--stone-2);background-size:cover;background-position:center;box-shadow:var(--shadow);
}
.about .lede{margin-top:1.3rem}
.about p{color:var(--muted);font-weight:300}
.about-sign{display:flex;gap:2.4rem;margin-top:2rem;flex-wrap:wrap}
.about-sign div b{display:block;font-weight:600;color:var(--ink);font-size:1.02rem}
.about-sign div span{font-size:.82rem;color:var(--muted-2);letter-spacing:.03em}

/* ===== CTA band ===== */
.cta-band{position:relative;overflow:hidden;background:var(--ink);color:#fff}
.cta-bg{position:absolute;inset:0;background:var(--wash),var(--stone-2);background-size:cover;background-position:center;opacity:.24}
.cta-in{position:relative;z-index:2;padding-block:clamp(3.5rem,7vw,5.5rem);text-align:center;max-width:56ch;margin:0 auto}
.cta-in h2{color:#fff}
.cta-in p{color:rgba(255,255,255,.72);margin-top:1rem;font-weight:300;font-size:1.1rem}
.cta-in .hero-cta{justify-content:center;margin-top:2rem}

/* ===== Contact ===== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem)}
.contact-info .c-row{display:flex;gap:1rem;padding:1.15rem 0;border-bottom:1px solid var(--line);align-items:flex-start}
.contact-info .c-row:first-of-type{border-top:1px solid var(--line)}
.c-ico{width:40px;height:40px;flex:none;border-radius:6px;background:var(--stone);display:grid;place-items:center;color:var(--amber-deep)}
.c-ico svg{width:19px;height:19px}
.c-row .k{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.c-row .v{font-size:1.05rem;color:var(--ink);font-weight:500}
.c-row .v a:hover{color:var(--amber-deep)}
.c-row .v small{display:block;font-size:.82rem;color:var(--muted);font-weight:400}

form{display:grid;gap:1rem}
.field{display:grid;gap:.4rem}
.field label{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.field input,.field textarea,.field select{
  font-family:inherit;font-size:1rem;color:var(--ink);
  padding:.85em 1em;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--white);transition:.2s;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-wash)}
.field textarea{resize:vertical;min-height:120px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-done{display:none;padding:1.1rem 1.2rem;background:var(--amber-wash);border:1px solid var(--amber);border-radius:var(--radius);color:var(--amber-deep);font-weight:500}
form.done .form-done{display:block}
form.done .form-fields{display:none}

/* ===== Footer ===== */
.foot{background:var(--ink);color:rgba(255,255,255,.62);padding-block:3.2rem 2rem}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2.5rem;padding-bottom:2.4rem;border-bottom:1px solid rgba(255,255,255,.12)}
.foot .wm-name{color:#fff}
.foot .wm-kicker{color:rgba(255,255,255,.55)}
.foot .wm-kicker b{color:var(--amber)}
.foot-col h4{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);margin:0 0 1rem;font-weight:600}
.foot-col a,.foot-col p{display:block;color:rgba(255,255,255,.72);font-size:.94rem;margin:0 0 .55rem;transition:.18s}
.foot-col a:hover{color:var(--amber)}
.foot-blurb{font-size:.92rem;line-height:1.6;margin-top:1.1rem;max-width:36ch;color:rgba(255,255,255,.6)}
.foot-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;padding-top:1.6rem;font-size:.82rem;color:rgba(255,255,255,.45)}
.foot-powered{text-align:center;margin-top:1.1rem;font-size:.82rem;color:rgba(255,255,255,.4);letter-spacing:.02em}
.foot-powered a{color:var(--amber);font-weight:600;text-decoration:none;transition:.2s}
.foot-powered a:hover{color:#eaa14f;text-decoration:underline}

/* ===== Reveal on scroll ===== */
html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.4,0,.2,1)}
html.js .reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}

/* while the DigiSurf editor is open, hold everything still and visible */
html.lb-editing .reveal{opacity:1!important;transform:none!important;transition:none!important}

/* ===== Responsive ===== */
@media(max-width:960px){
  .hero-in{grid-template-columns:1fr;gap:2.4rem}
  .hero-copy{order:0}
  .hero-visual{order:1}
  .hero-img{aspect-ratio:16/11}
  .cap,.about,.contact-grid{grid-template-columns:1fr;gap:2.2rem}
  .about-img{order:-1;aspect-ratio:16/11}
  .cap-img{aspect-ratio:16/10}
  .strip-in{grid-template-columns:1fr 1fr}
  .strip-cell{padding-left:var(--pad)!important}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  body{font-size:16px}
  .nav,.head-cta .btn{display:none}
  .burger{display:flex}
  .svc-grid{grid-template-columns:1fr}
  .cap-list{grid-template-columns:1fr}
  .strip-in{grid-template-columns:1fr 1fr}
  .form-row{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
  .hero-badge{left:0}
  .about-sign{gap:1.6rem}
}

/* ============================================================
   SERVICE SUB-PAGES — components used by /section-278-contractors/
   and the other service pages. Built from the same :root tokens;
   no rule here targets anything on the home page.
   ============================================================ */

/* breadcrumb */
.crumbs{
  display:flex;align-items:center;gap:.55em;flex-wrap:wrap;
  font-size:.82rem;color:var(--muted-2);margin:0 0 1.4rem;
}
.crumbs a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent;transition:.2s ease}
.crumbs a:hover{color:var(--amber-deep);border-bottom-color:var(--amber)}
.crumbs span{color:var(--muted-2)}

/* the answer block — first thing under its H2, kept liftable */
.answer{
  font-size:clamp(1.06rem,1.6vw,1.22rem);
  line-height:1.62;color:var(--ink-soft);font-weight:300;
  border-left:3px solid var(--amber);
  padding:.15rem 0 .15rem 1.25rem;
  margin:1.4rem 0 0;max-width:62ch;
}

/* tick lists */
.tick,.tick-grid{list-style:none;margin:0;padding:0}
.tick-grid{
  display:grid;gap:.85rem 2.2rem;margin-top:2.4rem;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
}
.tick li,.tick-grid li{
  position:relative;padding-left:1.75rem;
  color:var(--muted);line-height:1.58;font-size:.97rem;
}
.tick li+li,.tick-grid li+li{margin-top:.8rem}
.tick li::before,.tick-grid li::before{
  content:"";position:absolute;left:0;top:.56em;
  width:8px;height:8px;border-radius:50%;
  background:var(--amber);box-shadow:0 0 0 3px var(--amber-wash);
}

/* two-column scope split */
.split-grid{
  display:grid;gap:clamp(1.6rem,3.5vw,3rem);margin-top:2.8rem;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
}
.split-col{
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:clamp(1.5rem,3vw,2.2rem);
  box-shadow:var(--shadow-sm);
}
.section.alt .split-col{background:var(--white)}
.split-col h3{margin-bottom:.5rem}
.split-col>p{color:var(--muted);font-size:.95rem;margin-bottom:1.4rem}

/* scope-boundary note */
.note{
  margin:2.6rem 0 0;padding:1.15rem 1.35rem;
  background:var(--stone);border:1px solid var(--line);
  border-left:3px solid var(--steel);border-radius:var(--radius);
  color:var(--muted);font-size:.94rem;line-height:1.6;max-width:78ch;
}
.section.alt .note{background:var(--white)}

/* proof photos */
.proof-grid{
  display:grid;gap:1.1rem;margin-top:2.6rem;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.proof-grid figure{margin:0;overflow:hidden;border-radius:var(--radius-lg);background:var(--stone-2)}
.proof-grid img{
  display:block;width:100%;height:100%;aspect-ratio:3/4;
  object-fit:cover;transition:transform .5s ease;
}
.proof-grid figure:hover img{transform:scale(1.035)}

/* FAQ */
.faq-grid{display:grid;gap:1.1rem;margin-top:2.6rem}
.faq-item{
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:clamp(1.3rem,2.6vw,1.8rem);
  box-shadow:var(--shadow-sm);
}
.faq-item h3{margin-bottom:.6rem}
.faq-item p{margin:0;color:var(--muted);line-height:1.62;font-size:.97rem}

/* sub-page hero image (home page uses a video in this slot) */
.hero-img img{display:block;width:100%;height:100%;object-fit:cover}

@media (max-width:700px){
  .tick-grid{grid-template-columns:1fr}
  .proof-grid{grid-template-columns:repeat(2,1fr)}
}

/* in-card link from a home-page service card through to its service page */
.svc-link{
  display:inline-flex;align-items:center;gap:.4em;
  margin-top:.9rem;font-size:.9rem;font-weight:500;
  color:var(--amber-deep);text-decoration:none;
  border-bottom:1px solid var(--amber-wash);
  padding-bottom:1px;transition:.22s ease;
}
.svc-link:hover{border-bottom-color:var(--amber)}

/* ============================================================
   BLOG — hub, article, answer block, takeaways, FAQ, tables.
   Same :root tokens as the rest of the site.
   ============================================================ */

/* ---------- hub ---------- */
.bp-hub{padding:clamp(2.6rem,6vw,5rem) 0 clamp(3rem,7vw,6rem)}
.bp-hub-head{max-width:62ch;margin-bottom:clamp(2.4rem,5vw,3.6rem)}
.bp-hub-head h1{font-size:clamp(2.3rem,5vw,3.6rem);margin-bottom:1.2rem}
.bp-hub-head h1 b{font-weight:500}
.bp-empty{color:var(--muted);padding:2rem 0}

.bp-sec{margin-bottom:clamp(2.6rem,5vw,4rem)}
.bp-sec-h{
  font-size:1.02rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);margin:0 0 1.4rem;padding-bottom:.7rem;
  border-bottom:1px solid var(--line);
}
.bp-grid{
  display:grid;gap:clamp(1.1rem,2.4vw,1.8rem);
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}

.bp-card{
  display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:.26s ease;
}
.bp-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.bp-card-img{display:block;background:var(--stone-2);aspect-ratio:1200/630;overflow:hidden}
.bp-card-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.bp-card:hover .bp-card-img img{transform:scale(1.04)}
.bp-card-body{padding:1.25rem 1.35rem 1.45rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.bp-card-body h3{font-size:1.14rem;font-weight:500;line-height:1.3}
.bp-card-body h3 a{color:var(--ink);text-decoration:none}
.bp-card-body h3 a:hover{color:var(--amber-deep)}
.bp-card-body p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.56}
.bp-card-meta{margin-top:auto !important;color:var(--muted-2) !important;font-size:.82rem !important}

.bp-chip{
  align-self:flex-start;font-size:.7rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:.32em .7em;border-radius:100px;
  color:var(--chip,var(--amber-deep));
  background:color-mix(in srgb,var(--chip,var(--amber)) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--chip,var(--amber)) 26%,transparent);
}

.bp-hub-cta{
  margin-top:clamp(2rem,4vw,3rem);padding:clamp(1.8rem,4vw,2.8rem);
  background:var(--ink);border-radius:var(--radius-lg);color:var(--white);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.4rem;
}
.bp-hub-cta h2{color:var(--white);font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:.4rem}
.bp-hub-cta p{margin:0;color:#b9c1c9}

/* ---------- article ---------- */
.bp-article{max-width:72ch;margin:0 auto;padding:clamp(2.2rem,5vw,4rem) 0 clamp(3rem,6vw,5rem)}
.bp-article h1{font-size:clamp(2.1rem,4.6vw,3.2rem);margin-bottom:1.1rem}
.bp-article h2{font-size:clamp(1.5rem,3vw,2.05rem);margin:2.6rem 0 .9rem;font-weight:300}
.bp-article h3{font-size:1.2rem;margin:1.9rem 0 .6rem}
.bp-article p{color:var(--ink-soft);line-height:1.72;margin-bottom:1.15rem}
.bp-article ul,.bp-article ol{color:var(--ink-soft);line-height:1.7;margin:0 0 1.3rem 1.15rem}
.bp-article li{margin-bottom:.5rem}
.bp-article img{max-width:100%;height:auto;border-radius:var(--radius-lg)}

/* body links must be VISIBLE — a link the colour of the paragraph is not a link */
.bp-article a:not(.btn){
  color:var(--amber-deep);text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px;
}
.bp-article a:not(.btn):hover{color:var(--ink);text-decoration-color:var(--amber)}

/* ---------- answer block (snippet-ready, 40–60 words) ---------- */
.bp-answer{
  margin:0 0 1.8rem;padding:1.3rem 1.5rem;background:var(--stone);
  border:1px solid var(--line);border-left:3px solid var(--amber);
  border-radius:var(--radius);
}
.bp-answer__label,.bp-takeaways__label,.bp-next__label{
  margin:0 0 .5rem !important;font-size:.72rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--amber-deep) !important;
}
.bp-answer p:last-child{margin-bottom:0}

/* ---------- takeaways (liftable bullets) ---------- */
.bp-takeaways{
  margin:2rem 0;padding:1.4rem 1.6rem;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
}
.bp-takeaways ul{list-style:none;margin:0;padding:0}
.bp-takeaways li{position:relative;padding-left:1.7rem;margin-bottom:.75rem;color:var(--ink-soft);line-height:1.6}
.bp-takeaways li:last-child{margin-bottom:0}
.bp-takeaways li::before{
  content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;
  background:var(--amber);box-shadow:0 0 0 3px var(--amber-wash);
}

/* ---------- tables ---------- */
.bp-table-wrap{overflow-x:auto;margin:1.8rem 0;-webkit-overflow-scrolling:touch}
.bp-table{border-collapse:collapse;width:100%;min-width:460px;font-size:.93rem}
.bp-table caption{
  caption-side:top;text-align:left;font-size:.78rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);padding-bottom:.7rem;
}
.bp-table th,.bp-table td{
  text-align:left;padding:.78rem .95rem;border-bottom:1px solid var(--line);
  vertical-align:top;line-height:1.5;
}
.bp-table thead th{
  background:var(--stone);color:var(--ink);font-weight:600;font-size:.84rem;
  letter-spacing:.02em;border-bottom:1px solid var(--line);white-space:nowrap;
}
.bp-table tbody tr:last-child td{border-bottom:none}
.bp-table tbody tr:nth-child(even){background:#fafbfa}

/* ---------- figure strip (stats) ---------- */
.bp-figs{
  display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;margin:1.9rem 0;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.bp-fig{background:var(--white);padding:1.2rem 1.1rem;text-align:center}
.bp-fig b{display:block;font-size:clamp(1.5rem,3.2vw,2rem);font-weight:500;color:var(--ink);line-height:1.1}
.bp-fig span{display:block;margin-top:.4rem;font-size:.82rem;color:var(--muted);line-height:1.42}

/* ---------- pull quote ---------- */
.bp-pull{
  margin:2rem 0;padding:0 0 0 1.4rem;border-left:3px solid var(--amber);
  font-size:clamp(1.1rem,2vw,1.3rem);font-weight:300;line-height:1.55;color:var(--ink);
}

/* ---------- FAQ accordion ----------
   <details>/<summary>: native, keyboard accessible, no JS, and the answer
   stays in the DOM so the FAQPage schema matches the visible copy. */
.bp-faq{margin:2.8rem 0 0;padding-top:2rem;border-top:1px solid var(--line)}
.bp-faq > h2{margin-top:0;margin-bottom:1.4rem}

.bp-faq__item{
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-lg);margin-bottom:.7rem;
  overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease;
}
.bp-faq__item:hover{border-color:#d6dad3}
.bp-faq__item[open]{border-color:var(--amber);box-shadow:var(--shadow-sm)}

.bp-faq__item summary{
  display:flex;align-items:flex-start;gap:1rem;cursor:pointer;
  padding:1.05rem 1.3rem;list-style:none;
  font-size:1.02rem;font-weight:500;color:var(--ink);line-height:1.45;
  transition:color .18s ease;
}
.bp-faq__item summary::-webkit-details-marker{display:none}
.bp-faq__item summary::marker{content:""}
.bp-faq__item summary:hover{color:var(--amber-deep)}
.bp-faq__item summary span{flex:1}

/* the chevron, drawn rather than a glyph so it rotates cleanly */
.bp-faq__item summary::after{
  content:"";flex:0 0 auto;width:9px;height:9px;margin-top:.42em;
  border-right:1.5px solid var(--muted-2);border-bottom:1.5px solid var(--muted-2);
  transform:rotate(45deg);transform-origin:center;
  transition:transform .24s cubic-bezier(.22,1,.36,1),border-color .18s ease;
}
.bp-faq__item[open] summary::after{transform:rotate(-135deg);border-color:var(--amber)}
.bp-faq__item summary:hover::after{border-color:var(--amber)}

.bp-faq__a{padding:0 1.3rem 1.15rem;border-top:1px solid var(--line-soft,#edefea)}
.bp-faq__a p{margin:1rem 0 0;color:var(--muted);line-height:1.68;font-size:.97rem}

@media (prefers-reduced-motion:reduce){
  .bp-faq__item summary::after{transition:none}
}

/* ---------- "where this fits" service link ---------- */
.bp-next{
  margin:2.6rem 0 0;padding:1.4rem 1.6rem;background:var(--ink);
  border-radius:var(--radius-lg);color:var(--white);
}
.bp-next__label{color:var(--amber) !important}
.bp-next p{color:#b9c1c9;margin-bottom:.8rem;line-height:1.6}
.bp-next a{color:var(--white);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.bp-next a:hover{color:var(--amber)}

/* ---------- article meta ---------- */
.bp-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
  color:var(--muted-2);font-size:.86rem;margin-bottom:1.8rem;
}
.bp-hero-img{margin:0 0 2.2rem;border-radius:var(--radius-lg);overflow:hidden;background:var(--stone-2)}
.bp-hero-img img{display:block;width:100%;height:auto}

@media (max-width:700px){
  .bp-grid{grid-template-columns:1fr}
  .bp-hub-cta{flex-direction:column;align-items:flex-start}
  .bp-figs{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   NAV BREAKPOINT FIX
   The burger only appeared at 680px, but the header content needs
   ~836px with six nav items and ~898px with seven. So the desktop nav
   overflowed its container between 680px and 836px even before the Blog
   link was added. Measured, not guessed. Switch to the burger while
   there is still room for it.
   ============================================================ */
@media(max-width:900px){
  .nav,.head-cta .btn{display:none}
  .burger{display:flex}
}

/* Eight nav items at a 2rem gap need ~975px of viewport, which pushed the
   Enquire button off screen between 900px and 975px. Tighten the gap on
   mid-size screens rather than sending more desktop users to the burger.
   Measured: 32px gap -> 960px required; 20px gap -> ~876px. */
@media(max-width:1180px){
  .nav{gap:1.25rem}
  .nav a{font-size:.9rem}
}