/* ==========================================================================
   Heritage Window Consultants - Design System
   The advisory practice of The Barnsbury Group. Independent heritage surveys,
   restoration reports and conservation guidance. Bordeaux-on-ivory: a
   jewel-tone DOCUMENT register - monograph, not contractor.
   Token-driven: only the five brand tokens + re-derived neutrals change.
   Built from the Barnsbury Joinery shell; HWC's own Design System governs
   this site's palette.
   ========================================================================== */

/* ==========================================================================
   1. CSS Custom Properties
   ========================================================================== */

:root {
    /* ----------------------------------------------------------------------
       Heritage Window Consultants — the advisory practice. Built to HWC's own
       Design System (which governs this site), NOT the group master's summary
       row: the Design System, the Brand Book and the supplied artwork all
       agree the RING is Bordeaux and the HORN is Ivory. The group master has
       that pairing inverted; it is stale.

       Signature = bordeaux-on-ivory: a jewel-tone DOCUMENT register that reads
       as monograph, not contractor. Bordeaux is the lead ink and authority
       colour (headings, the seal ring, the action colour, the footer); ivory
       is the light signature the horn is cut from.

       NOTE ON TOKEN NAMES: --mark/--ring keep their BJ light/dark SEMANTICS so
       every shared component still works — --mark is the DARK ink, --ring the
       LIGHT signature. For HWC that means --mark = bordeaux (the Design
       System's "ring") and --ring = ivory (its "horn"). Names are structural,
       not literal. Do not swap them to match the PDF's labels.
       ---------------------------------------------------------------------- */
    --ring:    #F4EBD9;   /* Ivory — the horn, the light signature */
    --mark:    #6B1F2C;   /* Bordeaux — the seal ring; lead ink for headings */
    --paper:   #F4EFE6;   /* Paper — the warm document ground (group constant) */
    --accent:  #B8893A;   /* Antique gold, BRAND BOOK value (v2 s3 [check]).
                            Decorative only: 2.66:1 on ivory. */
    --accent-text: #7F5E28;  /* Darkened gold for accent TEXT: 5.19:1 on paper,
                                5.02:1 on ivory. Both AA. The decorative
                                #B8893A above is 2.66:1 and is never text. */
    --accent-rule: rgba(184,137,58,.55); /* gold hairline for button double rule */
--support: #4A2540;   /* Aubergine — the jewel support. Bordeaux's sibling, not
                             its opposite, so the palette stays a family. 11.3:1 on
                             paper (AAA). Replaces the Design System's peacock teal
                             #2E5A5A at the client's direction; the brand book is
                             being amended to match. */
    --tint:    #C9A99A;   /* Plaster pink — the light tone the palette previously
                             lacked. DARK GROUNDS ONLY: 5.2:1 on bordeaux, 5.9:1 on
                             aubergine, 7.2:1 on walnut, but only 1.9:1 on paper.
                             Never set this on paper or ivory. */
    --walnut:  #2E2118;   /* Walnut ink — the group's own neutral dark, used for the
                             group band so it reads apart from the bordeaux footer. */

    /* Neutrals */
    --paper-deep: #E8E2D5; /* deeper panel lift */
    --ink:       #1B1B1A;  /* near-black, body copy (13.3:1 on paper, AAA) */
    --ink-soft:  #3A3A37;  /* softened body */
    --ink-mute:  #67635A;  /* quiet meta. Was #7A786F, which measured 3.87:1 on
                            paper and 3.74 on ivory: below the 4.5 floor v2 s12
                            sets, and the "elegant grey" it forbids. This is
                            5.23 and 5.05, and warmer. */
    --rule:      #D9C9A8;  /* Warm rule (v2 s6). 1px only, never a default grey. */
    --ink-deep:  #6B1F2C;  /* deepest ground / footer = bordeaux */
    --white:     #ffffff;

    /* Typography — Lora editorial, Inter Tight UI, JetBrains Mono metadata */
    --font-display: 'Lora', Georgia, serif;
    --font-body: 'Lora', Georgia, serif;          /* v2 s4: Lora sets body */
    --font-ui: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    /* quotations. Two other faces were tried here and both were wrong: EB
       Garamond set too thin to survive as light type on bordeaux, Newsreader
       too heavy. Lora, at a size that does not shout. */
    --font-quote: 'Lora', Georgia, serif;

    /* Spacing */
    --section-padding: 124px;
    --container-max: 1440px;
    --container-padding: 80px;

    /* Transitions */
    --transition-fast: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   2. Base Reset & Typography
   ========================================================================== */

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

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 400;
    overflow-x: hidden;
    line-height: 1.8;
    letter-spacing: 0.002em;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Page transition */
    opacity: 0;
    animation: pageLoad 0.4s ease forwards;
}

@keyframes pageLoad {
    from { opacity: 0; }
    to { opacity: 1; }
}

body.page-transitioning {
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Headings.
   Lora (--font-display) carries the editorial hierarchy: H1, H2 and H3.
   Large display uses the light optical weight (300) for a refined, premium feel;
   H4-H6 are small labels and stay in Inter Tight 500. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--mark);
    margin-bottom: 1rem;
}

/* H1: 64px, Lora light, line-height 1.05 */
h1 {
    font-size: 44px;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.025em;
}

@media (min-width: 768px) {
    h1 {
        font-size: 68px;
    }
}

/* H2: 44px Lora, line-height 1.15 */
h2 {
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

@media (min-width: 768px) {
    h2 {
        font-size: 44px;
    }
}

/* H4-H6: small labels in Inter Tight 500. */
h4, h5, h6 {
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* H3: Lora editorial sub-head, 30px, line-height 1.25 */
h3 {
    font-size: 24px;
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin-top: 52px;
    margin-bottom: 16px;
}

h3:first-child {
    margin-top: 0;
}

@media (min-width: 768px) {
    h3 {
        font-size: 30px;
    }
}

h4 {
    font-size: 20px;
    line-height: 1.3;
}

p {
    margin-bottom: 1.15rem;
    color: var(--ink);
    max-width: 68ch;
}

/* Full-width contexts opt out of the reading measure. */
.hero-content p, .footer p, .ledger p, .stat p, td p, .bento-block p { max-width: none; }

p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--accent-text);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--mark);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol {
    margin-bottom: 1rem;
    padding-left: 0;
    list-style: none;
}

li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 12px;
    color: var(--ink);
}

li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

/* Ordered lists */
ol {
    counter-reset: list-counter;
}

ol li {
    counter-increment: list-counter;
}

ol li::before {
    content: counter(list-counter) ".";
    background: none;
    width: auto;
    height: auto;
    font-weight: 500;
    color: var(--support);
    top: 0;
}

/* ==========================================================================
   3. Section Labels (small caps above headings)
   ========================================================================== */

.section-label {
    display: block;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--support);
    margin-bottom: 16px;
}

/* ==========================================================================
   4. Layout - Container
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .container {
        padding: 0 var(--container-padding);
    }
}

/* ==========================================================================
   5. Navigation
   ========================================================================== */

.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--white);
    border-bottom: 1px solid rgba(107, 31, 44, 0.08);
}

.nav.scrolled {
    box-shadow: none;
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    gap: 24px;
}

/* Logo */
.nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.nav-logo img {
    width: 44px;
    height: 44px;
    border-radius: 0;
    object-fit: cover;
}

/* Wordmark — stacked seal. Inter Tight 500, lowercase, -3.5% tracking.
   Line one --ink, line two --ink at 70% opacity. Same treatment in
   header and footer (footer overrides colour to white on dark ground). */
.nav-logo-text {
    display: none;
}

@media (min-width: 640px) {
    .nav-logo-text {
        display: flex;
        flex-direction: column;
    }

    .nav-logo-text span:first-child {
        font-family: var(--font-body);
        font-size: 19px;
        font-weight: 500;
        color: var(--mark);
        line-height: 1.15;
        text-transform: lowercase;
        letter-spacing: -0.035em;
    }

    .nav-logo-text span:last-child {
        font-family: var(--font-body);
        font-size: 14px;
        font-weight: 500;
        color: var(--mark);
        line-height: 1.15;
        text-transform: lowercase;
        letter-spacing: -0.035em;
    }
}

/* Nav Links */
.nav-links {
    display: none;
    list-style: none;
    gap: 36px;
    margin: 0 auto;
    align-items: center;
}

.nav-links li {
    padding: 0;
    margin: 0;
}

.nav-links li::before {
    display: none;
}

@media (min-width: 1024px) {
    .nav-links {
        display: flex;
    }
}

.nav-links > li {
    position: relative;
}

.nav-links > li > a {
    font-size: 14px;
    font-weight: 500;
    color: var(--support);
    padding: 28px 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-links > li > a:hover,
.nav-links > li > a.active {
    color: var(--mark);
}

/* Dropdown Arrow */
.nav-links .nav-arrow {
    width: 10px;
    height: 10px;
    transition: transform var(--transition-fast);
}

.nav-links > li:hover .nav-arrow {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 220px;
    background: var(--white);
    border: 1px solid rgba(107, 31, 44, 0.08);
    border-radius: 0;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
    padding: 8px 0;
    list-style: none;
}

.nav-links > li:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
}

.nav-dropdown li {
    margin: 0;
    padding: 0;
}

.nav-dropdown li::before {
    display: none;
}

.nav-dropdown a {
    display: block;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--support);
    transition: all var(--transition-fast);
}

.nav-dropdown a:hover {
    background: rgba(244, 239, 230, 0.3);
    color: var(--mark);
}

/* CTA Button */
.nav-cta {
    display: none;
    align-items: center;
    gap: 8px;
    background: var(--mark);
    color: var(--ring);
    padding: 12px 24px;
    border-radius: 0;
    font-size: 14px;
    font-weight: 500;
    flex-shrink: 0;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.nav-cta:hover {
    background: var(--ink);
    color: var(--ring);
    transform: translateY(-2px);
}

.nav-cta svg {
    width: 16px;
    height: 16px;
}

@media (min-width: 768px) {
    .nav-cta {
        display: inline-flex;
    }
}

/* Mobile Toggle */
.nav-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

@media (min-width: 1024px) {
    .nav-toggle {
        display: none;
    }
}

.nav-toggle span {
    width: 24px;
    height: 1px;
    background: var(--mark);
    transition: var(--transition-normal);
}

/* Mobile Menu */
.mobile-menu {
    background: var(--white);
    border-top: 1px solid rgba(107, 31, 44, 0.08);
    padding: 0 24px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.mobile-menu.active {
    max-height: 80vh;
    padding: 24px;
    overflow-y: auto;
}

@media (min-width: 1024px) {
    .mobile-menu {
        display: none !important;
    }
}

.mobile-menu ul {
    list-style: none;
    margin: 0;
}

.mobile-menu li {
    padding: 0;
    margin: 0;
}

.mobile-menu li::before {
    display: none;
}

.mobile-menu > ul > li {
    border-bottom: 1px solid rgba(107, 31, 44, 0.06);
}

.mobile-menu a {
    display: block;
    padding: 16px 0;
    font-weight: 500;
    color: var(--ink);
}

/* Mobile Submenu */
.mobile-submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 0;
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
}

.mobile-submenu-toggle svg {
    transition: transform var(--transition-fast);
}

.mobile-submenu.active .mobile-submenu-toggle svg {
    transform: rotate(180deg);
}

.mobile-submenu-list {
    display: none;
    padding-left: 16px;
    margin: 0;
}

.mobile-submenu.active .mobile-submenu-list {
    display: block;
}

.mobile-submenu-list a {
    padding: 12px 0;
    font-size: 15px;
    color: var(--support);
}

.mobile-menu .nav-cta {
    display: flex;
    justify-content: center;
    margin-top: 16px;
    width: 100%;
}

/* ==========================================================================
   6. Buttons
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 34px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-transform: lowercase;
    border-radius: 0;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.btn-primary {
    background: var(--paper);
    color: var(--mark);
}

.btn-primary:hover {
    background: var(--ring);
    color: var(--mark);
}

.btn-navy {
    background: var(--mark);
    color: var(--white);
}

.btn-navy:hover {
    background: var(--ink);
    color: var(--white);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--white);
}

.btn-outline {
    background: var(--white);
    color: var(--support);
    border: 1px solid var(--support);
}

.btn-outline:hover {
    background: var(--paper);
    border-color: var(--support);
    color: var(--support);
}

/* ==========================================================================
   7. Homepage Hero
   ========================================================================== */

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 80px;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(30, 28, 25, 0.8), rgba(30, 28, 25, 0.5), rgba(30, 28, 25, 0.3));
}

/* Navy-tinted scrim — enough to seat the text, light enough to keep the
   photograph forward and the page oat-led (not a dark navy block). */
.hero-overlay-warm {
    background: linear-gradient(
        100deg,
        rgba(107, 31, 44, 0.62) 0%,
        rgba(107, 31, 44, 0.4) 45%,
        rgba(107, 31, 44, 0.22) 72%,
        rgba(107, 31, 44, 0.12) 100%
    );
}

.hero-content {
    position: relative;
    z-index: 10;
    max-width: 720px;
    padding: 60px 0;
}

/* Subtle radial gradient behind hero text for warmth */
.hero-content::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    background: transparent;
    pointer-events: none;
    z-index: -1;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--ring);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;      /* 3px pushed the 72-char eyebrow to 751px vs the 720px column, forcing a wrap */
    text-transform: uppercase;
    margin-bottom: 32px;
    white-space: nowrap;      /* keep it on one line */
}
/* Below ~768px the line cannot fit the viewport at a legible size, so let it wrap. */
@media (max-width: 767px) {
    .hero-badge { white-space: normal; letter-spacing: 1.5px; }
}

.hero-badge::before {
    content: '';
    width: 48px;
    height: 1px;
    background: var(--ring);
}

.hero h1 {
    color: var(--white);
    margin-bottom: 24px;
}

.hero-lead {
    font-family: var(--font-display);
    font-size: 23px;
    font-weight: 400;
    font-style: normal;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.5;
    letter-spacing: -0.01em;
    max-width: 30ch;
    margin-bottom: 36px;
}

.hero-features {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 40px;
}

.hero-features span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
}

/* Hero credentials row — real client names, mono, understated. */
.hero-credentials {
    margin-top: 36px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.hero-features span::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--paper-deep);
}

.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* ==========================================================================
   8. Interior Page Hero (pale blue background)
   ========================================================================== */

.page-hero {
    background: var(--paper);
    padding: 140px 0 60px;
    text-align: center;
}

.page-hero .section-label {
    color: var(--support);
}

.page-hero h1 {
    margin-bottom: 16px;
}

.page-hero .lead {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 400;
    font-style: normal;
    color: var(--ink-soft);
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.55;
    letter-spacing: -0.01em;
}

/* ==========================================================================
   9. Sections - 100px Padding
   ========================================================================== */

.section {
    padding: var(--section-padding) 0;
}

.section-pale {
    background: var(--paper);
}

.section-beige {
    background: var(--paper-deep);
}

.section-mint {
    background: var(--paper);
}

.section-header {
    max-width: 680px;
    margin-bottom: 64px;
}

.section-header.text-center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* ==========================================================================
   10. Content Grid
   ========================================================================== */

.content-grid {
    display: grid;
    gap: 48px;
}

@media (min-width: 768px) {
    .content-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 64px;
        align-items: start;
    }
}

.content-grid img {
    width: 100%;
    height: auto;
    border-radius: 0;
}

/* ==========================================================================
   11. Service Cards
   ========================================================================== */

.services-grid {
    display: grid;
    gap: 1px;
    background: rgba(107, 31, 44, 0.08);
}

@media (min-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.service-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    transition: border-color var(--transition-normal);
    cursor: pointer;
}

.service-card:hover {
    border-color: var(--mark);
}

.service-card-image {
    aspect-ratio: 4/3;
    overflow: hidden;
}

.service-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.service-card:hover .service-card-image img {
    transform: scale(1.05);
}

.service-card-content {
    padding: 32px;
}

.service-card-number {
    font-size: 11px;
    color: rgba(107, 31, 44, 0.3);
    letter-spacing: 3px;
    margin-bottom: 16px;
}

.service-card h3 {
    margin-bottom: 12px;
}

.service-card p {
    font-size: 15px;
    margin-bottom: 24px;
}

.service-card-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--mark);
    padding-top: 24px;
    border-top: 1px solid var(--rule);
}

.service-card-link:hover {
    gap: 16px;
}

/* ==========================================================================
   12. Related Services Grid
   ========================================================================== */

.related-services {
    display: grid;
    gap: 32px;
}

@media (min-width: 768px) {
    .related-services {
        grid-template-columns: repeat(3, 1fr);
    }
}

.related-service-card {
    padding: 32px;
    background: var(--white);
    border: 1px solid rgba(107, 31, 44, 0.08);
    border-radius: 0;
    transition: all var(--transition-fast);
}

.related-service-card:hover {
    border-color: var(--rule);
    background: var(--paper);
}

.related-service-card h3 {
    font-size: 22px;
    margin-bottom: 12px;
}

.related-service-card h3 a {
    color: var(--mark);
}

.related-service-card h3 a:hover {
    color: var(--support);
}

.related-service-card p {
    font-size: 15px;
    margin: 0;
}

/* ==========================================================================
   13. FAQ Section
   ========================================================================== */

.faq-section {
    padding: var(--section-padding) 0;
}

.faq-list {
    max-width: 800px;
}

.faq-item {
    border-bottom: 1px solid var(--rule);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.faq-question h3 {
    font-size: 18px;
    font-weight: 400;
    padding-right: 32px;
    color: var(--mark);
    margin-bottom: 0;
    line-height: 1.4;
}

.faq-icon {
    width: 20px;
    height: 20px;
    color: var(--support);
    transition: transform var(--transition-normal);
    flex-shrink: 0;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-normal);
}

.faq-item.active .faq-answer {
    max-height: 500px;
}

.faq-answer p {
    padding-bottom: 24px;
    line-height: 1.8;
}

/* ==========================================================================
   14. Stats Bar
   ========================================================================== */

.stats-section {
    padding: 60px 0;
    background: var(--white);
    border-bottom: 1px solid rgba(107, 31, 44, 0.06);
}

.stats-bar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

@media (min-width: 768px) {
    .stats-bar {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .stats-bar--four {
        grid-template-columns: repeat(4, 1fr);
    }
}

.stat {
    text-align: center;
}

.stat-value {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: 400;
    color: var(--mark);
    line-height: 1;
    letter-spacing: -0.02em;
}

.stat-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--support);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 8px;
}

/* ==========================================================================
   15. Editorial Gallery (CSS Columns Masonry)
   ========================================================================== */

.gallery-section {
    padding: var(--section-padding) 0;
}

.gallery-category {
    margin-bottom: 64px;
}

.gallery-category:last-child {
    margin-bottom: 0;
}

/* Full-width category labels */
.gallery-category-label {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--support);
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--rule);
}

/* CSS Columns Masonry Layout */
.gallery-masonry {
    column-count: 1;
    column-gap: 12px;
}

@media (min-width: 640px) {
    .gallery-masonry {
        column-count: 2;
    }
}

@media (min-width: 1024px) {
    .gallery-masonry {
        column-count: 3;
    }
}

.gallery-item {
    break-inside: avoid;
    margin-bottom: 12px;
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    /* No borders, no rounded corners, no hover effects - clean editorial */
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(30, 28, 25, 0.95);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.lightbox.active {
    display: flex;
}

.lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 0;
}

.lightbox-close {
    position: absolute;
    top: -3rem;
    right: 0;
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    padding: 0.5rem;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 1rem;
    border-radius: 0;
    transition: background 0.2s ease;
}

.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.2);
}

.lightbox-prev {
    left: -4rem;
}

.lightbox-next {
    right: -4rem;
}

@media (max-width: 768px) {
    .lightbox-prev {
        left: 0;
    }
    .lightbox-next {
        right: 0;
    }
}

.lightbox-caption {
    text-align: center;
    color: white;
    margin-top: 1rem;
    font-family: var(--font-body);
}

/* ==========================================================================
   16. CTA Section
   ========================================================================== */

/* Oat-led closing band — a deeper oat panel with navy heading and a navy
   action button. A mint hairline carries the accent. No navy field. */
.cta-section {
    background: var(--paper-deep);
    padding: var(--section-padding) 0;
    text-align: center;
    border-top: 1px solid var(--ring);
}

.cta-section h2 {
    color: var(--mark);
    margin-bottom: 16px;
}

.cta-section p {
    color: var(--ink);
    font-size: 18px;
    margin-bottom: 32px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   17. Footer — Editorial Heritage Studio
   ========================================================================== */

.footer {
    background: #4E1620;                                   /* deeper bordeaux than the group band so they read as separate */
    border-top: 1px solid rgba(244, 239, 230, 0.16);       /* hairline divider between group band and footer */
    color: var(--white);
    padding: 80px 0 60px;
}

.footer-grid {
    display: grid;
    gap: 48px;
    margin-bottom: 48px;
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
        gap: 48px;
    }

    /* Vertical dividers between footer columns */
    .footer-grid > div:not(:first-child) {
        padding-left: 32px;
        border-left: 1px solid rgba(255, 255, 255, 0.08);
    }
}

.footer-brand {
    max-width: 340px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}

/* Logo circle container to handle white background in jpeg */
.footer-logo-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--paper);
    flex-shrink: 0;
}

.footer-logo-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.footer-logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Footer wordmark — same stacked seal, white on the dark ground. */
.footer-logo-text span:first-child {
    font-family: var(--font-body);
    font-size: 19px;
    font-weight: 500;
    color: var(--ring);
    line-height: 1.15;
    text-transform: lowercase;
    letter-spacing: -0.035em;
    margin: 0;
}

.footer-logo-text span:last-child {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--ring);
    line-height: 1.15;
    text-transform: lowercase;
    letter-spacing: -0.035em;
    margin: 0;
}

.footer-brand p {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.65);
    line-height: 2;
}

.footer-heading {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.footer-links {
    list-style: none;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0;
    padding: 0;
}

.footer-links li::before {
    display: none;
}

.footer-links a {
    display: block;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.65);
    line-height: 2;
    white-space: nowrap;
    transition: color var(--transition-fast);
}

.footer-links a:hover {
    color: var(--white);
}

.footer-contact {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.65);
    line-height: 2;
}

.footer-contact p {
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 0;
    line-height: 2;
}

.footer-contact strong {
    color: var(--white);
    font-weight: 400;
}

.footer-contact a {
    color: rgba(255, 255, 255, 0.65);
}

.footer-contact a:hover {
    color: var(--white);
}

.footer-hours {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.65);
    line-height: 2;
}

.footer-social {
    display: flex;
    gap: 20px;
    margin-top: 28px;
}

.footer-social a {
    color: rgba(255, 255, 255, 0.5);
    transition: color var(--transition-fast);
}

.footer-social a:hover {
    color: var(--white);
}

.footer-social svg {
    width: 20px;
    height: 20px;
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

@media (min-width: 768px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 32px;
    }
}

.footer-bottom p {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.35);
    margin: 0;
}

.footer-bottom-links {
    display: flex;
    justify-content: center;
    gap: 32px;
}

.footer-bottom-links a {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.35);
}

.footer-bottom-links a:hover {
    color: var(--white);
}

/* ==========================================================================
   Projects Carousel
   ========================================================================== */

.projects-carousel-section {
    padding: var(--section-padding) 0;
    overflow: hidden;
}

.projects-carousel-wrapper {
    position: relative;
}

.projects-carousel {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 8px 24px 8px calc((100vw - var(--container-max)) / 2 + var(--container-padding));
    cursor: grab;
}

@media (max-width: 1200px) {
    .projects-carousel {
        padding-left: 24px;
    }
}

.projects-carousel::-webkit-scrollbar {
    display: none;
}

.projects-carousel.dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}

/* Carousel Navigation Arrows */
.carousel-nav {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--mark);
    background: var(--white);
    color: var(--mark);
    cursor: pointer;
    z-index: 10;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

@media (min-width: 1024px) {
    .carousel-nav {
        display: flex;
    }
}

.carousel-nav:hover {
    background: var(--mark);
    color: var(--white);
}

.carousel-nav svg {
    width: 20px;
    height: 20px;
}

.carousel-prev {
    left: max(24px, calc((100vw - var(--container-max)) / 2));
}

.carousel-next {
    right: 24px;
}

.project-card {
    flex: 0 0 380px;
    height: 280px;
    position: relative;
    border-radius: 0;
    overflow: hidden;
    transition: box-shadow var(--transition-fast);
}

.project-card:hover {
    box-shadow: none;
}

.project-card-image {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.project-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.project-card:hover .project-card-image img {
    transform: scale(1.05);
}

/* Gradient overlay at bottom */
.project-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    pointer-events: none;
}

.project-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px;
    z-index: 2;
}

.project-card-content h3 {
    font-size: 20px;
    color: var(--white);
    margin: 0 0 8px 0;
}

.project-card-type {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   Why Choose Us Cards
   ========================================================================== */

/* Why Choose Us section with organic blob background */
.section-why-choose {
    position: relative;
    overflow: hidden;
}

.section-why-choose::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%235A6678' d='M47.5,-57.2C59.9,-45.8,67.3,-29.3,70.3,-12.1C73.3,5.1,71.9,23,63.6,37.3C55.3,51.6,40.1,62.3,23.4,68.1C6.7,73.9,-11.5,74.8,-27.8,69.3C-44.1,63.8,-58.5,51.9,-67.1,36.4C-75.7,20.9,-78.5,1.8,-74.3,-15.3C-70.1,-32.4,-58.9,-47.5,-44.8,-58.6C-30.7,-69.7,-13.7,-76.8,1.8,-78.9C17.3,-81,35.1,-68.6,47.5,-57.2Z' transform='translate(100 100)'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    opacity: 0.04;
    pointer-events: none;
    z-index: 0;
}

.why-choose-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 768px) {
    .why-choose-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .why-choose-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.why-choose-card {
    padding: 32px;
    border: 1px solid var(--rule);
    border-radius: 0;
    background: var(--white);
}

.why-choose-card:nth-child(even) {
    background: var(--paper);
}

.why-choose-card::before {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background: var(--support);
    margin-bottom: 20px;
}

.why-choose-card h3 {
    font-size: 22px;
    margin-top: 0;
    margin-bottom: 12px;
}

.why-choose-card p {
    font-size: 15px;
    margin: 0;
}

/* ==========================================================================
   18. Grid Utilities
   ========================================================================== */

.grid-2 {
    display: grid;
    gap: 48px;
}

@media (min-width: 768px) {
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 64px;
    }
}

.grid-3 {
    display: grid;
    gap: 32px;
}

@media (min-width: 768px) {
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   19. Utility Classes
   ========================================================================== */

.text-center {
    text-align: center;
}

.mb-0 {
    margin-bottom: 0;
}

.mt-4 {
    margin-top: 32px;
}

.section-cta {
    text-align: center;
    margin-top: 48px;
}

/* ==========================================================================
   20. Skip Link (Accessibility)
   ========================================================================== */

.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--mark);
    color: var(--white);
    padding: 16px 32px;
    z-index: 9999;
    border-radius: 0 0 4px 4px;
    font-weight: 500;
    text-decoration: none;
}

.skip-link:focus {
    top: 0;
    color: var(--white);
}

/* ==========================================================================
   20b. Focus States (Accessibility)
   ========================================================================== */

/* Global focus-visible outline for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* Remove default outline for mouse users */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline: none;
}

/* Carousel buttons focus */
.carousel-nav:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* FAQ accordion focus */
.faq-question:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* Navigation links focus */
.nav-links a:focus-visible,
.nav-cta:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* Mobile menu toggle focus */
.nav-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* Button focus states */
.btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* Form elements enhanced focus */
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
    outline: none;
    border-color: var(--support);
    box-shadow: 0 0 0 3px rgba(46, 33, 24, 0.22);
}

/* Card focus for linked cards */
.brand-tile-link:focus-visible,
.service-card:focus-visible,
.bento-block-cta:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* ==========================================================================
   21. Service Page Content Layout
   ========================================================================== */

/* Single-column centered content */
.service-content {
    max-width: 780px;
    margin: 0 auto;
}

/* Our Story warm gradient background */
.section-story {
    background: var(--paper);
}

/* Service sections with 80px spacing */
.service-section {
    padding: 80px 0;
}

.service-section:first-of-type {
    padding-top: 60px;
}

.service-section + .service-section {
    border-top: 1px solid var(--rule);
}

/* Service section header */
.service-section .section-label {
    margin-bottom: 16px;
}

.service-section h2 {
    margin-bottom: 24px;
}

/* Bullet lists with generous spacing */
.service-content ul,
.service-section ul {
    margin: 24px 0;
    padding-left: 0;
}

.service-content li,
.service-section li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 16px;
    line-height: 2;
    color: var(--ink);
}

.service-content li::before,
.service-section li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--support);
}

.service-content li:last-child,
.service-section li:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   22. Content Images
   ========================================================================== */

.content-image {
    width: 100%;
    margin: 32px 0;
}

.content-image-full {
    width: 100%;
    margin: 48px 0;
}

.content-image-half {
    width: 100%;
    max-width: 480px;
    margin: 32px auto;
    display: block;
}

@media (min-width: 768px) {
    .content-image-half {
        float: none;
        margin: 32px auto;
    }
}

/* ==========================================================================
   22. About Page - Values Grid
   ========================================================================== */

.about-values {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .about-values {
        grid-template-columns: repeat(3, 1fr);
    }
}

.about-value {
    text-align: center;
    padding: 2rem;
}

.about-value-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem;
    background: var(--paper);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-value-icon svg {
    width: 28px;
    height: 28px;
    color: var(--mark);
}

.about-value h3 {
    font-size: 20px;
    margin-bottom: 0.75rem;
}

.about-value p {
    color: var(--ink);
    font-size: 15px;
}

/* ==========================================================================
   23. About Page - Timeline
   ========================================================================== */

.timeline {
    position: relative;
    padding-left: 2rem;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--paper-deep);
}

.timeline-item {
    position: relative;
    padding-bottom: 2rem;
    padding-left: 2rem;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -2rem;
    top: 0.25rem;
    width: 12px;
    height: 12px;
    background: var(--mark);
    border-radius: 50%;
    transform: translateX(-5px);
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-year {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--mark);
    font-size: 18px;
    margin-bottom: 0.5rem;
}

.timeline-text {
    color: var(--ink);
    margin: 0;
}

/* ==========================================================================
   24. About Page - Service Area Tiles
   ========================================================================== */

.service-area-tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 768px) {
    .service-area-tiles {
        grid-template-columns: repeat(4, 1fr);
    }
}

.area-tile {
    padding: 16px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 0;
    font-weight: 500;
    color: var(--mark);
    text-align: center;
    font-size: 15px;
}

.area-tile::before {
    display: none;
}

/* ==========================================================================
   Our Brands Section - Brand Tiles
   ========================================================================== */

.brands-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 768px) {
    .brands-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.brand-tile {
    padding: 32px;
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: 0;
    border-top: 1px solid var(--support);
}

.brand-tile h3 {
    font-size: 22px;
    margin-top: 0;
    margin-bottom: 8px;
}

.brand-tile .brand-location {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--support);
    margin-bottom: 16px;
}

.brand-tile p {
    font-size: 15px;
    margin: 0;
}

/* Brand tile as link */
.brand-tile-link {
    display: block;
    text-decoration: none;
    position: relative;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.brand-tile-link:hover {
    border-color: var(--support);
    transform: translateY(-4px);
    box-shadow: none;
}

.brand-tile-link h3 {
    color: var(--mark);
    transition: color var(--transition-fast);
}

.brand-tile-link:hover h3 {
    color: var(--support);
}

.brand-tile-arrow {
    position: absolute;
    bottom: 24px;
    right: 24px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--support);
    opacity: 0;
    transform: translateX(-8px);
    transition: all var(--transition-normal);
}

.brand-tile-link:hover .brand-tile-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Current brand tile styling */
.brand-tile-current {
    position: relative;
    background: var(--paper);
    border-color: var(--support);
}

.brand-tile-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--white);
    background: var(--support);
    padding: 4px 10px;
    border-radius: 0;
}

/* ==========================================================================
   Values Section - Three Column
   ========================================================================== */

.values-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
}

@media (min-width: 768px) {
    .values-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }
}

.value-item {
    padding-top: 24px;
    border-top: 1px solid var(--support);
}

.value-item h3 {
    font-size: 22px;
    margin-top: 0;
    margin-bottom: 16px;
}

.value-item p {
    font-size: 15px;
    margin: 0;
}

/* Legacy support */
.areas-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 768px) {
    .areas-list {
        grid-template-columns: repeat(4, 1fr);
    }
}

.areas-list li {
    padding: 1rem 1.5rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 0;
    font-weight: 500;
    color: var(--mark);
    text-align: center;
}

.areas-list li::before {
    display: none;
}

/* ==========================================================================
   25. Contact Page - Grid & Form
   ========================================================================== */

.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

@media (min-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

.contact-info {
    padding: 1.25rem;
    background: var(--paper);
    border-radius: 0;
    max-width: 100%;
    overflow: hidden;
}

@media (min-width: 768px) {
    .contact-info {
        padding: 2rem;
    }
}

.contact-info h2 {
    font-size: 24px;
    margin-bottom: 1.5rem;
}

.contact-item {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.contact-item:last-of-type {
    margin-bottom: 0;
}

.contact-item-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-item-icon svg {
    width: 20px;
    height: 20px;
    color: var(--mark);
}

.contact-item-content h3 {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--mark);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.contact-item-content p {
    margin: 0;
    color: var(--ink);
    overflow-wrap: break-word;
}

.contact-item-content a {
    color: var(--mark);
    font-weight: 500;
}

.contact-item-content a:hover {
    color: var(--support);
}

.opening-hours {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(107, 31, 44, 0.1);
}

.opening-hours h3 {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--mark);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hours-grid {
    display: grid;
    gap: 0.5rem;
}

.hours-row {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
}

.hours-row span:first-child {
    color: var(--ink);
}

.hours-row span:last-child {
    font-weight: 500;
    color: var(--mark);
}

.contact-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

.contact-social a {
    width: 40px;
    height: 40px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mark);
    transition: all var(--transition-fast);
}

.contact-social a:hover {
    background: var(--mark);
    color: var(--white);
}

.contact-social svg {
    width: 18px;
    height: 18px;
}

/* Contact Form */
.contact-form {
    padding: 1.5rem;
    background: var(--white);
    border: 1px solid rgba(107, 31, 44, 0.1);
    border-radius: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

@media (min-width: 768px) {
    .contact-form {
        padding: 2rem;
    }
}

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

.contact-form h2 {
    font-size: 24px;
    margin-bottom: 1.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 767px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--mark);
    margin-bottom: 0.5rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.875rem 1rem;
    border: 1px solid var(--rule);
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 16px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--mark);
    box-shadow: 0 0 0 3px rgba(107, 31, 44, 0.1);
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--support);
}

.file-upload-area {
    border: 1px dashed var(--rule);
    border-radius: 0;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
    max-width: 100%;
    box-sizing: border-box;
}

.file-upload-area:hover {
    border-color: var(--mark);
    background-color: rgba(107, 31, 44, 0.02);
}

.file-upload-area input[type="file"] {
    display: none;
}

.file-upload-icon {
    margin-bottom: 0.5rem;
}

.file-upload-icon svg {
    width: 32px;
    height: 32px;
    color: var(--mark);
    opacity: 0.5;
}

.file-upload-text {
    font-size: 14px;
    color: var(--mark);
    font-weight: 500;
}

.file-upload-text span {
    color: var(--support);
    text-decoration: underline;
}

.file-upload-help {
    font-size: 13px;
    color: var(--support);
    margin-top: 0.25rem;
}

.form-help-text {
    font-size: 13px;
    color: var(--support);
    margin-top: 0.375rem;
}

.btn-full {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Map Section */
.map-section {
    height: 400px;
    background: var(--paper);
    position: relative;
}

.map-section iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Text muted utility */
.text-muted {
    color: var(--ink);
}

/* ==========================================================================
   County Cards - Service Area Grid
   ========================================================================== */

.county-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 640px) {
    .county-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .county-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.county-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 0;
    padding: 24px;
}

.county-card h3 {
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 12px;
}

.county-card p {
    font-size: 14px;
    color: var(--support);
    line-height: 1.8;
    margin: 0;
}

/* ==========================================================================
   26. Reduced Motion
   ========================================================================== */

/* ==========================================================================
   27. Bento Grid Section
   ========================================================================== */

.bento-section {
    padding: var(--section-padding) 0;
    background: var(--paper);
}

.bento-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
}

@media (min-width: 640px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .bento-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, minmax(180px, auto));
    }
}

a.bento-block {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.2s ease;
}

a.bento-block:hover {
    transform: translateY(-2px);
}

.bento-block {
    position: relative;
    min-height: 180px;
    overflow: hidden;
    transition: transform 0.25s ease, filter 0.25s ease;
}

.bento-block-image {
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

.bento-block-image .bento-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transition: transform 0.45s ease;
}

.bento-block-image:hover .bento-img {
    transform: scale(1.03);
}

.bento-block-image::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(107, 31, 44, 0.55) 0%, transparent 55%);
    pointer-events: none;
}

.bento-block-image:hover {
    filter: brightness(1.03);
}

.bento-block-image .bento-label {
    position: absolute;
    bottom: 24px;
    left: 24px;
    z-index: 2;
}

.bento-block-image .bento-label-tag {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
    display: block;
}

.bento-block-image .bento-label-title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 400;
    color: var(--white);
    margin: 0;
}

.bento-block-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px;
}

.bento-block-text:hover {
    transform: translateY(-2px);
}

/* Block 1: Large project image - spans 2 cols 2 rows */
@media (min-width: 1024px) {
    .bento-block-1 {
        grid-column: span 2;
        grid-row: span 2;
    }
}

/* Block 2: Stat block */
.bento-block-stat {
    background: var(--mark);
    text-align: center;
}

.bento-stat-value {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: 400;
    color: var(--ring);
    line-height: 1;
    margin-bottom: 8px;
}

.bento-stat-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(244, 239, 230, 0.72);
}

/* Block 3: Quote block */
.bento-block-quote {
    background: var(--ring);
}

@media (min-width: 1024px) {
    .bento-block-quote {
        grid-row: span 2;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.bento-quote {
    font-family: var(--font-display);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    color: var(--mark);
    line-height: 1.5;
    margin: 0;
}

/* Block 4: Service label block */
.bento-block-service {
    background: var(--paper-deep);
    border: 1px solid var(--rule);
}

.bento-service-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 400;
    color: var(--mark);
    margin: 0 0 12px 0;
}

.bento-service-desc {
    font-size: 14px;
    color: var(--ink);
    margin: 0;
    line-height: 1.6;
}

/* Block 5: Second project image - spans 2 cols */
@media (min-width: 1024px) {
    .bento-block-5 {
        grid-column: span 2;
    }
}

/* Block 6: CTA block */
.bento-block-cta {
    background: var(--mark);
    cursor: pointer;
}

.bento-block-cta:hover {
    background: var(--mark);
}

.bento-cta-title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 400;
    color: var(--white);
    margin: 0 0 16px 0;
}

.bento-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--ring);
    text-decoration: none;
    transition: gap 0.2s ease;
}

.bento-cta-link:hover {
    gap: 12px;
    color: var(--white);
}

.bento-cta-link svg {
    width: 16px;
    height: 16px;
}

/* Block 7: Location block */
.bento-block-location {
    background: var(--paper-deep);
}

.bento-location-tag {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 12px;
    display: block;
}

.bento-location-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 400;
    color: var(--mark);
    margin: 0;
    line-height: 1.3;
}

/* ==========================================================================
   28. Scroll Animations
   ========================================================================== */

/* Fade In Up - default scroll reveal animation */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fade In Left */
.fade-in-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Fade In Right */
.fade-in-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Scale In */
.scale-in {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scale-in.visible {
    opacity: 1;
    transform: scale(1);
}

/* Staggered children animation */
.stagger-children > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.stagger-children.visible > *:nth-child(1) { transition-delay: 0.1s; }
.stagger-children.visible > *:nth-child(2) { transition-delay: 0.2s; }
.stagger-children.visible > *:nth-child(3) { transition-delay: 0.3s; }
.stagger-children.visible > *:nth-child(4) { transition-delay: 0.4s; }
.stagger-children.visible > *:nth-child(5) { transition-delay: 0.5s; }
.stagger-children.visible > *:nth-child(6) { transition-delay: 0.6s; }

.stagger-children.visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   28. Hero Animations
   ========================================================================== */

.hero-content {
    animation: heroFadeIn 1s ease-out forwards;
}

@keyframes heroFadeIn {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-badge {
    animation: heroSlideIn 0.8s ease-out 0.2s forwards;
    opacity: 0;
}

@keyframes heroSlideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.hero h1 {
    animation: heroTitleIn 0.8s ease-out 0.4s forwards;
    opacity: 0;
}

@keyframes heroTitleIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-lead {
    animation: heroTextIn 0.8s ease-out 0.6s forwards;
    opacity: 0;
}

.hero-features {
    animation: heroTextIn 0.8s ease-out 0.8s forwards;
    opacity: 0;
}

.hero-ctas {
    animation: heroTextIn 0.8s ease-out 1s forwards;
    opacity: 0;
}

@keyframes heroTextIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   29. Enhanced Button Hover Effects
   ========================================================================== */

/* superseded by the crop-mark button treatment at the end of this file */

/* ==========================================================================
   30. Gallery Image Hover Effects
   ========================================================================== */

.gallery-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.gallery-item img {
    transition: transform 0.5s ease, filter 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(30, 28, 25, 0.4), transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.gallery-item:hover::after {
    opacity: 1;
}

/* ==========================================================================
   31. Stats Counter Animation
   ========================================================================== */

.stat-value {
    transition: transform 0.3s ease;
}

.stat:hover .stat-value {
    transform: scale(1.05);
}

/* ==========================================================================
   32. Service Card Enhanced Hover
   ========================================================================== */

.service-card {
    position: relative;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-normal);
    z-index: 1;
}

.service-card:hover::before {
    transform: scaleX(1);
}

/* ==========================================================================
   33. Why Choose Us Card Hover
   ========================================================================== */

.why-choose-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.why-choose-card:hover {
    transform: translateY(-4px);
    box-shadow: none;
}

/* ==========================================================================
   34. County Card Hover
   ========================================================================== */

.county-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.county-card:hover {
    transform: translateY(-2px);
    box-shadow: none;
    border-color: var(--support);
}

/* ==========================================================================
   35. Navigation Scroll Enhancement
   ========================================================================== */

.nav {
    transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

.nav.scrolled {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ==========================================================================
   36. Value Item Hover
   ========================================================================== */

.value-item {
    transition: border-color 0.3s ease;
}

.value-item:hover {
    border-color: var(--mark);
}

/* ==========================================================================
   26. Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }

    .fade-in-up,
    .fade-in-left,
    .fade-in-right,
    .scale-in,
    .stagger-children > * {
        opacity: 1;
        transform: none;
    }

    .hero-badge,
    .hero h1,
    .hero-lead,
    .hero-features,
    .hero-ctas {
        opacity: 1;
        animation: none;
    }
}

/* ==========================================================================
   37. Organic Shapes & Gradient Library
   ========================================================================== */

/* Blob SVG backgrounds as data URIs */
:root {
    --blob-1: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M47.5,-57.2C59.9,-45.8,67.3,-29.3,70.3,-12.1C73.3,5.1,71.9,23,63.6,37.3C55.3,51.6,40.1,62.3,23.4,68.1C6.7,73.9,-11.5,74.8,-27.8,69.3C-44.1,63.8,-58.5,51.9,-67.1,36.4C-75.7,20.9,-78.5,1.8,-74.3,-15.3C-70.1,-32.4,-58.9,-47.5,-44.8,-58.6C-30.7,-69.7,-13.7,-76.8,1.8,-78.9C17.3,-81,35.1,-68.6,47.5,-57.2Z' transform='translate(100 100)'/%3E%3C/svg%3E");
    --blob-2: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M39.9,-51.3C52.3,-42.9,63.4,-31.6,68.7,-17.6C74,-3.6,73.5,13.1,67.2,27.1C60.9,41.1,48.8,52.4,34.8,59.5C20.8,66.6,4.9,69.5,-10.4,67.8C-25.7,66.1,-40.4,59.8,-52.1,49.3C-63.8,38.8,-72.5,24.1,-75.1,8.1C-77.7,-7.9,-74.2,-25.2,-64.8,-38.1C-55.4,-51,-40.1,-59.5,-25.1,-66.7C-10.1,-73.9,4.6,-79.8,18.1,-76.4C31.6,-73,47.5,-59.7,39.9,-51.3Z' transform='translate(100 100)'/%3E%3C/svg%3E");
    --blob-3: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M44.3,-54.4C57.2,-46.5,67.1,-32.3,71.8,-16.2C76.5,-0.1,76,17.9,69.2,33.1C62.4,48.3,49.3,60.7,34.1,67.5C18.9,74.3,1.6,75.5,-14.9,72.1C-31.4,68.7,-47.1,60.7,-58.9,48.2C-70.7,35.7,-78.6,18.7,-79.3,1.2C-80,-16.3,-73.5,-34.2,-62.1,-47.2C-50.7,-60.2,-34.4,-68.3,-18.3,-71.8C-2.2,-75.3,13.7,-74.2,28.2,-68.1C42.7,-62,57.2,-50.9,44.3,-54.4Z' transform='translate(100 100)'/%3E%3C/svg%3E");
}

/* Reusable blob decorations */
.blob-decoration {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.blob-1 {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%235A6678' d='M47.5,-57.2C59.9,-45.8,67.3,-29.3,70.3,-12.1C73.3,5.1,71.9,23,63.6,37.3C55.3,51.6,40.1,62.3,23.4,68.1C6.7,73.9,-11.5,74.8,-27.8,69.3C-44.1,63.8,-58.5,51.9,-67.1,36.4C-75.7,20.9,-78.5,1.8,-74.3,-15.3C-70.1,-32.4,-58.9,-47.5,-44.8,-58.6C-30.7,-69.7,-13.7,-76.8,1.8,-78.9C17.3,-81,35.1,-68.6,47.5,-57.2Z' transform='translate(100 100)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.blob-2 {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ECE0BD' d='M39.9,-51.3C52.3,-42.9,63.4,-31.6,68.7,-17.6C74,-3.6,73.5,13.1,67.2,27.1C60.9,41.1,48.8,52.4,34.8,59.5C20.8,66.6,4.9,69.5,-10.4,67.8C-25.7,66.1,-40.4,59.8,-52.1,49.3C-63.8,38.8,-72.5,24.1,-75.1,8.1C-77.7,-7.9,-74.2,-25.2,-64.8,-38.1C-55.4,-51,-40.1,-59.5,-25.1,-66.7C-10.1,-73.9,4.6,-79.8,18.1,-76.4C31.6,-73,47.5,-59.7,39.9,-51.3Z' transform='translate(100 100)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.blob-3 {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%235A6678' d='M44.3,-54.4C57.2,-46.5,67.1,-32.3,71.8,-16.2C76.5,-0.1,76,17.9,69.2,33.1C62.4,48.3,49.3,60.7,34.1,67.5C18.9,74.3,1.6,75.5,-14.9,72.1C-31.4,68.7,-47.1,60.7,-58.9,48.2C-70.7,35.7,-78.6,18.7,-79.3,1.2C-80,-16.3,-73.5,-34.2,-62.1,-47.2C-50.7,-60.2,-34.4,-68.3,-18.3,-71.8C-2.2,-75.3,13.7,-74.2,28.2,-68.1C42.7,-62,57.2,-50.9,44.3,-54.4Z' transform='translate(100 100)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

/* Gradient wash backgrounds */
.gradient-cream-white {
    background: var(--paper);
}

.gradient-mint-white {
    background: var(--paper);
}

.gradient-cream-beige {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(201, 194, 178, 0.15) 100%);
}

/* Radial gradient for page heroes */
.gradient-radial-mint {
    background: radial-gradient(ellipse at center, var(--paper) 0%, var(--paper) 100%);
}

/* ==========================================================================
   38. Section-specific organic backgrounds
   ========================================================================== */

/* Bento section gradient wash */
.bento-section {
    position: relative;
    background: var(--paper);
}

/* Why Choose Us with blob - update existing */
.section-why-choose::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 700px;
    height: 700px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%235A6678' d='M47.5,-57.2C59.9,-45.8,67.3,-29.3,70.3,-12.1C73.3,5.1,71.9,23,63.6,37.3C55.3,51.6,40.1,62.3,23.4,68.1C6.7,73.9,-11.5,74.8,-27.8,69.3C-44.1,63.8,-58.5,51.9,-67.1,36.4C-75.7,20.9,-78.5,1.8,-74.3,-15.3C-70.1,-32.4,-58.9,-47.5,-44.8,-58.6C-30.7,-69.7,-13.7,-76.8,1.8,-78.9C17.3,-81,35.1,-68.6,47.5,-57.2Z' transform='translate(100 100)'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
}

/* Service page hero radial gradient */
/* Interior hero: a subtle wash from --ring (kept low, the ring is dark)
   down into --paper. Centred text, no CTAs. color-mix keeps it token-driven. */
.page-hero {
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
}

/* FAQ section gradient */
.faq-section,
.section-faq {
    position: relative;
    background: var(--paper);
}

/* Related services gradient */
.section-related {
    position: relative;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(201, 194, 178, 0.15) 100%);
}

/* About page Our Story gradient - already defined, enhance */
.section-story {
    background: var(--paper);
}

/* About page Our Values with blob */
.section-values {
    position: relative;
    overflow: hidden;
}

.section-values::before {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -15%;
    width: 600px;
    height: 600px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ECE0BD' d='M39.9,-51.3C52.3,-42.9,63.4,-31.6,68.7,-17.6C74,-3.6,73.5,13.1,67.2,27.1C60.9,41.1,48.8,52.4,34.8,59.5C20.8,66.6,4.9,69.5,-10.4,67.8C-25.7,66.1,-40.4,59.8,-52.1,49.3C-63.8,38.8,-72.5,24.1,-75.1,8.1C-77.7,-7.9,-74.2,-25.2,-64.8,-38.1C-55.4,-51,-40.1,-59.5,-25.1,-66.7C-10.1,-73.9,4.6,-79.8,18.1,-76.4C31.6,-73,47.5,-59.7,39.9,-51.3Z' transform='translate(100 100)'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
}

/* About page Our Brands cream overlay */
.section-brands {
    background: rgba(244, 239, 230, 0.4);
}

/* Gallery page hero */
.gallery-hero {
    background: radial-gradient(ellipse at center, var(--paper) 0%, var(--paper) 100%);
}

/* Gallery section divider */
.gallery-category {
    position: relative;
}

.gallery-category::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent 0%, rgba(201, 194, 178, 0.3) 50%, transparent 100%);
}

.gallery-category:last-child::after {
    display: none;
}

/* Contact page form section */
.section-contact-form {
    background: var(--paper);
    overflow-x: hidden;
}

/* Contact page county cards */
.section-counties {
    background: rgba(244, 239, 230, 0.2);
}

/* Gallery page section */
.section-gallery {
    position: relative;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(244, 239, 230, 0.3) 50%, rgba(255, 255, 255, 1) 100%);
}

/* Gallery category dividers */
.gallery-category + .gallery-category {
    position: relative;
    margin-top: 80px;
    padding-top: 80px;
}

.gallery-category + .gallery-category::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 1px;
    background: linear-gradient(to right, transparent 0%, rgba(244, 239, 230, 0.6) 20%, rgba(244, 239, 230, 0.6) 80%, transparent 100%);
}

/* Service page related services section */
.section-related {
    position: relative;
    overflow: hidden;
    background: var(--paper);
}

.section-related::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -150px;
    width: 400px;
    height: 400px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ECE0BD' d='M47.5,-57.2C59.9,-45.8,67.3,-29.3,70.3,-12.1C73.3,5.1,71.9,23,63.6,37.3C55.3,51.6,40.1,62.3,23.4,68.1C6.7,73.9,-11.5,74.8,-27.8,69.3C-44.1,63.8,-58.5,51.9,-67.1,36.4C-75.7,20.9,-78.5,1.8,-74.3,-15.3C-70.1,-32.4,-58.9,-47.5,-44.8,-58.6C-30.7,-69.7,-13.7,-76.8,1.8,-78.9C17.3,-81,35.1,-68.6,47.5,-57.2Z' transform='translate(100 100)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.08;
    z-index: 0;
}

/* Stats section subtle gradient */
.section-stats {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(244, 239, 230, 0.3) 100%);
}

/* Introduction section subtle warmth */
.section-intro {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(244, 239, 230, 0.2) 100%);
}
.section-intro .fade-in-right img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center;
}
@media (min-width: 768px) {
    .section-intro .grid-2 { align-items: center; }
}

/* Services grid section */
.section-services {
    position: relative;
    background: linear-gradient(to bottom, var(--paper) 0%, rgba(244, 239, 230, 0.6) 50%, var(--paper) 100%);
}

/* Carousel section subtle gradient */
.projects-carousel-section {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(244, 239, 230, 0.15) 50%, rgba(255, 255, 255, 1) 100%);
}

/* CTA section enhance */
.cta-section {
    position: relative;
    background: linear-gradient(135deg, var(--paper) 0%, rgba(244, 239, 230, 0.8) 50%, var(--paper) 100%);
}

/* ==========================================================================
   39. Mobile Touch Targets (Accessibility)
   ========================================================================== */

@media (max-width: 767px) {
    /* Ensure minimum 44px touch targets */
    .btn,
    .nav-cta,
    .mobile-menu a,
    .mobile-submenu-toggle,
    .footer-links a,
    .footer-social a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .mobile-menu a {
        padding: 12px 0;
    }

    .mobile-submenu-toggle {
        min-height: 44px;
    }

    .footer-social a {
        width: 44px;
        height: 44px;
    }

    /* Bento grid single column on mobile */
    .bento-grid {
        grid-template-columns: 1fr;
    }

    .bento-block {
        min-height: 200px;
    }

    .bento-block-1,
    .bento-block-5 {
        min-height: 280px;
    }
}

/* ==========================================================================
   40. Architectural Design Cues
   ========================================================================== */

/* --- Lucide Icon Styling --- */
.lucide-icon {
    width: 20px;
    height: 20px;
    stroke: var(--support);
    stroke-width: 1.5;
    fill: none;
    flex-shrink: 0;
}

.lucide-icon-lg {
    width: 24px;
    height: 24px;
}

/* Icon + text inline layout */
.icon-text {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Service card icon above heading */
.service-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.service-card-icon .lucide-icon {
    width: 24px;
    height: 24px;
}

/* --- Thin Ruled Lines (Architectural) --- */

/* Section label with ruled lines */
.section-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 16px;
}

.section-label::before,
.section-label::after {
    content: '';
    width: 40px;
    height: 1px;
    background: var(--paper-deep);
    flex-shrink: 0;
}

/* Full-width horizontal rule */
.rule-horizontal {
    width: 100%;
    height: 1px;
    background: var(--paper-deep);
    border: none;
    margin: 48px 0;
}

/* Content section dividers on service pages */
.service-section {
    position: relative;
    padding-bottom: 48px;
    margin-bottom: 48px;
}

.service-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--paper-deep);
}

.service-section:last-of-type::after {
    display: none;
}

/* Footer ruled lines */
.footer-grid > div {
    position: relative;
}

@media (min-width: 1024px) {
    .footer-grid > div:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 0;
        right: -20px;
        width: 1px;
        height: 100%;
        background: rgba(201, 194, 178, 0.3);
    }
}

.footer-bottom {
    position: relative;
}

.footer-bottom::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(201, 194, 178, 0.3);
}

/* --- Grid References & Technical Annotations --- */

/* JetBrains Mono (var(--font-mono)) for technical annotations */

.annotation {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.05em;
    position: absolute;
    pointer-events: none;
    z-index: 5;
}

/* Hero coordinates (bottom left) */
.annotation-coords {
    bottom: 24px;
    left: 24px;
    color: rgba(255, 255, 255, 0.3);
}

/* Hero location code (bottom right) */
.annotation-location {
    bottom: 24px;
    right: 24px;
    color: rgba(0, 0, 0, 0.15);
}

/* Service reference code (top right of hero) */
.annotation-ref {
    top: 24px;
    right: 24px;
    color: var(--accent-text);
}

/* Section numbering */
.section-number {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    color: var(--accent-text);
    position: absolute;
    left: -60px;
    top: 0;
    letter-spacing: 0.05em;
}

@media (max-width: 1200px) {
    .section-number {
        position: static;
        margin-bottom: 8px;
        display: block;
    }
}

/* Numbered section container */
.numbered-section {
    position: relative;
}

/* --- Oversized Pull Quote Marks --- */

.quote-decorated {
    position: relative;
}

.quote-decorated::before {
    content: '"';
    font-family: var(--font-display);
    font-size: 180px;
    line-height: 1;
    color: var(--accent-text);
    opacity: 0.4;
    position: absolute;
    top: -40px;
    left: -20px;
    pointer-events: none;
    z-index: 0;
}

.quote-decorated > * {
    position: relative;
    z-index: 1;
}

/* Bento grid quote - smaller decorative mark */
.bento-block-quote {
    position: relative;
}

.bento-block-quote::before {
    content: '';
    font-family: var(--font-display);
    font-size: 120px;
    line-height: 1;
    color: var(--accent-text);
    opacity: 0.5;
    position: absolute;
    top: 10px;
    left: 15px;
    pointer-events: none;
    z-index: 0;
}

.bento-block-quote .bento-quote {
    position: relative;
    z-index: 1;
}

/* --- Paper/Linen Texture Overlay --- */

/* SVG noise texture as data URI */
.texture-paper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.025;
    pointer-events: none;
    z-index: 1;
}

/* Apply texture to specific sections */
.bento-section,
.section-why-choose,
.section-story,
.faq-section,
.section-faq {
    position: relative;
}

.bento-section::after,
.section-why-choose::after,
.section-story::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.025;
    pointer-events: none;
    z-index: 1;
}

/* Ensure content stays above texture */
.bento-section > .container,
.section-why-choose > .container,
.section-story > .container,
.faq-section > .container,
.section-faq > .container {
    position: relative;
    z-index: 2;
}

/* --- Contact Item Icons --- */
.contact-item-icon .lucide-icon {
    width: 20px;
    height: 20px;
    stroke: var(--support);
    stroke-width: 1.5;
}

/* --- Why Choose Us Card Icons --- */
.why-card-icon {
    margin-bottom: 16px;
}

.why-card-icon .lucide-icon {
    width: 28px;
    height: 28px;
    stroke: var(--support);
    stroke-width: 1.5;
}

/* --- Values Grid Icons --- */
.value-icon {
    margin-bottom: 12px;
}

.value-icon .lucide-icon {
    width: 24px;
    height: 24px;
    stroke: var(--support);
    stroke-width: 1.5;
}

/* --- Service Page Heading Icons --- */
.service-heading-icon {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.service-heading-icon .lucide-icon {
    width: 28px;
    height: 28px;
    stroke: var(--support);
    stroke-width: 1.5;
}

/* ==========================================================================
   41. Brand Graphic Language — reusable across all Barnsbury Group sites.
   Token-driven; nothing here is hard-coded to the Belfast colourway.
   ========================================================================== */

/* --- Footer endorsement line --- */
/* "a studio of the barnsbury group" — Inter Tight regular, 12px,
   white at 65% on the dark footer; "barnsbury" bolded to full white. */
.footer-endorsement {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 20px;
}

.footer-endorsement strong {
    font-weight: 600;
    color: var(--white);
}

/* --- Hairline --- */
/* 0.5pt architectural rule in --ink, for dividers, column heads,
   plate frames. Rendered at the thinnest reliable web weight. */
.hairline {
    border: none;
    height: 1px;
    background: var(--ink);
    opacity: 0.6;
    width: 100%;
    margin: 32px 0;
}

.hairline-accent { background: var(--accent); opacity: 1; }

/* --- Plate --- */
/* A photograph framed by a thin rule, captioned in JetBrains Mono
   uppercase and numbered like a book plate ("PLATE 04"). */
.plate {
    display: block;
    border: 1px solid var(--ink);
    padding: 10px;
    background: var(--paper);
}

.plate img {
    display: block;
    width: 100%;
    height: auto;
}

.plate-caption {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--support);
}

.plate-caption .plate-number { color: var(--accent-text); }

/* --- Ledger --- */
/* A horizontal strip of tabular metadata in JetBrains Mono uppercase,
   following the invoice / tender grammar (ref, date, surveyor, doc no). */
.ledger {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--support);
}

.ledger-cell {
    flex: 1 1 auto;
    min-width: 140px;
    padding: 12px 16px;
    border-right: 1px solid rgba(68, 68, 68, 0.18);
}

.ledger-cell:last-child { border-right: none; }

.ledger-cell .ledger-key {
    display: block;
    font-size: 9px;
    opacity: 0.7;
    margin-bottom: 4px;
}

.ledger-cell .ledger-value {
    display: block;
    color: var(--ink);
}

/* --- Horn glyph --- */
/* The horn silhouette used as inline punctuation (off-circle glyph
   expression — no ring). Swap the background-image per brand mark. */
.horn-glyph {
    display: inline-block;
    width: 0.72em;
    height: 0.72em;
    vertical-align: -0.04em;
    margin: 0 0.18em;
    background-color: var(--accent-text);
    -webkit-mask: url("/images/mark/horn-glyph.svg") center / contain no-repeat;
    mask: url("/images/mark/horn-glyph.svg") center / contain no-repeat;
}

/* ==========================================================================
   42. Brand Book routing & polish
   Lora is the reading face (body, headings); Inter Tight is UI; Mono is meta.
   ========================================================================== */
.nav-links a, .nav-dropdown a, .mobile-menu a, .mobile-submenu-toggle,
.nav-cta, .nav-cta span, .btn, .nav-logo-text, .footer-logo-text,
.footer-links a, .hero-features span,
input, select, textarea, .form-group label,
.file-upload-text, .file-upload-help {
    font-family: var(--font-body);            /* Inter Tight — UI voice */
}
.section-label, .hero-badge, .stat-label, .service-card-number {
    font-family: var(--font-mono);            /* metadata / eyebrows */
}
/* Hairlines use the brand rule colour */
.hairline { background: var(--rule); opacity: 1; }
/* Linen-red selection, refined link offset */
::selection { background: var(--accent); color: var(--paper); }
a { text-underline-offset: 3px; }

/* ==========================================================================
   43. Editorial devices — numbered labels, ledger strip, book plates
   ========================================================================== */
/* Numbered section label: the NN is linen-red, like the Design Starter */
.section-label .sec-n { color: var(--accent-text); }

/* Full-width ledger strip — mono metadata under a hero */
.ledger-strip {
    background: var(--paper-deep);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.ledger-strip .container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 0;
    padding: 16px 40px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--support);
}
.ledger-strip span { white-space: nowrap; }
.ledger-strip span:not(:last-child)::after {
    content: "·";
    margin: 0 22px;
    color: var(--accent-text);
}

/* Gallery as book plates: hairline frame + auto-numbered mono caption */
body { counter-reset: plate; }
.gallery-item {
    border: 1px solid var(--rule);
    padding: 8px;
    background: var(--paper);
    counter-increment: plate;
}
.gallery-item::after {
    content: "Plate " counter(plate, decimal-leading-zero);
    display: block;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 10px;
    color: var(--accent-text);
    padding-top: 9px;
}
/* Numbered eyebrow reads as a simple left label (no flanking rules) */
.section-label { display: inline-block; }
.section-label::before, .section-label::after { content: none; }

/* ==========================================================================
   44. Services as an editorial ruled list (architectural ledger rows)
   ========================================================================== */
.service-list {
    border-top: 1px solid var(--ink);   /* heavier ledger rule to open the list */
}
.service-row {
    display: grid;
    grid-template-columns: 88px 1fr auto;
    gap: 44px;
    align-items: baseline;
    padding: 42px 0;
    border-bottom: 1px solid var(--rule);
    color: inherit;
    transition: padding-left var(--transition-normal);
}
.service-row:hover { padding-left: 14px; }
.service-row-n {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.14em;
    color: var(--accent-text);
    padding-top: 7px;
}
.service-row h3 { margin: 0; color: var(--mark); }
.service-row-body p {
    color: var(--support);
    margin-top: 12px;
    max-width: 60ch;
    font-size: 16px;
}
.service-row-go {
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: -0.01em;
    text-transform: lowercase;
    color: var(--mark);
    white-space: nowrap;
    border-bottom: 1px solid var(--accent);
    padding-bottom: 3px;
    align-self: center;
}
.service-row:hover .service-row-go { color: var(--accent-text); }
@media (max-width: 680px) {
    .service-row { grid-template-columns: 44px 1fr; gap: 18px; }
    .service-row-go { grid-column: 2; justify-self: start; margin-top: 10px; }
}

/* ==========================================================================
   45. The Group — navy band (compact) + ruled stats
   ========================================================================== */
.group-band {
    background: var(--mark);
    color: rgba(244, 239, 230, 0.82);
    padding: 84px 0;
}
.group-band .section-label { color: rgba(244, 235, 217, 0.55); }
.group-band .section-label .sec-n { color: var(--ring); }
.group-band-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 64px;
    margin-top: 30px;
    align-items: start;
}
.group-band h2 {
    color: var(--ring);
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.08;
    letter-spacing: -0.025em;
    max-width: 22ch;
    margin: 0;
}
.group-band p {
    color: rgba(244, 239, 230, 0.85);
    max-width: 50ch;
    margin-top: 20px;
    font-size: 17px;
    line-height: 1.7;
}
.group-band-aside { padding-top: 6px; }
.group-band-seal { width: 76px; height: 76px; margin-bottom: 24px; }
.group-band-cap {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 10px;
    color: rgba(244, 235, 217, 0.55);
    margin-bottom: 14px;
}
.group-roster { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.group-roster li {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: -0.01em;
    text-transform: lowercase;
    color: rgba(244, 239, 230, 0.9);
    padding-left: 0;
    margin: 0;
}
.group-roster li::before { display: none; }
.group-roster li.here { color: var(--ring); }
.nowrap { white-space: nowrap; }
@media (max-width: 760px) { .group-band-grid { grid-template-columns: 1fr; gap: 36px; } }

/* Stats as an architectural ruled band */
.stats-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--rule);
    gap: 0;
}
.stats-bar .stat {
    padding: 44px 28px;
    border-right: 1px solid var(--rule);
}
.stats-bar .stat:last-child { border-right: none; }
.stat-label {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 11px;
    color: var(--support);
    margin-top: 16px;
}
@media (max-width: 680px) {
    .stats-bar { grid-template-columns: 1fr; }
    .stats-bar .stat { border-right: none; border-bottom: 1px solid var(--rule); }
}

/* Asymmetric section header: title left, intro right (architectural) */
.section-header.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: end;
    max-width: none;
}
.section-header.split .section-label { grid-column: 1; grid-row: 1; }
.section-header.split h2 { grid-column: 1; grid-row: 2; margin: 0; }
.section-header.split p { grid-column: 2; grid-row: 2; align-self: end; margin: 0; color: var(--support); max-width: 46ch; }
@media (max-width: 760px) {
    .section-header.split { grid-template-columns: 1fr; gap: 18px; }
    .section-header.split h2, .section-header.split p { grid-column: 1; }
    .section-header.split p { grid-row: auto; }
}

/* ==========================================================================
   46. Brand rule (Barnsbury Joinery): Lora is roman in running body copy.
   Italic is permitted in headlines, editorial subheads, pull-quotes, the
   Group lockup's "the", and the wordmark. (Belfast's stricter "roman
   everywhere" rule is Belfast-only and is NOT applied here.)
   ========================================================================== */
p, li, figcaption, address,
.lead, .hero-lead, .page-hero .lead {
    font-style: normal;
}
/* Sanctioned italics restore where intentionally marked up. */
.group-lockup .the, .pull-quote em, h1 em, h2 em, h3 em {
    font-style: italic;
}

/* Footer contact: top-align the pin icon with the first line of a multi-line address */
.footer-contact .icon-text { align-items: flex-start; }
.footer-contact .icon-text .lucide-icon { margin-top: 3px; }

/* ==========================================================================
   47. The Barnsbury Group banner — canonical, identical on every studio site.
   Rendered in the Group's OWN register: Ledger Ink #1E2022 + Lora display on
   a fixed off-white ground. NOT tinted to the host brand. Links driven from
   /sites.json (hydrated by inline script; static markup is the crawlable
   fallback and should be generated from sites.json by the back-port script).
   ========================================================================== */
.group-banner {
    background: #F4EFE6;
    color: #1E2022;
    border-top: 1px solid rgba(30, 32, 34, 0.14);
    border-bottom: 1px solid rgba(30, 32, 34, 0.14);
    padding: 64px 0;
}
.group-banner .container {
    display: grid;
    gap: 28px;
}
@media (min-width: 880px) {
    .group-banner .container {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        align-items: start;
        gap: 56px;
    }
}
.group-lockup {
    font-family: var(--font-display);
    color: #1E2022;
    font-size: 34px;
    line-height: 1.05;
    letter-spacing: -0.01em;
    font-weight: 400;
}
.group-lockup .the {
    font-style: italic;
    font-weight: 400;
    margin-right: 0.12em;
}
.group-lockup .grp {
    font-family: var(--font-body);
    font-size: 0.42em;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    vertical-align: 0.34em;
    margin-left: 0.34em;
}
.group-descriptor {
    font-family: var(--font-display);
    font-size: 17px;
    line-height: 1.6;
    color: #3A3D3F;
    max-width: 52ch;
    margin: 14px 0 0;
}
.group-sites-cap {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #6A6D6F;
    margin: 0 0 16px;
    display: block;
}
.group-sites {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 0;
    line-height: 1.8;
}
.group-sites li { display: inline; }
.group-sites li::before { display: none; }
.group-sites li:not(:last-child)::after {
    content: "·";
    color: var(--accent-text);
    margin: 0 12px;
}
.group-sites a {
    font-family: var(--font-body);
    font-size: 15px;
    color: #1E2022;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition-fast);
}
.group-sites a:hover { border-bottom-color: #1E2022; }
.group-sites a[aria-current="page"] { font-weight: 600; }
@media (max-width: 560px) {
    .group-lockup { font-size: 28px; }
    .group-banner { padding: 48px 0; }
}

/* ==========================================================================
   48. IA hub directory grid — clean multi-column link list for the hub pages
   (Areas, Australia, Advice, Supply). Replaces misuse of .service-row.
   ========================================================================== */
.area-group { margin-bottom: 56px; }
.area-group:last-child { margin-bottom: 0; }
.area-group-label {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--support);
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rule);
}
.area-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0 40px;
}
.area-grid a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
    color: var(--mark);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 17px;
    transition: color var(--transition-fast), padding-left var(--transition-fast);
}
.area-grid a:hover { color: var(--accent-text); padding-left: 6px; }
.area-grid a::after {
    content: "\2192";
    font-family: var(--font-body);
    color: var(--ring);
    font-size: 14px;
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.area-grid a:hover::after { opacity: 1; }

/* ==========================================================================
   49. Group-band roster links + luxe blog/FAQ grids
   ========================================================================== */
/* Roster entries become links to the sibling sites; current stays mint. */
.group-roster a { color: inherit; text-decoration: none; transition: color var(--transition-fast); }
.group-roster a:hover { color: var(--ring); }

/* Blog / advice — editorial image cards with a featured lead */
.section-feature-lead { padding-top: 40px; padding-bottom: 4px; }
.blog-feature {
    display: grid; grid-template-columns: 1.12fr 1fr; gap: 0;
    background: var(--paper); border: 1px solid var(--rule); border-radius: 16px;
    overflow: hidden; text-decoration: none; box-shadow: 0 1px 0 var(--rule);
    transition: box-shadow .45s ease, transform .45s ease;
}
.blog-feature:hover { box-shadow: 0 28px 64px -36px rgba(107, 31, 44,.55); transform: translateY(-3px); }
.blog-feature-media { overflow: hidden; background: var(--paper-deep); }
.blog-feature-media img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; display: block; transition: transform .9s ease; }
.blog-feature:hover .blog-feature-media img { transform: scale(1.05); }
.blog-feature-body { padding: 46px 48px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.blog-feature-body h2 { font-family: var(--font-display); font-weight: 500; font-size: 31px; line-height: 1.14; letter-spacing: -.015em; color: var(--mark); margin: 0; }
.blog-feature-body p { color: var(--support); font-size: 16px; line-height: 1.62; margin: 0; }
@media (max-width: 860px) {
    .blog-feature { grid-template-columns: 1fr; }
    .blog-feature-media img { min-height: 220px; }
    .blog-feature-body { padding: 30px 26px; }
    .blog-feature-body h2 { font-size: 25px; }
}

.blog-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 28px; margin-top: 8px; background: none; border: none;
}
.blog-card {
    background: var(--paper); border: 1px solid var(--rule); border-radius: 14px;
    overflow: hidden; display: flex; flex-direction: column; text-decoration: none;
    transition: box-shadow .45s ease, transform .45s ease;
}
.blog-card:hover { box-shadow: 0 22px 52px -34px rgba(107, 31, 44,.5); transform: translateY(-3px); }
.blog-card-media { display: block; overflow: hidden; background: var(--paper-deep); aspect-ratio: 3 / 2; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s ease; }
.blog-card:hover .blog-card-media img { transform: scale(1.06); }
.blog-card-body { padding: 24px 26px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.blog-card-cat {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--accent-text);
}
.blog-card h3 {
    font-family: var(--font-display); font-weight: 500; font-size: 20px; line-height: 1.24;
    letter-spacing: -0.01em; color: var(--mark); margin: 0;
}
.blog-card-excerpt { color: var(--support); font-size: 14.5px; line-height: 1.6; margin: 0; }
.blog-card-go {
    margin-top: auto; padding-top: 10px; display: flex; align-items: baseline;
    justify-content: space-between; gap: 12px;
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
}
.blog-card-go .rg { color: var(--mark); }
.blog-card-go .rg::after { content: "\2192"; margin-left: 7px; color: var(--ring); display: inline-block; transition: transform .3s ease; }
.blog-card:hover .blog-card-go .rg::after, .blog-feature:hover .blog-card-go .rg::after { transform: translateX(4px); }
.blog-card-go em { color: var(--support); font-style: normal; letter-spacing: 0.1em; }
.blog-cat-head {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--support); margin: 60px 0 24px; padding-bottom: 14px; border-bottom: 1px solid var(--rule);
    display: flex; align-items: center; gap: 14px;
}
.blog-cat-head::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.blog-cat-head:first-of-type { margin-top: 8px; }

/* FAQ — luxe hairline-separated card grid */
.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    margin-top: 8px;
}
.faq-card { background: var(--paper); padding: 34px 32px; }
.faq-card h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    color: var(--mark);
    margin: 0 0 14px;
}
.faq-card p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.65; margin: 0; }

/* ==========================================================================
   50. Premium header — tracked uppercase nav titles, iron-red microdot
   separators (the ledger motif), an iron hairline that grows under each item
   on hover/active. Restrained, editorial, flagship.
   ========================================================================== */
.nav-inner { height: 84px; }
.nav-links { gap: 0; }
.nav-links > li { display: flex; align-items: center; }
.nav-links > li + li::before {
    content: "\00B7";
    color: var(--accent-text);
    opacity: 0.7;
    font-size: 14px;
    line-height: 1;
    align-self: center;
    pointer-events: none;
}
.nav-links > li > a {
    position: relative;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--mark);
    padding: 32px 15px;
    gap: 6px;
    transition: color var(--transition-fast);
}
.nav-links > li > a:hover,
.nav-links > li > a.active { color: var(--accent-text); }
.nav-links > li > a::after {
    content: "";
    position: absolute;
    left: 15px; right: 15px; bottom: 28px;
    height: 1.5px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--transition-normal);
}
.nav-links > li > a:hover::after,
.nav-links > li > a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links > li > a[aria-current="page"] { color: var(--mark); }
.nav-links .nav-arrow { width: 9px; height: 9px; opacity: 0.65; }
.nav-dropdown { min-width: 252px; padding: 12px 0; }
.nav-dropdown a {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--support);
    padding: 12px 24px;
}
.nav-dropdown a:hover { color: var(--accent-text); background: var(--paper); }
.nav-cta {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 14px 22px;
}
/* Wordmark refinement — line two in slate for the two-tone the brand intends */
@media (min-width: 640px) {
    .nav-logo-text span:first-child { font-size: 18px; letter-spacing: -0.03em; }
    .nav-logo-text span:last-child { color: var(--support); font-size: 13px; letter-spacing: 0.01em; }
}

/* Premium nav needs room: full nav from 1200px, hamburger below. */
@media (min-width: 1024px) and (max-width: 1199px) {
    .nav-links { display: none; }
    .nav-toggle { display: flex; }
}
.nav-links > li > a { padding-left: 13px; padding-right: 13px; }

/* Final nav tuning — breathing room + elegance */
.nav-links > li > a { padding-left: 11px; padding-right: 11px; letter-spacing: 0.135em; }
.nav-inner { gap: 18px; }

/* ==========================================================================
   51. Homepage full-bleed hero — nav floats over the image (legible via a
   top scrim + light type + mint accents), goes solid navy on scroll.
   Dynamic: slow Ken Burns drift on the image + a scroll cue.
   ========================================================================== */
.home .nav {
    background: linear-gradient(to bottom, rgba(107, 31, 44,0.55) 0%, rgba(107, 31, 44,0.18) 60%, rgba(107, 31, 44,0) 100%);
    border-bottom-color: transparent;
    transition: background var(--transition-normal), border-color var(--transition-normal);
}
.home .nav.scrolled {
    background: var(--mark);
    border-bottom-color: rgba(255,255,255,0.08);
}
/* Light type + mint accents over the image (works on the navy scrolled state too) */
.home .nav-logo-text span:first-child { color: #fff; }
.home .nav-logo-text span:last-child { color: rgba(255,255,255,0.72); }
.home .nav-links > li > a { color: #fff; }
.home .nav-links > li > a:hover { color: var(--ring); }
.home .nav-links > li > a::after { background: var(--ring); }
.home .nav-links > li > a[aria-current="page"] { color: #fff; }
.home .nav-links > li + li::before { color: var(--ring); opacity: 0.85; }
.home .nav-arrow { color: #fff; }
.home .nav-dropdown { background: var(--mark); border-color: rgba(255,255,255,0.1); }
.home .nav-dropdown a { color: rgba(255,255,255,0.8); }
.home .nav-dropdown a:hover { color: var(--ring); background: rgba(255,255,255,0.06); }
.home .nav-cta {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.4);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.home .nav-cta:hover { background: var(--ring); color: var(--mark); border-color: var(--ring); transform: translateY(-2px); }
.home .nav-toggle span { background: #fff; }

/* Dynamic — slow Ken Burns drift on the hero photograph */
.home .hero-bg img {
    animation: heroDrift 24s ease-in-out infinite alternate;
    transform-origin: 60% 40%;
}
@keyframes heroDrift {
    from { transform: scale(1.02); }
    to   { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) { .home .hero-bg img { animation: none; } }

/* Scroll cue — a quiet mint line that pulses down */
.home .hero::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 0;
    width: 1px; height: 64px;
    background: linear-gradient(to bottom, transparent, var(--ring));
    transform: translateX(-50%);
    opacity: 0.8;
    animation: scrollCue 2.4s ease-in-out infinite;
    z-index: 11;
}
@keyframes scrollCue {
    0%   { transform: translate(-50%, -10px); opacity: 0; }
    40%  { opacity: 0.9; }
    100% { transform: translate(-50%, 6px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .home .hero::after { animation: none; opacity: 0.6; } }

/* Frame the portrait shopfront hero so the shopfront band sits in view */
.home .hero-bg img { object-position: center 42%; }

/* Hero: land wider so the full length of the windows shows, then ease in */
.home .hero-bg img { object-position: center 60%; transform-origin: center 52%; }
@keyframes heroDrift {
    from { transform: scale(1.0); }
    to   { transform: scale(1.13); }
}

/* ==========================================================================
   52. Cookie consent — navy ground matching the footer, equal-weight buttons
   ========================================================================== */
#cookie-consent {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000;
    background: var(--ink-deep);
    border-top: 1px solid rgba(244,239,230,0.16);
    color: var(--paper);
}
#cookie-consent[hidden] { display: none; }
.cookie-inner {
    max-width: 1240px; margin: 0 auto;
    padding: 18px clamp(20px,5vw,64px);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 14px 40px;
}
.cookie-text {
    margin: 0; flex: 1 1 340px;
    font-family: var(--font-body); font-size: 14px; line-height: 1.6;
    color: rgba(244,239,230,0.86);
}
.cookie-text a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cookie-text a:hover { color: var(--ring); }
.cookie-actions { display: flex; flex: 0 0 auto; gap: 12px; }
@media (max-width: 560px) {
    .cookie-actions { width: 100%; }
    .cookie-actions .btn { flex: 1 1 auto; }
}

/* Section 53 — service/location page feature image */
.section-feature{padding:0 0 8px}
.section-feature .container{max-width:1080px}
.feature-figure{margin:0;border-radius:14px;overflow:hidden;box-shadow:0 18px 44px -28px rgba(107, 31, 44,.5);background:var(--paper-deep)}
.feature-img{display:block;width:100%;height:clamp(260px,42vw,460px);object-fit:cover}
@media(max-width:640px){.feature-img{height:240px}}

/* ==========================================================================
   54. Editorial area-hub layout (Areas we cover, Australia) — full-bleed hero,
   alternating image/text blocks with numbered eyebrows, refined index.
   ========================================================================== */
.ed-hero { position: relative; min-height: clamp(430px, 52vw, 600px); display: flex; align-items: flex-end; overflow: hidden; background: var(--mark); }
.ed-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.ed-hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(107, 31, 44,.25) 0%, rgba(107, 31, 44,.40) 42%, rgba(107, 31, 44,.84) 100%); }
.ed-hero-inner { position: relative; padding-top: 128px; padding-bottom: 58px; max-width: 860px; }
.ed-hero-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--ring); display: block; margin-bottom: 20px; }
.ed-hero h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(34px, 5vw, 56px); line-height: 1.06; letter-spacing: -.02em; color: #fff; margin: 0 0 20px; }
.ed-hero p { color: rgba(255,255,255,.82); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; max-width: 640px; margin: 0; }

.ed-section { padding-top: 14px; padding-bottom: 14px; }
.ed-block { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; padding: clamp(48px, 6vw, 84px) 0; border-top: 1px solid var(--rule); }
.ed-block:first-child { border-top: none; }
.ed-block-media { border-radius: 16px; overflow: hidden; background: var(--paper-deep); box-shadow: 0 24px 56px -34px rgba(107, 31, 44,.5); }
.ed-block-media img { width: 100%; height: 100%; min-height: clamp(300px, 34vw, 440px); object-fit: cover; display: block; transition: transform .9s ease; }
.ed-block:hover .ed-block-media img { transform: scale(1.04); }
.ed-block-alt .ed-block-media { order: 2; }
.ed-block-body { display: flex; flex-direction: column; gap: 18px; }
.ed-block-n { font-family: var(--font-mono); font-size: 12px; letter-spacing: .22em; color: var(--accent-text); }
.ed-block-body h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 3vw, 33px); line-height: 1.14; letter-spacing: -.015em; color: var(--mark); margin: 0; }
.ed-block-body p { color: var(--support); font-size: 16px; line-height: 1.68; margin: 0; }
@media (max-width: 820px) {
    .ed-block { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
    .ed-block-alt .ed-block-media { order: 0; }
    .ed-block-media img { min-height: 220px; }
}

.ed-index { background: var(--paper-deep); }
.ed-index-head { margin-bottom: 40px; }
.ed-index-head h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 3vw, 32px); color: var(--mark); margin: 8px 0 0; letter-spacing: -.01em; }

/* Editorial hub pages (.ed-page): float the nav over the full-bleed hero, mirroring the homepage treatment so the nav stays legible on any image. */
.ed-page .nav { background: linear-gradient(to bottom, rgba(107, 31, 44,0.58) 0%, rgba(107, 31, 44,0.20) 60%, rgba(107, 31, 44,0) 100%); border-bottom-color: transparent; transition: background var(--transition-normal), border-color var(--transition-normal); }
.ed-page .nav.scrolled { background: var(--mark); border-bottom-color: rgba(255,255,255,0.08); }
.ed-page .nav-logo-text span:first-child { color: #fff; }
.ed-page .nav-logo-text span:last-child { color: rgba(255,255,255,0.72); }
.ed-page .nav-links > li > a, .ed-page .nav-links > li > a[aria-current="page"], .ed-page .nav-arrow { color: #fff; }
.ed-page .nav-links > li > a:hover { color: var(--ring); }
.ed-page .nav-links > li > a::after { background: var(--ring); }
.ed-page .nav-links > li + li::before { color: var(--ring); opacity: 0.85; }
.ed-page .nav-dropdown { background: var(--mark); border-color: rgba(255,255,255,0.1); }
.ed-page .nav-dropdown a { color: rgba(255,255,255,0.8); }
.ed-page .nav-dropdown a:hover { color: var(--ring); background: rgba(255,255,255,0.06); }
.ed-page .nav-cta { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.4); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.ed-page .nav-cta:hover { background: var(--ring); color: var(--mark); border-color: var(--ring); transform: translateY(-2px); }
.ed-page .nav-toggle span { background: #fff; }

/* ==========================================================================
   55. Editorial FAQ page — two-column, sticky aside + numbered accordion.
   (Service-page FAQs keep the .faq-grid card style above.)
   ========================================================================== */
.faq-section { padding-top: clamp(120px, 14vh, 168px); }
.faq-layout { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
.faq-aside { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 20px; }
.faq-aside h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 3.6vw, 42px); line-height: 1.08; letter-spacing: -.02em; color: var(--mark); margin: 8px 0 0; }
.faq-intro { color: var(--support); font-size: 16px; line-height: 1.66; margin: 0; }
.faq-contact-card { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding: 24px 26px; background: var(--mark); border-radius: 14px; text-decoration: none; transition: transform .35s ease; }
.faq-contact-card:hover { transform: translateY(-2px); }
.faq-cc-label { font-family: var(--font-display); font-size: 18px; color: #fff; }
.faq-cc-go { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ring); }
.faq-cc-go::after { content: "\2192"; margin-left: 8px; display: inline-block; transition: transform .3s ease; }
.faq-contact-card:hover .faq-cc-go::after { transform: translateX(4px); }

.faq-list { border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-question { width: 100%; background: none; border: none; cursor: pointer; display: flex; align-items: baseline; gap: 20px; padding: 26px 0; text-align: left; }
.faq-q-num { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--accent-text); flex: none; padding-top: 5px; }
.faq-q-text { flex: 1; font-family: var(--font-display); font-weight: 500; font-size: 19px; line-height: 1.32; color: var(--mark); transition: color var(--transition-fast); }
.faq-question:hover .faq-q-text { color: var(--accent-text); }
.faq-q-icon { position: relative; width: 14px; height: 14px; flex: none; align-self: center; }
.faq-q-icon::before, .faq-q-icon::after { content: ""; position: absolute; background: var(--support); transition: transform .35s ease; }
.faq-q-icon::before { top: 6px; left: 0; width: 14px; height: 1.5px; }
.faq-q-icon::after { left: 6px; top: 0; width: 1.5px; height: 14px; }
.faq-item.active .faq-q-icon::after { transform: scaleY(0); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .45s ease; }
.faq-item.active .faq-answer { max-height: 540px; }
.faq-answer p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.72; margin: 0 0 26px; padding-left: 32px; max-width: 660px; }
@media (max-width: 820px) { .faq-layout { grid-template-columns: 1fr; gap: 30px; } .faq-aside { position: static; } .faq-answer p { padding-left: 0; } }

/* ==========================================================================
   56. Editorial article (blog post) — image hero + constrained body/standfirst.
   ========================================================================== */
.article-hero { min-height: clamp(400px, 48vw, 560px); }
.article-hero .ed-hero-inner { max-width: 820px; }
.article-hero h1 { font-size: clamp(30px, 4.4vw, 48px); }
.article-section { padding-top: clamp(46px, 6vw, 74px); }
.article-body { max-width: 720px; margin: 0 auto; }
.art-intro > p:first-child { font-size: clamp(19px, 2.1vw, 22px); line-height: 1.62; color: var(--mark); margin-bottom: 30px; }
.article-body p { font-size: 17px; line-height: 1.82; color: var(--ink-soft); margin: 0 0 24px; }
.article-body h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(23px, 2.6vw, 29px); line-height: 1.22; letter-spacing: -.01em; color: var(--mark); margin: 46px 0 16px; }
.article-body h2::before { content: ""; display: block; width: 32px; height: 1px; background: var(--accent); margin-bottom: 22px; opacity: .8; }

/* ==========================================================================
   57. Australia hub — services list, restoration process, why-choose, entity.
   ========================================================================== */
.au-h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 3vw, 34px); line-height: 1.14; letter-spacing: -.015em; color: var(--mark); margin: 8px 0 0; }
.au-intro-p { font-size: clamp(17px, 1.9vw, 20px); line-height: 1.66; color: var(--mark); }
.au-intro-p + .au-intro-p { color: var(--support); font-size: 17px; }
.au-cols { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.au-list { list-style: none; margin: 0; padding: 0; }
.au-list li { position: relative; padding: 16px 0 16px 30px; border-top: 1px solid var(--rule); color: var(--mark); font-size: 16.5px; line-height: 1.5; }
.au-list li:first-child { border-top: none; }
.au-list li::before { content: ""; position: absolute; left: 0; top: 24px; width: 12px; height: 1.5px; background: var(--accent); }
.au-steps { display: grid; gap: 0; }
.au-step { display: grid; grid-template-columns: 74px 1fr; gap: 20px; padding: 26px 0; border-top: 1px solid var(--rule); align-items: start; }
.au-step-n { font-family: var(--font-mono); font-size: 22px; color: var(--accent-text); line-height: 1.2; }
.au-step-b h3 { font-family: var(--font-display); font-weight: 500; font-size: 20px; color: var(--mark); margin: 0 0 6px; }
.au-step-b p { color: var(--support); font-size: 16px; line-height: 1.6; margin: 0; max-width: 620px; }
.au-entity { background: var(--mark); padding: clamp(32px, 4vw, 52px); }
.au-entity p { color: rgba(255,255,255,.82); font-size: 16px; line-height: 1.7; margin: 6px 0 0; font-family: var(--font-mono); letter-spacing: .01em; }
.au-entity p:first-of-type { color: #fff; font-family: var(--font-body); font-size: 17px; margin-top: 16px; }
@media (max-width: 820px) { .au-cols { grid-template-columns: 1fr; gap: 22px; } .au-step { grid-template-columns: 54px 1fr; gap: 14px; } }

/* ==========================================================================
   58. EDITORIAL v2 ROLLOUT — square corners, flat (no drop shadows), headlines
   overlapping images (white on scrim), caps eyebrows + serif headings, no
   italics, premium heading scale. Mirrors the signed-off mockup.
   ========================================================================== */

/* -- square + flat, site-wide (photos, cards, panels, controls) -- */
img, figure, .feature-figure, .feature-img,
.blog-card, .blog-card-media, .blog-feature, .blog-feature-media,
.ed-block-media, .gallery-item, .gallery-masonry img,
.faq-contact-card, .au-entity, .brand-tile, .service-card, .hero-tile, .home-tile,
.contact-form, .contact-info, .form-group input, .form-group textarea, .form-group select,
.btn, .nav-cta, .mobile-menu, .nav-dropdown, .ed-index { border-radius: 0 !important; }
*, *::before, *::after { box-shadow: none !important; }

/* -- no italics in display type -- */
h1, h2, h3, h4, .lead, .hero-lead, .ed-block-head, .au-h2, .faq-q-text,
.blog-card h3, .blog-feature-body h2 { font-style: normal !important; }

/* -- CONSISTENT page-hero scale across every page type (enough room, no italic) -- */
.ed-hero { min-height: clamp(440px, 56vh, 620px); }
.ed-hero-scrim { background: linear-gradient(180deg, rgba(107, 31, 44,.20) 0%, rgba(107, 31, 44,.16) 26%, rgba(107, 31, 44,.56) 54%, rgba(107, 31, 44,.90) 100%); }
.ed-hero h1, .article-hero h1, .page-hero h1, .faq-aside h1 {
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(30px, 3.6vw, 48px); line-height: 1.12; letter-spacing: -.018em;
}
.ed-hero h1 { font-weight: 400; color: #fff; }
.page-hero h1 { max-width: 20ch; }

/* -- editorial blocks: heading + number on the clean OAT ground beside the image, NO gradient -- */
.ed-block { grid-template-columns: 1fr 1fr; gap: clamp(40px,5vw,76px); align-items: center; }
.ed-block-media img { min-height: clamp(320px,38vw,500px); }
.ed-block-body { display: flex; flex-direction: column; gap: 16px; }
.ed-block-body .ed-block-n { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .22em; color: var(--accent-text); }
.ed-block-body h2 { display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 2.7vw, 32px); line-height: 1.16; letter-spacing: -.015em; color: var(--mark); margin: 0; }
.ed-block-body p { color: var(--support); font-size: 16.5px; line-height: 1.72; margin: 0; max-width: 460px; }
.ed-block-alt .ed-block-media { order: 2; }
/* consistent section headings elsewhere */
.au-h2, .ed-index-head h2 { font-size: clamp(24px, 2.7vw, 32px) !important; }

/* -- directory index: navy band, white links -- */
.ed-index { background: var(--mark); color: #fff; }
.ed-index-head h2 { color: #fff; }
.ed-index .section-label { color: var(--ring); }
.ed-index .area-group-label { color: rgba(255,255,255,.55); border-bottom-color: rgba(255,255,255,.16); }
.ed-index .area-grid a { color: #fff; border-bottom-color: rgba(255,255,255,.14); }
.ed-index .area-grid a:hover { color: var(--ring); }
.ed-index .area-grid a::after { color: var(--ring); }
.ed-index .annotation { color: rgba(255,255,255,.62); }
.ed-index .annotation a { color: var(--ring); }

/* -- cards: flat hover via lift, not shadow -- */
.blog-card, .blog-feature { border: 1px solid var(--rule); }
.blog-card:hover, .blog-feature:hover, .faq-contact-card:hover { transform: translateY(-3px); border-color: var(--support); }

/* ==========================================================================
   59. ELEVATED EDITORIAL (v3) — approved mockup layouts: statement, staggered
   showcase, asymmetric feature, press index. Lora + Inter Tight + JetBrains
   Mono, mixed. Square, flat, no gradient on section images.
   ========================================================================== */
.ed2-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--accent-text); display: block; }

/* hero meta row (adds under the ed-hero headline) */
.ed-hero-meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.28); }
.ed-hero-meta p { color: rgba(255,255,255,.82); max-width: 440px; font-size: 15.5px; line-height: 1.6; margin: 0; }
.ed-hero-meta span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.72); white-space: nowrap; }

/* STATEMENT */
.ed2-statement { padding: clamp(72px,10vw,150px) 0; text-align: center; }
.ed2-statement .ed2-eyebrow { color: var(--support); }
.ed2-statement h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px,3.4vw,46px); line-height: 1.13; letter-spacing: -.02em; color: var(--mark); max-width: 26ch; margin: 22px auto 0; }
.ed2-statement h2 b { font-weight: 600; }
.ed2-statement p { max-width: 54ch; margin: 30px auto 0; color: var(--support); font-size: 17px; line-height: 1.72; }

/* SHOWCASE — staggered grid */
.ed2-show-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 40px; border-bottom: 1px solid var(--rule); }
.ed2-show-head h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px,4.2vw,60px); line-height: 1.0; letter-spacing: -.02em; color: var(--mark); margin: 0; }
.ed2-show-head .ed2-eyebrow { color: var(--support); margin-bottom: 12px; }
.ed2-show { display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(24px,3vw,46px) clamp(24px,3vw,44px); padding: clamp(44px,5.5vw,84px) 0 clamp(60px,8vw,120px); }
.ed2-shot { display: flex; flex-direction: column; }
.ed2-shot:nth-child(4n+1) { grid-column: 1 / 6; }
.ed2-shot:nth-child(4n+2) { grid-column: 7 / 13; margin-top: clamp(50px,9vw,140px); }
.ed2-shot:nth-child(4n+3) { grid-column: 2 / 7; margin-top: clamp(20px,4vw,60px); }
.ed2-shot:nth-child(4n+4) { grid-column: 8 / 13; margin-top: clamp(24px,4vw,72px); }
.ed2-shot-fig { position: relative; overflow: hidden; background: var(--paper-deep); }
.ed2-shot-fig img { width: 100%; object-fit: cover; display: block; }
.ed2-shot:nth-child(4n+1) .ed2-shot-fig img { aspect-ratio: 4/5.2; }
.ed2-shot:nth-child(4n+2) .ed2-shot-fig img { aspect-ratio: 5/4; }
.ed2-shot:nth-child(4n+3) .ed2-shot-fig img { aspect-ratio: 1/1.1; }
.ed2-shot:nth-child(4n+4) .ed2-shot-fig img { aspect-ratio: 4/4.5; }
.ed2-shot-num { position: absolute; top: 15px; left: 15px; z-index: 2; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; color: #fff; }
.ed2-cap { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; }
.ed2-cap-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-text); }
.ed2-cap-t { font-family: var(--font-display); font-weight: 500; font-size: clamp(19px,1.9vw,24px); line-height: 1.2; color: var(--mark); }
.ed2-cap-d { color: var(--support); font-size: 14.5px; line-height: 1.55; }

/* FEATURE — asymmetric */
.ed2-feature { padding: clamp(64px,8vw,130px) 0; border-top: 1px solid var(--rule); }
.ed2-feature-grid { display: grid; grid-template-columns: 1.35fr .9fr; gap: clamp(34px,5vw,76px); align-items: end; }
.ed2-feature h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(27px,3.4vw,48px); line-height: 1.08; letter-spacing: -.02em; color: var(--mark); margin: 0; max-width: 16ch; }
.ed2-feature h2 b { font-weight: 600; }
.ed2-feature-side .ed2-eyebrow { color: var(--support); }
.ed2-feature-side p { margin: 16px 0 0; color: var(--support); font-size: 16.5px; line-height: 1.72; }
.ed2-feature-img { margin-top: clamp(36px,5vw,68px); position: relative; overflow: hidden; }
.ed2-feature-img img { width: 100%; aspect-ratio: 16/7.5; object-fit: cover; display: block; }
.ed2-feature-tag { position: absolute; left: 20px; bottom: 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #fff; }
@media (max-width: 860px) {
  .ed2-show-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ed2-shot:nth-child(n) { grid-column: 1 / 13; margin-top: 0; }
  .ed2-feature-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* PRESS INDEX rows (use inside the navy .ed-index band) */
.ed2-row { display: grid; grid-template-columns: 34px 1.05fr 1.15fr; gap: 22px; align-items: baseline; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.16); text-decoration: none; }
.ed2-row:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
.ed2-row-p { font-family: var(--font-mono); color: var(--ring); font-size: 14px; }
.ed2-row-n { font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #fff; }
.ed2-row-d { font-family: var(--font-display); font-weight: 400; font-size: 18px; color: rgba(255,255,255,.66); }
.ed2-row:hover .ed2-row-n, .ed2-row:hover .ed2-row-d { color: var(--ring); }
@media (max-width: 640px) { .ed2-row { grid-template-columns: 20px 1fr; } .ed2-row-d { grid-column: 2; } }

/* ed2 feature — eyebrow+heading on top, then tall image + text side by side, alternating */
.ed2-feat { padding: clamp(54px,7vw,108px) 0; border-top: 1px solid var(--rule); }
.ed2-feat-head { max-width: 48ch; margin-bottom: clamp(28px,3.6vw,50px); }
.ed2-feat-head h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px,2.2vw,30px); line-height: 1.16; letter-spacing: -.015em; color: var(--mark); margin: 12px 0 0; text-wrap: pretty; }
.ed2-feat-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(34px,5vw,72px); align-items: center; }
.ed2-feat-media { overflow: hidden; }
.ed2-feat-media img { width: 100%; aspect-ratio: 4/4.3; object-fit: cover; display: block; }
.ed2-feat-alt .ed2-feat-media { order: 2; }
.ed2-feat-body p { color: var(--support); font-size: 16.5px; line-height: 1.74; margin: 0 0 16px; max-width: 54ch; }
.ed2-feat-body p:last-child { margin-bottom: 0; }
@media (max-width: 860px){ .ed2-feat-grid { grid-template-columns: 1fr; gap: 22px; } .ed2-feat-alt .ed2-feat-media { order: 0; } }

/* statement body — centred column, left-aligned paras (keeps the full intro copy) */
.ed2-statement-body { max-width: 76ch; margin: 26px auto 0; text-align: left; }
.ed2-statement-body p { max-width: none; color: var(--support); font-size: 16.5px; line-height: 1.74; margin: 0 0 16px; }
.ed2-statement-body p:last-child { margin-bottom: 0; }
/* consistent, slightly larger premium hero across pages */
.ed-hero h1, .article-hero h1, .page-hero h1, .faq-aside h1 { font-size: clamp(32px, 4.2vw, 56px) !important; line-height: 1.1; }
.ed-hero h1 b { font-weight: 600; }

/* statement accent line between heading and body */
.ed2-rule { display: block; width: 32px; height: 1px; background: var(--accent); margin: 34px auto 4px; }
/* keep section headings to ~two lines */
.ed2-feat-head h2 { max-width: 100%; }

/* small accent line to differentiate the What-we-do / How-it-works / Why-us section headers */
.ed2-mini-rule { display: block; width: 32px; height: 1px; background: var(--accent); margin: 16px 0 4px; }
.au-cols .ed2-mini-rule, .section-header .ed2-mini-rule { margin: 14px 0 2px; }

/* editorial gallery masonry (portfolio images) */
.ed2-gallery { columns: 3; column-gap: clamp(16px,2vw,26px); margin-top: 8px; }
.ed2-gal-item { break-inside: avoid; margin: 0 0 clamp(16px,2vw,26px); overflow: hidden; background: var(--paper-deep); }
.ed2-gal-item img { width: 100%; display: block; transition: transform .8s ease; }
.ed2-gal-item:hover img { transform: scale(1.04); }
@media (max-width: 900px) { .ed2-gallery { columns: 2; } }
@media (max-width: 560px) { .ed2-gallery { columns: 1; } }

/* gallery sections split by an accent-line divider */
.ed2-gal-group { margin-top: clamp(56px,7vw,104px); }
.ed2-gal-group:first-child { margin-top: 0; }
.ed2-gal-head { padding-top: clamp(24px,3vw,40px); border-top: 1px solid var(--rule); margin-bottom: clamp(28px,3.5vw,48px); }
.ed2-gal-group:first-child .ed2-gal-head { padding-top: 0; border-top: none; }
.ed2-gal-h { font-family: var(--font-display); font-weight: 500; font-size: clamp(22px,2.5vw,32px); line-height: 1.14; letter-spacing: -.015em; color: var(--mark); margin: 10px 0 0; }
.ed2-gal-head .ed2-mini-rule { margin: 16px 0 0; }

/* elevated content-page lead-in (services, locations, supply, utility) */
.ed2-lead { max-width: 760px; }
.ed2-lead p { color: var(--support); font-size: 17px; line-height: 1.78; margin: 0 0 18px; }
.ed2-lead p:first-child { font-size: clamp(19px,2vw,23px); line-height: 1.6; color: var(--mark); margin-bottom: 24px; }

/* FAQ now leads with an image hero, so the two-column block uses normal top padding */
.faq-section-hero { padding-top: clamp(48px,6vw,84px); }

/* Bento grid: place the two IMAGE boxes diagonally (top-left + bottom-right) so
   they don't stack, and keep colours clash-free (navy/oat/mint, none touching). */
@media (min-width: 1024px) {
  .bento-block-1        { grid-column: 1 / 3; grid-row: 1 / 3; }  /* image, top-left */
  .bento-block-stat     { grid-column: 3;     grid-row: 1; }      /* navy */
  .bento-block-quote    { grid-column: 4;     grid-row: 1 / 3; }  /* mint */
  .bento-block-service  { grid-column: 3;     grid-row: 2; }      /* oat */
  .bento-block-cta      { grid-column: 1;     grid-row: 3; }      /* navy */
  .bento-block-location { grid-column: 2;     grid-row: 3; }      /* oat */
  .bento-block-5        { grid-column: 3 / 5; grid-row: 3; }      /* image, bottom-right */
}

/* bento 'What we make' label (replaces the old quote block) */
.bento-quote-label { display:block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--mark); opacity: .7; margin-bottom: 16px; }
.bento-block-quote .bento-quote { font-style: normal; }

/* ==========================================================================
   60. Service-page FAQ — elevated two-column (sticky heading + numbered
   thin-rule list) on the oat ground. Replaces the grey faq-card grid.
   ========================================================================== */
.svc-faq { border-top: 1px solid var(--rule); }
.svc-faq-layout { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: clamp(36px,6vw,88px); align-items: start; }
.svc-faq-head { position: sticky; top: 108px; }
.svc-faq-head .au-h2 { margin-top: 8px; }
.svc-faq-list { border-top: 1px solid var(--rule); }
.svc-faq-item { display: grid; grid-template-columns: 52px 1fr; gap: clamp(12px,1.6vw,24px); padding: clamp(24px,2.8vw,36px) 0; border-bottom: 1px solid var(--rule); align-items: start; }
.svc-faq-n { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; color: var(--accent-text); padding-top: 6px; }
.svc-faq-body h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(18px,1.9vw,22px); line-height: 1.3; letter-spacing: -.01em; color: var(--mark); margin: 0 0 10px; }
.svc-faq-body p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.72; margin: 0; max-width: 640px; }
@media (max-width: 860px) { .svc-faq-layout { grid-template-columns: 1fr; gap: 26px; } .svc-faq-head { position: static; } }
@media (max-width: 560px) { .svc-faq-item { grid-template-columns: 1fr; gap: 4px; } .svc-faq-n { padding-top: 0; } }

/* 61. Article editorial elevations — numbered rule-separated sections + contents index
   Breaks long-form copy into scannable, premium sections. Also strong for AEO (jump links,
   clear section structure) without changing the reading order. */
.article-body { counter-reset: artsec; }

/* Contents index ("In this guide") */
.art-toc { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 24px 0; margin: 8px 0 44px; }
.art-toc-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); display: block; margin-bottom: 16px; }
.art-toc ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 44px; counter-reset: toc; }
.art-toc li { counter-increment: toc; }
.art-toc a { display: flex; gap: 13px; align-items: baseline; color: var(--support); font-family: var(--font-body); font-size: 15px; line-height: 1.45; text-decoration: none; padding: 7px 0; border-bottom: 1px solid var(--rule); transition: color .2s ease; }
.art-toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-mono); font-size: 11px; color: var(--accent-text); flex: 0 0 auto; }
.art-toc a:hover { color: var(--mark); }

/* Full-width alternating bands — chunk a long read into scannable colour zones.
   Flat, full-bleed oat / deep-oat (no boxes, no gradients). */
.article-lead { padding-top: clamp(46px, 6vw, 74px); padding-bottom: clamp(30px, 4vw, 48px); }
.art-band { scroll-margin-top: 90px; padding: clamp(38px, 4.6vw, 62px) 0; }
.art-band-alt { background: var(--paper-deep); }
/* numbered kicker (mono index + accent rule) */
.art-sec-k { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.art-sec-n { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; color: var(--accent-text); }
.art-sec-k .ed2-mini-rule { margin: 0; flex: 1 1 auto; max-width: 64px; }
/* suppress the old flat 40px rule now that art-sec-k carries the accent + number */
.art-band .article-body h2 { margin: 12px 0 16px; }
.art-band .article-body h2::before { content: none; display: none; }
.art-band .article-body p:last-child { margin-bottom: 0; }

/* Full-bleed image break — a visual rest mid-article */
.art-break { margin: 0; width: 100%; height: clamp(280px, 42vw, 520px); overflow: hidden; }
.art-break img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 640px) { .art-toc ol { grid-template-columns: 1fr; } }

/* WhatsApp inline link on the landline number (footer + contact) */
/* WhatsApp icon-only link on the landline number */
.wa-link { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; margin-left: 4px; }
/* The mark was WhatsApp's own green, which on the bordeaux footer was the one
   foreign colour on the page. It now takes the colour of the number beside it,
   so it reads cream in the footer and ink on the contact page, and stays
   legible on both grounds rather than being set to one and breaking the other. */
.wa-icon { width: 22px; height: 22px; color: inherit; transition: transform .18s ease, opacity .18s ease; }
.wa-link { color: inherit; }
.wa-link:hover .wa-icon { opacity: .72; transform: scale(1.08); }

/* 62. Advice-design variants — About (numbered image bands) + Contact (numbered ledger).
   Reuses the article band backgrounds (.art-band / .art-band-alt) + numbered kicker
   (.art-sec-k / .art-sec-n) so they read as the same family, with different inner layouts. */

/* About: numbered image + text bands (image side alternates) */
.ed-abt { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4.5vw, 72px); align-items: center; max-width: 1120px; margin: 0 auto; }
.ed-abt.is-right .ed-abt-media { order: 2; }
.ed-abt-media { align-self: stretch; }
.ed-abt-media img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; display: block; }
.ed-abt-body h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(23px, 2.6vw, 31px); line-height: 1.14; letter-spacing: -.015em; color: var(--mark); margin: 12px 0 16px; }
.ed-abt-body p { font-size: 16px; line-height: 1.8; color: var(--ink-soft); margin: 0 0 16px; max-width: 56ch; }
.ed-abt-body p:last-child { margin-bottom: 0; }
@media (max-width: 840px) { .ed-abt { grid-template-columns: 1fr; gap: 24px; } .ed-abt.is-right .ed-abt-media { order: 0; } }

/* Contact: numbered ledger — heading (+ number) left, copy right */
.ed-ledger-head { max-width: 1040px; margin: 0 auto clamp(28px, 4vw, 48px); }
.ed-ledger-head .au-h2 { margin-top: 8px; }
.ed-ledger { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(24px, 5vw, 84px); align-items: start; max-width: 1040px; margin: 0 auto; }
.ed-ledger-k { position: sticky; top: 104px; }
.ed-ledger-k h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2.3vw, 27px); line-height: 1.18; letter-spacing: -.01em; color: var(--mark); margin: 14px 0 0; }
.ed-ledger-body p { font-size: 16px; line-height: 1.82; color: var(--ink-soft); margin: 0 0 16px; max-width: 62ch; }
.ed-ledger-body p:last-child { margin-bottom: 0; }
@media (max-width: 840px) { .ed-ledger { grid-template-columns: 1fr; gap: 14px; } .ed-ledger-k { position: static; } }

/* 63. PHOTO-LED EDITORIAL HERO (rollout phase 1) — full-bleed graded photograph,
   oversized flush-left headline lower-left, mono margin furniture, spine at 58%.
   Replaces the old .ed-hero band. Nav floats over it (body.ed-page). */
/* Light, cohesive grade — a gentle cool cast only (no heavy blue wash), luminance preserved. */
/* keep photos natural, bright and warm — no cool navy wash; a whisper of warm bone only */
.ph-navy { position: absolute; inset: 0; background: var(--mark); mix-blend-mode: color; opacity: 0; }
.ph-bone { position: absolute; inset: 0; background: var(--paper); mix-blend-mode: soft-light; opacity: .12; }

.ed-hero { position: relative; min-height: 86vh; overflow: hidden; background: var(--mark); isolation: isolate; display: block; border-bottom: 1px solid rgba(244,239,230,.30); }
.ed-hero-ph { position: absolute; inset: 0; z-index: 0; margin: 0; }
.ed-hero-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 54%; filter: brightness(1.05) saturate(1.06) contrast(1.02); }
/* no blue banner wash — a soft neutral-dark pool in the lower-left CORNER only, sized to the
   headline, so bone type stays legible on light photos without tinting the whole banner blue */
/* neutral (non-blue) dark pool anchored bottom-left, large enough to sit under the whole
   headline block so bone type reads on light OR dark photos; fades out toward the top-right. */
.ed-hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(11,13,17,.66) 0%, rgba(11,13,17,.40) 30%, rgba(11,13,17,.12) 52%, rgba(11,13,17,0) 66%), radial-gradient(120% 120% at 2% 106%, rgba(11,13,17,.80) 0%, rgba(11,13,17,.55) 28%, rgba(11,13,17,.26) 46%, rgba(11,13,17,0) 68%); }
.ed-hero-grid { position: absolute; top: 0; bottom: 0; left: clamp(20px,5vw,64px); right: clamp(20px,5vw,64px); display: grid; grid-template-columns: repeat(12,1fr); z-index: 2; pointer-events: none; }
.ed-hero-grid i { border-left: 1px solid rgba(244,239,230,.08); }
.ed-hero-grid i:last-child { border-right: 1px solid rgba(244,239,230,.08); }
.ed-hero-spine { position: absolute; top: 0; bottom: 0; left: 58%; width: 1px; background: rgba(244,239,230,.16); z-index: 2; }

.ed-hero-vlabel { position: absolute; left: clamp(6px,1.4vw,18px); top: 52%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; z-index: 3; font-family: var(--font-mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: rgba(244,239,230,.68); }
.ed-hero-spec { position: absolute; right: clamp(20px,5vw,64px); bottom: clamp(38px,6vh,80px); z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; text-align: right; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(244,239,230,.72); }
.ed-hero-spec span:first-child { color: var(--paper); letter-spacing: .16em; }

.ed-hero-copy { position: absolute; left: clamp(20px,5vw,64px); bottom: clamp(40px,7vh,88px); width: min(52%,740px); z-index: 3; margin: 0; }
.ed-hero-kick { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--paper); opacity: .92; margin: 0 0 22px; }
.ed-hero .ed-hero-copy h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(3rem,5.6vw,5.6rem); line-height: .98; letter-spacing: -.022em; color: var(--paper); margin: 0; text-wrap: balance; }
.ed-hero-rule { display: block; width: 32px; height: 1px; background: var(--accent); margin: 28px 0 18px; }
.ed-hero-lead { font-family: var(--font-display); font-weight: 400; font-size: clamp(1rem,1.35vw,1.24rem); line-height: 1.5; color: rgba(244,239,230,.92); max-width: 46ch; margin: 0; }

@media (max-width: 820px) {
  .ed-hero { min-height: 82vh; }
  .ed-hero-spine, .ed-hero-vlabel, .ed-hero-spec { display: none; }
  .ed-hero-copy { width: 88%; }
  .ed-hero .ed-hero-copy h1 { font-size: clamp(2.5rem,9vw,3.6rem); }
}

/* 64. PHOTO-LED CONTENT SECTIONS (rollout phase 2) — spine, oversized headlines,
   small graded insets, full-bleed image breaks, hairline dividers, margin furniture. */
.ph { position: relative; overflow: hidden; margin: 0; }
.ph img { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(1.05) saturate(1.06) contrast(1.02); }

.edx { position: relative; background: var(--paper); padding: clamp(62px,9vh,124px) 0; border-top: 1px solid var(--rule); }
.edx-wrap { position: relative; max-width: 1300px; margin: 0 auto; padding: 0 clamp(20px,5vw,64px); }
.edx-spine { position: absolute; top: 0; bottom: 0; left: 58%; width: 1px; background: var(--rule); }
.edx-vlabel { position: absolute; left: clamp(2px,1vw,12px); top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--support); opacity: .7; }
.edx-coord { position: absolute; top: -8px; right: clamp(20px,5vw,64px); font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; color: var(--support); opacity: .72; }
.edx .grid { display: grid; grid-template-columns: repeat(12,1fr); column-gap: clamp(14px,1.8vw,26px); align-items: start; }
.edx-idx { grid-column: 1/2; font-family: var(--font-mono); font-size: 13px; letter-spacing: .12em; color: var(--support); padding-top: 6px; }
.edx-head { grid-column: 2/8; padding-right: clamp(16px,2vw,32px); margin-bottom: 30px; }
.edx-kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); display: block; margin-bottom: 15px; }
.edx-h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.1rem,3.6vw,3.4rem); line-height: 1.03; letter-spacing: -.02em; color: var(--mark); margin: 0; }
.edx-copy { grid-column: 2/8; padding-right: clamp(16px,2vw,32px); }
.edx-copy p { font-family: var(--font-body,'Inter Tight',sans-serif); font-size: 16.5px; line-height: 1.76; color: var(--ink-soft); margin: 0 0 18px; }
.edx-copy p:last-child { margin-bottom: 0; }
.edx-inset { grid-column: 9/13; grid-row: 1/3; align-self: center; justify-self: start; width: 100%; max-width: 300px; margin-left: -14%; }
.edx-inset .ph { aspect-ratio: 3/4; }
.edx-cap { display: block; margin-top: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--support); }

/* opening lead statement */
.edx-first { border-top: none; padding-top: clamp(54px,8vh,104px); }
.edx-lead-body { grid-column: 2/8; padding-right: clamp(16px,2vw,32px); }
.edx-lead-body p { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.1rem,1.35vw,1.34rem); line-height: 1.56; color: var(--mark); margin: 0 0 16px; max-width: 42ch; }
.edx-lead-body p:last-child { margin-bottom: 0; }
.edx-lead-body p:last-child { margin-bottom: 0; }

/* full-bleed image break (crop-rhythm palate cleanser between text sections) */
.edx-break { position: relative; height: clamp(320px,52vh,560px); overflow: hidden; background: var(--mark); isolation: isolate; border-top: 1px solid var(--rule); }
.edx-break .ph { position: absolute; inset: 0; }
.edx-break .ph img { filter: brightness(1.04) saturate(1.05) contrast(1.02); }
.edx-break::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(107, 31, 44,.34), transparent 40%); }
.edx-break-cap { position: absolute; left: clamp(20px,5vw,64px); bottom: clamp(24px,4vh,44px); z-index: 3; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(244,239,230,.92); }

@media (max-width: 820px) {
  .edx-spine, .edx-vlabel { display: none; }
  .edx .grid { grid-template-columns: 1fr; }
  .edx-idx, .edx-head, .edx-copy, .edx-inset, .edx-lead-body { grid-column: 1; }
  .edx-inset { grid-row: auto; margin: 28px 0 0; max-width: 320px; }
}

/* Homepage opening statement (lead moved off the hero image onto the cream ground) */
.home-intro { background: var(--paper); padding: clamp(52px,7vw,104px) 0; border-bottom: 1px solid var(--rule); }
.home-intro-rule { display: block; width: 32px; height: 1px; background: var(--accent); margin: 0 0 26px; }
.home-intro-lead { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.35rem,2.5vw,2.05rem); line-height: 1.4; letter-spacing: -.012em; color: var(--mark); max-width: 30ch; margin: 0; }

/* Homepage "Why Barnsbury Joinery" — editorial rebuild (numbered, iron accent lines, no icons) */
.section-why { background: var(--paper); padding: clamp(58px,8vw,116px) 0; border-top: 1px solid var(--rule); }
.why-layout { display: grid; grid-template-columns: minmax(0,0.86fr) minmax(0,1.14fr); gap: clamp(38px,6vw,96px); align-items: start; }
.why-aside { position: sticky; top: 108px; }
.why-aside .section-label { color: var(--support); }
.why-aside .ed2-mini-rule { margin: 16px 0 20px; }
.why-aside h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px,3.9vw,52px); line-height: 1.04; letter-spacing: -.022em; color: var(--mark); margin: 0; }
.why-lead { color: var(--ink-soft); font-size: clamp(15px,1.1vw,16.5px); line-height: 1.66; max-width: 34ch; margin: clamp(20px,2.4vw,30px) 0 0; }
.why-ledger { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--support); margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--rule); }
.why-list { border-top: 1px solid var(--mark); }
.why-row { display: grid; grid-template-columns: 58px 1fr; gap: clamp(14px,2vw,30px); align-items: baseline; padding: clamp(26px,3vw,40px) 0; border-bottom: 1px solid var(--rule); }
.why-row .why-n { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: .1em; color: var(--accent-text); padding-top: .35em; }
.why-row-body h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(21px,2.3vw,30px); line-height: 1.14; letter-spacing: -.015em; color: var(--mark); margin: 0 0 10px; }
.why-row-body p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.72; max-width: 46ch; margin: 0; }
@media (max-width: 860px) {
  .why-layout { grid-template-columns: 1fr; gap: clamp(30px,6vw,44px); }
  .why-aside { position: static; }
  .why-lead { max-width: 52ch; }
}
@media (max-width: 480px) { .why-row { grid-template-columns: 40px 1fr; } }

/* Footer social icons (functional links; brand marks) */
.footer-social { display: flex; gap: 16px; margin-top: 22px; }
.footer-social a { display: inline-flex; color: rgba(244,239,230,.6); transition: color .2s ease, transform .2s ease; }
.footer-social a:hover { color: var(--ring); transform: translateY(-1px); }
.footer-social svg { width: 19px; height: 19px; fill: currentColor; display: block; }

/* Areas hub: offset accent blocks behind the feature images — deliberate, non-uniform sizing */
.areas-feats .ed2-feat-media { position: relative; overflow: visible; }
.areas-feats .ed2-feat-media img { position: relative; z-index: 1; }
.areas-feats .ed2-feat-media::before { content: ""; position: absolute; z-index: 0; width: 56%; height: 60%; left: -24px; bottom: -24px; background: var(--paper-deep); }
.areas-feats .ed2-feat-alt .ed2-feat-media::before { left: auto; bottom: auto; right: -24px; top: -24px; background: var(--ring); }
.areas-feats .ed2-feat:nth-of-type(3n+2) .ed2-feat-media img { aspect-ratio: 5/4; }
.areas-feats .ed2-feat:nth-of-type(3n)   .ed2-feat-media img { aspect-ratio: 1/1; }
@media (max-width: 860px){ .areas-feats .ed2-feat-media::before { width: 48%; height: 46%; left: -14px; bottom: -14px; } .areas-feats .ed2-feat-alt .ed2-feat-media::before { right: -14px; top: -14px; left: auto; bottom: auto; } }


/* ==========================================================================
   Buttons - solid block with brass registration marks OUTSIDE each corner.
   The block gives presence against a photograph; the marks sit off the corners
   like crop marks around a printed plate (the leaflet's language).
   All four marks are drawn as gradient L-shapes on one expanded ::before box,
   because an element only has two pseudo-elements.
   ========================================================================== */
.btn,
.nav-cta {
    --tick: 12px;
    --off: -8px;
    position: relative;
    overflow: visible;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 28px;
    font-family: var(--font-body);
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-transform: lowercase;
    border-radius: 0;
    box-shadow: none;
    background-image: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.btn::before,
.nav-cta::before { content: none; }
.btn::after, .nav-cta::after { content: none; }

.btn:hover, .nav-cta:hover { transform: none; box-shadow: none; }

/* --- on a LIGHT ground --- */
.btn-navy   { background-color: var(--mark); color: var(--paper); border: none; }          /* primary */
.btn-navy:hover { background-color: #83283A; color: var(--paper); }
.btn-outline{ background-color: transparent; color: var(--mark); border: 1px solid var(--mark); }  /* secondary */
.btn-outline:hover { background-color: transparent; color: var(--accent-text); border-color: var(--accent); }

/* --- on a DARK ground (hero photo) --- */
.btn-primary  { background-color: var(--paper); color: var(--mark); border: none; }        /* primary */
.btn-primary:hover { background-color: #fff; color: var(--mark); }
.btn-secondary{ background-color: transparent; color: var(--paper); border: 1px solid rgba(244,239,230,.55); }  /* secondary */
.btn-secondary:hover { background-color: rgba(244,239,230,.12); color: #fff; border-color: var(--accent); }

/* --- nav CTA: light-weight, sits on the hero --- */
.nav-cta, .home .nav-cta, .ed-page .nav-cta {
    background-color: transparent; color: var(--paper);
    border: 1px solid rgba(244,239,230,.55);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    padding: 13px 22px; font-size: 14px;
}
.home .nav-cta:hover, .ed-page .nav-cta:hover, .nav-cta:hover {
    background-color: rgba(244,239,230,.12); color: #fff; border-color: var(--accent); transform: none;
}
.nav-cta svg { width: 15px; height: 15px; }

/* Mobile menu sits on white: CTA must be navy, not paper */
.mobile-menu .nav-cta,
.home .mobile-menu .nav-cta,
.ed-page .mobile-menu .nav-cta { color: var(--mark); border-color: var(--mark); }
.mobile-menu .nav-cta:hover,
.home .mobile-menu .nav-cta:hover,
.ed-page .mobile-menu .nav-cta:hover { color: var(--accent-text); border-color: var(--accent); background-color: transparent; }

/* Cookie consent keeps a plain boxed control (no marks): a consent choice must
   read unambiguously as a control. Both options stay identical (ICO). */
#cookie-consent .btn {
    background-color: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.30);
    color: #fff;
    padding: 16px 34px;
}
#cookie-consent .btn::before { content: none; }
#cookie-consent .btn:hover { background-color: rgba(255,255,255,0.20); color: #fff; border-color: rgba(255,255,255,.5); }

/* The marks sit 8px outside each corner, so adjacent buttons need clearance or
   the marks collide. 40px gap leaves 24px of clear space between them (16px on hover). */
.hero-ctas { gap: 18px; row-gap: 16px; }
.cta-section .btn + .btn,
.hero-ctas .btn + .btn { margin-left: 0; }

/* ==========================================================================
   Bento images - inset registration frame with brass corner brackets,
   the treatment used on the leaflet cover photo.
   ========================================================================== */
.bento-block-image::before {
    content: '';
    position: absolute;
    inset: 14px;
    z-index: 2;
    pointer-events: none;
    transition: inset .45s ease;
    /* NB: a global `*::before { box-shadow: none !important }` kills box-shadow,
       so the frame is drawn as gradient layers. Brass corners are listed first
       because earlier background layers paint on top. */
    background:
        linear-gradient(var(--accent), var(--accent)) 0 0 / 18px 1px no-repeat,
        linear-gradient(var(--accent), var(--accent)) 0 0 / 1px 18px no-repeat,
        linear-gradient(var(--accent), var(--accent)) 100% 0 / 18px 1px no-repeat,
        linear-gradient(var(--accent), var(--accent)) 100% 0 / 1px 18px no-repeat,
        linear-gradient(var(--accent), var(--accent)) 0 100% / 18px 1px no-repeat,
        linear-gradient(var(--accent), var(--accent)) 0 100% / 1px 18px no-repeat,
        linear-gradient(var(--accent), var(--accent)) 100% 100% / 18px 1px no-repeat,
        linear-gradient(var(--accent), var(--accent)) 100% 100% / 1px 18px no-repeat,
        linear-gradient(rgba(244,239,230,.20), rgba(244,239,230,.20)) 0 0 / 100% 1px no-repeat,
        linear-gradient(rgba(244,239,230,.20), rgba(244,239,230,.20)) 0 100% / 100% 1px no-repeat,
        linear-gradient(rgba(244,239,230,.20), rgba(244,239,230,.20)) 0 0 / 1px 100% no-repeat,
        linear-gradient(rgba(244,239,230,.20), rgba(244,239,230,.20)) 100% 0 / 1px 100% no-repeat;
}
.bento-block-image:hover::before { inset: 10px; }
/* keep the caption clear of the frame's bottom rule */
.bento-block-image .bento-label { bottom: 30px; left: 30px; }
/* brass hairline above the caption, as on the leaflet */
.bento-block-image .bento-label-tag::before {
    content: '';
    display: block;
    width: 26px;
    height: 1px;
    background: var(--accent);
    margin-bottom: 9px;
}

/* ==========================================================================
   The group: brand roster on the About page.
   Mirrors the Areas page language - JetBrains Mono eyebrow, brass mini-rule,
   hairline dividers, Lora headings, brass accent on the link.
   ========================================================================== */
.section-brands { background: var(--paper-deep); border-top: 1px solid var(--rule); }
.gb-head { max-width: 60ch; margin-bottom: clamp(30px,4vw,54px); }
.gb-head .ed2-eyebrow { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--support); }
.gb-head .ed2-mini-rule { display: block; width: 32px; height: 1px; background: var(--accent); margin: 16px 0 18px; }
.gb-head h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px,3.2vw,40px); line-height: 1.08; letter-spacing: -.02em; color: var(--mark); margin: 0; }
.gb-intro { color: var(--ink-soft); font-size: 15.5px; line-height: 1.72; margin: 18px 0 0; max-width: 60ch; }

.gb-grid { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--mark); }
@media (min-width: 720px)  { .gb-grid { grid-template-columns: 1fr 1fr; column-gap: clamp(30px,4vw,64px); } }
@media (min-width: 1100px) { .gb-grid { grid-template-columns: repeat(3, 1fr); } }

.gb-card {
    display: flex; flex-direction: column; align-items: flex-start;
    padding: clamp(26px,3vw,38px) 0;
    border-bottom: 1px solid var(--rule);
}
.gb-mark { width: 52px; height: 52px; display: block; margin-bottom: 18px; }
.gb-role { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--support); }
.gb-name { font-family: var(--font-display); font-weight: 500; font-size: clamp(19px,1.7vw,23px); line-height: 1.16; letter-spacing: -.012em; color: var(--mark); margin: 9px 0 10px; }
.gb-blurb { color: var(--ink-soft); font-size: 14.8px; line-height: 1.7; margin: 0 0 16px; max-width: 42ch; }

.gb-link {
    margin-top: auto;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--accent-text); text-decoration: none;
    padding-bottom: 5px; border-bottom: 1px solid var(--accent);
    transition: color .3s ease, border-color .3s ease, letter-spacing .3s ease;
}
.gb-link:hover { color: var(--mark); border-color: var(--mark); letter-spacing: .16em; }
.gb-link::after { content: " \2192"; }

.gb-here {
    margin-top: auto;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--support); padding-bottom: 5px; border-bottom: 1px solid var(--rule);
}
/* the current studio is marked by the "you are here" label and a brass rule, not a fill.
   (No gradients: brand rule.) */
.gb-card.is-here .gb-here { color: var(--accent-text); border-bottom-color: var(--accent); }

/* Areas-language lead on content pages */
.ed2-lead .ed2-eyebrow { margin-bottom: 0; }
.ed2-lead .ed2-mini-rule { display: block; width: 32px; height: 1px; background: var(--accent); margin: 16px 0 22px; }
.ed2-lead p { color: var(--ink-soft); font-size: clamp(16px,1.3vw,18px); line-height: 1.76; max-width: 62ch; margin: 0 0 18px; }
.ed2-lead p:last-child { margin-bottom: 0; }

/* Contact form: photo upload */
.form-file input[type="file"] {
    width: 100%;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--ink-soft);
    padding: 14px;
    background: var(--paper);
    border: 1px dashed var(--rule);
    cursor: pointer;
}
.form-file input[type="file"]:hover { border-color: var(--accent); }
.form-file input[type="file"]::file-selector-button {
    font-family: var(--font-body); font-size: 13px; font-weight: 500;
    text-transform: lowercase; letter-spacing: -.01em;
    padding: 9px 18px; margin-right: 14px;
    background: transparent; color: var(--mark);
    border: 1px solid var(--mark); border-radius: 0; cursor: pointer;
    transition: color .3s ease, border-color .3s ease;
}
.form-file input[type="file"]::file-selector-button:hover { color: var(--accent-text); border-color: var(--accent); }
.form-hint {
    display: block; margin-top: 9px;
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em;
    color: var(--support); line-height: 1.5;
}

/* ==========================================================================
   HWC — the document register.
   Components specific to the advisory practice. The rest of this stylesheet is
   the shared group shell. Brand rules held throughout: 0.5pt hairlines only,
   square corners, no box-shadow, no gradients used as decoration.
   ========================================================================== */

/* --- Document hero: no photograph. Bordeaux ground, hairline grid, type. --- */
.ed-hero--doc { min-height: clamp(430px, 58vh, 620px); background: var(--mark); }
.ed-hero--doc .ed-hero-copy { width: min(62%, 780px); }
.home .ed-hero--doc { min-height: clamp(520px, 74vh, 760px); }
@media (max-width: 768px) { .ed-hero--doc .ed-hero-copy { width: 88%; } }

/* --- Ledger body: the label sits above the prose in the right-hand column --- */
.ed-ledger-body .section-label { display: block; margin-bottom: 14px; }

/* --- Specification list: the "what is covered" register --- */
.spec-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.spec-list li {
    position: relative; padding: 15px 0 15px 30px;
    border-bottom: 1px solid var(--rule);
    font-size: 16px; line-height: 1.55; color: var(--ink-soft);
}
.spec-list li::before {
    content: ""; position: absolute; left: 0; top: 24px;
    width: 16px; height: 1px; background: var(--accent);
}

/* --- Fee statement --- */
.price-band { padding-top: 0; }
.price-inner { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 34px 0; }
.price-figure {
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(2.4rem, 4.4vw, 3.4rem); line-height: 1;
    color: var(--mark); margin: 12px 0 10px; letter-spacing: -.02em;
}
.price-note { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--accent-text); margin: 0; }

/* --- The four instructions --- */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule);
    border: 1px solid var(--rule); }
.svc-card { background: var(--paper); padding: 34px 32px 30px; display: flex; flex-direction: column; }
.svc-kick { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em;
    text-transform: uppercase; color: var(--support); display: block; margin-bottom: 16px; }
.svc-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 25px;
    line-height: 1.2; margin: 0 0 12px; letter-spacing: -.015em; }
.svc-card h3 a { color: var(--mark); text-decoration: none; }
.svc-card h3 a:hover { color: var(--accent-text); }
.svc-lead { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 20px; }
.svc-price { font-family: var(--font-display); font-weight: 500; font-size: 21px;
    color: var(--mark); margin: 0 0 18px; }
.svc-price span { display: block; font-family: var(--font-mono); font-size: 10.5px;
    font-weight: 400; letter-spacing: .09em; text-transform: uppercase;
    color: var(--accent-text); margin-top: 6px; }
.svc-meta { list-style: none; margin: 0 0 22px; padding: 0; border-top: 1px solid var(--rule); }
.svc-meta li { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-mute); padding: 9px 0;
    border-bottom: 1px solid var(--rule); }
.svc-more { margin-top: auto; font-family: var(--font-body); font-weight: 500; font-size: 14px;
    color: var(--mark); text-decoration: none; border-bottom: 1px solid var(--accent);
    padding-bottom: 3px; align-self: flex-start; }
.svc-more:hover { color: var(--accent-text); }
@media (max-width: 860px) { .svc-grid { grid-template-columns: 1fr; } }

/* --- Who we act for --- */
.serve-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 44px; }
.serve-card { border-top: 1px solid var(--mark); padding-top: 20px; }
.serve-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 20px;
    color: var(--mark); margin: 0 0 12px; }
.serve-card p { font-size: 15.5px; line-height: 1.62; color: var(--ink-soft); margin: 0; }
@media (max-width: 860px) { .serve-grid { grid-template-columns: 1fr; gap: 30px; } }

/* --- Enquiry to report --- */
.step-list { list-style: none; margin: 44px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; }
.step-list li { border-top: 1px solid var(--rule); padding-top: 18px; }
.step-n { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em;
    color: var(--accent-text); display: block; margin-bottom: 14px; }
.step-list h3 { font-family: var(--font-display); font-weight: 500; font-size: 18px;
    color: var(--mark); margin: 0 0 10px; line-height: 1.3; }
.step-list p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
@media (max-width: 980px) { .step-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .step-list { grid-template-columns: 1fr; } }

/* --- Selected work: a schedule, not a gallery --- */
.work-list { list-style: none; margin: 44px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.work-list li { display: flex; justify-content: space-between; align-items: baseline;
    gap: 28px; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.work-name h3 { font-family: var(--font-display); font-weight: 500; font-size: 21px;
    color: var(--mark); margin: 0 0 5px; }
.work-name p { font-size: 14.5px; color: var(--ink-mute); margin: 0; }
.work-scope { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--support); margin: 0; text-align: right; flex: none; }
@media (max-width: 640px) { .work-list li { flex-direction: column; gap: 10px; }
    .work-scope { text-align: left; } }

/* --- Pull quote --- */
.pull-quote { max-width: 760px; margin: 0; padding: 0 0 0 30px; border-left: 1px solid var(--accent); }
.pull-quote p { font-family: var(--font-display); font-style: italic; font-weight: 400;
    font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.45; color: var(--mark); margin: 0 0 18px; }
.pull-quote cite { font-family: var(--font-mono); font-style: normal; font-size: 11px;
    letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }

/* --- FAQ: native <details>, styled to the design system. No JS. --- */
.faq-list { counter-reset: faq; border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: baseline;
    gap: 20px; padding: 26px 0; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { counter-increment: faq; content: counter(faq, decimal-leading-zero);
    font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
    color: var(--accent-text); flex: none; padding-top: 5px; }
.faq-item summary h3 { flex: 1; font-family: var(--font-display); font-weight: 500;
    font-size: 19px; line-height: 1.32; color: var(--mark); margin: 0;
    transition: color var(--transition-fast); }
.faq-item summary:hover h3 { color: var(--accent-text); }
.faq-item summary::after { content: ""; flex: none; align-self: center; width: 14px; height: 14px;
    background:
      linear-gradient(var(--support), var(--support)) center/14px 1.5px no-repeat,
      linear-gradient(var(--support), var(--support)) center/1.5px 14px no-repeat;
    transition: transform .35s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:focus-visible { outline: 2px solid var(--support); outline-offset: 3px; }
.faq-a { padding: 0 34px 26px 46px; }
.faq-a p { font-size: 16px; line-height: 1.65; color: var(--ink-soft); margin: 0; }
@media (max-width: 560px) { .faq-a { padding: 0 0 24px 46px; } }

/* --- Closing call to action --- */
.cta-band { background: var(--paper-deep); }
.cta-inner { max-width: 680px; }
.cta-inner h2 { font-family: var(--font-display); font-weight: 500;
    font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.15; color: var(--mark); margin: 0 0 16px; }
.cta-inner p { font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 28px; }

/* --- Honeypot: must never be visible or focusable to a person --- */
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Group roster in the footer: sitewide outbound links, kept quiet --- */
.footer-group {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 22px;
    padding: 26px 0 24px; margin-top: 8px;
    border-top: 1px solid rgba(244,235,217,.18);
}
.footer-group-label {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .2em;
    text-transform: uppercase; color: rgba(244,235,217,.5); flex: none;
}
.footer-group-list { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-group-list a, .footer-group-list .here {
    font-size: 13px; letter-spacing: -.01em; text-decoration: none;
}
.footer-group-list a { color: rgba(244,235,217,.62); transition: color var(--transition-fast); }
.footer-group-list a:hover { color: var(--ring); }
.footer-group-list .here { color: rgba(244,235,217,.34); }
@media (max-width: 640px) { .footer-group { flex-direction: column; gap: 12px; } }

/* --- The plate: photo in a thin rule, numbered like a book plate (group device) --- */
.plate { margin: 0; }
.plate img { width: 100%; height: auto; display: block; border: 1px solid var(--rule); }
.plate figcaption { display: flex; gap: 14px; align-items: baseline; margin-top: 12px;
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
.plate-n { color: var(--accent-text); flex: none; }
.plate-cap { color: var(--ink-mute); }

/* --- Showcase: the properties, as plates on a grid --- */
.shw-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 44px; }
.shw-item { margin: 0; }
.shw-item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
    border: 1px solid var(--rule); filter: saturate(1.02); }
.shw-item figcaption { margin-top: 12px; display: flex; flex-direction: column; gap: 3px; }
.shw-name { font-family: var(--font-display); font-weight: 500; font-size: 17px; color: var(--mark); }
.shw-place { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink-mute); }
@media (max-width: 940px) { .shw-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .shw-grid { grid-template-columns: 1fr; } }

/* --- Accreditation strip: marks at even optical weight, never boxed --- */
.acc-band { background: var(--paper-deep); }
.acc-row { list-style: none; display: flex; flex-wrap: wrap; align-items: center;
    gap: 44px; margin: 26px 0 0; padding: 0; }
.acc-row img { height: 54px; width: auto; display: block; mix-blend-mode: multiply; }
@media (max-width: 640px) { .acc-row { gap: 28px; } .acc-row img { height: 42px; } }

/* --- Reveal-on-scroll: visible at rest, animated only when JS is running ---
   The inherited rule set .fade-in-up{opacity:0} and relied on a script adding
   .visible. This generator emits no such script, so every marked section was
   permanently invisible except under prefers-reduced-motion. Content is now
   visible by default and the animation is opted into by the reveal script,
   which means the page is readable even if the script never runs. */
.fade-in-up, .fade-in-left, .fade-in-right, .scale-in { opacity: 1; transform: none; }
html.js-reveal .fade-in-up  { opacity: 0; transform: translateY(26px); }
html.js-reveal .fade-in-left { opacity: 0; transform: translateX(-26px); }
html.js-reveal .fade-in-right{ opacity: 0; transform: translateX(26px); }
html.js-reveal .scale-in     { opacity: 0; transform: scale(.985); }
html.js-reveal .fade-in-up.visible,
html.js-reveal .fade-in-left.visible,
html.js-reveal .fade-in-right.visible,
html.js-reveal .scale-in.visible { opacity: 1; transform: none; }

/* --- Feature split: a large plate beside the prose, alternating sides --- */
.feat { display: grid; grid-template-columns: 1.05fr 1fr; gap: 68px; align-items: center; }
.feat.flip .feat-media { order: 2; }
.feat-media { margin: 0; position: relative; }
.feat-media img { width: 100%; height: 100%; max-height: 620px; object-fit: cover;
    display: block; border: 1px solid var(--rule); }
.feat-media figcaption { margin-top: 12px; font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.feat-body h2 { font-family: var(--font-display); font-weight: 500;
    font-size: clamp(1.7rem, 3.1vw, 2.5rem); line-height: 1.12; letter-spacing: -.018em;
    color: var(--mark); margin: 14px 0 20px; text-wrap: balance; }
.feat-body p { font-size: 16.5px; line-height: 1.68; color: var(--ink-soft); margin: 0 0 16px; max-width: 56ch; }
.feat-body p:last-child { margin-bottom: 0; }
.feat-more { display: inline-block; margin-top: 26px; font-weight: 500; font-size: 14.5px;
    color: var(--mark); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 3px; }
.feat-more:hover { color: var(--accent-text); }
@media (max-width: 900px) {
  .feat { grid-template-columns: 1fr; gap: 30px; }
  .feat.flip .feat-media { order: 0; }
  .feat-media img { max-height: 420px; }
}

/* --- Full-bleed image band: a breath between sections --- */
.bleed { position: relative; min-height: clamp(320px, 46vw, 560px); overflow: hidden;
    display: flex; align-items: flex-end; isolation: isolate; background: var(--mark); }
.bleed img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.bleed-scrim { position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(43,12,18,0) 38%, rgba(43,12,18,.72) 100%); }
.bleed-cap { position: relative; z-index: 2; width: 100%; padding: 0 0 42px; }
.bleed-cap .container { display: flex; flex-direction: column; gap: 10px; }
.bleed-kick { font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em;
    text-transform: uppercase; color: var(--accent); }
.bleed-line { font-family: var(--font-display); font-weight: 500;
    font-size: clamp(1.5rem, 3vw, 2.4rem); line-height: 1.16; color: var(--paper);
    margin: 0; max-width: 24ch; text-wrap: balance; }

/* --- Statement band: a single line, bordeaux, between photo sections --- */
.stmt { background: var(--mark); color: var(--paper); }
.stmt p { font-family: var(--font-display); font-weight: 400; font-style: italic;
    font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.36; margin: 0; max-width: 30ch; }
.stmt .section-label { color: rgba(244,235,217,.55); display: block; margin-bottom: 18px; }

/* --- Motifs: the line drawings and the seal, as structural texture ---
   Shipped as alpha masks, not coloured artwork, so the tint comes from the
   HWC tokens and can never drift back to the old teal. Large, cropped by the
   section edge, and faint enough to read as texture rather than decoration.
   NOTE: the Brand Book's rule 03 ("never a watermark behind text") argues
   against the seal variant; it is used sparingly and by explicit request. */
.has-motif { position: relative; overflow: hidden; isolation: isolate; }
.has-motif > .container { position: relative; z-index: 1; }
.motif {
    position: absolute; z-index: 0; pointer-events: none;
    background-color: var(--mark); opacity: .055;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain;     mask-size: contain;
    -webkit-mask-position: center;  mask-position: center;
}
/* on a bordeaux ground the tint inverts */
.stmt .motif, .group-band .motif, .cta-band.on-dark .motif { background-color: var(--ring); opacity: .07; }

.motif--tr { top: -8%;  right: -6%;  width: min(38vw, 460px); height: min(38vw, 460px); }
.motif--br { bottom: -12%; right: -7%; width: min(42vw, 520px); height: min(42vw, 520px); }
.motif--bl { bottom: -12%; left: -8%;  width: min(40vw, 500px); height: min(40vw, 500px); }
.motif--l  { top: 50%; left: -10%; transform: translateY(-50%); width: min(34vw, 420px); height: min(34vw, 420px); }
.motif--seal { top: 50%; right: -9%; transform: translateY(-50%); width: min(46vw, 560px); height: min(46vw, 560px); }

@media (max-width: 760px) { .motif { display: none; } }
@media print { .motif { display: none; } }

/* --- Fixes and palette rebalance -------------------------------------------
   1. A bare `li::before` in the inherited sheet paints a gold dot on EVERY
      list item. The lists added for HWC have no left padding, so the dot
      landed on top of the text. Switched off per list rather than globally,
      so the sheet's own lists keep their markers.
   2. A bare `p { color: var(--ink) }` outranks the colour inherited from
      .stmt, so the statement read near-black on bordeaux. Set explicitly.
   3. Bordeaux was carrying too much of the page. The statement and group
      bands move to peacock teal, which is the palette's other authority
      colour, leaving bordeaux for the mark, the nav, the footer and type. */

.svc-meta li::before,
.work-list li::before,
.step-list li::before,
.acc-row li::before,
.shw-grid li::before { display: none; content: none; }

.stmt p { color: var(--paper); }
.stmt .section-label { color: rgba(244, 235, 217, .62); }

/* Peacock teal takes the two mid-page dark fields */
.stmt { background: var(--support); }
.group-band { background: var(--support); }
.group-band .group-band-cap,
.group-band .section-label { color: rgba(244, 235, 217, .62); }

/* Teal picked up in the smaller structural marks, so it reads as a system */
.serve-card { border-top: 1px solid var(--support); }
.step-n { color: var(--support); }
.ed2-mini-rule { background: var(--support); }

/* ==========================================================================
   The horn bleed, and honest photography.
   Both taken from the group site (thebarnsburygroup.com), which implements the
   Brand Book device: "the horn does not stop at the seal. A flat tone-on-tone
   field cropped by the page edge, kept out of the copy, never a watermark
   behind text." The horn ALONE, not the ringed seal.
   ========================================================================== */

/* --- retire the coloured washes over photographs ------------------------- */
.ed-hero-scrim, .bleed-scrim, .ph-navy, .ph-bone { display: none !important; }

/* Photographs are grade-corrected, not tinted. Same values as the group site. */
.ed-hero-ph img, .bleed img, .feat-media img, .shw-item img, .plate img {
    filter: saturate(.9) contrast(1.03);
}

/* --- the hero becomes a split: copy on paper, photograph beside it -------
   Nothing is set over an image, so no scrim is needed to make type legible. */
.ed-hero {
    display: grid; grid-template-columns: 1fr .82fr; gap: 4vw;
    align-items: stretch; min-height: 64vh; overflow: hidden;
    background: var(--paper); isolation: isolate;
    padding: clamp(104px, 13vh, 168px) 0 clamp(28px, 5vh, 64px);
}
.ed-hero .ed-hero-copy {
    position: static; width: auto; z-index: 2;
    padding: 0 0 2vh clamp(24px, 5vw, 64px);
    display: flex; flex-direction: column; justify-content: flex-end;
}
.ed-hero .ed-hero-kick { color: var(--support); opacity: 1; }
.ed-hero .ed-hero-copy h1 { color: var(--mark); font-size: clamp(2.4rem, 4.4vw, 4.2rem); }
.ed-hero .ed-hero-lead { color: var(--ink-soft); }
.ed-hero-rule { background: var(--accent); }

.ed-hero-ph {
    position: relative; inset: auto; margin: 0; min-height: 54vh;
    overflow: hidden; z-index: 1;
}
.ed-hero-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the hairline frame, inset, as on the group site */
.ed-hero-ph::after {
    content: ""; position: absolute; inset: 13px;
    border: 1px solid rgba(244, 239, 230, .5); pointer-events: none;
}
.ed-hero-grid, .ed-hero-spine { display: none; }
.ed-hero-vlabel { color: var(--ink-mute); }
.ed-hero-spec { color: var(--support); }
.ed-hero-spec span:first-child { color: var(--mark); }

/* the document hero (no photograph) keeps the bordeaux field */
.ed-hero--doc { display: block; background: var(--mark); padding: 0; min-height: clamp(430px, 58vh, 620px); }
.ed-hero--doc .ed-hero-copy {
    position: absolute; left: clamp(20px,5vw,64px); bottom: clamp(40px,7vh,88px);
    width: min(62%, 780px); padding: 0;
}
.ed-hero--doc .ed-hero-copy h1 { color: var(--paper); }
.ed-hero--doc .ed-hero-kick { color: var(--paper); }
.ed-hero--doc .ed-hero-lead { color: rgba(244,239,230,.92); }
.ed-hero--doc .ed-hero-grid { display: grid; }
.ed-hero--doc .ed-hero-spine { display: block; }
.ed-hero--doc .ed-hero-vlabel { color: rgba(244,235,217,.68); }
.ed-hero--doc .ed-hero-spec { color: rgba(244,235,217,.72); }
.ed-hero--doc .ed-hero-spec span:first-child { color: var(--paper); }

@media (max-width: 900px) {
    .ed-hero { grid-template-columns: 1fr; min-height: 0; gap: 22px; padding-top: 96px; }
    .ed-hero-ph { min-height: 0; height: 34vh; }
    .ed-hero .ed-hero-copy { padding-right: clamp(24px,5vw,64px); }
}

/* --- the bleed band: a photograph, with its line beneath it as a caption -- */
.bleed { display: block; min-height: 0; background: none; }
.bleed img { position: relative; width: 100%; height: clamp(300px, 42vw, 520px); object-fit: cover; }
.bleed-cap { position: relative; padding: 14px 0 0; }
.bleed-cap .container { flex-direction: row; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.bleed-kick { color: var(--accent-text); flex: none; }
.bleed-line { color: var(--mark); font-size: clamp(1.2rem, 2.1vw, 1.7rem); max-width: 44ch; }

/* --- the horn bleed ------------------------------------------------------ */
.has-motif { position: relative; overflow: hidden; isolation: isolate; }
.has-motif > .container { position: relative; z-index: 1; }
.horn-bleed {
    position: absolute; z-index: 0; pointer-events: none;
    background-color: var(--mark); opacity: .07;
    -webkit-mask-image: url(/images/mark/horn-bleed.svg);
            mask-image: url(/images/mark/horn-bleed.svg);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;   mask-size: 100% 100%;
    aspect-ratio: 700 / 164;
}
/* on the dark grounds the horn lifts instead of darkens */
.stmt .horn-bleed, .group-band .horn-bleed { background-color: var(--ring); opacity: .12; }

.horn-bleed--l { left: min(-14vw, -180px); bottom: 11%;  width: clamp(440px, 52vw, 760px); }
.horn-bleed--r { right: min(-12vw, -160px); bottom: 12%; width: clamp(440px, 52vw, 760px); }
.horn-bleed--tr{ right: -10vw; top: 14%;                 width: clamp(420px, 48vw, 700px); }
.horn-bleed--br{ right: -9vw;  bottom: -4%;              width: clamp(380px, 46vw, 680px); }

@media (max-width: 900px) { .horn-bleed { display: none; } }
@media print { .horn-bleed { display: none; } }

/* ==========================================================================
   Elevation pass.
   Brief: bold, premium, editorial, and unmistakably part of the group family.
   Three things happen here: every coloured wash, blur and glow is removed;
   the nav is corrected for the light hero; and the type, spacing and image
   scale are pushed up so the page carries itself with confidence.
   ========================================================================== */

/* --- 1. nav: the reversed treatment belongs only to the dark hero --------- */
.hero-split .nav { background: var(--paper); border-bottom: 1px solid var(--rule); }
.hero-split .nav-logo-text span:first-child,
.hero-split .nav-logo-text span:last-child { color: var(--mark); }
.hero-split .nav-links > li > a,
.hero-split .nav-links > li > a[aria-current="page"],
.hero-split .nav-arrow { color: var(--support); }
.hero-split .nav-links > li > a:hover { color: var(--mark); }
.hero-split .nav-links > li + li::before { color: var(--accent-text); opacity: .7; }
.hero-split .nav-cta { background: var(--mark); color: var(--ring); border: none; }
.hero-split .nav-toggle span { background: var(--mark); }
/* The dropdown was given a pale ground here while its link colour stayed the
   near-white set for the dark panel, so on every hero-split page the menu read
   white on cream: invisible. There is one dropdown treatment now, the dark
   panel, and it is set once below rather than per page type. */

/* --- 2. no blur, no glow, no coloured washes ----------------------------- */
*, *::before, *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

.hero-overlay, .hero-overlay-warm, .project-card-overlay,
.edx-break::after, .ed-hero-scrim, .bleed-scrim { background: none !important; }

.ed-page .nav { background: var(--mark); }
.ed-page .nav.scrolled { background: var(--mark); }
.hero-split .nav.scrolled { background: var(--paper); }

/* focus stays clearly visible, as a rule rather than a coloured halo */
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
    outline: 2px solid var(--support); outline-offset: 2px;
    border-color: var(--support); box-shadow: none;
}
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--support); outline-offset: 3px; box-shadow: none;
}

/* --- 3. scale: editorial confidence -------------------------------------- */
:root { --section-padding: 152px; }

.ed-hero { min-height: 78vh; gap: 5vw; }
.ed-hero .ed-hero-copy h1 {
    font-size: clamp(2.9rem, 6.2vw, 6rem); line-height: .96; letter-spacing: -.03em;
}
.ed-hero-ph { min-height: 66vh; }
.ed-hero .ed-hero-kick,
.ed-hero--doc .ed-hero-kick {
    font-size: 11px; letter-spacing: .26em; margin-bottom: 30px;
}
.ed-hero-rule { width: 32px; height: 1px; margin: 34px 0 22px; }
.ed-hero .ed-hero-lead,
.ed-hero--doc .ed-hero-lead { font-size: clamp(1.06rem, 1.5vw, 1.4rem); line-height: 1.5; max-width: 40ch; }
.ed-hero--doc .ed-hero-copy h1 { font-size: clamp(2.9rem, 6vw, 5.6rem); line-height: .98; }

.au-h2 { font-size: clamp(30px, 4.1vw, 52px); line-height: 1.06; letter-spacing: -.025em; }
.feat-body h2 { font-size: clamp(2rem, 3.9vw, 3.1rem); line-height: 1.06; }
.section-label { letter-spacing: .26em; font-size: 10.5px; }

/* photography at scale */
.bleed img { height: clamp(380px, 56vw, 760px); }
.feat { gap: 84px; }
.feat-media img { max-height: 760px; }
.shw-item img { aspect-ratio: 3 / 4; }

/* the statement band becomes a full editorial break */
.stmt { padding: clamp(120px, 17vh, 220px) 0; }
.stmt p { font-size: clamp(1.7rem, 3.6vw, 3rem); line-height: 1.22; max-width: 22ch; font-style: normal; }

@media (max-width: 900px) {
    :root { --section-padding: 96px; }
    .ed-hero { min-height: 0; }
    .ed-hero-ph { min-height: 0; height: 42vh; }
    .feat { gap: 34px; }
}

/* Order correction: the split-hero nav rules are declared before the
   .ed-page .nav reset above, and both carry the same specificity, so the dark
   nav was winning on light-hero pages. Raised to body-scope so it holds. */
body.hero-split .nav,
body.hero-split .nav.scrolled { background: var(--paper); border-bottom: 1px solid var(--rule); }
body.hero-split .nav-links > li > a,
body.hero-split .nav-links > li > a[aria-current="page"],
body.hero-split .nav-arrow { color: var(--support); }
body.hero-split .nav-logo-text span:first-child,
body.hero-split .nav-logo-text span:last-child { color: var(--mark); }
body.hero-split .nav-cta { background: var(--mark); color: var(--ring); }
body.hero-split .nav-toggle span { background: var(--mark); }

/* the last coloured halo */
.brand-tile-link:focus-visible, .service-card:focus-visible, .bento-block-cta:focus-visible,
.faq-item summary:focus-visible { outline: 2px solid var(--support); outline-offset: 3px; box-shadow: none; }

/* the :focus (not :focus-visible) form halo, the last coloured glow */
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    box-shadow: none; border-color: var(--support);
}

/* ==========================================================================
   Editorial pass: motion and composition.
   The motion language is the group site's, lifted intact so HWC moves like
   the rest of the family: one signature ease, headlines that rise word by
   word, photographs that wipe up and settle, rules that draw themselves.
   ========================================================================== */
:root { --ease: cubic-bezier(.16, 1, .3, 1); }

@keyframes word-rise    { from { opacity: 0; transform: translateY(.42em); } to { opacity: 1; transform: none; } }
@keyframes photo-wipe   { from { clip-path: inset(0 0 100% 0); }            to { clip-path: inset(0 0 0 0); } }
@keyframes photo-settle { from { transform: scale(1.08); }                  to { transform: scale(1); } }
@keyframes rule-draw    { from { transform: scaleX(0); }                    to { transform: scaleX(1); } }
@keyframes fade-in      { from { opacity: 0; }                              to { opacity: 1; } }

.word { display: inline-block; animation: word-rise .9s var(--ease) both; }
.ed-hero-rule { transform-origin: left; animation: rule-draw 1s var(--ease) .55s both; }
.ed-hero-kick { animation: fade-in .9s var(--ease) .15s both; }
.ed-hero-lead { animation: fade-in 1s var(--ease) .7s both; }

.ed-hero-ph { animation: photo-wipe 1.5s var(--ease) .25s both; }
.ed-hero-ph img { animation: photo-settle 2.4s var(--ease) .25s both; }

/* registration marks: the plate corner, straight from the group site */
.crop { position: absolute; background: var(--rule); z-index: 4; pointer-events: none; }
.crop-tl-h, .crop-tr-h { height: 1px; width: 18px; top: clamp(92px, 11vh, 132px); }
.crop-tl-v, .crop-tr-v { width: 1px; height: 18px; top: clamp(92px, 11vh, 132px); }
.crop-tl-h, .crop-tl-v { left: clamp(20px, 5vw, 64px); }
.crop-tr-h, .crop-tr-v { right: clamp(20px, 5vw, 64px); }
.ed-hero--doc .crop { background: rgba(244, 235, 217, .4); }

/* --- composition: the photograph runs to the page edge ------------------- */
.feat--bleed { align-items: center; }
.feat--bleed .feat-media { margin-right: calc(-1 * max(24px, (100vw - var(--container-max)) / 2)); }
.feat--bleed.flip .feat-media {
    margin-right: 0;
    margin-left: calc(-1 * max(24px, (100vw - var(--container-max)) / 2));
}
.feat-media img { transition: transform 1.2s var(--ease); }
.feat-media:hover img { transform: scale(1.03); }
@media (max-width: 900px) {
    .feat--bleed .feat-media, .feat--bleed.flip .feat-media {
        margin-left: calc(-1 * var(--container-padding)); margin-right: calc(-1 * var(--container-padding));
    }
}

/* --- the plates are numbered, and lift on approach ----------------------- */
.shw-item { position: relative; }
.shw-n {
    position: absolute; top: -14px; left: -6px; z-index: 2;
    font-family: var(--font-mono); font-size: 44px; font-weight: 500;
    line-height: 1; color: var(--accent); opacity: .5;
    letter-spacing: -.04em; pointer-events: none;
}
.shw-item img { transition: transform 1.2s var(--ease); }
.shw-item:hover img { transform: scale(1.04); }
.shw-name { font-size: 19px; }

/* --- links draw their own rule ------------------------------------------- */
.svc-more, .feat-more { position: relative; border-bottom: none; }
.svc-more::after, .feat-more::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
    background: var(--accent); transition: right .55s var(--ease);
}
.svc-more:hover::after, .feat-more:hover::after { right: 100%; }

/* --- a bolder pull quote ------------------------------------------------- */
.pull-quote { border-left: none; padding: 0; max-width: 20ch; margin: 0 auto; text-align: center; }
.pull-quote p {
    font-size: clamp(1.9rem, 4.4vw, 3.6rem); line-height: 1.14; font-style: normal;
    letter-spacing: -.025em; max-width: none;
}
.pull-quote p::before { content: "\\201C"; }
.pull-quote p::after  { content: "\\201D"; }
.pull-quote cite { display: block; margin-top: 28px; }

/* --- oversized section numerals ------------------------------------------ */
.art-sec-n::before { content: attr(data-n); }
.step-n { font-size: 34px; letter-spacing: -.03em; opacity: .55; }
.step-list li { padding-top: 22px; }

@media (prefers-reduced-motion: reduce) {
    .word, .ed-hero-rule, .ed-hero-kick, .ed-hero-lead, .ed-hero-ph, .ed-hero-ph img { animation: none; }
    .feat-media img, .shw-item img { transition: none; }
}

/* remove the no-op: the numeral is real text, not a data attribute */
.art-sec-n::before { content: none; }

/* the ledger numeral, at editorial scale */
.art-sec-k .art-sec-n {
    font-family: var(--font-mono); font-size: clamp(30px, 3.4vw, 46px); font-weight: 500;
    line-height: 1; letter-spacing: -.04em; color: var(--accent); opacity: .55;
}

/* --- staggered reveal: a section's children arrive in sequence ----------- */
html.js-reveal .fade-in-up > * { opacity: 0; transform: translateY(18px); }
html.js-reveal .fade-in-up.visible > * {
    opacity: 1; transform: none;
    transition: opacity .85s var(--ease), transform .85s var(--ease);
}
html.js-reveal .fade-in-up.visible > *:nth-child(1) { transition-delay: .04s; }
html.js-reveal .fade-in-up.visible > *:nth-child(2) { transition-delay: .13s; }
html.js-reveal .fade-in-up.visible > *:nth-child(3) { transition-delay: .22s; }
html.js-reveal .fade-in-up.visible > *:nth-child(4) { transition-delay: .31s; }
/* the horn bleed is decoration, it must not be staggered in */
html.js-reveal .fade-in-up > .horn-bleed,
html.js-reveal .fade-in-up.visible > .horn-bleed { opacity: .07; transform: none; transition: none; }
html.js-reveal .stmt .horn-bleed, html.js-reveal .group-band .horn-bleed { opacity: .12; }

@media (prefers-reduced-motion: reduce) {
    html.js-reveal .fade-in-up > *,
    html.js-reveal .fade-in-up.visible > * { opacity: 1; transform: none; transition: none; }
}

/* --- The horn band: the group site's device, used as the breath after the
   hero. Statement, hairline to the page edge, horn crossing behind. --- */
.horn-band {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: clamp(220px, 34vh, 380px); display: flex; align-items: center;
    padding: clamp(28px, 4vh, 52px) 0; background: var(--paper);
}
.horn-band-inner { display: flex; align-items: center; gap: 44px; position: relative; z-index: 1; }
.horn-statement {
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(1.7rem, 3.6vw, 3rem); line-height: 1.1; letter-spacing: -.025em;
    color: var(--mark); margin: 0; flex: none; max-width: none;
}
.horn-band-rule {
    flex: 1; height: 1px; background: var(--rule);
    margin-right: calc(-1 * max(24px, (100vw - var(--container-max)) / 2));
}
/* positioned with margin, not transform: the reveal owns child transforms */
.horn-bleed--band {
    right: -10vw; top: 44%; bottom: auto;
    width: clamp(560px, 64vw, 940px);
    margin-top: calc(clamp(560px, 64vw, 940px) * -0.105);
}
@media (max-width: 760px) {
    .horn-band { min-height: 0; padding: 44px 0; }
    .horn-band-rule { display: none; }
}

/* --- Who we are · what we do · why we do it ------------------------------ */
.tri-band { padding-top: clamp(64px, 9vh, 110px); }
.tri-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; }
.tri-col { border-top: 1px solid var(--mark); padding-top: 22px; }
.tri-q {
    display: block; font-family: var(--font-mono); font-size: 11px;
    letter-spacing: .22em; text-transform: uppercase; color: var(--support);
    margin-bottom: 18px;
}
.tri-a {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(1.02rem, 1.35vw, 1.24rem); line-height: 1.58;
    color: var(--mark); margin: 0; max-width: 34ch;
}
@media (max-width: 880px) { .tri-grid { grid-template-columns: 1fr; gap: 34px; } }

/* ==========================================================================
   Differentiating the blocks.
   The complaint was fair: every passage of copy was set identically, so the
   page read as one long column. Each kind of block now has its own voice.
   ========================================================================== */

/* 1. The lead sentence of a band carries weight: Lora, larger, in the ink
      colour, so the eye has somewhere to land before the body text. */
.ed-ledger-body p:first-of-type,
.feat-body p:first-of-type {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(1.14rem, 1.55vw, 1.42rem); line-height: 1.52;
    color: var(--mark); margin-bottom: 22px;
}
.ed-ledger-body p:not(:first-of-type),
.feat-body p:not(:first-of-type) {
    font-family: var(--font-body); font-size: 16px; line-height: 1.78; color: var(--ink-soft);
}

/* 3. Grounds alternate so consecutive blocks separate without boxes. */
.art-band            { background: var(--paper); }
.art-band-alt        { background: var(--paper-deep); }
.band-ivory          { background: var(--ring); }

/* 4. The ledger strip: mono metadata, the Brand Book's specification register.
      Used where a page is describing a document rather than making a case. */
.ledger-strip {
    display: flex; flex-wrap: wrap; gap: 0;
    border-top: 1px solid var(--mark); border-bottom: 1px solid var(--rule);
    margin: 0;
}
.ledger-strip div {
    flex: 1 1 180px; padding: 18px 26px 18px 0; border-right: 1px solid var(--rule);
}
.ledger-strip div:last-child { border-right: none; }
.ledger-strip dt {
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .2em;
    text-transform: uppercase; color: var(--ink-mute); margin-bottom: 9px;
}
.ledger-strip dd {
    font-family: var(--font-mono); font-size: 14px; letter-spacing: .02em;
    color: var(--mark); margin: 0;
}

/* 5. The specification list reads as a specification, not as prose. */
.spec-list li {
    font-family: var(--font-body); font-size: 15.5px; line-height: 1.5;
    color: var(--ink-soft); padding: 17px 0 17px 34px;
}
.spec-list li::before { top: 26px; width: 20px; background: var(--mark); }

/* 6. Service-page headings sit against a large mono numeral rather than
      repeating the same centred label treatment. */
.svc-h2 { display: flex; align-items: baseline; gap: 22px; }
.svc-h2 .n {
    font-family: var(--font-mono); font-size: clamp(26px, 3vw, 40px); font-weight: 500;
    color: var(--accent); opacity: .5; letter-spacing: -.04em; flex: none;
}

/* ==========================================================================
   Text registers.
   The previous pass changed type styles but left every block the same shape,
   so the page still read in one voice. These are distinct architectures: a
   passage is set as a manifesto, or as magazine columns, or as annotated
   copy with a note in the margin, or as an index. The register carries
   meaning, not just variety.
   ========================================================================== */

/* 1. MANIFESTO — one idea, enormous, narrow measure, deliberately offset. */
.manifesto { padding: clamp(96px, 15vh, 190px) 0; background: var(--paper); }
.manifesto-inner { max-width: 1160px; margin: 0 auto; padding: 0 var(--container-padding); }
.manifesto p {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(2.1rem, 5.4vw, 4.6rem); line-height: 1.04; letter-spacing: -.035em;
    color: var(--mark); max-width: 17ch; margin: 0 0 0 auto; text-wrap: balance;
}
.manifesto.left p { margin: 0 auto 0 0; }
.manifesto em { font-style: italic; color: var(--accent-text); }
.manifesto-note {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .22em;
    text-transform: uppercase; color: var(--ink-mute); margin: 34px 0 0 auto;
    max-width: 17ch; display: block;
}

/* 2. MAGAZINE COLUMNS — long prose set in two columns with a proper measure. */
.two-col { columns: 2; column-gap: 68px; column-rule: 1px solid var(--rule); }
.two-col p { max-width: none; break-inside: avoid-column; }
.two-col p:first-of-type { margin-top: 0; }
@media (max-width: 860px) { .two-col { columns: 1; } }

/* 3. ANNOTATED — a mono note sits in the margin beside the copy, as a
      surveyor's marginal annotation rather than a pull quote. */
.annot { display: grid; grid-template-columns: 190px 1fr; gap: 48px; align-items: start; }
.annot-note {
    font-family: var(--font-mono); font-size: 10.5px; line-height: 1.75;
    letter-spacing: .13em; text-transform: uppercase; color: var(--support);
    border-top: 1px solid var(--mark); padding-top: 14px;
}
@media (max-width: 880px) { .annot { grid-template-columns: 1fr; gap: 20px; } }

/* 4. LEAD-IN — the opening words in mono small caps, so a paragraph starts
      on a different note from the one before it. */
.lead-in::first-line { font-variant-caps: normal; }
.lead-in .in {
    font-family: var(--font-mono); font-size: .78em; letter-spacing: .16em;
    text-transform: uppercase; color: var(--support); margin-right: .5em;
}

/* 5. INDEX — a numbered register, mono, ruled, nothing like running prose. */
.index-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--mark); }
.index-list li {
    display: grid; grid-template-columns: 62px 1fr; gap: 26px; align-items: baseline;
    padding: 26px 0; border-bottom: 1px solid var(--rule); margin: 0;
}
.index-list li::before { display: none; }
.index-n {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em;
    color: var(--accent-text);
}
.index-t { font-family: var(--font-display); font-size: clamp(1.1rem, 1.7vw, 1.5rem);
    line-height: 1.3; color: var(--mark); }
.index-d { font-family: var(--font-body); font-size: 15px; line-height: 1.7;
    color: var(--ink-soft); margin-top: 8px; max-width: 62ch; }

/* 6. The process numerals become a real graphic element. */
.step-n { font-size: clamp(46px, 5.4vw, 78px); opacity: .4; line-height: .85;
    display: block; margin-bottom: 18px; }
.step-list { gap: 44px; }
.step-list li { border-top: 1px solid var(--mark); }

/* 7. Heading scale alternates so consecutive sections do not match. */
.section:nth-of-type(odd) > .container > .ed-ledger-head .au-h2 { font-size: clamp(30px, 4.4vw, 58px); }
.section:nth-of-type(even) > .container > .ed-ledger-head .au-h2 { font-size: clamp(24px, 2.6vw, 34px); }

/* ==========================================================================
   Further design cues.
   Devices from the Brand Book's own vocabulary: the plate, the ledger strip,
   the marginal numeral, the registration mark. Each one does a job.
   ========================================================================== */

/* A large numeral sits in the margin of a ledger band, not inline with it. */
.ed-ledger-k { position: relative; }
.art-sec-k { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }

/* Plates take registration corners, like a photograph mounted on a board. */
.plate { position: relative; padding: 14px; }
.plate::before, .plate::after {
    content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
}
.plate::before { top: 0; left: 0;  border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.plate::after  { bottom: 34px; right: 0; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); }

/* The page ledger: every page signs off with its own document line, which is
   the Brand Book's file-number habit rather than decoration. */
.page-ledger { border-top: 1px solid var(--rule); padding: 26px 0 0; margin-top: 8px; }
.page-ledger dl {
    display: flex; flex-wrap: wrap; gap: 0 54px; margin: 0;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em;
    text-transform: uppercase; color: var(--ink-mute);
}
.page-ledger dt { display: inline; }
.page-ledger dt::after { content: " — "; }
.page-ledger dd { display: inline; margin: 0; color: var(--mark); }
.page-ledger div { display: inline-block; }

/* Rules carry weight by role: the section rule is heavier than the hairline. */
.ed2-mini-rule { width: 32px; height: 1px; background: var(--mark); display: inline-block; }
.ed-ledger-head { border-top: 1px solid var(--mark); padding-top: 26px; }

/* Captions everywhere read as one system. */
.plate figcaption, .feat-media figcaption, .bleed-cap .bleed-kick, .shw-place {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
}

/* The lead-in device, applied to the first paragraph after a manifesto. */
.after-manifesto .ed-ledger-body p:first-of-type::first-line {
    font-variant: small-caps; letter-spacing: .04em;
}
.page-ledger-band { padding: 0 0 clamp(52px, 7vh, 88px); background: var(--paper); }

/* ==========================================================================
   Scheme C applied: aubergine support, plaster pink tint.
   Three darks now do distinct jobs: bordeaux is the ring and the footer,
   aubergine the mid-page statement, walnut the group band. Plaster pink is
   the light tone on every one of them.
   ========================================================================== */

.stmt { background: var(--support); }              /* aubergine */
.group-band { background: var(--walnut); }         /* walnut, apart from the footer */

/* the light tone carries meta type on every dark ground */
.stmt .section-label,
.group-band .section-label,
.group-band .group-band-cap { color: var(--tint); }
.ed-hero--doc .ed-hero-kick { color: var(--tint); }
.ed-hero--doc .ed-hero-vlabel,
.ed-hero--doc .ed-hero-spec { color: var(--tint); opacity: .85; }
.bleed-kick { color: var(--accent-text); }
.footer-endorsement { color: var(--tint); }
.footer-heading { color: var(--tint); opacity: .7; }
.group-roster a { color: var(--tint); }
.group-roster a:hover { color: var(--paper); }
.footer-group-list a { color: var(--tint); }
.footer-group-list a:hover { color: var(--paper); }

/* aubergine takes the structural marks on light grounds */
.section-label      { color: var(--support); }
.tri-q              { color: var(--support); }
.serve-card         { border-top: 1px solid var(--support); }
.tri-col            { border-top: 1px solid var(--support); }
.annot-note         { color: var(--support); border-top-color: var(--support); }
.index-n            { color: var(--accent-text); }
.faq-item summary::after {
    background: linear-gradient(var(--support), var(--support)) center/14px 1.5px no-repeat,
                linear-gradient(var(--support), var(--support)) center/1.5px 14px no-repeat;
}
.svc-kick           { color: var(--support); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
.form-group input:focus-visible, .form-group select:focus-visible,
.form-group textarea:focus-visible { outline-color: var(--support); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--support); }

/* the statement band's horn lifts in plaster rather than ivory */
.stmt .horn-bleed { background-color: var(--tint); opacity: .14; }
.group-band .horn-bleed { background-color: var(--tint); opacity: .12; }

/* ==========================================================================
   Corrections: registration marks, leading, and the spaces between things.
   ========================================================================== */

/* 1. The crop marks sat at the same x-offset as the hero copy and at a height
      the copy could grow into. Moved outboard, raised into the hero's top
      padding, and the copy given a floor so the two can never meet. */
.crop-tl-h, .crop-tr-h { top: clamp(104px, 13vh, 150px); width: 16px; }
.crop-tl-v, .crop-tr-v { top: clamp(104px, 13vh, 150px); height: 16px; }
.crop-tl-h, .crop-tl-v { left:  clamp(14px, 3.2vw, 40px); }
.crop-tr-h, .crop-tr-v { right: clamp(14px, 3.2vw, 40px); }
.ed-hero .ed-hero-copy { padding-top: clamp(162px, 20vh, 232px); }
@media (max-width: 900px) {
    .crop { display: none; }            /* no room for them, and nothing to register */
    .ed-hero .ed-hero-copy { padding-top: 0; }
}

/* 2. Leading. Lora at display sizes was set as tight as .96, which drops the
      descenders of one line onto the capitals of the next. These are the
      tightest values that still clear. */
.ed-hero .ed-hero-copy h1      { line-height: 1.03; }
.ed-hero--doc .ed-hero-copy h1 { line-height: 1.03; }
.manifesto p                   { line-height: 1.09; }
.au-h2                         { line-height: 1.10; }
.feat-body h2                  { line-height: 1.10; }
.pull-quote p                  { line-height: 1.18; }
.horn-statement                { line-height: 1.12; }
.index-t                       { line-height: 1.34; }

/* 3. Copy needs air between paragraphs, not just within them. */
.ed-ledger-body p, .feat-body p, .annot-body p { margin-bottom: 25px; }
.ed-ledger-body p:last-child, .feat-body p:last-child, .annot-body p:last-child { margin-bottom: 0; }
.two-col p { margin-bottom: 21px; }
.tri-a { line-height: 1.62; }
.serve-card p, .step-list p { line-height: 1.68; }
.spec-list li { line-height: 1.55; }
.faq-a p { line-height: 1.72; }

/* 4. Breathing room around the devices themselves. */
.ed-ledger-head { margin-bottom: 52px; }
.manifesto-note { margin-top: 40px; }
.annot { gap: 56px; }
.ledger-strip div { padding: 22px 30px 22px 0; }

/* ==========================================================================
   Scale: the full-bleed register.
   Grandeur here is a question of how much room a photograph is given and how
   much quiet sits around it. Three tiers, because only three photographs are
   large enough to run the full width without softening.
   ========================================================================== */

/* TALL — edge to edge, near full height. Only for images at 2400px. */
.bleed--tall img { height: clamp(520px, 82vh, 980px); }
/* MID — edge to edge but shorter, so a 1400px image still holds. */
.bleed--mid  img { height: clamp(360px, 48vh, 600px); }
.bleed img       { height: clamp(460px, 68vh, 860px); }

/* The caption sits under the image, in from the edge, with room to breathe. */
.bleed { margin: clamp(28px, 5vh, 72px) 0 clamp(40px, 7vh, 96px); }
.bleed-cap { padding-top: 20px; }
.bleed-cap .container { gap: 10px 26px; }

/* A tall band gets silence above and below it: the luxury is the emptiness. */
.bleed--tall { margin: clamp(56px, 10vh, 150px) 0 clamp(64px, 11vh, 160px); }

/* GATEFOLD — two photographs, each running off its own outer edge. */
.gatefold { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 40px); }
.gatefold figure { margin: 0; }
.gatefold img { width: 100%; height: clamp(320px, 46vw, 680px); object-fit: cover; display: block; }
.gatefold figure:first-child { margin-left: calc(-1 * max(24px, (100vw - var(--container-max)) / 2)); }
.gatefold figure:last-child  { margin-right: calc(-1 * max(24px, (100vw - var(--container-max)) / 2)); }
.gatefold figcaption {
    margin-top: 13px; font-family: var(--font-mono); font-size: 10px;
    letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute);
}
@media (max-width: 760px) {
    .gatefold { grid-template-columns: 1fr; }
    .gatefold figure:first-child, .gatefold figure:last-child { margin: 0; }
}

/* The showcase drops to two across so each plate is twice the size. */
.shw-grid { grid-template-columns: repeat(2, 1fr); gap: clamp(26px, 3.4vw, 56px); }
.shw-item img { aspect-ratio: 5 / 4; }
.shw-n { font-size: 56px; top: -20px; }
.shw-name { font-size: clamp(19px, 1.7vw, 24px); }
@media (max-width: 620px) { .shw-grid { grid-template-columns: 1fr; } }

/* Feature photographs get more height, and the copy more room beside them. */
.feat-media img { max-height: 860px; min-height: clamp(340px, 52vh, 700px); object-fit: cover; }
.feat { gap: clamp(44px, 6vw, 96px); }

/* Heroes open taller. */
.ed-hero { min-height: 86vh; }
.ed-hero-ph { min-height: 74vh; }
@media (max-width: 900px) { .ed-hero { min-height: 0; } .ed-hero-ph { height: 46vh; min-height: 0; } }

/* ==========================================================================
   Build pass: the two references, plus the audit.
   Atelier gives irregular column widths, asymmetric captions with their
   metadata set right, and the running meta strip. Roomie gives the weight
   imbalance: a small copy block against a large photograph, with air.
   ========================================================================== */

/* --- viewport units: dvh, so iOS Safari does not jump ------------------- */
.ed-hero      { min-height: 86dvh; }
.ed-hero-ph   { min-height: 74dvh; }
.ed-hero--doc { min-height: clamp(430px, 58dvh, 620px); }
.bleed--tall img { height: clamp(520px, 82dvh, 980px); }
.bleed--mid  img { height: clamp(360px, 48dvh, 600px); }
.bleed img       { height: clamp(460px, 68dvh, 860px); }
.stmt { padding: clamp(120px, 17dvh, 220px) 0; }
@media (max-width: 900px) {
    .ed-hero { min-height: 0; }
    .ed-hero-ph { height: 46dvh; min-height: 0; }
}

/* --- the running meta strip --------------------------------------------- */
.meta-strip { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.meta-strip .container {
    display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
    padding-top: 15px; padding-bottom: 15px;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em;
    text-transform: uppercase; color: var(--ink-mute);
}
@media (max-width: 560px) { .meta-strip .container span:last-child { display: none; } }

/* --- irregular grids: the columns are not all the same width ------------ */
.shw-grid { grid-template-columns: 1.35fr 1fr; }
.shw-item:nth-child(3) { grid-column: 1 / -1; }
.shw-item:nth-child(3) img { aspect-ratio: 21 / 9; }
.shw-item:nth-child(n+4) { grid-column: auto; }
@media (max-width: 620px) {
    .shw-grid { grid-template-columns: 1fr; }
    .shw-item:nth-child(3) { grid-column: auto; }
    .shw-item:nth-child(3) img { aspect-ratio: 5 / 4; }
}

/* --- captions: name left, metadata right, on a rule --------------------- */
.shw-item figcaption {
    flex-direction: row; justify-content: space-between; align-items: baseline;
    gap: 18px; border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 14px;
}
.shw-place { text-align: right; flex: none; }

/* --- who we act for: no longer three equal columns ---------------------- */
.serve-grid { grid-template-columns: 1.25fr 1fr 1fr; gap: clamp(28px, 4vw, 64px); }
.serve-card:first-child { border-top-width: 3px; }
.serve-card:first-child h3 { font-size: clamp(22px, 2vw, 27px); }
.serve-card:first-child p { font-size: 16.5px; }
@media (max-width: 860px) { .serve-grid { grid-template-columns: 1fr; } }

/* --- Roomie's imbalance: a smaller copy block, far more air ------------- */
.ed-hero { grid-template-columns: .82fr 1.18fr; }
.ed-hero .ed-hero-copy { padding-bottom: 7dvh; }
.ed-hero .ed-hero-lead { max-width: 32ch; }
@media (max-width: 900px) { .ed-hero { grid-template-columns: 1fr; } }

/* --- typographic hygiene from the audit --------------------------------- */
h1, h2, h3, .manifesto p, .horn-statement, .stmt p, .bleed-line, .index-t {
    text-wrap: balance;
}
p, .tri-a, .serve-card p, .step-list p { text-wrap: pretty; }
.ledger-strip dd, .price-figure, .svc-price, .step-n, .meta-strip .container {
    font-variant-numeric: tabular-nums;
}

/* --- optical vertical rhythm: a section needs more below than above ----- */
.section { padding-top: var(--section-padding);
           padding-bottom: calc(var(--section-padding) * 1.12); }

/* ==========================================================================
   The four services as four different objects.
   A photographic plate, two solid colour blocks and a ruled schedule, at
   three widths. The point is that they are told apart at a glance.
   ========================================================================== */

.svc-grid {
    display: grid; grid-template-columns: repeat(6, 1fr);
    gap: clamp(18px, 2.2vw, 34px); background: none; border: none;
}
.svc-card { padding: 0; display: block; background: none; }
.svc-body { padding: clamp(26px, 2.6vw, 40px); display: flex; flex-direction: column; height: 100%; }

/* 01 — the plate: a photograph over its description, the widest of the four */
.svc-plate { grid-column: span 4; background: var(--paper-deep); }
.svc-figure { margin: 0; overflow: hidden; }
.svc-figure img {
    width: 100%; height: clamp(230px, 24vw, 340px); object-fit: cover; display: block;
    transition: transform 1.2s var(--ease);
}
.svc-plate:hover .svc-figure img { transform: scale(1.03); }

/* 02 — a solid block, reversed. Tall and narrow beside the plate. */
.svc-solid { grid-column: span 2; background: var(--mark); }
.svc-solid.tone-aubergine { background: var(--support); }
.svc-solid.tone-walnut    { background: var(--walnut); }
.svc-solid .svc-kick { color: var(--tint); }
.svc-solid h3 a { color: var(--paper); }
.svc-solid h3 a:hover { color: var(--tint); }
.svc-solid .svc-lead { color: rgba(244, 239, 230, .82); }
.svc-solid .svc-meta { border-color: rgba(244, 235, 217, .22); }
.svc-solid .svc-meta li { color: rgba(244, 235, 217, .6); border-color: rgba(244, 235, 217, .18); }
.svc-solid .svc-more { color: var(--paper); border-bottom-color: var(--tint); }
.svc-solid .svc-more::after { background: var(--tint); }

/* 03 — the schedule: ivory, ruled, showing what the document contains */
.svc-card.svc-schedule { grid-column: span 3; background: var(--ring); }
.svc-schedule ul, ul.svc-schedule {
    list-style: none; margin: 4px 0 24px; padding: 0; border-top: 1px solid var(--rule);
}
ul.svc-schedule li {
    padding: 11px 0 11px 22px; border-bottom: 1px solid var(--rule); margin: 0;
    font-size: 14.5px; line-height: 1.45; color: var(--ink-soft); position: relative;
}
ul.svc-schedule li::before {
    content: ""; position: absolute; left: 0; top: 19px;
    width: 12px; height: 1px; background: var(--accent); border-radius: 0;
}

/* the fourth card balances the third */
.svc-card.svc-solid:last-child { grid-column: span 3; }

.svc-card h3 { font-size: clamp(21px, 1.9vw, 27px); margin-bottom: 12px; }
.svc-lead { margin-bottom: 20px; }
.svc-more { margin-top: auto; }

@media (max-width: 900px) {
    .svc-grid { grid-template-columns: 1fr; }
    .svc-plate, .svc-solid, .svc-card.svc-schedule,
    .svc-card.svc-solid:last-child { grid-column: auto; }
}

/* --- each service PAGE inherits its tone -------------------------------- */
.svc-page.tone-bordeaux  { --tone: var(--mark); }
.svc-page.tone-aubergine { --tone: var(--support); }
.svc-page.tone-ivory     { --tone: var(--accent-text); }
.svc-page.tone-walnut    { --tone: var(--walnut); }
.svc-page .ledger-strip      { border-top-color: var(--tone); }
.svc-page .ledger-strip dd   { color: var(--tone); }
.svc-page .manifesto p       { color: var(--tone); }
.svc-page .spec-list li::before { background: var(--tone); }
.svc-page .ed-ledger-head    { border-top-color: var(--tone); }
.svc-page .ed2-mini-rule     { background: var(--tone); }
.svc-page .plate::before, .svc-page .plate::after { border-color: var(--tone); }

/* --- footer additions required by brief v5 ------------------------------- */
.footer-coverage, .footer-promise { color: var(--tint); font-size: 13.5px; line-height: 1.75; margin-top: 12px; }
.footer-memberships { font-size: 12.5px; line-height: 1.75; color: rgba(255,255,255,.55); margin-top: 14px; }
.footer-legal { border-top: 1px solid rgba(255,255,255,.1); padding-top: 22px; margin-top: 4px; }
.footer-legal p {
    font-family: var(--font-mono); font-size: 10.5px; line-height: 1.9;
    letter-spacing: .04em; color: rgba(255,255,255,.45); margin: 0; max-width: none;
}

/* --- brief v5 components ------------------------------------------------- */
.answer-band { padding-top: clamp(40px, 5vh, 70px); padding-bottom: 0; }
.answer {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(1.18rem, 1.85vw, 1.62rem); line-height: 1.5;
    color: var(--mark); max-width: 60ch; margin: 0; text-wrap: pretty;
}
.answer-check {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--accent-text); margin: 18px 0 0;
    border-left: 1px solid var(--accent); padding-left: 12px;
}
.crumbs { border-bottom: 1px solid var(--rule); }
.crumbs ol {
    list-style: none; display: flex; flex-wrap: wrap; gap: 0 10px; margin: 0;
    padding: 13px 0; font-family: var(--font-mono); font-size: 10px;
    letter-spacing: .16em; text-transform: uppercase;
}
.crumbs li { padding: 0; margin: 0; color: var(--ink-mute); }
.crumbs li::before { display: none; }
.crumbs li + li::before { content: "/"; display: inline; margin-right: 10px; color: var(--rule); }
.crumbs a { color: var(--support); }
.crumbs a:hover { color: var(--mark); }
.reviewed { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--ink-mute); margin: 0; }

.hub-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--mark); }
.hub-list li { display: grid; grid-template-columns: 1fr 1.2fr; gap: 34px; align-items: baseline;
    padding: 26px 0; border-bottom: 1px solid var(--rule); margin: 0; }
.hub-list li::before { display: none; }
.hub-name a { font-family: var(--font-display); font-size: clamp(1.1rem, 1.7vw, 1.5rem);
    line-height: 1.28; color: var(--mark); text-decoration: none; }
.hub-name a:hover { color: var(--accent-text); }
.hub-lead { font-size: 15px; line-height: 1.68; color: var(--ink-soft); margin: 0; }
@media (max-width: 760px) { .hub-list li { grid-template-columns: 1fr; gap: 10px; } }

.link-row { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 26px; margin: 14px 0 0; padding: 0; }
.link-row li { margin: 0; padding: 0; }
.link-row li::before { display: none; }
.link-row a { font-size: 15px; color: var(--mark); border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
.link-row a:hover { color: var(--accent-text); }

.door-list { list-style: none; margin: 40px 0 0; padding: 0; display: grid;
    grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.door-list li { margin: 0; padding: 0; }
.door-list li::before { display: none; }
.door-list a { display: flex; flex-direction: column; gap: 10px; background: var(--paper);
    padding: 30px 28px; height: 100%; text-decoration: none; transition: background var(--transition-fast); }
.door-list a:hover { background: var(--ring); }
.door-name { font-family: var(--font-display); font-size: 20px; line-height: 1.25; color: var(--mark); }
.door-for { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--support); }
@media (max-width: 760px) { .door-list { grid-template-columns: 1fr; } }

.cta-alts { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 22px; }
.cta-alt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--support); border-bottom: 1px solid var(--rule); padding-bottom: 3px; }
.cta-alt:hover { color: var(--mark); border-bottom-color: var(--accent); }
.form-wrap { max-width: 720px; }
.form-privacy { font-size: 13px; line-height: 1.7; color: var(--ink-mute); margin: 8px 0 22px; }

/* ==========================================================================
   DESIGN BRIEF v2 (30 September 2026) — presentation layer.
   v2 governs presentation; copy brief v5.3 governs content. Where the two
   conflict, v5.3 wins on words and v2 wins on how they look.

   Deviations from v2 as written, all deliberate and recorded in the handover:
     - Support colour is Aubergine #4A2540, not Peacock teal #1F4A47. The
       client rejected the green and chose this scheme; v2 s3 was written
       without that decision. The teal "data moment" is aubergine.
     - Accent is the Brand Book's #B8893A (v2 s3 [check]), decorative only.
       Gold TEXT uses #7F5E28 so it clears AA on ivory and paper.
     - Focus rings are aubergine, not teal, for the same reason.
   ========================================================================== */
:root {
    /* --- s5 spacing, 8px base. No off-scale values. ---------------------- */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
    --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
    --s-9: 96px; --s-10: 128px; --s-11: 192px;
    --section-padding: clamp(72px, 10vw, 192px);
    --gutter: clamp(24px, 3vw, 40px);

    /* --- s4 fluid type scale (desktop max / mobile min) ------------------ */
    --fs-h1:      clamp(2.625rem, 5.6vw, 6rem);      /* 42 -> 96 */
    --fs-h2:      clamp(2rem,     3.4vw, 3.75rem);   /* 32 -> 60 */
    --fs-h3:      clamp(1.4375rem, 1.3vw, 1.875rem); /* 23 -> 30 */
    --fs-stand:   clamp(1.3125rem, 1.1vw, 1.625rem); /* 21 -> 26 */
    --fs-body:    clamp(1.0625rem, .35vw, 1.125rem); /* 17 -> 18 */
    --fs-label:   12px;
    --fs-numeral: clamp(4rem, 7vw, 7.5rem);          /* 64 -> 120 */

    /* --- s9 motion tokens ------------------------------------------------ */
    --t-fast: 200ms; --t-base: 450ms; --t-slow: 800ms; --t-hero: 1400ms;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-inout: cubic-bezier(.65, 0, .35, 1);
    --stagger: 70ms;

    /* --- s6 hairline colours --------------------------------------------- */
    --rule-dark: rgba(244, 235, 217, .2);  /* Ivory 20% on bordeaux/aubergine */
}

/* --- s8 shape: square by default. The circle belongs to the seal alone. -- */
.ed-page *, .ed-page *::before, .ed-page *::after { border-radius: 0; }
.ed-page .seal, .ed-page .seal *,
.ed-page .footer-logo-circle, .ed-page .nav-logo > img,
.ed-page .footer-logo-circle > img { border-radius: 50%; }

/* --- s3 body text is Bordeaux on Ivory or Paper -------------------------- */
.ed-page { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6; color: var(--mark); }
.ed-page p { max-width: 68ch; text-wrap: pretty; }

/* --- s4 setting: Lora Regular, never Bold. Authority from scale. --------- */
.ed-page h1, .ed-page h2, .ed-page h3 {
    font-family: var(--font-display); font-weight: 400;
    text-wrap: balance; color: var(--mark);
}
.ed-page h1 { font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -.02em; }
.ed-page h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.015em; }
.ed-page h3 { font-size: var(--fs-h3); line-height: 1.2;  letter-spacing: -.01em; font-weight: 500; }
.ed-page h1 em, .ed-page h2 em { font-style: italic; }
.standfirst, .ed-hero-lead, .hub-lead {
    font-family: var(--font-display); font-size: var(--fs-stand);
    line-height: 1.4; font-weight: 400;
}

/* --- s4 metadata face: JetBrains Mono, uppercase, tracked --------------- */
.section-label, .eyebrow, .ed-hero-kick, .code-tag, .meta-label,
.nav-links a, .nav-cta, .btn, .card-turn, .case-code, .data-label {
    font-family: var(--font-mono); text-transform: uppercase;
    font-size: var(--fs-label); letter-spacing: .16em; font-weight: 400;
}
/* The wordmark is the one lowercase Inter Tight element. s4 [check]: -0.03em. */
.wordmark { font-family: var(--font-ui); font-weight: 500; text-transform: lowercase; letter-spacing: -.03em; }

/* --- s4 oversized section numeral, antique gold, decorative ------------- */
.section-numeral {
    font-family: var(--font-display); font-weight: 400;
    font-size: var(--fs-numeral); line-height: .8;
    color: var(--accent); display: block;
    /* optical alignment: large numerals hang slightly left of the column */
    margin-left: -.06em;
}

/* --- s6 section opening: full-width hairline carrying numeral + eyebrow -- */
.section-open { border-top: 1px solid var(--rule); padding-top: var(--s-5); display: flex; align-items: baseline; gap: var(--s-5); }
.section-open .section-label { color: var(--accent-text); }
.on-dark .section-open { border-top-color: var(--rule-dark); }

/* --- s6 tables: horizontal hairlines only, 56px rows ------------------- */
.ed-page table { width: 100%; border-collapse: collapse; }
.ed-page th, .ed-page td { border-bottom: 1px solid var(--rule); height: 56px; text-align: left; padding: 0 var(--s-4) 0 0; }
.ed-page th { font-family: var(--font-mono); text-transform: uppercase; font-size: var(--fs-label); letter-spacing: .16em; }

/* --- s10 buttons: square, 52px, mono, bordeaux wipe from the bottom ----- */
.btn { position: relative; display: inline-flex; align-items: center; gap: var(--s-3);
       height: 52px; padding: 0 var(--s-5); border: 1px solid var(--mark);
       background: transparent; color: var(--mark); overflow: hidden;
       transition: color var(--t-fast) var(--ease-out); }
.btn::before { content: ""; position: absolute; inset: 0; background: var(--mark);
               transform: translateY(101%); transition: transform var(--t-fast) var(--ease-out); z-index: -1; }
.btn > * { position: relative; }
.btn:hover { color: var(--ring); }
.btn:hover::before { transform: translateY(0); }
.btn--primary { background: var(--mark); color: var(--ring); }
.btn--primary::before { background: var(--support); }

/* --- s9 links: 1px underline drawn from the left, offset 4px ----------- */
.ed-page .prose a, .ed-page .hub-name a {
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
    text-decoration-color: var(--accent); transition: text-decoration-color var(--t-fast) var(--ease-out);
}
.ed-page .prose a:hover { text-decoration-color: var(--mark); }

/* --- s10 focus. v2 says teal; aubergine substitutes. Never gold. ------- */
.ed-page :focus-visible { outline: 2px solid var(--support); outline-offset: 3px; }
.on-dark :focus-visible, .site-footer :focus-visible { outline-color: var(--ring); }

/* --- s10 service card: hairline top, mono numeral, Lora name, no price -- */
.svc-card { border-top: 1px solid var(--rule); padding-top: var(--s-5); background: none; box-shadow: none; }
.svc-card .card-n { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .16em; color: var(--accent-text); }
.svc-card h3 { margin: var(--s-3) 0 var(--s-2); }
.svc-card .card-turn { display: block; margin-top: var(--s-4); color: var(--accent-text); }
.svc-card .card-arrow { transition: transform var(--t-fast) var(--ease-out); }
.svc-card:hover .card-arrow { transform: translateX(4px); }

/* --- s10 case study card: 3:2 image, mono code line, Lora title -------- */
.case-card figure { margin: 0; overflow: hidden; }
.case-card img { aspect-ratio: 3 / 2; width: 100%; object-fit: cover;
                 transition: transform 700ms var(--ease-out); }
.case-card:hover img { transform: scale(1.03); }
.case-card .case-code { display: block; margin-top: var(--s-4); color: var(--accent-text); }
.case-card h3 { margin: var(--s-2) 0; }

/* --- s8 the code tag: rectangular label, warm rule border -------------- */
.code-tag { display: inline-block; border: 1px solid var(--rule); padding: var(--s-1) var(--s-2); letter-spacing: .14em; }
.on-dark .code-tag { border-color: var(--rule-dark); color: var(--ring); }

/* --- s10 pull quote: Lora italic 40-56px, gold hanging quotation mark --- */
.pull-quote { border: 0; padding: 0; max-width: none; }
/* v2 s10 gives 40 to 56px. The upper end only reads in a full-width column;
   beside the CTA the quote sits in five columns, so it takes the lower end
   and a measure that keeps it to four or five lines. */
.pull-quote blockquote { font-family: var(--font-display); font-style: italic; font-weight: 400;
    font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1.18; margin: 0; text-indent: -.42em;
    max-width: 22ch; }
.pull-quote blockquote::before { content: "\201C"; color: var(--accent); }
.pull-quote figcaption { font-family: var(--font-mono); text-transform: uppercase;
    font-size: var(--fs-label); letter-spacing: .16em; margin-top: var(--s-5); color: var(--accent-text); }

/* --- s10 data moment: one large figure on the support ground ----------- */
.data-moment { background: var(--support); color: var(--ring); padding: var(--section-padding) 0; }
.data-figure { font-family: var(--font-display); font-weight: 400; font-size: clamp(4.5rem, 12vw, 11rem);
               line-height: .85; letter-spacing: -.03em; color: var(--ring); display: block; }
.data-moment .data-unit { font-family: var(--font-display); font-size: var(--fs-stand); color: var(--tint); display: block; margin-top: var(--s-4); }
.data-moment .data-label { display: block; margin-top: var(--s-6); color: var(--tint); }

/* --- s10 guide furniture: sticky TOC, review labels -------------------- */
/* A gold drop cap opened the first paragraph of every guide. Removed at the
   client's direction: the body copy now starts as body copy. */
.art-toc { position: sticky; top: 120px; align-self: start; }
.review-line { font-family: var(--font-mono); text-transform: uppercase; font-size: var(--fs-label);
               letter-spacing: .16em; color: var(--accent-text); }

/* --- s10 forms: underline inputs, hairline progress ------------------- */
.ed-page input:not([type=checkbox]), .ed-page textarea, .ed-page select {
    font-family: var(--font-display); font-size: var(--fs-body); color: var(--mark);
    background: transparent; border: 0; border-bottom: 1px solid var(--mark);
    padding: var(--s-3) 0; width: 100%; appearance: none;
    transition: border-color var(--t-fast) var(--ease-out);
}
.ed-page input:focus, .ed-page textarea:focus, .ed-page select:focus { border-bottom-color: var(--support); }
.ed-page label { font-family: var(--font-display); font-size: var(--fs-stand); line-height: 1.4; }
.form-progress { height: 1px; background: var(--rule); }
.form-progress > i { display: block; height: 1px; background: var(--mark); transition: width var(--t-base) var(--ease-inout); }
.upload-area { border: 1px solid var(--rule); padding: var(--s-6); }
.form-error { color: var(--mark); font-family: var(--font-display); }

/* --- s8 the sash grid: 2:3 panes with 1px ivory glazing-bar gutters ---- */
.sash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ring); }
.sash-grid img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; }

/* --- s8 the arch: one signature image per page at most ----------------- */
.arch-mask { -webkit-mask-image: var(--arch); mask-image: var(--arch);
             -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

/* --- s6 dimension line: thin rule with end ticks ---------------------- */
.dimension { position: relative; border-top: 1px solid var(--rule); padding-top: var(--s-2);
             font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .16em; color: var(--accent-text); }
.dimension::before, .dimension::after { content: ""; position: absolute; top: -4px; width: 1px; height: 9px; background: var(--rule); }
.dimension::before { left: 0; } .dimension::after { right: 0; }

/* ==========================================================================
   v2 s9 — MOTION. "Content visible by default; animation is enhancement.
   Never hide text with opacity: 0 in base CSS." Every reveal below is gated
   on html.js-reveal, which the inline script sets only once it is running,
   so with JavaScript off or broken the page renders fully at rest.
   ========================================================================== */

/* the sash reveal: a bordeaux panel rises to uncover the photograph, once, on
   first load. The panel is a sibling overlay, so it cannot delay the image
   decode or the LCP; the H1 is live text underneath it throughout. */
@keyframes sash-raise  { from { transform: translateY(0); } to { transform: translateY(-100%); } }
@keyframes line-rise   { from { transform: translateY(24px); } to { transform: translateY(0); } }
@keyframes rule-draw-x { from { transform: scaleX(0); }   to { transform: scaleX(1); } }
@keyframes numeral-in  { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes wipe-up     { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes settle      { from { transform: scale(1.06); } to { transform: scale(1); } }

.sash-panel { position: absolute; inset: 0; background: var(--mark); z-index: 3; pointer-events: none; display: none; }
html.js-reveal .sash-panel { display: block; animation: sash-raise var(--t-hero) var(--ease-inout) 120ms both; }

/* headline lines rise 24px from behind a mask, 70ms apart, once only */
.line-mask { display: block; overflow: hidden; }
html.js-reveal .ed-hero .line-mask > span { display: block; animation: line-rise var(--t-base) var(--ease-out) both; }
html.js-reveal .ed-hero .line-mask:nth-child(1) > span { animation-delay: 360ms; }
html.js-reveal .ed-hero .line-mask:nth-child(2) > span { animation-delay: 430ms; }
html.js-reveal .ed-hero .line-mask:nth-child(3) > span { animation-delay: 500ms; }
html.js-reveal .ed-hero .line-mask:nth-child(4) > span { animation-delay: 570ms; }

/* hairlines draw left to right (800ms) as a section enters view */
html.js-reveal .section-open.in-view { animation: rule-draw-x var(--t-slow) var(--ease-out) both; transform-origin: left; }
/* numerals fade in with a slight upward drift */
html.js-reveal .section-open.in-view .section-numeral { animation: numeral-in var(--t-base) var(--ease-out) 120ms both; }

/* images reveal with a clip-path wipe, then settle from 1.06 to 1.0 */
html.js-reveal .reveal-img.in-view { animation: wipe-up var(--t-slow) var(--ease-out) both; }
html.js-reveal .reveal-img.in-view img { animation: settle 1200ms var(--ease-out) both; }

/* card sets stagger 70ms per item */
html.js-reveal .stagger.in-view > * { animation: line-rise var(--t-base) var(--ease-out) both; }
html.js-reveal .stagger.in-view > *:nth-child(1) { animation-delay: 0ms; }
html.js-reveal .stagger.in-view > *:nth-child(2) { animation-delay: 70ms; }
html.js-reveal .stagger.in-view > *:nth-child(3) { animation-delay: 140ms; }
html.js-reveal .stagger.in-view > *:nth-child(4) { animation-delay: 210ms; }
html.js-reveal .stagger.in-view > *:nth-child(5) { animation-delay: 280ms; }
html.js-reveal .stagger.in-view > *:nth-child(6) { animation-delay: 350ms; }

/* subtle parallax on full-bleed images only, 8% travel maximum */
.parallax { will-change: transform; }

/* s9 nav: header shrinks and gains an ivory ground with a warm hairline
   after 80px of scroll */
.site-header { transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), padding var(--t-fast) var(--ease-out); border-bottom: 1px solid transparent; }
.site-header.is-stuck { background: var(--ring); border-bottom-color: var(--rule); }

/* s9: animate only transform, opacity and clip-path. No layout-shifting animation. */
@media (prefers-reduced-motion: reduce) {
    html.js-reveal *, html.js-reveal *::before, html.js-reveal *::after {
        animation: none !important; transition-duration: 1ms !important;
    }
    html.js-reveal .sash-panel { display: none; }
    .parallax { transform: none !important; }
}

/* ==========================================================================
   v2 s11 — home page layout, sections 01 to 08.
   s5: asymmetric editorial layouts, text in columns 2-6 and image in 7-12
   bleeding off one edge, then reversed. Images may break the grid; text never.
   ========================================================================== */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px;
                   padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.split-2 { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(var(--s-7), 6vw, var(--s-9));
           align-items: start; margin-top: var(--s-8); }
.split-aside { position: sticky; top: 140px; }
.band-paper { background: var(--paper); }

/* s10 service card grid, and the case grid at 3:2 */
.svc-grid  { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); margin-top: var(--s-9); }
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-7) var(--s-6); margin-top: var(--s-9); }
.case-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* s11 home 06: five cards, the fifth smaller and set on paper */
.serve-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); margin-top: var(--s-9); }
.serve-card { border-top: 1px solid var(--rule); padding-top: var(--s-5); }
.serve-card--minor { grid-column: 1 / -1; background: var(--paper); border-top: 0;
                     padding: var(--s-6); display: grid; grid-template-columns: 1fr 2fr;
                     gap: var(--s-6); align-items: baseline; }
.serve-card--minor h3 { font-size: var(--fs-h3); }
.serve-card--minor p { font-size: var(--fs-body); }

/* s11 home 04: full-bleed bordeaux with a 4:5 image */
.group-bleed { background: var(--mark); color: var(--ring); padding: var(--section-padding) 0; }
.group-bleed h2, .group-bleed p { color: var(--ring); }
.group-bleed .section-label { color: var(--tint); }
.group-bleed-grid { display: grid; grid-template-columns: 7fr 4fr;
                    gap: clamp(var(--s-7), 6vw, var(--s-10)); align-items: center; }
.group-bleed-fig { margin: 0; overflow: hidden; }
.group-bleed-fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }

/* s10 schedule visual: hairline table, grade tags, 56px rows */
.schedule { margin: 0; }
.schedule table { width: 100%; }
.schedule thead th { border-bottom: 1px solid var(--mark); }
.schedule figcaption { margin-top: var(--s-5); }

/* the button pair beneath a headline */
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-7); }

/* --- s13: mobile layouts designed, not just stacked --------------------- */
@media (max-width: 1080px) {
    .svc-grid, .serve-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-7) var(--s-6); }
    .case-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
    .split-2, .group-bleed-grid { grid-template-columns: 1fr; gap: var(--s-7); }
    .split-aside { position: static; }
    /* the photograph leads on a narrow screen, so it is ordered first */
    .group-bleed-fig { order: -1; }
    .group-bleed-fig img { aspect-ratio: 3 / 2; }
    .serve-card--minor { grid-template-columns: 1fr; gap: var(--s-4); }
}
@media (max-width: 560px) {
    .svc-grid, .serve-grid, .case-grid { grid-template-columns: 1fr; }
    /* s5: the numeral shrinks but keeps its optical hang at 375px */
    .section-open { gap: var(--s-4); }
    .hero-cta .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   v2 s4/s11 — HERO. This file carries six historic `.ed-hero h1` rules, one
   of them !important, which together capped the headline at 56px. The v2
   scale is 96px desktop / 42px mobile, so it is restated here, last and with
   the same weapon, rather than by unpicking the older cascade.
   ========================================================================== */
.ed-page .ed-hero .ed-hero-copy h1,
.ed-page .ed-hero h1 {
    font-size: var(--fs-h1) !important;
    font-weight: 400 !important;
    line-height: 1.05 !important;
    letter-spacing: -.02em;
    text-wrap: balance;
}
/* each mask holds one or more whole lines; padding keeps descenders off the
   clip edge while the line rises out from behind it */
.ed-hero .line-mask { padding-bottom: .04em; }

/* the hero is a split: copy on paper, photograph in the second column. Cap
   its height so the fold and the button stay visible. */
.ed-page .ed-hero { min-height: min(78vh, 820px); align-items: center; }
.ed-page .ed-hero-ph { min-height: 0; height: min(72vh, 760px); }
.ed-page .ed-hero-ph img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
    .ed-page .ed-hero { min-height: 0; }
    .ed-page .ed-hero-ph { height: 46vh; }
}

/* --- v2 s4 vs v5.3 H1, reconciled -----------------------------------------
   v2 sets the hero H1 at 96px. v5.3's home H1 is 82 characters, which it
   flags as the one permitted exception to the eight-word rule because it
   carries the search term. At 96px in a five-column measure that headline
   runs to seven lines and pushes the button below
   the fold, which s12 forbids ("the CTA is always one scroll away").
   So: the copy column widens to seven columns, and the home hero headline
   alone takes a reduced cap. 96px stands as the token for the short hero
   headlines on every other template. Recorded as a [check] in the handover. */
@media (min-width: 861px) { .ed-page .ed-hero { grid-template-columns: 7fr 5fr; } }
.ed-page.home .ed-hero .ed-hero-copy h1 {
    font-size: clamp(2.625rem, 4.4vw, 4.5rem) !important;   /* 42 -> 72 */
}
.ed-hero .ed-hero-copy h1 { max-width: none; }
.ed-hero .ed-hero-lead { max-width: 46ch; }

/* v2 s11 home 08: testimonial beside two buttons, so the aside takes more
   of the measure than the 6:5 used elsewhere. */
.ed-page .home-cta .split-2 { grid-template-columns: 6fr 6fr; }

/* ==========================================================================
   v2 s13 — "mobile layouts designed, not just stacked: reconsider crops,
   numerals and spacing at 375px."
   ========================================================================== */
@media (max-width: 860px) {
    /* v5.3's CTA label is long enough in mono uppercase to run to 350px, which
       pushed the menu button off a 375px screen. The mobile menu carries the
       same CTA, so the header keeps the mark and the menu button only. */
    .nav-inner > .nav-cta { display: none; }
    .nav-inner { justify-content: space-between; }
    .nav-toggle { margin-left: auto; }
    .mobile-menu .nav-cta { display: inline-flex; width: 100%; justify-content: center; }
}
@media (max-width: 560px) {
    /* the 82-character home H1 at the full 42px runs to nine lines and puts
       the button two screens down, which s12 forbids. It takes 34px here. */
    .ed-page.home .ed-hero .ed-hero-copy h1 { font-size: clamp(2.125rem, 8.4vw, 2.75rem) !important; }
    .ed-hero .ed-hero-lead { font-size: 1.0625rem; }
    /* s4: the section numeral drops to 64px on mobile */
    .section-open { flex-wrap: wrap; gap: var(--s-3); }
    .section-numeral { font-size: 4rem; }
}

/* the hero stacks below 860px: copy full width, photograph beneath it */
@media (max-width: 860px) {
    .ed-page .ed-hero { grid-template-columns: 1fr; }
    .ed-hero .ed-hero-lead { max-width: none; }
}

/* ==========================================================================
   v5.3 s5 / v2 s10 — GUIDE PAGES.
   Sticky table of contents on the left, gold drop cap on the first paragraph
   only, "What this means for you" box, primary sources, print stylesheet.
   ========================================================================== */
.guide-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr);
              gap: clamp(var(--s-7), 6vw, var(--s-10)); align-items: start; }
.guide-body { max-width: 68ch; }
.guide-body .article-section + .article-section { margin-top: var(--s-9); }
.guide-body h2 { margin: 0 0 var(--s-5); }
.guide-body p + p { margin-top: var(--s-5); }

.art-toc { position: sticky; top: 132px; border-top: 1px solid var(--rule); padding-top: var(--s-4); }
.art-toc .section-label { color: var(--accent-text); display: block; margin-bottom: var(--s-4); }
.art-toc ol { list-style: none; margin: 0; padding: 0; display: block; counter-reset: toc; }
.art-toc li { counter-increment: toc; margin-bottom: var(--s-3); }
.art-toc li::before { content: counter(toc, decimal-leading-zero);
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
    color: var(--accent-text); margin-right: var(--s-2); }
.art-toc a { font-size: 15px; line-height: 1.35; color: var(--mark); text-decoration: none;
             border-bottom: 1px solid transparent; transition: border-color var(--t-fast) var(--ease-out); }
.art-toc a:hover { border-bottom-color: var(--accent); }
/* the inherited .art-toc a::before also prints the counter, which doubled
   every number once the li::before above was added. One marker only. */
.art-toc a::before { content: none; }

/* the one original element per guide sits outside the text measure */
.guide-original { margin: var(--s-9) 0; }
.guide-original .schedule table { font-size: .95rem; }

.means-box { margin: var(--s-9) 0; background: var(--paper); padding: var(--s-7);
             border-top: 1px solid var(--accent); }
.means-box h2 { font-size: var(--fs-h3); margin: 0 0 var(--s-4); }
.means-box p { margin: 0; }

.source-list { list-style: none; margin: 0; padding: 0; }
.source-list li { border-bottom: 1px solid var(--rule); padding: var(--s-4) 0; }
.source-list a { font-size: 15px; color: var(--mark); text-decoration: underline;
                 text-decoration-color: var(--accent); text-underline-offset: 4px; }

@media (max-width: 960px) {
    .guide-grid { grid-template-columns: 1fr; }
    .art-toc { position: static; }
    .art-toc ol { columns: 2; column-gap: var(--s-7); }
}
@media (max-width: 560px) { .art-toc ol { columns: 1; } }

/* --- v5.3 s5: print stylesheet for the guides ------------------------- */
@media print {
    .nav, .site-header, .mobile-menu, .art-toc, .cta-forms, .link-row,
    .footer, .page-ledger-band, .cookie-banner, .ed-hero-ph, .crop { display: none !important; }
    .ed-page { color: #000; background: #fff; font-size: 11pt; }
    .guide-grid { display: block; }
    .guide-body { max-width: none; }
    .ed-hero { min-height: 0; background: #fff; display: block; padding: 0 0 12pt; }
    .ed-page .ed-hero .ed-hero-copy h1 { font-size: 22pt !important; color: #000; }
    .article-section { break-inside: avoid; }
    .guide-body h2 { break-after: avoid; font-size: 14pt; }
    .means-box, .schedule { break-inside: avoid; border: 1px solid #000; background: #fff; }
    /* a printed guide should carry its citations as readable URLs */
    .source-list a::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
    .faq-item { break-inside: avoid; }
    .faq-item > summary { list-style: none; }
    .faq-item .faq-a { display: block !important; }
}

/* section 02 now pairs the text with a photograph rather than a table */
.report-fig { margin: 0; overflow: hidden; }
.report-fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
@media (max-width: 860px) { .report-fig img { aspect-ratio: 3 / 2; } }

/* the header CTA was overlarge next to the wordmark: tighter padding, shorter
   height and less tracking, so it reads as a control rather than a banner */
.nav-inner > .nav-cta {
    height: 38px;
    padding: 0 var(--s-4);
    font-size: 11px;
    letter-spacing: .12em;
    gap: var(--s-2);
}
.nav-inner > .nav-cta svg { width: 13px; height: 13px; }

/* the vertical hero label is a quiet spine mark, not a second headline:
   smaller, tighter and set back. It repeats the wordmark already in the
   header, so it carries no information of its own. */
.ed-page .ed-hero-vlabel {
    font-size: 9px;
    letter-spacing: .3em;
    white-space: nowrap;          /* never wrap into a second column */
    color: var(--accent-text);
    opacity: .55;
}
.ed-page .ed-hero--doc .ed-hero-vlabel { color: var(--tint); opacity: .5; }
/* the spec chips sit back with it */
.ed-page .ed-hero-spec { font-size: 10px; letter-spacing: .14em; opacity: .8; }
.svc-grid.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .svc-grid.three { grid-template-columns: 1fr; } }

/* case study fact strip: three hairline columns above the works narrative */
.case-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6);
              margin: var(--s-8) 0 var(--s-7); padding: 0; }
.case-facts > div { border-top: 1px solid var(--rule); padding-top: var(--s-4); }
.case-facts dt { font-family: var(--font-mono); text-transform: uppercase; font-size: var(--fs-label);
                 letter-spacing: .16em; color: var(--accent-text); margin: 0 0 var(--s-2); }
.case-facts dd { margin: 0; font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.2; }
.confidential { font-size: 15px; color: var(--accent-text); border-top: 1px solid var(--rule);
                padding-top: var(--s-4); margin-top: var(--s-7); max-width: 60ch; }
@media (max-width: 700px) { .case-facts { grid-template-columns: 1fr; gap: var(--s-4); } }

/* v2 s6: the 32px gold accent rule, 1px, replacing the section numeral.
   The numeral was dropped because the hero is 01 and shows none, so the first
   one a reader met was 02. Rule and eyebrow sit on the section hairline. */
.section-tick { display: block; width: 32px; height: 1px; background: var(--accent); flex: 0 0 32px; }
.section-open { align-items: center; gap: var(--s-4); padding-top: var(--s-5); }
.section-open .section-label { color: var(--accent-text); }
.on-dark .section-open .section-tick { background: var(--tint); }
.on-dark .section-open .section-label { color: var(--tint); }
/* the numeral style stays defined but is no longer emitted */

/* ==========================================================================
   Footer headings. They were promoted from h4 to h2 to fix the heading order,
   which then handed them the 60px display size from the v2 h2 rule, at .7
   opacity on bordeaux. They are labels, not display headings: metadata face,
   and plaster tint at full opacity for 5.18:1 on the bordeaux band.
   ========================================================================== */
.ed-page .footer-heading {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tint);
    opacity: 1;
    margin: 0 0 var(--s-5);
}

/* ==========================================================================
   Home section 08. The grid was top-aligned with a short left column and a
   centred quote, leaving a void beneath both. Now vertically centred, quote
   left-aligned onto the grid, buttons equal width on one row.
   ========================================================================== */
.home-cta .split-2 { align-items: center; margin-top: var(--s-7); }
.home-cta .split-aside { position: static; }
.home-cta .pull-quote blockquote { text-align: left; max-width: 18ch; }
.home-cta .pull-quote figcaption { text-align: left; }
.home-cta .hero-cta { gap: var(--s-4); margin-top: var(--s-6); }
.home-cta .hero-cta .btn { flex: 1 1 auto; min-width: 250px; justify-content: center; }
/* the closing section does not need a full section's worth of space below it */
.home-cta { padding-bottom: clamp(var(--s-8), 6vw, var(--s-9)); }
@media (max-width: 860px) {
    .home-cta .pull-quote blockquote { max-width: none; }
    .home-cta .hero-cta .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   Home section 06, "Who we work with".
   Three faults: the fifth card was Paper on a Paper ground and so invisible,
   which is why it read as stuck on; the first card carried a 3px top border
   against 1px on the rest, which v2 s6 forbids; and the cards had no common
   baseline, so short entries left ragged space.
   ========================================================================== */
.band-ivory { background: var(--ring); }

/* s6: 1px only, no mixing. The inherited emphasis on the first card is dropped. */
.ed-page .serve-card:first-child { border-top-width: 1px; }
.ed-page .serve-card:first-child h3 { font-size: var(--fs-h3); }
.ed-page .serve-card:first-child p { font-size: var(--fs-body); }

.serve-grid { align-items: start; }
.serve-card { display: flex; flex-direction: column; gap: var(--s-3); }
.serve-card h3 { font-size: var(--fs-h3); margin: 0; }
.serve-card p { margin: 0; }
.serve-card a { text-decoration: none; color: inherit; }
.serve-card:hover h3 a { text-decoration: underline; text-decoration-thickness: 1px;
                         text-underline-offset: 4px; text-decoration-color: var(--accent); }

/* the fifth card: deliberately a different object, so it is stated as one.
   Paper ground on the ivory band, a gold rule across the top, and its own
   label so it does not read as a sixth client type. */
.serve-card--minor { grid-column: 1 / -1; background: var(--paper);
                     border-top: 1px solid var(--accent) !important;
                     padding: var(--s-7); margin-top: var(--s-5);
                     grid-template-columns: 1fr 2fr; gap: var(--s-7); display: grid; align-items: start; }
.serve-card--minor h3 { font-size: var(--fs-h3); }
@media (max-width: 1080px) { .serve-card--minor { grid-template-columns: 1fr; gap: var(--s-4); } }

/* ==========================================================================
   Enquiry forms. The form sat 654px wide in a 1440 container, left-aligned,
   with half the width empty beside it. v2 s10 puts these on Paper panels, so
   the panel is now stated and centred on its own measure.
   NOTE: v2 s10 and v5.3 s6 both specify ONE QUESTION PER STEP with a hairline
   progress indicator. These are still single-page forms. Outstanding work,
   recorded in the handover.
   ========================================================================== */
.section-contact-form .container { max-width: 860px; }
.section-contact-form form {
    background: var(--paper);
    padding: clamp(var(--s-6), 4vw, var(--s-9));
    border-top: 1px solid var(--accent);
}
.ed-page.hero-doc .section-contact-form form { background: var(--ring); }
.section-contact-form form > * + * { margin-top: var(--s-6); }
.section-contact-form label { display: block; margin-bottom: var(--s-2); }
.section-contact-form .form-actions { margin-top: var(--s-7); }
@media (max-width: 700px) { .section-contact-form form { padding: var(--s-5); } }

/* the burger becomes a cross while the menu is open, and the page behind it
   does not scroll */
.nav-toggle span { transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out); }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
body.menu-open { overflow: hidden; }
/* the mobile menu is a document surface, not a white box */
.mobile-menu { background: var(--ring); border-top-color: var(--rule); }
.mobile-menu a { color: var(--mark); }

/* mobile menu groups: the section as a link, its pages indented beneath */
.mobile-menu .mob-group + .mob-group,
.mobile-menu .mob-group + li { margin-top: var(--s-5); }
.mobile-menu .mob-group-head {
    font-family: var(--font-mono); text-transform: uppercase;
    font-size: var(--fs-label); letter-spacing: .16em; color: var(--accent-text);
}
.mobile-menu .mob-sub { list-style: none; margin: var(--s-3) 0 0; padding: 0; }
.mobile-menu .mob-sub li { margin: 0; }
.mobile-menu .mob-sub a { font-family: var(--font-display); font-size: 1.0625rem; }
.mobile-menu .mob-sub li::before { content: none; }
.mobile-menu.active { max-height: 85vh; }

/* ==========================================================================
   NAVIGATION.
   Two faults: the links were rendering in Lora rather than the metadata face
   the design brief sets for navigation, because `.nav-links > li > a` is more
   specific than the face rule; and the desktop links stayed on down to 860px,
   well past the width where six items plus a logo and a button can sit on one
   line, so "Who we work with" and "Case studies" wrapped to two lines and lost
   the baseline.

   Set in lower case at the client's direction. v2 s4 specifies uppercase for
   the metadata face; lower case matches the wordmark, reads quieter, and is
   about 8% narrower, which is most of what fixes the wrap.
   ========================================================================== */
/* Client choice: the reading face, lower case, so the header speaks in the
   same voice as the headlines rather than in the metadata register. This is a
   departure from v2 s4, which puts navigation in JetBrains Mono uppercase. */
.ed-page .nav-links > li > a,
.ed-page .nav-inner > .nav-cta {
    font-family: var(--font-display);
    text-transform: lowercase;
    font-weight: 400;
}
.ed-page .nav-links > li > a {
    font-size: 15px;
    letter-spacing: .01em;
    white-space: nowrap;          /* never wrap a nav item */
    padding: 28px 0;
}
.ed-page .nav-links { gap: clamp(var(--s-5), 2.2vw, var(--s-7)); align-items: center; }
.ed-page .nav-links > li { display: flex; align-items: center; }
.ed-page .nav-inner > .nav-cta { letter-spacing: .01em; font-size: 14px; white-space: nowrap; }

/* the dropdowns keep the reading face, so a list of service names is legible */
.ed-page .nav-dropdown a { font-family: var(--font-display); text-transform: none;
                           font-size: 15px; letter-spacing: 0; white-space: nowrap; }

/* Hand over to the burger while the row still fits, rather than at 860 where
   it does not. Logo 189 + links ~560 + button ~230 needs about 1060px plus
   gutters, so 1120 is the honest breakpoint. */
@media (max-width: 1119px) {
    .ed-page .nav-links { display: none; }
    .ed-page .nav-inner > .nav-cta { display: none; }
    .ed-page .nav-toggle { display: flex; margin-left: auto; }
    .ed-page .mobile-menu { display: block; }
}
@media (min-width: 1120px) {
    .ed-page .nav-toggle { display: none; }
    .ed-page .mobile-menu { display: none !important; }
}

/* The mark is the seal: a horn in a circle. v2 s8 gives the circle to the seal
   alone, which is why everything else is squared, but the footer and header
   marks carry their own class names and were caught by that rule. */
.ed-page .footer-logo-circle {
    border-radius: 50%;
    display: grid; place-items: center;
    width: 56px; height: 56px;
    background: var(--ring);
    overflow: hidden;
}
.ed-page .footer-logo-circle img { border-radius: 50%; width: 38px; height: 38px; }

/* ==========================================================================
   The horn watermark, restored. The 01-08 rebuild stopped calling with_motif()
   and the pages went flat. Tone on tone, cropped by the section edge, never
   competing with the type.
   ========================================================================== */
.ed-page .has-motif { position: relative; overflow: hidden; isolation: isolate; }
.ed-page .has-motif > .container { position: relative; z-index: 1; }
.ed-page .horn-bleed { position: absolute; z-index: 0; pointer-events: none;
    aspect-ratio: 1 / 1; background-color: var(--mark); opacity: .055;
    -webkit-mask-image: url(/images/mark/horn-bleed.svg); mask-image: url(/images/mark/horn-bleed.svg);
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
/* on a dark ground it is cut from the light signature instead */
.ed-page .stmt .horn-bleed, .ed-page .group-bleed .horn-bleed,
.ed-page .data-moment .horn-bleed { background-color: var(--ring); opacity: .09; }
.ed-page .band-ivory .horn-bleed { opacity: .07; }
@media (max-width: 760px) { .ed-page .horn-bleed { display: none; } }
@media print { .ed-page .horn-bleed { display: none; } }

/* --- the dark statement band ------------------------------------------- */
.ed-page .stmt { background: var(--mark); color: var(--ring); padding: clamp(96px, 12vw, 176px) 0; }
.ed-page .stmt .section-label { color: var(--tint); display: block; margin-bottom: var(--s-6); }
.ed-page .stmt p { font-family: var(--font-display); font-weight: 400;
    font-size: clamp(2rem, 4.4vw, 3.75rem); line-height: 1.1; letter-spacing: -.015em;
    color: var(--ring); max-width: 20ch; margin: 0; text-wrap: balance; }

/* --- full-bleed photography -------------------------------------------- */
.ed-page .bleed { position: relative; overflow: hidden; display: flex; align-items: flex-end;
    min-height: clamp(340px, 48vw, 600px); }
.ed-page .bleed--tall { min-height: clamp(420px, 62vw, 760px); }
.ed-page .bleed img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* a scrim only under the caption, so the photograph keeps its own colour */
.ed-page .bleed::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; z-index: 1;
    /* 88% at the foot, not 72%: the plaster kicker measured 3.12:1 over a
       blown highlight at 72%, which is under the floor. At 88% it is 5.54
       and the ivory line 10.21, worst case. */
    background: linear-gradient(to top, rgba(27,27,26,.88) 0%, rgba(27,27,26,.55) 45%, rgba(27,27,26,0) 100%); }
.ed-page .bleed-cap { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(28px, 4vw, 54px); }
.ed-page .bleed-kick { font-family: var(--font-mono); text-transform: uppercase;
    font-size: var(--fs-label); letter-spacing: .18em; color: var(--tint); display: block; }
/* v2 s6 dimension line: the measured-drawing tick, as the caption's rule */
.ed-page .bleed-kick::after { content: ""; display: block; width: 32px; height: 1px;
    background: var(--accent); margin-top: var(--s-4); }
.ed-page .bleed-line { font-family: var(--font-display); font-weight: 400;
    font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1.22; color: var(--ring);
    max-width: 24ch; margin: var(--s-5) 0 0; text-wrap: balance; }

/* ==========================================================================
   Home section 08, sized down. The buttons were stretching to fill their
   column because of flex-grow, which made them read as banners rather than
   controls, and the two columns sat too close for the quote to feel separate.
   ========================================================================== */
.ed-page .home-cta .split-2 {
    grid-template-columns: 5fr 6fr;
    gap: clamp(var(--s-8), 8vw, var(--s-11));   /* was ~48px, now up to 192px */
}
.ed-page .home-cta .hero-cta { gap: var(--s-3); margin-top: var(--s-7); }
.ed-page .home-cta .hero-cta .btn {
    flex: 0 0 auto;              /* stop stretching to the column width */
    width: auto;
    min-width: 0;
    height: 46px;
    padding: 0 var(--s-5);
    font-size: 11px;
    letter-spacing: .14em;
}
/* the button label is not a link: no underline */
.ed-page .btn, .ed-page .btn span { text-decoration: none; }
.ed-page .home-cta .pull-quote blockquote {
    font-size: clamp(1.5rem, 2.1vw, 2rem);
    max-width: 24ch;
}
.ed-page .home-cta .pull-quote figcaption { font-size: 11px; margin-top: var(--s-6); }
@media (max-width: 860px) {
    .ed-page .home-cta .hero-cta .btn { flex: 1 1 100%; }
}

/* Both CTA buttons to one width. inline-grid shrinks to its content while
   equal columns take the width of the longer label, so they stay matched if
   either label changes rather than being pinned to a magic number. */
.ed-page .home-cta .hero-cta {
    display: inline-grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3);
}
@media (max-width: 860px) {
    .ed-page .home-cta .hero-cta { display: grid; grid-template-columns: 1fr; }
}

/* The second bleed is a portrait roofline: anchor the building low and right
   so the crop keeps the dormers and leaves sky behind the caption. */
.ed-page .bleed--roofline img { object-position: 62% 72%; }

/* ==========================================================================
   Card rows: align the body copy across the row.
   Headings run to one, two or three lines ("Homeowners" against "Estate
   agents, developers and property managers"), so each paragraph started at a
   different height. Subgrid lets every card share the row's track sizing, so
   the headings occupy one common band and the body copy starts on one line.
   ========================================================================== */
/* Headings sit at the top of every card and the gap beneath them is the same
   in each, so a one-line heading and a three-line heading both start on the
   same line and both hold the same space before their body copy.

   This replaces a subgrid layer that bottom-aligned the headings in order to
   start every body paragraph on one line. The two cannot both be true: with
   headings of different depths, either the headings line up at the top or the
   bodies line up below them. Top-aligned headings is the instruction. */
.ed-page .serve-card h3,
.ed-page .svc-card h3 { align-self: start; }
.ed-page .serve-grid > .serve-card,
.ed-page .svc-grid > .svc-card { align-content: start; }

/* Section 04 without its photograph: the group paragraph runs as a two-column
   text band on bordeaux, which keeps the tonal break without a picture that
   contradicts the words. */
.ed-page .group-bleed-grid--text { grid-template-columns: 1fr; max-width: 62ch; }
.ed-page .group-bleed-grid--text .prose p { max-width: none; }
.ed-page .group-bleed-grid--text .prose p + p { margin-top: var(--s-5); }

/* The dark band carries the client quote: italic, large, with the gold hanging
   mark, attribution in the metadata face. */
.ed-page .stmt--quote .stmt-quote { margin: 0; max-width: none; }
.ed-page .stmt--quote blockquote {
    font-family: var(--font-display); font-style: italic; font-weight: 400;
    font-size: clamp(1.75rem, 3.6vw, 3.25rem); line-height: 1.16;
    letter-spacing: -.01em; color: var(--ring); margin: 0; text-indent: -.42em;
    /* on the blockquote, where 1em is the quote's own size, not the figure's */
    max-width: 14em;
}
.ed-page .stmt--quote blockquote::before { content: "\201C"; color: var(--accent); }
.ed-page .stmt--quote figcaption {
    font-family: var(--font-mono); text-transform: uppercase; font-size: var(--fs-label);
    letter-spacing: .16em; color: var(--tint); margin-top: var(--s-7);
}
/* section 08, single column */
.ed-page .home-cta-inner { max-width: 56ch; margin-top: var(--s-7); }

/* The watermark sat at 9% on the quote band, where the silhouette read as a
   hard block rather than a watermark. Softer, larger and pushed further off
   the edge so only the curve of the horn shows. */
.ed-page .stmt .horn-bleed {
    opacity: .045;
    width: clamp(520px, 62vw, 900px);
    right: -16vw;
    bottom: -22%;
}

/* ==========================================================================
   73. QUOTATIONS — a separate italic face, and marks at both ends

   Both quotations were set in Lora italic, which is the body face leaning
   over: a reader sees emphasis, not a change of speaker. EB Garamond's italic
   is a chancery hand drawn as its own alphabet, so the quoted voice reads as
   someone else's.

   Two consequences of the swap, both handled below:
   - Garamond's x-height is about three quarters of Lora's, so the same px
     size reads a full step smaller. Every size here is raised to match the
     old optical weight, not the old number.
   - Its quotation marks are narrower, so the hanging indent that aligned
     Lora's opening mark overhangs with Garamond's. Re-measured.

   The closing mark was simply missing. It sits inline after the last word
   rather than hanging, which is correct: only the opening mark is optically
   corrected out of the measure.
   ========================================================================== */

.ed-page .stmt--quote blockquote,
.pull-quote blockquote {
    font-family: var(--font-quote);
    font-style: italic;
    font-weight: 400;          /* Lora's lightest; there is no 300 */
    /* Measured: Lora's opening mark advances .378em, so this is what puts the
       first letter of the first line on the same left edge as every line below
       it. The .42em inherited here had been over-hanging it by 2px. */
    text-indent: -.378em;
}
.ed-page .stmt--quote blockquote::after,
.pull-quote blockquote::after {
    content: "\201D";
    color: var(--accent);
}

/* The sizes here had been raised about 17% to compensate for EB Garamond's
   small x-height. Lora's x-height is large, so carrying that increase over
   set the quote far too heavy. Back to Lora's own size. */
.ed-page .stmt--quote blockquote {
    font-size: clamp(1.75rem, 3.6vw, 3.25rem);
    line-height: 1.16;
    letter-spacing: -.01em;
    max-width: 14em;
}

/* beside the CTA the quote has five columns, so it keeps the lower end */
.pull-quote blockquote {
    font-size: clamp(1.75rem, 2.6vw, 2.5rem);
    line-height: 1.18;
    max-width: 22ch;
}
.home-cta .pull-quote blockquote { max-width: 20ch; }
@media (max-width: 860px) {
    .home-cta .pull-quote blockquote { max-width: none; }
}

/* ==========================================================================
   74. SECTION STANDFIRST — the paragraph under an h2

   Two faults, both visible on "What we do":
   - the heading and the paragraph had no space between them at all (measured
     0px), so the section read as one run-on block;
   - the paragraph ran to ~80 characters a line, far past comfortable reading
     and past every other measure on the page.
   ========================================================================== */
/* The gap was first added for .standfirst alone, which fixed one section and
   left seventeen others untouched: a section heading is followed by a bare
   <p>, a .prose block or a .standfirst depending on the template, and all
   three sat flush against it. All three are covered here.

   The space goes on the following element, not under the heading, so a
   heading followed by a card grid or a figure keeps the larger gap it
   already has rather than gaining this one on top. */
.ed-page .au-h2 + p,
.ed-page .au-h2 + .prose,
.ed-page .au-h2 + .standfirst {
    margin-top: var(--s-5);
}
.ed-page .standfirst {
    /* ch resolves against this element's own size, so the measure is honest */
    max-width: 58ch;
}

/* ==========================================================================
   75. CASE STUDY TAGS — the status is a label, the scope is a sentence

   Both tags were uppercased. The status ("Listed building", "Conservation
   area") is a short classification and reads correctly in caps. The scope is a
   full sentence of up to three lines, and caps at that length is slow to read
   and visually shouts over the title above it.
   ========================================================================== */
.ed-page .code-tag--scope {
    text-transform: none;
    letter-spacing: .02em;
}

/* The two card grids had different gaps beneath their headings, 8px on the
   service cards and 12px on the client cards. One rhythm across the page. */
.ed-page .svc-card h3 { margin-bottom: var(--s-3); }

/* ==========================================================================
   76. BAND STEPS — a numbered sequence inside a text band

   Used by "How a report is produced", where the content is an order of
   operations rather than an argument, so it is set as a list and not prose.
   ========================================================================== */
.ed-page .band-steps {
    list-style: none;
    counter-reset: step;
    margin: var(--s-5) 0 0;
    padding: 0;
    display: grid;
    gap: var(--s-4);
}
.ed-page .band-steps li {
    counter-increment: step;
    display: grid;
    grid-template-columns: 2.4em 1fr;
    align-items: baseline;
    color: var(--ink-soft);
    line-height: 1.6;
}
.ed-page .band-steps li::before {
    content: counter(step, decimal-leading-zero);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: .16em;
    color: var(--accent-text);
}

/* ==========================================================================
   78. HOME HERO — full bleed, centred, light type on the photograph

   The photograph fills the viewport and the copy sits centred on it, which is
   how the group's own sites open.

   The scrim is flat rather than a gradient, and it is at 64% for a measured
   reason: at 58% the headline and button cleared AA comfortably but the small
   lead paragraph sat at 4.12:1, just under the 4.5:1 that normal-size text
   needs. 64% carries every element past it against the brightest pixels the
   text actually crosses, which on this photograph is sunlit stucco.
   ========================================================================== */
@media (min-width: 861px) {
    /* Block flow, not flex: the corner crops, the vertical label and the spec
       row are all siblings of the copy, and as flex items they were taking
       width and pushing the headline 64px off centre. */
    .ed-page.home .ed-hero {
        display: block;
        position: relative;
        min-height: min(92vh, 960px);
        padding: clamp(120px, 15vh, 180px) 0 clamp(96px, 12vh, 150px);
        background: var(--mark);
        grid-template-columns: none;
        text-align: center;
    }
    .ed-page.home .ed-hero-ph {
        position: absolute; inset: 0;
        height: auto; min-height: 0; margin: 0; z-index: 0;
    }
    .ed-page.home .ed-hero-ph img {
        position: absolute; inset: 0;
        width: 100%; height: 100%;
        object-fit: cover;
        /* the corner carries its subject high: the chimney stack, the parapet
           and the first of the painted floor numerals. 42% cropped them off. */
        object-position: 50% 26%;
    }
    .ed-page.home .ed-hero-ph::before {
        content: ""; position: absolute; inset: 0; z-index: 1;
        /* The flat 64% is the floor for the centred copy. The spec row sits in
           the bottom right corner, which on this photograph is sunlit stucco:
           measured at 1:1 there, invisible. A second wash down the last third
           carries it, and it reads as the natural fall of light rather than a
           patch behind the text. */
        background:
            linear-gradient(to top, rgba(26, 8, 12, .74) 0%, rgba(26, 8, 12, .40) 12%,
                            rgba(26, 8, 12, .12) 26%, rgba(26, 8, 12, 0) 38%),
            rgba(26, 8, 12, .64);
    }
    .ed-page.home .ed-hero-copy {
        position: relative; z-index: 2;
        /* the split layout nudged this block 64px right and 63px up; centred
           copy wants neither, and the offset was what put the headline off
           the middle of the photograph */
        top: 0; left: 0;
        width: 100%; max-width: 1160px;
        margin: 0 auto; padding: 0 clamp(28px, 4vw, 56px);
        box-sizing: border-box;
    }
    .ed-page.home .ed-hero-copy h1,
    .ed-page.home .ed-hero-copy .ed-hero-lead,
    .ed-page.home .ed-hero-kick { color: var(--ring); }
    .ed-page.home .ed-hero-copy h1 { max-width: 19ch; margin-left: auto; margin-right: auto; }
    .ed-page.home .ed-hero-copy .ed-hero-lead {
        max-width: 52ch; margin-left: auto; margin-right: auto;
    }
    .ed-page.home .ed-hero-rule {
        display: block; margin: 0 auto; background: var(--accent);
    }
    /* it stacks as a column elsewhere; across the foot of the hero it is a row */
    .ed-page.home .ed-hero-spec {
        position: absolute; left: 0; right: 0; bottom: clamp(26px, 4vh, 44px);
        z-index: 2; display: flex; flex-direction: row; flex-wrap: wrap;
        justify-content: flex-end; align-items: center; gap: clamp(14px, 3vw, 38px);
        padding: 0 clamp(22px, 2.6vw, 40px); text-align: right;
        /* a fixed tone rather than ivory at reduced opacity: element opacity
           blends the text toward whatever is behind it, which on a photograph
           means the contrast changes pixel by pixel and cannot be stated. */
        color: #E3D8C4; opacity: 1;
    }
    /* the spans carry their own colour from the split layout, bordeaux, which
       on the washed photograph measured 1.12:1 -- the real reason this row
       could not be read, not the scrim */
    .ed-page.home .ed-hero-spec > span { color: #E3D8C4; }
    .ed-page.home .ed-hero-vlabel { color: var(--ring); opacity: .5; z-index: 2; }
    /* a flex row, so text-align does not centre it */
    .ed-page.home .ed-hero .hero-cta {
        position: relative; z-index: 2;
        display: flex; justify-content: center;
    }
    /* the button is the one light-on-dark element that should invert */
    .ed-page.home .ed-hero .hero-cta .btn {
        background: var(--ring); color: var(--mark); border-color: var(--ring);
    }
    .ed-page.home .ed-hero .hero-cta .btn:hover { background: #fff; color: var(--mark); }
}

/* ==========================================================================
   79. CASE CARD TAGS — no boxes

   The status and scope lines were set in bordered boxes. On a card that
   already has a photograph, a place line and a title, two more outlined
   blocks made four competing shapes. The type carries them on its own.
   ========================================================================== */
.ed-page .case-tags .code-tag {
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
    padding: var(--s-3) 0 0;
    display: block;
}
.ed-page .case-tags {
    display: grid;
    gap: var(--s-3);
    margin-top: var(--s-4);
}
.ed-page .case-tags .code-tag--status { color: var(--accent-text); }
.ed-page .case-tags .code-tag--scope  { color: var(--support); }

/* ==========================================================================
   80. HOME OPENING — the intro paragraph below the hero

   It sat alone on the cream with air above and below and nothing holding it,
   at body size. It now carries the furniture the rest of the page opens its
   sections with: the gold rule, the horn watermark, and type at lead scale.

   (These rules were written once before and lost when section 78 was
   rewritten against the file tail. Appended properly this time.)
   ========================================================================== */
.ed-page .home-opening {
    position: relative;
    padding-top: clamp(64px, 8vh, 112px);
    padding-bottom: clamp(56px, 7vh, 96px);
}
.ed-page .home-opening-rule {
    display: block;
    width: 32px;
    height: 1px;
    background: var(--accent);
    margin-bottom: clamp(26px, 3.4vh, 40px);
}
.ed-page .home-opening-lead {
    font-family: var(--font-display);
    /* lead scale, not body: this is the first prose after the H1 */
    font-size: clamp(1.2rem, 1.75vw, 1.6rem);
    line-height: 1.56;
    letter-spacing: -.004em;
    color: var(--mark);
    max-width: 48ch;
    margin: 0;
}
@media (max-width: 860px) {
    .ed-page .home-opening-lead { font-size: 1.125rem; max-width: none; }
}

/* ==========================================================================
   81. HORN WATERMARK — one shape, bleeding off the right edge

   An attempt to make the mark cross the section's opening rule pulled it up
   to the section boundary, where the section clips it. The result was the
   mark arriving as two separate blocks with a gap between them, which is
   worse than it sitting clear of the line. Positions reverted.

   What is kept: the opening rule sits above the watermark in the stack, so
   wherever the two do meet the line stays unbroken.
   ========================================================================== */
.ed-page .section-open,
.ed-page .ed-ledger-head { position: relative; z-index: 1; }

/* ==========================================================================
   82. HORN WATERMARK — overlapping the opening rule from inside

   The rule that opens a section sits a measured 102px from the section's top
   edge, consistently across every band that carries one. The mark started at
   158px, below it.

   It now starts at 56px: above the rule, so the two overlap, but still inside
   the section, which is the distinction that matters. The earlier attempt
   used a negative offset, which put the mark outside its own section where
   the section clips it, and that is what broke it into two pieces.
   ========================================================================== */
.ed-page .horn-bleed--tr { top: 56px; }

/* ==========================================================================
   83. SPECIFICATION STRIP — hairlines, not a boxed table

   It was a shaded panel ruled top and bottom with vertical dividers between
   every cell: a table drawn around three short facts. It now follows the case
   cards, which lost their boxes for the same reason — a gold hairline over
   each item, the label in the metadata face, the value in the reading face.

   Used on 13 pages, so this is the whole pattern rather than one page.
   ========================================================================== */
.ed-page .ledger-band { background: transparent; }
.ed-page .ledger-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: clamp(22px, 3vw, 54px);
    border: 0;
    background: none;
    margin: 0;
}
.ed-page .ledger-strip div {
    flex: none;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
    padding: var(--s-4) 0 0;
}
.ed-page .ledger-strip dt {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: var(--s-3);
}
.ed-page .ledger-strip dd {
    font-family: var(--font-display);
    font-size: clamp(1.0625rem, 1.25vw, 1.25rem);
    line-height: 1.38;
    letter-spacing: -.005em;
    color: var(--mark);
    margin: 0;
}

/* ==========================================================================
   84. PLATE — a numbered book plate, not a second hero

   The plate had no aspect control and object-fit: fill. A portrait source in
   a full-width container therefore rendered at 834 x 1481px on a 1024px
   viewport: taller than the screen, and stretched, because `fill` does not
   preserve the source ratio.

   It now has a fixed plate shape and a width that keeps it a figure within
   the text rather than a full-bleed band. cover, so nothing is distorted
   whatever the source ratio.

   Seven pages carry one, so this is the pattern.
   ========================================================================== */
/* Narrowing it to 560px fixed the stretching but left it as a small picture
   adrift in a full-width band, which reads as an accident rather than a
   figure. It takes the full measure of the band instead, landscape, so it is
   plainly a deliberate plate rather than something floating. */
.ed-page .plate {
    max-width: 100%;
    margin: 0;
}
.ed-page .plate img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: 50% 42%;
    display: block;
}
@media (max-width: 860px) {
    .ed-page .plate img { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   85. INNER PAGE HERO — a landscape panel, not a portrait slot

   The photograph column was 5 of 12 against a fixed tall height, so it
   rendered at a 0.73 ratio. Almost every photograph in the library is
   landscape at 3:2 or 4:3, which meant cover was discarding about half the
   frame width on every inner page: 29 of them.

   The column is widened and the band shortened so the panel is landscape.
   Nothing is cropped that the photographer did not already crop.
   ========================================================================== */
@media (min-width: 861px) {
    .ed-page:not(.home) .ed-hero {
        grid-template-columns: 5fr 7fr;
        min-height: min(66vh, 700px);
        align-items: stretch;
    }
    .ed-page:not(.home) .ed-hero .ed-hero-copy { align-self: center; }
    /* one fixed panel shape rather than whatever the band's height happens to
       be: the heights were ranging 604 to 868px page to page, which is why
       some read as portrait and some as landscape. */
    .ed-page:not(.home) .ed-hero-ph {
        height: auto;
        min-height: 0;
        aspect-ratio: 5 / 4;
        align-self: center;
    }
    .ed-page:not(.home) .ed-hero-ph img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* ==========================================================================
   86. SPEC LIST WITH PLATE — the figure sits beside the list

   The plate had a band to itself containing nothing else, so whatever size it
   was set to it read as a picture left behind rather than a figure. It now
   sits beside "What is included", which gives it something to belong to and
   lets it be a sensible portrait rather than a full-width slab.
   ========================================================================== */
.ed-page .spec-grid { display: grid; gap: clamp(28px, 4vw, 64px); }
@media (min-width: 861px) {
    .ed-page .spec-grid--plate {
        grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
        align-items: start;
    }
}
.ed-page .spec-grid .plate { max-width: 100%; margin: 0; }
.ed-page .spec-grid--plate .plate img { aspect-ratio: 4 / 5; }
@media (max-width: 860px) {
    .ed-page .spec-grid--plate .plate img { aspect-ratio: 3 / 2; }
}

/* ==========================================================================
   87. PLATE PAIR — a second photograph overlapping the first

   One picture beside a list of specifications read cold and corporate. A pair,
   the smaller breaking the frame of the larger, gives the column depth.

   Laid out on a grid rather than with absolute positioning. Positioned
   absolutely the inset sat over the numbered caption, and chasing it with top
   and bottom offsets only moved the collision; on a grid the caption has a
   row of its own and nothing can reach it.

   No frames on any of it: the plate carried a rule round the image, an outer
   frame with corner marks, and a paper edge and shadow on the inset. Four
   borders on two photographs, which is what read cheap.
   ========================================================================== */
.ed-page .plate { padding: 0; }
.ed-page .plate::before,
.ed-page .plate::after { content: none; }
.ed-page .plate img { border: 0; box-shadow: none; }

.ed-page .plate--pair {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto;
    column-gap: 0;
}
.ed-page .plate--pair .plate-main {
    grid-column: 1 / 10;
    grid-row: 1;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    border: 0;
}
.ed-page .plate--pair .plate-inset {
    grid-column: 7 / 13;
    grid-row: 1;
    align-self: end;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border: 0;
    box-shadow: none;
    transform: translateY(22%);
}
.ed-page .plate--pair figcaption {
    grid-column: 1 / -1;
    grid-row: 2;
    /* clears the hang of the inset below the main image */
    margin-top: calc(22% * 0.5 + var(--s-5));
}
@media (max-width: 860px) {
    .ed-page .plate--pair .plate-main { aspect-ratio: 3 / 4; }
    .ed-page .plate--pair .plate-inset { transform: translateY(18%); }
    .ed-page .plate--pair figcaption { margin-top: calc(18% * 0.5 + var(--s-4)); }
}

/* ==========================================================================
   89. SLOW DRIFT — movement without weight

   The reference site carries a looping background video. A video is the
   heaviest thing a page can load and this one would be carrying it for
   atmosphere alone, so instead the photographs themselves move: a very slow
   scale on the hero and the full-bleed bands, long enough that it is felt
   rather than watched.

   36 seconds, 1.00 to 1.055, alternating so it never jumps back. No files, no
   bytes, no layout work: it is a compositor transform, so it does not repaint.
   ========================================================================== */
@keyframes slow-drift {
    from { transform: scale(1); }
    to   { transform: scale(1.055); }
}
/* The reveal sets `settle` on the same element from a more specific selector,
   so the drift is composed after it rather than fighting it: settle plays
   once, the drift starts as it ends. */
html.js-reveal .ed-page .reveal-img.in-view img,
html.js-reveal .ed-page .bleed.in-view img {
    animation: settle 1200ms var(--ease-out) both,
               slow-drift 36s ease-in-out 1200ms infinite alternate;
    will-change: transform;
}
.ed-page .ed-hero-ph img,
.ed-page .bleed img,
.ed-page .group-bleed-fig img {
    animation: slow-drift 36s ease-in-out infinite alternate;
    will-change: transform;
}
/* the plate pair already carries its own offset transform; drifting it would
   fight that, so those are left still */
.ed-page .plate img { animation: none; }

@media (prefers-reduced-motion: reduce) {
    .ed-page .ed-hero-ph img,
    .ed-page .bleed img,
    .ed-page .group-bleed-fig img,
    html.js-reveal .ed-page .reveal-img.in-view img,
    html.js-reveal .ed-page .bleed.in-view img { animation: none; }
}

/* ==========================================================================
   90. HEADLINE DESCENDERS, AND VISIBLE DRIFT

   Two faults.

   The mask. Each headline line sits in a block with overflow: hidden so it can
   rise from behind an edge. With the line box set at 1.08 the clip lands on
   the baseline, so every descender was cut: the g of "buildings" had its tail
   taken off. The mask is given room below the baseline and the same amount
   pulled back as negative margin, so the descenders have somewhere to go and
   the line spacing is unchanged.

   The drift. 36 seconds across 5.5% was too slight to read as movement at all.
   It is now 20 seconds across 9%, with a little vertical travel so it reads as
   a drift rather than a zoom.
   ========================================================================== */
.ed-page .ed-hero .line-mask {
    /* .16em left the descender 2px inside the clip, which is within rounding
       of being cut again at another size. .24em clears it properly. */
    padding-bottom: .24em;
    margin-bottom: -.24em;
}

@keyframes slow-drift {
    from { transform: scale(1)     translate3d(0, 0, 0); }
    to   { transform: scale(1.09)  translate3d(0, -1.4%, 0); }
}
.ed-page .ed-hero-ph img,
.ed-page .bleed img,
.ed-page .group-bleed-fig img,
html.js-reveal .ed-page .reveal-img.in-view img,
html.js-reveal .ed-page .bleed.in-view img {
    animation-duration: 20s;
}
html.js-reveal .ed-page .reveal-img.in-view img,
html.js-reveal .ed-page .bleed.in-view img {
    animation: settle 1200ms var(--ease-out) both,
               slow-drift 20s ease-in-out 1200ms infinite alternate;
}

/* ==========================================================================
   91. HERO DRIFT — enough to be seen

   20s across 9% still reads as nothing on the hero, where the photograph is
   the whole frame and there is no edge nearby to measure the movement
   against. The hero gets its own, slower-feeling but larger: 16 seconds,
   1.00 to 1.12, with a horizontal pan so it reads as a camera move rather
   than a zoom. The bands elsewhere keep the subtler one.
   ========================================================================== */
@keyframes hero-drift {
    from { transform: scale(1)    translate3d(0,    0,    0); }
    to   { transform: scale(1.12) translate3d(-1.6%, -1%, 0); }
}
.ed-page.home .ed-hero-ph img,
html.js-reveal .ed-page.home .ed-hero-ph.reveal-img.in-view img {
    animation: hero-drift 16s ease-in-out infinite alternate;
    will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
    .ed-page.home .ed-hero-ph img,
    html.js-reveal .ed-page.home .ed-hero-ph.reveal-img.in-view img { animation: none; }
}

/* ==========================================================================
   92. HOME HERO ON A PHONE — the same treatment as the desktop

   On a phone the hero fell back to the stacked layout: copy in bordeaux on
   paper, photograph in a 374px band beneath it. So the one thing the home page
   is built around — a full-bleed photograph with the headline over it — was
   the one thing a phone never saw.

   Same construction as the desktop now: photograph behind, flat scrim, copy
   centred over it, and the drift. The scrim is a little heavier than the
   desktop's 64% because the type is smaller here and small type needs more
   separation from a photograph than large type does.
   ========================================================================== */
@media (max-width: 860px) {
    .ed-page.home .ed-hero {
        display: block;
        position: relative;
        grid-template-columns: none;
        min-height: min(88svh, 760px);
        padding: clamp(104px, 16vh, 150px) 0 clamp(76px, 11vh, 110px);
        background: var(--mark);
        text-align: center;
        overflow: hidden;
    }
    .ed-page.home .ed-hero-ph {
        position: absolute; inset: 0;
        height: auto; min-height: 0; margin: 0; z-index: 0;
    }
    .ed-page.home .ed-hero-ph img {
        position: absolute; inset: 0;
        width: 100%; height: 100%;
        object-fit: cover; object-position: 50% 30%;
    }
    .ed-page.home .ed-hero-ph::before {
        content: ""; position: absolute; inset: 0; z-index: 1;
        background:
            linear-gradient(to top, rgba(26,8,12,.72) 0%, rgba(26,8,12,.30) 22%,
                            rgba(26,8,12,0) 42%),
            rgba(26, 8, 12, .70);
    }
    .ed-page.home .ed-hero-copy {
        position: relative; z-index: 2;
        top: 0; left: 0;
        width: 100%; max-width: none;
        margin: 0; padding: 0 var(--s-6, 28px);
    }
    .ed-page.home .ed-hero-copy h1,
    .ed-page.home .ed-hero-copy .ed-hero-lead,
    .ed-page.home .ed-hero-kick { color: var(--ring); }
    .ed-page.home .ed-hero-copy h1 { margin-left: auto; margin-right: auto; }
    .ed-page.home .ed-hero-copy .ed-hero-lead {
        max-width: 34ch; margin-left: auto; margin-right: auto;
    }
    .ed-page.home .ed-hero-rule { display: block; margin: 0 auto; background: var(--accent); }
    .ed-page.home .ed-hero .hero-cta { display: flex; justify-content: center; position: relative; z-index: 2; }
    .ed-page.home .ed-hero .hero-cta .btn {
        background: var(--ring); color: var(--mark); border-color: var(--ring);
    }
    /* the two spec words have nowhere to sit on a phone without crowding the
       button, and they repeat what the headline already says */
    .ed-page.home .ed-hero-spec { display: none; }
    .ed-page.home .ed-hero-vlabel { color: var(--ring); opacity: .45; z-index: 2; }
}

/* ==========================================================================
   93. HERO WHATSAPP — a phone-only action

   Hidden above 860px. On a desktop the footer already carries WhatsApp, and
   the wa.me link there opens the desktop app or a QR page rather than a chat,
   so it is a worse action than the button beside it. On a phone it is the
   fastest route there is: one tap into a conversation.
   ========================================================================== */
.ed-page .hero-wa { display: none; }
@media (max-width: 860px) {
    .ed-page.home .ed-hero .hero-cta {
        flex-direction: column;
        align-items: center;
        gap: var(--s-4);
    }
    .ed-page .hero-wa {
        display: inline-flex;
        align-items: center;
        gap: var(--s-3);
        font-family: var(--font-mono);
        font-size: var(--fs-label);
        letter-spacing: .14em;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--ring);
        padding: var(--s-3) var(--s-4);
        border-bottom: 1px solid color-mix(in srgb, var(--ring) 48%, transparent);
    }
    .ed-page .hero-wa .wa-icon { width: 17px; height: 17px; color: inherit; }
    .ed-page .hero-wa:active { opacity: .7; }
}

/* ==========================================================================
   94. FOOTER CONTACT ROWS

   The landline, the mobile and the WhatsApp mark ran together on one line with
   nothing to say which was which. Three labelled rows, divided by a hairline,
   each tall enough to be a comfortable tap target on a phone.
   ========================================================================== */
.ed-page .contact-rows { margin: 0 0 var(--s-5); }
.ed-page .contact-rows > div {
    display: grid;
    grid-template-columns: 7.5em 1fr;
    align-items: baseline;
    gap: var(--s-4);
    min-height: 44px;
    padding: var(--s-3) 0;
    border-top: 1px solid color-mix(in srgb, var(--ring) 20%, transparent);
}
.ed-page .contact-rows > div:first-child { border-top: 0; padding-top: 0; }
.ed-page .contact-rows dt {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tint);
    margin: 0;
}
.ed-page .contact-rows dd { margin: 0; }
.ed-page .contact-rows dd a { color: inherit; }
.ed-page .contact-rows .wa-link { gap: var(--s-3); }
.ed-page .contact-rows .wa-icon { width: 16px; height: 16px; }
@media (max-width: 860px) {
    .ed-page .contact-rows > div {
        grid-template-columns: 1fr;
        gap: var(--s-2);
        min-height: 56px;
        align-content: center;
    }
}

/* ==========================================================================
   95. MOBILE WORDMARK

   Below 640px the header showed the round mark alone: on a phone, the one
   place a visitor most needs to know whose site this is, the name was absent.
   The full two-line lockup is restored and scaled to fit beside the menu
   button. Never abbreviated, and the header keeps its height.
   ========================================================================== */
@media (max-width: 639px) {
    .ed-page .nav-logo-text {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        line-height: 1.04;
    }
    .ed-page .nav-logo-text span:first-child {
        font-size: 19px;
        letter-spacing: -.03em;
        color: var(--mark);
    }
    .ed-page .nav-logo-text span:last-child {
        font-size: 14px;
        letter-spacing: .01em;
        color: var(--support);
    }
    .ed-page .nav-logo { display: flex; align-items: center; gap: 12px; }
    .ed-page .nav-logo > img { width: 38px; height: 38px; flex: none; }
}
/* a 320px screen has about 60px less to play with, so the lockup steps down
   rather than the name being shortened */
@media (max-width: 359px) {
    .ed-page .nav-logo-text span:first-child { font-size: 16.5px; }
    .ed-page .nav-logo-text span:last-child  { font-size: 12.5px; }
    .ed-page .nav-logo { gap: 9px; }
    .ed-page .nav-logo > img { width: 33px; height: 33px; }
}

/* ==========================================================================
   96. THE INNER HERO ON iOS — the headline was landing on the lead
   --------------------------------------------------------------------------
   Reported from an iPhone: on /conservation-area-advice the H1 sat on top of
   the lead paragraph and the gold rule struck through the eyebrow. It did not
   reproduce at any width from 360 to 900 in a desktop engine, and the live
   stylesheet is byte-identical to this one, so it is a WebKit layout
   difference rather than a breakpoint we had missed.

   The cause: .ed-hero-copy is a column flex container with
   justify-content: flex-end, clamp(162px, 20vh, 232px) of padding-top and
   7dvh of padding-bottom. Flex items are flex-shrink: 1 by default. Where the
   headline wraps to more lines than it does here — larger text, Dynamic Type,
   different font metrics, a dvh swing as the URL bar collapses — the content
   box is starved and WebKit shrinks the h1's box below its own text, which
   Chromium's min-height: auto refuses to do. The lines then paint downward out
   of the shrunken box, over the rule and the lead, and the rule and lead rise
   to meet the box's new bottom edge.

   Three guards, none of which changes the desktop rendering:
   ========================================================================== */

/* 1. Nothing in the hero copy may ever be compressed below its own text.
      There is no case where shrinking the headline is the right answer. */
.ed-hero .ed-hero-copy > * {
    flex-shrink: 0;
    min-height: auto;
}

/* 2. On a phone the copy is a single stacked column in an auto-height grid
      row, so flex buys nothing — justify-content: flex-end has no space to
      work with. Making it a block removes the whole class of bug rather than
      relying on flex-shrink being honoured.

      Home is excluded. Its phone hero (section 92) centres copy over the
      full-bleed photograph and is tuned to that; and its h1 is built from
      .line-mask lines carrying margin-bottom: -.24em for descender clearance,
      which in block layout pulls the gold rule 8px closer to the headline
      than it sits today. Nothing was reported wrong there, so it keeps flex. */
@media (max-width: 900px) {
    .ed-page:not(.home) .ed-hero .ed-hero-copy {
        display: block;
        padding-bottom: clamp(18px, 4vh, 40px);
    }
}

/* 3. Stop iOS inflating body text on its own account. With
      width=device-width this is usually dormant, but it is what makes the
      headline wrap further on a handset than it does in an emulator, and
      leaving it unset means the layout depends on a heuristic we don't
      control. 100% is the no-op value; it does not block user zoom. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}