/* ==========================================================================
   Triforte Ventures — custom overrides
   --------------------------------------------------------------------------
   ALL Triforte-specific styling goes in THIS file. Never edit style.css,
   responsive.css, vendors.css, or demos/elearning/elearning.css — those are
   vendor files from the Crafto template (ThemeZaa) and any edit there is
   destroyed the moment the template is updated.

   This file is loaded LAST in index.html and contact.html, so anything here
   wins over the template without needing !important.

   The template is built on CSS custom properties, so re-declaring a variable
   below re-skins every component that uses it in one line.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. BRAND TOKENS
   --------------------------------------------------------------------------
   Values come from the Triforte Brand Guidelines V2 (primary palette p.13,
   colour tones p.14, typography p.21). Change a value here to re-skin the
   whole site.
   -------------------------------------------------------------------------- */

:root {
    /* --- Triforte brand palette (guidelines p.13) --- */
    --triforte-navy:        #002147;  /* Oxford Blue */
    --triforte-orange:      #FD673A;  /* Smashed Pumpkin */
    --triforte-coral:       #FD673A;  /* kept as an alias; same colour */
    --triforte-chalk:       #FBFFFF;  /* Chalk White */

    /* --- Template variables the site actually uses --- */
    /* Re-declared here so brand changes happen in one place, not scattered
       across three vendor stylesheets. --orange drives the template's
       .text-orange / .bg-orange / .text-orange-hover utilities. */
    --orange:               #FD673A;
    --base-color:           #FD673A;
    /* Headings and dark text: Oxford Blue, replacing the template's
       green-grey #313e3b, which is not in the brand palette. */
    --dark-gray:            #002147;
    /* Body-copy grey: an Oxford Blue tone (guidelines p.14) at 5.9:1 on
       white, above the WCAG AA 4.5:1 minimum for body text. */
    --medium-gray:          #56657a;
    --footer-text:          #b6c0cc;  /* Oxford tone, 8.7:1 on Oxford Blue */

    /* --- Typography (guidelines p.21) ---
       Roboto is the brand typeface for both headings and body copy;
       Calistoga is reserved for the logo wordmark. Loaded in the <head>. */
    --alt-font:             'Roboto', sans-serif;
    --primary-font:         'Roboto', sans-serif;
}

/* Dark sections (About, footer) used the template's green-grey gradient;
   the brand calls for Oxford Blue. */
.bg-gradient-aztec-green {
    background-image: linear-gradient(to right bottom, #002147, #001d40, #001a39, #001733, #00142d);
}

/* The brand's "\ /" logo pattern (guidelines p.17), drawn faintly over the
   Oxford Blue sections the way the guidelines use it on dark pages. */
#about-us.bg-gradient-aztec-green,
footer.bg-gradient-aztec-green {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='80' viewBox='0 0 104 80'%3E%3Cg fill='%23ffffff' fill-opacity='0.025'%3E%3Cpath d='M6 12h11l15 36H21z'/%3E%3Cpath d='M86 12H75L60 48h11z'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(to right bottom, #002147, #001d40, #001a39, #001733, #00142d);
    background-size: 104px 80px, auto;
}

/* The template's tight tracking (ls-minus-*) was tuned for Space Grotesk;
   on Roboto it crushes the letters together. Ease it off on headings. */
.alt-font.ls-minus-1px,
.alt-font.ls-minus-2px,
.alt-font.ls-minus-3px,
h2.ls-minus-3px,
h2.ls-minus-2px {
    letter-spacing: -0.02em !important;
}

/* CTA band: Oxford Blue on Smashed Pumpkin is the brand's approved pairing
   (5.49:1, guidelines p.15); white on Pumpkin is only 2.93:1. */
footer .overlap-section h6.text-white {
    color: var(--triforte-navy) !important;
}
.bg-dark-gray,
.bg-dark-gray:focus {
    background-color: var(--triforte-navy);
}


/* --------------------------------------------------------------------------
   2. UTILITY CLASSES
   --------------------------------------------------------------------------
   The template ships .bg-orange / .text-orange but has no navy equivalents.
   These fill the gap so navy can be used in markup the same way.
   -------------------------------------------------------------------------- */

.bg-triforte-navy       { background-color: var(--triforte-navy); }
.text-triforte-navy     { color: var(--triforte-navy); }
.border-triforte-navy   { border-color: var(--triforte-navy) !important; }

.bg-triforte-orange     { background-color: var(--triforte-orange); }
.text-triforte-orange   { color: var(--triforte-orange); }

.text-triforte-navy-hover:hover     { color: var(--triforte-navy); }
.text-triforte-orange-hover:hover   { color: var(--triforte-orange); }


/* --------------------------------------------------------------------------
   3. COMPONENT OVERRIDES
   --------------------------------------------------------------------------
   Add page- and component-level tweaks below, newest at the bottom.
   Keep a short comment on each block saying WHAT it changes and WHY, so the
   next person doesn't have to reverse-engineer it.

   Example of the pattern:

     // Hero headline was wrapping awkwardly on tablet — tighten the measure.
     @media (max-width: 991px) {
         .hero-title { max-width: 22ch; }
     }
   -------------------------------------------------------------------------- */

/* Our Services — full-width grid, three across.
   Every service shows in full (title + description) rather than collapsing
   behind an accordion, so nothing needs a click to be read. The decorative
   tilt image was removed from this section: beside a long list it was
   stranded in dead whitespace, and dropping it lets the grid use the full
   measure.
   (The image itself still lives at images/our-services.jpg if wanted back.)

   Column count is Bootstrap's, not ours: row-cols-1 / md-2 / lg-3, so it
   reflows to two columns on tablet and one on phones. Horizontal and
   vertical spacing come from the g-4 gutter. */

.services-list .services-list-item {
    height: 100%;
}

.services-list .services-list-item p {
    line-height: 26px;
    color: var(--medium-gray);
}

/* A touch more air between rows than the gutter alone gives. */
@media (min-width: 768px) {
    .services-list {
        --bs-gutter-y: 2.5rem;
        --bs-gutter-x: 2.5rem;
    }
}


/* --------------------------------------------------------------------------
   Service card — hover + scroll-in interaction
   --------------------------------------------------------------------------
   Each service lifts slightly on hover, its heading turns orange, and an
   orange rule grows in from the left. No border or shadow: the client
   wants no card outline.
   -------------------------------------------------------------------------- */

.services-list .services-list-item {
    position: relative;
    padding: 22px 24px 24px;
    border-radius: 6px;
    background-color: #fff;
    transition: transform 300ms ease;
}

/* The rule that draws in from the left on hover. */
.services-list .services-list-item::before {
    content: "";
    position: absolute;
    left: 24px;
    bottom: 16px;
    width: 0;
    height: 2px;
    background-color: var(--triforte-orange);
    transition: width 350ms ease;
}

.services-list .services-list-item:hover {
    transform: translateY(-6px);
}

.services-list .services-list-item:hover::before {
    width: 44px;
}

/* The heading picks up brand orange on hover. */
.services-list .services-list-item span {
    transition: color 300ms ease;
}

.services-list .services-list-item:hover span {
    color: var(--triforte-orange);
}

/* Leave room for the rule so it never collides with the last line of text. */
.services-list .services-list-item p {
    padding-bottom: 14px;
}

/* Respect users who have asked the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
    .services-list .services-list-item,
    .services-list .services-list-item::before,
    .services-list .services-list-item span {
        transition: none;
    }
    .services-list .services-list-item:hover {
        transform: none;
    }
}


/* --------------------------------------------------------------------------
   Active menu item (driven by the scroll spy in js/triforte.js)
   --------------------------------------------------------------------------
   .active is set on whichever nav link matches the section under the header.
   Matching the template's own specificity (.navbar .navbar-nav .nav-link)
   so this wins without !important.
   -------------------------------------------------------------------------- */

.navbar .navbar-nav .nav-link.active {
    color: var(--triforte-orange);
    font-weight: 700;
}

/* The header sits over the dark hero before it turns sticky; keep the active
   item orange in that state too rather than inheriting the white link colour. */
.navbar.header-transparent .navbar-nav .nav-link.active,
header.sticky .navbar .navbar-nav .nav-link.active {
    color: var(--triforte-orange);
    font-weight: 700;
}

/* Over the dark hero, unselected links are a soft grey so the orange
   active item stands out; they brighten to white on hover. The sticky
   white header keeps its own dark grey. */
@media (min-width: 992px) {
    header:not(.sticky) .navbar.header-transparent .navbar-nav .nav-link:not(.active) {
        color: #b4bcc2;
    }
    header:not(.sticky) .navbar.header-transparent .navbar-nav .nav-link:not(.active):hover,
    header:not(.sticky) .navbar.header-transparent .navbar-nav .nav-link:not(.active):focus-visible {
        color: #fff;
    }
}

/* The template fades the active link to 60% opacity, which turned the
   orange a muddy brown over the dark hero. Keep it at full strength and
   add a short underline so the current section is clear at a glance. */
.navbar .navbar-nav .nav-link.active {
    opacity: 1 !important;
    position: relative;
}
@media (min-width: 992px) {
    .navbar .navbar-nav .nav-link.active::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: calc(50% - 18px);
        width: 18px;
        height: 2px;
        margin-left: -9px;
        border-radius: 2px;
        background-color: var(--triforte-orange);
    }
}


/* --------------------------------------------------------------------------
   Mobile menu drawer (behaviour in js/triforte.js)
   --------------------------------------------------------------------------
   Replaces the template's slide-in panel. A right-hand drawer over a
   dimmed page: logo and close at the top, links straight underneath,
   then the ways to get in touch. Navy is the brand's deep blue; the
   current section is marked in orange with a bar, not by fading the rest.
   -------------------------------------------------------------------------- */

/* Template toggler off; ours on, below desktop. */
@media (max-width: 991px) {
    .navbar .navbar-toggler { display: none !important; }
}

.drawer-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}
.drawer-toggle span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background-color: var(--dark-gray);
}
.drawer-toggle span:nth-child(2) { width: 70%; margin-left: auto; }

/* The header shares the page's .container so the logo and phone number line
   up with the hero and section content. Its columns carry their own 15px
   gutter, so drop the container's padding to avoid doubling it. */
header .navbar > .container {
    padding-left: 0;
    padding-right: 0;
}

/* The logo PNG has 16px of transparent space on its left; pull it back so
   the visible mark sits on the content edge. */
header .navbar-brand {
    margin-left: -16px;
}

/* Keep the header phone number on one line. */
header .header-icon a {
    white-space: nowrap;
}

/* Desktop: the logo and phone columns share the leftover width equally, so
   the menu stays centred and the phone number gets the room it needs
   instead of a fixed one-sixth that made it wrap. */
@media (min-width: 992px) {
    header .navbar > .container > .col-lg-2 {
        flex: 1 1 0;
        width: auto;
        max-width: none;
    }
    header .navbar > .container > .col-lg-2.text-end {
        justify-content: flex-end;
    }
}

/* Below desktop the template gives the header a solid white bar, so the
   toggle is always dark; centre it in that bar. */
@media (max-width: 991px) {
    header .navbar .menu-order {
        display: flex;
        align-items: center;
        /* Pull the button out by its padding so the bars, not the button
           box, line up with the content edge. */
        margin-right: -10px;
    }
}

.site-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background-color: rgba(0, 18, 38, 0.55);
    opacity: 0;
    transition: opacity 300ms ease;
}
.site-drawer-backdrop.is-open { opacity: 1; }

.site-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    width: min(86vw, 380px);
    height: 100%;
    height: 100dvh;
    padding: 0 24px calc(24px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--triforte-navy);
    color: #fff;
    box-shadow: -20px 0 50px rgba(0, 0, 0, 0.25);
    transform: translateX(100%);
    transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.site-drawer.is-open { transform: translateX(0); }
.site-drawer[hidden],
.site-drawer-backdrop[hidden] { display: none; }

/* Page behind doesn't scroll while the drawer is open. */
html.drawer-open,
html.drawer-open body {
    overflow: hidden;
}

.site-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 76px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.site-drawer-logo img { height: 36px; width: auto; }
.site-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    transition: background-color 200ms ease;
}
.site-drawer-close:hover { background-color: rgba(255, 255, 255, 0.1); }

.site-drawer-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-drawer-nav li + li { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.site-drawer-nav a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 56px;
    padding-left: 16px;
    font-family: var(--alt-font);
    font-size: 22px;
    font-weight: 500;
    color: #fff;
    transition: color 200ms ease;
}
.site-drawer-nav a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 3px;
    background-color: var(--triforte-orange);
    transform: translateY(-50%);
    transition: height 200ms ease;
}
.site-drawer-nav a:hover { color: var(--triforte-orange); }
.site-drawer-nav a.active { color: var(--triforte-orange); font-weight: 600; }
.site-drawer-nav a.active::before { height: 24px; }

.site-drawer-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    padding-top: 28px;
}
.site-drawer-call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    border-radius: 50px;
    background-color: var(--triforte-orange);
    color: var(--triforte-navy);
    font-weight: 600;
    font-size: 16px;
}
.site-drawer-call:hover { background-color: #fff; color: var(--triforte-navy); }
.site-drawer-email {
    display: block;
    padding: 6px 0;
    text-align: center;
    color: #fff;
    font-size: 15px;
    overflow-wrap: anywhere;
}
.site-drawer-address {
    margin: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 22px;
}

/* Never shown at desktop widths, even if left open across a resize. */
@media (min-width: 992px) {
    .site-drawer,
    .site-drawer-backdrop,
    .drawer-toggle { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .site-drawer,
    .site-drawer-backdrop { transition: none; }
}


/* --------------------------------------------------------------------------
   Hero actions (index + contact)
   --------------------------------------------------------------------------
   The hero had no way to act on it. Two buttons: the page's main route
   (orange) and the direct line (outline). Centred under the centred mobile
   copy, left-aligned with the desktop copy.
   -------------------------------------------------------------------------- */

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.hero-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
}

.hero-actions .btn i {
    margin: 0;
    font-size: 16px;
}

.hero-actions .btn.btn-large {
    font-size: 15px;
    font-weight: 600;
    padding: 14px 26px;
}

/* Navy on orange: the logo's own pairing, and 5.7:1. White on this orange
   is only 2.8:1, and the template's default dark grey 3.6:1 — but white
   is the client's call, so the label is white and the hover state (white
   fill, navy text) carries the contrast. */
.hero-actions .btn.btn-base-color {
    color: #fff;
}
.hero-actions .btn.btn-base-color:hover {
    background-color: #fff;
    border-color: #fff;
    color: var(--triforte-navy);
}

@media (min-width: 992px) {
    .hero-actions { justify-content: flex-start; }

    /* Sit the title and buttons a little below centre, so they read as
       anchored in the photo rather than floating near the header. */
    section.full-screen:first-of-type .col-lg-6.h-100 {
        padding-top: 30vh;
    }
}

/* Phones: both buttons on one row, equal width. The call button's label
   shortens to "Call us" here (markup swaps it) so the pair fits. */
@media (max-width: 575px) {
    .hero-actions {
        flex-wrap: nowrap;
        gap: 10px;
        width: 100%;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }
    .hero-actions .btn {
        flex: 1 1 0;
        justify-content: center;
        min-height: 50px;
        white-space: nowrap;
    }
    .hero-actions .btn.btn-large {
        padding: 12px 14px;
    }
}


/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

/* Readable grey on the dark green: the template's grey measured ~3.5:1. */
footer .footer-dark,
footer .footer-dark p,
footer .footer-dark .lh-26,
footer .footer-dark ul li a {
    color: var(--footer-text);
}
footer .footer-dark ul li a:hover {
    color: #fff;
}

/* The orange call-to-action band. Its decorative swoosh is near-white, and
   on narrow screens the white phone number landed right on top of it and
   vanished. The number is now a solid-backed pill so it reads on any part
   of the band, at any width. */
footer .overlap-section .left-icon a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 50px;
    background-color: var(--triforte-navy);
    color: #fff;
    transition: background-color 300ms ease, color 300ms ease;
}
footer .overlap-section .left-icon a:hover,
footer .overlap-section .left-icon a:focus-visible {
    background-color: #fff;
    color: var(--triforte-navy);
}
footer .overlap-section .left-icon a i {
    margin: 0;
}

/* Long email address: keep it on one line on tablet, where the column is
   narrowest, instead of breaking at "triforteventures." */
@media (min-width: 768px) and (max-width: 1199px) {
    footer .footer-dark a[href^="mailto:"] { font-size: 15px; }
}

/* Copyright bar: one centred line under a hairline, on every page. */
footer .footer-bottom {
    margin-top: 10px;
}


/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */

/* The embed had a fixed 1190px width, so on phones the visible slice was
   empty map with the pin far off to the right. Fill the frame instead. */
#map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}


/* --------------------------------------------------------------------------
   Accessibility floor
   -------------------------------------------------------------------------- */

/* Visible keyboard focus, in brand orange, without showing on mouse click. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--triforte-orange);
    outline-offset: 3px;
}

/* Several decorative images are positioned past the screen edge
   (left: -100px etc.). The template clips them on <body> only, which iOS
   Safari ignores, so the page could be dragged sideways on iPhones.
   "clip" (unlike "hidden") doesn't create a scroll container, so the
   sticky header keeps working. */
html,
body {
    overflow-x: hidden;
    overflow-x: clip;
}

/* In-page links land the section heading below the sticky header, not
   under it. */
section[id] {
    scroll-margin-top: 90px;
}

/* The template animates every section in with anime.js and ignores the OS
   "reduce motion" setting. Show that content in place instead. */
@media (prefers-reduced-motion: reduce) {
    [data-anime],
    [data-anime] > * {
        opacity: 1 !important;
        transform: none !important;
    }
}


/* --------------------------------------------------------------------------
   4. RESPONSIVE
   --------------------------------------------------------------------------
   The template's breakpoints, for reference when writing media queries:
     xs  < 576px      sm  ≥ 576px      md  ≥ 768px
     lg  ≥ 992px      xl  ≥ 1200px     xxl ≥ 1400px
   -------------------------------------------------------------------------- */

/* ---- Tablet and below ---- */
@media (max-width: 991px) {
    .hero-actions { margin-bottom: 10px; }
}

/* ---- Phones ---- */
@media (max-width: 767px) {
    /* Services: a compact divided list instead of eight loose cards. Titles
       line up with the section heading, a hairline separates each service,
       and a small orange marker leads each title. Hover effects are moot on
       touch, so the hover rule is dropped. */
    .services-list {
        --bs-gutter-y: 0;
    }
    .services-list > .col:last-child .services-list-item {
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }
    .services-list .services-list-item {
        padding: 16px 0 16px 18px;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 0;
    }
    .services-list .services-list-item::before {
        display: none;
    }
    .services-list .services-list-item span {
        position: relative;
        font-size: 17px;
    }
    .services-list .services-list-item span::before {
        content: "";
        position: absolute;
        left: -18px;
        top: 50%;
        width: 8px;
        height: 8px;
        margin-top: -4px;
        border-radius: 2px;
        background-color: var(--triforte-orange);
    }
    .services-list .services-list-item p {
        padding-bottom: 0;
        line-height: 24px;
    }
    .services-list .services-list-item:hover {
        transform: none;
    }

    /* Contact card: one even 30px gap below the map. The map sits in two
       nested columns that each add their own 30px bottom margin. */
    #map {
        height: 360px !important;
    }
    .col-12.sm-mb-30px > .col-12.sm-mb-30px {
        margin-bottom: 0 !important;
    }

    /* Footer: left-aligned and two-up where it fits, so it no longer
       scrolls on as one long centred column. */
    footer .footer-dark {
        padding-left: 24px;
        padding-right: 24px;
        text-align: left !important;
    }
    footer .footer-dark > .row:first-child {
        row-gap: 26px;
        margin-bottom: 22px !important;
    }
    footer .footer-dark > .row:first-child > [class*="col-"] {
        margin-bottom: 0 !important;
        padding-left: calc(var(--bs-gutter-x) * .5) !important;
        text-align: left !important;
    }
    /* Logo block spans the row; the social links sit beside the tagline. */
    footer .footer-dark > .row:first-child > :nth-child(1) {
        flex: 0 0 100%;
        max-width: 100%;
    }
    footer .footer-dark .elements-social { margin-top: 12px !important; }
    footer .footer-dark .elements-social ul { justify-content: flex-start; }
    /* Menu and location side by side; contact details full width. */
    footer .footer-dark > .row:first-child > :nth-child(2),
    footer .footer-dark > .row:first-child > :nth-child(4) {
        flex: 0 0 50%;
        max-width: 50%;
    }
    footer .footer-dark > .row:first-child > :nth-child(3) {
        flex: 0 0 100%;
        max-width: 100%;
        order: 5;
    }
    footer .footer-dark > .row:first-child > :nth-child(4) .mb-20px {
        margin-bottom: 10px !important;
    }
    /* Comfortable tap targets for the stacked links. */
    footer .footer-dark ul li a {
        display: inline-block;
        padding: 4px 0;
    }
    footer .footer-dark a[href^="tel:"],
    footer .footer-dark a[href^="mailto:"] {
        display: inline-block;
        padding: 4px 0;
    }
    /* On phones the orange band directly above already carries the phone
       number and the "trusted source" line, so the footer doesn't repeat
       them. */
    footer .footer-dark > .row:first-child > :nth-child(1) > p,
    footer .footer-dark > .row:first-child > :nth-child(3) > span:nth-child(2),
    footer .footer-dark > .row:first-child > :nth-child(3) > span:nth-child(3),
    footer .footer-dark > .row:first-child > :nth-child(3) > span:nth-child(4) {
        display: none !important;
    }
    footer .footer-dark .footer-logo { margin-bottom: 0 !important; }
    /* Logo left, social links right, on one line. */
    footer .footer-dark > .row:first-child > :nth-child(1) {
        flex-direction: row !important;
        align-items: center;
        justify-content: space-between;
    }
    footer .footer-dark > .row:first-child > :nth-child(1) .elements-social {
        margin-top: 0 !important;
    }

    /* "Need help?": both lines of each pair read as one item. */
    footer .footer-dark > .row:first-child > :nth-child(3) .lh-26 {
        line-height: 22px;
    }
    footer .footer-dark > .row:first-child > :nth-child(3) .mb-10px {
        margin-bottom: 6px !important;
    }
    footer .footer-bottom {
        padding-top: 20px !important;
    }

    /* CTA band: a little less padding, and the phone pill on its own line
       with room to tap. */
    footer .cta-band > .container {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }
    footer .cta-band {
        margin-bottom: 40px !important;
    }
    footer .overlap-section .left-icon {
        margin-top: 14px !important;
    }
}

/* ---- Small phones ---- */
@media (max-width: 575px) {
    /* The mission photo was 350px tall here, pushing the statement itself
       below the fold. */
    #about-us .services-box-img {
        height: 220px !important;
    }

    /* Hero: was a 276px strip with the photo barely visible. Give it most
       of the first screen, anchor the title and buttons to the bottom over
       a dark fade, and left-align so it reads with every section below. */
    section.full-screen:first-of-type {
        min-height: calc(100svh - 160px);
        display: flex;
        align-items: flex-end;
        padding-bottom: 32px !important;
        background-position: 62% center !important; /* .cover-background is !important */
    }
    section.full-screen:first-of-type::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0, 18, 38, 0) 30%, rgba(0, 18, 38, 0.85) 100%);
        pointer-events: none;
    }
    section.full-screen:first-of-type > .container {
        position: relative;
        z-index: 1;
        height: auto !important;
        width: 100%;
    }
    section.full-screen:first-of-type .row,
    section.full-screen:first-of-type .col-md-12 {
        height: auto !important;
    }
    section.full-screen:first-of-type .col-md-12 {
        text-align: left !important;
        margin: 0 !important;
    }
    section.full-screen:first-of-type .col-md-12 > span.alt-font {
        font-size: 50px !important;
        line-height: 0.98 !important;
        letter-spacing: -2px !important;
        margin-bottom: 24px !important;
    }
    /* The orange blob reads as a smudge at this size. */
    section.full-screen:first-of-type > .left-minus-80px {
        display: none;
    }
    .hero-actions {
        max-width: none;
        margin-bottom: 0;
    }

    /* Core values: the huge faint numerals pushed every value 30px in from
       the section heading. Bring the text to the edge and show the number
       as a small orange label above each title. */
    #down-section .feature-box {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #down-section .feature-box-icon {
        position: static !important;
    }
    #down-section .feature-box-icon h2 {
        font-size: 13px !important;
        line-height: 1 !important;
        letter-spacing: 1.5px !important;
        color: var(--triforte-orange);
        opacity: 1 !important;
        margin-bottom: 10px !important;
    }
    #down-section .feature-box-content {
        padding-top: 0 !important;
    }
    #down-section .row-cols-auto > .col {
        width: 100%;
        margin-top: 0 !important;
        padding-top: 22px;
        padding-bottom: 22px;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }
    #down-section .row-cols-auto > .col:first-child {
        border-top: 0;
        padding-top: 4px;
    }
    #down-section .feature-box-content > span.bg-orange {
        display: none !important;
    }

    /* CTA band: two equal, full-width buttons instead of a narrow white
       pill over a wider navy one. */
    footer .overlap-section .col-auto {
        width: 100%;
    }
    footer .overlap-section .col-auto > .btn,
    footer .overlap-section .left-icon a {
        display: flex !important;
        justify-content: center;
        width: 100%;
        min-height: 52px;
        margin: 0 !important;
    }
    footer .overlap-section .left-icon {
        display: block !important;
        width: 100%;
    }

    /* Footer content on the same 15px edge as the rest of the page. */
    footer .footer-dark {
        padding-left: 21px;
        padding-right: 21px;
    }
}


/* --------------------------------------------------------------------------
   Brand display face: Calistoga for headings (guidelines p.21)
   --------------------------------------------------------------------------
   Calistoga ships in a single weight, so headings are set at 400 to avoid
   the browser faking a bold. The menu, buttons, service titles and small
   labels stay in Roboto for legibility. The core-value numerals (01–04) are
   decorative and stay Roboto too.
   -------------------------------------------------------------------------- */

:root {
    --display-font:         'Calistoga', 'Roboto', serif;
}

h1, h2,
section.full-screen:first-of-type .col-md-12 > span.alt-font,
section:first-of-type span.alt-font.fs-75 {
    font-family: var(--display-font) !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
}

#down-section .feature-box-icon h2 {
    font-family: var(--primary-font) !important;
    font-weight: 700 !important;
}

/* The strap-line above the footer and the CTA band heading read too heavy
   in Calistoga (it has no lighter cut), so they are Roboto Medium. */
h4.alt-font,
.marquee-slide .alt-font,
footer .cta-band h6 {
    font-family: var(--primary-font) !important;
    font-weight: 500 !important;
}


/* --------------------------------------------------------------------------
   Orange call-to-action band
   --------------------------------------------------------------------------
   Runs edge to edge; its content sits in the page container with the
   heading on the left and the buttons on the right. The padding lives on
   the inner container because main.js measures the band's first child to
   work out how far it overlaps the section above.
   -------------------------------------------------------------------------- */

footer .cta-band {
    margin-bottom: 80px;
}
footer .cta-band > .container {
    padding-top: 34px;
    padding-bottom: 34px;
}
footer .cta-band .row {
    row-gap: 18px;
}


/* --------------------------------------------------------------------------
   Contact hero photo
   --------------------------------------------------------------------------
   A landscape shot with the subject at the left edge. Anchor it to the top
   so the smile is never trimmed on wide screens, and on phones frame the
   face rather than the jacket.
   -------------------------------------------------------------------------- */

section.full-screen.hero-contact {
    background-position: center top !important; /* .cover-background is !important */
}
@media (max-width: 575px) {
    section.full-screen.hero-contact {
        background-position: 26% top !important;
    }
}