/* ===== SELF-HOSTED WEBFONTS =====
   Previously loaded from fonts.googleapis.com, which sent every visitor's IP
   address to Google. These are served from our own origin instead.

   Both families are licensed under the SIL Open Font License 1.1, which
   permits redistribution — see /fonts/LICENSE.md.

   Source Sans 3 is a variable font, so one file covers weights 300-600.
   Subsets are latin and latin-ext only; unicode-range means latin-ext is
   fetched solely when a page actually uses one of those characters. */

@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dm-serif-display-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dm-serif-display-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/source-sans-3-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/source-sans-3-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Sow HR — shared stylesheet.
   Loaded by index.html and for-consultants.html. Keep page-specific
   rules out of here; anything added is served to every page. */

:root {
    /* Tells the browser to theme scrollbars, form controls and the
       canvas to match, so native UI doesn't stay stuck in light. */
    color-scheme: only light;

    /* Brand palette — "Sage & Stone".
       --green / --sage / --sage-light / --stone / --ink are the five
       brand colours exactly as supplied; the rest are derived tints.
       --green-text is a slightly deepened green used ONLY for small
       text on tinted backgrounds, where brand --green falls below the
       4.5:1 WCAG AA threshold (it reaches just 4.28:1 on --stone-mid).
       Never put white text on --sage: that pairing is 2.98:1. */
    --green: #4e7a5e;
    --green-text: #456e54;
    --green-hover: #3f6a4d;
    --sage: #7a9e85;
    --sage-light: #c8d8cc;
    --green-pale: rgba(78, 122, 94, 0.08);
    --green-glow: rgba(122, 158, 133, 0.38);
    --stone: #e8e2d9;
    --stone-mid: #f2efe8;
    --stone-pale: #faf8f3;
    --ink: #3a3530;
    --text: #4a443d;
    --text-light: #6b665c;

    /* Semantic tokens — these are what the rules below consume, so the
       dark scheme can be expressed purely as a token override. */
    --surface: #faf8f3;          /* cards/forms raised above a section */
    --chip: #f2efe8;             /* pills sitting on the page bg */
    --input-bg: #ffffff;
    --on-green: #ffffff;         /* text on a --green fill */
    --footer-bg: #3a3530;
    --nav-bg: rgba(250, 248, 243, 0.92);
    --hairline: rgba(78, 122, 94, 0.08);
    --shadow-sm: rgba(78, 122, 94, 0.06);
    --shadow-md: rgba(78, 122, 94, 0.07);
    --shadow-green: rgba(78, 122, 94, 0.2);
    --shadow-green-lg: rgba(78, 122, 94, 0.25);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
    font-family: 'Source Sans 3', sans-serif;
    color: var(--text);
    background: var(--stone-pale);
    font-weight: 400; line-height: 1.7; overflow-x: hidden;
}


/* ===== DARK SCHEME =====
   Deliberately not an inversion. Brand --green (#4e7a5e) is too dark to
   read on a dark ground, so sage steps up to become the fill colour and
   a lighter sage carries small text. The stone neutrals become deep,
   warm, green-tinted charcoals rather than neutral greys, so the palette
   keeps its character. Every pairing here was checked against WCAG AA;
   the weakest is 5.48:1. The footer is dark in both schemes, so its
   rgba(255,255,255,…) values stay valid. */

/* ===== NAV ===== */
#navbar {
    position: fixed; top: 0; width: 100%; z-index: 1000;
    background: var(--nav-bg);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--hairline);
    transition: box-shadow 0.3s ease;
}
#navbar.scrolled { box-shadow: 0 2px 28px var(--shadow-sm); }
.nav-inner {
    max-width: 1200px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 40px;
}
.nav-logo { display: flex; align-items: center; text-decoration: none; }
.nav-logo img { display: block; width: 76px; height: 76px; }
.nav-links { display: flex; gap: 26px; list-style: none; }
.nav-links a {
    text-decoration: none; color: var(--text-light);
    font-size: 0.92rem; font-weight: 500;
    letter-spacing: 0.04em; text-transform: uppercase;
    position: relative; transition: color 0.3s;
}
.nav-links a::after {
    content: ''; position: absolute; bottom: -4px; left: 0;
    width: 0; height: 2px; background: var(--green);
    transition: width 0.3s ease;
}
.nav-links a:hover { color: var(--green-text); }
.nav-links a:hover::after { width: 100%; }

.hamburger {
    display: none; background: none; border: none; cursor: pointer;
    width: 28px; height: 20px; position: relative; z-index: 1001;
}
.hamburger span {
    display: block; width: 100%; height: 2px; background: var(--green);
    position: absolute; left: 0; transition: all 0.3s ease;
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 9px; }
.hamburger span:nth-child(3) { top: 18px; }
.hamburger.active span:nth-child(1) { transform: rotate(45deg); top: 9px; }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg); top: 9px; }

/* ===== HERO ===== */
.hero {
    min-height: 100vh; display: flex; align-items: center;
    padding: 120px 40px 80px;
    background:
        radial-gradient(ellipse at 15% 85%, rgba(78, 122, 94, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 15%, rgba(122, 158, 133, 0.06) 0%, transparent 50%),
        var(--stone-pale);
    position: relative; overflow: hidden;
}
.hero::before {
    content: ''; position: absolute; top: -100px; right: -60px;
    width: 520px; height: 520px; border-radius: 50%;
    background: radial-gradient(circle, rgba(78, 122, 94, 0.04), transparent 70%);
    animation: float 8s ease-in-out infinite;
}
.hero::after {
    content: ''; position: absolute; bottom: -80px; left: 10%;
    width: 300px; height: 300px; border-radius: 50%;
    background: radial-gradient(circle, rgba(122, 158, 133, 0.05), transparent 70%);
    animation: float 10s ease-in-out infinite reverse;
}
@keyframes float {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-20px, 20px); }
}
.hero-inner {
    max-width: 760px; margin: 0 auto; width: 100%; text-align: center;
}
.hero-text h1 {
    font-family: 'DM Serif Display', serif;
    text-wrap: balance;
    font-size: clamp(2.6rem, 5vw, 3.8rem);
    line-height: 1.15; color: var(--ink);
    margin-bottom: 24px; letter-spacing: -0.02em;
}
.hero-text h1 em {
    font-style: normal; color: var(--green); position: relative;
}
.hero-text h1 em::after {
    content: ''; position: absolute; bottom: 2px; left: 0;
    width: 100%; height: 8px;
    background: var(--green-glow); z-index: -1; border-radius: 4px;
}
.hero-text p {
    text-wrap: balance;
    font-size: 1.18rem; color: var(--text-light);
    max-width: 480px; margin: 0 auto 40px; font-weight: 300;
}
.btn {
    display: inline-block; padding: 16px 36px;
    background: var(--green); color: var(--on-green);
    text-decoration: none; border-radius: 50px;
    font-weight: 600; font-size: 0.95rem; letter-spacing: 0.03em;
    transition: all 0.35s ease;
    box-shadow: 0 4px 20px var(--shadow-green);
}
.btn:hover {
    background: var(--green-hover); transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--shadow-green-lg);
}
.btn-outline {
    background: transparent; color: var(--green-text);
    border: 2px solid var(--green); box-shadow: none; margin-left: 16px;
}
.btn-outline:hover { background: var(--green); color: var(--on-green); }

.hero-visual { display: flex; justify-content: center; align-items: center; position: relative; }
.hero-shape {
    width: 400px; height: 400px;
    border-radius: 42% 58% 62% 38% / 46% 52% 48% 54%;
    background: linear-gradient(155deg, var(--stone) 0%, rgba(78, 122, 94, 0.08) 100%);
    display: flex; align-items: center; justify-content: center;
    position: relative; animation: morph 12s ease-in-out infinite;
    border: 2px solid rgba(78, 122, 94, 0.08);
}
@keyframes morph {
    0%, 100% { border-radius: 42% 58% 62% 38% / 46% 52% 48% 54%; }
    33% { border-radius: 54% 46% 38% 62% / 58% 42% 58% 42%; }
    66% { border-radius: 38% 62% 52% 48% / 42% 58% 46% 54%; }
}
.hero-shape::before {
    content: ''; position: absolute; width: 118%; height: 118%;
    border: 2px dashed rgba(78, 122, 94, 0.1); border-radius: inherit;
    animation: morph 12s ease-in-out infinite reverse, spin 35s linear infinite;
}
@keyframes spin { 100% { transform: rotate(360deg); } }
.hero-shape .hero-logo-icon { width: 160px; height: auto; opacity: 0.35; }

/* ===== SECTIONS SHARED ===== */
section { padding: 100px 40px; }
.section-label {
    font-size: 0.82rem; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--green-text); margin-bottom: 12px;
}
.section-heading {
    font-family: 'DM Serif Display', serif;
    text-wrap: balance;
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    color: var(--ink); margin-bottom: 20px;
    letter-spacing: -0.01em; line-height: 1.2;
}
.section-sub {
    text-wrap: balance;
    font-size: 1.1rem; color: var(--text-light);
    max-width: 560px; font-weight: 300; margin-bottom: 56px;
}

/* ===== SERVICES ===== */
.services { background: var(--stone-mid); }
.services-inner { max-width: 1200px; margin: 0 auto; }
.services-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px;
}
.service-card {
    background: var(--surface); border-radius: 16px; padding: 40px 32px;
    position: relative; overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    border: 1px solid var(--hairline);
}
.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px var(--shadow-md);
}
.service-card::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 100%; height: 4px;
    background: linear-gradient(90deg, var(--green), var(--sage));
    opacity: 0; transition: opacity 0.35s;
}
.service-card:hover::before { opacity: 1; }
.service-icon {
    width: 56px; height: 56px; border-radius: 14px;
    background: var(--green-pale);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 24px;
}
.service-icon svg {
    width: 26px; height: 26px; stroke: var(--green); fill: none;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.service-card h3 {
    font-family: 'DM Serif Display', serif;
    font-size: 1.25rem; margin-bottom: 12px; color: var(--ink);
}
.service-card p {
    text-wrap: pretty;
    font-size: 0.95rem; color: var(--text-light); line-height: 1.7; font-weight: 300;
}

/* ===== ABOUT ===== */
.about-inner {
    max-width: 800px; margin: 0 auto;
}
.about-image {
    width: 100%; aspect-ratio: 4/5; border-radius: 24px;
    background: linear-gradient(160deg, var(--stone), rgba(78, 122, 94, 0.1));
    position: relative; overflow: hidden;
}
.about-image::after {
    content: ''; position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%231f5e4d' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.6;
}
.about-image-placeholder {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    z-index: 1; opacity: 0.18;
}
.about-image-placeholder svg { width: 120px; height: auto; }
.about-content .highlight {
    display: inline-block; padding: 20px 28px;
    background: var(--chip); border-radius: 14px;
    border-left: 4px solid var(--green);
    margin: 28px 0; font-style: italic;
    color: var(--text-light); font-size: 1.05rem;
}
.about-content p {
    text-wrap: pretty;
    color: var(--text-light); font-weight: 300;
    font-size: 1.05rem; margin-bottom: 16px;
}
.stats-row { display: flex; gap: 40px; margin-top: 36px; justify-content: center; }
.stat { text-align: left; }
.stat-number {
    font-family: 'DM Serif Display', serif;
    font-size: 2.2rem; color: var(--green);
}
.stat-label {
    font-size: 0.85rem; color: var(--text-light);
    font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em;
}

/* ===== CONTACT ===== */
.contact {
    background:
        radial-gradient(ellipse at 70% 70%, rgba(78, 122, 94, 0.04) 0%, transparent 50%),
        var(--stone-mid);
}
.contact-inner {
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
}
.contact-info { padding-top: 12px; }
.contact-info p {
    color: var(--text-light); font-weight: 300;
    font-size: 1.05rem; margin-bottom: 36px;
}
.contact-detail { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
.contact-detail-icon {
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--surface);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; border: 1px solid var(--hairline);
}
.contact-detail-icon svg {
    width: 20px; height: 20px; stroke: var(--green); fill: none;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.contact-detail strong {
    display: block; font-size: 0.82rem;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-light); font-weight: 600; margin-bottom: 2px;
}
.contact-detail span { font-size: 1.05rem; color: var(--ink); }
.contact-detail span a { color: var(--ink); text-decoration: none; transition: color 0.25s; }
.contact-detail span a:hover { color: var(--green-text); text-decoration: underline; }
.contact-form {
    background: var(--surface); padding: 44px; border-radius: 20px;
    box-shadow: 0 8px 40px var(--shadow-sm);
    border: 1px solid var(--hairline);
}
.form-group { margin-bottom: 20px; }
.form-group label {
    display: block; font-size: 0.85rem; font-weight: 600;
    color: var(--text); margin-bottom: 8px; letter-spacing: 0.02em;
}
.form-group input, .form-group textarea {
    width: 100%; padding: 14px 18px;
    border: 2px solid var(--stone); border-radius: 12px;
    font-family: inherit; font-size: 0.95rem; color: var(--text);
    background: var(--input-bg); transition: border-color 0.3s, box-shadow 0.3s; outline: none;
}
.form-group input:focus, .form-group textarea:focus {
    border-color: var(--sage);
    box-shadow: 0 0 0 4px var(--shadow-sm);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-submit {
    width: 100%; padding: 16px;
    background: var(--green); color: var(--on-green);
    border: none; border-radius: 50px;
    font-family: inherit; font-weight: 600; font-size: 1rem;
    cursor: pointer; transition: all 0.35s ease; letter-spacing: 0.03em;
}
.form-submit:hover {
    background: var(--green-hover);
    box-shadow: 0 8px 30px var(--shadow-green);
}
.form-submit:disabled { opacity: 0.65; cursor: not-allowed; transform: none; box-shadow: none; }
.form-status {
    margin-top: 14px; padding: 12px 16px; border-radius: 10px;
    font-size: 0.92rem; font-weight: 500; display: none;
}
.form-status.success { background: var(--green-pale); color: var(--green-text); display: block; }
.form-status.error { background: rgba(200,60,60,0.08); color: #c83c3c; display: block; }

/* ===== FOOTER ===== */
footer {
    background: var(--footer-bg); color: rgba(255,255,255,0.55);
    padding: 52px 40px; text-align: center; font-size: 0.9rem;
}
.footer-logo {
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px; text-decoration: none;
}
.footer-logo img { display: block; width: 92px; height: 92px; }

/* ===== ANIMATIONS ===== */
.reveal { transition: opacity 0.7s ease, transform 0.7s ease; }
html.js .reveal:not(.visible) { opacity: 0; transform: translateY(30px); }
.reveal.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    html.js .reveal:not(.visible) { opacity: 1; transform: none; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important; scroll-behavior: auto !important;
    }
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }


/* ===== ACCESSIBILITY ===== */
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 2000;
    background: var(--green); color: var(--on-green); padding: 12px 20px;
    border-radius: 0 0 10px 0; text-decoration: none; font-weight: 600;
}
.skip-link:focus { left: 0; }
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--green); outline-offset: 3px;
}

/* ===== HERO EYEBROW ===== */
.hero-eyebrow {
    display: inline-block; font-size: 0.8rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--green-text); background: var(--green-pale);
    padding: 8px 18px; border-radius: 50px; margin-bottom: 24px;
}
/* .hero-text p (0,1,1) outranks .hero-eyebrow (0,1,0), so the 480px measure
   for hero paragraphs was wrapping the pill inside its own chip. */
.hero-text p.hero-eyebrow { max-width: none; }
.hero-note {
    font-size: 0.92rem !important; color: var(--text-light);
    margin: 28px auto 0 !important; max-width: 520px;
}

/* ===== AREAS SERVED ===== */
.areas { background: var(--stone-pale); border-top: 1px solid var(--hairline); }
.areas-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.areas-inner .section-sub { text-wrap: pretty; margin: 0 auto; }

/* ===== FAQS ===== */
/* Track and FAQs are both --stone-mid and now adjacent, since the areas
   section between them was removed. Both hold --surface cards, which
   match --stone-pale, so neither can flip to pale without the cards
   vanishing. A hairline keeps the seam visible instead. */
.faqs { background: var(--stone-mid); border-top: 1px solid var(--hairline); }
.faqs-inner { max-width: 820px; margin: 0 auto; }
.faqs-inner .section-label,
.faqs-inner .section-heading,
.faqs-inner .section-sub { text-align: center; }
.faqs-inner .section-sub { margin-left: auto; margin-right: auto; }
.faq-item {
    background: var(--surface); border-radius: 14px;
    border: 1px solid var(--hairline);
    margin-bottom: 14px; overflow: hidden;
    transition: box-shadow 0.3s ease;
}
.faq-item[open] { box-shadow: 0 10px 34px var(--shadow-sm); }
.faq-item summary {
    list-style: none; cursor: pointer;
    padding: 22px 56px 22px 26px; position: relative;
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 1.12rem; color: var(--ink); line-height: 1.4;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: ''; position: absolute; right: 26px; top: 50%;
    width: 10px; height: 10px; margin-top: -6px;
    border-right: 2px solid var(--green); border-bottom: 2px solid var(--green);
    transform: rotate(45deg); transition: transform 0.3s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-item summary:hover { color: var(--green-text); }
.faq-answer {
    text-wrap: pretty;
    padding: 0 26px 24px; color: var(--text-light);
    font-weight: 300; font-size: 1rem; line-height: 1.75;
}
.faq-answer a { color: var(--green-text); }

/* ===== FOOTER ===== */
.footer-inner {
    max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 44px;
    text-align: left; padding-bottom: 40px;
}
.footer-inner .footer-logo { justify-content: flex-start; }
.footer-col h2, .footer-col h3 {
    font-family: 'Source Sans 3', system-ui, sans-serif;
    font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.85);
    text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 16px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; line-height: 1.5; }
.footer-col a { color: rgba(255,255,255,0.6); text-decoration: none; transition: color 0.25s; }
.footer-col a:hover { color: #fff; }
.footer-about { color: rgba(255,255,255,0.55); font-size: 0.9rem; max-width: 340px; }
.footer-about address { font-style: normal; margin-top: 14px; line-height: 1.8; }
.footer-about address a { color: rgba(255,255,255,0.75); text-decoration: none; }
.footer-bottom {
    max-width: 1100px; margin: 0 auto; padding-top: 26px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.85rem; text-align: center;
}
/* Statutory website disclosure (Companies Act 2006 s.82 and the Company,
   LLP and Business (Names and Trading Disclosures) Regulations): a limited
   company must show its registered name, number, place of registration and
   registered office on its website. Quiet, but must stay legible. */
.footer-legal {
    margin-top: 10px; font-size: 0.78rem; line-height: 1.6;
    color: var(--sage-light); opacity: 0.72;
    max-width: 620px; margin-left: auto; margin-right: auto;
    text-wrap: pretty;
}
footer { text-align: left; }

/* ===== LEGAL PAGES ===== */
.legal { padding-top: 148px; background: var(--stone-mid); }
.legal-inner { max-width: 720px; margin: 0 auto; }

.legal-head { text-align: center; margin-bottom: 44px; }
.legal-head .section-heading { margin-bottom: 10px; }
.legal-updated { color: var(--text-light); font-size: 0.92rem; margin: 0; }

.legal-intro { margin-bottom: 40px; }

.legal-toc {
    background: var(--surface); border: 1px solid var(--hairline);
    border-radius: 16px; padding: 28px 32px; margin-bottom: 40px;
    box-shadow: 0 2px 18px var(--shadow-sm);
}
.legal-toc h2 {
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--green-text);
    margin: 0 0 16px; font-family: inherit;
}
.legal-toc ol {
    margin: 0; padding-left: 20px;
    columns: 2; column-gap: 28px;
}
.legal-toc li { margin-bottom: 9px; break-inside: avoid; color: var(--text-light); }
.legal-toc a { color: var(--text); font-weight: 400; text-decoration: none; }
.legal-toc a:hover { color: var(--green-text); text-decoration: underline; }

.legal-card {
    background: var(--surface); border: 1px solid var(--hairline);
    border-radius: 16px; padding: 34px 38px; margin-bottom: 18px;
    box-shadow: 0 2px 18px var(--shadow-sm);
    scroll-margin-top: 110px;
}
.legal-card h2 {
    display: flex; align-items: baseline; gap: 13px;
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 1.4rem; color: var(--ink);
    margin: 0 0 18px; font-weight: 400; line-height: 1.25;
}
.legal-num {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
    background: var(--green); color: var(--on-green);
    font-family: 'Source Sans 3', sans-serif; font-size: 0.85rem;
    font-weight: 600; display: inline-flex;
    align-items: center; justify-content: center;
    transform: translateY(2px);
}

.legal-inner p, .legal-inner li {
    color: var(--text); font-weight: 300; line-height: 1.7;
    margin-bottom: 14px; text-wrap: pretty;
}
.legal-card > ul { margin: 0 0 4px 20px; }
.legal-card > ul li { margin-bottom: 10px; }
.legal-inner a { color: var(--green-text); font-weight: 600; }
.legal-card p:last-child, .legal-card ul:last-child { margin-bottom: 0; }

/* Wide tables scroll inside their own box, never the page body. */
.table-wrap {
    overflow-x: auto; margin: 4px 0 18px;
    border: 1px solid var(--hairline); border-radius: 12px;
    -webkit-overflow-scrolling: touch;
}
.legal-inner table {
    border-collapse: collapse; width: 100%;
    min-width: 460px; font-size: 0.93rem;
}
.legal-inner th, .legal-inner td {
    padding: 13px 16px; text-align: left; vertical-align: top;
    color: var(--text); font-weight: 300;
    border-bottom: 1px solid var(--hairline);
}
.legal-inner tbody tr:last-child td { border-bottom: none; }
.legal-inner th {
    background: var(--chip); font-weight: 600; color: var(--ink);
    font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase;
}

/* Facts only the business can supply — visible enough to catch at review,
   quiet enough not to shout on a finished page. */
.tbc {
    background: rgba(196, 145, 58, 0.14);
    border-bottom: 1.5px dashed #b5842f;
    padding: 1px 7px; border-radius: 4px;
    font-weight: 600; color: #7a5613; font-size: 0.94em;
}

@media (max-width: 700px) {
    .legal { padding-top: 118px; }
    .legal-card { padding: 26px 22px; }
    .legal-toc { padding: 24px 22px; }
    .legal-toc ol { columns: 1; }
    .legal-card h2 { font-size: 1.22rem; gap: 10px; }
}

/* Contact rows: label and value on one line, so they read as details
   rather than as another bulleted list. */
.legal-contact { list-style: none; margin: 0 0 16px !important; padding: 0; }
.legal-contact li {
    display: flex; flex-wrap: wrap; gap: 4px 14px;
    padding: 10px 0; margin: 0 !important;
    border-bottom: 1px solid var(--hairline);
}
.legal-contact li:last-child { border-bottom: none; }
.legal-contact li > span:first-child {
    flex: 0 0 190px; font-weight: 600; color: var(--ink); font-size: 0.88rem;
}
@media (max-width: 560px) {
    .legal-contact li > span:first-child { flex-basis: 100%; }
}

/* ===== ABOUT: EXPERIENCE LIST + SECTOR CHIPS ===== */
.experience-lead { margin-bottom: 12px !important; font-weight: 500; color: var(--ink); }
.experience-list { list-style: none; margin: 0 0 4px; padding: 0; }
.experience-list li {
    position: relative; padding-left: 26px; margin-bottom: 15px;
    color: var(--text); font-weight: 300; line-height: 1.7; text-wrap: pretty;
}
.experience-list li::before {
    content: ""; position: absolute; left: 0; top: 11px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--sage);
}
.experience-list strong { color: var(--ink); font-weight: 600; }

.sectors { margin-top: 34px; }
.sectors-label {
    font-size: 0.76rem; font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--green-text); margin-bottom: 14px;
}
.sector-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 9px; padding: 0; margin: 0; }
.sector-chips li {
    background: var(--chip); border: 1px solid var(--hairline);
    border-radius: 50px; padding: 7px 16px;
    font-size: 0.88rem; color: var(--text); font-weight: 400;
}

/* ===== SELECTED WORK =====
   Sits on --stone-pale, and --surface is the same colour, so these cannot be
   filled cards like the stat tiles. A green rule and a hairline give them
   definition without a fill. */
.results { background: var(--stone-pale); border-top: 1px solid var(--hairline); }
.results-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.results-inner .section-heading { margin-bottom: 48px; }
.case-grid {
    display: grid; gap: 24px; text-align: left;
    /* four items: 440px forces 2x2 at desktop width rather than 3 + 1 */
    grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
}
.case {
    border: 1px solid var(--hairline); border-left: 3px solid var(--green);
    border-radius: 0 14px 14px 0; padding: 26px 28px;
    background: var(--input-bg);
}
.case h3 {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 1.18rem; color: var(--ink);
    font-weight: 400; margin-bottom: 10px; line-height: 1.3;
}
.case p { color: var(--text-light); font-weight: 300; line-height: 1.7; margin: 0; text-wrap: pretty; }

.track-footnote {
    margin-top: 30px; font-size: 0.84rem; color: var(--text-light);
    font-style: italic; text-wrap: pretty;
}

/* ===== TRACK RECORD ===== */
.track { background: var(--stone-mid); border-top: 1px solid var(--hairline); }
.track-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.track-inner .section-sub { text-wrap: pretty; margin: 0 auto 48px; }
.track-grid {
    display: grid; gap: 28px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    text-align: left;
}
.track-item {
    background: var(--surface); border: 1px solid var(--hairline);
    border-radius: 16px; padding: 28px 26px;
    box-shadow: 0 2px 18px var(--shadow-sm);
}
.track-figure {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 2.4rem; line-height: 1.1; color: var(--green-text);
    margin: 0 0 10px;
}
.track-note {
    font-size: 0.95rem; color: var(--text-light);
    font-weight: 300; margin: 0; text-wrap: pretty;
}

/* ===== HERO USP ===== */
/* Sits directly under the hero lead paragraph, so the lead loses its usual
   40px tail and the pair reads as one block. */
.hero-text p.hero-usp {
    font-size: 1.02rem; max-width: 540px;
    margin: 0 auto 36px; padding-top: 18px;
    border-top: 1px solid var(--hairline);
    text-wrap: pretty;
}
.hero-text p:has(+ .hero-usp) { margin-bottom: 22px; }

/* ===== BOOK A CALL ===== */
.book { background: var(--stone-pale); border-top: 1px solid var(--hairline); }
.book-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.book-inner .section-sub { text-wrap: pretty; margin: 0 auto 36px; }
.btn-lg { padding: 18px 44px; font-size: 1.02rem; }
.book-note {
    font-size: 0.92rem; color: var(--text-light);
    margin-top: 24px; text-wrap: pretty;
}
.book-note a { color: var(--green-text); font-weight: 600; }
.form-consent {
    font-size: 0.82rem; color: var(--text-light);
    margin-top: 14px; line-height: 1.6; text-wrap: pretty;
}
.form-consent a { color: var(--green-text); font-weight: 600; }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
    .nav-links {
        position: fixed; top: 0; right: -100%; width: 70%; height: 100vh;
        background: var(--stone-pale); flex-direction: column;
        justify-content: center; align-items: center; gap: 32px;
        transition: right 0.4s ease; box-shadow: -8px 0 40px rgba(0,0,0,0.08);
    }
    .nav-links.open { right: 0; }
    .hamburger { display: block; }
    .contact-inner { grid-template-columns: 1fr; gap: 48px; }
    .form-row { grid-template-columns: 1fr; }
    section { padding: 72px 24px; }
    .nav-inner { padding: 10px 24px; }
}
@media (max-width: 600px) {
    .hero { padding: 100px 24px 60px; }
    .contact-form { padding: 28px; }
    .btn-outline { margin-left: 0; margin-top: 12px; }
    .btn-lg { padding: 16px 32px; font-size: 0.95rem; }
    .hero-text p.hero-usp { font-size: 0.98rem; }
}

@media (max-width: 900px) {
    .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 600px) {
    .footer-inner { grid-template-columns: 1fr; }
    .faq-item summary { padding: 20px 48px 20px 20px; font-size: 1.05rem; }
    .faq-answer { padding: 0 20px 20px; }
}