@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/schibsted-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/schibsted-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/schibsted-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/schibsted-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/schibsted-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    /* One family, teal. The rust CTA was doing the same job the amber did —
       a warm accent fighting a cool brand. Contrast now comes from depth
       rather than hue, which reads considerably more expensive. */
    --ink:      #14201F;   /* near-black with a green cast */
    --deep:     #21484E;   /* deep teal — dark surfaces, buttons */
    --deep-2:   #16302F;   /* deepest — footer */
    --sky:      #4E888F;   /* the brand teal */
    --sky-soft: #EDF4F4;
    --glass:    #D3E3E3;
    --amber:    #21484E;   /* kept as a token so nothing breaks; now deep teal */
    --amber-dk: #14201F;
    --grey:     #5E7273;
    --line:     #DEE9E8;
    --bg:       #F7FAFA;
    --white:    #ffffff;
    --ok:       #2F7D5B;
    --font: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }
  html { scroll-behavior: smooth; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink); background: var(--white); line-height: 1.6;
  }
  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; display: block; }
  .wrap { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-weight: 700; font-size: 16px; padding: 14px 24px; border-radius: 10px;
    border: 2px solid transparent; cursor: pointer; transition: transform .12s, box-shadow .12s;
  }
  .btn-primary { background: var(--amber); color: #23180a; box-shadow: 0 6px 18px rgba(246,166,35,.32); }
  .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(246,166,35,.42); }
  .btn-call { background: var(--deep); color: #fff; }
  .btn-call:hover { background: var(--deep-2); }
  .btn-ghost { border-color: rgba(255,255,255,.5); color: #fff; }

  /* ── Top bar ── */
  header.site { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid var(--line); }
  /* header only — <footer class="site"> also matches ".site", and this rule
     was forcing the footer into a 66px flex row: columns rendered above the
     dark band, overflowed out the bottom, and the copyright sat beside them
     instead of below. */
  header.site .wrap { display: flex; align-items: center; justify-content: space-between; height: 66px; }
  .brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 19px; color: var(--deep); letter-spacing: .2px; }
  .brand .mark { width: 34px; height: 34px; }
  .brand-text { display: flex; flex-direction: column; line-height: 1.1; }
  .brand-text small { font-size: 10px; font-weight: 600; color: var(--sky); letter-spacing: .8px; text-transform: uppercase; margin-top: 1px; }
  .top-actions { display: flex; align-items: center; gap: 14px; }
  .top-phone { font-weight: 800; color: var(--deep); font-size: 18px; display: flex; align-items: center; gap: 8px; }
  .top-phone small { display: block; font-size: 11px; font-weight: 600; color: var(--grey); letter-spacing: .3px; }
  nav.links { display: none; gap: 24px; font-weight: 600; color: var(--ink); }
  nav.links a:hover { color: var(--deep); }
  @media (min-width: 880px) { nav.links { display: flex; } }

  /* ── Hero ── */
  .hero { background: linear-gradient(160deg, var(--deep) 0%, var(--deep-2) 60%, #072b3d 100%); color: #fff; position: relative; overflow: hidden; }
  .hero::after { content: ""; position: absolute; inset: 0; background:
      linear-gradient(115deg, transparent 40%, rgba(255,255,255,.06) 40%, rgba(255,255,255,.06) 46%, transparent 46%),
      linear-gradient(115deg, transparent 60%, rgba(255,255,255,.05) 60%, rgba(255,255,255,.05) 64%, transparent 64%);
    pointer-events: none; }
  .hero .wrap { position: relative; z-index: 2; display: grid; gap: 36px; padding: 56px 20px 60px; }
  @media (min-width: 920px) { .hero .wrap { grid-template-columns: 1.1fr .9fr; align-items: start; padding: 72px 20px 80px; } }
  .eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.12); color: #dff1f9; font-weight: 700; font-size: 13px; padding: 7px 14px; border-radius: 999px; letter-spacing: .4px; }
  .hero h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.12; font-weight: 800; margin: 18px 0 14px; }
  .hero h1 span { color: #ffd489; }
  .hero p.lede { font-size: 18px; color: #d5e9f2; max-width: 540px; }
  .hero .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
  /* hero only — service pages use <p class="trust"> for a plain credentials
     line, and this was silently making that paragraph a flex container */
  .hero .trust { display: flex; flex-wrap: wrap; gap: 18px 26px; margin-top: 30px; }
  .hero .trust div { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 14px; color: #e6f3f9; }
  .hero .trust svg { flex-shrink: 0; }

  /* ── Quote card ── */
  .quote-card { background: #fff; color: var(--ink); border-radius: 16px; padding: 26px; box-shadow: 0 20px 50px rgba(4,26,38,.35); }
  .quote-card h2 { font-size: 21px; color: var(--deep); }
  .quote-card .sub { color: var(--grey); font-size: 14px; margin: 4px 0 18px; }
  .field { margin-bottom: 13px; }
  .field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 5px; }
  .field input, .field select, .field textarea {
    width: 100%; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 9px;
    font-size: 15px; font-family: inherit; color: var(--ink); background: #fff; outline: none; transition: border-color .15s;
  }
  .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--sky); }
  .field textarea { resize: vertical; min-height: 74px; }
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .hp { position: absolute; left: -9999px; }
  .form-note { font-size: 12px; color: var(--grey); margin-top: 10px; text-align: center; }
  #form-msg { font-size: 14px; font-weight: 600; margin-top: 12px; padding: 11px 14px; border-radius: 9px; display: none; }
  #form-msg.ok { display: block; background: #e6f7ee; color: #12723f; }
  #form-msg.err { display: block; background: #fdeaea; color: #b02020; }
  .quote-card .btn-primary { width: 100%; margin-top: 6px; }

  /* ── Sections ── */
  section { padding: 64px 0; }
  .section-head { text-align: center; max-width: 680px; margin: 0 auto 44px; }
  .section-head .kicker { color: var(--sky); font-weight: 800; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; }
  .section-head h2 { font-size: clamp(26px, 4vw, 36px); font-weight: 800; color: var(--ink); margin: 8px 0 12px; }
  .section-head p { color: var(--grey); font-size: 17px; }

  /* ── Services ── */
  .services { display: grid; gap: 20px; grid-template-columns: 1fr; }
  @media (min-width: 640px) { .services { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 940px) { .services { grid-template-columns: repeat(3, 1fr); } }
  .service { border: 1px solid var(--line); border-radius: 14px; padding: 26px 24px; background: var(--white); transition: box-shadow .15s, transform .15s, border-color .15s; }
  .service:hover { box-shadow: 0 12px 30px rgba(14,77,107,.10); transform: translateY(-3px); border-color: var(--glass); }
  .service .ic { width: 48px; height: 48px; border-radius: 12px; background: var(--sky-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
  .service h3 { font-size: 19px; color: var(--deep); margin-bottom: 8px; }
  .service p { color: var(--grey); font-size: 15px; }

  /* ── Why ── */
  .why { background: var(--bg); }
  .why-grid { display: grid; gap: 22px; grid-template-columns: 1fr; }
  @media (min-width: 720px) { .why-grid { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 980px) { .why-grid { grid-template-columns: repeat(4, 1fr); } }
  .why-item { text-align: center; padding: 10px; }
  .why-item .n { font-size: 34px; font-weight: 800; color: var(--deep); }
  .why-item h4 { font-size: 17px; margin: 6px 0; }
  .why-item p { color: var(--grey); font-size: 14px; }

  /* ── Area ── */
  .area-band { background: linear-gradient(135deg, var(--deep) 0%, var(--deep-2) 100%); color: #fff; border-radius: 18px; padding: 44px 32px; text-align: center; }
  .area-band h2 { font-size: 28px; margin-bottom: 10px; }
  .area-band p { color: #cfe6f0; max-width: 620px; margin: 0 auto 18px; }
  .area-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
  .area-list span { background: rgba(255,255,255,.12); padding: 8px 15px; border-radius: 999px; font-size: 14px; font-weight: 600; }

  /* ── Reviews ── */
  .reviews { display: grid; gap: 20px; grid-template-columns: 1fr; }
  @media (min-width: 780px) { .reviews { grid-template-columns: repeat(3, 1fr); } }
  .review { border: 1px solid var(--line); border-radius: 14px; padding: 24px; background: var(--white); }
  .stars { color: var(--amber); font-size: 18px; letter-spacing: 2px; margin-bottom: 10px; }
  .review p { font-size: 15px; color: var(--ink); }
  .review .who { margin-top: 14px; font-weight: 700; font-size: 14px; color: var(--deep); }

  /* ── FAQ ── */
  .faq { max-width: 780px; margin: 0 auto; }
  details { border: 1px solid var(--line); border-radius: 12px; padding: 4px 20px; margin-bottom: 12px; background: var(--white); }
  details summary { cursor: pointer; font-weight: 700; font-size: 17px; padding: 16px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; }
  details summary::-webkit-details-marker { display: none; }
  details summary::after { content: "+"; color: var(--sky); font-size: 24px; font-weight: 400; }
  details[open] summary::after { content: "−"; }
  details p { padding: 0 0 18px; color: var(--grey); font-size: 15px; }

  /* ── CTA strip ── */
  .cta-strip { background: var(--amber); border-radius: 18px; padding: 40px 32px; text-align: center; }
  .cta-strip h2 { font-size: 28px; color: #23180a; margin-bottom: 8px; }
  .cta-strip p { color: #4a3818; font-weight: 600; margin-bottom: 20px; }
  .cta-strip .btn-call { font-size: 18px; }

  /* ── Footer ── */
  footer.site { background: var(--ink); color: #b9c9d1; padding: 48px 0 30px; }
  .foot-grid { display: grid; gap: 30px; grid-template-columns: 1fr; }
  @media (min-width: 760px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
  footer.site h4 { color: #fff; font-size: 15px; margin-bottom: 14px; letter-spacing: .5px; text-transform: uppercase; }
  footer.site a:hover { color: #fff; }
  footer.site .foot-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; color: #fff; margin-bottom: 12px; }
  footer.site ul { list-style: none; display: grid; gap: 8px; font-size: 14px; }
  .foot-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 34px; padding-top: 20px; font-size: 13px; color: #8ba0aa; text-align: center; }

  /* ── Sticky mobile call bar ── */
  .mobile-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); box-shadow: 0 -4px 16px rgba(0,0,0,.12); }
  .mobile-bar a { padding: 15px; text-align: center; font-weight: 800; font-size: 16px; background: #fff; }
  .mobile-bar a.call { background: var(--deep); color: #fff; }
  .mobile-bar a.quote { background: var(--amber); color: #23180a; }
  body { padding-bottom: 56px; }
  @media (min-width: 880px) { .mobile-bar { display: none; } body { padding-bottom: 0; } }

  /* ---- credentials ---- */
  .creds { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .creds-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; margin-top: 26px; }
  .cred { border: 1px solid var(--line); border-radius: 12px; padding: 22px; background: var(--bg); }
  .cred .badge { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 12px;
                 letter-spacing: 1.4px; text-transform: uppercase; color: var(--deep);
                 background: var(--sky-soft); border-radius: 30px; padding: 5px 12px; margin-bottom: 12px; }
  .cred h4 { margin: 0 0 8px; font-size: 17px; color: var(--ink); }
  .cred p { margin: 0; font-size: 14.5px; color: var(--grey); line-height: 1.62; }
  .cred .ref { display: block; margin-top: 10px; font-size: 12.5px; color: var(--deep); font-weight: 700; }
  .creds-foot { margin-top: 22px; font-size: 14px; color: var(--grey); text-align: center; }

/* ---------- service pages ---------- */
.svc { padding: 34px 0 60px; background: var(--bg); }
.crumbs { font-size: 13px; color: var(--grey); margin-bottom: 22px; }
.crumbs a { color: var(--deep); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { margin: 0 6px; color: var(--line); }

.svc-body { background: var(--white); border: 1px solid var(--line); border-radius: 14px;
            padding: clamp(22px, 4vw, 48px); max-width: 860px; }
.svc-body h1 { font-size: clamp(26px, 4.4vw, 38px); line-height: 1.15; margin: 0 0 14px; color: var(--ink); }
.svc-body .lede { font-size: 18px; line-height: 1.65; color: var(--ink); margin: 0 0 8px; }
.svc-body h2 { font-size: 20px; margin: 30px 0 8px; color: var(--deep); }
.svc-body p { color: var(--grey); line-height: 1.7; margin: 0 0 12px; max-width: 68ch; }

.svc-cta { margin: 36px 0 0; padding: 24px; background: var(--sky-soft);
           border: 1px solid var(--glass); border-radius: 12px; }
.svc-cta h2 { margin-top: 0; }
.svc-cta .btn { display: inline-block; background: var(--deep); color: #fff; text-decoration: none;
                padding: 12px 20px; border-radius: 9px; font-weight: 700; margin: 4px 6px 4px 0; }
.svc-cta .btn.ghost { background: transparent; color: var(--deep); border: 2px solid var(--deep); }
.svc-cta .trust { font-size: 13px; color: var(--deep); font-weight: 600; margin: 10px 0 0; }

/* Service-page FAQ.
   These used to add a SECOND "+" via ::before while the global summary rule was
   already adding one via ::after — and because that rule is a flex row with
   space-between, three children pushed the question into the middle of the box.
   Two plus signs and centred text. The service pages now simply inherit the
   same treatment as the area pages, which was right all along. */
.svc-faq { margin-top: 34px; }
.svc-faq details p { margin: 10px 0 2px; }

.svc-related { margin-top: 34px; }
.rel-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.rel { display: inline-block; padding: 9px 15px; border: 1px solid var(--line); border-radius: 30px;
       text-decoration: none; color: var(--deep); font-size: 14px; font-weight: 600; background: var(--bg); }
.rel:hover { border-color: var(--sky); background: var(--sky-soft); }

.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 14px; margin-top: 24px; }

.svc-card { display: block; padding: 20px; border: 1px solid var(--line); border-radius: 12px;
            text-decoration: none; background: var(--bg); }
.svc-card:hover { border-color: var(--sky); background: var(--sky-soft); }
.svc-card h3 { margin: 0 0 6px; font-size: 17px; color: var(--deep); }


/* Numbered steps. The number is a real ordinal here - it is a sequence you go
   through, not decoration. */
/* ---- Mark's own work ----------------------------------------------------
   A band of his six real jobs. Nothing stock is allowed in here; the whole
   point is that the strip is honestly all his, which is the one thing the
   national lead-gen sites can't reproduce. */
.work-note { margin: -6px 0 14px; color: var(--grey); font-size: 14px; }
.work-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
              margin: 0 0 34px; }
.work-strip figure { margin: 0; border: 1px solid var(--line); border-radius: 10px;
                     overflow: hidden; background: var(--white); }
.work-strip img { display: block; width: 100%; height: 118px; object-fit: cover; }
.work-strip figcaption { padding: 9px 11px; font-size: 12.5px; color: var(--grey);
                         line-height: 1.45; }

/* ---- grouped service list ----------------------------------------------
   Replaced twelve identical photo cards. Twelve links in about the height of
   two of those cards, grouped the way the site's own nav groups them, with one
   drawn icon set so a stock-versus-real clash can't happen. */
.sgroups { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 34px; margin: 18px 0 32px; }
.sgroup h3 { margin: 0 0 2px; font-size: 15px; color: var(--deep); }
.sgroup h3.mt { margin-top: 22px; }
.sgroup .sg-sub { margin: 0 0 10px; font-size: 13px; color: var(--grey); }
.sgroup ul { list-style: none; margin: 0; padding: 0; }
.sgroup li { border-top: 1px solid var(--line); }
.sgroup li:last-child { border-bottom: 1px solid var(--line); }
.sgroup a { display: flex; align-items: center; gap: 11px; padding: 10px 2px;
            text-decoration: none; color: var(--ink); font-size: 14.5px; font-weight: 600; }
.sgroup a:hover { color: var(--sky); }
.sgroup a:hover .arw { color: var(--sky); }
.sgroup .lbl { min-width: 0; }
.sgroup .arw { margin-left: auto; color: var(--glass); font-size: 16px; }
.ic { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 8px;
      background: var(--sky-soft); color: var(--deep); display: grid; place-items: center; }
.ic svg { width: 17px; height: 17px; }

/* The service you're already on. Stays in the list so the full range is still
   visible, but as text rather than a link back to this same page. */
.sgroup li.here .cur { display: flex; align-items: center; gap: 11px; padding: 10px 2px;
                       font-size: 14.5px; font-weight: 600; color: var(--grey); }
.sgroup li.here .ic { background: var(--glass); color: var(--deep); }
.sgroup li.here .arw { margin-left: auto; font-size: 12px; font-weight: 700;
                       letter-spacing: .04em; text-transform: uppercase; color: var(--sky); }

@media (max-width: 700px) {
  .sgroups { grid-template-columns: 1fr; gap: 22px; }
  .work-strip { grid-template-columns: repeat(2, 1fr); }
}

/* Two by two, not three-plus-an-orphan. There are four steps and the content
   column is 763px, so minmax(300px) lands on two rows of two. */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
         gap: 14px; margin: 22px 0 30px; counter-reset: step; }
.step { position: relative; padding: 18px 18px 18px 54px; border: 1px solid var(--line);
        border-radius: 12px; background: var(--bg); }
.step::before { counter-increment: step; content: counter(step);
        position: absolute; left: 16px; top: 17px; width: 26px; height: 26px;
        border-radius: 50%; background: var(--deep); color: #fff;
        font-size: 14px; font-weight: 700; display: grid; place-items: center; }
.step h3 { margin: 0 0 5px; font-size: 16px; color: var(--deep); min-height: 26px;
           display: flex; align-items: center; }
.step p { margin: 0; font-size: 14px; color: var(--grey); line-height: 1.55; }
.svc-card p { margin: 0; font-size: 14px; color: var(--grey); line-height: 1.55; }

.site-foot { background: var(--deep-2); color: #cfe1ea; padding: 26px 0; }
.site-foot a { color: #fff; }
.site-foot .small { font-size: 13px; opacity: .8; margin-top: 6px; }
.links a.on { color: var(--sky); font-weight: 800; }

/* ---------- grouped services menu ---------- */
.menu { position: relative; }
.menu-btn { font: inherit; font-weight: 600; color: var(--ink); background: none; border: 0;
            cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 6px; }
.menu-btn:hover { color: var(--deep); }
.menu-btn .caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
                   border-top: 5px solid currentColor; transition: transform .15s; }
.menu-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.menu-panel { position: absolute; top: calc(100% + 14px); left: -18px; z-index: 80;
              background: var(--white); border: 1px solid var(--line); border-radius: 14px;
              box-shadow: 0 18px 44px rgba(14,77,107,.16); padding: 22px 24px;
              display: grid; grid-template-columns: repeat(3, minmax(170px, 1fr)); gap: 8px 30px; }
.menu-panel[hidden] { display: none; }
.mcol h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: .6px; text-transform: uppercase;
           color: var(--deep); display: flex; flex-direction: column; }
.mcol h4 span { font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0;
                color: var(--grey); margin-top: 2px; }
.mcol a { display: block; padding: 5px 0; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.mcol a:hover { color: var(--sky); }
.menu-all { grid-column: 1 / -1; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
            font-size: 14px; font-weight: 700; color: var(--deep); }

/* hamburger + mobile panel */
.burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
          width: 42px; height: 38px; padding: 0 9px; background: var(--white);
          border: 1px solid var(--line); border-radius: 9px; cursor: pointer; }
.burger span { display: block; height: 2px; background: var(--deep); border-radius: 2px; }
.mnav { position: sticky; top: 64px; z-index: 55; background: var(--white);
        border-bottom: 1px solid var(--line); box-shadow: 0 12px 26px rgba(0,0,0,.08); }
.mnav[hidden] { display: none; }
.mnav .wrap { padding: 18px 20px 24px; display: grid; gap: 18px; }
.mnav .mcol a { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
body.nav-open { overflow: hidden; }

@media (min-width: 880px) {
  .burger, .mnav { display: none !important; }
}
@media (max-width: 879px) {
  .menu-panel { display: none !important; }
}

/* Below the nav breakpoint the fixed bottom bar already carries Call, so the
   header phone is a duplicate — dropping it gives the brand room to sit on
   one line beside the burger. */
@media (max-width: 879px) {
  .top-actions { display: none; }
}


/* ---------- typographic + surface refinement ---------- */
body { -webkit-font-smoothing: antialiased; letter-spacing: -0.003em; }

h1, h2, h3, h4 { letter-spacing: -0.021em; }
h2 { font-weight: 700; }

/* section headings had no rhythm — tighten the scale and give them air */
.section-head { max-width: 640px; margin: 0 auto 40px; text-align: center; }
.section-head h2 { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.18; margin: 8px 0 12px; color: var(--ink); }
.section-head p { color: var(--grey); font-size: 17px; line-height: 1.6; margin: 0; }
.kicker { color: var(--sky); font-weight: 700; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; }

/* cards: real depth instead of a hairline box */
.service, .why-item, .review {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(30,42,43,.04), 0 8px 24px -14px rgba(30,42,43,.18);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.service:hover {
  transform: translateY(-2px);
  border-color: var(--glass);
  box-shadow: 0 2px 4px rgba(30,42,43,.05), 0 18px 38px -18px rgba(30,42,43,.28);
}
.service h3 { color: var(--ink); letter-spacing: -0.018em; }
.service p { color: var(--grey); line-height: 1.62; }

/* buttons — the old amber was a generic conversion orange fighting the navy */
.btn-primary, .svc-cta .btn, button[type="submit"], .hero .btn {
  background: var(--amber); color: #fff; border: 0; font-weight: 700;
  box-shadow: 0 2px 10px -3px rgba(196,112,63,.55);
}
.btn-primary:hover, .svc-cta .btn:hover, button[type="submit"]:hover { background: var(--amber-dk); }
.svc-cta .btn.ghost { background: transparent; color: var(--deep); border: 2px solid var(--deep); box-shadow: none; }
.svc-cta .btn.ghost:hover { background: var(--sky-soft); }

/* service pages */
.svc-body { box-shadow: 0 1px 2px rgba(30,42,43,.04), 0 10px 30px -18px rgba(30,42,43,.22); }
.svc-body h1 { letter-spacing: -0.026em; }
.svc-body h2 { color: var(--deep); letter-spacing: -0.018em; }
.svc-cta { background: var(--sky-soft); border-color: var(--glass); }

/* line icons in the service cards */
.service .ic { color: var(--sky); background: var(--sky-soft); }
.service .ic svg { display: block; }

/* the "see everything" link, now the only thing under the cards */
.btn-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 700;
            color: var(--deep); font-size: 15.5px; }
.btn-link:hover { color: var(--sky); }

/* stop headings breaking one word onto a line of their own */
h1, h2, h3, .section-head h2, .hero h1 { text-wrap: balance; }

/* hero: one colour, one weight — let the size carry it */
.hero h1 { color: #fff; letter-spacing: -0.028em; line-height: 1.08; }
.hero h1 span { color: inherit; }   /* was #ffd489 — a single amber word
                                       mid-sentence dates the whole page */

/* icons were small and faint against the card */
.service .ic { width: 46px; height: 46px; border-radius: 12px; }
.service .ic svg { width: 22px; height: 22px; stroke-width: 1.7; }
.service h3 { font-size: 18.5px; font-weight: 700; }

/* eyebrow badge in the hero */
.eyebrow { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
           backdrop-filter: blur(2px); }

/* footer polish — the columns were readable but had no rhythm */
footer.site { background: var(--deep-2); color: #b6c9c9; padding: 52px 0 28px; }
footer.site .wrap { display: block; height: auto; }
.foot-grid { gap: 40px 30px; }
.foot-blurb { font-size: 14px; line-height: 1.62; max-width: 330px; margin: 0 0 14px; }
.foot-creds { font-size: 12.5px; line-height: 1.7; color: #8fa8a8; margin: 0; }
footer.site h4 { font-size: 12px; letter-spacing: 1.4px; color: #fff; margin-bottom: 15px; }
footer.site ul { gap: 10px; }
footer.site a { color: #cfe0e0; }
footer.site a:hover { color: #fff; text-decoration: underline; }
.foot-bottom { margin-top: 40px; padding-top: 20px; color: #7f9797; }

/* service pages had a big empty void under the related chips */
.svc-related { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.svc-related h2 { font-size: 16px; margin: 0 0 14px; color: var(--grey);
                  text-transform: uppercase; letter-spacing: 1.2px; }
.svc-body { padding-bottom: clamp(22px, 3vw, 34px); }


/* ---------- type system ---------- */
body { font-family: var(--font); font-size: 17px; line-height: 1.65; color: var(--ink); }
h1, h2, h3, h4, .brand, .btn, button { font-family: var(--font); }
h1 { font-weight: 800; letter-spacing: -0.032em; }
h2 { font-weight: 700; letter-spacing: -0.025em; }
h3, h4 { font-weight: 700; letter-spacing: -0.016em; }

.hero h1 { font-size: clamp(34px, 5.4vw, 60px); line-height: 1.04; }
.hero p.sub, .hero > .wrap p { font-size: clamp(17px, 1.7vw, 19px); line-height: 1.6; }
.section-head h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.12; }
.svc-body h1 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.08; }
.svc-body h2 { font-size: 22px; margin-top: 38px; }
.svc-body .lede { font-size: 19.5px; line-height: 1.6; color: var(--ink); }
.svc-body p { font-size: 16.5px; }

/* more air — the old layout was cramped */
section { padding: clamp(56px, 7vw, 96px) 0; }
.section-head { margin-bottom: clamp(34px, 4vw, 52px); }
.services { gap: 24px; }
.service { padding: 30px 28px; }

/* buttons: depth, not hue */
.btn-primary, .svc-cta .btn, button[type="submit"], .hero .btn, .btn.call {
  background: var(--deep); color: #fff; box-shadow: none;
  border-radius: 10px; padding: 14px 24px; font-weight: 600; letter-spacing: -0.01em;
  transition: background .16s ease, transform .16s ease;
}
.btn-primary:hover, .svc-cta .btn:hover, button[type="submit"]:hover { background: var(--ink); transform: translateY(-1px); }

/* ---------- top bar ---------- */
header.site { border-bottom: 1px solid var(--line); }
header.site .wrap { height: 76px; gap: 26px; }
nav.links { gap: 22px; font-size: 15.5px; font-weight: 500; margin-left: auto; }
nav.links > a, .menu-btn { color: var(--ink); position: relative; padding: 6px 0; }
nav.links > a::after, .menu-btn::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--sky); transform: scaleX(0); transform-origin: left;
  transition: transform .18s ease;
}
nav.links > a:hover::after, .menu-btn:hover::after { transform: scaleX(1); }
.top-actions { display: flex; align-items: center; gap: 16px; }
.top-phone { font-size: 17px; }
.top-phone small { color: var(--grey); }
.nav-cta {
  background: var(--deep); color: #fff; padding: 11px 20px; border-radius: 9px;
  font-weight: 600; font-size: 15px; white-space: nowrap; transition: background .16s;
}
.nav-cta:hover { background: var(--ink); color: #fff; }
@media (max-width: 1080px) { nav.links { gap: 16px; font-size: 14.8px; } .top-phone { display: none; } }

/* contact page cards */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
                gap: 16px; margin: 28px 0 8px; }
.contact-card { background: var(--sky-soft); border: 1px solid var(--glass);
                border-radius: 12px; padding: 22px; }
.contact-card h3 { font-size: 12px; letter-spacing: 1.3px; text-transform: uppercase;
                   color: var(--sky); margin: 0 0 10px; }
.contact-card .big { font-size: 19px; font-weight: 700; color: var(--ink); margin: 0 0 8px;
                     letter-spacing: -0.02em; word-break: break-word; }
.contact-card .big a { color: var(--ink); }
.contact-card .big a:hover { color: var(--sky); }
.contact-card p { font-size: 14.5px; margin: 0; line-height: 1.55; }

/* the headline was sitting straight on top of the sub-paragraph */
.hero h1 { margin: 20px 0 20px; }
.hero .wrap > div > p { max-width: 34em; }

/* sitemap + robots should know about the new pages */

/* ============ glass: the one visual idea ============
   The logo is built on a 45-degree lattice, so the page uses the same angle.
   Light raking across panes, edges catching it — restrained, not decorative. */

.hero { position: relative; overflow: hidden;
        background: linear-gradient(158deg, #2A5158 0%, #1B3B40 46%, #14201F 100%); }
.hero > * { position: relative; z-index: 2; }

/* pane edges — hairlines on the logo's angle */
.hero::before {
  content: ""; position: absolute; inset: -25%; z-index: 0;
  background:
    repeating-linear-gradient(45deg,
      transparent 0 118px,
      rgba(255,255,255,.030) 118px 119px,
      transparent 119px 240px),
    repeating-linear-gradient(45deg,
      transparent 0 356px,
      rgba(255,255,255,.055) 356px 358px,
      transparent 358px 720px);
}
/* raking light + a pane catching it */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(130% 90% at 82% -10%, rgba(160,215,215,.20), transparent 58%),
    linear-gradient(115deg, transparent 38%, rgba(255,255,255,.045) 46%, transparent 58%),
    linear-gradient(115deg, transparent 62%, rgba(255,255,255,.028) 69%, transparent 79%);
}

.hero .eyebrow { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16);
                 letter-spacing: .3px; font-weight: 500; }

/* the enquiry card should read as a pane of glass sitting on the dark */
.hero form, .hero .quote-card, .hero .card {
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.6) inset;
}

/* ============ credentials band ============ */
.proof-band { background: var(--ink); color: #dbe8e7; padding: 0; }
.proof-band .wrap { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 820px) { .proof-band .wrap { grid-template-columns: repeat(4, 1fr); } }
.proof-item { padding: 34px 18px; text-align: center; position: relative; }
.proof-item + .proof-item::before {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px;
  background: rgba(255,255,255,.13);
}
.proof-item b { display: block; font-size: clamp(26px, 3vw, 38px); font-weight: 800;
                letter-spacing: -0.035em; color: #fff; line-height: 1; }
.proof-item span { display: block; margin-top: 9px; font-size: 12.5px; letter-spacing: 1.2px;
                   text-transform: uppercase; color: #8fa9a7; font-weight: 500; }

/* ============ section rhythm ============ */
#services { background: var(--white); }
.why { background: var(--bg); }
#area { background: var(--white); }
#credentials { background: var(--bg); }

/* cards: lift the first one so the grid isn't four identical boxes */
.service:first-child { background: linear-gradient(170deg, #fff 0%, var(--sky-soft) 100%);
                       border-color: var(--glass); }

/* ---------- photo picker on the enquiry form ---------- */
.photo-field .opt { font-weight: 500; color: var(--grey); }
.photo-why { font-size: 13px; color: var(--grey); margin: 2px 0 10px; line-height: 1.5; }
.photo-pick {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 11px 16px; border: 1.5px dashed var(--glass); border-radius: 10px;
  background: var(--sky-soft); color: var(--deep); font-weight: 600; font-size: 15px;
  transition: border-color .15s, background .15s;
}
.photo-pick:hover { border-color: var(--sky); background: #e3eeee; }
.photo-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; align-items: flex-start; }
.photo-thumb {
  position: relative; margin: 0; width: 84px; border-radius: 9px; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg);
}
.photo-thumb img { display: block; width: 100%; height: 64px; object-fit: cover; }
.photo-thumb figcaption { font-size: 10.5px; color: var(--grey); text-align: center; padding: 3px 2px; }
.photo-remove {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; line-height: 1;
  border: 0; border-radius: 50%; background: rgba(20,32,31,.78); color: #fff;
  font-size: 15px; cursor: pointer; padding: 0;
}
.photo-remove:hover { background: var(--ink); }
.photo-hint { flex: 1 1 100%; font-size: 12.5px; color: var(--grey); margin: 2px 0 0; }
.estimate-note { font-size: 12.5px; color: var(--grey); line-height: 1.5; }
#form-msg { font-size: 14.5px; margin-top: 10px; }
#form-msg.ok { color: var(--ok); font-weight: 600; }
#form-msg.err { color: #a8442f; font-weight: 600; }

/* ============ recent work ============ */
/* Mark's photos are phone snaps taken on wet November days, so they get the
   same depth treatment as everything else: sit them on the pale surface,
   round them off, and let a soft shadow do the lifting rather than a border. */
#work { background: var(--bg); }
.work-grid {
  display: grid; gap: 22px; margin-top: 30px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.shot {
  margin: 0; background: var(--white); border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(20,32,31,.04), 0 8px 24px -12px rgba(20,32,31,.18);
}
.shot img { display: block; width: 100%; height: 230px; object-fit: cover; background: var(--glass); }
.shot figcaption { padding: 14px 16px 16px; font-size: 14px; line-height: 1.55; color: var(--grey); }
.shot figcaption b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 3px; font-size: 14.5px; }

/* ---------- before / after slider ---------- */
/* The base layer is the AFTER. The BEFORE is laid over it and clipped from the
   left edge to --pos, so at rest you read before-on-the-left, after-on-the-right,
   and dragging left wipes the old glass away. --pos is set inline so that with
   no JS at all this still renders as a legible 50/50 split. */
.ba { margin: 0; }
.ba-stage {
  --pos: 50%;
  position: relative; border-radius: 14px; overflow: hidden;
  background: var(--glass); touch-action: pan-y;
  box-shadow: 0 1px 2px rgba(20,32,31,.05), 0 18px 40px -18px rgba(20,32,31,.35);
  /* <picture> is inline, so it sits on a text baseline and leaves a few pixels
     of descender space under the base image. The stage ends up taller than the
     photo, the overlay stretches to fill it, and the two halves drift apart by
     exactly that much at the seam. Killing the line box fixes the alignment. */
  line-height: 0; font-size: 0;
}
.ba-stage picture { display: block; }
.ba-stage img {
  display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none;
}
/* Clipping the image with clip-path rather than sizing a wrapper means the
   overlay never has to know how wide the stage is — so no measuring in JS,
   and nothing squashes when the column resizes. */
.ba-over { position: absolute; inset: 0; }
.ba-over img {
  width: 100%; height: 100%; object-fit: cover;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  will-change: clip-path;
}

.ba-line {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 2px; margin-left: -1px; background: var(--white);
  box-shadow: 0 0 0 1px rgba(20,32,31,.18); pointer-events: none;
}
.ba-grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--white); color: var(--deep);
  display: grid; place-items: center;
  box-shadow: 0 2px 10px rgba(20,32,31,.35);
}
.ba-grip svg { display: block; }

.ba-tag {
  position: absolute; bottom: 12px; z-index: 2;
  font-size: 11.5px; line-height: 1.2; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; pointer-events: none;
  background: rgba(20,32,31,.72); color: #fff; backdrop-filter: blur(3px);
}
.ba-tag-b { left: 12px; }
.ba-tag-a { right: 12px; }

/* the real control: full-bleed, invisible, but focusable and keyboard-driven */
.ba-range {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%; margin: 0; padding: 0;
  appearance: none; -webkit-appearance: none; background: transparent;
  cursor: ew-resize; opacity: 0;
}
.ba-range::-webkit-slider-thumb { -webkit-appearance: none; width: 46px; height: 100%; }
.ba-range::-moz-range-thumb { width: 46px; height: 100%; border: 0; background: transparent; }
.ba-range:focus-visible { opacity: 1; outline: 3px solid var(--sky); outline-offset: 3px; }

.ba-cap { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--grey); }
.ba-cap b { color: var(--ink); font-weight: 600; }

/* work layout: slider on the left, supporting copy beside it */
.work-lead { display: grid; gap: 30px; align-items: center; grid-template-columns: 1.05fr .95fr; }
@media (max-width: 860px) { .work-lead { grid-template-columns: 1fr; } }
.work-lead h3 { font-size: 22px; line-height: 1.3; margin-bottom: 10px; color: var(--ink); }
.work-lead p { color: var(--grey); line-height: 1.65; margin-bottom: 12px; }

@media (prefers-reduced-motion: reduce) { .ba-over img { will-change: auto; } }

/* ---------- a photo of the actual work, inside a service page ---------- */
.svc-shot { margin: 26px 0 30px; }
.svc-shot picture { display: block; }
/* Mark shoots everything in portrait on a phone, so at full column width a
   single photo runs 800px tall and shoves the copy off the screen. Cap the
   height and crop rather than scaling the whole thing down — the subject is
   always the middle of the frame. */
.svc-shot img {
  display: block; width: 100%; height: auto; max-height: 460px;
  object-fit: cover; object-position: center;
  border-radius: 12px; background: var(--glass);
  box-shadow: 0 1px 2px rgba(20,32,31,.05), 0 14px 32px -16px rgba(20,32,31,.3);
}
.svc-shot figcaption {
  margin-top: 11px; font-size: 13.5px; line-height: 1.55; color: var(--grey);
  padding-left: 13px; border-left: 3px solid var(--glass);
}

/* ---------- area pages ---------- */
.area-chips { margin: 22px 0 30px; padding: 20px 22px; background: var(--sky-soft);
              border: 1px solid var(--glass); border-radius: 12px; }
.area-chips .chips-head { font-size: 15px; font-weight: 700; color: var(--deep);
                          margin: 0 0 12px; letter-spacing: 0; }
.chip { display: inline-block; margin: 0 6px 6px 0; padding: 5px 12px;
        background: var(--white); border: 1px solid var(--glass); border-radius: 999px;
        font-size: 13.5px; font-weight: 600; color: var(--deep); }
.area-list a { transition: background .15s, color .15s; }
.area-list a:hover { background: var(--deep); color: #fff; }
.area-more { margin-top: 18px; }

/* ============================================================
   Hero: photograph, not a gradient
   ============================================================
   The hero was ~1500px of flat teal with a barely-visible 45 degree motif —
   the largest area of the page, carrying nothing. That reads as a template
   because it is one. A photograph behind a heavy scrim fixes it, and it works
   even with a flat-light phone snap because the image is carrying depth and
   atmosphere, not detail.

   The scrim is two layers: a dark wash weighted to the left where the type
   sits, and a deep-teal multiply over the whole thing so the photo joins the
   brand palette instead of fighting it. */
.hero-bg { position: absolute; inset: 0; z-index: 0; display: block; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(11,26,28,.93) 0%, rgba(11,26,28,.80) 40%, rgba(11,26,28,.44) 72%, rgba(11,26,28,.26) 100%),
    linear-gradient(0deg, rgba(33,72,78,.40), rgba(33,72,78,.40));
}
/* the old 45 degree overlay sat above the photo and just muddied it */
.hero::after { opacity: .35; z-index: 1; }

/* Type: 60px at weight 800 across four lines was shouting. A forty-year
   tradesman doesn't need to shout — restraint reads as more expensive, and
   the photograph is doing the heavy lifting now. */
.hero h1 { font-size: clamp(31px, 4.2vw, 47px); font-weight: 700; letter-spacing: -0.022em;
           line-height: 1.1; max-width: 15ch; }
.hero p.lede { font-size: 17.5px; color: #cfe2e4; max-width: 46ch; }
.hero .wrap { padding-top: 64px; padding-bottom: 72px; }
@media (min-width: 920px) { .hero .wrap { padding-top: 84px; padding-bottom: 92px; } }

/* the eyebrow now carries three facts rather than a star and a claim */
.hero .eyebrow { font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
                 font-weight: 600; color: #cfe2e4; }

/* ---------- section rhythm ----------
   #work landed next to .why and #credentials, all three on the same pale
   surface — about 3000px of unbroken grey with no edges in it. Alternating
   them puts the rhythm back. */
#services    { background: var(--white); }
#work        { background: var(--bg); }
.why         { background: var(--white); }
#credentials { background: var(--bg); }
#area        { background: var(--white); }
#reviews     { background: var(--bg); }
#faq         { background: var(--white); }

/* Reviews are generated from however many real ones exist, so the grid can't
   assume three. auto-fit + a max width keeps two centred instead of stranding
   a gap where the third used to be, and still handles three when they arrive. */
@media (min-width: 780px) {
  .reviews {
    grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
    justify-content: center;
  }
}

/* ---------- explanatory diagram on a service page ---------- */
.svc-diagram { margin: 28px 0 30px; }
.svc-diagram svg {
  display: block; width: 100%; height: auto;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px;
}
.svc-diagram figcaption {
  margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--grey);
  padding-left: 13px; border-left: 3px solid var(--glass); max-width: 62ch;
}

/* Build credit — deliberately quiet. It sits under the copyright rather than
   beside it so it reads as a signature, not a second claim on the business. */
.foot-bottom .built { display: block; margin-top: 7px; font-size: 12px;
                      color: rgba(255,255,255,.42); letter-spacing: .01em; }