/* ==========================================================================
   Barnsbury Joinery - Design System
   Flagship studio of The Barnsbury Group. Premium editorial architectural
   aesthetic, cloned from the Sash Restoration Belfast reference build.
   Token-driven: only the five brand tokens + re-derived neutrals change.
   ========================================================================== */

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

:root {
    /* ----------------------------------------------------------------------
       Barnsbury Joinery — Navy-led (Alt) Brand Book, applied on an OAT-
       dominant surface. OAT is the everyday ground; NAVY is the lead ink and
       authority colour (the seal ring, headings, the action colour, hairlines,
       the footer); MINT is a quiet accent (the horn in the seal, the wordmark
       on navy, small highlights and hovers). Navy leads through ink and the
       mark, NOT through large dark fields — the only navy expanses are the
       footer and the single group band. --ring stays Mint, --mark stays Navy
       so shared components keep their light/dark semantics.
       ---------------------------------------------------------------------- */
    --ring:    #A8C4B8;   /* Mint — the horn/mark accent and light signature */
    --mark:    #14213D;   /* Navy — the seal ring; grounds the flagship, ink for headings */
    --paper:   #F4EFE6;   /* Oat — the warm document ground / everyday register */
    --accent:  #C9B27A;   /* Brass - detail & fittings (decorative) */
    --accent-text: #7F6934;  /* accent TEXT on light ground */
    --accent-rule: rgba(201,178,122,.55); /* brass hairline for button double rule */  /* Darkened brass - accent TEXT on light ground (4.62:1 AA) */   /* Iron-oxide red — drawn detail, callouts, links */
    --support: #3A4A5C;   /* Slate — secondary and meta type (5.4:1 on Oat, AA) */

    /* Neutrals — re-derived for the Oat ground (Navy-led book value) */
    --paper-deep: #E8E2D5; /* deeper oat panel lift */
    --ink:       #1B1B1A;  /* near-black, body copy (13.3:1 on Oat, AAA) */
    --ink-soft:  #3A3A37;  /* softened body */
    --ink-mute:  #7A786F;  /* quiet decorative meta only (3.4:1 on Oat) */
    --rule:      #D5D1CA;  /* hairlines */
    --ink-deep:  #14213D;  /* deepest ground / footer = navy */
    --white:     #ffffff;

    /* Typography — Lora editorial, Inter Tight UI, JetBrains Mono metadata */
    --font-display: 'Lora', Georgia, serif;
    --font-body: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

    /* Spacing */
    --section-padding: 124px;
    --container-max: 1160px;
    --container-padding: 40px;

    /* Transitions — eased and unhurried for a refined feel */
    --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(20, 33, 61, 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(20, 33, 61, 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: 2px;
    background: var(--mark);
    transition: var(--transition-normal);
}

/* Mobile Menu */
.mobile-menu {
    background: var(--white);
    border-top: 1px solid rgba(20, 33, 61, 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(20, 33, 61, 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(20, 33, 61, 0.62) 0%,
        rgba(20, 33, 61, 0.4) 45%,
        rgba(20, 33, 61, 0.22) 72%,
        rgba(20, 33, 61, 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: 3px;
    text-transform: uppercase;
    margin-bottom: 32px;
}

.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(20, 33, 61, 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(20, 33, 61, 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(20, 33, 61, 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(20, 33, 61, 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: #0E1730;                                   /* deeper 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: 2px;
    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(140, 42, 47, 0.2);
}

/* 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: 2px;
    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: 2px 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: 2px 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(20, 33, 61, 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(20, 33, 61, 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(20, 33, 61, 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: 2px 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(20, 33, 61, 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(20, 33, 61, 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: 2px;
    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(236, 224, 189, 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(236, 224, 189, 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(20,33,61,.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(20,33,61,.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(20,33,61,0.55) 0%, rgba(20,33,61,0.18) 60%, rgba(20,33,61,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(20,33,61,.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(20,33,61,.25) 0%, rgba(20,33,61,.40) 42%, rgba(20,33,61,.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(20,33,61,.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(20,33,61,0.58) 0%, rgba(20,33,61,0.20) 60%, rgba(20,33,61,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: 40px; height: 2px; 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(20,33,61,.20) 0%, rgba(20,33,61,.16) 26%, rgba(20,33,61,.56) 54%, rgba(20,33,61,.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: 54px; height: 2px; 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: 40px; height: 2px; 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; }
.wa-icon { width: 22px; height: 22px; color: #25D366; transition: transform .18s ease, color .18s ease; }
.wa-link:hover .wa-icon { color: #1da851; 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: 66px; height: 2px; 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(20,33,61,.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: 54px; height: 2px; 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: #1B2B4E; 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: 46px; height: 2px; 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: 46px; height: 2px; 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;
}