/*
Theme Name: Tomlin (Hello Biz Child)
Theme URI: https://tomlinbrokers.com
Description: Child theme for Tomlin Insurance Brokers — design tokens + CSS escape hatches for v4 atomic blockers (drop caps, pseudo-elements, hover transitions, font-face). Built on the Hello Biz parent. Design decisions live in atomic widget settings (visible in the v4 editor sidebar), NOT here.
Author: Lucky Tyke (Ryan Davis, LLC)
Author URI: https://luckytyke.com
Template: hello-biz
Version: 0.9.71
License: Proprietary — client deliverable
Text Domain: tomlin-child
*/

/* =============================================================================
   Tomlin design system — see theme.json for design tokens (colors, fonts).

   This stylesheet hosts only the design decisions v4 atomic CANNOT express:
     - @font-face declarations
     - :root tokens (for non-Elementor surfaces: block editor, future CPT)
     - ::first-letter drop caps + ::before/::after decorative marks
     - hover transitions (scale, lift, color shift)
     - timeline dot pseudo-elements
     - button utility classes named in atomic e-button widgets

   Everything else — typography, color, padding, margin, layout, background,
   border-radius — lives in atomic widget styles (visible in the v4 editor
   sidebar). Refactored at Session 5 (2026-05-26) from 2,014 LOC of section-
   scoped CSS to this ~300-LOC escape-hatch stylesheet, per the LuckyTyke
   editor-first house pattern. See memory/feedback_editor_first_atomic_settings.md
   and Projects/AMG-Inc/wordpress-theme-amg-child/style.css for canonical shape.

   Loading order: enqueued at priority 99 in functions.php so this loads AFTER
   Elementor's compiled per-element CSS (default priority 10) — cascade wins
   on body.<context> + 3-class chain selectors without needing !important.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap');

@font-face {
    /* Amsterdam FOUR — the UX Style Guide's specified Page Title Eyebrow face.
       LICENSED 2026-08-19: Lettersiro "Amsterdam 8 Fonts", Webfont licence,
       10K pageviews/month tier, lifetime (no recurring fee). Invoice 10403,
       filed at reference/font-licence/. Files here are the foundry's own
       licensed build (Amsterdam Old / Amsterdam Four.ttf, v1.00 2020-08-26),
       NOT the 2018 free-preview build served through S36-S39 — the licensed
       cut has revised outlines. woff2 is a format transcode of that exact
       binary; outlines and internal names are untouched (the licence forbids
       modifying or renaming the font). Licensed .ttf/.woff sources archived
       at reference/font-licence/amsterdam-four-licensed-source.*
       NOTE: the pack also ships a newer "Amsterdam Signature New" cut (2021,
       upem 1000) — deliberately NOT used; the build's type was set on this one. */
    font-family: 'Amsterdam Four';
    src: url('fonts/amsterdam-four.woff2') format('woff2');
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}

:root {
    --tomlin-navy: #02367B;
    --tomlin-blue: #006EC8;
    --tomlin-eyebrow-blue: #90C4F0;
    --tomlin-light: #E4E4E4;
    --tomlin-off-white: #F9F8F7;
    --tomlin-medium: #64646B;
    --tomlin-near-black: #2C2E32;
    --tomlin-footer-navy: #01224F;
    --tomlin-max: 1400px;

    /* Descender clearance under an Amsterdam script eyebrow (S42, Alicia
       2026-09-02: the swashes on G, R and the ampersand were landing on the H1
       beneath "Guides & Resources").

       Amsterdam declares a 0.84em descent and its capital swashes reach 0.72em
       of real ink below the baseline ("People and Culture"), while both eyebrow
       rules ran a line-height WELL under the font's own box (1.25 on the guides
       masthead, the inherited 1.6 on .tib-ghead). Negative half-leading put the
       glyphs outside their line box, and CSS does not clip them, so the tails
       fell into the heading below. Line-height cannot fix it economically:
       leading is split top and bottom, so it buys 0.5px of clearance per 1px of
       page height, where margin buys 1:1.

       0.55em is the SMALLEST single value that clears the deepest label on both
       eyebrow surfaces at both breakpoints with >=5px of daylight (measured ink
       to ink, not box to box — see docs/session-42-phase-2026-09-02.md). It is
       in em so it tracks each surface's own clamp instead of needing a
       per-breakpoint override. */
    --tomlin-script-eyebrow-clearance: 0.55em;

    /* Foundry guides module — brand token map. The neutral Foundry `guides`
       plugin owns the guides hub/single markup + (tokenized) CSS; this maps its
       --foundry-guides-* custom properties to the Tomlin brand. Values mirror the
       former Section 32 hard-codes exactly (navy #02367B, brand-blue #0071CE,
       off-white #FAFAF8, Playfair/Heebo) so the plugin renders at visual parity.
       Site-side theming only — the plugin's assets/guides.css is never edited. */
    --foundry-guides-font-display: 'Playfair Display', Georgia, serif;
    --foundry-guides-font-sans:    'Heebo', sans-serif;
    /* Script face for the landing-guide header eyebrow (TIB V5) — matches the
       Team page's `.tomlin-script` "Our team" treatment. */
    --foundry-guides-font-script:  'Amsterdam Four', 'Pinyon Script', cursive;
    --foundry-guides-heading:      #02367B;
    --foundry-guides-accent:       var(--tomlin-blue);
    --foundry-guides-on-accent:    #FFFFFF;
    --foundry-guides-text:         #1A1A1A;
    --foundry-guides-muted:        rgba(26, 26, 26, 0.65);
    --foundry-guides-bg:           #FFFFFF;
    --foundry-guides-surface:      #FAFAF8;
    /* Soft cool-grey panel behind the hub featured story (TIB V5, task 6). */
    --foundry-guides-featured-bg:  #F1F4F9;
    --foundry-guides-border:       rgba(2, 54, 123, 0.08);
    --foundry-guides-pill-border:  rgba(2, 54, 123, 0.18);
}

/* Block-editor + non-Elementor surfaces only — Elementor v4 atomic resolves
   typography from atomic settings directly. */
body {
    font-family: var(--wp--preset--font-family--heebo, 'Heebo', sans-serif);
    color: var(--wp--preset--color--near-black, var(--tomlin-near-black));
    background-color: var(--wp--preset--color--off-white, var(--tomlin-off-white));
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection {
    background-color: var(--tomlin-navy);
    color: var(--tomlin-off-white);
}

/* Reset Elementor section default constraints for full-bleed magazine layout */
body.page-id-866 .elementor-section-wrap,
body.page-id-866 .e-con {
    --container-max-width: 100%;
}


/* ============================================================================
   SECTION 1 — Drop cap on Letter section
   v4 atomic can't express ::first-letter. Float the first letter of the
   leadership letter as a Playfair brand-blue cap.
   ============================================================================ */

.tomlin-home-letter__body::first-letter {
    float: left;
    font-size: 6rem;
    line-height: 0.8;
    color: var(--tomlin-blue);
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    margin-right: 0.75rem;
    margin-top: 0.5rem;
}


/* ============================================================================
   SECTION 2 — Quote pull marks (::before / ::after)
   v4 atomic can't express decorative pseudo-element glyphs.
   ============================================================================ */

.tomlin-home-quote__text {
    position: relative;
    padding: 0 2.5rem;
}
.tomlin-home-quote__text::before,
.tomlin-home-quote__text::after {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 5rem;
    line-height: 1;
    color: var(--tomlin-blue);
    opacity: 0.3;
    position: absolute;
}
.tomlin-home-quote__text::before {
    content: '\201C';  /* opening curly quote */
    top: -1.5rem;
    left: -0.5rem;
}
.tomlin-home-quote__text::after {
    content: '\201D';  /* closing curly quote */
    bottom: -3rem;
    right: -0.5rem;
}


/* ============================================================================
   SECTION 3 — Timeline dots on Milestones
   v4 atomic can't express ::before with absolute positioning. Each milestone
   gets a 8px brand-blue dot anchored above it on the horizontal rail.
   ============================================================================ */

/* Milestones — per concept HTML: horizontal-scrolling rail, 16rem cards,
   continuous brand-blue hairline rule across the track with timeline dots
   above each year. Cards overflow viewport on the right (scroll to see all). */
.tomlin-home-milestones__rail {
    position: relative;
    overflow-x: auto;
    scrollbar-width: none;
    cursor: grab;
}
.tomlin-home-milestones__rail::-webkit-scrollbar { display: none; }
.tomlin-home-milestones__rail:active { cursor: grabbing; }
.tomlin-home-milestones__rail::before {
    content: '';
    position: absolute;
    top: 2rem;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(0,110,200,0.3);
    min-width: 1200px;
    pointer-events: none;
}
.tomlin-milestone {
    position: relative;
}
.tomlin-milestone::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: var(--tomlin-blue);
    border-radius: 50%;
    top: -4px;
    left: 0;
}


/* ============================================================================
   SECTION 4 — Magazine card hover effects (industries + guides)
   v4 atomic can't express hover state transitions. Lift card on hover with
   a subtle shadow + scale the inner background image for a parallax feel.
   ============================================================================ */

.tomlin-industry-tile,
.tomlin-guide-card {
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    cursor: pointer;
}
.tomlin-industry-tile:hover,
.tomlin-guide-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(2, 54, 123, 0.2);
}


/* ============================================================================
   SECTION 5 — Button utility classes (named hooks for atomic e-button widgets)

   Elementor v4's e-button widget injects a default solid-blue background that
   wins over atomic `bg_color("#00000000")` settings via specificity. We
   override at the utility-class level for two variants:
     - .tomlin-btn-outline → transparent fill, 1px currentColor border (pill)
     - .tomlin-btn-arrow   → no fill, no border (text-arrow link)
   The CTA section variant (white outline on navy) is a context override below.
   ============================================================================ */

a.tomlin-btn-outline,
.tomlin-btn-outline.e-button,
.tomlin-btn-outline > a,
.tomlin-btn-outline a.elementor-button {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid currentColor !important;
    box-shadow: none !important;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
a.tomlin-btn-outline:hover,
.tomlin-btn-outline.e-button:hover,
.tomlin-btn-outline > a:hover {
    background: #fff !important;
    color: var(--tomlin-navy) !important;
    border-color: #fff !important;
}

a.tomlin-btn-arrow,
.tomlin-btn-arrow.e-button,
.tomlin-btn-arrow > a,
.tomlin-btn-arrow a.elementor-button {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    transition: color 0.3s, transform 0.3s;
}
a.tomlin-btn-arrow:hover,
.tomlin-btn-arrow > a:hover {
    color: var(--tomlin-eyebrow-blue) !important;
}

/* CTA section context override — outline pill in navy section is WHITE outline.
   Needs explicit padding + radius because the parent override strips them. */
body.page-id-866 .tomlin-home-cta a.tomlin-btn-outline,
body.page-id-866 .tomlin-home-cta .tomlin-btn-outline.e-button,
body.page-id-866 .tomlin-home-cta .tomlin-btn-outline > a {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid #fff !important;
    color: #fff !important;
    padding: 1.125rem 2.5rem !important;
    border-radius: 999px !important;
}
body.page-id-866 .tomlin-home-cta a.tomlin-btn-outline:hover,
body.page-id-866 .tomlin-home-cta .tomlin-btn-outline > a:hover {
    background: #fff !important;
    background-color: #fff !important;
    color: var(--tomlin-navy) !important;
}

/* Hero context — outline pill keeps Heebo padding + radius even when stripped
   of background. Atomic styles set typography + tracking; this restores chrome. */
body.page-id-866 .tomlin-home-hero a.tomlin-btn-outline,
body.page-id-866 .tomlin-home-hero .tomlin-btn-outline.e-button,
body.page-id-866 .tomlin-home-hero .tomlin-btn-outline > a {
    border: 1px solid rgba(255,255,255,0.5) !important;
    color: #fff !important;
    padding: 0.875rem 2rem !important;
    border-radius: 999px !important;
}


/* ============================================================================
   SECTION 6 — Reusable utility classes (block editor + Elementor)
   Named hooks for atomic widgets that share visual treatments across sections.
   ============================================================================ */

.tomlin-eyebrow {
    font-family: 'Heebo', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tomlin-blue);
    display: inline-block;
}

.tomlin-script {
    font-family: 'Amsterdam Four', 'Pinyon Script', cursive;
    font-style: italic;
    font-weight: 400;
    color: var(--tomlin-blue);
}

/* ---------------------------------------------------------------------------
   IN-PAGE EYEBROWS — "Header 4" per the UX Style Guide (Alicia, 2026-07-17).
   12pt uppercase letterspaced brand blue.

   THIS REVERSES the S27 sitewide-Amsterdam pass (quick-pass 2026-06-25). The
   UX Style Guide scopes the Amsterdam script to the HERO "Page Title Eyebrow"
   ONLY (26pt); every in-page section eyebrow is the 12pt uppercase style. S27
   applied Amsterdam to both, which is why those eyebrows needed sizing up to
   ~44-64px to stay legible — the style guide's answer is that they were never
   meant to be script below the hero.

   Hero + page-title eyebrows are NOT affected: the Home hero eyebrow is
   `.s-hero-eyebrow` (atomic-styled, never carried this class) and the
   Services/Industries/Careers-detail page headers use `.tib-ghead__eyebrow`
   (SECTION 34) — both keep Amsterdam by design.

   The class name `.tib-eyebrow-amsterdam` is now a misnomer but is retained
   deliberately: it is emitted by tomlin_atomic.paragraph() and baked into the
   stored _elementor_data of every live page. Renaming it would require
   re-applying every page builder for zero visual gain. Treat it as "the
   in-page eyebrow hook". Style-guide values are stated here explicitly rather
   than inherited so this rule is self-describing.
   --------------------------------------------------------------------------- */
.tib-eyebrow-amsterdam,
p.tib-eyebrow-amsterdam {
    font-family: 'Heebo', sans-serif !important;
    font-style: normal !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.18em !important;
    font-size: 0.75rem !important;   /* 12px — style guide "in-page eyebrow" */
    line-height: 1.4 !important;
}
/* Foundry Guides hub eyebrows (hero, featured, related) — the hub's own
   section kickers follow the same in-page rule. Child-theme override so the
   neutral plugin CSS stays untouched. */
.foundry-guides-hero__eyebrow,
.foundry-guides-featured__eyebrow,
.foundry-guide-related__eyebrow {
    font-family: 'Heebo', sans-serif !important;
    font-style: normal !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.18em !important;
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
}
/* Guide CARD eyebrow = the style guide's "CATEGORY" token (12pt uppercase
   blue above a Playfair 26pt Post/Service Title). Alicia marked the script
   version "No" and the CATEGORY version "Yes" on both the Guides hub and the
   Home guide cards. */
.foundry-guide-card__eyebrow {
    font-family: 'Heebo', sans-serif !important;
    font-style: normal !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.18em !important;
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
    color: var(--tomlin-blue) !important;
}


/* ============================================================================
   SECTION 7 — Industries + guides grid display correction
   v4 atomic e-flexbox doesn't expose CSS grid. For the magazine industries
   grid we want a true 5-col × 2-row grid (not flex wrap). Force grid here.
   ============================================================================ */

/* Magazine-irregular industries layout — 3 cols × 4 rows matching concept,
   with proprietors + regional as tall tiles spanning 2 rows each for
   editorial weight. Order in HTML: hotels, construction, propr, real-estate,
   commercial, regional, hospitality, supermarkets, government, marine —
   assigned to grid-areas by tile slug class. */
body.page-id-866 .e-con.tomlin-home-industries__grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 400px;
    grid-template-areas:
        "hotels      construction propr"
        "real-estate commercial   propr"
        "regional    hospitality  supermarkets"
        "regional    government   marine";
    gap: 1.5rem;
    max-width: var(--tomlin-max);
    margin: 0 auto;
}
/* Hide caption text overflow per concept (`truncate` Tailwind util) */
body.page-id-866 .tomlin-industry-tile__caption {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.page-id-866 .tomlin-industry-tile--hotels       { grid-area: hotels; }
body.page-id-866 .tomlin-industry-tile--construction { grid-area: construction; }
body.page-id-866 .tomlin-industry-tile--proprietors  { grid-area: propr; }
body.page-id-866 .tomlin-industry-tile--real-estate  { grid-area: real-estate; }
body.page-id-866 .tomlin-industry-tile--commercial   { grid-area: commercial; }
body.page-id-866 .tomlin-industry-tile--regional     { grid-area: regional; }
body.page-id-866 .tomlin-industry-tile--hospitality  { grid-area: hospitality; }
body.page-id-866 .tomlin-industry-tile--supermarkets { grid-area: supermarkets; }
body.page-id-866 .tomlin-industry-tile--government   { grid-area: government; }
body.page-id-866 .tomlin-industry-tile--marine       { grid-area: marine; }

@media (max-width: 1100px) {
    body.page-id-866 .e-con.tomlin-home-industries__grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: none;
        grid-template-areas: none;
    }
    body.page-id-866 .tomlin-industry-tile { grid-area: auto !important; }
}
@media (max-width: 600px) {
    body.page-id-866 .e-con.tomlin-home-industries__grid {
        grid-template-columns: 1fr;
    }
}

body.page-id-866 .e-con.tomlin-home-guides__grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: var(--tomlin-max);
    margin: 0 auto;
}

/* Hairline rule above the Intelligence & Briefings heading row — concept
   editorial divider. Atomic v4 doesn't support a 1px-height e-con reliably. */
body.page-id-866 .e-con.tomlin-home-guides__hairline {
    border-top: 1px solid rgba(0,110,200,0.3);
    min-height: 1px;
    height: 1px;
    padding: 0 !important;
}

/* Guide-card chip — white pill behind brand-blue category text. Per concept:
   inline-block so pill sits behind text only, not full card width. */
body.page-id-866 .tomlin-guide-chip {
    display: inline-block;
    align-self: flex-start;
    border-radius: 0;
}

/* Hero script accent — concept has a -2deg rotation and 0.9 opacity on the
   "Independent" Amsterdam Three lockup for editorial signature feel. */
body.page-id-866 .tomlin-home-hero__script {
    transform: rotate(-2deg);
    opacity: 0.92;
}
@media (max-width: 900px) {
    body.page-id-866 .e-con.tomlin-home-guides__grid {
        grid-template-columns: 1fr;
    }
}

body.page-id-866 .e-con.tomlin-home-clients__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    align-items: center;
    justify-content: center;
}


/* ============================================================================
   SECTION 8 — Responsive collapse for 50/50 split sections
   The atomic build creates approach + featured as 50/50 row flex; collapse
   to single column on mobile.
   ============================================================================ */

@media (max-width: 900px) {
    body.page-id-866 .e-con.tomlin-home-approach,
    body.page-id-866 .e-con.tomlin-home-featured {
        flex-direction: column !important;
    }
    body.page-id-866 .e-con.tomlin-home-approach > .e-con,
    body.page-id-866 .e-con.tomlin-home-featured > .e-con {
        width: 100% !important;
    }
}


/* ============================================================================
   SECTION 10 — Sitewide header (Theme Builder template 887)
   Sticky + backdrop-blur on scroll. Atomic settings handle layout/typography.
   ============================================================================ */

.tomlin-site-header.e-con {
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    background-color: rgba(255, 255, 255, 0.85) !important;
    border-bottom: 1px solid rgba(2, 54, 123, 0.08);
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.tomlin-site-header.e-con.is-scrolled {
    box-shadow: 0 4px 24px rgba(2, 54, 123, 0.08);
    background-color: rgba(255, 255, 255, 0.95) !important;
}

/* Nav text-link buttons — override Elementor's default solid-blue e-button bg.
   These are e-button widgets styled to look like nav text links. */
.tomlin-site-header__nav-item,
.tomlin-site-header__nav-item.e-button,
a.tomlin-site-header__nav-item {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--tomlin-navy) !important;
    padding: 0.25rem 0 !important;
    white-space: nowrap !important;
    transition: color 0.3s ease;
}

/* Header nav container — tighter gap so 7 items + CTA fit at 1280px */
.tomlin-site-header__nav.e-flexbox {
    gap: 1.75rem !important;
}
.tomlin-site-header__cta-btn,
a.tomlin-site-header__cta-btn {
    white-space: nowrap !important;
}

/* Outer header section — defeat e-flexbox-base's default width:100% on children.
   Brand + CTA size to content (auto), nav fills available space (1 1 auto). */
.tomlin-site-header.e-con > .tomlin-site-header__brand {
    flex: 0 0 auto !important;
    width: auto !important;
}
.tomlin-site-header.e-con > .tomlin-site-header__nav {
    flex: 1 1 auto !important;
    width: auto !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
}
.tomlin-site-header.e-con > .tomlin-site-header__cta {
    flex: 0 0 auto !important;
    width: auto !important;
}
.tomlin-site-header__nav-item:hover,
a.tomlin-site-header__nav-item:hover {
    color: var(--tomlin-blue) !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* CTA outline pill — transparent default, navy fill on hover */
.tomlin-site-header__cta-btn,
.tomlin-site-header__cta-btn.e-button,
a.tomlin-site-header__cta-btn {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--tomlin-navy) !important;
    color: var(--tomlin-navy) !important;
    box-shadow: none !important;
    transition: background-color 0.3s, color 0.3s;
}
.tomlin-site-header__cta-btn:hover,
a.tomlin-site-header__cta-btn:hover {
    background: var(--tomlin-navy) !important;
    background-color: var(--tomlin-navy) !important;
    color: #fff !important;
}

/* Responsive collapse: hide nav on mobile (true off-canvas nav in next pass) */
@media (max-width: 1100px) {
    .tomlin-site-header__nav {
        display: none;
    }
}


/* ============================================================================
   SECTION 9 — Tile + card gradient mask (active)
   The atomic image-overlay validator only handles a flat color overlay (per
   gotcha #18). For dark-bottom legibility we layer a CSS linear-gradient on a
   child pseudo-element so the photo reads at the top and the text reads at
   the bottom — magazine-style mask. Activated in Session 6 after QA flagged
   low contrast on some tile labels. */
.tomlin-industry-tile,
.tomlin-guide-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
/* Bottom-up navy gradient mask — concept HTML uses
   `bg-navy + img.opacity-80` (a solid-color base behind the photo) PLUS this
   gradient. We layer:
     (1) 20%-navy tint over the photo via att_with_overlay (build script)
     (2) this ::before bottom-up gradient mask for content legibility
   Stronger stop at 50%/60% than the concept's 95→40→0 because v4 atomic can't
   replicate the `<img opacity-80>` element approach exactly; the extra mask
   compensates for the photo bleeding through at the bottom. */
.tomlin-industry-tile::before,
.tomlin-guide-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
        to top,
        rgba(2,54,123,0.92) 0%,
        rgba(2,54,123,0.6) 50%,
        rgba(2,54,123,0.1) 100%
    );
    pointer-events: none;
    z-index: 0;
}
/* Tall tiles (Proprietors, Regional) — softer mask so the photo dominates */
.tomlin-industry-tile--proprietors::before,
.tomlin-industry-tile--regional::before {
    background-image: linear-gradient(
        to top,
        rgba(2,54,123,0.92) 0%,
        rgba(2,54,123,0.35) 65%,
        rgba(2,54,123,0) 100%
    );
}
.tomlin-industry-tile > *,
.tomlin-guide-card > * {
    position: relative;
    z-index: 1;
}


/* ============================================================================
   SECTION 11 — Hero subhead borders + content legibility gradient
   v4 atomic doesn't expose individual border sides (top + bottom only) for
   e-paragraph containers. Anchor the borders on the hero subhead utility
   class. Plus a left-anchored navy gradient layer so the white subhead +
   buttons read against the bright sailboat-sky portion of the photo. */
body.page-id-866 .tomlin-home-hero__subhead {
    border-top: 1px solid rgba(255,255,255,0.25);
    border-bottom: 1px solid rgba(255,255,255,0.25);
}

body.page-id-866 .tomlin-home-hero {
    position: relative;
    isolation: isolate;
}
body.page-id-866 .tomlin-home-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(2, 54, 123, 0.75) 0%,
        rgba(2, 54, 123, 0.65) 45%,
        rgba(2, 54, 123, 0.25) 75%,
        rgba(2, 54, 123, 0.05) 100%
    );
    pointer-events: none;
    z-index: 0;
}
body.page-id-866 .tomlin-home-hero > * {
    position: relative;
    z-index: 1;
}


/* ============================================================================
   SECTION 12 — Milestones titles forced mixed-case
   The base `body h4` rule cascades text-transform onto e-heading h4 inside
   milestone cards. Atomic typography sets text-transform=none but loses to
   the body-level rule. Force here. */
body.page-id-866 .tomlin-milestone h4,
body.page-id-866 .tomlin-milestone .e-heading {
    text-transform: none !important;
}


/* ============================================================================
   SECTION 14 — CTA section (concept-HTML structural match)
   Concept HTML lines 678-712:
     - Section is `relative overflow-hidden bg-navy`
     - 'Let's talk' script is an ABSOLUTE-positioned watermark at top-left,
       brand-blue color, opacity 0.3, rotated -5deg
     - Main content `max-w-[800px] mx-auto px-6 text-center flex flex-col items-center`
     - Offices are a 2-col grid with top-border separator, cards text-left
   v4 atomic flex-items-center doesn't fully cascade through Elementor's
   e-button wrapper; force align-self on each direct child.
   ============================================================================ */
body.page-id-866 .tomlin-home-cta {
    position: relative;
    overflow: hidden;
}
body.page-id-866 .tomlin-home-cta__deco {
    position: absolute !important;
    top: 4rem;
    left: 2.5rem;
    transform: rotate(-5deg);
    opacity: 0.3;
    pointer-events: none;
    z-index: 0;
    margin: 0 !important;
}
@media (min-width: 1024px) {
    body.page-id-866 .tomlin-home-cta__deco {
        left: 6rem;
    }
}
/* Force-center every direct child of the inner content stack — v4 e-button
   defaults to align-self: stretch which left-flushes against align-items:center
   on the parent. */
/* SITEWIDE FIX: Atomic v4 `flexbox_layout()` helper emits flex-direction +
   align-items + justify-content + gap, but NEVER `display: flex`. Without it
   those properties are no-ops and children fall back to block flow — inline
   elements (<a class="e-button">, plain text) won't center, and explicitly
   centered children (max-width + margin-auto) inherit nothing useful.

   Every Tomlin section container that uses flexbox_layout() in the build
   script needs display:flex forced via CSS. Naming convention `__inner` /
   `__outer` / `__header` / `__rail` / `__content` / `__track` covers it. */
body.home .e-con[class*="tomlin-home-"][class*="__inner"],
body.home .e-con[class*="tomlin-home-"][class*="__outer"],
body.home .e-con[class*="tomlin-home-"][class*="__header"],
body.home .e-con[class*="tomlin-home-"][class*="__content"],
body.home .e-con[class*="tomlin-home-"][class*="__rail"],
body.home .e-con[class*="tomlin-home-"][class*="__track"] {
    display: flex !important;
}

body.page-id-866 .tomlin-home-cta__inner {
    position: relative;
    z-index: 1;
    /* CTA inner needs explicit max-width + auto margins (the global
       `.e-con { --container-max-width: 100% }` rule defeats atomic max-width). */
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
body.page-id-866 .tomlin-home-cta__inner > * {
    align-self: center;
}
body.page-id-866 .tomlin-home-cta__inner > .tomlin-home-cta__offices {
    align-self: stretch;
}
/* Elementor wraps e-button in a 100%-wide flex item — `align-self: center` on
   the wrapper doesn't help the `<a class="e-button">` inside. Force margin
   auto on the actual button element so it visually centers within the wrapper. */
body.page-id-866 .tomlin-home-cta__inner .e-button,
body.page-id-866 .tomlin-home-cta__inner a.e-button,
body.page-id-866 .tomlin-home-cta__inner > .e-button {
    margin-left: auto !important;
    margin-right: auto !important;
    display: inline-flex !important;
}
/* Offices: 2-col grid with top-border separator per concept */
body.page-id-866 .e-con.tomlin-home-cta__offices {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 5rem;
    row-gap: 2.5rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}
@media (max-width: 768px) {
    body.page-id-866 .e-con.tomlin-home-cta__offices {
        grid-template-columns: 1fr;
    }
}


/* ============================================================================
   SECTION 13 — Client logo grid (Trusted By)
   Grayscale + reduced-opacity treatment over real client logo images. v4
   atomic doesn't expose CSS filter. */
body.page-id-866 .tomlin-home-clients__grid img {
    filter: grayscale(100%);
    opacity: 0.65;
    max-width: 140px;
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: opacity 0.3s ease;
}
body.page-id-866 .tomlin-home-clients__grid img:hover {
    opacity: 1;
}


/* ============================================================================
   SECTION 18 — Approach steps (Session 9 visual redesign)
   Per Gemini concept variant D2 SECTION 5: each step's number floats absolute
   left, italic Playfair, brand-blue 80%; title + body align past a 60px
   left-padding gutter. The atomic-widgets builder gives us the markup; this
   rule supplies position + italic + spacing that the v4 control surface
   doesn't expose.

   Scoped to .s-approach-step (page-agnostic since this class is generated
   from the page_home.py builder element_id).
   ============================================================================ */
.s-approach-step {
    position: relative;
    padding-left: 60px !important;
    min-height: 72px;
}

/* First-child paragraph in a step IS the number — absolute-position it left. */
.s-approach-step > .e-paragraph-base:first-child {
    position: absolute !important;
    left: 0;
    top: -8px;
    font-style: italic !important;
    line-height: 1 !important;
}

/* Add breathing room between steps so the 2-col grid reads as a list, not a wall */
body .s-approach-step {
    margin-bottom: 32px;
}

/* ============================================================================
   SECTION 19 — Letter from Leadership body drop-cap (optional polish)
   Drop the first letter of the leadership body paragraph as a decorative
   Playfair display capital. Adds visual entry into the editorial section.
   ============================================================================ */
.s-summary .e-paragraph-base:nth-of-type(4)::first-letter {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 4.5rem;
    font-weight: 500;
    color: #02367B;
    float: left;
    line-height: 0.85;
    margin: 0.1em 0.12em 0 0;
}

/* ============================================================================
   SECTION 20 — About page Milestones vertical timeline
   Tomlin's reference: date LEFT, circular brand-blue icon MIDDLE on a
   continuous vertical line, milestone copy RIGHT. The line is drawn behind
   the icon column via an absolutely-positioned ::before on the rail wrapper.
   Date col 140px + icon col 100px (icons sit centered) + content col flex-1.
   ============================================================================ */
.s-milestones-rail {
    position: relative;
}
/* Continuous vertical line — positioned at the icon-column center.
   left = date col (140) + half icon col (50) + small offset for spacing. */
.s-milestones-rail::before {
    content: "";
    position: absolute;
    top: 32px;
    bottom: 32px;
    left: 190px;
    width: 2px;
    background: rgba(2, 113, 206, 0.35);
    z-index: 0;
    pointer-events: none;
}
.s-milestone-row {
    position: relative;
    z-index: 1;
}
.s-milestone-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--tomlin-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 6px #FAFAF8;
    flex-shrink: 0;
}
.s-milestones .s-milestone-icon svg {
    width: 28px;
    height: 28px;
    display: block;
}
/* Tablet: shorten the date column to match (matches page_about.py responsive override). */
@media (max-width: 1024px) {
    .s-milestones-rail::before { left: 170px; }
}
/* Mobile: stack date + icon + copy into a single column, line shifts to the
   far left as a single-column rail. */
@media (max-width: 720px) {
    .s-milestones-rail::before {
        left: 31px;
        top: 16px;
        bottom: 16px;
    }
    .s-milestone-icon {
        width: 48px;
        height: 48px;
        box-shadow: 0 0 0 4px #FAFAF8;
    }
    .s-milestones .s-milestone-icon svg {
        width: 22px;
        height: 22px;
    }
}

/* ============================================================================
   SECTION 21 — Team v2 page (post 916 /team-v2/)
   Translation of Gemini concept docs/design-explorations/06-team-concept-tw-v2.html
   to vanilla CSS. Uniform grid + hover overlay + slide-in modal.
   ============================================================================ */

/* Heritage strip — italic Playfair, two offices on one line with vertical divider */
.tib-team-heritage {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 1rem;
    color: #1A1A1A;
    text-align: center;
}
.tib-team-heritage__divider {
    width: 1px;
    height: 18px;
    background: rgba(2, 54, 123, 0.35);
}

/* Team grid — uniform 6-col Barbados, 5-col Antigua */
.tib-team-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.25rem;
    width: 100%;
}
.tib-team-grid--antigua {
    grid-template-columns: repeat(5, 1fr);
    max-width: 1000px;
    margin: 0 auto;
}
@media (max-width: 1024px) {
    .tib-team-grid,
    .tib-team-grid--antigua {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }
}
@media (max-width: 640px) {
    .tib-team-grid,
    .tib-team-grid--antigua {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}

/* Member card — square portrait with hover overlay reveal */
.tib-team-member {
    position: relative;
    aspect-ratio: 1 / 1;
    cursor: pointer;
    overflow: hidden;
    background: rgba(2, 54, 123, 0.06);
    outline: 0;
    transition: transform 0.4s ease;
}
.tib-team-member:focus-visible {
    outline: 2px solid var(--tomlin-blue);
    outline-offset: 2px;
}
.tib-team-member img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    filter: grayscale(28%);
    transition: filter 0.55s ease, transform 0.7s ease;
    display: block;
}
.tib-team-member:hover img {
    filter: grayscale(0%);
    transform: scale(1.04);
}
.tib-team-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(2, 54, 123, 0.92) 0%, rgba(2, 54, 123, 0.38) 55%, transparent 100%);
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.tib-team-member:hover .tib-team-overlay {
    opacity: 1;
}
.tib-team-name {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 1.2;
    color: #ffffff;
    transform: translateY(0.5rem);
    opacity: 0;
    transition: transform 0.5s ease 0.05s, opacity 0.5s ease 0.05s;
}
.tib-team-role {
    font-family: 'Heebo', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #90C4F0;
    margin-top: 0.4rem;
    transform: translateY(0.5rem);
    opacity: 0;
    transition: transform 0.5s ease 0.12s, opacity 0.5s ease 0.12s;
}
.tib-team-member:hover .tib-team-name,
.tib-team-member:hover .tib-team-role {
    transform: translateY(0);
    opacity: 1;
}

/* Modal — slide-in from right, 50/50 split bio left + photo right */
.tib-team-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    z-index: 9998;
    display: flex;
    justify-content: flex-end;
}
.tib-team-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}
.tib-team-modal__panel {
    position: relative;
    width: min(100%, 1100px);
    height: 100%;
    background: #FAFAF8;
    transform: translateX(100%);
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow-y: auto;
}
.tib-team-modal.is-open .tib-team-modal__panel {
    transform: translateX(0);
}
.tib-team-modal__body {
    padding: 4rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #FAFAF8;
}
.tib-team-modal__role {
    font-family: 'Heebo', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tomlin-blue);
    margin-bottom: 0.75rem;
}
.tib-team-modal__name {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2.5rem;
    font-weight: 500;
    color: #02367B;
    line-height: 1.1;
    margin: 0 0 2rem 0;
}
.tib-team-modal__bio {
    font-family: 'Heebo', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.75;
    color: #1A1A1A;
    white-space: pre-line;
}
.tib-team-modal__photo {
    background-size: cover;
    background-position: center top;
    background-color: #02367B;
    min-height: 100%;
}
.tib-team-modal__close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: #02367B;
    z-index: 2;
    transition: background 0.2s ease;
}
.tib-team-modal__close:hover {
    background: #ffffff;
}
body.tib-modal-open {
    overflow: hidden;
}
@media (max-width: 900px) {
    .tib-team-modal__panel {
        grid-template-columns: 1fr;
        grid-template-rows: 40vh 1fr;
    }
    .tib-team-modal__photo {
        order: -1;
    }
    .tib-team-modal__body {
        padding: 2.5rem 1.75rem 3rem;
    }
    .tib-team-modal__name {
        font-size: 2rem;
        margin-bottom: 1.25rem;
    }
}

/* ============================================================================
   SECTION 22 — About v2 page (post 917 /about-v2/)
   Alternating left/right milestone timeline with center brand-blue rail.
   Even rows: date LEFT, body RIGHT. Odd rows: body LEFT, date RIGHT.
   Founding entry includes a small photo callout under its body.
   Mobile collapses to single-column left-rail layout.
   ============================================================================ */
.tib-mile-rail {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem 0;
}
.tib-mile-rail::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(2, 113, 206, 0.25);
    transform: translateX(-50%);
}
.tib-mile {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    margin-bottom: 5.5rem;
    align-items: start;
}
.tib-mile:last-child {
    margin-bottom: 0;
}
.tib-mile__date {
    font-family: 'Heebo', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tomlin-blue);
    padding-top: 0.25rem;
}
.tib-mile__body {
    font-family: 'Heebo', sans-serif;
}
.tib-mile__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2rem;
    font-weight: 500;
    color: #02367B;
    margin: 0 0 1rem 0;
    line-height: 1.2;
}
.tib-mile__copy {
    font-family: 'Heebo', sans-serif;
    font-weight: 300;
    font-size: 1.1rem;
    line-height: 1.7;
    color: rgba(26, 26, 26, 0.72);
    margin: 0 0 1.5rem 0;
}
.tib-mile__node {
    position: absolute;
    left: 50%;
    top: 0.5rem;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--tomlin-blue);
    transform: translateX(-50%);
    box-shadow: 0 0 0 6px #FFFFFF, 0 0 0 8px rgba(2, 113, 206, 0.15);
    z-index: 2;
}
/* Even rows (left-side dates): date right-aligned in left col, body in right col */
.tib-mile--left .tib-mile__date {
    grid-column: 1;
    text-align: right;
    padding-right: 3rem;
}
.tib-mile--left .tib-mile__body {
    grid-column: 2;
    padding-left: 3rem;
    text-align: left;
}
/* Odd rows: body left, date right */
.tib-mile--right .tib-mile__body {
    grid-column: 1;
    padding-right: 3rem;
    text-align: right;
}
.tib-mile--right .tib-mile__date {
    grid-column: 2;
    text-align: left;
    padding-left: 3rem;
}
.tib-mile--right .tib-mile__title,
.tib-mile--right .tib-mile__copy {
    text-align: right;
}
/* Founding photo callout */
.tib-mile-callout {
    width: 14rem;
    height: 17rem;
    overflow: hidden;
    border-radius: 1.5rem;
    box-shadow: 0 12px 32px rgba(2, 54, 123, 0.12);
    margin-top: 1rem;
}
.tib-mile-callout img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    filter: grayscale(20%);
    transition: filter 0.7s ease, transform 0.7s ease;
}
.tib-mile:hover .tib-mile-callout img {
    filter: grayscale(0%);
    transform: scale(1.04);
}
.tib-mile--right .tib-mile-callout {
    margin-left: auto;
}
/* Icon badge (S23 #6) — replaces the photo callout. A fixed-width block, so
   margin-left:auto right-aligns it on the right-side (odd) timeline entries. */
.tib-mile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #E8F1FB;
    color: var(--tomlin-blue);
    font-size: 26px;
    margin: 0 0 1.25rem 0;
}
.tib-mile-icon iconify-icon { display: block; }
.tib-mile--right .tib-mile-icon { margin-left: auto; }
@media (max-width: 768px) {
    .tib-mile-rail::before {
        left: 16px;
        transform: none;
    }
    .tib-mile--right .tib-mile-icon { margin-left: 0; }
    .tib-mile {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        padding-left: 3rem;
        margin-bottom: 3.5rem;
    }
    .tib-mile__node {
        left: 16px;
        transform: none;
        box-shadow: 0 0 0 4px #FFFFFF, 0 0 0 6px rgba(2, 113, 206, 0.15);
    }
    .tib-mile--left .tib-mile__date,
    .tib-mile--right .tib-mile__date {
        grid-column: 1;
        text-align: left;
        padding: 0;
    }
    .tib-mile--left .tib-mile__body,
    .tib-mile--right .tib-mile__body {
        grid-column: 1;
        padding: 0;
        text-align: left;
    }
    .tib-mile--right .tib-mile__title,
    .tib-mile--right .tib-mile__copy {
        text-align: left;
    }
    .tib-mile-callout {
        width: 100%;
        height: 14rem;
    }
    .tib-mile--right .tib-mile-callout {
        margin-left: 0;
    }
}

/* ============================================================================
   SECTION 23 — Make a Complaint v2 page (post 918 /make-a-complaint-v2/)
   Editorial italic-Playfair numbers float left of each step's content.
   2-col grid on desktop, single col on mobile.
   ============================================================================ */

/* Hero h1 with italic accent on "concern." */
.tib-complaint-h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2.5rem, 6vw, 5.5rem);
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    line-height: 1.05;
    letter-spacing: -0.01em;
}
.tib-complaint-h1__accent {
    font-style: italic;
    font-weight: 400;
    color: #90C4F0;
}

/* Step grid */
.tib-step-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem 4rem;
    width: 100%;
}
.tib-step {
    display: grid;
    grid-template-columns: 6rem 1fr;
    gap: 1.5rem;
    align-items: start;
}
.tib-step__num {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 4.5rem;
    line-height: 1;
    color: var(--tomlin-blue);
    opacity: 0.85;
}
.tib-step__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.75rem;
    font-weight: 500;
    color: #02367B;
    line-height: 1.25;
    margin: 0.5rem 0 1rem 0;
}
.tib-step__copy {
    font-family: 'Heebo', sans-serif;
    font-weight: 300;
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(26, 26, 26, 0.72);
    margin: 0;
}
@media (max-width: 900px) {
    .tib-step-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}
@media (max-width: 480px) {
    .tib-step {
        grid-template-columns: 4.5rem 1fr;
        gap: 1rem;
    }
    .tib-step__num {
        font-size: 3.5rem;
    }
    .tib-step__title {
        font-size: 1.5rem;
    }
}

/* Office contact cards */
.tib-office-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    width: 100%;
}
.tib-office {
    background: #FAFAF8;
    padding: 2.5rem 2rem;
    text-align: center;
    border-top: 3px solid var(--tomlin-blue);
}
.tib-office__label {
    font-family: 'Heebo', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tomlin-blue);
    margin-bottom: 0.5rem;
}
.tib-office__phone {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2.25rem;
    font-weight: 500;
    color: #02367B;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}
.tib-office__addr {
    font-family: 'Heebo', sans-serif;
    font-size: 0.95rem;
    font-weight: 300;
    color: rgba(26, 26, 26, 0.65);
}
@media (max-width: 700px) {
    .tib-office-grid {
        grid-template-columns: 1fr;
    }
    .tib-office__phone {
        font-size: 1.9rem;
    }
}

/* ============================================================================
   SECTION 24 — Services v2 page (post 919 /services-v2/)
   S17 voice pass: 10 featured-solution photo cards (client-curated photos +
   Alicia's approved Airtable copy) + a 5-category "full range" directory of
   all 38 unique covers. Hero/subhero classes shared. Replaces the prior
   alternating left/right editorial blocks.
   ============================================================================ */

/* Hero h1 with italic accent on the last phrase */
.tib-svc-h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2.5rem, 6vw, 5.5rem);
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    line-height: 1.05;
    letter-spacing: -0.01em;
}
.tib-svc-h1__accent {
    font-style: italic;
    font-weight: 400;
    color: #90C4F0;
}

.tib-svc-subhero {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 1.25rem;
    color: #02367B;
    text-align: center;
    margin: 0;
    letter-spacing: 0;
}

/* --- Featured solutions: 3-col photo-card grid --- */
.tib-sol-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    width: 100%;
}
.tib-sol-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(2, 54, 123, 0.10);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.tib-sol-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 50px rgba(2, 54, 123, 0.18);
}
.tib-sol-card__img {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.tib-sol-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}
.tib-sol-card:hover .tib-sol-card__img img {
    transform: scale(1.05);
}
.tib-sol-card__body {
    padding: 1.75rem 1.75rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.tib-sol-card__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 500;
    color: #02367B;
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.01em;
}
.tib-sol-card__copy {
    font-family: 'Heebo', sans-serif;
    font-weight: 300;
    font-size: 0.98rem;
    line-height: 1.6;
    color: rgba(26, 26, 26, 0.70);
    margin: 0;
}

/* --- Full-range directory --- */
.tib-sol-index-head {
    text-align: center;
    margin-bottom: 3.25rem;
}
.tib-sol-index-head__eyebrow {
    font-family: 'Heebo', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--tomlin-blue);
    margin: 0 0 0.75rem;
}
.tib-sol-index-head__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 500;
    color: #02367B;
    line-height: 1.1;
    margin: 0;
    letter-spacing: -0.01em;
}
.tib-sol-index {
    column-count: 3;
    column-gap: 3rem;
    width: 100%;
}
.tib-sol-cat {
    break-inside: avoid;
    margin-bottom: 2.75rem;
}
.tib-sol-cat__head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding-bottom: 0.85rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid rgba(2, 113, 206, 0.22);
}
.tib-sol-cat__icon {
    color: var(--tomlin-blue);
    font-size: 1.4rem;
    flex-shrink: 0;
}
.tib-sol-cat__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #02367B;
    line-height: 1.2;
    margin: 0;
}
.tib-sol-cat__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.tib-sol-item__name {
    font-family: 'Heebo', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: #1A1A1A;
    margin: 0 0 0.15rem;
}
.tib-sol-item__copy {
    font-family: 'Heebo', sans-serif;
    font-weight: 300;
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(26, 26, 26, 0.60);
    margin: 0;
}
@media (max-width: 1024px) {
    .tib-sol-grid { grid-template-columns: repeat(2, 1fr); }
    .tib-sol-index { column-count: 2; }
}
@media (max-width: 640px) {
    .tib-sol-grid { grid-template-columns: 1fr; }
    .tib-sol-index { column-count: 1; }
}

/* ============================================================================
   SECTION 25 — Industries v2 page (post 920 /industries-v2/)
   3-col uniform grid of sector cards. 4:5 landscape photos with italic
   Playfair label bottom-left default state; navy gradient overlay reveals
   coverage summary on hover.
   ============================================================================ */

.tib-ind-h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2.5rem, 6vw, 5.5rem);
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    line-height: 1.05;
    letter-spacing: -0.01em;
}
.tib-ind-h1__accent {
    font-style: italic;
    font-weight: 400;
    color: #90C4F0;
}
.tib-ind-subhero {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 1.25rem;
    color: #02367B;
    text-align: center;
    margin: 0;
}

.tib-ind-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    width: 100%;
}
.tib-ind-card {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    cursor: pointer;
    background: rgba(2, 54, 123, 0.06);
    outline: 0;
}
.tib-ind-card:focus-visible {
    outline: 2px solid var(--tomlin-blue);
    outline-offset: 2px;
}
.tib-ind-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease, filter 0.5s ease;
    filter: brightness(0.92);
}
.tib-ind-card:hover img {
    transform: scale(1.05);
    filter: brightness(0.6);
}
.tib-ind-card__label {
    position: absolute;
    bottom: 1.25rem;
    left: 1.5rem;
    right: 1.5rem;
    z-index: 2;
    color: #ffffff;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    transition: opacity 0.35s ease;
}
.tib-ind-card__num {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 0.95rem;
    color: #90C4F0;
    opacity: 0.95;
}
.tib-ind-card__name {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: 1.35rem;
    line-height: 1.2;
    color: #ffffff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.tib-ind-card:hover .tib-ind-card__label {
    opacity: 0;
}
.tib-ind-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(to top, rgba(2, 54, 123, 0.95) 0%, rgba(2, 54, 123, 0.6) 60%, rgba(2, 54, 123, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.45s ease;
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #ffffff;
}
.tib-ind-card:hover .tib-ind-card__overlay,
.tib-ind-card:focus-visible .tib-ind-card__overlay {
    opacity: 1;
}
.tib-ind-card__h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.25;
    margin: 0 0 0.85rem 0;
    color: #ffffff;
}
.tib-ind-card__summary {
    font-family: 'Heebo', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.7;
    color: #90C4F0;
    margin: 0;
}
@media (max-width: 1024px) {
    .tib-ind-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .tib-ind-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .tib-ind-card {
        aspect-ratio: 3 / 4;
    }
}

/* ============================================================================
   SECTION 26 — Contact v2 page (post 921 /contact-v2/)
   Hero + 2-col offices with photo + business hours strip + sticky-context
   form band embedding Gravity Form #1 + closing promise CTA.
   ============================================================================ */

/* hero h1 italic accent (matches /industries-v2/, /complaint-v2/) */
.tib-contact-h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 500;
    color: #FFFFFF;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0;
}
.tib-contact-h1__accent {
    font-style: italic;
    font-weight: 400;
    color: #90C4F0;
}

/* offices grid — two columns, photo + body each */
.tib-contact-offices {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 80px;
    width: 100%;
}
@media (max-width: 900px) {
    .tib-contact-offices { grid-template-columns: 1fr; gap: 48px; }
}

.tib-contact-office {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}
@media (max-width: 640px) {
    .tib-contact-office { flex-direction: column; gap: 20px; }
}

.tib-contact-office__photo {
    flex: 0 0 200px;
    width: 200px;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    overflow: hidden;
    background: #FAFAF8;
    position: relative;
}
@media (max-width: 640px) {
    .tib-contact-office__photo {
        flex: 0 0 auto;
        width: 100%;
        aspect-ratio: 16 / 9;
    }
}
.tib-contact-office__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(20%);
    transition: filter 0.6s ease, transform 0.7s ease;
}
.tib-contact-office:hover .tib-contact-office__photo img {
    filter: grayscale(0);
    transform: scale(1.05);
}
.tib-contact-office__photo::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    pointer-events: none;
}
/* S23 #9 — Google Maps embed replaces the office photo (Alicia, PDF p.12). */
.tib-contact-office__map {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
/* the ::after border sits above the iframe and would eat map interactions —
   it's pointer-events:none, so clicks/drags still reach the map. */

.tib-contact-office__body { flex: 1; min-width: 0; padding-top: 4px; }

.tib-contact-office__row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.tib-contact-office__icon {
    font-size: 24px;
    color: var(--tomlin-blue);
    flex: 0 0 auto;
}
.tib-contact-office__name {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 28px;
    font-weight: 500;
    color: #02367B;
    line-height: 1.2;
    margin: 0;
}
.tib-contact-office__addr {
    font-family: 'Heebo', sans-serif;
    font-size: 17px;
    font-weight: 300;
    font-style: normal;
    color: rgba(26, 26, 26, 0.72);
    line-height: 1.6;
    margin: 0 0 22px;
}
.tib-contact-office__link {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Heebo', sans-serif;
    font-size: 17px;
    color: #1A1A1A;
    text-decoration: none;
    padding: 4px 0;
    transition: color 0.2s;
}
.tib-contact-office__link iconify-icon {
    color: rgba(2, 54, 123, 0.4);
    font-size: 18px;
    transition: color 0.2s;
}
.tib-contact-office__link:hover { color: var(--tomlin-blue); }
.tib-contact-office__link:hover iconify-icon { color: var(--tomlin-blue); }

/* hours strip — bordered, centered */
.tib-contact-hours {
    margin-top: 80px;
    padding: 28px 16px;
    border-top: 1px solid rgba(2, 54, 123, 0.06);
    border-bottom: 1px solid rgba(2, 54, 123, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    flex-wrap: wrap;
}
.tib-contact-hours iconify-icon {
    font-size: 22px;
    color: var(--tomlin-blue);
}
.tib-contact-hours p {
    font-family: 'Heebo', sans-serif;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(26, 26, 26, 0.6);
    margin: 0;
}
.tib-contact-hours__label { color: #02367B; font-weight: 500; }

/* form row — two-column with sticky left context */
.tib-contact-form-h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 4.4vw, 3.25rem);
    font-weight: 500;
    color: #02367B;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0;
}
.tib-contact-form-h2__accent {
    font-style: italic;
    font-weight: 400;
    color: var(--tomlin-blue);
}

/* Self-contained centered card per concept 14: rounded-2xl, soft editorial
   shadow, hairline border + a solid brand-blue top accent border. */
.tib-contact-form-card {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 56px;
    margin: 0 auto;
    box-shadow: 0 20px 40px -15px rgba(2, 54, 123, 0.07), 0 2px 10px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(107, 114, 128, 0.1);
    border-top: 4px solid var(--tomlin-blue);
    position: relative;
}
@media (max-width: 1024px) {
    .tib-contact-form-card { padding: 44px; }
}
@media (max-width: 640px) {
    .tib-contact-form-card { padding: 32px 22px; border-radius: 14px; }
}

/* Gravity Form editorial restyle */
.tib-contact-form-card .gform_wrapper {
    font-family: 'Heebo', sans-serif;
}
.tib-contact-form-card .gform_wrapper .gform_fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}
@media (max-width: 640px) {
    .tib-contact-form-card .gform_wrapper .gform_fields {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}
/* full-width fields — message, mailing list, captcha */
.tib-contact-form-card .gform_wrapper .gfield--type-textarea,
.tib-contact-form-card .gform_wrapper .gfield--type-checkbox,
.tib-contact-form-card .gform_wrapper .gfield--type-captcha {
    grid-column: 1 / -1;
}
/* honeypot anti-spam field must never occupy a grid cell */
.tib-contact-form-card .gform_wrapper .gform_validation_container,
.tib-contact-form-card .gform_wrapper .gfield--type-honeypot {
    display: none !important;
}

.tib-contact-form-card .gform_wrapper .gfield_label {
    font-family: 'Heebo', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: #1A1A1A;
    margin-bottom: 8px;
    display: block;
    transition: color 0.3s;
}
/* label tints brand-blue while its field is focused (concept group-focus-within) */
.tib-contact-form-card .gform_wrapper .gfield:focus-within .gfield_label { color: var(--tomlin-blue); }
.tib-contact-form-card .gform_wrapper .gfield_required {
    color: var(--tomlin-blue);
    margin-left: 6px;
    font-weight: 400;
    text-decoration: none;
}

/* Filled editorial fields (concept 14): offWhite box, hairline border,
   8px radius, focus lifts to white + brand-blue ring. Replaces the prior
   underline-only treatment Ryan flagged as sparse. */
.tib-contact-form-card .gform_wrapper input[type="text"],
.tib-contact-form-card .gform_wrapper input[type="email"],
.tib-contact-form-card .gform_wrapper textarea,
.tib-contact-form-card .gform_wrapper select {
    width: 100%;
    background: #FAFAF8;
    border: 1px solid rgba(107, 114, 128, 0.2);
    border-radius: 8px;
    padding: 14px 16px;
    font-family: 'Heebo', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #1A1A1A;
    line-height: 1.5;
    box-shadow: none;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
    appearance: none;
    -webkit-appearance: none;
}
.tib-contact-form-card .gform_wrapper textarea {
    min-height: 132px;
    resize: vertical;
}
.tib-contact-form-card .gform_wrapper select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 16px center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    padding-right: 44px;
    cursor: pointer;
    /* GF Orbital imposes a fixed --gf-ctrl-size height on selects; with our
       14px top/bottom padding that shrinks the content box and vertically
       clips the value. Let height grow to fit the padded line instead. */
    height: auto;
    min-height: 0;
    line-height: 1.5;
}
.tib-contact-form-card .gform_wrapper input::placeholder,
.tib-contact-form-card .gform_wrapper textarea::placeholder {
    color: rgba(107, 114, 128, 0.5);
    font-weight: 400;
}
.tib-contact-form-card .gform_wrapper input:focus,
.tib-contact-form-card .gform_wrapper textarea:focus,
.tib-contact-form-card .gform_wrapper select:focus {
    outline: none;
    background: #FFFFFF;
    border-color: rgba(2, 113, 206, 0.5);
    box-shadow: 0 0 0 4px rgba(2, 113, 206, 0.1);
}

/* mailing list checkbox */
.tib-contact-form-card .gform_wrapper .gfield--type-checkbox .gfield_label { display: none; }
.tib-contact-form-card .gform_wrapper .gchoice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
}
.tib-contact-form-card .gform_wrapper .gchoice input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(107, 114, 128, 0.3);
    border-radius: 4px;
    background: #FAFAF8;
    margin-top: 2px;
    flex: 0 0 auto;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
.tib-contact-form-card .gform_wrapper .gchoice input[type="checkbox"]:checked {
    background: var(--tomlin-blue);
    border-color: var(--tomlin-blue);
}
.tib-contact-form-card .gform_wrapper .gchoice input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 7px;
    width: 5px;
    height: 10px;
    border: solid #FFFFFF;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.tib-contact-form-card .gform_wrapper .gchoice label {
    font-family: 'Heebo', sans-serif;
    font-size: 15px;
    font-weight: 300;
    color: rgba(26, 26, 26, 0.72);
    line-height: 1.5;
    cursor: pointer;
}

/* (Captcha field removed S25 — the image math-captcha rendered empty-src boxes
   and added no value over honeypot + OOPSpam. Styles dropped with it.) */

/* footer row — submit button (left) + reply-time reassurance (right).
   The reassurance pill is injected by the gform_submit_button filter in
   functions.php so the markup matches concept 14. */
.tib-contact-form-card .gform_footer {
    margin-top: 8px;
    padding-top: 32px;
    border-top: 1px solid rgba(107, 114, 128, 0.12);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
@media (max-width: 560px) {
    .tib-contact-form-card .gform_footer {
        flex-direction: column;
        align-items: stretch;
    }
}
.tib-contact-form-card .gform_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 40px;
    background: var(--tomlin-blue);
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-family: 'Heebo', sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
}
.tib-contact-form-card .gform_button iconify-icon {
    font-size: 20px;
    transition: transform 0.3s;
}
.tib-contact-form-card .gform_button:hover {
    background: #02367B;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(2, 54, 123, 0.20);
}
.tib-contact-form-card .gform_button:hover iconify-icon { transform: translateX(4px); }
@media (max-width: 560px) {
    .tib-contact-form-card .gform_button { width: 100%; }
}
/* reply-time reassurance pill (injected after the button) */
.tib-contact-form-card .tib-form-reassurance {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: rgba(250, 250, 248, 0.8);
    border: 1px solid rgba(107, 114, 128, 0.12);
    border-radius: 999px;
    font-family: 'Heebo', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: #6B7280;
}
.tib-contact-form-card .tib-form-reassurance iconify-icon {
    font-size: 18px;
    color: var(--tomlin-blue);
    flex: 0 0 auto;
}
@media (max-width: 560px) {
    .tib-contact-form-card .tib-form-reassurance { justify-content: center; }
}

/* validation messages */
.tib-contact-form-card .gform_wrapper .gfield_validation_message,
.tib-contact-form-card .gform_wrapper .validation_message {
    font-size: 12px;
    color: #B91C1C;
    margin-top: 6px;
}
.tib-contact-form-card .gform_wrapper .gform_validation_errors {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #B91C1C;
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 24px;
    font-size: 14px;
}
.tib-contact-form-card .gform_confirmation_message {
    font-family: 'Heebo', sans-serif;
    font-size: 17px;
    color: #02367B;
    text-align: center;
    padding: 32px;
    background: rgba(2, 113, 206, 0.05);
    border-radius: 16px;
}

/* closing promise CTA */
.tib-contact-promise {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 400;
    font-style: italic;
    color: #FFFFFF;
    line-height: 1.4;
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    border: none;
    padding: 0;
}
.tib-contact-promise__link {
    color: #90C4F0;
    text-decoration: none;
    position: relative;
    transition: color 0.2s;
}
.tib-contact-promise__link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 1px;
    background: rgba(144, 196, 240, 0.5);
    transition: background 0.2s;
}
.tib-contact-promise__link:hover { color: #FFFFFF; }
.tib-contact-promise__link:hover::after { background: rgba(255, 255, 255, 0.6); }

/* ghost button utility on navy backgrounds — reused for "Read our policy" */
.tib-btn-ghost-on-navy a.e-button,
a.e-button.tib-btn-ghost-on-navy {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #FFFFFF !important;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.tib-btn-ghost-on-navy a.e-button:hover,
a.e-button.tib-btn-ghost-on-navy:hover {
    background: #FFFFFF !important;
    color: #02367B !important;
    border-color: #FFFFFF !important;
}

/* ============================================================================
   SECTION 27 — Careers v2 page (post 922 /careers-v2/)
   Hero + 5/7 intro split + 3-card staggered openings grid + culture
   pull-quote band with 4 value icons + closing 'no role listed' CTA.
   ============================================================================ */

.tib-careers-h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 500;
    color: #FFFFFF;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0;
}
.tib-careers-h1__accent {
    font-style: italic;
    font-weight: 400;
    color: #90C4F0;
}

/* intro why row — 5/7 split */
.tib-careers-why-row > .e-flexbox > * { width: 100%; }

/* openings */
.tib-careers-h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: 500;
    color: #02367B;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0;
}
.tib-careers-h2__accent {
    font-style: italic;
    font-weight: 400;
    color: var(--tomlin-blue);
}

.tib-careers-roles {
    margin-top: 56px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}
@media (max-width: 1024px) {
    .tib-careers-roles { gap: 28px; }
}
@media (max-width: 820px) {
    .tib-careers-roles { grid-template-columns: 1fr; gap: 24px; }
}

.tib-careers-role {
    display: flex;
    flex-direction: column;
    background: #FAFAF8;
    border: 1px solid rgba(2, 54, 123, 0.08);
    border-radius: 28px;
    padding: 40px;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
    min-height: 320px;
}
.tib-careers-role--mid { transform: translateY(32px); }
.tib-careers-role--low { transform: translateY(64px); }
@media (max-width: 820px) {
    .tib-careers-role,
    .tib-careers-role--mid,
    .tib-careers-role--low { transform: none; }
}
.tib-careers-role:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -15px rgba(2, 54, 123, 0.18);
    border-color: rgba(2, 54, 123, 0.18);
}
.tib-careers-role--mid:hover { transform: translateY(24px); }
.tib-careers-role--low:hover { transform: translateY(56px); }

.tib-careers-role__accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #02367B, var(--tomlin-blue));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease-out;
}
.tib-careers-role:hover .tib-careers-role__accent { transform: scaleX(1); }

.tib-careers-role__loc {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Heebo', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tomlin-blue);
    margin: 0 0 24px;
}
.tib-careers-role__loc iconify-icon { font-size: 18px; }

.tib-careers-role__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 28px;
    font-weight: 500;
    color: #02367B;
    line-height: 1.2;
    margin: 0 0 16px;
    transition: color 0.3s;
}
.tib-careers-role:hover .tib-careers-role__title { color: var(--tomlin-blue); }

.tib-careers-role__summary {
    font-family: 'Heebo', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: rgba(26, 26, 26, 0.7);
    line-height: 1.65;
    margin: 0 0 32px;
    flex: 1;
}

.tib-careers-role__cta {
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid rgba(2, 54, 123, 0.06);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Heebo', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #02367B;
    transition: color 0.3s;
}
.tib-careers-role__cta iconify-icon {
    font-size: 18px;
    transition: transform 0.3s;
}
.tib-careers-role:hover .tib-careers-role__cta { color: var(--tomlin-blue); }
.tib-careers-role:hover .tib-careers-role__cta iconify-icon { transform: translateX(6px); }

/* culture pull-quote band */
.tib-careers-quote {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.75rem, 3.6vw, 3rem);
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.35;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    border: none;
    padding: 0;
}
.tib-careers-quote-attr {
    font-family: 'Heebo', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.25em;
    color: #90C4F0;
    text-align: center;
    margin: 28px 0 0;
}

.tib-careers-values {
    margin-top: 56px;
    padding-top: 48px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    width: 100%;
}
@media (max-width: 768px) {
    .tib-careers-values { grid-template-columns: repeat(2, 1fr); gap: 36px; }
}

.tib-careers-value {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
}
.tib-careers-value__icon-wrap {
    width: 80px;
    height: 80px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: #90C4F0;
    transition: background 0.4s, transform 0.4s;
}
.tib-careers-value:hover .tib-careers-value__icon-wrap {
    background: rgba(2, 113, 206, 0.3);
    transform: scale(1.06);
}
.tib-careers-value__label {
    font-family: 'Heebo', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.4;
    margin: 0;
}

/* closing apply band */
.tib-careers-apply-h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2.25rem, 5vw, 4.25rem);
    font-weight: 500;
    color: #02367B;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-align: center;
    margin: 0;
}
.tib-careers-apply-h2__accent {
    font-style: italic;
    font-weight: 400;
    color: var(--tomlin-blue);
}
.tib-careers-apply-lead {
    font-family: 'Heebo', sans-serif;
    font-size: 18px;
    font-weight: 300;
    color: rgba(26, 26, 26, 0.7);
    line-height: 1.65;
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}
.tib-careers-apply-mail {
    color: var(--tomlin-blue);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid rgba(2, 113, 206, 0.3);
    transition: color 0.2s, border-color 0.2s;
}
.tib-careers-apply-mail:hover { color: #02367B; border-color: #02367B; }

/* ============================================================================
   SECTION 28 — News v2 page (post 923 /news-v2/)
   Hero + featured-post pullquote + category filter pills + 3-col grid +
   archive footer link. Driven by [tib_news_grid] shortcode in functions.php.
   ============================================================================ */

.tib-news-h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 500;
    color: #FFFFFF;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0;
}
.tib-news-h1__accent {
    font-style: italic;
    font-weight: 400;
    color: #90C4F0;
}

/* featured post pullquote */
.tib-news-featured {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 64px;
    align-items: center;
    margin-bottom: 96px;
}
@media (max-width: 960px) {
    .tib-news-featured { grid-template-columns: 1fr; gap: 36px; }
}
.tib-news-featured__media {
    display: block;
    border-radius: 28px;
    overflow: hidden;
    background: #FAFAF8;
    aspect-ratio: 16 / 11;
    position: relative;
}
.tib-news-featured__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}
.tib-news-featured__media:hover img { transform: scale(1.04); }
.tib-news-featured__media::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    pointer-events: none;
}
.tib-news-featured__body { padding-right: 16px; }
.tib-news-featured__eyebrow {
    font-family: 'Heebo', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--tomlin-blue);
    margin: 0 0 18px;
}
.tib-news-featured__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.75rem, 3.8vw, 2.75rem);
    font-weight: 500;
    line-height: 1.18;
    color: #02367B;
    margin: 0 0 16px;
}
.tib-news-featured__title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.25s;
}
.tib-news-featured__title a:hover { color: var(--tomlin-blue); }
.tib-news-featured__meta {
    font-family: 'Heebo', sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: rgba(26, 26, 26, 0.5);
    margin: 0 0 20px;
}
.tib-news-featured__excerpt {
    font-family: 'Heebo', sans-serif;
    font-size: 17px;
    font-weight: 300;
    color: rgba(26, 26, 26, 0.72);
    line-height: 1.65;
    margin: 0 0 24px;
}
.tib-news-featured__cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Heebo', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #02367B;
    text-decoration: none;
    border-bottom: 1px solid rgba(2, 54, 123, 0.18);
    padding-bottom: 6px;
    transition: color 0.2s, border-color 0.2s, gap 0.2s;
}
.tib-news-featured__cta iconify-icon {
    font-size: 16px;
    transition: transform 0.25s;
}
.tib-news-featured__cta:hover { color: var(--tomlin-blue); border-color: var(--tomlin-blue); }
.tib-news-featured__cta:hover iconify-icon { transform: translateX(6px); }

/* category filter pills */
.tib-news-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 56px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(2, 54, 123, 0.06);
}
.tib-news-pill {
    display: inline-flex;
    align-items: center;
    padding: 9px 20px;
    border: 1px solid rgba(2, 54, 123, 0.18);
    border-radius: 999px;
    font-family: 'Heebo', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: rgba(2, 54, 123, 0.7);
    text-decoration: none;
    background: transparent;
    transition: all 0.25s;
}
.tib-news-pill:hover {
    background: rgba(2, 113, 206, 0.06);
    border-color: rgba(2, 113, 206, 0.4);
    color: var(--tomlin-blue);
}
.tib-news-pill.is-active {
    background: #02367B;
    border-color: #02367B;
    color: #FFFFFF;
}

/* 3-col post grid */
.tib-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    width: 100%;
}
@media (max-width: 1024px) {
    .tib-news-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (max-width: 640px) {
    .tib-news-grid { grid-template-columns: 1fr; gap: 28px; }
}

.tib-news-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: transform 0.4s;
}
.tib-news-card:hover { transform: translateY(-4px); }

.tib-news-card__media {
    aspect-ratio: 4 / 3;
    border-radius: 20px;
    overflow: hidden;
    background: #FAFAF8;
    margin-bottom: 24px;
    position: relative;
}
.tib-news-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}
.tib-news-card:hover .tib-news-card__media img { transform: scale(1.05); }
.tib-news-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    pointer-events: none;
}

.tib-news-card__body { padding: 0 4px; }
.tib-news-card__eyebrow {
    font-family: 'Heebo', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--tomlin-blue);
    margin: 0 0 12px;
}
.tib-news-card__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.25;
    color: #02367B;
    margin: 0 0 10px;
    transition: color 0.25s;
}
.tib-news-card:hover .tib-news-card__title { color: var(--tomlin-blue); }
.tib-news-card__meta {
    font-family: 'Heebo', sans-serif;
    font-size: 12px;
    font-weight: 400;
    /* WCAG 2.1 AA contrast, 2026-09-17 (0.9.71). Was rgba(26, 26, 26, 0.5),
       which composites to #8D8D8D on white = 3.34:1, under the 4.5:1 minimum
       for 12px/400 body text. #757575 measures 4.61:1 on #FFFFFF.
       Deliberately a flat hex, not a higher alpha: an alpha value's real
       contrast depends on whatever is painted behind it, so it re-fails the
       moment a card is moved onto a tinted panel. Ryan's call, 2026-09-17.
       NOTE the same rgba(26, 26, 26, 0.5) still sits on
       `.tib-news-featured__meta` above (~line 2631). Left alone on purpose:
       nothing emits `tib-news-featured` markup anywhere (0 hits across 101
       rendered URLs, 0 in all 117 DB tables, 0 in the theme PHP), so it is
       dead CSS and fixing it would change nothing rendered. If that featured
       component is ever revived, change it in the same commit. */
    color: #757575;
    letter-spacing: 0.04em;
    margin: 0 0 12px;
}
.tib-news-card__excerpt {
    font-family: 'Heebo', sans-serif;
    font-size: 15px;
    font-weight: 300;
    color: rgba(26, 26, 26, 0.68);
    line-height: 1.6;
    margin: 0;
}

/* footer archive link */
.tib-news-footer-link {
    margin-top: 64px;
    padding-top: 40px;
    border-top: 1px solid rgba(2, 54, 123, 0.06);
    text-align: center;
}
.tib-news-footer-link a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Heebo', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #02367B;
    text-decoration: none;
    border-bottom: 1px solid rgba(2, 54, 123, 0.2);
    padding-bottom: 6px;
    transition: color 0.2s, border-color 0.2s;
}
.tib-news-footer-link a iconify-icon { font-size: 16px; }
.tib-news-footer-link a:hover { color: var(--tomlin-blue); border-color: var(--tomlin-blue); }

/* News v2 closing CTA italic accent */
.tib-news-cta-h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    font-weight: 500;
    color: #FFFFFF;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-align: center;
    margin: 0;
}
.tib-news-cta-h2__accent {
    font-style: italic;
    font-weight: 400;
    color: #90C4F0;
}

/* ============================================================================
   SECTION 29 — Home Meet-Your-Team preview band (Session 11 addition)
   Bridges Home to /team-v2/. 8-portrait strip (5 Barbados + 3 Antigua) with
   italic-accent h2 + CTA, sits between Industries and Guides on page 866.
   ============================================================================ */

.tib-home-team-h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 4.4vw, 3.25rem);
    font-weight: 500;
    color: #02367B;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-align: center;
    max-width: 880px;
    margin: 0 auto;
}
.tib-home-team-h2__accent {
    font-style: italic;
    font-weight: 400;
    color: var(--tomlin-blue);
}

.tib-home-team-grid {
    margin-top: 32px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 24px;
}
@media (max-width: 1200px) {
    .tib-home-team-grid { grid-template-columns: repeat(4, 1fr); gap: 28px; }
}
@media (max-width: 720px) {
    .tib-home-team-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

.tib-home-team-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}
.tib-home-team-card__photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(2, 54, 123, 0.04);
    position: relative;
    transition: transform 0.4s ease;
}
.tib-home-team-card:hover .tib-home-team-card__photo { transform: translateY(-3px); }
.tib-home-team-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    filter: grayscale(20%);
    transition: filter 0.6s, transform 0.7s;
}
.tib-home-team-card:hover .tib-home-team-card__photo img {
    filter: grayscale(0);
    transform: scale(1.04);
}
.tib-home-team-card__name {
    font-family: 'Heebo', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #02367B;
    line-height: 1.3;
    margin: 6px 0 0;
}
.tib-home-team-card__role {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 12px;
    font-weight: 400;
    color: rgba(26, 26, 26, 0.6);
    line-height: 1.3;
    margin: 0;
}

/* =============================================================================
   SECTION 30 — Home V3 (Alicia Canva mockup, 2026-06-12)
   Three new home patterns that v4 atomic settings can't fully express:
     (a) Industries icon-tile grid (icon sizing + hover lift)
     (b) Regional network 2-col jurisdiction lists (navy band)
     (c) Guides light cards (image-top cover-crop + hover lift)
   Section/structure live in scripts/page_home.py atomic settings; this hosts
   only the escape-hatch bits (img object-fit, hover transitions, list reset).
   ========================================================================== */

/* (a) Industries icon tiles ------------------------------------------------ */
.s-ind-tile {
    transition: transform 0.2s ease;
}
.s-ind-tile:hover {
    transform: translateY(-4px);
}
.s-ind-icon img {
    display: block;
    width: auto;
    height: 64px;
    max-width: 100%;
    transition: transform 0.2s ease;
}
.s-ind-tile:hover .s-ind-icon img {
    transform: scale(1.06);
}
@media (max-width: 767px) {
    .s-ind-icon img { height: 56px; }
}

/* (b) Regional network — navy 2-col jurisdiction lists --------------------- */
.s-net-lists {
    margin: 0;
}
.s-net-label {
    color: #ffffff;
    font-family: 'Heebo', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.3px;
    margin: 20px 0 8px;
}
.s-net-label:first-child {
    margin-top: 0;
}
.s-net-ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.s-net-ul li {
    color: rgba(255, 255, 255, 0.82);
    font-family: 'Heebo', sans-serif;
    font-size: 16px;
    line-height: 1.95;
}
.s-net-mapcol img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 640px;
    margin: 0 auto;
    /* The 2026 regional map is a full navy raster (not a transparent silhouette),
       so frame it as a panel against the navy section. */
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.45);
}
/* On a single (wrapped) column, give the map some breathing room above. */
@media (max-width: 1024px) {
    .s-net-mapcol { margin-top: 12px; }
    .s-net-mapcol img { max-width: 520px; }
}

/* (c) Guides light cards --------------------------------------------------- */
.s-guide-card-light {
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 10px 30px -18px rgba(2, 54, 123, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.s-guide-card-light:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -20px rgba(2, 54, 123, 0.45);
}
.s-guide-media {
    height: 200px;
    overflow: hidden;
}
.s-guide-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.s-guide-card-light:hover .s-guide-media img {
    transform: scale(1.04);
}

/* =============================================================================
   SECTION 31 — RETIRED 2026-07-30.

   Was: Home V3 "The Tomlin Approach" as a two-column numbered list (S13, from
   Alicia's Canva). Her final notes replace that section outright with the
   lifecycle diagram ("Move The Tomlin approach (option 1) to home page,
   replacing the current section"), so the `.s-approach-num` / `.s-approach-text`
   / `.s-approach-row-outer` rules have no markup left to style — the builder
   (page_home.s_approach) is no longer called by page_home_decomp.build().

   The section now renders from SECTION 41. Nothing to keep here.
   ========================================================================== */


/* ============================================================================
   SECTION 32 — Track B card→guide click-through (Session 21, 2026-06-18)
   Services featured cards (.tib-sol-card) + Industries tiles (.tib-ind-card)
   became <a> elements linking to each item's dedicated Foundry guide page.
   Reset link styling and add the "Read the guide" affordance.
   ========================================================================= */
.tib-sol-card,
.tib-ind-card {
    text-decoration: none;
    color: inherit;
}
.tib-ind-card {
    display: block; /* was a <div>; keep block-level box inside the grid */
}
.tib-sol-card__more {
    margin-top: 0.4rem;
    font-family: 'Heebo', sans-serif;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tomlin-blue);
    transition: gap 0.3s ease, color 0.3s ease;
}
.tib-sol-card:hover .tib-sol-card__more {
    color: #02367B;
}


/* ============================================================================
   SECTION 33 — Home S22 (Alicia 2026-06-18 feedback)
   (a) Sitewide filled-button standard — drop the bare outline pill she flagged
       (PDF p.13). Buttons become filled rectangles with a small radius.
   (b) Clickable Home Industries icon-tile grid (now html_widget anchors).
   (c) New Home "Solutions and services" photo-tile teaser grid.
   ========================================================================== */

/* (a) Button standard ------------------------------------------------------ */
/* All atomic e-buttons: PILL shape (Alicia quick-pass 2026-06-25 — "change all
   buttons to pill"; supersedes the S22 4px-rectangle standard). Atomic settings
   still own the fill colour + typography; this only normalises the shape. */
a.e-button,
.e-button > a,
.e-button .elementor-button,
a.e-button-base,
.e-button-base {
    border-radius: 999px !important;
}
/* Header CTA "TALK TO A BROKER" — filled brand-blue PILL (Alicia: "Talk to a
   broker in the header was correct in the previous pass"; keep the filled fill,
   restore the pill shape). Overrides the SECTION 10 outline rules. */
.tomlin-site-header__cta-btn,
.tomlin-site-header__cta-btn.e-button,
a.tomlin-site-header__cta-btn {
    background: var(--tomlin-blue) !important;
    background-color: var(--tomlin-blue) !important;
    border: 1px solid var(--tomlin-blue) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 0.7rem 1.5rem !important;
}
.tomlin-site-header__cta-btn:hover,
a.tomlin-site-header__cta-btn:hover {
    background: var(--tomlin-navy) !important;
    background-color: var(--tomlin-navy) !important;
    border-color: var(--tomlin-navy) !important;
    color: #fff !important;
}

/* (b) Home Industries icon-tile grid (clickable) --------------------------- */
.s-ind-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    width: 100%;
}
.s-ind-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding: 28px 16px;
    width: 15.5%;             /* ~6 per row desktop; 11 wraps 6+5 */
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.s-ind-tile:hover {
    transform: translateY(-4px);
    background-color: rgba(255, 255, 255, 0.6);
}
.s-ind-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
}
.s-ind-icon img {
    display: block;
    width: auto;
    height: 64px;
    max-width: 100%;
    transition: transform 0.2s ease;
}
.s-ind-tile:hover .s-ind-icon img {
    transform: scale(1.06);
}
.s-ind-cap {
    font-family: 'Heebo', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.4;
    text-align: center;
    color: var(--tomlin-navy);
}
@media (max-width: 1024px) {
    .s-ind-tile { width: 31%; }     /* 3 per row */
}
@media (max-width: 767px) {
    .s-ind-tile { width: 46%; }     /* 2 per row */
    .s-ind-icon img { height: 56px; }
}

/* (c) Home "Solutions and services" photo-tile teaser ---------------------- */
.s-sol-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    width: 100%;
}
.s-sol-tile {
    display: flex;
    flex-direction: column;
    width: calc(20% - 16px);        /* 5 per row */
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 10px 30px -18px rgba(2, 54, 123, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.s-sol-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -20px rgba(2, 54, 123, 0.45);
}
.s-sol-media {
    display: block;
    height: 120px;
    overflow: hidden;
}
.s-sol-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.s-sol-tile:hover .s-sol-media img {
    transform: scale(1.05);
}
.s-sol-name {
    display: block;
    padding: 14px 16px;
    font-family: 'Heebo', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.35;
    color: var(--tomlin-navy);
}
@media (max-width: 1024px) {
    .s-sol-tile { width: calc(33.333% - 14px); }   /* 3 per row */
}
@media (max-width: 767px) {
    .s-sol-tile { width: calc(50% - 10px); }        /* 2 per row */
    .s-sol-media { height: 110px; }
}

/* ==========================================================================
   SECTION 34 — Guides-style editorial page header (.tib-ghead)
   S23 Track A #2/#10. Alicia explicitly liked the Guides & Resources hub
   header (eyebrow + serif title + deck on light bg) and asked to use it on
   Services (919), Industries (920), and the Careers-detail pages (822/771).
   This is a faithful port of the Foundry `.foundry-guides-hero` look using
   the Tomlin brand tokens (Playfair title / brand-blue eyebrow / Heebo deck),
   with no dependency on the Foundry stylesheet (which only loads on guides
   views). Replaces the navy photo hero on those pages.
   ========================================================================== */
.tib-ghead {
    max-width: 860px;
    margin: 0;
    text-align: left;
}
.tib-ghead__eyebrow {
    /* Amsterdam script PAGE-TITLE eyebrow (Services / Industries /
       Careers-detail). Stays script per the UX Style Guide's "Page Title
       Eyebrow" token — only the in-page section eyebrows went uppercase.

       SIZE: bumped 64px -> 90px max (Alicia, 2026-07-17: "especially
       increasing the eyebrow font size"). Her note and the style guide's own
       26pt/42pt ratio appear to contradict each other; rendering all three
       settled it (docs/design-explorations/15-eyebrow-size-comparison.html,
       screenshot in docs/screenshots/token-pass-2026-07-27/).

       Why she's right and the ratio is not, HERE: Amsterdam Three has a tiny
       x-height and a dominant initial swash, so a SHORT one-word label like
       "Services" reads as a squiggle at 35px and is still scrawly at 64px. The
       style guide's own sample ("Page Title Eyebrow") is long enough that the
       swash is proportionally small, which is why 26pt looks right there and
       fails here. The rule that actually generalises: short script labels need
       more size than long ones — judge by rendered glyph legibility, never by
       the px number (the S27 lesson, restated). */
    font-family: 'Amsterdam Four', 'Pinyon Script', cursive;
    /* V6 item 6 (2026-08-18, S39): "reduce the eyebrow size slightly" so at
       least one roster row lands above the fold at 1280x800 — was
       clamp(3rem, 6.5vw, 5.625rem) [48-90px], now 44-64px. Pairs with the
       guides_header() top-pad reduction (120 -> 56) in tomlin_atomic.py and
       the Team roster top-pad cut (84 -> 48). */
    font-size: clamp(2.75rem, 5vw, 4rem);
    font-weight: 400;
    font-style: italic;
    letter-spacing: normal;
    text-transform: none;
    color: var(--tomlin-blue, var(--tomlin-blue));
    /* S42: was a flat 10px, which the "People and Culture" P-swash overran by
       12px at 1280. Now the shared clearance token. */
    margin: 0 0 var(--tomlin-script-eyebrow-clearance);
}
.tib-ghead__title {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-weight: 500;
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    line-height: 1.05;
    color: var(--tomlin-navy, #02367B);
    margin: 0 0 20px;
}
.tib-ghead__title em,
.tib-ghead__accent {
    font-style: italic;
    font-weight: 500;
    color: var(--tomlin-blue, var(--tomlin-blue));
}
.tib-ghead__deck {
    font-family: 'Heebo', sans-serif;
    font-size: 1.0625rem;
    font-weight: 300;
    line-height: 1.65;
    color: rgba(26, 26, 26, 0.65);
    margin: 0;
    max-width: 700px;
}
/* hairline under the header, mirrors the guides hub's pill divider rule */
.tib-ghead-section .s-intro,
.tib-ghead-divider {
    border-top: 1px solid rgba(2, 54, 123, 0.1);
}
@media (max-width: 767px) {
    .tib-ghead__title { font-size: clamp(2rem, 8vw, 2.5rem); }
    /* The script eyebrow's clamp floor (3rem) overflows a phone once the label
       runs longer than a word or two ("News & Updates", "Guides & Resources").
       Drop the floor on small screens so no page-title eyebrow runs off-canvas. */
    .tib-ghead__eyebrow { font-size: clamp(2rem, 9vw, 3rem); }
}

/* ==========================================================================
   SECTION 35 — Careers-detail (vacancy) pages
   S23 Track A #10. The vacancy pages (822 account-executive, 771 junior-AE)
   are plain WP pages (classic-editor content), children of /careers/ 922.
   Alicia (PDF p.11): white content bg, align typography with the rest of the
   site, use a Guides-style header.

   Scoped to `body.tib-vacancy` (added in functions.php) rather than to
   `body.tib-vacancy`. The parent-based selector silently missed page 452
   (Executive Assistant), which IS a vacancy page but sits at the site root
   with no parent, so it rendered completely unstyled. Tagging by class also
   means a future vacancy page gets the treatment by being marked as one,
   rather than by happening to be parented correctly.
   ========================================================================== */
body.tib-vacancy #content.site-main {
    background: #ffffff;
}
body.tib-vacancy .page-content {
    max-width: 880px;
    margin: 0 auto;
    padding: 80px 24px 100px;
    font-family: 'Heebo', sans-serif;
    font-size: 1rem;
    color: #1A1A1A;
    line-height: 1.7;
}
/* Guides-style header — eyebrow + Playfair title from the content's h1.
   Position-independent (771's h1 isn't the first child), so target the h1
   directly — there's exactly one per vacancy page. */
body.tib-vacancy .page-content h1 {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-weight: 500;
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    line-height: 1.08;
    color: var(--tomlin-navy, #02367B);
    margin: 0 0 14px;
}
body.tib-vacancy .page-content h1::before {
    content: "Careers";
    display: block;
    font-family: 'Heebo', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--tomlin-blue, var(--tomlin-blue));
    margin-bottom: 16px;
}
/* the meta block immediately under the title (Location / reports-to / dates) */
body.tib-vacancy .page-content h1 + p {
    color: rgba(26, 26, 26, 0.6);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0 0 8px;
}
/* section headings */
body.tib-vacancy .page-content h2,
body.tib-vacancy .page-content h3 {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-weight: 600;
    color: var(--tomlin-navy, #02367B);
    line-height: 1.2;
    margin: 8px 0 14px;
}
body.tib-vacancy .page-content h3 { font-size: 1.5rem; }
body.tib-vacancy .page-content h2 { font-size: 1.875rem; }
/* drop empty headings left by the source doc template (771 had a stray <h3></h3>) */
body.tib-vacancy .page-content h2:empty,
body.tib-vacancy .page-content h3:empty { display: none; }
body.tib-vacancy .page-content strong {
    color: var(--tomlin-navy, #02367B);
    font-weight: 700;
}
body.tib-vacancy .page-content hr {
    border: 0;
    border-top: 1px solid rgba(2, 54, 123, 0.12);
    margin: 30px 0;
}
body.tib-vacancy .page-content ul {
    padding-left: 1.25em;
    margin: 0 0 18px;
}
body.tib-vacancy .page-content li {
    margin-bottom: 9px;
}
body.tib-vacancy .page-content a {
    color: var(--tomlin-blue, var(--tomlin-blue));
}

/* ==========================================================================
   SECTION 36 — CTA-footer photo bands (.s-cta / .s-promise)
   S41, Alicia 2026-08-20: "CTA footers — can we change from the blue
   background to the selected images", with a Canva mock-up of the band over a
   photo of one of her own client meetings.

   This REPLACES the S23 compass treatment. That version forced
   `background-color: #02367B !important; background-image: none !important`
   onto the band so a single rule could strip the per-page photo overlay and lay
   a compass-rose watermark behind the copy. Both forcing rules are gone now —
   the photo lives in each page's own atomic background overlay (editable in the
   builder, one image per page, all seven listed in docs/session-41-phase-2026-08-20.md), and a
   `!important` here would silently win over every one of them.

   What survives is only the stacking context the band needs: the copy sits
   above the overlay, and the band clips. img/compass-rose.svg is left in the
   repo — it is cheap, and this is the second time the band's treatment has
   changed.
   ========================================================================== */
.s-cta,
.s-promise {
    position: relative;
    overflow: hidden;
}
.s-cta > *,
.s-promise > * {
    position: relative;
    z-index: 1;
}

/* ============================================================================
   SECTION 37 — News single-post template (single.php)
   Reuses the Foundry Guides single aesthetic so News + Guides read as one
   system: full-bleed navy breadcrumb+hero, contained cover, centred reading
   column for the_content, and a "more from the newsroom" rail.
   ============================================================================ */

.tib-news-single {
    background: #FFFFFF;
    padding: 0 0 96px;
}

/* TIB V5: masthead band — breadcrumb + hero share one painted surface, a navy
   scrim over the featured image (the contact-page / guide-single treatment).
   --tib-news-hero-image is set on the wrapper by single.php; with no featured
   image it is unset and the band is the prior flat navy. */
.tib-news-masthead {
    background:
        linear-gradient(180deg, rgba(2, 54, 123, 0.84), rgba(2, 54, 123, 0.92)),
        var(--tib-news-hero-image, none) center / cover no-repeat,
        #02367B;
}

/* breadcrumb — top of the masthead band; paints no background of its own */
.tib-news-breadcrumb {
    background: transparent;
    margin: 0;
    padding: 30px 24px 0;
    font-family: 'Heebo', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.tib-news-breadcrumb__inner {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.tib-news-breadcrumb a { color: #90C4F0; text-decoration: none; }
.tib-news-breadcrumb a:hover { color: #FFFFFF; text-decoration: underline; }
.tib-news-breadcrumb span { color: rgba(255, 255, 255, 0.4); }

/* hero band — sits inside the masthead, so it paints no background of its own */
.tib-news-hero {
    background: transparent;
    margin: 0;
    padding: clamp(1.75rem, 3.5vw, 2.75rem) 24px clamp(2.5rem, 5vw, 4rem);
}
.tib-news-hero__inner { max-width: 760px; margin: 0 auto; }
.tib-news-hero__eyebrow {
    font-family: 'Heebo', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #90C4F0;
    margin: 0 0 16px;
}
.tib-news-hero__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 500;
    font-size: clamp(2rem, 4.6vw, 3.25rem);
    line-height: 1.08;
    color: #FFFFFF;
    margin: 0 0 20px;
    letter-spacing: -0.01em;
}
.tib-news-hero__meta {
    font-family: 'Heebo', sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.tib-news-hero__dot { color: rgba(255, 255, 255, 0.4); }

/* cover image — contained, sits just below the hero, lifted into the navy */
.tib-news-cover {
    max-width: 880px;
    margin: -2.5rem auto 0;
    padding: 0 24px;
}
.tib-news-cover img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    box-shadow: 0 24px 48px -20px rgba(2, 54, 123, 0.35);
}
@media (max-width: 640px) {
    .tib-news-cover { margin-top: -1.5rem; }
    .tib-news-cover img { border-radius: 12px; }
}

/* reading column — every direct child shares one centred column */
.tib-news-content { padding: 3rem 0 0; }
.tib-news-content > * {
    width: min(760px, calc(100% - 48px));
    margin-left: auto;
    margin-right: auto;
}
.tib-news-content > p {
    font-family: 'Heebo', sans-serif;
    font-size: 1.0625rem;
    font-weight: 300;
    line-height: 1.8;
    color: #1A1A1A;
    margin: 0 auto 1.25rem;
}
.tib-news-content > h2,
.tib-news-content > h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 500;
    color: #02367B;
    line-height: 1.2;
    margin: 2.5rem auto 1rem;
}
.tib-news-content > h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.tib-news-content > h3 { font-size: clamp(1.25rem, 2.4vw, 1.5rem); }
.tib-news-content > ul,
.tib-news-content > ol {
    font-family: 'Heebo', sans-serif;
    font-size: 1.0625rem;
    font-weight: 300;
    line-height: 1.75;
    color: #1A1A1A;
    margin: 0 auto 1.5rem;
    padding-left: 1.4em;
}
.tib-news-content > ul { width: min(760px, calc(100% - 48px - 1.4em)); }
.tib-news-content > ol { width: min(760px, calc(100% - 48px - 1.4em)); }
.tib-news-content > ul li,
.tib-news-content > ol li { margin-bottom: 0.5rem; padding-left: 0.3em; }
.tib-news-content > ul li::marker { color: var(--tomlin-blue); }
.tib-news-content > ol li::marker { color: var(--tomlin-blue); font-weight: 600; }
.tib-news-content a {
    color: var(--tomlin-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s;
}
.tib-news-content a:hover { color: #02367B; }

/* blockquote — editorial pull treatment (brand-blue rule + Playfair italic) */
.tib-news-content > blockquote {
    border-left: 3px solid var(--tomlin-blue);
    padding: 0.25rem 0 0.25rem 1.5rem;
    margin: 2.25rem auto;
}
.tib-news-content > blockquote p {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.25rem, 2.4vw, 1.6rem);
    line-height: 1.45;
    color: #02367B;
    margin: 0 0 0.75rem;
}
.tib-news-content > blockquote p:last-child { margin-bottom: 0; }
.tib-news-content > blockquote cite {
    font-family: 'Heebo', sans-serif;
    font-style: normal;
    font-size: 14px;
    color: rgba(26, 26, 26, 0.6);
}

/* images / figures inside the body */
.tib-news-content > figure,
.tib-news-content > .wp-block-image {
    margin: 2rem auto;
}
.tib-news-content > figure img,
.tib-news-content > .wp-block-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}
.tib-news-content figcaption {
    font-family: 'Heebo', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: rgba(26, 26, 26, 0.55);
    text-align: center;
    margin-top: 0.75rem;
}
/* designated wide/full images break the column symmetrically */
.tib-news-content > .alignwide {
    width: min(1000px, calc(100% - 48px));
}
.tib-news-content > .alignfull {
    width: 100%;
    max-width: none;
}

/* related rail — "more from the newsroom" */
.tib-news-related {
    max-width: 1200px;
    margin: 80px auto 0;
    padding: 56px 24px 0;
    border-top: 1px solid rgba(2, 54, 123, 0.1);
}
.tib-news-related__eyebrow {
    font-family: 'Heebo', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--tomlin-blue);
    margin: 0 0 28px;
}
.tib-news-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}
@media (max-width: 1024px) { .tib-news-related__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
@media (max-width: 640px)  { .tib-news-related__grid { grid-template-columns: 1fr; gap: 28px; } }

.tib-news-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: transform 0.4s;
}
.tib-news-card:hover { transform: translateY(-4px); }
.tib-news-card__media {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    overflow: hidden;
    background: #F5F5F4;
    margin-bottom: 20px;
    position: relative;
}
.tib-news-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}
.tib-news-card:hover .tib-news-card__media img { transform: scale(1.05); }
.tib-news-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    pointer-events: none;
}
/* placeholder panel when a post has no cover — navy typographic card */
.tib-news-card__media.is-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #02367B;
    padding: 18px;
}
.tib-news-card__placeholder {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 500;
    font-size: clamp(1.1rem, 2.4vw, 1.5rem);
    line-height: 1.15;
    text-align: center;
    color: #FFFFFF;
}
.tib-news-card__body { padding: 0 4px; }
.tib-news-card__eyebrow {
    display: block;
    font-family: 'Heebo', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tomlin-blue);
    margin: 0 0 10px;
}
.tib-news-card__title {
    display: block;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.25;
    color: #02367B;
    transition: color 0.25s;
}
.tib-news-card:hover .tib-news-card__title { color: var(--tomlin-blue); }

/* ============================================================================
   SECTION 38 — Atomic-decomposition base resets
   ----------------------------------------------------------------------------
   When an html-blob section is decomposed into NATIVE atomic elements
   (e-flexbox / e-div-block) wearing our semantic BEM classes, Elementor v4 adds
   an `.e-flexbox-base` / `.e-div-block-base` class to each. Those base rules are
   scoped `.elementor .e-*-base` = specificity (0,2,0) and inject:
       e-flexbox-base  : display:flex; flex-direction:row; padding:10px;
       e-div-block-base: display:block; padding:10px; min-width:30px;
   which BEATS our single-class layout rules (0,1,0) and pads every container by
   10px. Re-assert the intended layout at matching (0,2,0) specificity — the
   child theme stylesheet is enqueued at priority 99 (loads LAST), so equal
   specificity resolves in our favour. Only the props the base clobbers
   (display / flex-direction / padding / min-width) need restating; colours,
   fonts, gaps, radius, shadow, etc. are untouched by the base and keep applying.

   Raw-html (not-yet-decomposed) versions of these components render as plain
   <div>s with NO `-base` class, so these rules don't match them — safe to ship
   before every page is decomposed.

   Services (post 919) decomposed components — SECTION 24 classes:
   ============================================================================ */
.elementor .tib-sol-grid        { display: grid; padding: 0; }
.elementor .tib-sol-card        { flex-direction: column; padding: 0; }
.elementor .tib-sol-card__img   { padding: 0; min-width: 0; }
.elementor .tib-sol-card__body  { flex-direction: column; padding: 1.75rem 1.75rem 2rem; }
.elementor .tib-sol-index       { display: block; padding: 0; }
.elementor .tib-sol-index-head  { padding: 0; min-width: 0; }
.elementor .tib-sol-cat         { padding: 0; min-width: 0; }
.elementor .tib-sol-cat__head   { flex-direction: row; padding: 0 0 0.85rem; }
.elementor .tib-sol-cat__list   { flex-direction: column; padding: 0; }
.elementor .tib-sol-item        { padding: 0; min-width: 0; }

/* ----------------------------------------------------------------------------
   Shared helper: inline label text inside a decomposed flex link/row.
   A native e-paragraph used as the text node of an icon+text label (contact
   link, careers location, etc.) must inherit the parent's font/colour rather
   than carry e-paragraph's own. `font:inherit` pulls size/family/weight/style/
   line-height from the parent label; the rest reset what the base injects.
   ---------------------------------------------------------------------------- */
.elementor .tib-itxt { font: inherit; color: inherit; letter-spacing: inherit;
                       text-transform: inherit; margin: 0; }

/* Contact (post 921) decomposed office cards — SECTION 26 classes.
   The map iframe + the <address> line block stay html_widget (an iframe can't
   be a native widget; the address needs <br> line breaks that e-paragraph
   strips). Name = native e-heading; phone/email text = native e-paragraph. */
/* fit-content wrapper reproduces canonical's centered shrink-to-fit (the old
   single html_widget was a shrink-wrapped flex item; a decomposed grid would
   otherwise stretch to the full container). max-width:100% guards small screens. */
.elementor .tib-contact-offices-wrap { display: block; width: fit-content;
                                       max-width: 100%; margin: 0 auto;
                                       padding: 0; min-width: 0; }
.elementor .tib-contact-offices      { display: grid; padding: 0; min-width: 0; }
.elementor .tib-contact-office       { flex-direction: row; padding: 0; }
@media (max-width: 640px) { .elementor .tib-contact-office { flex-direction: column; } }
.elementor .tib-contact-office__body { flex-direction: column; padding: 4px 0 0; min-width: 0; }
.elementor .tib-contact-office__row  { flex-direction: row; padding: 0; }
.elementor .tib-contact-office__link { flex-direction: row; padding: 4px 0; }

/* Complaint (post 918) decomposed steps + offices grids — SECTION 23 classes. */
.elementor .tib-step-grid   { display: grid; padding: 0; min-width: 0; }
.elementor .tib-step        { display: grid; padding: 0; min-width: 0; }
.elementor .tib-step__body  { display: block; padding: 0; min-width: 0; }
.elementor .tib-office-grid { display: grid; padding: 0; min-width: 0; }
.elementor .tib-office      { display: block; padding: 2.5rem 2rem; min-width: 0; }

/* Careers (post 922) decomposed openings grid — SECTION 27 classes. The accent
   bar + the "View role" cta affordance stay html_widget (decorative). */
.elementor .tib-careers-roles     { display: grid; padding: 0; min-width: 0; }
.elementor .tib-careers-role      { flex-direction: column; padding: 40px; }
.elementor .tib-careers-role__loc { flex-direction: row; padding: 0; }

/* Home (post 866) decomposed industries icon tiles + solutions photo tiles —
   SECTION 30 classes. */
.elementor .s-ind-grid  { padding: 0; }
.elementor .s-ind-tile  { flex-direction: column; padding: 28px 16px; }
.elementor .s-ind-icon  { flex-direction: row; padding: 0; }
.elementor .s-sol-grid  { padding: 0; }
.elementor .s-sol-tile  { flex-direction: column; padding: 0; }
.elementor .s-sol-media { display: block; padding: 0; min-width: 0; }

/* ============================================================================
   SECTION 39 — Mobile navigation (site header)

   The header template (887) is pure v4 atomic: e-flexbox containers + link
   widgets. Atomic elements ship no responsive menu behaviour of their own
   (unlike Elementor's v3 Nav Menu widget, which includes a hamburger), so
   until 2026-07-27 there was NO mobile treatment at all — the desktop nav
   rendered over the logo at 390px, the CTA ran off-screen, and every page
   overflowed horizontally to 505px against a 390px viewport.

   The toggle button is injected by js/nav.js (see that file for why it is not
   an element in the template). Breakpoint must stay in sync with BREAKPOINT
   in js/nav.js.
   ========================================================================== */

/* The toggle is a REAL element in header template 887 (an e-button, tag=button,
   no link) carrying this class — added by scripts/header_add_toggle.py so it is
   visible and editable in the Elementor editor. js/nav.js only binds behaviour.

   The three bars are drawn here from pseudo-elements, so the template element
   stays a plain labelled "Menu" button with no decorative child markup to
   confuse an editor. The label itself is visually hidden (kept for a11y and so
   the element reads sensibly in the editor canvas).

   Background/border are pinned across ALL interaction states: e-button-base
   otherwise supplies a themed background on :hover/:focus/:active (it rendered
   pink during QA). Focus is re-expressed as a visible ring below, never removed. */
.elementor .tomlin-site-header__toggle,
.tomlin-site-header__toggle {
    /* .elementor (0,2,0) is REQUIRED: as a template element the toggle carries
       e-button-base, whose display rule beats a single-class selector. The
       earlier injected <button> had no such class, so (0,1,0) sufficed then. */
    display: none;   /* revealed by the media query below */
    position: relative;
    width: 46px;
    height: 46px;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-radius: 4px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    /* Hide the "Menu" label without hiding the element from assistive tech. */
    font-size: 0;
    line-height: 0;
    color: transparent;
}
/* State pinning only — deliberately does NOT set `display`, or focusing the
   toggle on mobile would re-hide it (these state selectors outrank the
   single-class rule that reveals it). */
.elementor .tomlin-site-header__toggle,
.elementor .tomlin-site-header__toggle:hover,
.elementor .tomlin-site-header__toggle:focus,
.elementor .tomlin-site-header__toggle:active,
.tomlin-site-header__toggle:hover,
.tomlin-site-header__toggle:focus,
.tomlin-site-header__toggle:active {
    background: transparent;
    background-color: transparent;
    box-shadow: none;
    border: 0;
    color: transparent;
}
.tomlin-site-header__toggle:focus-visible {
    outline: 2px solid var(--tomlin-blue);
    outline-offset: 2px;
}

/* Bars. ::before carries the middle bar and, via box-shadow, the outer two —
   so the closed state needs a single pseudo-element. ::after is the second
   stroke of the X and stays hidden until open. */
.tomlin-site-header__toggle::before,
.tomlin-site-header__toggle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 26px;
    height: 2px;
    margin-left: -13px;
    border-radius: 2px;
    background: var(--tomlin-navy);
    transition: transform .25s ease, box-shadow .15s ease, opacity .15s ease;
}
.tomlin-site-header__toggle::before {
    box-shadow: 0 -8px 0 var(--tomlin-navy), 0 8px 0 var(--tomlin-navy);
}
.tomlin-site-header__toggle::after {
    opacity: 0;
}

/* Open: outer bars drop away, the two strokes cross. */
.tomlin-site-header.is-nav-open .tomlin-site-header__toggle::before {
    box-shadow: none;
    transform: rotate(45deg);
}
.tomlin-site-header.is-nav-open .tomlin-site-header__toggle::after {
    opacity: 1;
    transform: rotate(-45deg);
}

@media (max-width: 1024px) {
    /* .elementor specificity (0,2,0) — Elementor's own -base classes set
       display/flex-direction on these containers and would otherwise win. */
    .elementor .tomlin-site-header,
    .tomlin-site-header {
        position: relative;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }

    .elementor .tomlin-site-header__toggle,
    .tomlin-site-header__toggle {
        display: block;
        order: 3;
        margin-left: auto;
    }

    .elementor .tomlin-site-header__brand,
    .tomlin-site-header__brand {
        order: 1;
        flex: 0 1 auto;
        min-width: 0;
    }

    /* Collapsed by default. Both the nav and the CTA move into the panel so a
       phone shows logo + hamburger only. */
    .elementor .tomlin-site-header__nav,
    .tomlin-site-header__nav,
    .elementor .tomlin-site-header__cta,
    .tomlin-site-header__cta {
        display: none;
        order: 4;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        min-width: 0;
        gap: 4px;
    }

    .tomlin-site-header.is-nav-open .tomlin-site-header__nav,
    .elementor .tomlin-site-header.is-nav-open .tomlin-site-header__nav {
        display: flex;
        padding: 14px 0 4px;
    }
    .tomlin-site-header.is-nav-open .tomlin-site-header__cta,
    .elementor .tomlin-site-header.is-nav-open .tomlin-site-header__cta {
        display: flex;
        padding: 4px 0 16px;
    }

    /* Comfortable tap targets rather than the desktop inline rhythm.
       Needs .elementor (0,2,0): these links are `e-button-base`, which sets
       display:inline-block and text-align:center — a single-class rule loses
       to it (same trap as SECTION 38). */
    .elementor .tomlin-site-header__nav-item,
    .tomlin-site-header__nav-item {
        display: block;
        width: 100%;
        padding: 12px 0;
        text-align: left;
        border-bottom: 1px solid rgba(2, 54, 123, .10);
    }
    .elementor .tomlin-site-header__nav-item:last-child,
    .tomlin-site-header__nav-item:last-child { border-bottom: 0; }

    /* CTA sits flush with the links rather than centred against them. */
    .elementor .tomlin-site-header__cta-btn,
    .tomlin-site-header__cta-btn {
        margin-left: 0;
    }
}

/* ============================================================================
   SECTION 40 — Services "Why choose Tomlin" (S31, Alicia Final Pass part 2)

   Eight supplied reasons, 2-col on desktop. Content is emitted as native atomic
   elements (e-div-block / e-heading / e-paragraph) wearing these classes, so
   every line stays editable in the v4 editor — see page_services_decomp.py.

   Specificity note (the SECTION 38 trap): `.e-con-inner > .e-div-block` and the
   atomic base classes set display/padding at (0,2,0), so any property this
   section needs to own is re-asserted at `.elementor .class`. Single-class
   rules silently lose to the base.
   ========================================================================== */

.tib-why-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
}
.elementor .tib-why-head { padding: 0; }

.tib-why-head__eyebrow,
p.tib-why-head__eyebrow {
    font-family: 'Heebo', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.75rem;          /* 12px — style-guide in-page eyebrow */
    line-height: 1.4;
    color: var(--tomlin-blue);
    margin: 0 0 14px;
}

.tib-why-head__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 500;
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1.15;
    color: var(--tomlin-navy);
    margin: 0;
}

.tib-why-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 56px;
    width: 100%;
}
/* e-div-block is display:block by default and the base injects padding —
   re-assert both so the grid actually lays out. */
.elementor .tib-why-grid {
    display: grid;
    padding: 0;
}

.tib-why-item {
    padding: 0;
    /* the icon is absolutely positioned against this box */
    position: relative;
    padding-left: 60px;
}
.elementor .tib-why-item {
    display: block;
    padding: 0 0 0 60px;
    min-width: 0;
}

/* The iconify glyph is emitted through html_widget (iconify-icon is a web
   component, not an atomic widget), so it arrives wrapped in Elementor's
   `.elementor-widget-html` div — and `.elementor-widget` is position:relative,
   which makes THAT the containing block for the absolutely-positioned icon.
   Left as-is the icon anchors inside the 60px indent and lands on top of the
   title. Neutralising the wrapper's position hands the containing block back
   to .tib-why-item. The wrapper is zero-height once the icon is out of flow. */
.tib-why-item .elementor-widget-html {
    position: static;
    margin: 0;
    padding: 0;
}

.tib-why-item__icon {
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 32px;
    line-height: 1;
    color: var(--tomlin-blue);
}

.tib-why-item__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    font-size: 1.375rem;         /* 22px */
    line-height: 1.3;
    color: var(--tomlin-navy);
    margin: 0 0 10px;
}

.tib-why-item__copy,
p.tib-why-item__copy {
    font-family: 'Heebo', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--tomlin-medium);
    margin: 0;
}

@media (max-width: 1024px) {
    .tib-why-grid,
    .elementor .tib-why-grid { gap: 36px 40px; }
}

@media (max-width: 767px) {
    .tib-why-grid,
    .elementor .tib-why-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
    .tib-why-head { margin-bottom: 40px; }
    .tib-why-item,
    .elementor .tib-why-item { padding-left: 52px; }
    .tib-why-item__icon { font-size: 28px; }
}

/* ============================================================================
   SECTION 41 — "The Tomlin Approach" lifecycle diagram

   Alicia's Final Pass part 2: "Change to a lifecycle graphic similar to below"
   (circular, 5 nodes, one highlighted, detail for the active step). Concept
   pass: docs/design-explorations/16-services-cycle-concept-tw.html.

   Built in S31 in two competing designs on gated pages. She picked **Option A**
   (2026-07-30) and in the same note moved the section off Services onto **Home**
   in place of the S13 numbered list. Variant B (navy band, swinging spoke,
   detail beside the ring) is DELETED — rules, builder branch and the
   controller's spoke maths all went with it. What was `.tib-cycle--a` is now
   simply `.tib-cycle`; there is one design and one maintained path.

   Markup: scripts/section_cycle.py. Controller: js/services-cycle.js.

   Editability: only the ring/nodes/controls are decorative html_widget markup.
   Every step's label, title and copy is a native atomic element wearing these
   classes, so the copy stays editable in the v4 editor (the S28 premise).

   Progressive enhancement: the absolute-positioned panel stack only engages
   under `.is-ready`, which the controller adds. With JS off, all five panels
   remain in flow and read as a list. Never move the panel stacking out of
   `.is-ready` — that would hide four of five steps from a no-JS reader.

   SPECIFICITY: Elementor's atomic base classes set display / padding /
   alignment at (0,2,0), so every rule here that owns one of those is written at
   `.elementor .class` — and so is every media-query override of it.
   ========================================================================== */

.tib-cycle-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 64px;
}
.elementor .tib-cycle-head { padding: 0; }

.tib-cycle-head__eyebrow,
p.tib-cycle-head__eyebrow {
    font-family: 'Heebo', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--tomlin-blue);
    margin: 0 0 14px;
}

.tib-cycle-head__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 500;
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1.15;
    color: var(--tomlin-navy);
    margin: 0 0 20px;
}

.tib-cycle-head__intro,
p.tib-cycle-head__intro {
    font-family: 'Heebo', sans-serif;
    font-weight: 300;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--tomlin-medium);
    margin: 0;
}

/* --- shell -------------------------------------------------------------- */
.tib-cycle {
    position: relative;
    width: 100%;
}
.elementor .tib-cycle { display: block; padding: 0; }

/* The detail disc lives INSIDE the ring, but .tib-cycle__panels is a SIBLING of
   the ring in the DOM (they have to be — the panels are native editable
   elements, the ring is decorative html_widget). So the STAGE is the fixed
   square that both size against: ring stretched to fill it, panels centred
   within it. Sizing the panels against a default flex stage is what produced
   the stretched ellipse on the first pass.

   Needs .elementor (0,2,0): the stage is an e-div-block and `.e-div-block-base`
   sets display + padding — a single-class rule silently loses to it. */
.tib-cycle__stage,
.elementor .tib-cycle__stage {
    position: relative;
    display: block;
    width: 560px;
    height: 560px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}

/* The ring arrives wrapped in `.elementor-widget-html` (html_widget), so the
   wrapper — not .tib-cycle__ring — is what the stage lays out. Anything sizing
   or positioning the ring has to go through the wrapper too. */
.tib-cycle__stage > .elementor-widget-html {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
}

.tib-cycle__ring {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px dashed rgba(2, 54, 123, 0.20);
}

.tib-cycle__node {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    background: #FFFFFF;
    border: 1px solid rgba(2, 54, 123, 0.15);
    color: var(--tomlin-medium);
    transition: transform .25s ease, background-color .25s ease,
                border-color .25s ease, color .25s ease, box-shadow .25s ease;
    z-index: 2;
}
.tib-cycle__node iconify-icon { font-size: 24px; line-height: 1; }
.tib-cycle__node:hover { border-color: var(--tomlin-blue); color: var(--tomlin-navy); }
/* Solid, not rgba(...,.45): see SECTION 52 on the 3:1 indicator floor. */
.tib-cycle__node:focus-visible { outline: 3px solid var(--tomlin-blue); outline-offset: 3px; }
.tib-cycle__node.is-active {
    background: var(--tomlin-blue);
    border-color: var(--tomlin-blue);
    color: #FFFFFF;
    transform: scale(1.12);
    box-shadow: 0 6px 20px rgba(0, 110, 200, .28);
}
.tib-cycle__node.is-active:hover { color: #FFFFFF; }

/* Pentagon, first node at 12 o'clock. ANGLES in js/services-cycle.js must
   stay in sync with these positions. */
.tib-cycle__node:nth-child(1) { top:  0%;    left: 50%;   transform-origin: center; margin: -28px 0 0 -28px; }
.tib-cycle__node:nth-child(2) { top: 34.5%;  left: 97.5%; margin: -28px 0 0 -28px; }
.tib-cycle__node:nth-child(3) { top: 90.5%;  left: 79.4%; margin: -28px 0 0 -28px; }
.tib-cycle__node:nth-child(4) { top: 90.5%;  left: 20.6%; margin: -28px 0 0 -28px; }
.tib-cycle__node:nth-child(5) { top: 34.5%;  left:  2.5%; margin: -28px 0 0 -28px; }
/* scale() on the active node must not cancel the centring margins — margins do
   the centring here precisely so transform stays free for scale/rotate. */

/* --- the disc: panels in flow by default, stacked once ready ------------- */
/* 64% of the ring leaves a clear band between the disc edge and the nodes. */
.tib-cycle__panels,
.elementor .tib-cycle__panels {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64%;
    height: 64%;
    transform: translate(-50%, -50%);
    display: block;
    padding: 0;
    background: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 18px 50px rgba(2, 54, 123, .10);
    z-index: 1;
}

.tib-cycle__panel { text-align: center; }
/* Copy has to breathe inside a circle, where the usable width tapers off fast
   above and below the centre line. */
.elementor .tib-cycle__panel {
    display: block;
    padding: 0 34px;
    align-items: center;
    text-align: center;
}

.tib-cycle.is-ready .tib-cycle__panel,
.elementor .tib-cycle.is-ready .tib-cycle__panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}
.tib-cycle.is-ready .tib-cycle__panel.is-active,
.elementor .tib-cycle.is-ready .tib-cycle__panel.is-active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.tib-cycle__label,
p.tib-cycle__label {
    font-family: 'Heebo', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.6875rem;
    color: var(--tomlin-blue);
    margin: 0 0 10px;
}

.tib-cycle__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    font-size: 1.375rem;
    line-height: 1.25;
    color: var(--tomlin-navy);
    margin: 0 0 10px;
}

.tib-cycle__copy,
p.tib-cycle__copy {
    font-family: 'Heebo', sans-serif;
    font-weight: 300;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--tomlin-medium);
    margin: 0;
}

/* --- controls ----------------------------------------------------------- */
.tib-cycle__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 48px;
}

.tib-cycle__arrow,
.tib-cycle__page {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
    font-family: 'Heebo', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--tomlin-medium);
    transition: background-color .2s ease, color .2s ease, border-color .2s ease,
                opacity .2s ease;
}

/* Alicia 2026-07-30: "Change arrow colour to navy blue and tomlin blue." Her
   mark-up keeps BACK as an outline disc and fills FORWARD (it was crimson in
   her mock, with a blue swatch beside it), so the pair reads back = navy,
   forward = brand blue. Filling both was tried first and the navy back arrow
   sat next to the navy active page number as an indistinct pair. */
.tib-cycle__arrow--prev {
    background: #FFFFFF;
    border-color: var(--tomlin-navy);
    color: var(--tomlin-navy);
}
.tib-cycle__arrow--next {
    background: var(--tomlin-blue);
    border-color: var(--tomlin-blue);
    color: #FFFFFF;
}
.tib-cycle__arrow--prev:hover { background: var(--tomlin-navy); color: #FFFFFF; }
.tib-cycle__arrow--next:hover { opacity: .85; color: #FFFFFF; }

.tib-cycle__page:hover { background: rgba(2, 54, 123, 0.06); color: var(--tomlin-navy); }
.tib-cycle__page.is-active {
    background: var(--tomlin-navy);
    color: #FFFFFF;
    font-weight: 600;
}
.tib-cycle__arrow:focus-visible,
.tib-cycle__page:focus-visible { outline: 3px solid var(--tomlin-blue); outline-offset: 2px; }
.tib-cycle__arrow iconify-icon { font-size: 18px; line-height: 1; }

/* CTA under the diagram (Home only — Final Pass row H7). The section's own gap
   is 0 so the head/ring spacing stays exact, so the button carries its own. */
.elementor a.tib-cycle-cta,
.elementor .tib-cycle-cta.e-button-base { margin-top: 52px; }

@media (max-width: 900px) {
    .tib-cycle__stage,
    .elementor .tib-cycle__stage { width: 440px; height: 440px; }
    .tib-cycle__node { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
    .tib-cycle__node iconify-icon { font-size: 20px; }
    .tib-cycle__copy,
    p.tib-cycle__copy { font-size: .875rem; }
}

/* ---------------------------------------------------------------------------
   MOBILE — the ring cannot survive 390px, so it is replaced (not hidden) by a
   numbered vertical timeline carrying the same five steps. This is the same
   content: the panels simply return to flow.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .tib-cycle__ring,
    .tib-cycle__controls { display: none; }
    /* the ring's widget wrapper goes with it, and the fixed square stage has to
       give its height back */
    .tib-cycle__stage > .elementor-widget-html { display: none; }

    .tib-cycle__stage,
    .elementor .tib-cycle__stage {
        display: block;
        width: 100%;
        height: auto;
    }

    .tib-cycle__panels,
    .elementor .tib-cycle__panels {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        min-height: 0;
        transform: none;
        background: none;
        box-shadow: none;
        border-radius: 0;
        text-align: left;
        /* the timeline rule */
        border-left: 1px solid rgba(2, 54, 123, 0.15);
        padding-left: 28px;
    }

    /* Return every panel to the flow — this deliberately overrides .is-ready,
       so it has to match that rule's (0,4,0) weight, not just the base. */
    .tib-cycle.is-ready .tib-cycle__panel,
    .elementor .tib-cycle.is-ready .tib-cycle__panel,
    .tib-cycle__panel,
    .elementor .tib-cycle__panel {
        position: relative;
        inset: auto;
        display: block;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        align-items: flex-start;
        text-align: left;
        padding: 0 0 32px;
    }
    .tib-cycle.is-ready .tib-cycle__panel:last-child,
    .elementor .tib-cycle.is-ready .tib-cycle__panel:last-child,
    .tib-cycle__panel:last-child,
    .elementor .tib-cycle__panel:last-child { padding-bottom: 0; }

    .elementor a.tib-cycle-cta,
    .elementor .tib-cycle-cta.e-button-base { margin-top: 36px; }
}

/* ============================================================================
   SECTION 42 — Careers rebuild (922, S32, Alicia Final Pass C1/C2/C3 + part 2)
   Two states share one markup shape:
     - not hiring (default) -> .tib-nohire panel
     - hiring               -> .tib-vac-list of .tib-vac rows + .tib-eoi band
   Every text node inside these is a NATIVE atomic element wearing the class,
   so the copy stays editable in the v4 editor (the S28 handoff premise). Only
   the "View role" arrow glyph is html_widget — it is an icon, not copy.

   SPECIFICITY: Elementor's atomic base classes (.e-div-block-base and
   friends) set display / padding / alignment at (0,2,0), so every rule here
   that owns one of those properties is written at `.elementor .class` — and
   so is every media-query override of it. This trap cost four bugs in S31.
   ========================================================================== */

/* --- intro ---------------------------------------------------------------- */
.elementor .tib-careers-intro { padding-top: 8px; }

/* --- vacancy list (C2: list, not grid) ------------------------------------ */
.elementor .tib-vac-list {
    display: block;
    width: 100%;
    max-width: 1040px;
    padding: 0;
    min-width: 0;
    border-top: 1px solid rgba(2, 54, 123, 0.14);
}
.elementor .tib-vac {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    width: 100%;
    padding: 30px 4px;
    border-bottom: 1px solid rgba(2, 54, 123, 0.14);
    text-decoration: none;
    transition: background-color .2s ease, padding-left .2s ease;
}
.tib-vac:hover { background: rgba(0, 110, 200, 0.045); }
.elementor .tib-vac:hover { padding-left: 16px; }
.elementor .tib-vac__body {
    display: block;
    padding: 0;
    min-width: 0;
}
.elementor .tib-vac__office { margin: 0 0 6px; }
.elementor .tib-vac__title { margin: 0 0 8px; transition: color .2s ease; }
.tib-vac:hover .tib-vac__title { color: var(--tomlin-blue); }
.elementor .tib-vac__summary { margin: 0; }
.tib-vac__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    font-family: 'Heebo', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--tomlin-navy, #02367B);
    white-space: nowrap;
}
.tib-vac__cta iconify-icon {
    font-size: 18px;
    transition: transform .2s ease;
}
.tib-vac:hover .tib-vac__cta { color: var(--tomlin-blue); }
.tib-vac:hover .tib-vac__cta iconify-icon { transform: translateX(6px); }

@media (max-width: 767px) {
    .elementor .tib-vac {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 26px 0;
    }
    .elementor .tib-vac:hover { padding-left: 0; }
}

/* --- not-hiring default state --------------------------------------------- */
/* "Stretch 'no vacancies' section to the full content width" (Final Notes p.7).
   It was an 780px card inset in the band while everything above it ran the full
   1240 container, which read as an unfinished column. */
.elementor .tib-nohire {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 44px 48px 48px;
    background: var(--tomlin-white, #ffffff);
    border: 1px solid rgba(2, 54, 123, 0.12);
    border-top: 3px solid var(--tomlin-blue, #006EC8);
    border-radius: 4px;
}
.elementor .tib-nohire__title { margin: 0 0 14px; }
.elementor .tib-nohire__body { margin: 0 0 28px; }

@media (max-width: 767px) {
    .elementor .tib-nohire { padding: 32px 24px 36px; }
}

/* --- expression-of-interest band (hiring state only) ---------------------- */
.elementor .tib-eoi {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
    max-width: 780px;
    padding: 0;
    text-align: center;
}
.elementor .tib-eoi__title { margin: 0; }
.elementor .tib-eoi__body { margin: 0; }

/* ============================================================================
   SECTION 43 — Home, Alicia Final Pass rows H1 / H2 / H5 (S32)
   H1 hero recomposition (separator lines, two-line headline, outline CTA),
   H2 the new eight-stat band, H5 the flat guide cards.

   SPECIFICITY: anything owning display / padding / alignment is written at
   `.elementor .class` because Elementor's atomic base classes set those at
   (0,2,0) — including inside media queries. See SECTION 42's note.
   ========================================================================== */

/* --- H1 hero -------------------------------------------------------------- */
.elementor .s-hero-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
}
/* The "separator lines" from her first pass — hairlines bracketing the deck.
   The rule ships inside an html widget, and `.elementor-widget-html` is the
   real flex child — an empty div inside a shrink-to-fit wrapper measures zero,
   so the width has to be applied to the WRAPPER, not to `.s-hero-rule`. This
   is the html_widget "one wrapper deeper than the markup suggests" trap. */
.elementor .s-hero-col > .elementor-widget-html {
    width: 100%;
    max-width: 420px;
    padding: 0;
}
.s-hero-rule {
    width: 100%;
    max-width: 420px;
    height: 1px;
    background: rgba(255, 255, 255, 0.38);
}
.s-hero-h1__accent {
    font-weight: 700;
    color: inherit;
}
/* Secondary CTA is an outline pill in the approved comp, not a translucent
   fill. button() has no border control, so it comes through as a class. */
/* NB the atomic button renders as `a.e-button-base`, not `a.e-button` — the
   base class zeroes the border at (0,1,0), so this needs `.elementor a.…`. */
.elementor a.s-hero-btn--outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.7);
    transition: background-color .2s ease, border-color .2s ease;
}
.elementor a.s-hero-btn--outline:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: #ffffff;
}

@media (max-width: 767px) {
    .s-hero-rule { max-width: 100%; }
}

/* --- H2 stats ------------------------------------------------------------- */
.elementor .s-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    padding: 0;
    min-width: 0;
    /* Hairline cell dividers, drawn as a 1px gap over a rule-coloured bed —
       one rule instead of eight per-cell borders, and no double lines. */
    gap: 1px;
    background: rgba(0, 110, 200, 0.28);
    border: 1px solid rgba(0, 110, 200, 0.28);
}
.elementor .s-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 30px 18px 26px;
    background: var(--tomlin-white, #ffffff);
    min-width: 0;
}
.elementor .s-stat__figure { margin: 0; }
.elementor .s-stat__label  { margin: 0; max-width: 200px; }

@media (max-width: 1024px) {
    .elementor .s-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479px) {
    .elementor .s-stats-grid { grid-template-columns: 1fr; }
    .elementor .s-stat { padding: 24px 16px; }
}

/* --- H5 guide cards ------------------------------------------------------- */
.elementor .s-guide-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
    width: 100%;
    padding: 0;
    min-width: 0;
}
.elementor .s-guide-card-flat {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    /* NO left rule. It was added from row H5's phrase "left vertical rule",
       but a side-by-side against her approved p.9 thumbnail
       (docs/screenshots/session-32/visual-verification/guides-2up.png) shows
       her cards flush-left and unruled, and the Guides-hub cards
       (.foundry-guide-card) have never carried one either — measured, not
       assumed. The vertical line visible beside the p.5 card reference is the
       boundary of the pasted image in her Google Doc, not part of the design.
       Ryan's call 2026-07-30: the rule boxed these in where hers breathe. */
    padding: 0;
    background: transparent;
    text-decoration: none;
    min-width: 0;
}
.elementor .s-guide-media { display: block; padding: 0; margin-bottom: 6px; }
.s-guide-media img {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
}
.elementor .s-guide-title    { margin: 0; transition: color .2s ease; }
.elementor .s-guide-cat      { margin: 0; }
.elementor .s-guide-excerpt  { margin: 0; }
.s-guide-card-flat:hover .s-guide-title { color: var(--tomlin-blue); }

@media (max-width: 1024px) {
    .elementor .s-guide-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 767px) {
    .elementor .s-guide-grid { grid-template-columns: 1fr; gap: 32px; }
    .s-guide-media img { height: 200px; }
}

/* --- client logo row: cap the odd portrait/solid-background logos ---------- */
/* Most client logos are wide transparent PNGs; a couple (West India Coffee) are
   tall solid-background JPEGs that would otherwise tower over the row. */
.s-client-logo img {
    max-height: 74px;
    width: auto;
    object-fit: contain;
}

/* ============================================================================
   SECTION 44 — Team page (917), Alicia Final Pass rows T1-T5 (S32)
   Roster grouped by department; each card is a portrait with the name, title
   and office set over the bottom of the photo behind a dark scrim, per the
   terracaribbean reference she marked "More like". Our headshots sit on light
   studio backgrounds, so the scrim does the work the reference gets for free
   from its dark portraits.

   Cards are NATIVE atomic elements now (not an html blob), so the usual
   `.elementor .class` specificity applies to anything owning display,
   padding or alignment.
   ========================================================================== */

.elementor .tib-team-intro { padding-top: 8px; }

/* --- department groups ---------------------------------------------------- */
/* TIB V5 (task 10): the roster's OUTER wrapper must CENTER its single 1240
   container so the roster lines up with the page header (which does, via
   full_section's default). `flex-start` here left-aligned that container, so
   above 1280px the roster sat ~76px left of the header — the green-arrow note.
   The inner container keeps its own align-items:start, so the department groups
   inside stay left-aligned; only the container's page position changes. */
.elementor .tib-roster { align-items: center; }
.elementor .tib-dept {
    display: block;
    width: 100%;
    padding: 0;
    min-width: 0;
}
.elementor .tib-dept__head {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 14px;
    padding: 0 0 16px;
    margin-bottom: 22px;
    border-bottom: 1px solid rgba(2, 54, 123, 0.16);
}
.elementor .tib-dept__label { margin: 0; }
.elementor .tib-dept__count { margin: 0; }

/* --- portrait grid -------------------------------------------------------- */
.elementor .tib-team-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    width: 100%;
    padding: 0;
    min-width: 0;
}
.elementor .tib-team-member {
    display: block;
    position: relative;
    padding: 0;
    min-width: 0;
    overflow: hidden;
    background: var(--tomlin-navy, #02367B);
}
.elementor .tib-team-member.is-clickable { cursor: pointer; }
.elementor .tib-tm__photo {
    display: block;
    padding: 0;
    min-width: 0;
}
.tib-tm__photo img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform .35s ease;
}
.tib-team-member:hover .tib-tm__photo img { transform: scale(1.04); }

/* monogram stand-in where no headshot exists */
.elementor .tib-tm__photo--mono {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background: linear-gradient(160deg, #0A4392 0%, #02367B 100%);
}
.elementor .tib-tm__mono-txt { margin: 0; opacity: .55; letter-spacing: 2px; }

/* --- caption over the photo ----------------------------------------------- */
.elementor .tib-tm__cap {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 46px 14px 14px 16px;
    background: linear-gradient(to top,
        rgba(2, 24, 56, 0.92) 0%,
        rgba(2, 24, 56, 0.72) 45%,
        rgba(2, 24, 56, 0) 100%);
    pointer-events: none;
}
/* the small accent bar to the left of the name in her reference */
.elementor .tib-tm__name {
    position: relative;
    margin: 0 0 3px;
    padding-left: 10px;
    line-height: 1.25;
}
.tib-tm__name::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 2px;
    background: var(--tomlin-blue, #006EC8);
}
.elementor .tib-tm__title  { margin: 0 0 2px; padding-left: 10px; line-height: 1.35; }
.elementor .tib-tm__office { margin: 0; padding-left: 10px; line-height: 1.3; }

/* bio is content, not chrome — kept in the DOM (and in the editor) but not
   painted; js/team-modal.js reads it on click. */
.elementor .tib-tm__bio {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 1200px) {
    .elementor .tib-team-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1024px) {
    .elementor .tib-team-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    .elementor .tib-team-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .elementor .tib-tm__cap { padding: 38px 10px 12px 12px; }
}

/* ============================================================================
   SECTION 45 — vacancy-page tables (S32 QA)
   The vacancy bodies are pasted from Word and carry a requirements matrix as a
   raw <table>. At 390px those tables forced the whole document to 404-408px
   wide, i.e. the page itself scrolled sideways. Per the house rule, wide
   content scrolls inside its OWN container; the page body never does.
   ========================================================================== */
body.tib-vacancy .page-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
}
body.tib-vacancy .page-content table td,
body.tib-vacancy .page-content table th {
    padding: 6px 10px;
    vertical-align: top;
}

/* ============================================================================
   SECTION 46 — Footer social icons (Alicia Final Notes 2026-07-30, "Add social
   icons"). Accounts are the client's own, read out of the migrated Salient
   theme options rather than guessed — see SOCIALS in scripts/page_footer.py.

   The row arrives inside an html_widget, so `.elementor-widget-html` is the
   real flex child of the brand column; the icons are laid out one level in.
   ========================================================================== */
.s-footer-social {
    display: flex;
    align-items: center;
    gap: 10px;
}
.s-footer-social__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.s-footer-social__link:hover {
    background: var(--tomlin-blue);
    border-color: var(--tomlin-blue);
    color: #FFFFFF;
}
.s-footer-social__link iconify-icon { font-size: 18px; line-height: 1; }
.s-footer-social__link:focus-visible {
    outline: 3px solid #90C4F0;   /* solid: 6.24:1 on the navy footer, was 2.95:1 */
    outline-offset: 2px;
}

/* ============================================================================
   SECTION 47 — Community page pillar grid (TIB V6 item 8, S39 2026-08-18)
   Four culture-pillar cards, faithful to Alicia's V6 mockup: photo top, navy
   iconify badge overlapping the photo's bottom edge, bold centered name,
   short copy. Concept: docs/design-explorations/17-community-pillars-concept-tw.html
   (variant A). Names/copy are native atomic; the badge is a decorative
   html_widget, so its real grid child is `.elementor-widget-html` (the
   wrapper-one-deeper rule).

   Grid: the builder emits an e-flexbox wearing .tib-pillars-grid; display:grid
   needs .elementor (0,2,0) to beat the flex base. e-div-block base injects
   padding:10px — reset per the SECTION 38 convention.
   ========================================================================== */
.elementor .tib-pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    width: 100%;
    padding: 0;
}
.elementor .tib-pillar {
    display: block;
    padding: 0;
    text-align: center;
    min-width: 0;
}
.elementor .tib-pillar__media {
    display: block;
    padding: 0;
}
.tib-pillar__media img {
    width: 100%;
    /* 3/2 -> 1/1 (Ryan, 2026-08-19): the landscape crop lost too much of the
       near-square/portrait source photos. Her mockup cards measure ~1.08:1
       (essentially square); a 4/5 portrait would chop ~45% off the wide
       team-building group shot, so square is the faithful middle. */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}
/* the badge's widget wrapper — kill default widget margins so the negative
   margin below is the only vertical adjustment in play */
.elementor .tib-pillar .elementor-widget-html { margin: 0; padding: 0; }
.tib-pillar__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: -28px auto 0;
    position: relative;
    z-index: 2;
    border-radius: 50%;
    background: var(--tomlin-navy, #02367B);
    color: #FFFFFF;
    border: 3px solid #FFFFFF;
}
.tib-pillar__badge iconify-icon { font-size: 24px; line-height: 1; }
.elementor .tib-pillar__name {
    font-family: 'Heebo', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--tomlin-navy, #02367B);
    margin: 16px 0 8px;
}
.elementor .tib-pillar__copy,
.elementor p.tib-pillar__copy {
    font-family: 'Heebo', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(26, 26, 26, 0.62);
    margin: 0 auto;
    max-width: 300px;
}
@media (max-width: 1024px) {
    .elementor .tib-pillars-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .elementor .tib-pillars-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SECTION 48 — Home hero eyebrow sizing (S39; font override retired S41b)
   Amsterdam has a tiny x-height, so a script eyebrow needs the S27 hero clamp
   (44-64px) where Pinyon read fine at 46px, plus a mobile floor so a long label
   never runs off a phone. Line-height keeps swash room (S37: an explicit tight
   line-height collapsed the box).

   The font-family override that used to live here is GONE. It existed because
   the `tomlin-script` GLOBAL VARIABLE still resolved to Pinyon Script — a
   stand-in picked in June before the Amsterdam font-face existed — so the hero
   had to opt out of its own token with !important. S41b (Alicia: "can we change
   the eyebrows here to Amsterdam as well?") pointed the token itself at
   Amsterdam Four, which is what every consumer of it wanted, so the override
   became redundant. Now the token styles the hero AND all seven CTA-band
   eyebrows, and it is editable from Site Settings the way a token should be.
   ========================================================================== */
.elementor .s-hero-eyebrow {
    font-size: clamp(2.75rem, 4.5vw, 4rem) !important;
    line-height: 1.2 !important;
    text-transform: none !important;
}
@media (max-width: 767px) {
    .elementor .s-hero-eyebrow { font-size: clamp(1.875rem, 8vw, 2.5rem) !important; }
}

/* ==========================================================================
   SECTION 49 — Amsterdam script eyebrow: descender clearance (S42)
   Alicia, 2026-09-02: "the eyebrow overlaps the heading" (screenshot of
   /guides/hotels-resorts-and-accommodations/, reference/alicia-s42-2026-09-02/).

   Two surfaces carry the Amsterdam page-title eyebrow and BOTH collided; only
   one was reported. Measured ink-to-ink at 1280 and 390 across all 27 pages
   that render a script eyebrow:

     .foundry-guide-hero__script  21 landing guides   -13.8px / -10.2px
     .tib-ghead__eyebrow          /community/          -12.1px /  -2.3px
     .tib-ghead__eyebrow          /careers/             -7.3px /  +0.3px
     .tib-ghead__eyebrow          /team/                +3.8px         (grazing)
     .s-hero-eyebrow              /                    +13.9px / +17.9px  (clear)

   The fix is one token (--tomlin-script-eyebrow-clearance) applied at each
   surface's own rule, NOT a per-page override. .tib-ghead__eyebrow consumes it
   in SECTION 34; the rule below carries it to the Foundry landing-guide
   masthead.

   WHY THIS OVERRIDE LIVES HERE AND NOT IN THE FOUNDRY PLUGIN. Foundry's
   guides.css is brand-neutral and shipped to the whole fleet; its default
   script face (Brush Script MT) has nothing like Amsterdam's descent, so a
   0.55em clearance baked into the plugin would over-space every other site's
   masthead. The required clearance is a property of the FONT the theme
   supplies via --foundry-guides-font-script, so it belongs beside that
   declaration. Same reasoning as the hub-eyebrow overrides above; the plugin's
   assets/guides.css is never edited. Equal specificity (0,2,0) is enough
   because tomlin-child/style.css enqueues after foundry-guides-css — no
   !important needed.

   The home hero (.s-hero-eyebrow) is deliberately NOT included: it has 13.9px
   of clearance already, and its spacing lives in atomic widget settings where
   the v4 editor sidebar can show it (house editor-first rule).
   ========================================================================== */
.foundry-guide-masthead--landing .foundry-guide-hero__script {
    margin-bottom: var(--tomlin-script-eyebrow-clearance);
}

/* ==========================================================================
   SECTION 50 — prose link colour (S42)
   Every raw <a> in body copy rendered #CC3366, a pink that appears nowhere in
   the brand: 90 links across 19 of the 65 sitemap pages, the HOME page among
   them (its guide-card titles) and 18 guide articles.

   It is a zero-specificity accident, not a design decision. theme.json already
   declares the intent, and has since the build started:

       elements.link            -> var(--wp--preset--color--brand-blue)  #006EC8
       elements.link:hover      -> var(--wp--preset--color--navy)        #02367B

   WordPress compiles that to `a:where(:not(.wp-element-button))`, and `:where()`
   contributes ZERO specificity by definition. The Hello Biz parent ships a bare
   `a { color: #CC3366 }` at (0,0,1), which therefore wins every time. Nothing
   was misconfigured; the correct value simply had no weight behind it.

   It survived 42 sessions because Elementor paints its own link colours per
   element, so the only surfaces showing a naked prose link are the guide and
   news article bodies plus the home guide cards. Those are exactly the pages
   the Directors read, and S42 added two more of them.

   The fix restates theme.json's own declaration, SCOPED TO PROSE CONTAINERS.

   It was first written as a bare `a:not(.wp-element-button)`, on the assumption
   that Elementor's per-element classes would outrank it. They do not. Elementor
   compiles an atomic element's style intent to a SINGLE-CLASS rule at (0,1,0),
   which an unprefixed (0,1,1) selector beats. A link-colour inventory across all
   65 pages before and after caught it: 90 links were meant to change and 1,635
   did, taking the footer (white at 80%), the header nav (near-black) and the
   eyebrow-blue links with them. This is the same cascade fact recorded in S37 in
   the other direction, that a rule beating an Elementor widget setting needs the
   `.elementor` prefix to win. It cuts both ways, and unprefixed is not neutral.

   So this is scoped to prose containers AND to `a:not([class])`.

   The container scope alone was still too wide, for a reason S37 wrote down: on
   a landing guide the related-posts card grid renders INSIDE the reading column,
   so `.foundry-guide-content a` swept up 21 landing pages' card links and turned
   their near-black titles and eyebrow-blue kickers brand-blue. The second
   inventory caught that too.

   `:not([class])` is the honest discriminator, not a guess: every card link is
   `<a class="foundry-guide-card">` wrapping a div, and every prose link is a
   bare `<a>` inside a `<p>` or `<li>` that the editor produced. Anything that
   carries a class carries its own styling intent, and this rule declines to
   argue with it. The one exception is `.ql-link`, a Quill editor artifact on two
   links in a migrated article: it marks where the text came from, not how it
   should look.
   ========================================================================== */
.foundry-guide-content a:not([class]),
.foundry-guide-content a.ql-link,
.tib-news-body a:not([class]),
.tib-news-body a.ql-link,
.page-content .entry-content a:not([class]) {
    color: var(--tomlin-blue);
}
.foundry-guide-content a:not([class]):hover,
.foundry-guide-content a.ql-link:hover,
.tib-news-body a:not([class]):hover,
.tib-news-body a.ql-link:hover,
.page-content .entry-content a:not([class]):hover {
    color: var(--tomlin-navy);
}

/* The guide breadcrumb is the one bare <a> inside the reading column that is
   NOT prose: 8 of them across the editorial guides, sitting on the navy
   masthead where Foundry paints them in the hero-eyebrow blue for contrast.
   Re-assert that token after the rule above rather than expressing the
   exclusion as :not(), which would need a descendant inside :not() to say. */
.foundry-guide-breadcrumb a:not([class]) {
    color: var(--foundry-guides-hero-eyebrow, var(--tomlin-eyebrow-blue));
}

/* ==========================================================================
   SECTION 51 — button hover/focus backgrounds the parent reset was filling in
   Companion to SECTION 50, same root cause on a different property. Hello Biz
   ships not just `a { color:#CC3366 }` but:

       [type=button],[type=submit],button          { border:1px solid #c36; color:#c36 }
       [type=button]:hover,:focus, button:hover,:focus
                                                   { background-color:#c36; color:#fff }

   At rest every button here carries its own component styling, so the first
   rule never shows. The second one does, because it paints a state, and three
   of our components deliberately style hover WITHOUT touching background:

       .tib-cycle__node:hover          sets border-color + color, not background
       .tib-cycle__arrow--next:hover   sets opacity + color, not background
       .tib-team-modal__close          has a :hover rule but no :focus rule

   In each of those gaps the reset was the most specific rule setting a
   background, so clicking a lifecycle node on the HOME page, or the next arrow,
   or focusing the team modal's close button, painted it #CC3366. Measured
   across every button on the site: 7 magenta states at 1280, 0 at 390.

   SPECIFICITY, STATED CORRECTLY. A selector list is scored PER SELECTOR, not
   once for the rule, so `[type=button],[type=submit],button` has two different
   strengths depending on the element it is matching:

       <button type="button">   matches [type=button]   -> (0,1,0), hover (0,2,0)
       <button>  (no type)      matches button          -> (0,0,1), hover (0,1,1)

   EVERY affected button here is written `<button type="button">`, so the rule
   in play was (0,2,0), not the (0,1,1) an earlier draft of this comment
   claimed. That matters for what beats it:

       .tib-cycle__node:not(.is-active):hover   (0,3,0)  wins outright
       .tib-cycle__arrow--next:hover            (0,2,0)  TIES, wins on load order
       .tib-team-modal__close:focus             (0,2,0)  TIES, wins on load order

   Two of the three hold only because tomlin-child/style.css prints after the
   parent's assets/css/theme.css (measured: position 14 against position 2).
   That is a tie-break, not a margin, and what holds it is in functions.php
   rather than here:

       add_action( 'wp_enqueue_scripts', 'tomlin_child_enqueue_styles', 99 );
       wp_enqueue_style( 'tomlin-child', ..., array( $parent_handle ), ... );

   **The dependency array is what holds it.** Established by matching on the FILE
   that carries the declarations, not on a handle that looks like the parent's:
   of 302 registered styles only two come from this theme, `#c36` appears four
   times in `assets/css/theme.css` and zero times in `header-footer.css`, and
   `theme.css` is registered under handle `hello-biz` with no deps of its own.
   That is the handle `tomlin-child` depends on.

   Worth knowing before someone goes looking: **Hello Biz also ships an
   `assets/css/reset.css`, and it is NOT the file.** Zero `#c36`, zero
   `[type=button]` rules, registered under no handle at all. Searching for "the
   reset" by filename finds a real file and the wrong answer. `hello-biz-css` is not a second handle, it is only the DOM
   id WordPress renders as `{handle}-css`; an earlier version of this comment
   read that id as a separate handle and concluded the dependency named the
   wrong thing. It does not. `array( $parent_handle )` names the reset directly,
   so WordPress cannot print the child first. The priority 99 is belt and
   braces on top of that, not the load-bearing half.

   **Anyone rewriting that enqueue so the child no longer depends on the parent
   handle turns every one of these buttons magenta again, with nothing in the
   CSS diff to explain it.** That is why it is written down at both ends.

   The mobile hamburger is clean for ONE reason, not two: it is an atomic
   `e-button` whose own class rules outrank the reset. An earlier version of
   this comment claimed it was also immune by carrying `type="widget"`. It is
   not. Read from the DOM, its real `type` attribute is `button`; the `widget`
   value belongs to Elementor's `data-e-type` on the same tag, and a regex over
   the markup matching `\btype=` picks that up first. So the hamburger sits
   under the same (0,2,0) rule as everything else here.

   WHY THIS IS PER-COMPONENT AND NOT A BLANKET NEUTRALISER. Overriding the reset
   generically needs a value for `color` as well as `background-color`, and the
   only safe generic value would be each component's own resting colour, which
   differs per component. `color: inherit` would silently repaint any button
   whose component sets a colour at rest but not on that state, which is the
   same class of over-reach SECTION 50 hit three times. So each gap is closed
   with the value that component already declares for itself.

   Found because a peer session hit the identical reset on Hello Elementor and
   said so. The SECTION 50 inventory read `color` on `<a>` at rest, and a
   hover-only background on a `<button>` is invisible to that probe. Sweep every
   property a reset can paint, and drive the interactive states.
   ========================================================================== */
.tib-cycle__node:not(.is-active):hover,
.tib-cycle__node:not(.is-active):focus {
    background-color: #FFFFFF;               /* its own resting background */
    color: var(--tomlin-navy);               /* what :hover already declares */
}
.tib-cycle__arrow--next:hover,
.tib-cycle__arrow--next:focus {
    background-color: var(--tomlin-blue);    /* opacity .85 is the hover signal */
    color: #FFFFFF;
}
.tib-team-modal__close:focus {
    background-color: #FFFFFF;               /* matches its own :hover */
    color: var(--tomlin-navy);
}

/* ============================================================================
   SECTION 52 — Focus indicators, and the closed team modal's tab order
   (WCAG 2.1 AA audit 2026-09-03, `LuckyTyke/scripts/audit-a11y.py`; report at
   `Projects/Tomlin-Insurance-Brokers/docs/a11y-audit-2026-09-03.md`)

   650 of the site's 1,246 focusable elements took focus and painted nothing.
   Not because anything removes the ring: a stylesheet sweep found no rule
   setting `outline: none` on any of them, and an author `:focus-visible` rule
   injected at runtime painted correctly on the first try. The browser's own
   default ring simply is not reaching them, and the elements it does reach
   (the header nav items) are the ones nobody noticed were carrying the whole
   site's keyboard affordance.

   So this is not an override of anything. It is the declaration that was
   never made, per component, because a blanket `a:focus-visible` would put a
   blue ring on the dark footer where it cannot be seen.

   TWO COLOURS, and the split is the point. The footer is navy, so it gets the
   pale blue; everything else sits on white or near-white and gets the brand
   blue. Both are SOLID rather than the translucent values used elsewhere in
   this file: WCAG 1.4.11 wants 3:1 for a focus indicator against what it sits
   on, and translucency was quietly costing that. Measured against their own
   backgrounds: #90C4F0 on #02367B is 6.24:1, #006EC8 on #FFFFFF is 5.17:1.
   The `rgba(...)` versions this replaces were 2.95:1 and 2.30:1 — visible, but
   under the bar.

   NOT LISTED HERE, and deliberately: `.tomlin-site-header__toggle`. Its ring
   is already declared at SECTION 44 and it works. The audit reported it as
   ringless on all 16 mobile routes because `e-button-base` sets
   `transition: all 0.3s`, so the outline ANIMATES from 0 to 2px and a checker
   that focuses an element and measures in the same synchronous pass reads it
   mid-transition at 0px. Measured 2026-09-03: 0px on focus, solid 2px 700ms
   later, same element, same page. Do not "fix" it.
   ========================================================================== */

/* Footer link columns. 18 paragraphs, `s-footer-005` through `s-footer-026`,
   every one a bare <a> inside an atomic e-paragraph. Matched on the class
   prefix so a renumbered footer does not silently drop out of this rule. */
.elementor p[class*="s-footer-"] a:focus-visible,
p[class*="s-footer-"] a:focus-visible {
    outline: 3px solid #90C4F0;
    outline-offset: 3px;
    border-radius: 2px;
}

/* The header logo, and any other atomic image link. Light surfaces only. */
.elementor a.e-image-link-base:focus-visible,
a.e-image-link-base:focus-visible {
    outline: 3px solid var(--tomlin-blue);
    outline-offset: 4px;
    border-radius: 4px;
}

/* Guides hub + topic archives: the axis pills and the pager. */
.foundry-guides-pills a:focus-visible,
.foundry-guides-pager a:focus-visible {
    outline: 3px solid var(--tomlin-blue);
    outline-offset: 3px;
}

/* Prose links inside the Make a Complaint step copy. */
.tib-step__copy a:focus-visible {
    outline: 3px solid var(--tomlin-blue);
    outline-offset: 2px;
}

/* Gravity Forms: the radio/checkbox choice inputs and the submit button.
   The FIRST selector needs `.tib-contact-form-card` and the `input` tag to
   reach (0,4,1): SECTION 30's `.tib-contact-form-card .gform_wrapper
   input:focus` is (0,3,1) and sets `outline: none`, so the obvious
   `.gform_wrapper .gfield-choice-input:focus-visible` at (0,3,0) loses to it
   and paints nothing. That rule is right for text inputs, which signal focus
   with a border and a ring-shaped box-shadow instead; it just also catches
   the radios, which have neither. */
.tib-contact-form-card .gform_wrapper input.gfield-choice-input:focus-visible,
.gform_wrapper .gfield-choice-input:focus-visible,
.gform_wrapper .gform_button:focus-visible {
    outline: 3px solid var(--tomlin-blue);
    outline-offset: 3px;
}

/* The closed team modal must leave the tab order.
   It stays in the layout at `opacity: 0` so the panel can slide, which means
   its close button was still focusable: a keyboard user tabbed into an
   invisible dialog that `aria-hidden="true"` also told a screen reader was not
   there (axe `aria-hidden-focus`, serious). `visibility: hidden` removes the
   subtree from the tab order and is what `is-open` now toggles; the delay on
   the way out is what preserves the fade, since visibility must stay `visible`
   for the whole of the opacity transition and flip only once it has finished.
   `js/team-modal.js` sets `inert` alongside this — belt and braces, and the
   half that keeps working if a future edit reorders these declarations. */
.tib-team-modal {
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.tib-team-modal.is-open {
    visibility: visible;
    transition: opacity 0.35s ease, visibility 0s linear 0s;
}