@charset "UTF-8";
 
/*
Theme Name:  Boilerplate Master
Theme URI:   https://github.com/MattDee87/boilerplate-master
Author:      Matthew De Nero
Author URI:  https://github.com/MattDee87
Description: Vanilla WordPress boilerplate — reusable starting point for all projects. Update tokens, swap fonts, layer brand styles at the bottom.
Version:     4.0.1
Requires PHP: 8.1
License:     MIT
Text Domain: boilerplate
*/
 
/* ============================================================
   FJB STYLE INDEX — where this client's styles live
   ──────────────────────────────────────────────────────────
   FJB-only styles are all in §10 of this file, not in the
   block folders (Matthew's decision, 2026-11-11), so block
   files stay identical to the Boilerplate Master. Search for
   the marker in the second column to jump to a section.

   Section   Search for                    What it styles
   §10a      "10a. Wrapper"                Smooth scrolling to sections;
                                           page width (1280px content,
                                           64/36/20px sides), --fjb-sage (the
                                           one colour outside Site Design),
                                           heading weight
   §10g      "10g. Header"                 Header, logo, menu, Let's Talk
                                           button, 1985 announcement bar
   §10h      "10h. Footer"                 Concept footer (partials/footer-fjb.php)
   §10l      "10l. Homepage Hero"          Hero block — front page, with photo
   §10m      "10m. Homepage service rows"  Accordion block — Look "Homepage
                                           feature"; plus the Explore All
                                           Services button (.fjb_all_services)
   §10n      "10n. Homepage Our Work"      Image Grid block — Look "Homepage
                                           feature" (Our Work)
   §10o      "10o. Homepage Our Story"     Split View block — Section ID
                                           "story" on the front page; lake
                                           artwork, outlined 1985, service list
   §10p      "10p. Estimate pop-out"       The contact pop-out as the estimate
                                           form (fields, spacing, button)
   §10q      "10q. Services page intro"    Breadcrumb; Hero with Section ID
                                           "services-intro"; List block with
                                           class "fjb_jump_links"
   §10r      "10r. Services page feature"  Split Views with Section IDs
                                           "clearing", "site-work",
                                           "snow-services"
   §10s      "10s. Services page additional" Group "fjb_more_services": three
                                           Accordions in Columns; optional
                                           photo per service

   How each block gets the FJB look (set in the block editor):
   - Hero: any Hero with a Background photo on the front page.
   - Accordion / Image Grid: Layout or Colors → Look
     "Homepage feature". Other looks keep the block's own style.
   - Split View: Advanced → Section ID "story" (Split View has no
     spare look to use). Its pasted HTML adds fjb_history_tag,
     fjb_more_list, fjb_service_area and fjb_story_services_link.
   - Services page: Hero → Section ID "services-intro"; the
     in-page link row is a List block with class "fjb_jump_links".

   FJB-only code outside this file:
   - partials/header-html.php   announcement bar markup
   - partials/footer-fjb.php    footer markup (address, hours)
   - functions.php              link fields accept mailto:/tel:/#id;
                                "#estimate" links open the pop-out
                                (search "FJB-only"). Site email is
                                sent by the WP Mail SMTP plugin.
   - partials/footer-html.php   pop-out form fields
   - partials/fjb-breadcrumb.php  "Home / Page" trail, printed by
                                page.php on ordinary pages
   - partials/form-handler.php  saves/emails the extra fields;
                                fjb_drawer_service_choices() list
   - ~wp_blocks/core-accordion/accordion.php
                                "Name | short line" item titles

   Adding a new FJB block look: add a §10 subsection, add it to
   the table of contents below and to this index, and log it in
   DOCUMENTATION_LOG.md.
   ============================================================ */

/* ============================================================
   TABLE OF CONTENTS
   ──────────────────────────────────────────────────────────
    1.  IMPORTS
        1a. Body Font  (DM Sans 400/700 — FJB)
        1b. Heading Font  (Georgia Regular, system font — FJB)
        1c. Accent / Mono Font  (JetBrains Mono variable — boilerplate default, replace per project)
        1d. ⚠️  TEST FONTS — client review only, remove when done
    2.  DESIGN TOKENS  ← start every new project here
        2a. Colors
        2b. Typography  (font families + scale + weights)
        2c. Spacing
        2d. Borders & Shadows
        2e. Layout
    3.  RESET & NORMALIZE
    4.  BASE TYPOGRAPHY
        4a. Body
        4b. Headings
        4c. Paragraphs
        4d. Links
        4e. Lists
        4f. Blockquote
        4g. Code & Pre
    5.  LAYOUT
        5a. Wrapper / Container
        5b. Main
        5c. Article
    6.  COMPONENTS
        6a. Header & Navigation
        6b. Buttons
        6c. Forms
        6d. Tables
        6e. Footer
    7.  WORDPRESS SPECIFICS
        7a. Block Editor
        7b. Alignment Helpers
        7c. Captions
        7e. Legacy colour preset names
    8.  UTILITIES
        8a. Skip to Main Content  (accessibility)
        8b. Scroll To Top
        8c. Font Testing Classes  (remove with test fonts)
        8d. General Helpers
    9.  RESPONSIVE
        9a. Tablet  — 768px
        9b. Mobile  — 480px
   10.  [CLIENT NAME] SHARED PATTERNS
        10a. Wrapper / Section Layout
        10b. Shared Buttons
        10c. Shared Eyebrow / Pill Labels
        10d. Shared Title Plate Patterns
        10e. Shared Gradient / Accent Lines
        10f. Shared Glass / Card Panels
        10g. Header
        10h. Footer
        10i. Contact Drawer / Global Overlays
        10j. Small Utilities
        10k. Footer Bookend CTA
        10l. Homepage Hero (FJB)
        10m. Homepage service rows (FJB)
        10n. Homepage Our Work grid (FJB)
        10o. Homepage Our Story (FJB)
        10p. Estimate pop-out form (FJB)
        10q. Services page introduction (FJB)
        10r. Services page feature sections (FJB)
        10s. Services page additional services (FJB)
   ──────────────────────────────────────────────────────────
*/
 
 
/* ============================================================
   1. IMPORTS
   ============================================================ */
 
/* ──────────────────────────────────────────────────────────
   ⚠️  CSS RULE — @import MUST stay first in this file.
   Per spec, @import rules must precede every other rule
   (except @charset). Any rule placed before an @import —
   including @font-face — causes the browser to silently
   discard that @import with no console warning. The fonts
   it references then never load; the browser falls back to
   the next font in the stack instead. DO NOT move this
   @import block back down below the @font-face rules in
   §1a–1c.
   ────────────────────────────────────────────────────────── 

   1d. Test fonts: removed 2026-11-11 once FJB's fonts were
   chosen (Georgia headings + DM Sans body, from the logo). The
   Font Test page no longer has its fonts; delete it in WP.
   ────────────────────────────────────────────────────────── */

/* ── 1a. Body Font — DM Sans 400 + 700 (FJB) ───────────────
   FJB body and label font (Nova's spec; kept 2026-11-11).
   SIL OFL 1.1: assets/fonts/OFL-DMSans.txt. Only 400 and 700
   exist, so 600 (--weight-semi) renders as 700. */
@font-face {
    font-family: 'DM Sans';
    src: url('assets/fonts/dm-sans-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('assets/fonts/dm-sans-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ── 1b. Heading Font — Georgia Regular (FJB) ──────────────
   Matches the approved logo (Matthew, 2026-11-11; supersedes
   DM Serif Display). Georgia is a system font, so nothing is
   loaded; devices without it (most Android phones) use their
   own serif. */

/* ── 1c. Accent / Mono Font — JetBrains Mono (variable) ────
   Used for code blocks, labels, and UI accents.
   Boilerplate default. Replace with project font on new projects. */
@font-face {
    font-family: 'JetBrains Mono';
    src: url('assets/fonts/jetbrains-mono-variable.woff2') format('woff2');
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}
 
 
/* ============================================================
   2. DESIGN TOKENS — CSS CUSTOM PROPERTIES
   ──────────────────────────────────────────────────────────
   🚀  START EVERY NEW PROJECT HERE.
   Update these variables first before writing any custom CSS.
   Sizes, spacing, and structure are mostly reusable.
   Font families, colors, and visual personality live here.
   ============================================================ */
 
:root {
 
    /* ── 2a. Colors ─────────────────────────────────────────
       Neutral defaults. Replace with your project palette.   */
 
    --color-primary:        #1A1A1A;        /* Main brand / heading color     */
    --color-secondary:      #555555;        /* Supporting / subheading color  */
    --color-accent:         #0055CC;        /* CTA, links, highlights         */
    --color-accent-hover:   #003D99;        /* Hover state of accent          */
 
    --color-bg:             #FFFFFF;        /* Page background                */
    --color-bg-alt:         #F5F5F5;        /* Alternate / card background    */
    --color-bg-dark:        #1A1A1A;        /* Header, footer, dark sections  */
 
    --color-text:           #1A1A1A;        /* Primary body text              */
    --color-text-muted:     #666666;        /* Muted / secondary text         */
    --color-text-inverse:        #FFFFFF;                    /* Bright text on dark: headings, buttons, important labels */
    --color-text-inverse-soft:   rgba(255, 255, 255, 0.76);  /* Body/paragraph text on dark backgrounds */
    --color-text-inverse-muted:  rgba(255, 255, 255, 0.58);  /* Helper text, captions, meta, placeholders, quiet footer copy */
 
    --color-border:         #E0E0E0;        /* Borders, dividers, inputs      */
    --color-white:          #FFFFFF;
    --color-black:          #000000;
    --color-rating:         #F5A623;        /* Star rating gold — testimonials */
    --color-error:          #C0392B;        /* Form/field error state — contact block + drawer */

    /* ── 2b. Typography ─────────────────────────────────────
       Three font slots. Swap values + imports in §1.
       ─────────────────────────────────────────────────────
       --font-body:     paragraph text, UI elements
       --font-heading:  all h1–h6
       --font-accent:   code, labels, mono UI details        */
 
    --font-body:            'DM Sans', Arial, sans-serif;
    --font-heading:         Georgia, 'Times New Roman', serif;
    /* FJB: labels use the body font, as in the prototype. */
    --font-accent:          'DM Sans', Arial, sans-serif;
 
    /* Type scale — rem-based */
    --text-xs:              0.75rem;        /* 12px */
    --text-sm:              0.875rem;       /* 14px */
    --text-base:            1rem;           /* 16px */
    --text-md:              1.125rem;       /* 18px */
    --text-lg:              1.25rem;        /* 20px */
    --text-xl:              1.5rem;         /* 24px */
    --text-2xl:             1.75rem;        /* 28px */
    --text-3xl:             2.25rem;        /* 36px */
    --text-4xl:             3rem;           /* 48px */
 
    /* Font weights */
    --weight-normal:        400;
    --weight-semi:          600;
    --weight-bold:          700;
 
    /* Line heights */
    --leading-tight:        1.2;
    --leading-snug:         1.4;
    --leading-normal:       1.6;
    --leading-relaxed:      1.8;
 
    /* ── 2c. Spacing ────────────────────────────────────────
       Base-4 / base-8 scale. Use these consistently.        */
 
    --space-1:              4px;
    --space-2:              8px;
    --space-3:              12px;
    --space-4:              16px;
    --space-5:              20px;
    --space-6:              24px;
    --space-8:              32px;
    --space-10:             40px;
    --space-12:             48px;
    --space-16:             64px;
    --space-20:             80px;
    --space-24:             96px;
 
    /* ── 2d. Borders & Shadows ──────────────────────────────*/
 
    --radius-sm:            4px;
    --radius-md:            8px;
    --radius-lg:            12px;
    --radius-xl:            20px;
    --radius-full:          9999px;
 
    --shadow-sm:            0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md:            0 4px 12px rgba(0, 0, 0, 0.10);
    --shadow-lg:            0 8px 24px rgba(0, 0, 0, 0.12);
 
    /* ── 2e. Layout ─────────────────────────────────────────*/
 
    --max-width:            1200px;
    --wrapper-padding:      40px;
}
 
 
/* ============================================================
   3. RESET & NORMALIZE
   ============================================================ */
 
*,
*::before,
*::after {
    box-sizing: border-box;
}
 
html, body, div, span, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code,
em, img, strong, sub, sup, var, b, u, i, center, ol, ul, li,
fieldset, form, label, legend, article, aside, canvas,
figure, figcaption, footer, header, nav, section, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}
 
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
 
body {
    line-height: 1;
}
 
table {
    border-collapse: collapse;
    border-spacing: 0;
}
 
img {
    max-width: 100%;
    height: auto;
    display: block;
}
 
 
/* ============================================================
   4. BASE TYPOGRAPHY
   ============================================================ */
 
/* ── 4a. Body ───────────────────────────────────────────────*/
 
body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-normal);
    line-height: var(--leading-normal);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
 
/* Form elements inherit the body font */
input,
select,
textarea,
button {
    font-family: var(--font-body);
    font-size: var(--text-base);
}
 
/* ── 4b. Headings ───────────────────────────────────────────*/
 
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-primary);
    margin: var(--space-8) 0 var(--space-4) 0;
}
 
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); text-transform: uppercase; letter-spacing: 0.05em; }
 
/* ── 4c. Paragraphs ─────────────────────────────────────────*/
 
p {
    margin: 0 0 var(--space-5) 0;
    line-height: var(--leading-relaxed);
    color: var(--color-text);
    font-size: var(--text-base);
}
 
/* ── 4d. Links ──────────────────────────────────────────────*/
 
a {
    color: var(--color-accent);
    text-decoration: none;
    font-weight: var(--weight-semi);
    transition: color 0.3s ease;
}
 
a:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}
 
/* ── 4e. Lists ──────────────────────────────────────────────*/
 
ul, ol {
    margin: var(--space-5) 0 var(--space-5) var(--space-8);
    padding-left: var(--space-5);
}
 
ul { list-style-type: disc; }
ol { list-style-type: decimal; }
 
ul li,
ol li {
    margin-bottom: var(--space-3);
    color: var(--color-text);
    line-height: var(--leading-relaxed);
}
 
/* ── 4f. Blockquote ─────────────────────────────────────────*/
 
blockquote {
    border-left: 4px solid var(--color-accent);
    padding-left: var(--space-5);
    margin: var(--space-5) 0;
    color: var(--color-text-muted);
    font-style: italic;
    font-size: var(--text-md);
}
 
/* ── 4g. Code & Pre ─────────────────────────────────────────*/
 
code {
    font-family: var(--font-accent);
    font-size: var(--text-sm);
    background-color: var(--color-bg-alt);
    color: var(--color-primary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}
 
pre {
    font-family: var(--font-accent);
    font-size: var(--text-sm);
    background-color: var(--color-bg-dark);
    color: var(--color-text-inverse);
    padding: var(--space-5);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: var(--space-5) 0;
    border-left: 4px solid var(--color-accent);
}
 
 
/* ============================================================
   5. LAYOUT
   ============================================================ */
 
/* ── 5a. Wrapper / Container ────────────────────────────────
   Single definition. No duplicates.                          */
 
.wrapper,
.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--wrapper-padding);
}
 
/* ── 5b. Main ───────────────────────────────────────────────
   Unconstrained. Each block owns its containment via .wrapper.
   Vertical margin creates breathing room above and below main.
   Templates that need content containment use .wrapper inside
   <main> directly (page.php, single.php, home.php, etc.).
   Full-width block templates (front-page.php) let blocks render
   directly in main — each block's inner .wrapper handles it.
   ────────────────────────────────────────────────────────── */

main {
    margin: var(--space-16) 0;
}

#content {
    min-height: 400px;
}
 
/* ── 5c. Article ────────────────────────────────────────────*/
 
/* Blog post cards (.post-card) have their own card design in the
   blog templates; :where() keeps this rule's specificity unchanged (CODE-019). */
article:not(:where(.post-card)) {
    background-color: var(--color-bg);
    padding: var(--space-10);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

article:has(.hero_style_full-width),
article:has(.cta_style_full-width) {
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}
 
 
/* ============================================================
   6. COMPONENTS
   ============================================================ */
 
/* ── 6a. Header & Navigation ────────────────────────────────
   Boilerplate structural defaults only — layout, spacing,
   and token-driven color. These ship with every project and
   are not rewritten per client.
   Project-specific header brand styles go in §10g.
   Responsive nav system styles live in:
   ~common_features/ada_responsive_nav/style.css            */
 
/* The site header only: a <header> inside <main> (for example a blog
   post's own header) is left alone. :where() keeps the specificity
   of a bare `header` selector (CODE-014). */
header:not(:where(main header)) {
    background-color: var(--color-bg-dark);
    padding: var(--space-5) 0;
}

/* .header_inner lays out the logo, nav, and hamburger button in
   one row. This lives here (not in the ADA nav file) so header
   layout has exactly one owner — no specificity tie to lose.
   To change it per project, edit this rule directly or override
   it in §10g further down; either way there's only one file to
   check. */
.header_inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* The active V3 navigation system (dropdowns, hamburger, mobile
   breakpoint) is handled by ~common_features/ada_responsive_nav/
   style.css. Keep nav-specific overrides there; header layout
   overrides go in §10g. */

/* Header & Footer settings (Theme Settings → Header & Footer,
   BATCH_8_PLAN.md §49). Every rule below needs a class the header
   only gets when a setting is chosen, so the default header is
   unchanged.

   Logo above a centred menu (computers only; phones use the usual
   phone header). */
@media (min-width: 901px) {
    header.site_header_stacked .header_inner {
        flex-wrap: wrap;
        justify-content: center;
        column-gap: var(--space-4);
    }

    header.site_header_stacked #logo,
    header.site_header_stacked .custom-logo-link {
        flex: 0 0 100%;
        justify-content: center;
    }

    header.site_header_stacked nav {
        margin-top: var(--space-4);
    }

    /* Logo left, menu right + header button: the menu moves right,
       next to the button. */
    header.has_header_button:not(.site_header_stacked) #main-nav {
        margin-left: auto;
    }

    header.has_header_button .header_button_wrap {
        margin: var(--space-8) 0 0 var(--space-4);
    }

    header.site_header_stacked .header_button_wrap {
        margin: var(--space-4) 0 0 0;
    }
}

/* Phones and small tablets (≤900px, the phone-menu width): the row may
   wrap, so the opened menu (flex: 1 0 100% in the nav stylesheet) takes
   its own full-width row under the logo instead of squeezing in beside
   it (§49 fix). Both layouts use the same phone header. */
@media (max-width: 900px) {
    .header_inner {
        flex-wrap: wrap;
    }

    header.site_header_stacked #logo,
    header.site_header_stacked .custom-logo-link {
        justify-content: flex-start;
    }

    /* Menu button, then the header button, at the right of the top row —
       the same order as the HTML, so Tab follows what is on screen. */
    header.has_header_button #mnavbutton {
        margin-left: auto;
    }

    .header_button_wrap {
        order: 2;
        margin-left: var(--space-3);
    }
}

/* Very small phones: the header button gets its own full-width row
   under the logo and menu button. */
@media (max-width: 480px) {
    .header_button_wrap {
        flex: 1 0 100%;
        margin: var(--space-3) 0 0;
    }

    .header_button {
        display: block;
        width: 100%;
        text-align: center;
    }
}

/* Header button (optional). A contact-form button with no backup link
   stays hidden until the pop-out script shows it; hide its holder too. */
.header_button_wrap:has(> [hidden]) {
    display: none;
}

.header_button {
    white-space: nowrap;
}

/* Header and footer colours — the shared six background choices.
   They only change the header or footer they are chosen for. */
.hf_surface_background     { background-color: var(--color-bg); }
.hf_surface_alt_background { background-color: var(--color-bg-alt); }
.hf_surface_dark           { background-color: var(--color-bg-dark); }
.hf_surface_accent         { background-color: var(--color-accent); }
.hf_surface_custom         { background-color: var(--hf-surface, var(--color-bg-dark)); }

.hf_text_light {
    --hf-text: var(--color-text-inverse);
    --hf-text-soft: var(--color-text-inverse-soft);
    --hf-hover: var(--color-accent);
    --hf-line: var(--color-text-inverse-muted);
}

.hf_text_dark {
    --hf-text: var(--color-text);
    --hf-text-soft: var(--color-text);
    --hf-hover: var(--color-accent);
    --hf-line: var(--color-border);
    /* Desktop drop-down menus become a light panel with dark words. */
    --hf-sub-bg: var(--color-bg);
    --hf-sub-text: var(--color-text);
    --hf-sub-shadow: var(--shadow-md);
}

/* On the brand colour or your own colour, hover keeps the text colour
   and underlines, because the brand colour may not show on them. */
.hf_surface_accent,
.hf_surface_custom {
    --hf-hover: var(--hf-text);
    /* Softer see-through text can fall below 4.5:1 on these, so
       supporting text uses the full text colour. */
    --hf-text-soft: var(--hf-text);
}

header.hf_surface_accent nav .nav_item_holder > a:hover,
header.hf_surface_custom nav .nav_item_holder > a:hover,
.hf_surface_accent #logo:hover,
.hf_surface_custom #logo:hover {
    text-decoration: underline;
}

/* Buttons on a brand-colour header swap to the page colour so they
   stay visible. */
header.hf_surface_accent .header_button,
header.hf_surface_accent nav .nav_item_holder.nav_button > a {
    background-color: var(--color-bg);
    border-color: var(--color-bg);
    color: var(--color-accent);
}

header.hf_surface_accent .header_button:hover,
header.hf_surface_accent nav .nav_item_holder.nav_button > a:hover {
    background-color: var(--color-bg-alt);
    border-color: var(--color-bg-alt);
    color: var(--color-accent);
}

/* Focus outlines follow the chosen text colour so they show on the
   chosen background. */
.hf_surface a:focus-visible,
.hf_surface button:focus-visible {
    outline: 2px solid var(--hf-text);
    outline-offset: 3px;
}

/* ── 6b. Buttons ────────────────────────────────────────────*/
 
.btn,
button,
input[type="submit"],
input[type="button"] {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-semi);
    color: var(--color-white);
    background-color: var(--color-accent);
    border: 2px solid var(--color-accent);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    transition: all 0.3s ease;
}
 
.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-white);
    text-decoration: none;
}
 
.btn-outline {
    background-color: transparent;
    color: var(--color-accent);
}
 
.btn-outline:hover {
    background-color: var(--color-accent);
    color: var(--color-white);
}
 
/* ── 6c. Forms ──────────────────────────────────────────────*/
 
form {
    width: 100%;
}
 
label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    color: var(--color-text);
    margin-bottom: var(--space-2);
}
 
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select {
    display: block;
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
 
input:focus,
textarea:focus,
select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(0, 85, 204, 0.12);
}
 
textarea {
    min-height: 120px;
    resize: vertical;
}
 
/* ── 6d. Tables ─────────────────────────────────────────────*/
 
table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-5) 0;
    font-size: var(--text-base);
}
 
th, td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}
 
th {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    color: var(--color-primary);
    background-color: var(--color-bg-alt);
}
 
tr:hover {
    background-color: var(--color-bg-alt);
}
 
/* ── 6e. Footer ─────────────────────────────────────────────
   Boilerplate structural defaults only — layout, spacing,
   and token-driven color. These ship with every project and
   are not rewritten per client.
   Project-specific footer brand styles go in §10h.          */
 
footer {
    background-color: var(--color-bg-dark);
    color: var(--hf-text, var(--color-text-inverse));
    padding: var(--space-12) 0 var(--space-5) 0;
    margin-top: var(--space-20);
}
 
.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-8);
}
 
footer p {
    color: var(--hf-text, var(--color-text-inverse));
    margin: 0;
    font-size: var(--text-sm);
}
 
footer a {
    color: var(--hf-text, var(--color-text-inverse));
    text-decoration: underline;
}
 
footer a:hover {
    /* Keep the link's own colour (the global a:hover recoloured it, CODE-064). */
    color: var(--hf-text, var(--color-text-inverse));
    opacity: 0.75;
}
 
/* Header & Footer settings (§49). Each rule below only matches
   markup that a setting adds, so the default footer is unchanged. */
.footer_brand {
    max-width: 32rem;
}

.footer_logo .custom-logo,
.footer_logo img {
    max-height: 60px;
    width: auto;
}

.footer_site_name {
    font-weight: var(--weight-bold);
    font-size: var(--text-lg);
    text-decoration: none;
}

.footer_text {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    color: var(--hf-text-soft, var(--color-text-inverse-soft));
}

.footer_text p,
.footer_text li {
    color: inherit;
}

.footer_text p + p {
    margin-top: var(--space-2);
}

.footer_contact p + p {
    margin-top: var(--space-1);
}

.footer_social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
}

.footer_social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
}

.footer_social_icon {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
}

.footer_heading {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hf-text, var(--color-text-inverse));
    margin: 0 0 var(--space-3);
}

.footer_menu_list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer_menu_list li + li {
    margin-top: var(--space-2);
}

/* Simple footer with optional content or the Legal Menu (§52): the footer
   menu prints bare list items, so remove their bullets and space them
   evenly. The untouched Simple footer doesn't get this class. */
.site_footer_simple_extended .footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin: 0;
    padding: 0;
}

.site_footer_simple_extended .footer-nav li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Legal links sit with the copyright in the bottom legal row (Columns,
   and Simple once optional content or the Legal Menu is used). */
.footer_legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-6);
}

.footer_legal_nav .footer_menu_list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
}

.footer_legal_nav .footer_menu_list li + li {
    margin-top: 0;
}

.footer_legal_nav a {
    font-size: var(--text-sm);
}

/* Columns layout: up to four columns, then two, then one. */
.footer_columns {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: start;
    gap: var(--space-8);
}

.footer_legal_row {
    justify-content: space-between;
    border-top: 1px solid var(--hf-line, var(--color-text-inverse-muted));
    margin-top: var(--space-10);
    padding-top: var(--space-5);
}

.footer_legal_row:first-child {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

@media (max-width: 900px) {
    .footer_columns {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .footer_columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .footer_legal_row {
        flex-direction: column;
        align-items: flex-start;
    }
}

footer .copyright {
    width: 100%;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: var(--space-5);
    margin-top: var(--space-5);
    color: rgba(255, 255, 255, 0.55);
    font-size: var(--text-sm);
}
 
 
/* ============================================================
   7. WORDPRESS SPECIFICS
   ============================================================ */
 
/* ── 7a. Block Editor — heading blocks ──────────────────────*/
 
.wp-block-heading h1,
.wp-block-heading h2,
.wp-block-heading h3,
.wp-block-heading h4,
.wp-block-heading h5,
.wp-block-heading h6 {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
}
 
/* WordPress button block */
.wp-block-button__link {
    background-color: var(--color-accent) !important;
    color: var(--color-white) !important;
    padding: var(--space-3) var(--space-6) !important;
    font-family: var(--font-body) !important;
    font-weight: var(--weight-semi) !important;
    border-radius: var(--radius-md) !important;
    transition: all 0.3s ease !important;
}
 
.wp-block-button__link:hover {
    background-color: var(--color-accent-hover) !important;
    color: var(--color-white) !important;
}
 
/* ── 7b. Alignment Helpers ──────────────────────────────────*/
 
.alignleft   { float: left;  margin-right: var(--space-5); }
.alignright  { float: right; margin-left: var(--space-5); }
.aligncenter { display: block; margin: 0 auto; }
.alignwide   { max-width: 100%; }
.alignfull   { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
 
/* ── 7c. Captions ───────────────────────────────────────────*/
 
.wp-caption-text,
figcaption {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
    margin-top: var(--space-2);
    font-style: italic;
}

/* ── 7d. Responsive Embeds ──────────────────────────────────
   Wraps iframes in a 16:9 responsive container.
   Handles Loom, YouTube, Vimeo and any oEmbed provider.    */

.embed-responsive {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.embed-responsive iframe,
.embed-responsive video,
.embed-responsive object,
.embed-responsive embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
 
 
/* ── 7e. Legacy colour preset names ─────────────────────────
   theme.json's colour presets "text" and "border" were renamed
   "body-text" and "border-line" (BATCH_8_PLAN.md §55–§56): their
   generated .has-text-color / .has-border-color rules collided with
   the generic classes WordPress adds to every block with a text or
   border colour. Saved content is not rewritten, so the old names
   keep working here:
   - the old preset variables point at the new ones (link/element
     colours and inline styles saved as var(--wp--preset--color--text));
   - old background and border preset classes are mapped.
   Old *text* colour selections get the new preset's class when the
   block is shown (functions.php, boilerplate_legacy_preset_class) and
   a marker class in the editor (js/preset-compat-editor.js, rules
   below).
   NEVER add a rule for .has-text-color or .has-border-color — those
   are core's generic classes and must stay unstyled.            */

:root {
    --wp--preset--color--text: var(--wp--preset--color--body-text);
    --wp--preset--color--border: var(--wp--preset--color--border-line);
}

.has-text-background-color {
    background-color: var(--wp--preset--color--body-text) !important;
}

.has-border-background-color {
    background-color: var(--wp--preset--color--border-line) !important;
}

.has-text-border-color {
    border-color: var(--wp--preset--color--body-text) !important;
}

.has-border-border-color {
    border-color: var(--wp--preset--color--border-line) !important;
}

/* Old text-colour selections in the block editor (the website adds
   the new preset's own class instead). The editor marks the block's
   wrapper; the colour applies to the wrapper or to its direct child
   that carries the colour classes (buttons). !important matches
   WordPress's preset classes; :where() keeps the specificity at zero
   so anything that beats a new preset (e.g. the theme's core-button
   rule in §7a) beats the old one too.                          */
:where(.bp-legacy-text-color):where(.has-text-color),
:where(.bp-legacy-text-color) > :where(.has-text-color) {
    color: var(--wp--preset--color--body-text) !important;
}

:where(.bp-legacy-border-line-color):where(.has-text-color),
:where(.bp-legacy-border-line-color) > :where(.has-text-color) {
    color: var(--wp--preset--color--border-line) !important;
}

/* ============================================================
   8. UTILITIES
   ============================================================ */
 
/* ── 8a. Skip to Main Content — accessibility ───────────────*/
 
.main_content {
    height: 0;
    overflow: hidden;
    display: block;
    font-size: 0;
    text-transform: uppercase;
    line-height: 0;
    background: var(--color-bg-dark);
    color: var(--color-text-inverse);
    font-weight: var(--weight-bold);
    letter-spacing: 1px;
}
 
.main_content:focus {
    font-size: var(--text-sm);
    line-height: 16px;
    height: 36px;
    padding: 10px 15px;
}
 
/* Inline UI icons (skip link, scroll-to-top, contact drawer buttons).
   boilerplate_icon() SVGs sized like the Font Awesome glyphs they
   replaced, so these buttons no longer need the Font Awesome kit. */
.bp_ui_icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    overflow: visible;
}

/* ── 8b. Scroll To Top ──────────────────────────────────────*/
 
#top {
    position: fixed;
    bottom: 0px;
    right: 20px;
    width: 45px;
    height: 45px;
    opacity: 0;
    border-radius: var(--radius-xl) 0 var(--radius-xl) var(--radius-xl);
    background: var(--color-bg-alt);
    color: var(--color-accent);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: var(--text-sm);
    line-height: 1em;
    user-select: none;
    transition: all 500ms ease;
    border: 1px solid var(--color-border);
    z-index: 10000;
    pointer-events: none;
    cursor: pointer;
    /* A native <button> since §49 — reset the global button look. */
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-weight: inherit;
    appearance: none;
}
 
#top.on {
    pointer-events: initial;
    bottom: 20px;
    opacity: 1;
}
 
#top:hover {
    background: var(--color-bg-alt);
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
}
 
/* ── 8c. Font Testing Classes — removed 2026-11-11 (fonts chosen) */

/* ── 8d. General Helpers ────────────────────────────────────*/
 
/* Screen-reader only — hide visually, keep accessible */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
 
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
 
.mt-0  { margin-top: 0 !important; }
.mb-0  { margin-bottom: 0 !important; }
.pt-0  { padding-top: 0 !important; }
.pb-0  { padding-bottom: 0 !important; }
 
.hidden { display: none !important; }
 
 
/* ============================================================
   9. RESPONSIVE
   ============================================================ */
 
/* ── 9a. Tablet — max-width: 768px ─────────────────────────*/
 
@media (max-width: 768px) {
 
    :root {
        --wrapper-padding: 24px;
    }
 
    h1 { font-size: var(--text-3xl); }
    h2 { font-size: var(--text-2xl); }
    h3 { font-size: var(--text-xl); }
 
    header nav ul {
        gap: var(--space-5);
    }
 
    header nav a {
        font-size: var(--text-xs);
    }
 
    article:not(:where(.post-card)) {
        padding: var(--space-5);
    }
 
    main {
        padding: 0 var(--space-6);
        margin: var(--space-10) auto;
    }
 
    .footer-content {
        flex-direction: column;
        text-align: center;
    }

    /* Header & Footer settings (§49): Simple centres its content on
       tablets, so its bottom legal row centres too; Columns stay left. */
    .site_footer_simple_extended .footer-nav {
        justify-content: center;
    }

    footer:not(.site_footer_columns) .footer_legal_row {
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .footer-content.footer_columns {
        text-align: left;
    }
}
 
/* ── 9b. Mobile — max-width: 480px ─────────────────────────*/
 
@media (max-width: 480px) {
 
    :root {
        --wrapper-padding: 16px;
    }
 
    h1 { font-size: var(--text-2xl); }
    h2 { font-size: var(--text-xl); }
    h3 { font-size: var(--text-lg); }
 
    header nav ul {
        gap: var(--space-4);
        flex-wrap: wrap;
    }
 
    header nav a {
        font-size: var(--text-xs);
    }
 
    article:not(:where(.post-card)) {
        padding: var(--space-4);
    }
 
    main {
        padding: 0 var(--space-4);
        margin: var(--space-8) auto;
    }
 
    ul, ol {
        margin: var(--space-4) 0 var(--space-4) var(--space-5);
    }
}
 
 
/* ============================================================
   10. [CLIENT NAME] SHARED PATTERNS
   ──────────────────────────────────────────────────────────
   Add project-specific styles below, organized by the
   sub-sections that apply to your project. Delete or leave
   empty any sub-sections you do not need.

   The right order when starting a new project:
     1. Update :root tokens in §2
     2. Swap font @imports in §1
     3. Add shared patterns and brand styles here

   WHAT BELONGS HERE:
   Shared visual patterns used across multiple blocks —
   buttons, pills, eyebrows, title plates, cards, gradient
   underlines. Header and footer brand styles. Contact drawer
   or global UI overlays. Page-scoped block overrides using
   body.page-{slug}. Any project-specific style not covered
   by tokens or block CSS files.

   WHAT DOES NOT BELONG HERE:
   Block-specific layout or structure → block's own .css file
   New design tokens            → :root in §2
   Site-wide resets or base typography → §3 and §4

   SHARED PATTERN RULE:
   If the same visual treatment appears in more than one block,
   promote it here instead of duplicating it in block CSS.
   Examples:
     repeated pill buttons    → .btn-pill-primary / -secondary
     repeated eyebrow labels  → shared eyebrow class
     repeated title plates    → shared title pattern class
     repeated gradient lines  → shared accent-line class
     repeated glass panels    → shared panel/card class

   GLOBAL ELEMENT RULE:
   Global element rules (§4) should stay foundational:
   font-family, font-size, line-height, color, margin.
   Decorative global heading underlines, display overrides on
   bare elements, or complex pseudo-elements on bare selectors
   belong as opt-in classes here in §10 — not global rules.
   If a project intentionally applies stronger global styling,
   document that choice with a comment.

   BLOCK WRAPPER RULE:
   Every block uses an outer section and an inner .wrapper:
     <section class="block_name block_name_variant_[v] block_name_style_[s]">
         <div class="wrapper block_name_wrapper">...</div>
     </section>
   Outer section:       background, full-width, vertical spacing.
                        Variant and style classes belong here.
   .wrapper:            max-width, margin auto, horizontal padding.
   Block wrapper class: block-specific layout only.
   Do not redefine max-width or horizontal padding per block.
   Variants change layout/styling/behavior — not wrapper geometry.
   See STYLESHEET_GUIDE.md for the full wrapper pattern.

   This section replaces a separate branding.css file.
   Keep it organized with clear sub-section comments.
   ──────────────────────────────────────────────────────────

   EXAMPLE — project token override (paste into §2 or here):

   :root {
       --color-primary:        #YOUR_COLOR;
       --color-secondary:      #YOUR_COLOR;
       --color-accent:         #YOUR_COLOR;
       --color-accent-hover:   #YOUR_COLOR;
       --color-bg:             #YOUR_COLOR;
       --color-bg-dark:        #YOUR_COLOR;
       --font-body:            'Your Font', sans-serif;
       --font-heading:         'Your Font', sans-serif;
   }

   ──────────────────────────────────────────────────────────
   Add your project styles below:
   ──────────────────────────────────────────────────────────
*/

/* ── 10a. Wrapper / Section Layout ──────────────────────────
   Block outer sections own background, full-width behavior,
   and vertical spacing. Variant and style classes go on the
   outer section element. .wrapper (§5a) owns max-width,
   margin auto, and horizontal page padding. Block-specific
   wrapper classes own only block-specific layout — not
   max-width or padding redeclarations. Always use both
   wrapper classes together: class="wrapper block_name_wrapper"
   Variants change layout/styling/behavior — not wrapper
   geometry — unless documented as an exception.              */

/* FJB: page width as in prototype Home V1.3: content up to
   1280px, with 64px side margins on computers, 36px at
   1000px and below, 20px at 700px and below. These come after
   §9, so they replace its 24px/16px tablet and phone margins. */
:root {
    --max-width: 1408px;
    --wrapper-padding: 64px;

    /* The one prototype V1.3 colour that isn't a Site Design
       colour: the Our Work background (§10n). Site Design has no
       slot for it (Matthew, 2026-11-11). Its lines use Site
       Design's Supporting text and Lines colours instead. */
    --fjb-sage:          #cbd2be;
}

@media (max-width: 1000px) {
    :root { --wrapper-padding: 36px; }
}

@media (max-width: 700px) {
    :root { --wrapper-padding: 20px; }
}

/* FJB: menu and in-page links glide to their section, as in
   prototype Home V1.3. §12 turns this off for visitors who ask
   for reduced motion. */
html {
    scroll-behavior: smooth;
}

/* FJB: headings are Georgia Regular, as in the approved logo. */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--weight-normal);
}

/* ── 10b. Shared Buttons ────────────────────────────────────
   Primary / secondary CTA button pair used by Hero and CTA Banner.
   Both blocks use identical styling — defined once here.
   Responsive width overrides (full-width on mobile) stay in
   each block's own CSS file since they depend on block layout. */

.hero_cta_primary,
.cta_btn_primary {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-base);
}

.hero_cta_primary:hover,
.cta_btn_primary:hover {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-white);
    text-decoration: none;
}

/* Secondary — outline style on dark background */
.hero_cta_secondary,
.cta_btn_secondary {
    background-color: transparent;
    border: 2px solid var(--color-white);
    color: var(--color-white);
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-base);
}

.hero_cta_secondary:hover,
.cta_btn_secondary:hover {
    background-color: var(--color-white);
    color: var(--color-primary);
    text-decoration: none;
}

/* ── 10c. Shared Eyebrow / Pill Labels ─────────────────────
   Structural eyebrow pattern used by Hero, CTA Banner, and FCS.
   All structural properties are shared: font-family, size,
   weight, case, letter-spacing, and margin.
   Color differs by background context — overridden per block:
   - Dark background (Hero, CTA Banner): color-text-inverse + opacity
   - Light background (FCS): color-accent, no opacity
   Color overrides live in each block's own CSS file.         */

.hero_subheading,
.cta_eyebrow,
.fcs_eyebrow {
    font-family: var(--font-accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: var(--space-3);
}

/* Label look: Rounded tag (Batch 8H, BATCH_8_PLAN.md §28).
   Optional pill treatment for a block's small label, added only when the
   editor picks Label look → Rounded tag (Plain text, the default, adds no
   class). Built from the label's own color (currentColor) and tokens, so it
   reads on light and dark backgrounds with no per-site colors. The first
   border line is the fallback for browsers without color-mix().
   Each block below ships the same rule in its own CSS (BOILERPLATE NOTE) so
   it works when copied alone (Timeline also uses it for its Date look,
   §29). Contact / Form, Services Core and Zone Band already have their
   own rounded tags and do not use this rule. */
.hero_subheading.hero_label_pill,
.fcs_eyebrow.fcs_label_pill,
.ba_eyebrow.ba_label_pill,
.sv_header_label.sv_label_pill,
.ig_header_label.ig_label_pill,
.lg_label.lg_label_pill,
.timeline_eyebrow.timeline_label_pill,
.timeline_period.timeline_date_pill,
.custom_accordion_label.custom_accordion_label_pill,
.special_callout_label.special_callout_label_pill,
.cta_eyebrow.cta_label_pill,
.event_block_label.event_block_label_pill,
.gallery_label.gallery_label_pill,
.options_list_label.options_list_label_pill,
.custom_profiles_label.custom_profiles_label_pill,
.program_block_label.program_block_label_pill,
.testimonials_label.testimonials_label_pill,
.video_label.video_label_pill,
.visit_label.visit_label_pill {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border: 1px solid currentColor;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    border-radius: var(--radius-full);
    background-color: color-mix(in srgb, currentColor 8%, transparent);
    line-height: var(--leading-tight);
}

/* ── 10d. Shared Title Plate Patterns ──────────────────────
   Repeated headline treatment or title plate structure used
   across multiple sections. Define once here.               */

/* ── 10e. Shared Gradient / Accent Lines ───────────────────
   Repeated gradient underlines, accent borders, or decorative
   heading lines. Define once here as opt-in classes.        */

/* ── 10f. Shared Glass / Card Panels ───────────────────────
   (The corner triangle decoration that used to live here — on Event,
   Page Cards and Document & Details cards — was removed by Matt's
   decision, BATCH_8_PLAN.md §40. Its shared selectors also wrongly
   targeted the Event and Document sections, drawing a stray triangle.)
   Card panel styles (background, radius, shadow) differ per block and
   live in each block's own CSS file.                        */

/* ── 10g. Header ────────────────────────────────────────────
   Project-specific header brand styles. Base nav styles live
   in ~common_features/ada_responsive_nav/style.css.         */

/* FJB (prototype Home V1.3): a light header with a hairline
   underneath, the name in the heading font, menu words in
   normal case, and a rounded button lined up with the menu.
   Colours come from Theme Settings (Header & Footer, Site
   Design); fonts follow --font-heading / --font-body once
   they're chosen. */
header:not(:where(main header)) {
    padding: 0;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--color-primary) 15%, transparent);
}

/* Prototype announcement bar (partials/header-html.php). It's
   inside the header, so it stays in view with it. */
.fjb_announcement {
    margin: 0;
    padding: 7px 20px;
    background-color: var(--color-bg-alt);
    color: var(--color-primary);
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

@media (max-width: 900px) {
    header:not(:where(main header)) > .wrapper {
        padding-top: var(--space-6);
        padding-bottom: var(--space-6);
    }
}

#logo {
    min-height: 0;
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: var(--weight-normal);
    letter-spacing: -0.025em;
}

/* Approved SVG wordmark (assets/images/brand/). */
#logo.logo_svg {
    min-width: 0;
}

#logo.logo_svg img {
    display: block;
    height: 64px;
    width: auto;
}

@media (max-width: 900px) {
    #logo.logo_svg img {
        height: 48px;
    }
}

/* #main-nav outranks the nav stylesheet, which loads after this file. */
header #main-nav .nav_item_holder > a,
header #main-nav .sub_nav a {
    text-transform: none;
}

header #main-nav .nav_item_holder > a {
    font-size: var(--text-base);
    font-weight: var(--weight-normal);
}

/* Outline pill button, as in the prototype's "Let's Talk". */
.header_button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-full);
    background-color: transparent;
    color: var(--color-primary);
    font-weight: var(--weight-normal);
    padding: var(--space-3) var(--space-8);
}

.header_button:hover {
    border-color: var(--color-primary);
    background-color: color-mix(in srgb, var(--color-primary) 5%, transparent);
    color: var(--color-primary);
}

@media (min-width: 901px) {
    /* Stays at the top while scrolling (computers only, so an open
       phone menu can't run off the screen). */
    header:not(:where(main header)) {
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .admin-bar header:not(:where(main header)) {
        top: 32px;
    }

    /* Menu links land below the sticky header and bar (about 144px). */
    html {
        scroll-padding-top: 150px;
    }

    /* Prototype: 112px tall header, 14px menu words spaced
       28–64px apart, button 15–100px from the menu. */
    header:not(:where(main header)) {
        padding: 0;
    }

    .header_inner {
        min-height: 112px;
    }

    header #main-nav {
        margin-top: 0;
    }

    header #main-nav .nav_item_holder > a {
        font-size: var(--text-sm);
        padding: var(--space-2) clamp(14px, 2vw, 32px);
    }

    /* Line the button up with the menu instead of sitting lower. */
    header.has_header_button .header_button_wrap {
        margin: 0 0 0 clamp(15px, 7vw, 100px);
    }
}

/* ── 10h. Footer ────────────────────────────────────────────
   Project-specific footer brand styles.                     */

/* FJB footer (partials/footer-fjb.php), ported from prototype
   Home V1.3. Background colour and text colour come from
   Theme Settings → Header & Footer (deep green, light text);
   the forest artwork sits on top of that colour. */
footer.site_footer_fjb {
    margin-top: 0;
    padding: 48px 0 0;
    color: var(--color-text-inverse);
    background-image: url('assets/images/brand/fjb-background-forest.webp');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: cover;
}

.site_footer_fjb a {
    color: inherit;
    font-weight: var(--weight-normal);
}

/* The estimate button stays bold, as in the prototype. */
.site_footer_fjb a.fjb_button_cream {
    font-weight: var(--weight-bold);
}

.fjb_footer_grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr) minmax(0, 0.85fr);
    gap: 44px;
    align-items: start;
}

.fjb_footer_intro {
    min-width: 0;
    max-width: 800px;
    padding-bottom: 44px;
}

.site_footer_fjb .fjb_footer_title {
    margin: 0;
    color: inherit;
    font-family: var(--font-heading);
    font-size: clamp(38px, 4.4vw, 64px);
    font-weight: var(--weight-normal);
    line-height: 1.03;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.fjb_footer_intro > p {
    margin: 19px 0 0;
    font-size: 16px;
    color: inherit;
}

.fjb_actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px 36px;
    margin-top: 25px;
}

.fjb_button_cream {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    min-height: 48px;
    padding: 12px 29px;
    border: 1px solid var(--color-text-inverse);
    background-color: var(--color-text-inverse);
    color: var(--color-primary);
    font-size: 15px;
    font-weight: var(--weight-bold);
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
}

.site_footer_fjb .fjb_button_cream {
    color: var(--color-primary);
}

.site_footer_fjb .fjb_button_cream:hover {
    background-color: var(--color-bg-alt);
    border-color: var(--color-bg-alt);
    text-decoration: none;
}

.fjb_text_link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-height: 44px;
    font-size: 16px;
    text-decoration: underline;
    text-underline-offset: 5px;
}

.fjb_contact_details {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 27px;
    margin-top: 20px;
    font-size: 14px;
}

.fjb_contact_details a {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.fjb_contact_details a:hover {
    text-decoration: underline;
}

.fjb_footer_location,
.fjb_footer_hours {
    min-width: 0;
    padding-block: 12px 44px;
    font-size: 15px;
}

.site_footer_fjb .fjb_footer_location h3,
.site_footer_fjb .fjb_footer_hours h3 {
    margin: 0 0 22px;
    color: inherit;
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: var(--weight-bold);
    letter-spacing: 0;
}

.fjb_footer_location address {
    font-style: normal;
}

.fjb_footer_location .fjb_text_link {
    margin-top: 15px;
}

.fjb_footer_hours p {
    margin: 0;
    color: inherit;
}

.fjb_footer_hours > p + p {
    margin-top: 18px;
}

.site_footer_fjb .fjb_footer_tagline {
    margin-top: 26px;
    font-family: var(--font-heading);
    font-size: 21px;
    line-height: 1.3;
}

.fjb_footer_bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding-block: 22px 28px;
    border-top: 1px solid color-mix(in srgb, var(--color-text-inverse) 44%, transparent);
    font-size: 13px;
}

.fjb_footer_bottom p {
    margin: 0;
    color: inherit;
    font-size: 13px;
}

.fjb_footer_logo {
    display: inline-block;
    text-decoration: none;
}

.fjb_footer_logo img {
    display: block;
    height: 56px;
    width: auto;
}

.site_footer_fjb .fjb_site_credit {
    font-size: 12px;
}

.fjb_site_credit a {
    text-decoration: underline;
}

.fjb_back_top {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.fjb_back_top:hover {
    text-decoration: underline;
}

@media (min-width: 701px) and (max-width: 1100px) {
    .fjb_footer_grid {
        grid-template-columns: 1fr 1fr;
        gap: 0 36px;
    }

    .fjb_footer_intro {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    footer.site_footer_fjb {
        padding-top: 38px;
        background-position: 60% bottom;
    }

    .fjb_actions {
        gap: 14px 24px;
    }

    .fjb_footer_grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .fjb_footer_location,
    .fjb_footer_hours {
        padding-block: 24px 28px;
        border-top: 1px solid color-mix(in srgb, var(--color-text-inverse) 36%, transparent);
    }

    .fjb_footer_bottom {
        flex-wrap: wrap;
    }

    .fjb_footer_bottom > p {
        flex: 1 1 130px;
        text-align: right;
    }

    .site_footer_fjb .fjb_site_credit {
        flex: 1 1 160px;
        text-align: left;
    }

    .fjb_back_top {
        margin-left: auto;
    }
}

/* ── 10i. Contact Drawer / Global Overlays ─────────────────
   Full drawer system. JS only toggles .is_open and hidden —
   all positioning, animation, and layout is CSS.

   data-position values on .contact_drawer:
     right  — slides in from the right (default)
     left   — slides in from the left
     bottom — slides up from the bottom, 70vh max
     modal  — centered overlay, scale-in animation

   To change position on a project: update data-position="..."
   in footer-html.php. No JS or CSS changes needed.         */

/* Hidden guard — prevents display override on success/error states */
.contact_drawer_panel [hidden] {
    display: none !important;
}

/* ── Overlay (all positions) */
.contact_drawer {
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
}

.contact_drawer.is_open {
    pointer-events: auto;
}

.contact_drawer_overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.contact_drawer.is_open .contact_drawer_overlay {
    opacity: 1;
}

/* ── Panel base */
.contact_drawer_panel {
    position: absolute;
    background: var(--color-bg);
    overflow-y: auto;
    transition: transform 0.3s ease, opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-8);
    box-shadow: var(--shadow-lg);
}

/* ── Position: right (default) */
.contact_drawer[data-position="right"] .contact_drawer_panel {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 420px;
    max-width: 90vw;
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    transform: translateX(100%);
}

.contact_drawer[data-position="right"].is_open .contact_drawer_panel {
    transform: translateX(0);
}

/* ── Position: left */
.contact_drawer[data-position="left"] .contact_drawer_panel {
    top: 0;
    left: 0;
    bottom: 0;
    right: auto;
    width: 420px;
    max-width: 90vw;
    border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
    transform: translateX(-100%);
}

.contact_drawer[data-position="left"].is_open .contact_drawer_panel {
    transform: translateX(0);
}

/* ── Position: bottom */
.contact_drawer[data-position="bottom"] .contact_drawer_panel {
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    width: 100%;
    max-height: 70vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    transform: translateY(100%);
}

.contact_drawer[data-position="bottom"].is_open .contact_drawer_panel {
    transform: translateY(0);
}

/* ── Position: modal */
.contact_drawer[data-position="modal"] .contact_drawer_panel {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: 540px;
    max-width: 90vw;
    max-height: 90vh;
    border-radius: var(--radius-xl);
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0;
}

.contact_drawer[data-position="modal"].is_open .contact_drawer_panel {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* ── Close button */
.contact_drawer_close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    font-size: var(--text-sm);
    flex-shrink: 0;
}

.contact_drawer_close:hover {
    background: var(--color-border);
    color: var(--color-primary);
}

/* ── Header */
.contact_drawer_header {
    padding-right: var(--space-8);
}

.contact_drawer_eyebrow {
    font-family: var(--font-accent);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-accent);
    margin: 0 0 var(--space-2) 0;
}

.contact_drawer_title {
    font-size: var(--text-2xl);
    color: var(--color-primary);
    margin: 0 0 var(--space-2) 0;
    line-height: var(--leading-tight);
}

.contact_drawer_intro {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin: 0;
}

/* ── Drawer form fields */
.contact_drawer_form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.drawer_form_hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.drawer_form_field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.drawer_form_field label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    color: var(--color-secondary);
}

.drawer_form_required {
    color: var(--color-accent);
    margin-left: 2px;
}

.contact_drawer_form input[type="text"],
.contact_drawer_form input[type="email"],
.contact_drawer_form textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.contact_drawer_form input:focus,
.contact_drawer_form textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
}

.contact_drawer_form textarea {
    resize: vertical;
    min-height: 100px;
}

.drawer_field_error_msg {
    font-size: var(--text-xs);
    color: var(--color-error);
    min-height: 1rem;
}

.drawer_form_error {
    padding: var(--space-3) var(--space-4);
    border: 1px solid currentColor;
    border-radius: var(--radius-md);
    color: var(--color-error);
    font-size: var(--text-sm);
    background: color-mix(in srgb, var(--color-error) 8%, transparent);
}

.contact_drawer_submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-8);
    background: var(--color-accent);
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-md);
    color: var(--color-white, #fff);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-semi);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    width: 100%;
}

.contact_drawer_submit:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

.contact_drawer_submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ── Success state */
.drawer_form_success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-8) var(--space-4);
    text-align: center;
    min-height: 160px;
}

.drawer_form_success_heading {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-primary);
    margin: 0;
}

.drawer_form_success p {
    color: var(--color-text-muted);
    margin: 0;
}

/* ── Trigger button — floats near scroll-to-top, restyle per project */
.contact_drawer_trigger {
    position: fixed;
    bottom: calc(var(--space-6) + 3rem + var(--space-3));
    right: var(--space-6);
    z-index: 8999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-full);
    background: var(--color-accent);
    border: none;
    color: var(--color-white, #fff);
    font-size: var(--text-lg);
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: background 0.2s ease, transform 0.2s ease;
}

.contact_drawer_trigger:hover {
    background: var(--color-accent-hover);
    transform: scale(1.05);
}

/* Prevent body scroll when drawer is open */
body.contact_drawer_open {
    overflow: hidden;
}

/* ── 10j. Small Utilities ───────────────────────────────────
   Project-level utility classes not covered by §8.          */

/* ── 10k. Footer Bookend CTA — main bottom margin ──────────
   Use when a full-bleed CTA block variant is designed to sit
   flush against the footer (no gap between block and footer).
   Two issues cause unwanted gaps:
     1. main has margin-bottom: var(--space-16) by default
     2. WordPress may inject an empty <p> after the final block

   Copy this template into your project's §10 and replace
   [your-variant-name] with your actual variant name
   (e.g. footer-bookend).

   main:has(.cta_banner_variant_[your-variant-name]) {
       margin-bottom: 0;
   }

   .cta_banner_variant_[your-variant-name] + p:empty,
   .cta_banner_variant_[your-variant-name] + .wp-block-paragraph:empty,
   main > p.wp-block-paragraph:empty {
       display: none;
       margin: 0;
   }

   The main > p.wp-block-paragraph:empty rule is safe to
   include permanently — it only hides genuinely empty
   editor paragraphs regardless of which block precedes them.

   This pattern applies to any block used as a footer bookend
   — not just CTA Banner. Adjust the selector to match.       */

/* ── 10l. Homepage Hero (FJB) ──────────────────────────────
   FJB-only (2026-11-11). Ports the prototype Home V1.3 hero
   onto the Hero block: full photo, with a cream panel across
   the bottom left holding dark green words, a square green
   button and an underlined call link. Applies only to a Hero
   with a Background photo on the front page, so other pages
   keep the block's own look. The block's photo darkening is
   hidden here; the panel keeps the words readable.

   Editor set-up: Full width, text left, Background photo.
   Main button = estimate, Second button = call.            */

body.home .hero_block.hero_has_photo {
    display: flex;
    align-items: flex-end;
    min-height: 780px;
    padding: 0;
    background-color: var(--color-bg);
    background-position: var(--hero-pos, center 54%);
}

body.home .hero_has_photo .hero_overlay {
    display: none;
}

body.home .hero_has_photo .hero_inner {
    width: min(72%, 970px);
    max-width: none;
    margin: 0;
    padding: 38px 52px 42px max(var(--wrapper-padding), calc((100vw - var(--max-width)) / 2 + var(--wrapper-padding)));
    background-color: var(--color-bg);
    text-align: left;
}

body.home .hero_has_photo .hero_content {
    max-width: none;
    margin: 0;
}

body.home .hero_has_photo .hero_subheading {
    margin: 0;
    color: var(--color-primary);
    opacity: 1;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: var(--weight-bold);
    letter-spacing: 0.085em;
    text-transform: uppercase;
}

body.home .hero_has_photo .hero_heading {
    max-width: none;
    margin: 22px 0 0;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: clamp(48px, 5.9vw, 86px);
    font-weight: var(--weight-normal);
    line-height: 0.99;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

body.home .hero_has_photo .hero_paragraph {
    max-width: 650px;
    margin: 22px 0 0;
    color: var(--color-primary);
    opacity: 1;
    font-size: 18px;
    line-height: 1.55;
}

body.home .hero_has_photo .hero_cta_row {
    gap: 22px 36px;
    margin-top: 25px;
    flex-direction: row;
    align-items: center;
}

body.home .hero_has_photo .hero_cta_primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 48px;
    padding: 12px 29px;
    border: 1px solid var(--color-accent);
    border-radius: 0;
    background-color: var(--color-accent);
    color: var(--color-bg);
    font-size: 15px;
    font-weight: var(--weight-bold);
    line-height: 1.35;
}

body.home .hero_has_photo .hero_cta_primary:hover {
    border-color: var(--color-accent-hover);
    background-color: var(--color-accent-hover);
    color: var(--color-bg);
}

/* Second button = the prototype's underlined "Call FJB Enterprises ↗" link. */
body.home .hero_has_photo .hero_cta_secondary {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    width: auto;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--color-primary);
    font-size: 16px;
    font-weight: var(--weight-normal);
    text-decoration: underline;
    text-underline-offset: 5px;
}

body.home .hero_has_photo .hero_cta_secondary::after {
    content: "↗";
    content: "↗" / "";
}

body.home .hero_has_photo .hero_cta_secondary:hover {
    background: none;
    color: var(--color-primary);
}

@media (min-width: 1600px) {
    body.home .hero_block.hero_has_photo { min-height: 850px; }
}

@media (max-width: 1100px) {
    body.home .hero_block.hero_has_photo { min-height: 680px; }
    body.home .hero_has_photo .hero_inner { width: 78%; }
}

@media (max-width: 1000px) {
    body.home .hero_has_photo .hero_inner { padding-left: 36px; }
}

/* Phones: photo 330px tall across the top, panel overlapping
   its bottom edge from 250px, as in the prototype. The section's
   own photo is hidden and redrawn in ::before at that height. */
@media (max-width: 700px) {
    body.home .hero_block.hero_has_photo {
        display: block;
        min-height: 0;
        padding: 250px 0 0;
        background-size: 0 0;
    }

    body.home .hero_block.hero_has_photo::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 330px;
        background-image: inherit;
        background-size: cover;
        background-position: var(--hero-pos-phone, var(--hero-pos, center 54%));
        background-repeat: no-repeat;
    }

    body.home .hero_has_photo .hero_inner {
        width: calc(100% - 20px);
        padding: 27px 20px 30px;
    }

    body.home .hero_has_photo .hero_subheading {
        font-size: 10px;
        letter-spacing: 0.07em;
    }

    body.home .hero_has_photo .hero_heading {
        margin-top: 18px;
        font-size: clamp(40px, 9.4vw, 65px);
    }

    body.home .hero_has_photo .hero_paragraph {
        margin-top: 19px;
        font-size: 16px;
    }

    body.home .hero_has_photo .hero_cta_row {
        gap: 14px 24px;
        margin-top: 21px;
    }
}


/* ── 10m. Homepage service rows (FJB) ──────────────────────
   FJB-only (2026-11-11). Ports prototype Home V1.3's "Room for
   your next chapter." section onto the Accordion block:
   - heading on the left, intro on the right behind a rule;
   - numbered rows (01, 02…) with the service name, a short line
     and a plus that becomes a minus when open;
   - the answer lines up under the name, and its link is an
     underlined "↗" text link.
   Editor set-up: Layout → Look "Homepage feature"; How it opens
   → one at a time; Advanced → Section ID "services". Write each
   item's title as "Name | short line" (accordion.php splits it).
   The "Explore All Services" button below is a WordPress Buttons
   block with the extra CSS class fjb_all_services.            */

.custom_accordion.custom_accordion_variant_homepage_feature {
    margin: 0;
    padding: 52px 0;
}

.custom_accordion_variant_homepage_feature .custom_accordion_intro_area {
    display: grid;
    grid-template-columns: 46% 54%;
    align-items: start;
    margin-bottom: 38px;
}

.custom_accordion_variant_homepage_feature .custom_accordion_heading {
    margin: 0;
    color: var(--color-primary);
    font-size: clamp(38px, 4.4vw, 64px);
    font-weight: var(--weight-normal);
    line-height: 1.03;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.custom_accordion_variant_homepage_feature .custom_accordion_intro {
    max-width: 610px;
    margin-top: 7px;
    padding: 3px 0 3px 65px;
    border-left: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: 19px;
    line-height: 1.6;
}

.custom_accordion_variant_homepage_feature .custom_accordion_card {
    border: 0;
    border-top: 1px solid var(--color-border);
    border-radius: 0;
    overflow: visible;
    counter-reset: fjb-service;
}

.custom_accordion_variant_homepage_feature .custom_accordion_item {
    border-bottom: 1px solid var(--color-border);
    counter-increment: fjb-service;
}

.custom_accordion_variant_homepage_feature .accordion_header {
    border: 0;
}

.custom_accordion_variant_homepage_feature .accordion_header button {
    display: grid;
    grid-template-columns: 100px 1.05fr 1.3fr 26px;
    gap: 18px;
    align-items: center;
    min-height: 94px;
    padding: 15px 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: var(--weight-normal);
    line-height: 1.6;
}

.custom_accordion_variant_homepage_feature .accordion_header button:hover {
    background: color-mix(in srgb, var(--color-primary) 2.5%, transparent);
}

/* Row number. */
.custom_accordion_variant_homepage_feature .accordion_header button::before {
    content: counter(fjb-service, decimal-leading-zero);
    color: var(--color-text-muted);
    font-family: var(--font-heading);
    font-size: 52px;
    line-height: 1;
}

.custom_accordion_variant_homepage_feature .ac_title_name {
    font-family: var(--font-heading);
    font-size: clamp(27px, 2.7vw, 38px);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.custom_accordion_variant_homepage_feature .accordion_header button:hover .ac_title_name {
    text-decoration: underline;
    text-underline-offset: 6px;
}

.custom_accordion_variant_homepage_feature .ac_title_blurb {
    font-size: 15px;
}

/* Plus when closed, minus when open (replaces the chevron). */
.custom_accordion_variant_homepage_feature .accordion_header button::after {
    position: static;
    justify-self: end;
    width: 18px;
    height: 18px;
    border: 0;
    transform: none;
    background:
        linear-gradient(currentColor, currentColor) center / 16px 1px no-repeat,
        linear-gradient(currentColor, currentColor) center / 1px 16px no-repeat;
}

.custom_accordion_variant_homepage_feature .accordion_header button.active::after {
    transform: none;
    background-size: 16px 1px, 0 0;
}

.custom_accordion_variant_homepage_feature .ac_body_inner {
    max-width: 950px;
    padding: 0 44px 28px 118px;
    border-top: 0;
    color: var(--color-text);
}

.custom_accordion_variant_homepage_feature .ac_body_inner p {
    max-width: 680px;
    margin: 0;
}

.custom_accordion_variant_homepage_feature .ac_body_inner p + p {
    margin-top: 14px;
}

.custom_accordion_variant_homepage_feature .ac_body_inner a {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-height: 44px;
    color: var(--color-primary);
    font-size: 16px;
    font-weight: var(--weight-normal);
    text-decoration: underline;
    text-underline-offset: 5px;
}

.custom_accordion_variant_homepage_feature .ac_body_inner a::after {
    content: "↗";
    content: "↗" / "";
}

/* "Explore All Services" (Buttons block, class fjb_all_services). */
.custom_accordion_variant_homepage_feature:has(+ .fjb_all_services) {
    padding-bottom: 0;
}

.wp-block-buttons.fjb_all_services {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 30px 0 52px;
}

/* !important only where §7a forces the theme's filled button with
   !important (.wp-block-button__link); nothing else needs it. */
.fjb_all_services .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    min-height: 44px;
    padding: 10px 20px !important;
    border: 1px solid var(--color-primary);
    border-radius: 0 !important;
    background-color: transparent !important;
    color: var(--color-primary) !important;
    font-family: var(--font-body) !important;
    font-size: 14px;
    font-weight: var(--weight-normal) !important;
    line-height: 1.35;
    text-decoration: none;
}

.fjb_all_services .wp-block-button__link:hover {
    background-color: color-mix(in srgb, var(--color-primary) 5%, transparent) !important;
    color: var(--color-primary) !important;
}

.fjb_all_services .wp-block-button__link::after {
    content: "↘";
    content: "↘" / "";
}

@media (max-width: 1100px) {
    .custom_accordion_variant_homepage_feature .custom_accordion_intro {
        padding-left: 35px;
    }

    .custom_accordion_variant_homepage_feature .accordion_header button {
        grid-template-columns: 70px 1fr 1.1fr 24px;
    }

    .custom_accordion_variant_homepage_feature .ac_body_inner {
        padding-left: 88px;
    }
}

@media (max-width: 700px) {
    .custom_accordion.custom_accordion_variant_homepage_feature {
        padding: 38px 0;
    }

    .wp-block-buttons.fjb_all_services {
        padding-bottom: 38px;
    }

    .custom_accordion_variant_homepage_feature .custom_accordion_intro_area {
        grid-template-columns: 1fr;
        gap: 26px;
        margin-bottom: 30px;
    }

    .custom_accordion_variant_homepage_feature .custom_accordion_heading {
        font-size: clamp(35px, 8.7vw, 51px);
    }

    .custom_accordion_variant_homepage_feature .custom_accordion_intro {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 17px;
    }

    .custom_accordion_variant_homepage_feature .accordion_header button {
        grid-template-columns: 48px minmax(0, 1fr) 24px;
        gap: 0 12px;
        padding: 19px 0;
    }

    .custom_accordion_variant_homepage_feature .accordion_header button::before {
        grid-row: 1 / 3;
        align-self: start;
        font-size: 38px;
    }

    .custom_accordion_variant_homepage_feature .ac_title_name {
        font-size: 30px;
    }

    .custom_accordion_variant_homepage_feature .ac_title_blurb {
        grid-column: 2;
        grid-row: 2;
        margin-top: 7px;
        font-size: 14px;
        line-height: 1.5;
    }

    .custom_accordion_variant_homepage_feature .accordion_header button::after {
        grid-column: 3;
        grid-row: 1 / 3;
        align-self: center;
    }

    .custom_accordion_variant_homepage_feature .ac_body_inner {
        padding: 0 0 25px 60px;
        font-size: 15px;
    }
}

/* ── 10n. Homepage Our Work grid (FJB) ─────────────────────
   FJB-only (2026-11-11). Ports prototype Home V1.3's Our Work
   section onto the Image Grid block: sage background; the heading
   on the left with a rule running to the right; a large first
   photo beside two wide photos; captions on the left with a rule
   after them. No rounded corners. Phones: one column.
   Editor set-up: Colors → Optional looks "Homepage feature";
   Title on, heading only, left; 3 photo items in this order
   (driveway, excavator, truck), larger view off; Advanced →
   Section ID "work".                                          */

.image_grid.ig_variant_homepage_feature {
    padding: 52px 0;
    background-color: var(--fjb-sage);
}

.ig_variant_homepage_feature .ig_header {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-bottom: 30px;
    text-align: left;
}

.ig_variant_homepage_feature .ig_header::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--color-secondary);
}

.ig_variant_homepage_feature .ig_header_heading {
    margin: 0;
    color: var(--color-primary);
    font-size: clamp(38px, 4.4vw, 64px);
    font-weight: var(--weight-normal);
    line-height: 1.03;
    letter-spacing: -0.025em;
}

.ig_variant_homepage_feature .ig_grid {
    grid-template-columns: 1.3fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 24px;
}

.ig_variant_homepage_feature .ig_item:first-child {
    grid-row: 1 / 3;
}

.ig_variant_homepage_feature .ig_item_type_image .ig_item_inner {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100%;
    overflow: visible;
    border-radius: 0;
}

.ig_variant_homepage_feature .ig_item_type_image img {
    height: 100%;
    aspect-ratio: 2.15;
    border-radius: 0;
}

.ig_variant_homepage_feature .ig_item:first-child img {
    aspect-ratio: auto;
}

.ig_variant_homepage_feature .ig_caption {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding-top: 10px;
    color: var(--color-primary);
    font-size: 15px;
    text-align: left;
}

.ig_variant_homepage_feature .ig_caption::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--color-border);
}

@media (max-width: 700px) {
    .image_grid.ig_variant_homepage_feature {
        padding: 38px 0;
    }

    .ig_variant_homepage_feature .ig_header {
        gap: 16px;
        margin-bottom: 24px;
    }

    .ig_variant_homepage_feature .ig_header::after {
        min-width: 12px;
    }

    .ig_variant_homepage_feature .ig_header_heading {
        font-size: clamp(33px, 8vw, 48px);
    }

    .ig_variant_homepage_feature .ig_grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 27px;
    }

    .ig_variant_homepage_feature .ig_item:first-child {
        grid-row: auto;
    }

    .ig_variant_homepage_feature .ig_item:first-child img {
        aspect-ratio: 1.15;
    }

    .ig_variant_homepage_feature .ig_item_type_image img {
        aspect-ratio: 1.65;
    }
}

/* ── 10o. Homepage Our Story (FJB) ─────────────────────────
   FJB-only (2026-11-11). Ports prototype Home V1.3's "Local
   knowledge. Decades of experience." section onto the Split
   View block:
   - the lake artwork fades in at the bottom
     (assets/images/brand/fjb-background-lake.webp);
   - story text on the left, ending in a ruled
     "Serving the Community Since 1985" line;
   - on the right, an outlined "1985", then "More ways we can
     help" with a two-column list and a service-area note.
   Applies to the Split View with Section ID "story" on the front
   page. Editor set-up: one row, both sides Text. The pasted
   HTML uses the classes fjb_history_tag, fjb_more_list and
   fjb_service_area (see _client/SITE_PLAN.md).              */

/* The lake section runs straight into the footer, as in the
   prototype: no main bottom margin (64px) on the front page
   when Our Story is the last section. */
body.home main:has(> #story:last-child) {
    margin-bottom: 0;
}

body.home #story.split_view .sv_panel {
    position: relative;
    isolation: isolate;
    padding: 52px 0 112px;
    background-color: var(--color-bg);
}

body.home #story.split_view .sv_panel::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background-image: url('assets/images/brand/fjb-background-lake.webp');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
    -webkit-mask-image: linear-gradient(to bottom, transparent 15%, #000 75%);
    mask-image: linear-gradient(to bottom, transparent 15%, #000 75%);
}

body.home #story .sv_row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 65px;
    align-items: start;
}

body.home #story .sv_col_body {
    color: var(--color-text);
}

/* The left side's Heading field looks like the section heading too
   (it's an H2, from split_view.php), so the heading can live in the field
   instead of the pasted text. */
body.home #story .sv_col_1 .sv_col_heading,
body.home #story .sv_col_1 .sv_col_body h2 {
    margin: 0;
    font-family: var(--font-heading);
    color: var(--color-primary);
    font-size: clamp(36px, 4vw, 58px);
    font-weight: var(--weight-normal);
    line-height: 1.03;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

body.home #story .sv_col_1 .sv_col_body p {
    max-width: 540px;
    margin: 22px 0 0;
}

body.home #story .sv_col_body p.fjb_history_tag {
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: none;
    margin-top: 30px;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 23px;
    line-height: 1.25;
}

body.home #story .fjb_history_tag::before {
    content: "";
    flex-shrink: 0;
    width: 65px;
    height: 1px;
    background-color: var(--color-border);
}

/* Outlined 1985 above the list (decorative). */
body.home #story .sv_col_2::before {
    content: "1985";
    content: "1985" / "";
    display: block;
    margin: -3px 0 27px;
    color: transparent;
    -webkit-text-stroke: 1px var(--color-secondary);
    font-family: var(--font-heading);
    font-size: clamp(120px, 16vw, 232px);
    letter-spacing: -0.045em;
    line-height: 0.82;
}

body.home #story .sv_col_2 .sv_col_heading {
    margin: 0 0 13px;
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: var(--weight-bold);
    letter-spacing: 0;
}

body.home #story ul.fjb_more_list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.home #story ul.fjb_more_list li {
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 15px;
}

body.home #story .sv_col_body p.fjb_service_area {
    margin: 27px 0 0;
    padding-left: 18px;
    border-left: 1px solid var(--color-border);
    font-size: 13px;
    line-height: 1.5;
}

/* "See all services" link to the Services page (added 2026-11-12). */
body.home #story .sv_col_body p.fjb_story_services_link {
    margin: 22px 0 0;
}

body.home #story .sv_col_body p.fjb_story_services_link a {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-height: 44px;
    color: var(--color-primary);
    font-weight: var(--weight-normal);
    text-decoration: underline;
    text-underline-offset: 5px;
}

body.home #story .sv_col_body p.fjb_story_services_link a::after {
    content: "↗";
    content: "↗" / "";
}

@media (max-width: 1100px) {
    body.home #story .sv_row { gap: 40px; }
    body.home #story ul.fjb_more_list { column-gap: 20px; }
}

@media (max-width: 700px) {
    body.home #story.split_view .sv_panel {
        padding: 38px 0 130px;
    }

    body.home #story.split_view .sv_panel::before {
        background-size: auto 260px;
        background-position: 42% bottom;
    }

    body.home #story .sv_row {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    body.home #story .sv_col_1 .sv_col_heading,
    body.home #story .sv_col_1 .sv_col_body h2 {
        font-size: clamp(34px, 8.3vw, 50px);
    }

    body.home #story .sv_col_body p.fjb_history_tag {
        gap: 12px;
        font-size: 21px;
    }

    body.home #story .fjb_history_tag::before {
        width: 32px;
    }

    body.home #story .sv_col_2::before {
        margin-bottom: 24px;
        font-size: clamp(120px, 36vw, 210px);
    }
}

/* ── 10p. Estimate pop-out form (FJB) ──────────────────────
   FJB-only (2026-11-11). The contact pop-out becomes the estimate
   request form: extra fields (partials/footer-html.php), square
   fields and button to match the site, and readable labels. It
   opens from the floating envelope button (kept, Matthew
   2026-11-11), the footer's Request a Free Estimate button and
   any block link to "#estimate" (functions.php).               */

.contact_drawer_form .drawer_form_field label,
.fjb_drawer_needs legend {
    color: var(--color-primary);
    font-size: 14px;
    font-weight: var(--weight-bold);
}

.contact_drawer_form input[type="tel"] {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    box-sizing: border-box;
}

.contact_drawer_form input[type="text"],
.contact_drawer_form input[type="email"],
.contact_drawer_form input[type="tel"],
.contact_drawer_form textarea {
    margin: 0;
    border-radius: 0;
}

/* Tighter fields: the global form styles add space under each
   label and box, on top of the field gap, and every field kept
   an empty 16px error line. */
.contact_drawer_form .drawer_form_field {
    gap: 6px;
}

.contact_drawer_form .drawer_form_field > label {
    margin: 0;
}

.contact_drawer_form .drawer_field_error_msg {
    min-height: 0;
}

.fjb_drawer_needs {
    margin: 0;
    padding: 0;
    border: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
}

.fjb_drawer_needs legend {
    grid-column: 1 / -1;
    margin-bottom: var(--space-2);
    padding: 0;
}

.fjb_drawer_hint {
    display: block;
    font-size: 13px;
    font-weight: var(--weight-normal);
}

.contact_drawer_form .fjb_drawer_needs label.fjb_drawer_check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    color: var(--color-text);
    font-size: 15px;
    font-weight: var(--weight-normal);
    cursor: pointer;
}

.fjb_drawer_check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--color-accent);
}

.fjb_drawer_check input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.contact_drawer_submit {
    min-height: 48px;
    border-width: 1px;
    border-radius: 0;
    font-size: 15px;
    font-weight: var(--weight-bold);
}

@media (max-width: 480px) {
    .fjb_drawer_needs {
        grid-template-columns: 1fr;
    }
}

/* ── 10q. Services page introduction (FJB) ─────────────────
   FJB-only (2026-11-12). Nova's approved Services page intro:
   breadcrumb, small label, large heading with the supporting
   text to its right behind a thin rule, a square estimate
   button and an underlined call link, then a row of in-page
   links between two rules.

   Editor set-up (Services page):
   - Hero: Contained, text left, no photo; Advanced → Section
     ID "services-intro". Small label, heading, text; Main
     button = estimate (#estimate), Second button = call.
   - List block right after it, Advanced → Additional CSS
     class "fjb_jump_links"; each item is a link to a section
     ID further down the page.
   The breadcrumb comes from partials/fjb-breadcrumb.php
   (every ordinary page, not the front page).               */

.fjb_breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 0 0 40px;
    padding: 0;
    list-style: none;
    color: var(--color-primary);
    font-size: 13px;
    line-height: 1.4;
}

.fjb_breadcrumb li {
    margin: 0;
    padding: 0;
}

.fjb_breadcrumb li + li::before {
    content: "/";
    content: "/" / "";
    margin-right: 10px;
    color: var(--color-text-muted);
}

.fjb_breadcrumb a {
    color: inherit;
    font-weight: var(--weight-normal);
    text-decoration: none;
}

.fjb_breadcrumb a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

#services-intro.hero_block {
    display: block;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: none;
}

#services-intro .hero_overlay {
    display: none;
}

#services-intro .hero_inner {
    max-width: none;
    margin: 0;
    padding: 0;
    text-align: left;
}

#services-intro .hero_content {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    grid-template-areas:
        "label   ."
        "heading text"
        "cta     .";
    column-gap: 64px;
    max-width: none;
    margin: 0;
}

#services-intro .hero_subheading {
    grid-area: label;
    margin: 0;
    color: var(--color-primary);
    opacity: 1;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: var(--weight-bold);
    letter-spacing: 0.085em;
    text-transform: uppercase;
}

#services-intro .hero_heading {
    grid-area: heading;
    align-self: center;
    max-width: none;
    margin: 22px 0 0;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: clamp(42px, 5vw, 72px);
    font-weight: var(--weight-normal);
    line-height: 1.04;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

#services-intro .hero_paragraph {
    grid-area: text;
    align-self: center;
    max-width: 440px;
    margin: 22px 0 0;
    padding: 6px 0 6px 32px;
    border-left: 1px solid var(--color-border);
    color: var(--color-primary);
    opacity: 1;
    font-size: 18px;
    line-height: 1.55;
}

#services-intro .hero_cta_row {
    grid-area: cta;
    flex-direction: row;
    align-items: center;
    gap: 18px 36px;
    margin-top: 34px;
}

#services-intro .hero_cta_primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 48px;
    padding: 12px 29px;
    border: 1px solid var(--color-accent);
    border-radius: 0;
    background-color: var(--color-accent);
    color: var(--color-bg);
    font-size: 15px;
    font-weight: var(--weight-bold);
    line-height: 1.35;
}

#services-intro .hero_cta_primary:hover {
    border-color: var(--color-accent-hover);
    background-color: var(--color-accent-hover);
    color: var(--color-bg);
}

#services-intro .hero_cta_secondary {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    width: auto;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--color-primary);
    font-size: 16px;
    font-weight: var(--weight-normal);
    text-decoration: underline;
    text-underline-offset: 5px;
}

#services-intro .hero_cta_secondary::after {
    content: "↗";
    content: "↗" / "";
}

#services-intro .hero_cta_secondary:hover {
    background: none;
    color: var(--color-primary);
}

ul.fjb_jump_links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 64px 0 0;
    padding: 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    list-style: none;
}

ul.fjb_jump_links li {
    margin: 0;
    padding: 0;
    text-align: center;
}

ul.fjb_jump_links li::before,
ul.fjb_jump_links li::marker {
    content: none;
}

ul.fjb_jump_links a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 82px;
    padding: 10px 12px;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: var(--weight-normal);
    line-height: 1.25;
    text-decoration: none;
}

ul.fjb_jump_links a:hover {
    text-decoration: underline;
    text-underline-offset: 5px;
}

@media (max-width: 900px) {
    #services-intro .hero_content {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "label"
            "heading"
            "text"
            "cta";
    }

    #services-intro .hero_paragraph {
        max-width: 620px;
        margin-top: 24px;
        padding: 0 0 0 22px;
    }

    #services-intro .hero_cta_row {
        margin-top: 28px;
    }

    ul.fjb_jump_links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 48px;
    }

    ul.fjb_jump_links li:nth-child(n + 3) {
        border-top: 1px solid var(--color-border);
    }

    ul.fjb_jump_links li:nth-child(odd) {
        border-right: 1px solid var(--color-border);
    }

    ul.fjb_jump_links a {
        min-height: 64px;
        font-size: 17px;
    }
}

@media (max-width: 480px) {
    .fjb_breadcrumb ol {
        margin-bottom: 28px;
    }

    #services-intro .hero_paragraph {
        font-size: 17px;
    }

    #services-intro .hero_cta_row {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
}

/* ── 10r. Services page feature sections (FJB) ─────────────
   FJB-only (2026-11-12). Nova's three featured services on the
   Services page, each a Split View block found by its Section
   ID:
   - "clearing": photo left (reaching half-way into the page
     margin), text right with a ruled list and an underlined
     "Discuss…" link;
   - "site-work": text left with a two-column ruled list and a
     square estimate button, photo right;
   - "snow-services": a full-width sage band, small label,
     inline list and an outlined button, photo in a cream frame.
   Editor set-up: Split View, Section look "Minimal", one row.
   The photo side is Image; the text side is Text with pasted
   HTML using h2, p.fjb_section_label, ul.fjb_service_list
   (+ fjb_service_list_two / fjb_service_list_inline) and
   p.fjb_service_link. Buttons use the text side's Button
   fields; links to #estimate open the estimate pop-out.     */

:is(#clearing, #site-work, #snow-services).split_view {
    margin-top: 120px;
}

#clearing.split_view {
    margin-top: 112px;
}

:is(#clearing, #site-work, #snow-services) .sv_panel {
    padding: 0;
    background: none;
}

:is(#clearing, #site-work, #snow-services) .sv_wrapper {
    max-width: none;
    padding: 0;
}

:is(#clearing, #site-work, #snow-services) .sv_row {
    display: grid;
    align-items: center;
    gap: 56px;
}

#clearing .sv_row {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}

#site-work .sv_row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
}

#snow-services .sv_row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 64px;
}

#clearing .sv_col_1 {
    margin-left: calc(var(--wrapper-padding) * -0.5);
}

#site-work .sv_col_2 {
    margin-right: calc(var(--wrapper-padding) * -0.5);
}

:is(#clearing, #site-work, #snow-services) .sv_col_img {
    width: 100%;
    height: auto;
    border-radius: 0;
    object-fit: cover;
}

#clearing .sv_col_img {
    aspect-ratio: 4 / 3;
}

#site-work .sv_col_img {
    aspect-ratio: 5 / 4;
}

#snow-services .sv_col_img {
    aspect-ratio: 8 / 5;
    border: 8px solid var(--color-bg);
}

:is(#clearing, #site-work, #snow-services) .sv_col_body {
    color: var(--color-primary);
    font-size: 17px;
    line-height: 1.6;
}

/* The text side's Heading field (an H2) matches the pasted h2. */
:is(#clearing, #site-work, #snow-services) .sv_col_heading,
:is(#clearing, #site-work, #snow-services) .sv_col_body h2 {
    margin: 0 0 22px;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: clamp(38px, 4vw, 58px);
    font-weight: var(--weight-normal);
    line-height: 1.03;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

:is(#clearing, #site-work, #snow-services) .sv_col_body p {
    max-width: 520px;
    margin: 0;
}

:is(#clearing, #site-work, #snow-services) .sv_col_body p.fjb_section_label {
    margin: 0 0 18px;
    font-size: 13px;
    font-weight: var(--weight-bold);
    letter-spacing: 0.085em;
    text-transform: uppercase;
}

ul.fjb_service_list {
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

ul.fjb_service_list li {
    margin: 0;
    padding: 15px 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-primary);
    font-size: 17px;
    line-height: 1.4;
}

ul.fjb_service_list li::before,
ul.fjb_service_list li::marker {
    content: none;
}

ul.fjb_service_list.fjb_service_list_two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 30px;
}

ul.fjb_service_list.fjb_service_list_inline {
    display: flex;
    flex-wrap: wrap;
    margin-top: 24px;
}

ul.fjb_service_list.fjb_service_list_inline li {
    padding: 0;
    border: 0;
    font-size: 16px;
}

ul.fjb_service_list.fjb_service_list_inline li:not(:last-child)::after {
    content: "·";
    content: "·" / "";
    margin: 0 8px;
}

:is(#clearing, #site-work, #snow-services) p.fjb_service_link {
    margin-top: 34px;
}

:is(#clearing, #site-work, #snow-services) p.fjb_service_link a {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-height: 44px;
    color: var(--color-primary);
    font-weight: var(--weight-normal);
    text-decoration: underline;
    text-underline-offset: 5px;
}

:is(#clearing, #site-work, #snow-services) p.fjb_service_link a::after {
    content: "↗";
    content: "↗" / "";
}

:is(#site-work, #snow-services) .sv_col_ctas {
    margin-top: 34px;
}

:is(#site-work, #snow-services) .sv_col_cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: auto;
    min-height: 48px;
    padding: 12px 29px;
    border: 1px solid var(--color-accent);
    border-radius: 0;
    background-color: var(--color-accent);
    color: var(--color-bg);
    font-size: 15px;
    font-weight: var(--weight-bold);
    line-height: 1.35;
}

:is(#site-work, #snow-services) .sv_col_cta:hover {
    border-color: var(--color-accent-hover);
    background-color: var(--color-accent-hover);
    color: var(--color-bg);
}

#snow-services .sv_col_cta {
    padding: 11px 22px;
    border-color: var(--color-primary);
    background: none;
    color: var(--color-primary);
}

#snow-services .sv_col_cta::after {
    content: "↗";
    content: "↗" / "";
}

#snow-services .sv_col_cta:hover {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-bg);
}

/* The sage band reaches the screen edges while its content keeps
   the page's own left and right edges: a wide shadow paints the
   colour sideways, and the clip stops it above and below. */
#snow-services .sv_panel {
    padding: 76px 0;
    background-color: var(--fjb-sage);
    box-shadow: 0 0 0 100vmax var(--fjb-sage);
    clip-path: inset(0 -100vmax);
}

@media (max-width: 900px) {
    :is(#clearing, #site-work, #snow-services).split_view {
        margin-top: 80px;
    }

    #clearing.split_view {
        margin-top: 64px;
    }

    :is(#clearing, #site-work, #snow-services) .sv_row {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    #clearing .sv_col_1,
    #site-work .sv_col_2 {
        margin: 0;
    }

    :is(#site-work, #snow-services) .sv_col_2 {
        order: -1;
    }

    #snow-services .sv_panel {
        padding: 56px 0;
    }
}

@media (max-width: 480px) {
    ul.fjb_service_list.fjb_service_list_two {
        grid-template-columns: minmax(0, 1fr);
    }

    #snow-services .sv_col_img {
        border-width: 6px;
    }
}

/* ── 10s. Services page additional services (FJB) ────────
   FJB-only (2026-11-12). Nova's additional-services section:
   heading and intro, then three groups side by side (stacked
   on phones), each a ruled list of services that open and
   close on their own with a plus/minus. An open service shows
   its text, an optional photo and a "Discuss Your Project"
   link. The lake artwork fades in along the bottom and the
   section runs straight into the footer.
   Editor set-up: a Group block, Advanced → HTML anchor
   "additional-services" and Additional CSS class
   "fjb_more_services". Inside: Heading (H2), Paragraph, then
   a Columns block with three columns; each column has a
   Heading (H3, the group name) and an Accordion block (How it
   opens → several at once). Each service's optional photo is
   the Accordion item's "Photo (optional)" field.             */

main.page-content:has(.fjb_more_services) {
    overflow-x: clip;
}

main.page-content:has(.page-inner > .fjb_more_services:last-child) {
    margin-bottom: 0;
}

.fjb_more_services {
    position: relative;
    isolation: isolate;
    margin-top: 120px;
    /* Small enough that the service groups sit over the middle of
       the lake artwork (33.4vw tall, anchored to the bottom). */
    padding-bottom: clamp(100px, 9.5vw, 150px);
}

.fjb_more_services::after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 50%;
    width: 100vw;
    height: 33.4vw;
    margin-left: -50vw;
    pointer-events: none;
    background-image: url('assets/images/brand/fjb-background-lake.webp');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
    -webkit-mask-image: linear-gradient(to bottom, transparent 10%, #000 70%);
    mask-image: linear-gradient(to bottom, transparent 10%, #000 70%);
}

.fjb_more_services > h2 {
    margin: 0;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: clamp(38px, 4.4vw, 64px);
    font-weight: var(--weight-normal);
    line-height: 1.03;
    letter-spacing: -0.025em;
}

.fjb_more_services > p {
    max-width: 720px;
    margin: 14px 0 0;
    color: var(--color-primary);
    font-size: 19px;
    line-height: 1.5;
}

.fjb_more_services .wp-block-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 56px;
    margin: 48px 0 0;
}

.fjb_more_services .wp-block-column {
    min-width: 0;
}

.fjb_more_services .wp-block-column > h3 {
    margin: 0;
    padding: 18px 0 14px;
    border-top: 1px solid var(--color-border);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: clamp(24px, 2.2vw, 30px);
    font-weight: var(--weight-normal);
    line-height: 1.15;
}

.fjb_more_services .wp-block-column > p {
    margin: 30px 0 0;
    color: var(--color-primary);
    font-size: 17px;
    line-height: 1.55;
}

.fjb_more_services .custom_accordion {
    margin: 0;
    padding: 0;
    background: none;
}

/* If the Accordion's own Heading & text fields are used inside a group,
   they look like the group name and the column note, not the block's
   default heading. */
.fjb_more_services .custom_accordion_intro_area {
    margin: 0;
}

.fjb_more_services .custom_accordion_heading {
    margin: 0;
    padding: 18px 0 14px;
    border-top: 1px solid var(--color-border);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: clamp(24px, 2.2vw, 30px);
    font-weight: var(--weight-normal);
    line-height: 1.15;
    letter-spacing: 0;
}

.fjb_more_services .custom_accordion_intro {
    margin: 0 0 14px;
    color: var(--color-primary);
    font-size: 17px;
    line-height: 1.55;
}

/* A soft cream backing keeps the service names readable where
   the trees and hills of the lake artwork run behind them. */
.fjb_more_services .custom_accordion_card {
    border: 0;
    border-radius: 0;
    overflow: visible;
    background-color: color-mix(in srgb, var(--color-bg) 82%, transparent);
}

.fjb_more_services .custom_accordion_item {
    border-bottom: 1px solid var(--color-border);
}

.fjb_more_services .accordion_header {
    margin: 0;
    border: 0;
}

.fjb_more_services .accordion_header button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 48px;
    padding: 12px 8px;
    border-radius: 0;
    background: transparent;
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: var(--weight-normal);
    line-height: 1.35;
}

.fjb_more_services .accordion_header button:hover {
    background: color-mix(in srgb, var(--color-primary) 3%, transparent);
    color: var(--color-primary);
}

.fjb_more_services .accordion_header button.active {
    font-weight: var(--weight-bold);
}

/* Plus when closed, minus when open (replaces the chevron). */
.fjb_more_services .accordion_header button::after {
    position: static;
    flex: none;
    width: 16px;
    height: 16px;
    border: 0;
    transform: none;
    background:
        linear-gradient(currentColor, currentColor) center / 15px 1.5px no-repeat,
        linear-gradient(currentColor, currentColor) center / 1.5px 15px no-repeat;
}

.fjb_more_services .accordion_header button.active::after {
    transform: none;
    background-size: 15px 1.5px, 0 0;
}

.fjb_more_services .ac_body_inner {
    padding: 0 8px 20px;
    border-top: 0;
    color: var(--color-primary);
    font-size: 16px;
    line-height: 1.55;
}

.fjb_more_services .ac_body_inner p {
    margin: 0;
}

.fjb_more_services .ac_body_inner p + p {
    margin-top: 10px;
}

.fjb_more_services .ac_body_inner a {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-height: 44px;
    color: var(--color-primary);
    font-weight: var(--weight-normal);
    text-decoration: underline;
    text-underline-offset: 5px;
}

.fjb_more_services .ac_body_inner a::after {
    content: "↗";
    content: "↗" / "";
}

/* Optional photo (Accordion item "Photo (optional)"). */
.fjb_more_services .ac_photo {
    margin: 0 0 14px;
}

.fjb_more_services .ac_photo_img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

@media (max-width: 900px) {
    /* Stacked groups are too tall to centre: keep the lake below them. */
    .fjb_more_services {
        margin-top: 80px;
        padding-bottom: calc(33.4vw + 24px);
    }

    .fjb_more_services .wp-block-columns {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
        margin-top: 36px;
    }

    .fjb_more_services .wp-block-column > p {
        margin-top: 20px;
    }
}

/* ==========================================================
   §12. ACCESSIBILITY / ADA ENHANCEMENTS
   ==========================================================
   Global :focus-visible rules and prefers-reduced-motion.

   NOT in this section:
   - Nav focus styles      → ~common_features/ada_responsive_nav/style.css
   - Form input :focus     → §6c (buttons + forms)
   This section covers all other interactive elements.
   ========================================================== */

/* ── 12a. Focus Visible ─────────────────────────────────────
   Uses var(--color-accent) so the outline automatically
   inherits the project token — no per-project override needed.
   ─────────────────────────────────────────────────────────── */
.btn:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
[role="button"]:focus-visible,
#top:focus-visible,
.footer-nav a:focus-visible,
.contact_drawer_trigger:focus-visible,
.contact_drawer_close:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* Site header and footer (CODE-065): the outline is drawn on the
   header/footer background, so it follows their text colour (white on the
   default dark header/footer, 17.4:1) instead of the brand colour (2.63:1).
   With a colour saved, --hf-text is that colour's text (as .hf_surface does).
   Sub-menu panels have their own background, so their links use
   --hf-sub-text. The Landing Page template's own header/footer keep §12a. */
body > header:not(.landing-header) :is(a, button):focus-visible,
body > footer:not(.landing-footer) :is(a, button):focus-visible {
    outline: 2px solid var(--hf-text, var(--color-text-inverse));
    outline-offset: 3px;
}

body > header:not(.landing-header) .sub_nav a:focus-visible {
    outline-color: var(--hf-sub-text, var(--color-text-inverse));
}

/* Floating buttons (back-to-top, contact pop-out) sit over whatever section
   scrolls behind them, so their ring has two colours: dark against the
   white inner gap and white outside it, visible on light, dark and brand
   backgrounds alike (CODE-065). */
#top:focus-visible,
body > footer .contact_drawer_trigger:focus-visible {
    outline: 3px solid var(--color-bg-dark);
    outline-offset: 2px;
    box-shadow: 0 0 0 7px var(--color-white);
}

/* ── 12b. Prefers Reduced Motion ────────────────────────────
   Collapses all CSS animation/transition durations to
   near-instant. JavaScript also reads
   window.matchMedia('prefers-reduced-motion: reduce') to
   skip setTimeout delays — see js/scripts.js.
   ─────────────────────────────────────────────────────────── */
@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;
    }
}