/* ==========================================================
   Trio Construction Group Ltd — brand system
   Charcoal / orange / amber, taken from the company logo
   and printed flyer artwork.
   ========================================================== */

:root {
  --ink: #16181a;
  --ink-2: #1f2225;
  --slate: #3a3d42;
  --slate-2: #52565c;
  --orange: #e8781e;
  --orange-dk: #c9600d;
  --amber: #f9a31b;
  --amber-lt: #ffb733;
  --paper: #ffffff;
  --mist: #f4f5f6;
  --mist-2: #e7e9eb;
  --line: rgba(255, 255, 255, .12);
  --line-dk: rgba(22, 24, 26, .1);

  --wrap: 1200px;
  --gutter: 24px;
  --r: 4px;
  --r-lg: 10px;
  --r-xl: 14px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --shadow-sm: 0 1px 2px rgba(22,24,26,.05);
  --shadow: 0 1px 2px rgba(22,24,26,.05), 0 6px 18px rgba(22,24,26,.07);
  --shadow-lg: 0 2px 4px rgba(22,24,26,.05), 0 18px 40px rgba(22,24,26,.12);

  --h-font: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --b-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* ---- Type scale (fluid, ~1.22 ratio) ----
     Page-level display sizes are deliberately far apart from in-article
     headings — the two were previously the same size, which flattened
     the whole hierarchy. */
  --t-xs:    0.78rem;                          /* eyebrows, tags, meta   */
  --t-sm:    0.875rem;                         /* captions, small print  */
  --t-base:  1rem;                             /* body                   */
  --t-md:    1.0625rem;                        /* lead-in body           */
  --t-lg:    clamp(1.08rem, 0.4vw + 1rem, 1.2rem);    /* section intros  */
  --t-h4:    clamp(1.0625rem, 0.3vw + 1rem, 1.15rem); /* card titles     */
  --t-h3:    clamp(1.2rem, 0.6vw + 1.05rem, 1.4rem);  /* sub-headings    */
  --t-h2:    clamp(1.45rem, 1.1vw + 1.2rem, 1.9rem);  /* in-article h2   */
  --t-sec:   clamp(1.85rem, 2.2vw + 1.2rem, 2.6rem);  /* section heads   */
  --t-h1:    clamp(2.1rem, 3.2vw + 1.3rem, 3.4rem);   /* page titles     */
  --t-hero:  clamp(2.3rem, 4vw + 1.3rem, 3.9rem);     /* home hero       */

  /* ---- Spacing scale ---- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 44px;  --sp-8: 64px;
  --sp-9: 88px;
  --sec-y: clamp(52px, 6vw, 88px);   /* vertical section rhythm */
  --measure: 68ch;                    /* comfortable reading width */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--b-font);
  font-size: var(--t-md);
  line-height: 1.65;
  color: #4a4f55;
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* height:auto is load-bearing — every <img> carries explicit width/height
   attributes for CLS, and without it the browser honours the height
   attribute literally once max-width caps the width, stretching the
   picture. Rules that deliberately set a height (.hero-bg img and the
   like) are more specific and still win. */
img { max-width: 100%; height: auto; display: block; }
/* <picture> is a wrapper, not a box — keep it out of the layout so every
   existing `.thing img` rule still applies to the image inside it. */
picture { display: contents; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5 {
  font-family: var(--h-font);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.021em;
  color: var(--ink);
  margin: 0 0 .5em;
  text-wrap: balance;
}
/* Only the biggest sizes get the tight display tracking */
h1 { font-size: var(--t-h1); line-height: 1.06; letter-spacing: -.03em; }
h2 { font-size: var(--t-sec); line-height: 1.1; letter-spacing: -.026em; }
h3 { font-size: var(--t-h3); font-weight: 700; letter-spacing: -.014em; }
h4 { font-size: var(--t-h4); font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 650; color: #33383d; }

::selection { background: var(--orange); color: #fff; }

:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 800px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 20px; font-weight: 700;
}
.skip:focus { left: 0; }

/* ---------------- Eyebrow / section heads ---------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--h-font); font-weight: 800; font-size: var(--t-xs);
  letter-spacing: .15em; text-transform: uppercase; color: var(--orange);
  margin: 0 0 var(--sp-3);
}
.eyebrow::before {
  content: ''; width: 24px; height: 2px; background: var(--orange); display: block; flex: none;
}
.eyebrow.light { color: var(--amber); }
.eyebrow.light::before { background: var(--amber); }

.sec-head { max-width: 46rem; margin-bottom: var(--sp-7); }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.center .eyebrow { justify-content: center; }
.sec-head h2 { margin-bottom: .38em; }
.sec-head p { color: #6b7178; font-size: var(--t-lg); line-height: 1.6; max-width: 60ch; }
.sec-head.center p { margin-left: auto; margin-right: auto; }

section { padding: var(--sec-y) 0; }
.sec-mist { background: var(--mist); }
.sec-ink { background: var(--ink); color: #c9ced3; }
.sec-ink h2, .sec-ink h3 { color: #fff; }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--h-font); font-weight: 800; font-size: var(--t-sm);
  letter-spacing: .005em;
  padding: 14px 24px; border: 2px solid transparent; border-radius: var(--r);
  cursor: pointer; text-align: center;
  transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
  will-change: transform;
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .25s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(0); }

.btn-orange { background: var(--orange); color: #fff; box-shadow: 0 10px 24px rgba(232,120,30,.28); }
.btn-orange:hover { background: var(--orange-dk); box-shadow: 0 14px 30px rgba(232,120,30,.34); }

.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--slate); }

.btn-outline { border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }

.btn-ghost { border-color: rgba(255,255,255,.4); color: #fff; }
.btn-ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }

.btn-block { width: 100%; justify-content: center; }
.btn-sm { padding: 10px 18px; font-size: var(--t-sm); }

/* ---------------- Header ---------------- */
.topbar {
  background: var(--ink); color: #b9bec3; font-size: var(--t-xs);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 40px; }
.topbar a { display: inline-flex; align-items: center; gap: 7px; transition: color .2s; }
.topbar a:hover { color: var(--amber); }
.topbar svg { width: 14px; height: 14px; color: var(--orange); }
.topbar-l { display: flex; gap: 22px; }
.topbar-r { display: flex; gap: 16px; align-items: center; }
@media (max-width: 860px) { .topbar { display: none; } }

.hdr {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--mist-2);
  transition: box-shadow .3s var(--ease), padding .3s var(--ease);
}
.hdr.scrolled { box-shadow: 0 6px 24px rgba(22,24,26,.09); }
.hdr .wrap { display: flex; align-items: center; gap: 20px; height: 84px; transition: height .3s var(--ease); }
.hdr.scrolled .wrap { height: 70px; }

.brand { display: flex; align-items: center; flex: none; }
.brand img, .brand svg { height: 68px; width: auto; transition: height .3s var(--ease); }
.hdr.scrolled .brand img, .hdr.scrolled .brand svg { height: 54px; }
@media (max-width: 420px) { .brand img, .brand svg { height: 60px; } }

.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
@media (max-width: 1160px) { .nav { display: none; } }
.nav > * { position: relative; }
.nav a.nav-link {
  display: block; padding: 10px 14px; font-family: var(--h-font);
  font-weight: 700; font-size: var(--t-sm); color: var(--ink);
  border-radius: var(--r); transition: color .2s var(--ease);
}
.nav a.nav-link::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
  background: var(--orange); transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav a.nav-link:hover::after, .nav a.nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav a.nav-link[aria-current="page"] { color: var(--orange); }

.has-drop:hover .drop, .has-drop:focus-within .drop {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.drop {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 500px;
  background: #fff; border: 1px solid var(--mist-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 14px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.drop.right { left: auto; right: 0; }
.drop a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  font-size: var(--t-sm); font-weight: 600; border-radius: var(--r);
  transition: background-color .18s, color .18s;
}
.drop a:hover { background: var(--mist); color: var(--orange); }
.drop a svg { width: 16px; height: 16px; color: var(--orange); flex: none; }
.drop-all { grid-column: 1 / -1; margin-top: 6px; border-top: 1px solid var(--mist-2); padding-top: 10px; }
.drop-all a { justify-content: center; color: var(--orange); font-family: var(--h-font); font-weight: 800; font-size: var(--t-sm); letter-spacing: .06em; text-transform: uppercase; }

.hdr-cta { display: flex; align-items: center; gap: 12px; flex: none; }
@media (max-width: 1160px) { .hdr-cta { margin-left: auto; } .hdr-cta .btn { display: none; } }
.hdr-phone {
  display: flex; align-items: center; gap: 10px; font-family: var(--h-font);
  font-weight: 800; font-size: 1.05rem; color: var(--ink); white-space: nowrap;
}
.hdr-phone svg { width: 34px; height: 34px; padding: 8px; background: var(--amber); color: var(--ink); border-radius: 50%; }
@media (max-width: 640px) { .hdr-phone span { display: none; } }

.burger {
  display: none; width: 46px; height: 46px; border: 1px solid var(--mist-2);
  background: #fff; border-radius: var(--r); cursor: pointer; padding: 0;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.burger span { display: block; width: 20px; height: 2px; background: var(--ink); transition: transform .3s var(--ease), opacity .2s; }
@media (max-width: 1160px) { .burger { display: flex; } }

/* Mobile drawer */
.mm-back {
  position: fixed; inset: 0; background: rgba(22,24,26,.55); z-index: 98;
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s;
}
.mm-back.open { opacity: 1; visibility: visible; }
.mm {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 88vw); z-index: 99;
  background: var(--ink); color: #fff; padding: 24px; overflow-y: auto;
  transform: translateX(102%); transition: transform .38s var(--ease);
  will-change: transform;
}
.mm.open { transform: translateX(0); }
.mm-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.mm-close { background: none; border: 0; color: #fff; font-size: var(--t-h2); line-height: 1; cursor: pointer; padding: 6px 10px; }
.mm nav a {
  display: block; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.1);
  font-family: var(--h-font); font-weight: 700; font-size: var(--t-base);
}
.mm nav a:hover { color: var(--amber); }
.mm details summary {
  list-style: none; cursor: pointer; padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-family: var(--h-font); font-weight: 700; font-size: var(--t-base);
  display: flex; align-items: center; justify-content: space-between;
}
.mm details summary::-webkit-details-marker { display: none; }
.mm details summary::after { content: '+'; color: var(--amber); font-size: var(--t-h3); }
.mm details[open] summary::after { content: '−'; }
.mm details .sub a { padding: 10px 0 10px 16px; font-size: var(--t-sm); font-weight: 600; color: #b9bec3; border-bottom: 0; }
.mm .mm-foot { margin-top: 28px; display: grid; gap: 12px; }

/* ---------------- Hero ---------------- */
.hero { position: relative; background: var(--ink); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 1; transform: scale(1.06); }
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  /* A scrim, not a blackout. Heavy enough on the left for AA contrast on the
     headline, then falls away so the photograph is actually legible on the
     right — which is the entire reason for having one. */
  background:
    linear-gradient(95deg,
      rgba(22,24,26,.94) 0%,
      rgba(22,24,26,.88) 32%,
      rgba(22,24,26,.62) 58%,
      rgba(22,24,26,.34) 100%),
    linear-gradient(to top, rgba(22,24,26,.42) 0%, rgba(22,24,26,0) 26%);
}
@media (max-width: 900px) {
  /* No room for a photo column on a phone — favour legibility. */
  .hero-bg::after { background: linear-gradient(to bottom, rgba(22,24,26,.9), rgba(22,24,26,.82)); }
}
.hero-inner {
  position: relative;
  /* Keep .wrap's horizontal gutter — a `padding: x 0 y` shorthand here wipes
     it out and the headline runs into the edge of a phone screen. */
  padding-block: clamp(44px, 5vw, 72px) clamp(44px, 4.5vw, 64px);
}
.hero h1 { color: #fff; max-width: 15ch; font-size: var(--t-hero); }
.hero h1 em { font-style: normal; color: var(--amber); }
.hero-lead { color: #ccd2d8; font-size: var(--t-lg); line-height: 1.6; max-width: 54ch; margin-bottom: var(--sp-7); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.hero-badges li {
  display: flex; align-items: center; gap: 9px; color: #dfe3e7;
  font-size: var(--t-sm); font-weight: 600; list-style: none;
}
.hero-badges svg { width: 20px; height: 20px; color: var(--amber); flex: none; }
.hero-badges ul, .hero-badges { padding: 0; margin: 0; }

/* Hero entrance runs on CSS alone so the headline is never JS-gated */
@keyframes heroIn { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
.hero-inner > * { animation: heroIn .75s var(--ease) both; }
.hero-inner > :nth-child(1) { animation-delay: .05s; }
.hero-inner > :nth-child(2) { animation-delay: .14s; }
.hero-inner > :nth-child(3) { animation-delay: .24s; }
.hero-inner > :nth-child(4) { animation-delay: .34s; }
.hero-inner > :nth-child(5) { animation-delay: .44s; }
@media (prefers-reduced-motion: reduce) { .hero-inner > * { animation: none; } }

.hero-strip { position: relative; background: var(--amber); }
.hero-strip .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.hero-strip div { padding: var(--sp-5) var(--sp-4); text-align: center; }
.hero-strip strong { display: block; font-family: var(--h-font); font-weight: 800; font-size: clamp(1.45rem, 1.8vw + 1rem, 2rem); color: var(--ink); line-height: 1; letter-spacing: -.02em; }
.hero-strip span { font-size: var(--t-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(22,24,26,.72); }
/* The counted figure is a <span> inside the <strong>, so the label rule above
   was catching it and rendering the number at caption size. */
.hero-strip strong span { font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; }
@media (max-width: 720px) { .hero-strip .wrap { grid-template-columns: 1fr 1fr; } }

/* Page banner (inner pages) */
.banner { position: relative; background: var(--ink); overflow: hidden; }
.banner-bg { position: absolute; inset: 0; }
.banner-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .4; }
.banner-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(22,24,26,.94), rgba(22,24,26,.6)); }
.banner-inner { position: relative; padding-block: clamp(56px, 7vw, 96px); } /* padding-block, not a shorthand: `x 0` zeroed the .wrap gutter */
.banner h1 { color: #fff; max-width: 17ch; margin-bottom: .35em; }
.banner p { color: #ccd2d8; max-width: 58ch; font-size: var(--t-lg); line-height: 1.6; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--t-sm); color: #8f959b; margin-bottom: 18px; padding: 0; list-style: none; }
.crumbs li::after { content: '/'; margin-left: 8px; color: #5b6065; }
.crumbs li:last-child::after { display: none; }
.crumbs a:hover { color: var(--amber); }
.crumbs [aria-current] { color: var(--amber); }

/* ---------------- Cards / grids ---------------- */
.grid { display: grid; gap: var(--sp-5); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

.svc-card {
  position: relative; display: block; background: #fff; border: 1px solid var(--mist-2);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform .38s var(--ease), box-shadow .38s var(--ease), border-color .38s var(--ease);
  will-change: transform;
}
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.svc-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mist-2); }
.svc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.svc-card:hover .svc-media img { transform: scale(1.07); }
/* A service we cover but have no photograph of yet: a branded tile rather than
   a stock photo of somebody else's kitchen. */
.svc-media-empty { display: grid; place-items: center; background: linear-gradient(140deg, #22262b, var(--ink)); }
.svc-media-empty .svc-media-glyph { width: 64px; height: 64px; color: rgba(249,163,27,.85); }
.svc-media-empty::after { display: none; }

.svc-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(22,24,26,.7), rgba(22,24,26,0) 55%);
}
.svc-icon {
  position: absolute; left: 18px; bottom: -22px; z-index: 2;
  width: 52px; height: 52px; display: grid; place-items: center;
  background: var(--orange); color: #fff; border-radius: var(--r);
  box-shadow: 0 8px 20px rgba(232,120,30,.35);
  transition: transform .38s var(--ease), background-color .3s;
}
.svc-card:hover .svc-icon { transform: translateY(-4px) rotate(-4deg); }
.svc-icon svg { width: 26px; height: 26px; }
.svc-body { padding: 40px 24px 26px; }
.svc-body h3 { font-size: var(--t-h4); margin-bottom: .4em; transition: color .25s; }
.svc-card:hover .svc-body h3 { color: var(--orange); }
.svc-body p { font-size: var(--t-sm); color: #6b7178; margin-bottom: var(--sp-4); line-height: 1.6; }
.svc-more {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--h-font);
  font-weight: 800; font-size: var(--t-xs); letter-spacing: .09em; text-transform: uppercase; color: var(--orange);
}
.svc-more svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.svc-card:hover .svc-more svg { transform: translateX(4px); }

/* Trade cards — services grouped by trade on the home page */
.trades { gap: 20px; }
@media (max-width: 1080px) { .trades { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .trades { grid-template-columns: 1fr; } }

.trade-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--mist-2); border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .38s var(--ease), box-shadow .38s var(--ease), border-color .38s var(--ease);
  will-change: transform;
}
.trade-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
.trade-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--mist-2); }
.trade-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.trade-card:hover .trade-media img { transform: scale(1.07); }
.trade-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(22,24,26,.66), rgba(22,24,26,0) 58%);
}
.trade-body { padding: 38px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.trade-body h3 { font-size: var(--t-h4); margin-bottom: .35em; transition: color .25s; }
.trade-card:hover .trade-body h3 { color: var(--orange); }
.trade-blurb { font-size: var(--t-sm); color: #6b7178; line-height: 1.55; margin: 0 0 var(--sp-4); }
/* Align the sub-service lists across a row regardless of how the heading wraps */
@media (min-width: 561px) {
  .trade-body h3 { min-height: 2.2em; }
  .trade-blurb { min-height: 3.9em; }
}
.trade-subs { margin-top: auto; }

.trade-subs { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; border-top: 1px solid var(--mist-2); }
.trade-subs li { border-bottom: 1px solid var(--mist-2); }
.trade-subs a, .trade-subs span {
  display: flex; align-items: center; gap: 9px; padding: 10px 2px;
  font-size: .89rem; font-weight: 600; line-height: 1.35;
}
.trade-subs svg { width: 14px; height: 14px; flex: none; transition: transform .25s var(--ease); }
.trade-subs a { color: var(--ink); }
.trade-subs a svg { color: var(--orange); }
.trade-subs a:hover { color: var(--orange); }
.trade-subs a:hover svg { transform: translateX(3px); }
.trade-subs span { color: #6d7379; font-weight: 500; }
.trade-subs span svg { color: #b6bbc0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}



/* ---------------- Before / after comparison ---------------- */
.ba { margin: 0; }
.ba-stage {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--r-lg); background: var(--ink); touch-action: pan-y;
  cursor: ew-resize; user-select: none;
}
.ba-lg .ba-stage { aspect-ratio: 3 / 2; }
.ba-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  pointer-events: none; -webkit-user-drag: none;
}
/* The before photo stays the full size of the stage and is revealed with a clip.
   Narrowing the wrapper instead re-cropped it on every move, so it never lined up
   with the after photo and appeared to warp as the handle was dragged. The divider
   line is drawn by .ba-handle. */
.ba-before-wrap {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-clip-path: inset(0 50% 0 0); clip-path: inset(0 50% 0 0); will-change: clip-path;
}
.ba-tag {
  position: absolute; top: 14px; z-index: 3;
  font-family: var(--h-font); font-weight: 800; font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; padding: 6px 11px; border-radius: 3px; pointer-events: none;
}
.ba-tag-before { left: 14px; background: rgba(22,24,26,.82); color: #fff; }
.ba-tag-after { right: 14px; background: var(--amber); color: var(--ink); }
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px;
  background: var(--amber); z-index: 4; pointer-events: none; will-change: left;
}
.ba-grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%; background: var(--amber); color: var(--ink);
  display: grid; place-items: center; box-shadow: 0 4px 16px rgba(22,24,26,.4);
}
.ba-grip svg { width: 22px; height: 22px; }
.ba-range {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize; z-index: 5; -webkit-appearance: none; appearance: none; background: transparent;
}
.ba-range::-webkit-slider-thumb { -webkit-appearance: none; width: 46px; height: 100%; cursor: ew-resize; }
.ba-range::-moz-range-thumb { width: 46px; height: 100%; border: 0; background: transparent; cursor: ew-resize; }
.ba-range:focus-visible { opacity: 1; outline: 3px solid var(--amber); outline-offset: 3px; }
.ba figcaption { color: #a2a8ae; font-size: var(--t-sm); margin-top: 12px; }
.sec-ink .ba figcaption { color: #a2a8ae; }
.ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 860px) { .ba-grid { grid-template-columns: 1fr; } }
.ba-title {
  font-family: var(--h-font); font-weight: 800; font-size: var(--t-xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--amber); margin: 0 0 12px;
}

/* ---------------- Case study cards ---------------- */
.case-list { display: grid; gap: var(--sp-5); grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .case-list { grid-template-columns: 1fr; } }
.case-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--mist-2); border-radius: var(--r-lg); overflow: hidden;
  transition: transform .38s var(--ease), box-shadow .38s var(--ease), border-color .38s var(--ease);
}
.case-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.case-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--mist-2); }
.case-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.case-card:hover .case-media img { transform: scale(1.06); }
.case-body { padding: 26px 24px 28px; display: flex; flex-direction: column; flex: 1; }
.case-meta {
  display: flex; align-items: center; gap: 7px; font-family: var(--h-font); font-weight: 800;
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); margin: 0 0 10px;
}
.case-meta svg { width: 14px; height: 14px; }
.case-body h3 { font-size: var(--t-h3); margin-bottom: .4em; transition: color .25s; }
.case-card:hover .case-body h3 { color: var(--orange); }
.case-body > p { font-size: var(--t-sm); color: #6b7178; line-height: 1.6; margin-bottom: var(--sp-4); }
.case-tags { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 7px; }
.case-tags li {
  font-size: .78rem; font-weight: 600; color: #5b6065;
  background: var(--mist); border: 1px solid var(--mist-2); border-radius: 100px; padding: 5px 11px;
}
.case-card .svc-more { margin-top: auto; }

.case-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 1.6em 0; }
@media (max-width: 620px) { .case-gallery { grid-template-columns: 1fr 1fr; } }
.case-shot { display: block; border-radius: var(--r); overflow: hidden; aspect-ratio: 1; background: var(--mist-2); }
.case-shot img { width: 100%; height: 100%; object-fit: cover; margin: 0 !important; border-radius: 0 !important; transition: transform .5s var(--ease); }
.case-shot:hover img { transform: scale(1.07); }

.case-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.case-facts li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; border-bottom: 1px solid var(--mist-2); padding-bottom: 10px; }
.case-facts li:last-child { border-bottom: 0; padding-bottom: 0; }
.case-facts span { font-size: var(--t-xs); color: #6d7379; }
.case-facts strong { font-family: var(--h-font); font-weight: 800; font-size: var(--t-sm); color: var(--ink); text-align: right; }

/* Archive filters */
.filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 38px; }
.filter-btn {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font-family: var(--h-font); font-weight: 800; font-size: var(--t-sm);
  padding: 11px 18px; border-radius: 100px; background: #fff;
  border: 1px solid var(--mist-2); color: var(--ink);
  transition: background-color .25s var(--ease), color .25s, border-color .25s, transform .25s var(--ease);
}
.filter-btn span {
  font-size: .74rem; background: var(--mist); color: #6d7379;
  border-radius: 100px; padding: 2px 8px; transition: background-color .25s, color .25s;
}
.filter-btn:hover { border-color: var(--orange); transform: translateY(-2px); }
.filter-btn.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.filter-btn.active span { background: var(--orange); color: #fff; }
.filter-empty { text-align: center; color: #6d7379; margin-top: 28px; }
.filter-empty a { color: var(--orange); font-weight: 700; }
[data-filter-list] [data-trade][hidden] { display: none; }

.case-flag {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(22,24,26,.84); color: #fff; padding: 6px 11px; border-radius: 3px;
  font-family: var(--h-font); font-weight: 800; font-size: .7rem; letter-spacing: .09em; text-transform: uppercase;
}
.case-flag svg { width: 13px; height: 13px; color: var(--amber); }
.case-media { position: relative; }
.ba-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1080px) { .ba-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .ba-grid-3 { grid-template-columns: 1fr; } }

/* Area / archive hero — shorter than the home hero */
.area-hero .hero-inner { padding-block: clamp(46px, 6vw, 84px) clamp(46px, 5vw, 72px); }
.area-hero h1 { font-size: var(--t-h1); max-width: 17ch; }
.area-hero .crumbs { margin-bottom: 14px; }
.area-hero .hero-lead { margin-bottom: 30px; }

/* Steps on a light background */
.steps-light .step::before { -webkit-text-stroke: 2px rgba(22,24,26,.14); }
.steps-light .step p { color: #5b6065; }

/* Trade blocks on the services index */
.trade-block { margin-bottom: var(--sp-8); }
.trade-block:last-child { margin-bottom: 0; }
.trade-block-head {
  display: flex; align-items: center; gap: 16px; margin-bottom: 24px;
  padding-bottom: 18px; border-bottom: 2px solid var(--mist-2); position: relative;
}
.trade-block-head::after {
  content: ''; position: absolute; left: 0; bottom: -2px; width: 72px; height: 2px; background: var(--orange);
}
.trade-block-icon {
  width: 52px; height: 52px; flex: none; display: grid; place-items: center;
  background: var(--ink); color: var(--amber); border-radius: var(--r);
}
.trade-block-icon svg { width: 27px; height: 27px; }
.trade-block-head h3 { font-size: var(--t-h3); margin: 0 0 3px; }
.trade-block-head p { font-size: var(--t-sm); color: #6b7178; margin: 0; }

.trade-also {
  background: var(--mist); border: 1px dashed var(--mist-2); border-radius: var(--r-lg);
  padding: 24px 22px; display: flex; flex-direction: column;
}
.sec-mist .trade-also { background: #fff; }
.trade-also-label {
  font-family: var(--h-font); font-weight: 800; font-size: var(--t-xs); letter-spacing: .14em;
  text-transform: uppercase; color: var(--orange); margin: 0 0 14px;
}
.trade-also ul { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
.trade-also li { display: flex; align-items: flex-start; gap: 9px; font-size: var(--t-sm); color: #4a4e53; font-weight: 500; }
.trade-also li svg { width: 15px; height: 15px; flex: none; margin-top: 4px; color: var(--orange); }
.trade-also .btn { align-self: flex-start; }

/* The also-list sits under the whole trade block, not inside the card grid, so it
   reads as belonging to the trade rather than to the last service card above it. */
.trade-block > .trade-also { margin-top: var(--sp-4); }
@media (min-width: 861px) {
  .trade-block > .trade-also {
    flex-direction: row; align-items: center; flex-wrap: wrap; gap: 14px 30px; padding: 20px 24px;
  }
  .trade-block > .trade-also .trade-also-label { margin: 0; }
  .trade-block > .trade-also ul { margin: 0; grid-auto-flow: column; gap: 22px; }
  .trade-block > .trade-also .btn { margin-left: auto; align-self: center; }
}

/* "Part of our … work" block inside a service page */
.trade-context {
  background: var(--mist); border-left: 3px solid var(--orange); border-radius: 0 var(--r-lg) var(--r-lg) 0;
  padding: 24px 26px; margin: 2em 0;
}
.trade-context-label {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--h-font); font-weight: 800; font-size: var(--t-xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink); margin: 0 0 16px;
}
.trade-context-label svg { width: 20px; height: 20px; color: var(--orange); flex: none; }
.trade-context-list { list-style: none; padding: 0 !important; margin: 0 !important; display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .trade-context-list { grid-template-columns: 1fr; } }
.trade-context-list li { display: block !important; }
.trade-context-list li::before { display: none !important; }
.trade-context-list a, .trade-context-list span {
  display: flex; align-items: center; gap: 9px; font-size: var(--t-sm); font-weight: 600;
}
.trade-context-list svg { width: 15px; height: 15px; flex: none; transition: transform .25s var(--ease); }
.trade-context-list a { color: var(--ink); }
.trade-context-list a svg { color: var(--orange); }
.trade-context-list a:hover { color: var(--orange); }
.trade-context-list a:hover svg { transform: translateX(3px); }
.trade-context-list span { color: #6d7379; font-weight: 500; }
.trade-context-list span svg { color: #b6bbc0; }
.trade-context-list [aria-current] span { color: var(--orange); font-weight: 700; }
.trade-context-list [aria-current] svg { color: var(--orange); }

/* Sidebar: other services grouped by trade */
.side-trade + .side-trade { margin-top: 18px; }
.side-trade-label {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--h-font); font-weight: 800; font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: #6d7379; margin: 0 0 8px;
}
.side-trade-label svg { width: 15px; height: 15px; color: var(--orange); flex: none; }

/* Feature (why us) */
.feat {
  background: #fff; border: 1px solid var(--mist-2); border-radius: var(--r-lg);
  padding: 32px 28px; position: relative; overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.feat::before {
  content: ''; position: absolute; left: 0; top: 0; width: 4px; height: 100%;
  background: var(--orange); transform: scaleY(0); transform-origin: top;
  transition: transform .4s var(--ease);
}
.feat:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.feat:hover::before { transform: scaleY(1); }
.feat-icon { width: 50px; height: 50px; display: grid; place-items: center; background: var(--mist); color: var(--orange); border-radius: var(--r); margin-bottom: 18px; transition: background-color .3s, color .3s; }
.feat:hover .feat-icon { background: var(--orange); color: #fff; }
.feat-icon svg { width: 26px; height: 26px; }
.feat h3 { font-size: var(--t-h4); }
.feat p { font-size: var(--t-sm); color: #6b7178; line-height: 1.6; }

/* Process steps */
.steps { counter-reset: s; display: grid; gap: 24px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding-top: 30px; }
.step::before {
  counter-increment: s; content: '0' counter(s);
  font-family: var(--h-font); font-weight: 800; font-size: 3.4rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.22);
  position: absolute; top: -14px; left: 0;
}
.step h3 { font-size: var(--t-h4); margin-bottom: .45em; position: relative; }
.step p { font-size: var(--t-sm); color: #a2a8ae; line-height: 1.6; }
.step .step-rule { width: 34px; height: 3px; background: var(--orange); margin-bottom: 16px; }

/* Split content */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 68px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split-media { position: relative; }
/* Fixed frame, cropped to fill — otherwise a portrait source (about-team.jpg
   is 676x1200) renders a metre tall on a phone and swamps the section. */
.split-media img { border-radius: var(--r-lg); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 900px) { .split-media img { aspect-ratio: 16 / 10; } }
.badge-float {
  position: absolute; left: -18px; bottom: 26px; background: var(--orange); color: #fff;
  padding: 20px 24px; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); max-width: 220px;
}
.badge-float strong { display: block; font-family: var(--h-font); font-weight: 800; font-size: var(--t-sec); line-height: 1; }
.badge-float span { font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .92; }
@media (max-width: 600px) { .badge-float { left: 10px; } }

.ticks { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 12px; }
.ticks.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .ticks.two { grid-template-columns: 1fr; } }
.ticks li { display: flex; align-items: flex-start; gap: 11px; font-weight: 600; font-size: var(--t-base); }
.ticks svg { width: 21px; height: 21px; color: var(--orange); flex: none; margin-top: 2px; }
.sec-ink .ticks li { color: #dfe3e7; }
.sec-ink .ticks svg { color: var(--amber); }

/* Marquee */
.marquee { background: var(--ink); border-top: 4px solid var(--orange); border-bottom: 1px solid rgba(255,255,255,.08); overflow: hidden; padding: 0; }
.marquee-track { display: flex; gap: 0; width: max-content; animation: slide 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translate3d(-50%, 0, 0); } }
.marquee-track span {
  display: inline-flex; align-items: center; gap: 20px; padding: 18px 26px;
  font-family: var(--h-font); font-weight: 800; font-size: .96rem;
  letter-spacing: .1em; text-transform: uppercase; color: #fff; white-space: nowrap;
}
.marquee-track span::after { content: ''; width: 7px; height: 7px; background: var(--orange); border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 980px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
.gal {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  aspect-ratio: 3 / 4; background: var(--mist-2);
}
.gal.wide { grid-column: span 2; aspect-ratio: 3 / 2; }
@media (max-width: 620px) { .gal.wide { grid-column: span 2; } .gallery { grid-template-columns: 1fr 1fr; } }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.gal:hover img { transform: scale(1.08); }
.gal-cap {
  position: absolute; inset: auto 0 0 0; padding: 40px 18px 18px; color: #fff;
  background: linear-gradient(to top, rgba(22,24,26,.9), transparent);
  transform: translateY(6px); opacity: .96; transition: transform .4s var(--ease);
}
.gal:hover .gal-cap { transform: translateY(0); }
.gal-cap strong { display: block; font-family: var(--h-font); font-weight: 800; font-size: var(--t-base); }
.gal-cap span { font-size: var(--t-xs); color: var(--amber); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* Areas */
.area-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .area-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .area-grid { grid-template-columns: 1fr; } }
.area-card {
  display: flex; align-items: center; gap: 14px; padding: 20px 22px;
  background: #fff; border: 1px solid var(--mist-2); border-radius: var(--r-lg);
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s var(--ease);
}
.area-card:hover { transform: translateX(5px); border-color: var(--orange); box-shadow: var(--shadow); }
.area-card svg { width: 22px; height: 22px; color: var(--orange); flex: none; }
.area-card strong { font-family: var(--h-font); font-weight: 800; font-size: var(--t-base); color: var(--ink); display: block; }
.area-card span { font-size: var(--t-sm); color: #6d7379; }
.area-card .arw { margin-left: auto; width: 17px; height: 17px; color: #b6bbc0; transition: transform .3s var(--ease), color .3s; }
.area-card:hover .arw { transform: translateX(4px); color: var(--orange); }

.chips { display: flex; flex-wrap: wrap; gap: 9px; padding: 0; margin: 0; list-style: none; }
.chips a {
  display: block; padding: 8px 15px; background: #fff; border: 1px solid var(--mist-2);
  border-radius: 100px; font-size: .87rem; font-weight: 600;
  transition: background-color .25s, color .25s, border-color .25s;
}
.chips a:hover { background: var(--orange); color: #fff; border-color: var(--orange); }
.sec-ink .chips a { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #dfe3e7; }
.sec-ink .chips a:hover { background: var(--amber); color: var(--ink); border-color: var(--amber); }

/* Testimonials */
.quote {
  background: #fff; border: 1px solid var(--mist-2); border-radius: var(--r-lg);
  padding: 32px 28px; position: relative;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.quote:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.quote .stars { display: flex; gap: 3px; margin-bottom: 16px; }
.quote .stars svg { width: 18px; height: 18px; color: var(--amber); }
.quote blockquote { margin: 0 0 20px; font-size: var(--t-base); color: #3f4348; }
.quote cite { font-style: normal; font-family: var(--h-font); font-weight: 800; font-size: var(--t-sm); color: var(--ink); display: block; }
.quote cite span { display: block; font-family: var(--b-font); font-weight: 500; font-size: var(--t-sm); color: #6d7379; }

/* FAQ */
.faq { border-top: 1px solid var(--mist-2); }
.faq details { border-bottom: 1px solid var(--mist-2); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative;
  font-family: var(--h-font); font-weight: 700; font-size: var(--t-h4); color: var(--ink); letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 13px; height: 13px;
  border-right: 2.5px solid var(--orange); border-bottom: 2.5px solid var(--orange);
  transform: translateY(-70%) rotate(45deg); transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .faq-body { padding: 0 44px 22px 0; color: #6b7178; font-size: var(--t-base); line-height: 1.65; max-width: 62ch; }

/* CTA band */
.cta-band { position: relative; overflow: hidden; background: var(--ink); }
.cta-band .cta-bg { position: absolute; inset: 0; }
.cta-band .cta-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .22; }
.cta-band .cta-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(22,24,26,.92), rgba(22,24,26,.68)); }
.cta-band .wrap { position: relative; display: grid; grid-template-columns: 1.3fr auto; gap: 34px; align-items: center; }
@media (max-width: 860px) { .cta-band .wrap { grid-template-columns: 1fr; } }
.cta-band h2 { color: #fff; font-size: var(--t-sec); margin-bottom: .3em; }
.cta-band p { color: #ccd2d8; max-width: 54ch; font-size: var(--t-base); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Quote form */
.quote-band { background: var(--amber); position: relative; overflow: hidden; }
.quote-band::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(22,24,26,.045) 0 2px, transparent 2px 14px);
}
.quote-band .wrap { position: relative; }
.quote-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .quote-layout { grid-template-columns: 1fr; } }
.quote-band .eyebrow { color: var(--ink); }
.quote-band .eyebrow::before { background: var(--ink); }
.quote-band h2 { color: var(--ink); }
.quote-band .lead { color: rgba(22,24,26,.78); font-size: var(--t-lg); line-height: 1.6; max-width: 46ch; }
.quote-side { display: grid; gap: 14px; margin-top: 28px; }
.quote-side a {
  display: flex; align-items: center; gap: 13px; background: rgba(22,24,26,.06);
  border: 1px solid rgba(22,24,26,.12); border-radius: var(--r-lg); padding: 16px 18px;
  transition: background-color .25s, transform .25s var(--ease);
}
.quote-side a:hover { background: var(--ink); color: #fff; transform: translateX(4px); }
.quote-side svg { width: 22px; height: 22px; flex: none; }
.quote-side strong { display: block; font-family: var(--h-font); font-weight: 800; font-size: var(--t-md); }
.quote-side span { font-size: var(--t-xs); opacity: .78; }

.form-card { background: var(--ink); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 38px); box-shadow: var(--shadow-lg); }
.form-card h3 { color: #fff; font-size: var(--t-h3); margin-bottom: .3em; }
.form-card .form-sub { color: #a2a8ae; font-size: var(--t-sm); margin-bottom: var(--sp-5); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: var(--t-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #a2a8ae; }
.field input, .field select, .field textarea {
  font-family: var(--b-font); font-size: .97rem; color: #fff;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r); padding: 13px 15px; width: 100%;
  transition: border-color .2s, background-color .2s;
}
.field textarea { min-height: 118px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #7b8188; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--amber); background: rgba(255,255,255,.1);
}
.field select option { background: var(--ink); }
.form-note { font-size: var(--t-xs); color: #8f959b; margin: 14px 0 0; text-align: center; }
.form-success {
  display: none; background: rgba(232,120,30,.14); border: 1px solid var(--orange);
  color: #ffd9b8; border-radius: var(--r); padding: 16px 18px; margin-bottom: 20px; font-size: var(--t-sm);
}

/* Sidebar (service / area pages) */
.page-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(32px, 4vw, 64px); align-items: start; }
@media (max-width: 980px) { .page-layout { grid-template-columns: 1fr; } }
/* In-article headings sit well below the section-head scale so the page
   still reads top-down: page title > section head > article heading. */
.prose { max-width: var(--measure); }
.prose > p, .prose > ul, .prose > .faq { max-width: var(--measure); }
.prose h2 {
  font-size: var(--t-h2); line-height: 1.2; letter-spacing: -.018em;
  margin: 2em 0 .55em; padding-top: .9em; border-top: 1px solid var(--mist-2);
  position: relative;
}
.prose h2::before {
  content: ''; position: absolute; top: -1px; left: 0; width: 42px; height: 2px; background: var(--orange);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h2:first-child::before { display: none; }
.prose h3 { margin: 1.7em 0 .5em; font-size: var(--t-h3); }
.prose p, .prose li { color: #4a4f55; }
.prose > p:first-of-type { font-size: var(--t-lg); line-height: 1.6; color: #3b4046; }
.prose ul { padding-left: 0; list-style: none; display: grid; gap: 10px; margin: 0 0 1.5em; }
.prose ul li { display: flex; gap: 11px; align-items: flex-start; font-size: var(--t-base); }
.prose ul li::before {
  content: ''; width: 7px; height: 7px; background: var(--orange); border-radius: 2px;
  flex: none; margin-top: 9px;
}
.prose img { border-radius: var(--r-lg); margin: 1.6em 0; width: 100%; height: clamp(240px, 34vw, 420px); object-fit: cover; }
.prose .ba, .prose .trade-context, .prose .case-gallery { max-width: none; }

.side { position: sticky; top: 96px; display: grid; gap: var(--sp-4); }
@media (max-width: 980px) { .side { position: static; } }
.side-card { background: var(--mist); border: 1px solid var(--mist-2); border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-5); }
.side-card.ink { background: var(--ink); border-color: var(--ink); }
.side-card.ink h3 { color: #fff; }
.side-card.ink p { color: #a2a8ae; font-size: var(--t-sm); line-height: 1.6; }
.side-card h3 { font-size: var(--t-h4); margin-bottom: .55em; }
.side-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.side-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-radius: var(--r); font-size: var(--t-sm); font-weight: 600;
  background: #fff; border: 1px solid var(--mist-2);
  transition: background-color .22s, color .22s, border-color .22s, transform .22s var(--ease);
}
.side-list a:hover, .side-list a[aria-current="page"] { background: var(--orange); color: #fff; border-color: var(--orange); transform: translateX(3px); }
.side-list svg { width: 15px; height: 15px; flex: none; }
.side-list.left a { justify-content: flex-start; }
.side-card p svg { width: 16px; height: 16px; vertical-align: -3px; color: var(--orange); display: inline-block; }
.side-phone {
  display: flex; align-items: center; gap: 11px; font-family: var(--h-font);
  font-weight: 800; font-size: 1.32rem; color: var(--amber); margin: 14px 0 18px;
}
.side-phone svg { width: 22px; height: 22px; }

/* Footer */
.foot { background: var(--ink); color: #9aa0a6; padding: clamp(56px, 6vw, 84px) 0 0; }
.foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 48px; }
@media (max-width: 900px) { .foot-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-top { grid-template-columns: 1fr; } }
.foot h4 {
  font-family: var(--h-font); font-weight: 800; font-size: var(--t-xs); letter-spacing: .14em;
  text-transform: uppercase; color: #fff; margin: 0 0 18px;
}
.foot-brand img, .foot-brand svg { height: 126px; width: auto; margin-bottom: 22px; }
.foot p { font-size: var(--t-sm); }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.foot ul a { font-size: var(--t-sm); transition: color .2s, transform .2s var(--ease); display: inline-block; }
.foot ul a:hover { color: var(--amber); transform: translateX(3px); }
.foot-contact li { display: flex; gap: 11px; align-items: flex-start; font-size: var(--t-sm); }
.foot-contact svg { width: 17px; height: 17px; color: var(--orange); flex: none; margin-top: 4px; }
.socials { display: flex; gap: 10px; margin-top: 20px; }
.socials a {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r);
  background: rgba(255,255,255,.07); transition: background-color .25s, transform .25s var(--ease);
}
.socials a:hover { background: var(--orange); transform: translateY(-3px); }
.socials svg { width: 19px; height: 19px; color: #fff; }
.foot-bot {
  border-top: 1px solid rgba(255,255,255,.1); padding: 22px 0;
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  font-size: var(--t-sm);
}
.foot-bot ul { display: flex; gap: 20px; }
.foot-legal { font-size: var(--t-xs); color: #6d7379; padding-bottom: 30px; }

/* Sticky mobile call bar */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: none;
  grid-template-columns: 1fr 1fr; background: var(--ink);
  border-top: 3px solid var(--orange);
}
@media (max-width: 720px) { .callbar { display: grid; } body { padding-bottom: 60px; } }
.callbar a {
  padding: 15px 10px; text-align: center; color: #fff; font-family: var(--h-font);
  font-weight: 800; font-size: var(--t-sm); display: flex; align-items: center; justify-content: center; gap: 8px;
}
.callbar a + a { background: var(--orange); }
.callbar svg { width: 17px; height: 17px; }

/* ==========================================================
   Trades — alternating rows. Photograph one side, what the
   trade covers on the other, flipping row by row. Replaced the
   tabbed explorer, which hid eight of nine trades behind a click.
   ========================================================== */
.trade-rows { display: flex; flex-direction: column; gap: clamp(56px, 7vw, 104px); }

.trade-row {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 68px);
  align-items: center;
}
.trade-row--flip .trade-row-media { order: 2; }

/* ---- media ---- */
.trade-row-media {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-xl); background: var(--mist);
  aspect-ratio: 4 / 3; box-shadow: var(--shadow-lg);
  isolation: isolate;
}
.trade-row-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease), filter .5s var(--ease);
}
.trade-row-media::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(22,24,26,.09);
  background: linear-gradient(to top, rgba(22,24,26,.46) 0%, rgba(22,24,26,0) 46%);
}
.trade-row-media:hover img,
.trade-row-media:focus-visible img { transform: scale(1.055); }
.trade-row-media:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }

.trade-row-badge {
  position: absolute; z-index: 2; left: 18px; bottom: 18px;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px; border-radius: 100px;
  background: rgba(22,24,26,.82); backdrop-filter: blur(8px);
  color: #fff; font-family: var(--h-font); font-weight: 700;
  font-size: var(--t-xs); letter-spacing: .04em;
  transition: transform .4s var(--ease), background .3s var(--ease);
}
.trade-row-badge svg { width: 16px; height: 16px; color: var(--amber); }
.trade-row-media:hover .trade-row-badge { transform: translateY(-3px); background: var(--orange); }
.trade-row-media:hover .trade-row-badge svg { color: #fff; }

/* ---- body ---- */
.trade-row-eyebrow {
  display: flex; align-items: center; gap: 9px; margin: 0 0 12px;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--orange);
}
.trade-row-eyebrow svg { width: 18px; height: 18px; }
.trade-row-body h3 {
  font-size: clamp(1.5rem, 1.9vw + 1.05rem, 2.15rem);
  line-height: 1.12; margin: 0 0 12px; color: var(--ink);
}
.trade-row-blurb { font-size: var(--t-lg); color: #5c6167; margin: 0 0 22px; max-width: 46ch; }

.trade-row-list {
  list-style: none; margin: 0 0 26px; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 22px;
  border-top: 1px solid var(--mist-2);
}
@media (max-width: 560px) { .trade-row-list { grid-template-columns: 1fr; } }
.trade-row-list li { min-width: 0; border-bottom: 1px solid var(--mist-2); }
.trade-row-list a,
.trade-row-list span {
  display: flex; align-items: center; gap: 10px; padding: 11px 2px;
  font-size: var(--t-base); font-weight: 600; color: var(--ink);
  transition: color .22s var(--ease), transform .22s var(--ease);
}
.trade-row-list span { color: #6d7379; font-weight: 500; }
.trade-row-list svg { width: 16px; height: 16px; flex: none; color: var(--orange); transition: transform .22s var(--ease); }
.trade-row-list span svg { color: #b6bbc0; }
.trade-row-list a:hover { color: var(--orange); transform: translateX(3px); }
.trade-row-list a:hover svg { transform: translateX(2px); }
.trade-row-list a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 3px; }

.trade-row-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--h-font); font-weight: 800; font-size: var(--t-sm);
  letter-spacing: .02em; text-transform: uppercase; color: var(--orange);
  padding-bottom: 4px; border-bottom: 2px solid transparent;
  transition: border-color .25s var(--ease), gap .25s var(--ease);
}
.trade-row-cta svg { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.trade-row-cta:hover { border-bottom-color: var(--orange); }
.trade-row-cta:hover svg { transform: translateX(4px); }
.trade-row-cta:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }

.trade-row-list li > * { opacity: 0; transform: translate3d(0, 8px, 0); }
.trade-row-body.in .trade-row-list li > * {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease),
              color .22s var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms + 180ms);
}

@media (max-width: 860px) {
  .trade-row { grid-template-columns: 1fr; gap: 24px; }
  /* Photo always leads on a phone — the flip only reads as intentional
     when there are two columns to flip between. */
  .trade-row--flip .trade-row-media { order: 0; }
  .trade-row-media { aspect-ratio: 16 / 10; }
}

@media (prefers-reduced-motion: reduce) {
  .trade-row-media img { transition: none; }
  .trade-row-media:hover img { transform: none; }
  .trade-row-list li > * { opacity: 1; transform: none; transition: none; }
}

/* Compact trade grid — the area-page counterpart to .trade-rows */
.trade-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.trade-tile {
  display: flex; align-items: flex-start; gap: 15px;
  padding: 20px 20px 20px 18px; background: var(--paper);
  border: 1px solid var(--mist-2); border-radius: var(--r-lg);
  border-left: 3px solid var(--mist-2);
  transition: border-left-color .28s var(--ease), box-shadow .28s var(--ease), transform .28s var(--ease);
}
.trade-tile:hover { border-left-color: var(--orange); box-shadow: var(--shadow); transform: translateY(-2px); }
.trade-tile:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.trade-tile-icon {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 9px; background: var(--mist); color: var(--orange);
  transition: background .28s var(--ease), color .28s var(--ease);
}
.trade-tile-icon svg { width: 21px; height: 21px; }
.trade-tile:hover .trade-tile-icon { background: var(--orange); color: #fff; }
.trade-tile-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.trade-tile-body strong { font-family: var(--h-font); font-size: var(--t-h4); color: var(--ink); line-height: 1.25; }
.trade-tile-blurb { font-size: var(--t-sm); color: #6d7379; line-height: 1.5; }
.trade-tile-count { font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); margin-top: 4px; }
.trade-tile-arw { width: 18px; height: 18px; margin-left: auto; flex: none; color: #b6bbc0; transition: transform .28s var(--ease), color .28s var(--ease); }
.trade-tile:hover .trade-tile-arw { color: var(--orange); transform: translateX(4px); }


/* ==========================================================
   Service / project photograph grid + lightbox
   ========================================================== */
.sgal {
  display: grid; gap: 10px; margin: 1.6em 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 620px) { .sgal { grid-template-columns: 1fr 1fr; } }
.sgal-item {
  position: relative; display: block; padding: 0; margin: 0; border: 0;
  background: var(--mist-2); border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 4 / 3; cursor: zoom-in; appearance: none;
}
.sgal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.sgal-item:hover img, .sgal-item:focus-visible img { transform: scale(1.06); }
.sgal-item:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.sgal-zoom {
  position: absolute; right: 10px; bottom: 10px;
  display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; background: rgba(22,24,26,.72); color: #fff;
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.sgal-zoom svg { width: 16px; height: 16px; }
.sgal-item:hover .sgal-zoom, .sgal-item:focus-visible .sgal-zoom { opacity: 1; transform: none; }

.lbx {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: rgba(10,11,12,.94);
  padding: clamp(12px, 4vw, 48px);
  animation: lbxIn .22s var(--ease) both;
}
@keyframes lbxIn { from { opacity: 0; } to { opacity: 1; } }
.lbx[hidden] { display: none; }
.lbx-figure { margin: 0; max-width: min(1400px, 100%); max-height: 100%; display: grid; place-items: center; }
.lbx-img {
  max-width: 100%; max-height: calc(100vh - clamp(80px, 14vw, 150px));
  width: auto; height: auto; border-radius: var(--r-lg);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.lbx-btn {
  position: absolute; appearance: none; border: 0; cursor: pointer;
  background: rgba(255,255,255,.09); color: #fff;
  width: 48px; height: 48px; border-radius: 50%;
  font-size: 26px; line-height: 1; display: grid; place-items: center;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.lbx-btn:hover { background: var(--orange); }
.lbx-btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.lbx-close { top: 18px; right: 18px; font-size: 30px; }
.lbx-prev { left: clamp(8px, 2vw, 28px); }
.lbx-next { right: clamp(8px, 2vw, 28px); }
.lbx-count {
  position: absolute; left: 0; right: 0; bottom: clamp(12px, 2.5vw, 26px);
  margin: 0; text-align: center; color: #b9bec3;
  font-size: var(--t-sm); font-variant-numeric: tabular-nums;
}
body.lbx-open { overflow: hidden; }
/* The sticky phone bar and the header both sit above the page; while the
   viewer is open they would sit on top of the photograph. */
body.lbx-open .callbar, body.lbx-open .hdr, body.lbx-open .topbar { display: none; }
@media (prefers-reduced-motion: reduce) {
  .lbx { animation: none; }
  .sgal-item img, .sgal-zoom { transition: none; }
  .sgal-item:hover img { transform: none; }
}


/* ==========================================================
   Service landing page — offer, proof and a form above the
   fold, then scope, photographs, process and questions.
   ========================================================== */
.svc-hero { position: relative; background: var(--ink); overflow: hidden; }
.svc-hero-bg { position: absolute; inset: 0; }
.svc-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.svc-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(22,24,26,.96) 0%, rgba(22,24,26,.9) 42%, rgba(22,24,26,.6) 100%),
    linear-gradient(to top, rgba(22,24,26,.5) 0%, rgba(22,24,26,0) 34%);
}
.svc-hero-inner {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 420px);
  gap: clamp(28px, 4vw, 64px); align-items: center;
  padding-block: clamp(36px, 4.5vw, 68px) clamp(40px, 5vw, 76px);
}
@media (max-width: 980px) { .svc-hero-inner { grid-template-columns: 1fr; } }

.svc-hero-copy .crumbs { margin-bottom: 18px; }
.svc-hero-copy .crumbs, .svc-hero-copy .crumbs a { color: #9aa1a8; }
.svc-hero-copy .crumbs a:hover { color: var(--amber); }
.svc-hero h1 { color: #fff; font-size: var(--t-h1); max-width: 18ch; }
.svc-hero-lead { color: #ccd2d8; font-size: var(--t-lg); margin: 14px 0 22px; max-width: 52ch; }
.svc-hero-ticks {
  list-style: none; margin: 0 0 26px; padding: 0;
  display: grid; gap: 8px 24px; grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 560px) { .svc-hero-ticks { grid-template-columns: 1fr; } }
.svc-hero-ticks li {
  display: flex; align-items: flex-start; gap: 9px;
  color: #e4e8eb; font-size: var(--t-sm); font-weight: 600; line-height: 1.4;
}
.svc-hero-ticks svg { width: 17px; height: 17px; flex: none; color: var(--orange); margin-top: 2px; }
.svc-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.svc-hero-note {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin: 0; color: #99a0a7; font-size: var(--t-sm);
}
.svc-hero-note svg { width: 16px; height: 16px; color: var(--amber); flex: none; }

/* The form card is designed dark (white heading, pale labels) — keep it that
   way and lift it off the hero with a shadow and a hairline instead. */
.svc-hero-form .form-card {
  box-shadow: 0 26px 64px rgba(0,0,0,.46);
  border: 1px solid rgba(255,255,255,.1);
}
@media (max-width: 980px) { .svc-hero-form { max-width: 560px; } }

/* What is included */
.incl-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.incl {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 18px 20px; background: var(--paper);
  border: 1px solid var(--mist-2); border-left: 3px solid var(--orange);
  border-radius: var(--r-lg);
  font-size: var(--t-base); font-weight: 600; color: var(--ink); line-height: 1.45;
  transition: box-shadow .28s var(--ease), transform .28s var(--ease);
}
.incl:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.incl svg { width: 19px; height: 19px; flex: none; color: var(--orange); margin-top: 2px; }

/* Detail blocks — prose without the article column */
.svc-detail {
  display: grid; gap: clamp(18px, 2.5vw, 30px);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.svc-detail-item h3 { font-size: var(--t-h3); color: var(--ink); margin: 0 0 10px; }
.svc-detail-item p { margin: 0; color: #5c6167; font-size: var(--t-base); line-height: 1.7; }

/* Sibling services, full width rather than in a sidebar */
.trade-context-list.wide {
  display: grid; gap: 8px 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  list-style: none; margin: 0; padding: 0;
}
.chips.center { justify-content: center; }


/* Before/after as a looping clip. Plays only while on screen, and never
   auto-plays for anyone who has asked for reduced motion. */
.ba-video .ba-stage { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--ink); }
/* Fill the stage the sliders use (4:3) rather than the clip's own 16:9 —
   these sit side by side in the same grid, so a shorter video item leaves
   a hole and strands the play button below the frame. */
.ba-vid { display: block; width: 100%; height: 100%; object-fit: cover; }
.ba-video .ba-tag { position: absolute; top: 14px; z-index: 2; }
.ba-video .ba-tag-before { left: 14px; }
.ba-video .ba-tag-after { right: 14px; }
.ba-vid-toggle {
  position: absolute; right: 14px; bottom: 14px; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.35); background: rgba(22,24,26,.6);
  backdrop-filter: blur(6px); display: grid; place-items: center;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.ba-vid-toggle:hover { background: var(--orange); border-color: var(--orange); }
.ba-vid-toggle:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
/* pause bars by default; a single triangle when paused */
.ba-vid-ico { width: 12px; height: 13px; border-left: 4px solid #fff; border-right: 4px solid #fff; }
.ba-video.is-paused .ba-vid-ico {
  width: 0; height: 0; border: 0; margin-left: 3px;
  border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent;
}
@media (prefers-reduced-motion: reduce) { .ba-vid { }  /* JS holds it on the poster */ }


/* Reveal animation */
[data-rv] {
  opacity: 0; transform: translate3d(0, 26px, 0);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
[data-rv].in { opacity: 1; transform: none; }
[data-rv-d="1"] { transition-delay: .09s; }
[data-rv-d="2"] { transition-delay: .18s; }
[data-rv-d="3"] { transition-delay: .27s; }
[data-rv-d="4"] { transition-delay: .36s; }
@media (prefers-reduced-motion: reduce) {
  [data-rv] { opacity: 1 !important; transform: none !important; transition: none; }
}

/* Direction-aware reveal for the alternating trade rows. Declared after the
   base [data-rv] rule on purpose — same specificity, so source order decides. */
[data-rv-x="l"] { transform: translate3d(-46px, 0, 0); }
[data-rv-x="r"] { transform: translate3d(46px, 0, 0); }
[data-rv-x].in { transform: none; }
@media (max-width: 860px) {
  [data-rv-x="l"], [data-rv-x="r"] { transform: translate3d(0, 26px, 0); }
  [data-rv-x].in { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-rv-x="l"], [data-rv-x="r"] { transform: none !important; }
}

/* Legal pages */
.legal h2 { font-size: var(--t-h2); margin-top: 1.9em; }
.legal p, .legal li { color: #4a4f55; font-size: var(--t-base); }

/* Captioned in-article figure */
.prose-fig { margin: 1.6em 0; }
.prose-fig img { margin: 0 0 10px; }
.prose-fig figcaption { font-size: var(--t-sm); color: #7c8288; line-height: 1.5; }

/* ==========================================================
   Hero trade list — every trade named in the hero, each one
   linked to its block on the services page.
   ========================================================== */
.hero-lead { margin-bottom: var(--sp-5); }
.hero-inner > :nth-child(6) { animation-delay: .52s; }

.hero-trades { margin: 0 0 var(--sp-6); max-width: 720px; }
.hero-trades-label {
  margin: 0 0 var(--sp-3);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--amber);
}
.hero-trades-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 8px 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) { .hero-trades-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .hero-trades-list { grid-template-columns: 1fr; gap: 6px; } }
.hero-trades-list li { min-width: 0; }
.hero-trades-list a,
.hero-trades-list span {
  display: flex; align-items: center; gap: 9px;
  color: #e8ebee; font-size: var(--t-sm); font-weight: 600; line-height: 1.35;
  padding: 3px 0; transition: color .2s var(--ease);
}
.hero-trades-list a:hover { color: #fff; }
.hero-trades-list a:hover svg { color: #fff; }
.hero-trades-list svg {
  width: 17px; height: 17px; flex: none; color: var(--orange);
  transition: color .2s var(--ease);
}
.hero-trades-list a:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 3px; }

.hero-badges li { color: #aab1b8; font-weight: 500; }
.hero-badges svg { width: 17px; height: 17px; }

/* ==========================================================
   Service cards — say what is actually included, not just a
   name and a stock line of prose.
   ========================================================== */
.svc-points {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 5px;
}
.svc-points li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: var(--t-sm); line-height: 1.45; color: #5c6167;
}
.svc-points svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--orange); }

/* Anchor targets sit under the sticky header */
.trade-block { scroll-margin-top: 110px; }

/* ==========================================================
   Conversion furniture
   ========================================================== */
.callbar a:first-child { border-right: 1px solid rgba(255,255,255,.14); }
.callbar a:focus-visible { outline: 2px solid var(--amber); outline-offset: -4px; }

.form-note strong { color: var(--ink); }
.field label .opt { font-weight: 500; color: #8b9098; text-transform: none; letter-spacing: 0; }

/* Response promise under the quote form heading */
/* Lives inside .form-card, which is always dark — light text, not ink. */
.form-promise {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 var(--sp-4); padding: 10px 12px;
  background: rgba(232,120,30,.16); border-left: 3px solid var(--orange);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: var(--t-sm); font-weight: 600; color: #f1f3f5;
}
.form-promise svg { width: 17px; height: 17px; color: var(--orange); flex: none; }


/* ==========================================================
   Google Ads landing pages (/ads/). The service page look with the
   navigation removed, the search terms echoed under the headline and
   the header button kept visible further down the breakpoints, since
   there is no menu for it to make room for.
   ========================================================== */
.ad-page .nav, .ad-page .burger { display: none; }
.ad-page .hdr-cta { margin-left: auto; }
@media (max-width: 1160px) { .ad-page .hdr-cta .btn { display: inline-flex; } }
@media (max-width: 640px)  { .ad-page .hdr-cta .btn { display: none; } }

.ad-kw { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.ad-kw li {
  font-size: var(--t-xs); font-weight: 600; color: #c9ced3; line-height: 1.2;
  border: 1px solid rgba(255,255,255,.18); border-radius: 100px; padding: 6px 12px;
}

/* Areas as plain chips — a landing page should not leak clicks to area pages */
.chips span {
  display: block; padding: 8px 15px; background: #fff; border: 1px solid var(--mist-2);
  border-radius: 100px; font-size: .87rem; font-weight: 600; color: var(--ink);
}

.ad-ba { max-width: 980px; margin: 0 auto; }

/* Proof blocks on the ads landing pages */
.ad-proofline {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin: 12px 0 0; color: #dfe3e7; font-size: var(--t-sm); font-weight: 600;
}
.ad-proofline svg { width: 16px; height: 16px; color: var(--amber); flex: none; }
.ad-cases { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .ad-cases { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .ad-cases { grid-template-columns: 1fr; } }
.ad-case .case-body h3 { font-size: var(--t-h4); }
.ad-case .svc-more { margin-top: auto; }
.ad-social .ad-social-inner {
  display: grid; grid-template-columns: 1.4fr auto; gap: 34px; align-items: center;
}
@media (max-width: 860px) { .ad-social .ad-social-inner { grid-template-columns: 1fr; } }
.ad-social h2 { color: #fff; margin-bottom: .35em; }
.ad-social p { color: #ccd2d8; max-width: 54ch; margin: 0; }
.ad-social-links { display: flex; flex-wrap: wrap; gap: 12px; }


/* ---- Photo heroes on phones ----
   Stacked, these heroes run several screens tall, and a full-bleed 4:3 photo was
   cropped to a sliver (a 400px-wide strip of a 1,750px-tall box). Keep the photo
   to the top of the hero, at a shape it survives, and fade it into the ink. */
@media (max-width: 980px) {
  .hero-bg, .svc-hero-bg { bottom: auto; height: min(100%, 125vw); }
  .hero-bg img, .svc-hero-bg img {
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent);
    mask-image: linear-gradient(to bottom, #000 62%, transparent);
  }
}

/* ---- Reviews ---- */
.rev-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 36px;
  background: var(--mist); border: 1px solid var(--mist-2); border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 32px); margin-bottom: var(--sp-7);
}
.rev-summary p { flex: 1 1 280px; margin: 0; color: #5b6065; }
.rev-score { display: flex; align-items: center; gap: 14px; }
.rev-score > strong { font-family: var(--h-font); font-weight: 800; font-size: clamp(2.6rem, 5vw, 3.4rem); line-height: 1; color: var(--ink); }
.rev-score-note { display: block; font-size: var(--t-sm); color: #6b7178; margin-top: 4px; }
.rev-stars { display: inline-flex; gap: 2px; color: var(--amber); }
.rev-stars svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; }
.rev-stars-lg svg { width: 22px; height: 22px; }

.rev-grid { columns: 3 300px; column-gap: var(--sp-5); }
.rev {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  display: flex; flex-direction: column; gap: 14px;
  margin: 0 0 var(--sp-5); padding: 26px 24px 22px;
  background: #fff; border: 1px solid var(--mist-2); border-top: 3px solid var(--orange);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.rev-text { margin: 0; padding: 0; border: 0; }
.rev-text p { margin: 0 0 .8em; font-size: var(--t-base); line-height: 1.65; color: #34383c; }
.rev-text p:last-child { margin-bottom: 0; }
.rev-by { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--mist-2); }
.rev-avatar {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--amber); font-family: var(--h-font); font-weight: 800;
}
.rev-who { display: flex; flex-direction: column; min-width: 0; }
.rev-who strong { font-family: var(--h-font); font-weight: 800; font-size: var(--t-sm); color: var(--ink); }
.rev-meta { display: flex; flex-wrap: wrap; gap: 0 6px; font-size: var(--t-xs); color: #6d7379; }
.rev-meta a { color: var(--orange); font-weight: 600; }
.rev-src { margin-left: auto; flex: none; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8f959b; }
@media (max-width: 420px) { .rev-src { display: none; } }