/* CSS variables and default colours for tenant themes */
:root {
    /* Hero paragraph measure. One value for every design, because a ch-based
       measure resolves against each theme's own font and produced a 480-694px
       spread across the nine — visibly inconsistent side by side in the design
       gallery. 590px is Bold's rendered width, which is the reference. */
    --hero-text-measure: 590px;

    /* Hero content span. Every design lays its hero out across this width, so
       the nine line up in the design gallery: a full-text design fills it with
       the headline, an image design fills it with the text and picture columns
       together. 1296px is the Bootstrap container's inner width
       (1320px container less the 24px gutter), which most of the designs
       already resolve to through .container. */
    --hero-span: 1296px;

    /* A hero that breaks out of .container to a 100vw bleed sizes itself with
       max-width instead, which only produces a gutter once the viewport is
       wider than the max-width. Those heroes pad by --hero-bleed-gutter and
       add it back to the max-width, so the content box still resolves to
       --hero-span on a wide screen and never touches the edge on a narrow
       one. */
    --hero-bleed-gutter: 1.5rem;

    /* Hero sub-heading indent. The paragraph and the buttons step in together,
       so the headline alone holds the left edge; indenting the paragraph on its
       own leaves the buttons flush and reads as a misalignment. Zeroed on
       phones, where the page gutter is already most of the width available. */
    --hero-text-indent: 1.5rem;

    --brand-primary:   #1e3a8a;
    --brand-secondary: #1e3a8a;
    --brand-accent:    var(--brand-secondary);
    --hero-overlay-strength: 1;
    --brand-bg:        #ffffff;
    --brand-font:      'Inter', sans-serif;
    --brand-hero-bg:   var(--brand-primary);  /* alias — keeps old references working */

    /* 30 July 2026 — replaces hero-contrast.js's computed variables.
       These three are genuine tenant choices (CompanyProfile.hero_text_color,
       highlight_bg_color, highlight_text_color), set directly per-tenant by
       base_tenant.html's own inline <style> block. The values below are just
       static safety-net fallbacks in case that block ever fails to render —
       not real defaults anyone should expect to see live. */
    --brand-hero-text:      #ffffff;
    --brand-highlight-bg:   #f8f9fa;
    --brand-highlight-text: #0f172a;
}

/* Executive — corporate navy */
.theme-executive {
    --brand-primary:   #0f172a;
    --brand-secondary: #0f172a;
    --brand-bg:        #ffffff;
    --brand-font:      'Inter', sans-serif;
    --brand-hero-bg:   var(--brand-primary);
}

/* Executive — restrained, authoritative, zero decoration */
/* Executive — restrained, authoritative, zero decoration.
   No navbar border needed any more — the navbar now matches the hero
   colour by default (see the base .agency-site .navbar rule below), so
   a border-bottom using --brand-primary would be invisible against a
   background using the same variable. */

.theme-executive .hero-section {
    padding: 5rem 0;
}

.theme-executive .hero-title {
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -1px;
}

.theme-executive .hero-text {
    font-size: 1.1rem;
    line-height: 1.75;
    max-width: var(--hero-text-measure);
}

/* Executive job cards — sharp corners, strong left border accent */
.theme-executive .job-card,
.theme-executive .job-card-preview {
    border-radius: 0;
    border-left: 3px solid var(--brand-primary);
    border-top: 1px solid color-mix(in srgb, var(--brand-primary) 8%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--brand-primary) 8%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--brand-primary) 8%, transparent);
}

.theme-executive .job-card:hover,
.theme-executive .job-card-preview:hover {
    transform: translateX(3px) translateY(-2px);
}

/* Executive highlight cards — filled with the tenant's own highlight
   colour (30 July 2026, replaces the old transparent/outlined-only
   treatment), keeping the distinctive border accent on top. */
.theme-executive .why-work-card {
    background-color: var(--brand-highlight-bg);
    border: 2px solid var(--brand-primary);
    border-radius: 0;
}

.theme-executive .why-work-card.why-work-card,
.theme-executive .why-work-card.why-work-card h3,
.theme-executive .why-work-card.why-work-card p {
    color: var(--brand-highlight-text);
}

/* Startup — bold modern */
.theme-startup {
    --brand-primary:   #1c1917;
    --brand-secondary: #1c1917;
    --brand-bg:        #ffffff;
    --brand-font:      'Plus Jakarta Sans', sans-serif;
    --brand-hero-bg:   var(--brand-primary);
}

/* Startup — energetic, oversized type, punchy accents */
/* Startup — energetic, oversized type, punchy accents.
   No navbar shadow needed — matches the hero colour by default now
   (see the base .agency-site .navbar rule below), so there's no seam
   between navbar and hero left to visually separate. */

.theme-startup .hero-section {
    padding: 5rem 0 4rem;
}

/* Matches .theme-executive above. This was an oversized stacked headline
   (clamp(2.8rem, 7vw, 5.5rem), line-height 1.0, letter-spacing -2px) — the
   design's personality came from sheer scale. Brought into line 25 August 2026
   so the Layout step reads cleanly: "Picture to the left" selects Startup and
   "to the right" selects Executive, and a question about photo placement
   should not also jump the headline size. Changes any live tenant on this
   template that has not overridden it; confirmed with Christina that none
   currently use it. */
.theme-startup .hero-title {
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -1px;
}

.theme-startup .hero-text {
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: var(--hero-text-measure);
    font-weight: 300;
}

/* Startup — pill buttons to contrast the sharp headline */
.theme-startup .hero-actions .site-button {
    border-radius: 100px;
    padding-left: 2rem;
    padding-right: 2rem;
    font-weight: 700;
    letter-spacing: 0.2px;
}

/* Startup job cards — rounded, card-like, with hover lift */
.theme-startup .job-card,
.theme-startup .job-card-preview {
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 7%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-primary) 4%, transparent);
}

.theme-startup .job-card:hover,
.theme-startup .job-card-preview:hover {
    box-shadow: 0 12px 28px color-mix(in srgb, var(--brand-primary) 10%, transparent);
    transform: translateY(-4px);
    border-color: transparent;
}

/* Startup highlight cards — pill shape, brand fill */
.theme-startup .why-work-card {
    border-radius: 16px;
    background-color: var(--brand-highlight-bg);
}

/* Startup — image gets a rounded clip to match card style */
.theme-startup .hero-img-styled {
    border-radius: 16px;
}

/* wrapper - resets colours from. picker  */

.agency-site {
    background-color: var(--brand-bg);
    font-family: var(--brand-font);
    color: var(--brand-secondary);
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
}


/* hero section */

.agency-site .hero-section {
    background-color: var(--brand-primary);
    color: var(--brand-hero-text);
}

.agency-site .hero-section h1,
.agency-site .hero-section h2,
.agency-site .hero-section h3,
.agency-site .hero-section h4,
.agency-site .hero-section h5,
.agency-site .hero-section h6,
.agency-site .hero-section p,
.agency-site .hero-section .lead,
.agency-site .hero-section .hero-title,
.agency-site .hero-section .hero-text,
.agency-site .hero-section .display-3 {
    color: var(--brand-hero-text);
}

/* Margin rather than padding: the box is border-box, so padding would come out
   of --hero-text-measure and narrow the text instead of moving it. */
.agency-site .hero-section .hero-text,
.agency-site .hero-section .hero-actions {
    margin-inline-start: var(--hero-text-indent);
}

@media (max-width: 575.98px) {
    .agency-site .hero-section .hero-text,
    .agency-site .hero-section .hero-actions {
        margin-inline-start: 0;
    }
}

.agency-site .hero-section .site-button-primary {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
    color: var(--brand-bg);
}
.agency-site .hero-section .site-button-primary:hover {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
    opacity: 0.88;
}

.agency-site .hero-section .site-button-secondary {
    border-color: var(--brand-hero-text);
    color: var(--brand-hero-text);
    background-color: transparent;
}
.agency-site .hero-section .site-button-secondary:hover {
    background-color: color-mix(in srgb, var(--brand-hero-text) 15%, transparent);
    border-color: var(--brand-hero-text);
}


/* Homepage text */

.agency-site section:not(.hero-section) h1,
.agency-site section:not(.hero-section) h2,
.agency-site section:not(.hero-section) h3,
.agency-site section:not(.hero-section) h4,
.agency-site section:not(.hero-section) h5,
.agency-site section:not(.hero-section) h6,
.agency-site section:not(.hero-section) p,
.agency-site section:not(.hero-section) li,
.agency-site section:not(.hero-section) .lead,
.agency-site .card h1,
.agency-site .card h2,
.agency-site .card h3,
.agency-site .card h4,
.agency-site .card p {
    color: var(--brand-secondary);
}


/* Tenant buttons use semantic classes so Bootstrap never supplies fixed colours. */

.agency-site .site-button {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--sharp-radius, 6px);
    cursor: pointer;
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    line-height: 1.5;
    padding: .65rem 1.25rem;
    text-align: center;
    text-decoration: none;
    transition: opacity .15s ease, background-color .15s ease, color .15s ease;
}

.agency-site .site-button-large { font-size: 1.1rem; padding: .75rem 1.5rem; }
.agency-site .site-button-small { font-size: .875rem; padding: .4rem .8rem; }
.agency-site .site-button-block { width: 100%; }

.agency-site .site-button-primary {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
    color: var(--brand-bg);
}
.agency-site .site-button-primary:hover {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
    opacity: 0.88;
}

.agency-site .site-button-secondary {
    border-color: var(--brand-accent);
    color: var(--brand-accent);
    background-color: transparent;
}
.agency-site .site-button-secondary:hover {
    background-color: var(--brand-accent);
    color: var(--brand-bg);
}



/* hero buttons */

.agency-site .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}


/* navbar — matches the hero colour by default across every theme, so
   there's no seam between navbar and hero to visually separate (the
   root cause of the recurring Pulse "line" issue). Uses --brand-hero-bg
   (an existing alias for --brand-primary) and --brand-hero-text — the
   exact same variables the hero section itself already uses, not new
   ones, so navbar and hero are always guaranteed to match, not just
   coincidentally similar.

   These rules win on specificity alone. Bootstrap's .navbar component
   sets its colours through --bs-navbar-* custom properties rather than
   declarations, so a two-class selector here beats it without needing
   !important on any property. */

.agency-site .navbar {
    padding: 1.5rem 0;
    border-bottom: none;
    background-color: var(--brand-hero-bg);
}

.agency-site .navbar-brand {
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--brand-hero-text);
    gap: 0.6rem;
}

/* Hierarchy from size and weight, never from lowered contrast. An opacity here
   dims the link against the navbar it sits on and makes hover buy that contrast
   back; the underline carries the hover instead, so the resting state is already
   at full strength. Reserved with a transparent colour so nothing reflows. */
.agency-site .nav-link {
    color: var(--brand-hero-text);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s ease;
}
.agency-site .nav-link:hover {
    color: var(--brand-hero-text);
    text-decoration-color: currentColor;
}

/* Hamburger toggler icon — matches the hero text colour on every theme
   by default, EXCEPT Impact and Pulse. Bootstrap's toggler icon is a
   background SVG with the line colour baked into the data URI itself,
   so it can't pick up --brand-hero-text directly. Using the same SVG
   as a mask instead of a background image means only its shape is
   used; the actual colour comes from background-color below, which is
   free to reference the CSS variable and always matches whatever
   hero_text_color is set to for that tenant.

   Impact and Pulse are deliberately excluded — impact-navbar.js
   (marketing/static/marketing/js/impact-navbar.js, loaded by both
   templates) already handles this for them, and it works by writing
   --bs-navbar-toggler-icon-bg as an INLINE style directly onto the
   .navbar-toggler-icon element with the colour baked into the SVG
   stroke itself. Since this rule's mask-image also reads
   var(--bs-navbar-toggler-icon-bg) on that same element, an inline
   value would flow straight into the mask source — and depending on
   whether the browser treats that mask as alpha or luminance (not
   something to assume either way), a dark hero_text_color could make
   the icon read as mostly transparent and disappear. Rather than rely
   on browser mask-mode behaviour holding one way, this rule simply
   never applies to the two themes the script already owns. */
.agency-site:not(.theme-impact):not(.theme-pulse) .navbar-toggler-icon {
    background-image: none;
    -webkit-mask-image: var(--bs-navbar-toggler-icon-bg);
    mask-image: var(--bs-navbar-toggler-icon-bg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    background-color: var(--brand-hero-text);
}


/* pics */

.hero-img-styled, .about-image, .preview-hero-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* Premium page slots only (TICKET-140/141) — deliberately smaller and
   centred within its column, unlike About's own photo (.about-image
   above), which stays full width. A full-bleed photo read as too
   heavy/dominant next to body text on these three pages specifically;
   About's photo was tried with the same cap and it looked squashed, so
   it was reverted — these are now two fully independent classes, not a
   shared one with an override, precisely so a future change to one
   can't accidentally affect the other again.

   Both max-width AND max-height are set (not just max-width) so a tall
   portrait photo is capped on its height too, not just a wide landscape
   one on its width. This combination is standard, spec-defined
   replaced-element sizing (CSS2.1 §10.4): when width is definite and
   height is auto, if the height computed from width+aspect-ratio would
   exceed max-height, the browser uses max-height and recomputes width
   from that — so the image still shrinks correctly on narrow mobile
   columns (via width:100%) and stays within a roughly 380×380 box on
   both orientations, with no distortion and no JS. */
/* Premium page slots only (TICKET-140/141) — deliberately smaller and
   centred within its column, unlike About's own photo (.about-image
   above), which stays full width.

   width/height are both 'auto' here, NOT a percentage — this is the
   part that actually matters and was wrong in an earlier version of
   this rule (width: 100% + max-height together). A percentage width is
   a DEFINITE value to the browser, not open for renegotiation — so
   combining it with max-height just clips the rendered box at
   max-height while width stays at whatever the percentage resolved to,
   which stretches/distorts the image rather than scaling it cleanly.
   The aspect-ratio-preserving recomputation this rule actually relies
   on (CSS2.1 §10.4's replaced-element algorithm: if the auto-computed
   height would exceed max-height, use max-height and recompute width
   from that) only triggers when width itself is genuinely 'auto'.
   Found the hard way — reported back as "still looking a bit squashed"
   after the first version of this rule shipped, which was this exact
   distortion, not a matter of taste about size.

   max-width uses min() to combine an absolute cap (380px) with a
   responsive one (100% of the column) into the single value max-width
   can hold — without the 100% term, a narrow mobile column would
   overflow, since max-width alone only ever shrinks, never grows to
   fill available space. */
.pageslot-image {
    width: auto;
    height: auto;
    max-width: min(380px, 100%);
    max-height: 380px;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
}

/* Top/bottom placement variant — applied as an ADDITIONAL class
   alongside .pageslot-image (e.g. class="pageslot-image
   pageslot-image-banner"), not a replacement for it. Top/bottom rows
   have no text sharing the row — unlike left/right, which sits in a
   half-width column next to body text — so a much wider cap reads as a
   deliberate banner rather than a small photo floating in empty space.
   "Bottom" gets the exact same allowances as "top". Explicit
   double-class selector (not relying on source order alone) matches
   the .why-work-card.why-work-card-inverted pattern further down this
   file for the same reason: guarantees the override regardless of
   where either rule ends up relative to the other. */
.pageslot-image.pageslot-image-banner {
    max-width: min(700px, 100%);
    max-height: 450px;
}

.agency-site .about-header {
    padding: 4rem 0 2rem;
}

.agency-site .about-content-section {
    padding: 3rem 0 5rem;
}

.agency-site .page-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--brand-secondary);
    letter-spacing: -0.5px;
}

.agency-site .lead-text {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--brand-secondary);
    margin-bottom: 2rem;
}

.agency-site .about-cta {
    margin-top: 2rem;
}

.agency-site .about-image-placeholder,
.agency-site .pageslot-image-placeholder {
    background-color: color-mix(in srgb, var(--brand-primary) 8%, var(--brand-bg));
    border: 1px solid color-mix(in srgb, var(--brand-primary) 20%, transparent);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.agency-site .about-image-placeholder {
    width: 100%;
    min-height: 300px;
}

.agency-site .pageslot-image-placeholder {
    width: 100%;
    max-width: 380px;
    min-height: 220px;
    margin: 0 auto;
}

/* Top/bottom placement variant for the premium-page empty-state
   placeholder — same reasoning and numbers as .pageslot-image.pageslot-
   image-banner above, so an un-uploaded slot looks proportionate to
   what the real banner-sized image will look like once one is added. */
.agency-site .pageslot-image-placeholder.pageslot-image-placeholder-banner {
    max-width: 700px;
    min-height: 320px;
}

.agency-site .about-image-placeholder .placeholder-text {
    color: var(--brand-secondary);
    opacity: 0.4;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}


/* jobs */

.job-card, .job-card-preview {
    border: 1px solid color-mix(in srgb, var(--brand-primary) 10%, transparent);
    padding: 1.5rem;
    transition: all 0.3s ease;
    height: 100%;
    background: var(--brand-bg);
}

.job-card:hover, .job-card-preview:hover {
    border-color: var(--brand-primary);
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--brand-primary) 5%, transparent);
}
/* Card headings */
.agency-site .job-card h3,
.agency-site .job-card h4,
.agency-site .job-card-preview h3,
.agency-site .job-card-preview h4 {
    color: var(--brand-secondary);
}

/* card-brand — job list cards and job detail card */
.agency-site .card-brand {
    border: 1px solid color-mix(in srgb, var(--brand-secondary) 15%, transparent);
    border-radius: var(--sharp-radius, 2px);
    transition: all 0.3s ease;
    background: var(--brand-bg);
    color: var(--brand-secondary);
}

.agency-site .card-brand:hover {
    border-color: var(--brand-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -4px color-mix(in srgb, var(--brand-primary) 8%, transparent);
}




.agency-site .job-description-content {
    padding-bottom: 1rem;
}

.agency-site .job-main-text {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--brand-secondary);
    overflow-wrap: break-word;
}

.agency-site .job-summary {
    font-size: 1rem;
    font-style: italic;
    line-height: 1.7;
    color: var(--brand-secondary);
}


/* Every use of this class in the templates also carries .small, so the size
   difference already de-emphasises it. An opacity on top only costs contrast. */
.agency-site .muted-text {
    color: var(--brand-secondary);
}


/* Why Work With Us cards — specificity (0,3,0) beats section:not(.hero-section) p at (0,2,2) */

.agency-site .why-work-card {
    /* Was p-4 on the element, same reason as the sections above. */
    padding: 1.5rem;
    background-color: var(--brand-highlight-bg);
}

.agency-site .why-work-card.why-work-card,
.agency-site .why-work-card.why-work-card h3,
.agency-site .why-work-card.why-work-card p {
    color: var(--brand-highlight-text);
}


/* PREVIEW*/

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--brand-bg); }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-primary); }

#preview-window, .preview-container, .preview-frame {
    height: calc(100vh - 120px);
    overflow-y: auto;
    display: block;
}

/* Links */

.agency-site a:not(.site-button):not(.nav-link):not(.navbar-brand):not(.social-link-item):not(.pp-demo-back):not(.pp-demo-cta):not(.pp-cookie-link) {
    color: var(--brand-secondary);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--brand-secondary) 35%, transparent);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s ease;
}
.agency-site a:not(.site-button):not(.nav-link):not(.navbar-brand):not(.social-link-item):not(.pp-demo-back):not(.pp-demo-cta):not(.pp-cookie-link):hover {
    color: var(--brand-secondary);
    text-decoration-color: var(--brand-secondary);
}

.footer-contact-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent);
    transition: border-bottom-color 0.2s ease;
}
.footer-contact-link:hover {
    border-bottom-color: currentColor;
    color: inherit;
}

/* Footer Heading Styling */
.footer-heading {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
    color: inherit;
}

/* Pillar & Post branding link — shown on Eco plan, hidden on Agency/Pro.
   Quiet by size, not by opacity: 0.7rem against the footer's own text is the
   whole de-emphasis, consistent with the rest of this file. */
.pp-branding-link {
    font-size: 0.7rem;
    color: inherit;
    text-decoration: none;
}
.pp-branding-link:hover {
    color: inherit;
    text-decoration: none;
}


/* jobs page */

/* Two separate hardcoded Bootstrap utility classes were found directly in
   public_job_detail.html, both causing the same underlying problem —
   fixed backgrounds disconnected from the tenant's own theme, while text
   correctly inherited the theme's own colour. Bootstrap's utility classes
   carry !important by design, so both silently overrode this file's own
   already-correct theme-variable rules for these same elements:
     - .apply-container had bg-light — fixed 5 August 2026
     - .card-brand had bg-white — fixed same day, same root cause, found
       after the first fix alone still left white-on-white text on
       Talent Plazer's dark theme, since .card-brand's own CSS below was
       always correct, just always losing to bg-white's !important.
   Both removed from the template entirely — the components already
   paired background and colour correctly from theme variables; they
   just needed the competing hardcoded class gone, not a new override. */
.agency-site .apply-container {
    background: var(--brand-bg);
    color: var(--brand-secondary);
    border: 1px solid color-mix(in srgb, var(--brand-secondary) 15%, transparent);
}

/* No .text-muted override lives here any more, and none should be added.
   Bootstrap's .text-muted is a fixed #6c757d carrying !important, so it
   beats this file's own correct rules — and it is a contrast value nothing
   checks, which is exactly what breaks on a dark background. The class is
   gone from every public tenant template instead. Secondary text inherits
   --brand-secondary from .agency-site, putting its contrast under the
   background/secondary pairing contrast-checker.js already validates in
   the editor. De-emphasis comes from .small and font weight, never from
   lowering contrast. A dimmed color-mix was tried here and rejected as
   still too hard to read even on a light background. */

/* Footer — uses brand variables so tenant colour choices are respected. */

.agency-site footer {
    background-color: var(--brand-bg);
    color: var(--brand-secondary);
    border-top: 1px solid color-mix(in srgb, var(--brand-primary) 15%, transparent);
}

/* No opacity here. This selector matches nested elements at both levels — a
   <p> inside a .small block was dimmed twice and rendered at 0.56, not 0.75 —
   and .small already provides the size difference the de-emphasis needs.
   Footer links keep their hover through the shared link rule's underline. */
.agency-site footer .small,
.agency-site footer p,
.agency-site footer li,
.agency-site footer a {
    color: var(--brand-secondary);
}

.agency-site footer .footer-heading {
    color: var(--brand-secondary);
}


/* responsive */

@media (max-width: 768px) {
    .agency-site {
        padding-bottom: 150px;
    }
    .hero-title {
        font-size: 2.25rem;
    }
    .agency-site .site-button {
        font-size: 0.875rem;
        padding: 0.5rem 1.25rem;
    }
    .agency-site .site-button-large {
        font-size: 0.95rem;
        padding: 0.6rem 1.5rem;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .agency-site .site-button {
        font-size: 0.9rem;
        padding: 0.5rem 1.25rem;
    }
    .agency-site .site-button-large {
        font-size: 1rem;
        padding: 0.65rem 1.75rem;
    }
}

/* Bootstrap sizes a .row's negative side margins from --bs-gutter-x, and .g-5
   raises it to 3rem, so the row pulls 24px wider than its column box on each
   side. A .container keeps its own 1.5rem, so its 12px padding cannot absorb
   that, and below 576px — where the container is full-bleed and has no slack —
   the page scrolls sideways by 12px. Every row carrying .g-5 here holds
   col-lg-6 pairs that stack at this width, so the horizontal gutter is doing
   nothing; .g-5's vertical gutter is untouched and still separates the stacked
   columns. */
@media (max-width: 575.98px) {
    .agency-site .container > .row.g-5 {
        --bs-gutter-x: 1.5rem;
    }
}

/* Mobile-specific Hero Padding.
   The only !important left in this file, and it is deliberate. Every theme
   sets its own .hero-section padding at a higher specificity than this rule,
   and home_minimal.html's hero also carries Bootstrap's py-5. Without
   !important all nine designs lose the 1.5rem side padding — hero text runs
   to the screen edge — and Scout and Bold lose their vertical padding
   entirely. Restating mobile padding per theme would be nine rules instead
   of one, so the override stays. */
@media (max-width: 768px) {
    .hero-section {
        padding: 4rem 1.5rem !important;
        background-color: var(--brand-primary);
        text-align: center;
    }

    .hero-section .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* Minimal — clean, airy job board */
.theme-minimal {
    --brand-primary:   #1a1a1a;
    --brand-secondary: #1a1a1a;
    --brand-bg:        #f8f8f8;
    --brand-font:      'DM Sans', sans-serif;
    --brand-hero-bg:   var(--brand-primary);
}
/* ------------------------------------------------------------------ */
/* MINIMAL template overrides                                          */
/* ------------------------------------------------------------------ */

/* Minimal has no hero section — strapline sits in a simple header band */
.theme-minimal .hero-section {
    padding: 5rem 0 4rem;
    background-color: var(--brand-primary);
}

.theme-minimal .hero-image-wrapper {
    display: none;
}

.theme-minimal .hero-title {
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -3px;
    color: var(--brand-hero-text);
    margin-bottom: 1.5rem;
}

.theme-minimal .hero-text {
    font-size: 1.1rem;
    line-height: 1.8;
    font-weight: 300;
    max-width: var(--hero-text-measure);
    color: var(--brand-hero-text);
}

/* Minimal body sections — sharp, clean, well-spaced */
.theme-minimal .minimal-body-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
    border-top: 2px solid color-mix(in srgb, var(--brand-primary) 15%, transparent);
}

/* This section carries both .minimal-body-section and .sp-body-lower-section.
   It shipped with py-4, whose !important beat the 4rem above, so 1.5rem is what
   it has actually been showing. Preserved deliberately: this pass is a tidy, and
   4rem would be an unreviewed visual change. Two classes, so it wins on
   specificity rather than on file position. */
.theme-minimal .minimal-body-section.sp-body-lower-section {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.theme-minimal .minimal-body-section p {
    font-size: 1.1rem;
    line-height: 1.85;
    font-weight: 300;
}

/* Minimal highlight cards — sharp corners, generous padding, explicit text */
.theme-minimal .why-work-card {
    border-radius: 0;
    padding: 2.5rem;
}

.theme-minimal .why-work-card h3 {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.theme-minimal .why-work-card p {
    font-size: 0.9rem;
    line-height: 1.7;
}

/* Large inverted CTA button for the Minimal homepage hero.
   Background and text use brand variables so tenant colour
   choices are respected — no hardcoded colours. */
.theme-minimal .site-button-minimal {
    background-color: var(--brand-hero-text);
    color: var(--brand-primary);
    border: 2px solid var(--brand-hero-text);
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 1rem 2rem;
    border-radius: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.theme-minimal .site-button-minimal:hover {
    background-color: transparent;
    color: var(--brand-hero-text);
}

/* CTA block sits below the hero on a brand-bg background,
   creating a clear visual break between the two sections */
.theme-minimal .minimal-cta-section {
    background-color: var(--brand-bg);
    border-bottom: 1px solid color-mix(in srgb, var(--brand-primary) 12%, transparent);
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

/* Bold — high contrast, cinematic */
.theme-bold {
    --brand-primary:   #0a0a0a;
    --brand-secondary: #0a0a0a;
    --brand-bg:        #ffffff;
    --brand-font:      'Poppins', sans-serif;
    --brand-hero-bg:   var(--brand-primary);
}

/* ------------------------------------------------------------------ */
/* BOLD template overrides                                             */
/* ------------------------------------------------------------------ */

/* Full-width hero breaks out of Bootstrap container */
.theme-bold .hero-section {
    padding: 0;
    overflow: hidden;
}

.theme-bold .hero-bleed {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    background-color: var(--brand-primary);
}

.theme-bold .hero-bleed .hero-content {
    padding: 5rem var(--hero-bleed-gutter);
    max-width: calc(var(--hero-span) + 2 * var(--hero-bleed-gutter));
    width: 100%;
    margin: 0 auto;
}

@media (max-width: 767.98px) {
    .theme-bold .hero-bleed {
        min-height: 55vh;
    }
    .theme-bold .hero-bleed .hero-content {
        padding: 3rem 1.5rem;
    }
    .theme-bold .hero-title {
        font-size: clamp(2.5rem, 12vw, 4rem);
        letter-spacing: -1.5px;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .theme-bold .hero-bleed {
        min-height: 60vh;
    }
    .theme-bold .hero-bleed .hero-content {
        padding: 3rem 2rem;
    }
}

.theme-bold .hero-title {
    font-size: clamp(3rem, 7vw, 6.5rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -2px;
}

.theme-bold .hero-img-styled {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.35;
    border-radius: 0;
    max-height: none;
}

/* Semi-transparent overlay ensures text is always readable over the image */
.theme-bold .hero-bleed::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, calc(0.82 * var(--hero-overlay-strength))) 0%,
        rgba(0, 0, 0, calc(0.50 * var(--hero-overlay-strength))) 55%,
        rgba(0, 0, 0, calc(0.15 * var(--hero-overlay-strength))) 100%
    );
    pointer-events: none;
}

/* hero-content sits above the overlay */
.theme-bold .hero-content {
    position: relative;
    z-index: 1;
}

/* Computed contrast — unlike Scout's hero, there is no dark overlay here
   (.hero-bleed is a plain background-color: var(--brand-primary) fill),
   so hardcoding white was never actually safe. Found 29 July 2026 during
   a full audit prompted by the SwiftSparrow/Talent Plazer reports. */
.theme-bold .hero-title,
.theme-bold .hero-text,
.theme-bold .hero-section .site-button-secondary {
    color: var(--brand-hero-text);
}

.theme-bold .hero-section .site-button-secondary {
    border-color: var(--brand-hero-text);
}

/* Stronger text shadow for legibility on busy images */
.theme-bold .hero-title,
.theme-bold .hero-text {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.5);
}

.theme-bold .hero-text {
    font-size: 1.15rem;
    line-height: 1.8;
    font-weight: 300;
    max-width: var(--hero-text-measure);
}

/* Bold body sections — clean rhythm below the cinematic hero */
.theme-bold .bold-body-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
    border-top: 2px solid color-mix(in srgb, var(--brand-primary) 12%, transparent);
}

.theme-bold .bold-body-section p {
    font-size: 1.15rem;
    line-height: 1.85;
    font-weight: 300;
}

/* Bold highlight cards — brand-primary fill, strong and confident */
.theme-bold .why-work-card {
    background-color: var(--brand-highlight-bg);
    border: none;
    border-radius: 0;
    padding: 2.5rem;
}

.theme-bold .why-work-card.why-work-card h3 {
    color: var(--brand-highlight-text);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.2px;
    margin-bottom: 0.75rem;
}

.theme-bold .why-work-card.why-work-card p {
    color: var(--brand-highlight-text);
    font-size: 0.9rem;
    line-height: 1.7;
}

/* ------------------------------------------------------------------ */
/* PREVIEW BLANK STATE                                                 */
/* ------------------------------------------------------------------ */

/* Shown in the editor preview iframe when a page is toggled off */
.preview-blank-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    opacity: 0.4;
}

.preview-blank-label {
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.preview-blank-hint {
    font-size: 0.8rem;
    margin-bottom: 0;
}

/* .job-search-hidden and .form-honeypot live in tenant_essentials.css,
   which loads outside {% block theme_stylesheet %} so a bespoke theme that
   replaces this file still gets them. */

.public-policy-container {
    max-width: 780px;
}

.public-policy-heading {
    font-size: 2rem;
    font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* CLIENT BRANDING (TICKET-058)                                        */
/* ------------------------------------------------------------------ */

/* Client logo displayed on job detail page and job form editor */
.client-logo-img {
    max-height: 72px;
    max-width: 180px;
    object-fit: contain;
}

/* Client logo thumbnail in job form editor (slightly taller) */
.client-logo-thumb {
    max-height: 80px;
    max-width: 200px;
    object-fit: contain;
}

/* Client badge — top-right of job detail header */
.client-badge {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--brand-border, #e1e8ed);
    border-radius: 8px;
    background: var(--brand-bg, #f8f9fa);
    max-width: 160px;
}

.client-badge-logo {
    max-height: 48px;
    max-width: 120px;
    object-fit: contain;
}

.client-badge-name {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--brand-secondary, #627D98);
    text-align: right;
    line-height: 1.3;
}
/* ------------------------------------------------------------------ */
/* NAVBAR LOGO — moved from inline style in base_tenant.html           */
/* ------------------------------------------------------------------ */

.agency-site .navbar .navbar-logo {
    max-height: 48px;
    max-width: 180px;
    width: auto;
    height: auto;
}

/* ------------------------------------------------------------------ */
/* SINGLE-PAGE SCROLL TEMPLATES — shared classes                       */
/* (Flow, Drift, Scout, Pulse)                                         */
/* ------------------------------------------------------------------ */

/* Scroll reveal — base state (hidden, shifted down slightly) */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

/* Revealed state — added by scroll-reveal.js or immediately on        */
/* Drift/Scout (no JS loaded) via the fallback rule below              */
.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Drift and Scout don't load scroll-reveal.js — show everything       */
/* immediately so the page never appears blank without JS              */
.theme-drift .reveal,
.theme-scout .reveal {
    opacity: 1;
    transform: translateY(0);
    transition: none;
}

/* Respect reduced motion — never animate regardless of template       */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Shared single-page section spacing */
.sp-body-section {
    /* Was Bootstrap's py-5 on the element. Moved here so the spacing is an
       ordinary property a theme can override, instead of one that has to
       out-shout a utility class carrying its own !important. Same 3rem. */
    padding-top: 3rem;
    padding-bottom: 3rem;
    border-top: 1px solid color-mix(in srgb, var(--brand-primary) 10%, transparent);
}

.sp-body-text {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--brand-secondary);
}

.sp-about-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: color-mix(in srgb, var(--brand-primary) 4%, var(--brand-bg));
    border-top: 1px solid color-mix(in srgb, var(--brand-primary) 10%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--brand-primary) 10%, transparent);
}

.sp-about-text {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--brand-secondary);
}

.sp-jobs-section {
    border-top: 1px solid color-mix(in srgb, var(--brand-primary) 10%, transparent);
}

.sp-featured-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.sp-highlights-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: color-mix(in srgb, var(--brand-primary) 4%, var(--brand-bg));
    border-top: 1px solid color-mix(in srgb, var(--brand-primary) 10%, transparent);
}

.sp-section-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--brand-secondary);
    margin-bottom: 1.5rem;
}

/* Single-page job preview cards */
.sp-job-card {
    border: 1px solid color-mix(in srgb, var(--brand-primary) 15%, transparent);
    border-radius: 6px;
    padding: 1.5rem;
    background: var(--brand-bg);
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.sp-job-card:hover {
    border-color: var(--brand-primary);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px -4px color-mix(in srgb, var(--brand-primary) 8%, transparent);
}

.sp-job-card h3 {
    color: var(--brand-secondary);
}

/* Lower body text — connective tissue between featured job and highlights.
   Slightly less vertical weight than the main sp-body-section — it's a
   bridge, not a headline moment. No border — sits in the content flow. */
.agency-site .sp-body-lower-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* Impact's lower body section. .theme-impact section:has(> .container > p)
   below also matches this element and asks for 5rem, but the section shipped
   with Bootstrap's py-5, whose !important beat it, so 3rem is what it has
   actually been showing. Preserved deliberately — 5rem would be an unreviewed
   visual change. The class is doubled to out-specify that :has() selector. */
.theme-impact .sp-body-lower-section.sp-body-lower-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* Per-template padding overrides for templates with 6rem section spacing */
.theme-pulse .sp-body-lower-section,
.theme-scout .sp-body-lower-section,
.theme-flow .sp-body-lower-section,
.theme-drift .sp-body-lower-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
/* Clean, high-contrast, modern. DM Sans.                             */
/* ------------------------------------------------------------------ */

.theme-flow {
    --brand-primary:   #1d3557;
    --brand-secondary: #1d3557;
    --brand-bg:        #ffffff;
    --brand-font:      'DM Sans', sans-serif;
    --brand-hero-bg:   var(--brand-primary);
}

.theme-flow .sp-hero-section {
    padding: 6rem 0 5rem;
}

.theme-flow .hero-title {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 800;
    line-height: 1.0;
    letter-spacing: -1.5px;
}

.theme-flow .hero-text {
    font-size: 1.1rem;
    line-height: 1.8;
    font-weight: 300;
    max-width: var(--hero-text-measure);
}

/* Flow — stagger reveal delays for a cascaded entrance */
.theme-flow .hero-content .hero-title  { transition-delay: 0s; }
.theme-flow .hero-content .hero-text   { transition-delay: 0.1s; }
.theme-flow .hero-content .hero-actions { transition-delay: 0.2s; }
.theme-flow .hero-image-wrapper        { transition-delay: 0.15s; }

/* Flow section dividers — strong horizontal rule */
.theme-flow .sp-about-section,
.theme-flow .sp-jobs-section,
.theme-flow .sp-highlights-section,
.theme-flow .sp-featured-section,
.theme-flow .sp-body-section {
    border-top-width: 2px;
}

/* Flow — generous section spacing */
.theme-flow .sp-about-section,
.theme-flow .sp-jobs-section,
.theme-flow .sp-highlights-section,
.theme-flow .sp-featured-section {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.theme-flow .sp-body-section {
    padding-top: 6rem;
    padding-bottom: 3rem;
}

.theme-flow .sp-body-text {
    font-size: 1.15rem;
    line-height: 1.85;
    font-weight: 300;
}

/* ------------------------------------------------------------------ */
/* DRIFT template                                                       */
/* Warm, editorial, generous whitespace. Playfair Display.            */
/* ------------------------------------------------------------------ */

.theme-drift {
    --brand-primary:   #4a7c59;
    --brand-secondary: #4a7c59;
    --brand-bg:        #f5f0e8;
    --brand-font:      'Playfair Display', serif;
    --brand-hero-bg:   var(--brand-primary);
}

.theme-drift .sp-hero-section {
    padding: 7rem 0 6rem;
}

.theme-drift .hero-title {
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -1px;
}

.theme-drift .hero-text {
    font-size: 1.15rem;
    line-height: 1.95;
    font-weight: 300;
    max-width: var(--hero-text-measure);
}

/* Drift — softer card borders */
.theme-drift .sp-job-card,
.theme-drift .why-work-card {
    border-radius: 10px;
}

.theme-drift .sp-about-section {
    background-color: color-mix(in srgb, var(--brand-primary) 6%, var(--brand-bg));
}

/* Drift — generous editorial spacing */
.theme-drift .sp-about-section,
.theme-drift .sp-jobs-section,
.theme-drift .sp-highlights-section,
.theme-drift .sp-featured-section {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.theme-drift .sp-body-section {
    padding-top: 6rem;
    padding-bottom: 3rem;
}

.theme-drift .sp-body-text {
    font-size: 1.15rem;
    line-height: 1.95;
    font-weight: 300;
}

.theme-drift .sp-featured-section {
    border-top: 1px solid color-mix(in srgb, var(--brand-primary) 20%, transparent);
}

/* Drift highlight cards — more internal breathing room */
.theme-drift .why-work-card {
    padding: 2.5rem;
}

/* ------------------------------------------------------------------ */
/* SCOUT template                                                       */
/* Personal, consultant feel. Understated. Merriweather.              */
/* ------------------------------------------------------------------ */

.theme-scout {
    --brand-primary:   #2d2d2d;
    --brand-secondary: #2d2d2d;
    --brand-bg:        #f8f6f2;
    --brand-font:      'Merriweather', serif;
    --brand-hero-bg:   var(--brand-primary);
}

/* Scout — minimal borders, feels handcrafted */
.theme-scout .sp-job-card {
    border-left-width: 3px;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-radius: 0;
    padding-left: 1.25rem;
    background: transparent;
}

.theme-scout .sp-job-card:hover {
    transform: translateX(4px);
    box-shadow: none;
    border-color: var(--brand-primary);
}

.theme-scout .sp-about-section {
    background-color: var(--brand-bg);
    border-top: 2px solid var(--brand-primary);
}

/* Scout — section titles */
.theme-scout .sp-section-title {
    font-weight: 400;
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
}

/* Scout — full-bleed cinematic hero (same technique as Bold) */
.theme-scout .sp-hero-section {
    padding: 0;
    overflow: hidden;
}

.theme-scout .sp-scout-bleed {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    background-color: var(--brand-primary);
}

/* Scout's hero text no longer forces white — as of 30 July 2026, the
   tenant picks hero_text_color the same as every other theme, no
   special-casing. The dark gradient overlay below (::after) still
   guarantees enough contrast for whatever colour they choose; the
   var(--brand-hero-text) rules further down (.theme-scout .hero-title/
   .hero-text) are now the sole source of truth here, same pattern as
   every other theme. */
.theme-scout .sp-scout-hero-content .site-button-secondary {
    color: var(--brand-hero-text);
    border-color: var(--brand-hero-text);
}

.theme-scout .sp-scout-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
    border-radius: 0;
    max-height: none;
}

/* Dark gradient overlay — text always readable over the image */
.theme-scout .sp-scout-bleed::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, calc(0.78 * var(--hero-overlay-strength))) 0%,
        rgba(0, 0, 0, calc(0.50 * var(--hero-overlay-strength))) 55%,
        rgba(0, 0, 0, calc(0.20 * var(--hero-overlay-strength))) 100%
    );
    pointer-events: none;
}

.theme-scout .sp-scout-hero-content {
    position: relative;
    z-index: 1;
    padding: 4rem var(--hero-bleed-gutter);
    max-width: calc(var(--hero-span) + 2 * var(--hero-bleed-gutter));
    margin: 0 auto;
}

.theme-scout .hero-title {
    font-size: clamp(2.8rem, 6vw, 5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -2px;
    color: var(--brand-hero-text);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.theme-scout .hero-text {
    font-size: 1.1rem;
    line-height: 1.9;
    color: var(--brand-hero-text);
    font-weight: 300;
    max-width: var(--hero-text-measure);
}

@media (max-width: 767.98px) {
    .theme-scout .sp-scout-bleed {
        min-height: 55vh;
    }
    .theme-scout .sp-scout-hero-content {
        padding: 2.5rem 1.5rem;
    }
    .theme-scout .sp-about-section,
    .theme-scout .sp-jobs-section,
    .theme-scout .sp-highlights-section,
    .theme-scout .sp-featured-section,
    .theme-scout .sp-body-section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .theme-scout .sp-scout-bleed {
        min-height: 65vh;
    }
}

/* Scout — generous section spacing, editorial rhythm */
.theme-scout .sp-about-section,
.theme-scout .sp-jobs-section,
.theme-scout .sp-highlights-section,
.theme-scout .sp-featured-section {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.theme-scout .sp-body-section {
    border-top: 2px solid var(--brand-primary);
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.theme-scout .sp-body-text {
    font-size: 1.15rem;
    line-height: 1.9;
}

.theme-scout .sp-featured-section {
    border-top: 2px solid var(--brand-primary);
}

/* Scout highlight cards — more internal space, sharp corners */
.theme-scout .why-work-card {
    padding: 2.5rem;
    border-radius: 0;
}

/* Impact — full-bleed brand-colour hero, no image required */
.theme-impact {
    --brand-primary:   #e11d48;
    --brand-secondary: #9f1239;
    --brand-bg:        #ffffff;
    --brand-font:      'Inter', sans-serif;
    --brand-hero-bg:   var(--brand-primary);
}

/* Impact about page + premium page slots — sharp corners match the template's no-decoration aesthetic */
.theme-impact .about-image-placeholder,
.theme-impact .pageslot-image-placeholder {
    border-radius: 0;
    border-color: color-mix(in srgb, var(--brand-primary) 30%, transparent);
}

/* Impact job cards — sharp, left-accent border like Executive but stronger */
.theme-impact .job-card,
.theme-impact .job-card-preview {
    border-radius: 0;
    border-left: 4px solid var(--brand-primary);
    border-top: 1px solid color-mix(in srgb, var(--brand-primary) 7%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--brand-primary) 7%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--brand-primary) 7%, transparent);
}
.theme-impact .job-card:hover,
.theme-impact .job-card-preview:hover {
    border-left-color: var(--brand-secondary);
    transform: translateX(4px) translateY(-2px);
}

/* Impact card-brand */
.theme-impact .agency-site .card-brand,
.theme-impact.agency-site .card-brand {
    border-radius: 0;
    border-color: color-mix(in srgb, var(--brand-primary) 20%, transparent);
}

/* ------------------------------------------------------------------ */
/* IMPACT template                                                      */
/* Full-bleed brand-colour hero. No image required. Type-led design.  */
/* ------------------------------------------------------------------ */

/* Navbar — continuous with the hero, not a white bar cutting across it */
.theme-impact .navbar,
.theme-impact.agency-site .navbar {
    background: var(--brand-primary);
    background-color: var(--brand-primary);
    border-bottom-color: var(--brand-primary);
    box-shadow: none;
    /* Override Bootstrap navbar-light colour variables */
    --bs-navbar-color: var(--brand-hero-text);
    --bs-navbar-hover-color: var(--brand-hero-text);
    --bs-navbar-active-color: var(--brand-hero-text);
    --bs-navbar-brand-color: var(--brand-hero-text);
    --bs-navbar-brand-hover-color: var(--brand-hero-text);
    --bs-navbar-toggler-border-color: rgba(255,255,255,0.2);
}

.theme-impact .navbar .navbar-brand,
.theme-impact .navbar .brand-text {
    color: var(--brand-hero-text);
}

.theme-impact .navbar .nav-link {
    color: var(--brand-hero-text);
}

.theme-impact .navbar .nav-link:hover {
    color: var(--brand-hero-text);
}

/* Hamburger toggler — border driven by hero text variable */
.theme-impact .navbar-toggler {
    border-color: color-mix(in srgb, var(--brand-hero-text) 30%, transparent);
}

/* Hero — full viewport, brand colour as background, flush with navbar */
.theme-impact .hero-section {
    min-height: 85vh;
    display: flex;
    align-items: center;
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

/* Oversized headline — the type is the design */
.theme-impact .hero-title {
    font-size: clamp(3.5rem, 10vw, 9rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -4px;
    color: var(--brand-hero-text);
    max-width: var(--hero-span);
    margin-bottom: 2rem;
}

.theme-impact .hero-text {
    font-size: 1.15rem;
    line-height: 1.8;
    max-width: var(--hero-text-measure);
    color: var(--brand-hero-text);
    font-weight: 300;
    letter-spacing: 0.01em;
}

/* CTA buttons — outline style, always readable on any brand colour */
.theme-impact .hero-actions .site-button-primary {
    background-color: transparent;
    border: 2px solid var(--brand-hero-text);
    color: var(--brand-hero-text);
    border-radius: 0;
    padding: 0.9rem 3rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-size: 0.9rem;
    text-transform: uppercase;
}

.theme-impact .hero-actions .site-button-primary:hover {
    background-color: var(--brand-hero-text);
    color: var(--brand-primary);
    opacity: 1;
}

.theme-impact .hero-actions .site-button-secondary {
    border: 2px solid color-mix(in srgb, var(--brand-hero-text) 30%, transparent);
    color: var(--brand-hero-text);
    border-radius: 0;
    padding: 0.9rem 3rem;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
}

.theme-impact .hero-actions .site-button-secondary:hover {
    background-color: color-mix(in srgb, var(--brand-hero-text) 10%, transparent);
    border-color: color-mix(in srgb, var(--brand-hero-text) 70%, transparent);
}

/* Hide the hero image column — Impact doesn't use an image in the hero */
.theme-impact .hero-image-wrapper {
    display: none;
}

/* Remove section dividers — the colour contrast does the work instead */
.theme-impact section:not(.hero-section) {
    border-top: none;
}

/* Body text section — generous padding, large leading text */
.theme-impact .sp-body-section,
.theme-impact section:has(> .container > p) {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.theme-impact section p.mb-0 {
    font-size: 1.2rem;
    line-height: 1.85;
    color: var(--brand-secondary);
    font-weight: 300;
}

/* Featured job section — more breathing room, stronger label */
.theme-impact section:has(.job-card) {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.theme-impact .sp-featured-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brand-secondary);
    margin-bottom: 2rem;
}

/* Highlight cards section — generous vertical rhythm */
.theme-impact .sp-highlights-section,
.theme-impact section:has(.why-work-card) {
    background-color: var(--brand-bg);
    padding-top: 6rem;
    padding-bottom: 6rem;
}

/* Highlight cards — brand-primary fill, page background colour text */
.theme-impact .why-work-card {
    background-color: var(--brand-highlight-bg);
    border: none;
    border-radius: 0;
    padding: 2.5rem;
}

.theme-impact .why-work-card.why-work-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    margin-bottom: 0.75rem;
    color: var(--brand-highlight-text);
    opacity: 1;
}

.theme-impact .why-work-card.why-work-card p {
    color: var(--brand-highlight-text);
    font-size: 0.9rem;
    line-height: 1.7;
}

/* Featured job — full border, crisp and intentional */
.theme-impact .job-card,
.theme-impact .job-card-preview {
    border-radius: 0;
    border: 2px solid var(--brand-primary);
    background: var(--brand-bg);
    padding: 2rem;
}

.theme-impact .job-card:hover,
.theme-impact .job-card-preview:hover {
    border-color: var(--brand-secondary);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--brand-primary) 8%, transparent);
}

/* Impact card-brand */
.theme-impact .agency-site .card-brand,
.theme-impact.agency-site .card-brand {
    border-radius: 0;
    border-color: color-mix(in srgb, var(--brand-primary) 20%, transparent);
}

/* ------------------------------------------------------------------ */
/* PULSE template                                                       */
/* Full-bleed brand-colour hero, no image needed. Single-page scroll. */
/* Bold, brandable. Inter. Electric lime defaults.                    */
/* ------------------------------------------------------------------ */

.theme-pulse {
    --brand-primary:   #84cc16;
    --brand-secondary: #1a2e05;
    --brand-bg:        #ffffff;
    --brand-font:      'Inter', sans-serif;
    --brand-hero-bg:   var(--brand-primary);
}

/* Pulse navbar — inverted: sits on brand-primary, white text */
.theme-pulse .navbar {
    background-color: var(--brand-primary);
    border-bottom: none;
}

.theme-pulse .navbar .navbar-brand,
.theme-pulse .navbar .nav-link {
    color: var(--brand-hero-text);
}

/* Pulse hero — full-bleed colour band, generous vertical rhythm */
.theme-pulse .sp-hero-section {
    background-color: var(--brand-primary);
    color: var(--brand-hero-text);
    padding: 8rem 0 7rem;
}

.theme-pulse .sp-hero-section .hero-title,
.theme-pulse .sp-hero-section .hero-text,
.theme-pulse .sp-hero-section p {
    color: var(--brand-hero-text);
}

.theme-pulse .hero-title {
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -3px;
    margin-bottom: 2rem;
}

.theme-pulse .hero-text {
    font-size: 1.2rem;
    line-height: 1.8;
    max-width: var(--hero-text-measure);
    text-align: left;
    margin-right: auto;
    font-weight: 300;
}

/* Pulse hero CTA — secondary colour for primary button, outlined ghost for secondary */
.theme-pulse .sp-hero-section .site-button-primary {
    background-color: var(--brand-hero-text);
    border-color: var(--brand-hero-text);
    color: var(--brand-primary);
    font-weight: 700;
}

.theme-pulse .sp-hero-section .site-button-primary:hover {
    opacity: 0.9;
}

/* Pulse body sections — clean white, accent dividers, generous spacing */
.theme-pulse .sp-about-section,
.theme-pulse .sp-jobs-section,
.theme-pulse .sp-highlights-section,
.theme-pulse .sp-featured-section {
    border-top: 1px solid color-mix(in srgb, var(--brand-primary) 15%, transparent);
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.theme-pulse .sp-body-section {
    border-top: 1px solid color-mix(in srgb, var(--brand-primary) 15%, transparent);
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.theme-pulse .sp-body-text {
    font-size: 1.2rem;
    line-height: 1.85;
    font-weight: 300;
}

/* Pulse section titles — strong, left-anchored */
.theme-pulse .sp-section-title {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--brand-secondary);
}

/* Pulse job cards — sharp left-accent, matching Impact's card style */
.theme-pulse .sp-job-card {
    border-radius: 0;
    border-left: 4px solid var(--brand-primary);
    border-top: 1px solid color-mix(in srgb, var(--brand-primary) 7%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--brand-primary) 7%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--brand-primary) 7%, transparent);
    background: var(--brand-bg);
    transition: all 0.25s ease;
}

.theme-pulse .sp-job-card:hover {
    border-left-color: var(--brand-secondary);
    transform: translateX(4px) translateY(-2px);
    box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--brand-primary) 10%, transparent);
}

.theme-pulse .why-work-card,
.theme-pulse .why-work-card.why-work-card {
    background-color: var(--brand-highlight-bg);
    border: none;
    border-radius: 0;
    padding: 2.5rem;
}

.theme-pulse .why-work-card.why-work-card h3 {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.2px;
    margin-bottom: 0.75rem;
    color: var(--brand-highlight-text);
    opacity: 1;
}

.theme-pulse .why-work-card.why-work-card p {
    color: var(--brand-highlight-text);
    font-size: 0.9rem;
    line-height: 1.7;
}

@media (max-width: 767.98px) {
    .theme-impact .hero-section {
        min-height: auto;
        padding: 5rem 0 4rem;
    }

    .theme-impact .hero-title {
        font-size: clamp(2.8rem, 13vw, 4.5rem);
        letter-spacing: -2px;
        margin-bottom: 1.5rem;
    }

    .theme-impact section p.mb-0 {
        font-size: 1.05rem;
    }

    .theme-pulse .sp-hero-section {
        padding: 5rem 0 4rem;
    }

    .theme-pulse .hero-title {
        font-size: clamp(2.5rem, 11vw, 4rem);
        letter-spacing: -2px;
    }

    .theme-pulse .sp-about-section,
    .theme-pulse .sp-jobs-section,
    .theme-pulse .sp-highlights-section,
    .theme-pulse .sp-featured-section,
    .theme-pulse .sp-body-section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .theme-flow .sp-hero-section {
        padding: 4rem 0 3rem;
    }

    .theme-flow .hero-title {
        font-size: clamp(2rem, 10vw, 3rem);
        letter-spacing: -1px;
    }

    .theme-flow .sp-about-section,
    .theme-flow .sp-jobs-section,
    .theme-flow .sp-highlights-section,
    .theme-flow .sp-featured-section,
    .theme-flow .sp-body-section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .theme-drift .sp-hero-section {
        padding: 5rem 0 4rem;
    }

    .theme-drift .hero-title {
        font-size: clamp(2rem, 9vw, 3rem);
        letter-spacing: -0.5px;
    }

    .theme-drift .sp-about-section,
    .theme-drift .sp-jobs-section,
    .theme-drift .sp-highlights-section,
    .theme-drift .sp-featured-section,
    .theme-drift .sp-body-section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .theme-minimal .hero-section {
        padding: 3rem 0 2.5rem;
    }

    .theme-minimal .hero-title {
        font-size: clamp(2.5rem, 12vw, 4rem);
        letter-spacing: -2px;
    }
}
/* ──────────────────────────────────────────────────────────────────── */
/* Demo bar — injected on /choose-template/preview/ pages only.         */
/* Sticky in document flow so content scrolls naturally below it.       */
/* The adjacent tenant nav is offset here; no inline style is injected. */
/* ──────────────────────────────────────────────────────────────────── */

.pp-demo-bar {
    position: sticky;
    top: 0;
    z-index: 9999;
    height: 44px;
    background-color: #0f172a;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    /* Platform chrome, not tenant type. Inter when the page already has it,
       otherwise the visitor's own UI font rather than a generic fallback —
       this bar is injected onto previews of designs that use other faces. */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 Roboto, sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    flex-shrink: 0;
}

.pp-demo-bar ~ .sticky-top {
    top: 44px;
}

.pp-demo-bar a {
    text-decoration: none;
}

.pp-demo-bar a:hover {
    text-decoration: none;
}

.pp-demo-back {
    color: #ffffff;
    opacity: 0.85;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50rem;
    padding: 0.25rem 0.85rem;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}

.pp-demo-back:hover {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.7);
    color: #ffffff;
}

.pp-demo-cta {
    background-color: #ffffff;
    color: #0f172a;
    border-radius: 50rem;
    padding: 0.25rem 0.85rem;
    font-weight: 700;
    opacity: 1;
    transition: background-color 0.15s ease;
}

.pp-demo-cta:hover {
    background-color: #f1f5f9;
    color: #0f172a;
}

@media (max-width: 575.98px) {
    .pp-demo-bar {
        height: 48px;
    }
    .pp-demo-bar ~ .sticky-top {
        top: 48px;
    }
    .pp-demo-cta {
        display: none;
    }
}
/* ──────────────────────────────────────────────────────────────────── */
/* TICKET-140/141 — premium page slots: inverted text-box colours       */
/* ──────────────────────────────────────────────────────────────────── */
/* Deliberately placed at the very end of the file, after every theme's
   own .why-work-card overrides above (Executive, Startup, Minimal, Bold,
   Drift, Scout, Impact, Pulse) — confirmed by searching the whole file
   for every why-work-card occurrence before adding this, since several
   theme blocks share the same (0,3,1) specificity as this rule (e.g.
   .theme-pulse .why-work-card.why-work-card h3) and CSS falls back to
   source order on a specificity tie. This rule must stay the LAST
   why-work-card rule in the file, or the invert toggle silently stops
   working on whichever theme's block ends up later in the cascade.

   Applied as an ADDITIONAL class alongside .why-work-card (see
   page1.html/page2.html/page3.html) when a page's own
   page{N}_invert_highlight_colours toggle is on — swaps just the box's
   background/text colour pairing. Deliberately does not touch
   border/padding/font-size/opacity, so each theme's own distinct
   why-work-card personality (Pulse's sharp corners, Executive's border
   accent, etc.) is preserved even when inverted. */
.agency-site .why-work-card.why-work-card-inverted {
    background-color: var(--brand-highlight-text);
}

.agency-site .why-work-card.why-work-card-inverted,
.agency-site .why-work-card.why-work-card-inverted h3,
.agency-site .why-work-card.why-work-card-inverted p {
    color: var(--brand-highlight-bg);
}

/* Contact page and tenant messages */
.contact-page,
.contact-success-page {
    background: var(--brand-bg);
    color: var(--brand-secondary);
    padding: clamp(3rem, 7vw, 6rem) 0;
}
.contact-page-container { max-width: 1120px; }
.contact-page-header { max-width: 720px; margin-bottom: 2.5rem; }
.contact-page-header h1,
.contact-details-panel h2 { color: var(--brand-secondary); }
.contact-form-panel,
.contact-form-panel h2,
.contact-success-panel,
.contact-success-panel h1 { color: var(--brand-highlight-text); }
.contact-page-eyebrow {
    color: var(--brand-primary);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.contact-page-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2rem; align-items: start; }
.contact-details-panel,
.contact-form-panel,
.contact-success-panel {
    border: 1px solid color-mix(in srgb, var(--brand-secondary) 18%, transparent);
    border-radius: var(--sharp-radius, 10px);
    padding: clamp(1.5rem, 4vw, 2.5rem);
}
.contact-details-panel { background: var(--brand-highlight-bg); color: var(--brand-highlight-text); }
.contact-details-panel h2,
.contact-details-panel a { color: var(--brand-highlight-text); }
.contact-details-panel p { display: grid; gap: .25rem; margin: 1.5rem 0 0; }
.contact-form-panel,
.contact-success-panel { background: var(--brand-highlight-bg); }
.contact-form-panel { box-shadow: 0 18px 50px color-mix(in srgb, var(--brand-primary) 10%, transparent); }
.contact-field { margin-top: 1.15rem; }
.contact-field label { display: flex; justify-content: space-between; gap: 1rem; font-weight: 650; margin-bottom: .4rem; }
.contact-field label span { font-size: .75rem; font-weight: 500; }
.contact-field input,
.contact-field textarea {
    background: var(--brand-bg);
    border: 1px solid color-mix(in srgb, var(--brand-secondary) 32%, transparent);
    border-radius: var(--sharp-radius, 6px);
    color: var(--brand-secondary);
    padding: .8rem .9rem;
    width: 100%;
}
.contact-field input:focus,
.contact-field textarea:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 20%, transparent); outline: 0; }
.contact-field-error input,
.contact-field-error textarea { border-color: var(--brand-accent); border-width: 2px; }
.contact-field-error-text { color: var(--brand-highlight-text); font-size: .875rem; font-weight: 700; margin-top: .35rem; }
.contact-submit,
.contact-secondary-action {
    align-items: center;
    border-radius: var(--sharp-radius, 6px);
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    padding: .8rem 1.25rem;
    text-decoration: none;
}
.contact-submit { background: var(--brand-highlight-text); border: 1px solid var(--brand-highlight-text); color: var(--brand-highlight-bg); }
.contact-form-panel .contact-submit { margin-top: 1.4rem; }
.contact-secondary-action { border: 1px solid var(--brand-highlight-text); color: var(--brand-highlight-text); }
.contact-notice { font-size: .82rem; margin: 1rem 0 0; }
.site-message { align-items: flex-start; background: var(--brand-highlight-bg); border: 1px solid var(--brand-secondary); border-left: 5px solid var(--brand-accent); color: var(--brand-highlight-text); display: flex; gap: 1rem; justify-content: space-between; padding: 1rem 1.25rem; }
.site-message-success { border-left-color: var(--brand-primary); }
.site-message-error,
.site-message-danger { border-left-color: var(--brand-accent); font-weight: 650; }
.site-message-close { background: transparent; border: 0; color: inherit; cursor: pointer; font-size: 1.35rem; line-height: 1; padding: 0; }
.contact-success-panel { margin: 0 auto; max-width: 720px; text-align: center; }
.public-feedback-copy { font-size: 1.05rem; }
.contact-success-icon { align-items: center; background: var(--brand-primary); border-radius: 50%; color: var(--brand-hero-text); display: inline-flex; font-size: 1.5rem; height: 3rem; justify-content: center; margin-bottom: 1rem; width: 3rem; }
.contact-success-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.5rem; }
.theme-minimal .contact-details-panel,
.theme-minimal .contact-form-panel { box-shadow: none; }
.theme-bold .contact-form-panel,
.theme-pulse .contact-form-panel { border-top: 5px solid var(--brand-primary); }
.theme-impact .contact-details-panel,
.theme-impact .contact-form-panel,
.theme-impact .contact-success-panel { border-radius: 0; }

@media (max-width: 767px) {
    .contact-page-grid { grid-template-columns: 1fr; }
    .contact-page-header { margin-bottom: 1.5rem; }
    .contact-submit { width: 100%; }
}

/* ── Signup-wizard copy placeholders (TICKET-192) ───────────────────────────
   Applied only to text the signup wizard letters while the visitor has not
   yet reached the Content step. The class reaches the page solely through
   marketing/text_placeholders.py, which runs against the wizard's throwaway
   preview profile — never a real CompanyProfile — so no live tenant site and
   no /choose-template/ demo page can carry it. Inert here for everyone else.

   Softened rather than full-contrast: at hero size, letters at full strength
   read closer to a fault than to an unfilled field. The slow pulse says the
   page is still being built rather than broken.

   Unlike an animation inside an <img>-loaded SVG (measured: the media query
   there is ignored), this is ordinary CSS in an ordinary stylesheet, so
   prefers-reduced-motion is honoured properly. */
.pp-copy-placeholder {
    opacity: 0.34;
    animation: pp-copy-breathe 2.8s ease-in-out infinite;
}

@keyframes pp-copy-breathe {
    0%, 100% { opacity: 0.26; }
    50%      { opacity: 0.44; }
}

@media (prefers-reduced-motion: reduce) {
    .pp-copy-placeholder {
        animation: none;
        opacity: 0.34;
    }
}
.contact-cta {
    padding: clamp(3rem, 7vw, 5rem) 0;
    background: var(--brand-primary);
    color: var(--brand-hero-text);
}

.contact-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.contact-cta h2 {
    color: inherit;
    margin-bottom: .5rem;
}

.contact-cta-text > :last-child {
    margin-bottom: 0;
}

.contact-cta-button {
    flex: 0 0 auto;
}

@media (max-width: 767.98px) {
    .contact-cta-inner {
        align-items: stretch;
        flex-direction: column;
    }

    .contact-cta-button {
        width: 100%;
    }
}