@charset "UTF-8";
 
/*
Theme Name:  ByDenero
Theme URI:   https://github.com/MattDee87/boilerplate-master
Author:      Matthew De Nero
Author URI:  https://github.com/MattDee87
Description: Custom WordPress theme for ByDenero Digital Agency
Version:     1.0
License:     MIT
Text Domain: bydenero
*/
 
/* ============================================================
   TABLE OF CONTENTS
   ──────────────────────────────────────────────────────────
    1.  IMPORTS
        1a. Body Font  (working — keep)
        1b. Heading Font  (working — keep)
        1c. Accent / Mono Font  (keep)
    2.  DESIGN TOKENS  ← start every new project here
        2a. Colors
        2b. Typography  (font families + scale + weights)
        2c. Spacing
        2d. Borders & Shadows
        2e. Layout
    3.  RESET & NORMALIZE
    4.  BASE TYPOGRAPHY
        4a. Body
        4b. Headings
        4c. Paragraphs
        4d. Links
        4e. Lists
        4f. Blockquote
        4g. Code & Pre
    5.  LAYOUT
        5a. Wrapper / Container
        5b. Main
        5c. Article
    6.  COMPONENTS
        6a. Header & Navigation
        6b. Buttons
        6c. Forms
        6d. Tables
        6e. Footer
    7.  WORDPRESS SPECIFICS
        7a. Block Editor
        7b. Alignment Helpers
        7c. Captions
    8.  UTILITIES
        8a. Skip to Main Content  (accessibility)
        8b. Scroll To Top
        8c. General Helpers
    9.  RESPONSIVE
        9a. Tablet  — 768px
        9b. Mobile  — 480px
   10.  BYDENERO SHARED PATTERNS
        ↳ Layer shared project patterns and brand styles here
   ──────────────────────────────────────────────────────────
*/
 
 
/* ============================================================
   1. IMPORTS
   ============================================================ */
 
/* ── 1a. Body Font ─────────────────────────────────────────
   Inter — self-hosted, served from assets/fonts/.
   Variable font: one file covers weights 400–700.           */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('assets/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── 1b. Heading Font ──────────────────────────────────────
   Sora — self-hosted, served from assets/fonts/.
   Variable font: one file covers weights 400–700.           */

@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('assets/fonts/sora-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── 1c. Accent / Mono Font ────────────────────────────────
   JetBrains Mono — self-hosted, served from assets/fonts/.
   Variable font: one file covers weights 400–700.           */

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
 
/* ============================================================
   2. DESIGN TOKENS — CSS CUSTOM PROPERTIES
   ──────────────────────────────────────────────────────────
   🚀  START EVERY NEW PROJECT HERE.
   Update these variables first before writing any custom CSS.
   Sizes, spacing, and structure are mostly reusable.
   Font families, colors, and visual personality live here.
   ============================================================ */
 
:root {
 
    /* ── 2a. Colors ─────────────────────────────────────────
       Neutral defaults. Replace with your project palette.   */
 
    --color-primary:        #0A0F2C;        /* Main brand / heading color     */
    --color-secondary:      #6CA4FF;        /* Supporting / subheading color  */
    --color-accent:         #A259FF;        /* CTA, links, highlights         */
    --color-accent-hover:   #D472FF;        /* Hover state of accent          */

    --color-bg:             #F5F5F7;        /* Page background                */
    --color-bg-alt:         #FFFFFF;        /* Alternate / card background    */
    --color-bg-dark:        #0A0F2C;        /* Header, footer, dark sections  */

    --color-text:           #1a1a1a;        /* Primary body text              */
    --color-text-muted:     #333333;        /* Muted / secondary text         */
    --color-text-inverse:   #FFFFFF;        /* Text on dark backgrounds       */

    --color-border:         rgba(162, 89, 255, 0.2); /* Borders, dividers, inputs      */
    --color-white:          #FFFFFF;
    --color-black:          #000000;
    --color-rating:         #F5A623;        /* Star rating gold — testimonials */

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

main:has(.cta_variant_inner_page_final) {
    margin-bottom: 0;
}

#content {
    min-height: 400px;
}
 
/* ── 5c. Article ────────────────────────────────────────────*/
 
article {
    background-color: var(--color-bg);
    padding: var(--space-10);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

article:has(.hero_style_full-width),
article:has(.cta_style_full-width) {
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}
 
 
/* ============================================================
   6. COMPONENTS
   ============================================================ */
 
/* ── 6a. Header & Navigation ────────────────────────────────
   Active ByDeNero header styles live in Section 10.           */

/* ── 6b. Buttons ────────────────────────────────────────────*/
 
.btn,
button,
input[type="submit"],
input[type="button"] {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-semi);
    color: var(--color-white);
    background-color: var(--color-accent);
    border: 2px solid var(--color-accent);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    transition: all 0.3s ease;
}
 
.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-white);
    text-decoration: none;
}
 
.btn-outline {
    background-color: transparent;
    color: var(--color-accent);
}
 
.btn-outline:hover {
    background-color: var(--color-accent);
    color: var(--color-white);
}
 
/* ── 6c. Forms ──────────────────────────────────────────────*/
 
form {
    width: 100%;
}
 
label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    color: var(--color-text);
    margin-bottom: var(--space-2);
}
 
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select {
    display: block;
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
 
input:focus,
textarea:focus,
select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(0, 85, 204, 0.12);
}
 
textarea {
    min-height: 120px;
    resize: vertical;
}
 
/* ── 6d. Tables ─────────────────────────────────────────────*/
 
table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-5) 0;
    font-size: var(--text-base);
}
 
th, td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}
 
th {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    color: var(--color-primary);
    background-color: var(--color-bg-alt);
}
 
tr:hover {
    background-color: var(--color-bg-alt);
}
 
/* ── 6e. Footer ─────────────────────────────────────────────
   Active ByDeNero footer styles live in Section 10.           */

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

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

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

.embed-responsive iframe,
.embed-responsive video,
.embed-responsive object,
.embed-responsive embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
 
 
/* ============================================================
   8. UTILITIES
   ============================================================ */
 
/* ── 8a. Skip to Main Content — accessibility ───────────────*/
 
.main_content {
    height: 0;
    overflow: hidden;
    display: block;
    font-size: 0;
    text-transform: uppercase;
    line-height: 0;
    background: var(--color-bg-dark);
    color: var(--color-text-inverse);
    font-weight: var(--weight-bold);
    letter-spacing: 1px;
}
 
.main_content:focus {
    font-size: var(--text-sm);
    line-height: 16px;
    height: 36px;
    padding: 10px 15px;
}
 
/* ── 8b. Scroll To Top ──────────────────────────────────────*/
 
#top {
    appearance: none;
    -webkit-appearance: none;
    position: fixed;
    bottom: 0px;
    right: 20px;
    width: 45px;
    height: 45px;
    opacity: 0;
    border-radius: var(--radius-xl) 0 var(--radius-xl) var(--radius-xl);
    background: var(--color-bg-alt);
    color: var(--color-accent);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: var(--text-sm);
    line-height: 1em;
    user-select: none;
    transition: all 500ms ease;
    border: 1px solid var(--color-border);
    z-index: 10000;
    pointer-events: none;
    cursor: pointer;
}
 
#top.on {
    pointer-events: initial;
    bottom: 20px;
    opacity: 1;
}
 
#top:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
}
 
/* ── 8c. General Helpers ────────────────────────────────────*/
 
/* Screen-reader only — hide visually, keep accessible */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
 
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
 
.mt-0  { margin-top: 0 !important; }
.mb-0  { margin-bottom: 0 !important; }
.pt-0  { padding-top: 0 !important; }
.pb-0  { padding-bottom: 0 !important; }
 
.hidden { display: none !important; }
 
 
/* ============================================================
   9. RESPONSIVE
   ============================================================ */

/* Contact page — contact zone is the page hero, cancel main top margin */
body.page-contact main {
    margin-top: 0;
}

/* Contact block provides its own heading — hide the page.php fallback h1 */
body.page-contact .page-inner > .wrapper {
    display: none;
}

/* ── 9a. Tablet — max-width: 768px ─────────────────────────*/
 
@media (max-width: 768px) {
 
    :root {
        --wrapper-padding: 24px;
    }
 
    h1 { font-size: var(--text-3xl); }
    h2 { font-size: var(--text-2xl); }
    h3 { font-size: var(--text-xl); }
 
    article {
        padding: var(--space-5);
    }
 
    main {
        padding: 0 var(--space-6);
        margin: var(--space-10) auto;
    }
 
}
 
/* ── 9b. Mobile — max-width: 480px ─────────────────────────*/
 
@media (max-width: 480px) {
 
    :root {
        --wrapper-padding: 16px;
    }
 
    h1 { font-size: var(--text-2xl); }
    h2 { font-size: var(--text-xl); }
    h3 { font-size: var(--text-lg); }
 
    article {
        padding: var(--space-4);
    }
 
    main {
        padding: 0 var(--space-4);
        margin: var(--space-8) auto;
    }
 
    ul, ol {
        margin: var(--space-4) 0 var(--space-4) var(--space-5);
    }
}
 
 
/* ==============================================
   10. BYDENERO SHARED PATTERNS
   Add ByDeNero-specific shared patterns and brand styles below
   this line. Repeated visual treatments should live here once,
   then block CSS should keep only block-specific layout, variants,
   responsive rules, and documented exceptions.

   Suggested organization:
     10a. Wrapper / Section Layout
     10b. Pill Buttons
     10c. Eyebrow Pills
     10d. Title Plates
     10e. Gradient / Accent Lines
     10f. Glass / Card Panels
     10g. Header
     10h. Footer
     10i. Contact Drawer / Global Overlays
     10j. Small Utilities
   ──────────────────────────────────────────────────────────

   EXAMPLE — ByDeNero project config:

   :root {
       --color-primary:        #0A0F2C;
       --color-secondary:      #6CA4FF;
       --color-accent:         #A259FF;
       --color-accent-hover:   #D472FF;
       --color-bg:             #F5F5F7;
       --color-bg-dark:        #0A0F2C;
       --font-body:            'Inter', sans-serif;
       --font-heading:         'Sora', sans-serif;
   }

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

/* ============================================================
   10b. SHARED PILL BUTTONS
   ============================================================ */

.hero_cta_primary,
.fcs_variant_homepage_feature .fcs_ctas .btn:not(.btn-outline),
.fcs_variant_agency_support .fcs_ctas .btn:not(.btn-outline),
.page-home .sv_variant_gradient_1 .sv_ctas .sv_cta_primary,
.page-home .cta_variant_homepage_feature .cta_btn_primary,
.cta_variant_inner_page_final .cta_btn_primary,
body.page-about .sv_ctas .sv_cta_primary,
body.page-about .cta_btn_primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0.95rem 1.45rem;
    border-radius: var(--radius-full);
    background: linear-gradient(
        135deg,
        rgba(162, 89, 255, 0.95),
        rgba(212, 114, 255, 0.96)
    );
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--color-text-inverse);
    font-size: var(--text-base);
    text-decoration: none;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 0 26px rgba(162, 89, 255, 0.24);
}

.hero_cta_primary:hover,
.fcs_variant_homepage_feature .fcs_ctas .btn:not(.btn-outline):hover,
.fcs_variant_agency_support .fcs_ctas .btn:not(.btn-outline):hover,
.page-home .sv_variant_gradient_1 .sv_ctas .sv_cta_primary:hover,
.page-home .cta_variant_homepage_feature .cta_btn_primary:hover,
.cta_variant_inner_page_final .cta_btn_primary:hover,
body.page-about .sv_ctas .sv_cta_primary:hover,
body.page-about .cta_btn_primary:hover {
    background: linear-gradient(
        135deg,
        rgba(212, 114, 255, 1),
        rgba(162, 89, 255, 1)
    );
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--color-text-inverse);
    text-decoration: none;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        0 0 30px rgba(162, 89, 255, 0.32);
}

.hero_cta_secondary,
.page-home .sv_variant_gradient_1 .sv_ctas .sv_cta_secondary,
.cta_variant_inner_page_final .cta_btn_secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0.95rem 1.45rem;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--color-text-inverse);
    font-size: var(--text-base);
    text-decoration: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero_cta_secondary:hover,
.page-home .sv_variant_gradient_1 .sv_ctas .sv_cta_secondary:hover,
.cta_variant_inner_page_final .cta_btn_secondary:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.22);
    color: var(--color-text-inverse);
    text-decoration: none;
}

/* ============================================================
   10c. SHARED EYEBROW PILLS
   ============================================================ */

.site_footer_brand_line,
.contact_drawer_eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 0.95rem;
    border: 1px solid rgba(162, 89, 255, 0.18);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.04);
    font-family: var(--font-accent);
    font-size: 0.76rem;
    font-weight: var(--weight-semi);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
}

/* ============================================================
   10d / 10e. SHARED TITLE PLATES AND ACCENT LINES
   ============================================================ */

.page-home .sv_variant_gradient_1 .sv_header_heading,
.page-home .ig_header_heading,
.page-home .cta_variant_homepage_feature .cta_heading,
.contact_drawer_title {
    display: inline-block;
    position: relative;
    border-radius: var(--radius-lg);
    background: linear-gradient(
        150deg,
        rgba(14, 20, 58, 0.98) 0%,
        rgba(10, 15, 44, 0.97) 100%
    );
    border: 1px solid rgba(162, 89, 255, 0.30);
    color: var(--color-text-inverse);
    box-shadow:
        0 22px 54px rgba(0, 0, 0, 0.46),
        0 6px 16px rgba(0, 0, 0, 0.30),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 0 32px rgba(162, 89, 255, 0.20);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.38);
}

.page-home .sv_variant_gradient_1 .sv_header_heading::after,
.page-home .ig_header_heading::after,
.page-home .cta_variant_homepage_feature .cta_heading::after,
.contact_drawer_title::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(
        90deg,
        rgba(162, 89, 255, 0.06)  0%,
        rgba(108, 164, 255, 0.12) 14%,
        rgba(162, 89, 255, 0.40)  28%,
        rgba(212, 114, 255, 0.95) 50%,
        rgba(162, 89, 255, 0.40)  72%,
        rgba(108, 164, 255, 0.12) 86%,
        rgba(162, 89, 255, 0.06)  100%
    );
    box-shadow:
        0 0 10px rgba(212, 114, 255, 0.28),
        0 0 24px rgba(162, 89, 255, 0.18);
    pointer-events: none;
}

/* ============================================================
   10f. SHARED CARD PANELS AND CORNER ACCENTS
   ============================================================ */

.event_block,
.program_block,
.options_list .option {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: ease all 300ms;
    position: relative;
    overflow: hidden;
}

.event_block:hover,
.options_list .option:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
}

.event_block::after,
.program_block::after,
.options_list .option::after {
    content: "";
    height: 20px;
    width: 20px;
    top: -1px;
    right: -1px;
    display: block;
    position: absolute;
    border-top: 10px solid var(--color-accent);
    border-right: 10px solid var(--color-accent);
    border-bottom: 10px solid transparent;
    border-left: 10px solid transparent;
    box-sizing: border-box;
}

/* ============================================================
   BYDENERO — PAGE BACKGROUND
   ============================================================ */

html,
body {
    background-color: var(--color-bg-dark);
    background-image: url('assets/backgrounds/bydenero-grid-tight-only-lines.svg');
    background-size: 400px auto;
    background-repeat: repeat;
    background-position: center top;
}

/* Optional subtle vignette for large screens */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(
            ellipse at center,
            rgba(10, 15, 44, 0) 35%,
            rgba(10, 15, 44, 0.22) 60%,
            rgba(5, 7, 20, 0.55) 82%,
            rgba(0, 0, 0, 0.72) 100%
        );
}

/* Ensure page content sits above the background overlay */
header,
main,
footer,
#content {
    position: relative;
    z-index: 1;
}


/* ============================================================
   BYDENERO — HEADER / NAV OVERRIDES
   ============================================================ */

header {
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0;
    background: rgba(10, 15, 44, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(162, 89, 255, 0.22);
    border-bottom-right-radius: 32px;
    overflow: hidden;
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.22),
        0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 24px rgba(162, 89, 255, 0.10);
}

header::before {
    content: "";
    position: absolute;
    inset: -18px -8px 0 -8px;
    pointer-events: none;
    z-index: 0;
    background: rgba(162, 89, 255, 0.12);
    filter: blur(26px);
    opacity: 0.7;
}

header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        rgba(162, 89, 255, 0.06) 0%,
        rgba(108, 164, 255, 0.12) 14%,
        rgba(162, 89, 255, 0.40) 28%,
        rgba(212, 114, 255, 0.95) 50%,
        rgba(162, 89, 255, 0.40) 72%,
        rgba(108, 164, 255, 0.12) 86%,
        rgba(162, 89, 255, 0.06) 100%
    );
    box-shadow:
        0 0 10px rgba(212, 114, 255, 0.28),
        0 0 24px rgba(162, 89, 255, 0.18);
    pointer-events: none;
}

.header_inner {
    min-height: 118px;
    gap: var(--space-8);
    align-items: center;
}

/* Logo */
#logo,
.site-logo {
    min-height: auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

#logo::after,
.site-logo::after {
    content: "";
    position: absolute;
    left: 25%;
    top: 50%;
    width: 78%;
    height: 68%;
    transform: translate(-50%, -50%);
    background: rgba(162, 89, 255, 0.16);
    filter: blur(18px);
    border-radius: 999px;
    z-index: -1;
    pointer-events: none;
}

#logo img,
.site-logo img,
.custom-logo {
    display: block;
    width: auto;
    height: auto;
    max-height: 120px;
}

#logo:hover,
.site-logo:hover {
    opacity: 0.96;
}

/* Desktop nav */
header nav {
    margin: 0;
    margin-left: auto;
    align-items: center;
    gap: var(--space-2);
}

header nav .nav_item_holder > a {
    position: relative;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: var(--weight-semi);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

header nav .nav_item_holder > a::after {
    content: "";
    position: absolute;
    left: var(--space-4);
    right: var(--space-4);
    bottom: 8px;
    height: 1px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.28s ease, opacity 0.28s ease;
    opacity: 0;
    background: linear-gradient(
        90deg,
        transparent,
        var(--color-accent),
        var(--color-accent-hover),
        transparent
    );
}

header nav .nav_item_holder > a:hover,
header nav .nav_item_holder > a:focus {
    color: var(--color-white);
    text-decoration: none;
    text-shadow: 0 0 12px rgba(162, 89, 255, 0.42);
    background: linear-gradient(
        180deg,
        rgba(162, 89, 255, 0.10),
        rgba(162, 89, 255, 0.06)
    );
    box-shadow:
        0 0 0 1px rgba(162, 89, 255, 0.06) inset,
        0 0 12px rgba(162, 89, 255, 0.10);
}

header nav .nav_item_holder > a:hover::after,
header nav .nav_item_holder > a:focus::after {
    transform: scaleX(1);
    opacity: 1;
}

/* CTA nav item — assign class nav_button to the menu item in WP admin */
header nav .nav_item_holder.nav_button > a {
    margin-left: var(--space-4);
    padding: 0.95rem 1.25rem;
    border-radius: 999px;
    background: linear-gradient(
        135deg,
        rgba(162, 89, 255, 0.95),
        rgba(212, 114, 255, 0.92)
    );
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--color-white);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 0 22px rgba(162, 89, 255, 0.24);
}

header nav .nav_item_holder.nav_button > a::after {
    display: none;
}

header nav .nav_item_holder.nav_button > a:hover,
header nav .nav_item_holder.nav_button > a:focus {
    background: linear-gradient(
        135deg,
        rgba(212, 114, 255, 0.98),
        rgba(162, 89, 255, 0.98)
    );
    color: var(--color-white);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        0 0 28px rgba(162, 89, 255, 0.34);
}

/* Dropdown */
.sub_nav {
    background: rgba(8, 12, 36, 0.96);
    border: 1px solid rgba(162, 89, 255, 0.14);
    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.28),
        0 0 16px rgba(162, 89, 255, 0.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.sub_nav a {
    color: rgba(255, 255, 255, 0.9);
}

.sub_nav a:hover,
.sub_nav a:focus {
    color: var(--color-white);
    background: rgba(162, 89, 255, 0.08);
}

/* Mobile */
@media (max-width: 900px) {
    header {
    border-bottom-right-radius: 32px;
    }
        
    .header_inner {
        min-height: 96px;
        flex-wrap: wrap;
    }

    #logo img,
    .site-logo img,
    .custom-logo {
        max-height: 88px;
    }

    #mnavbutton {
        padding-left: var(--space-4);
    }

    .menu .line {
        stroke: var(--color-white);
    }

    header nav.active {
        margin-top: var(--space-4);
        padding: var(--space-4) 0 var(--space-6) 0;
        border-top: 1px solid rgba(162, 89, 255, 0.14);
        background: rgba(8, 12, 36, 0.34);
    }

    header nav .nav_item_holder {
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    header nav .nav_item_holder > a,
    header nav .nav_item_holder.nav_button > a {
        font-size: 1rem;
        letter-spacing: 0.06em;
        color: rgba(255, 255, 255, 0.95);
    }

    header nav .nav_item_holder.nav_button > a {
        margin-left: 0;
        padding-left: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .sub_nav,
    header nav .nav_item_holder .sub_nav.active,
    .sub_nav.active {
        background: rgba(162, 89, 255, 0.05);
    }
}

/* H1 accent color */
h1 {
    color: var(--color-accent);
    text-shadow: 0 0 20px rgba(162, 89, 255, 0.1);
}

/* H3 secondary color */
h3 {
    color: var(--color-secondary);
}

/* H5 secondary color */
h5 {
    color: var(--color-secondary);
}

/* Strong accent color */
p strong {
    color: var(--color-accent);
}

/* List marker colors */
ul li::marker {
    color: var(--color-accent);
}

ol li::marker {
    color: var(--color-secondary);
}

/* Footer border */
footer {
    border-top: 2px solid var(--color-accent);
}

/* Footer layout */
.site_footer {
    margin-top: 0;
}

.site_footer .wrapper {
    display: block;
    max-width: var(--max-width);
    padding-left: var(--wrapper-padding);
    padding-right: var(--wrapper-padding);
}

.site_footer_inner {
    width: 100%;
}

.site_footer_top {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(160px, max-content) minmax(280px, max-content);
    justify-content: space-between;
    column-gap: var(--space-24);
    row-gap: var(--space-10);
    align-items: start;
}

.site_footer_column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
}

.site_footer_column_left {
    padding-left: 0;
}

.site_footer_logo {
    display: inline-flex;
    text-decoration: none;
}

.site_footer_logo img {
    display: block;
    width: 136px;
    max-width: 136px;
    height: auto;
}

.site_footer_brand_line {
    gap: 0.55rem;
    margin: 0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.03) inset,
        0 0 18px rgba(162, 89, 255, 0.08);
}

.site_footer_resume_btn {
    margin-top: var(--space-1);
}

.site_footer_resume_btn,
.site_footer_contact_primary a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: var(--weight-bold);
}

.site_footer_menu,
.site_footer_contact_list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.site_footer_menu li,
.site_footer_contact_list li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site_footer_menu a,
.site_footer_contact_item a,
.site_footer_socials a,
.site_footer_legal a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
}

.site_footer_socials {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
}

.site_footer_socials a {
    font-size: var(--text-xl);
}

.site_footer_bottom {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-10);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}

.site_footer_bottom p {
    justify-self: start;
}

.site_footer_copyright {
    color: var(--color-accent);
}

.site_footer_legal {
    display: contents;
}

.site_footer_legal_privacy {
    justify-self: center;
}

.site_footer_legal_accessibility {
    justify-self: end;
    text-align: right;
}

@media (max-width: 900px) {
    .site_footer_top {
        grid-template-columns: 1fr 1fr;
        justify-content: initial;
        column-gap: var(--space-10);
    }

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

    .site_footer_column_left {
        padding-left: 0;
    }
}

@media (max-width: 600px) {
    .site_footer_top {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .site_footer_column,
    .site_footer_column_right {
        align-items: center;
        text-align: center;
    }

    .site_footer_contact_item a {
        justify-content: center;
    }

    .site_footer_bottom {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .site_footer_legal {
        display: flex;
        justify-content: center;
        gap: var(--space-4);
        flex-wrap: wrap;
    }
}

/* Contact drawer */
.contact_drawer {
    position: fixed;
    inset: 0;
    z-index: 12000;
    visibility: hidden;
    pointer-events: none;
}

.contact_drawer_backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 72% 18%, rgba(162, 89, 255, 0.18), transparent 36%),
        rgba(5, 7, 20, 0.68);
    opacity: 0;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity 0.28s ease;
}

.contact_drawer_panel {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
    width: min(520px, calc(100vw - var(--space-8)));
    overflow: hidden;
    border: 1px solid rgba(162, 89, 255, 0.28);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 20% 0%, rgba(162, 89, 255, 0.18), transparent 42%),
        linear-gradient(180deg, rgba(18, 20, 60, 0.98), rgba(8, 12, 36, 0.98));
    box-shadow:
        0 34px 90px rgba(0, 0, 0, 0.48),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 0 42px rgba(162, 89, 255, 0.18);
    transform: translateX(calc(100% + var(--space-8)));
    transition: transform 0.34s ease;
}

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

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

.contact_drawer.is_open .contact_drawer_panel {
    transform: translateX(0);
}

.contact_drawer_close {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    z-index: 2;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(162, 89, 255, 0.28);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text-inverse);
    cursor: pointer;
}

.contact_drawer_content {
    height: 100%;
    padding: var(--space-16) var(--space-8) var(--space-8);
    overflow-y: auto;
}

.contact_drawer_eyebrow {
    margin: 0 0 var(--space-5) 0;
}

.contact_drawer_title {
    margin: 0 auto var(--space-6) auto;
    padding: var(--space-3) var(--space-8);
    font-size: var(--text-3xl);
    line-height: 1.08;
    letter-spacing: 0.02em;
}

.contact_drawer_intro {
    max-width: 420px;
    margin: 0 auto var(--space-8) auto;
    color: rgba(255, 255, 255, 0.78);
    font-size: var(--text-md);
    text-align: center;
}

.contact_drawer_embed_slot {
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    border: 1px dashed rgba(162, 89, 255, 0.34);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.72);
    text-align: center;
}

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

/* ── [hidden] guard — prevents display:flex overriding hidden attribute ── */

.contact_drawer_panel [hidden] {
    display: none !important;
}

/* ── Drawer form ─────────────────────────────────────────────────────────── */

.contact_drawer_form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

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

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

.drawer_form_field label {
    font-family: var(--font-accent);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.drawer_form_required {
    color: rgba(162, 89, 255, 0.8);
}

.contact_drawer_form input[type="text"],
.contact_drawer_form input[type="email"],
.contact_drawer_form textarea {
    width: 100%;
    padding: 11px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(162, 89, 255, 0.28);
    border-radius: var(--radius-md);
    color: var(--color-text-inverse);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    box-sizing: border-box;
}

.contact_drawer_form input::placeholder,
.contact_drawer_form textarea::placeholder {
    color: rgba(255, 255, 255, 0.32);
}

.contact_drawer_form input:focus-visible,
.contact_drawer_form textarea:focus-visible {
    border-color: rgba(162, 89, 255, 0.65);
    box-shadow: 0 0 0 3px rgba(162, 89, 255, 0.14);
}

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

/* Error states */

.drawer_field_error_msg {
    font-family: var(--font-accent);
    font-size: var(--text-xs);
    color: rgba(255, 110, 110, 0.9);
}

.drawer_form_field.has_error input,
.drawer_form_field.has_error textarea {
    border-color: rgba(255, 100, 100, 0.65);
}

.drawer_form_server_error {
    padding: var(--space-3) var(--space-4);
    border: 1px solid rgba(255, 100, 100, 0.4);
    border-radius: var(--radius-md);
    background: rgba(255, 100, 100, 0.08);
    color: rgba(255, 130, 130, 0.95);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

/* Submit button */

.contact_drawer_submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 13px var(--space-8);
    background: linear-gradient(135deg, var(--color-accent) 0%, #7c3aed 100%);
    border: none;
    border-radius: var(--radius-full);
    color: #fff;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-semi);
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
    box-shadow: 0 0 18px rgba(162, 89, 255, 0.32);
    margin-top: var(--space-2);
}

.contact_drawer_submit:hover {
    box-shadow: 0 0 26px rgba(162, 89, 255, 0.48);
    transform: translateY(-1px);
}

.contact_drawer_submit:active {
    transform: translateY(0);
}

.contact_drawer_submit[disabled] {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Success state */

.drawer_form_success {
    text-align: center;
    padding: var(--space-8) var(--space-4);
}

.drawer_form_success:focus {
    outline: 2px solid rgba(108, 164, 255, 0.45);
    outline-offset: 6px;
}

.drawer_form_success_icon {
    display: block;
    font-size: 2.5rem;
    color: var(--color-secondary);
    filter: drop-shadow(0 0 14px rgba(108, 164, 255, 0.5));
    margin-bottom: var(--space-4);
}

.drawer_form_success h3 {
    margin: 0 0 var(--space-3) 0;
}

.drawer_form_success p {
    color: rgba(255, 255, 255, 0.76);
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

body.contact_drawer_open {
    overflow: hidden;
}

@media (max-width: 768px) {
    .contact_drawer_panel {
        top: var(--space-3);
        right: var(--space-3);
        bottom: var(--space-3);
        width: calc(100vw - var(--space-6));
    }

    .contact_drawer_content {
        padding: var(--space-12) var(--space-6) var(--space-6);
    }
}

@media (max-width: 480px) {
    .contact_drawer_panel {
        top: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        border-radius: 0;
    }

    .contact_drawer_title {
        font-size: var(--text-3xl);
    }
}

/* Code blocks */
code {
    background-color: var(--color-bg-dark);
    color: var(--color-secondary);
}

pre {
    background-color: var(--color-bg-dark);
    color: var(--color-secondary);
    border-left: 4px solid var(--color-accent);
}

/* Blockquote */
blockquote {
    border-left: 4px solid var(--color-accent);
    color: var(--color-secondary);
}

/* Scroll to top hover glow */
#top:hover {
    border: 1px solid var(--color-accent);
    box-shadow: 0 0 12px 0px var(--color-accent);
    color: var(--color-accent);
}

/* ── Homepage — page-level overrides ────────────────────────── */
/* Scope: .page-home only. Add per-page spacing/layout overrides here. */

.page-home main {
    margin-bottom: 0;
}

.page-home footer {
    margin-top: 0;
}

/* ── Inner Banner — cutout removal ──────────────────────────────────
   Belt-and-suspenders: already in hero.css but also here to guarantee
   the polygon shape never shows on inner-page hero variants.          */
.hero_variant_inner_banner .hero_visual_cutout {
    display: none;
}

/* ── Inner Banner hero — shared styles for all inner pages ───────────
   Applies to every block using section_variant = inner-banner.
   Per-page gradient overrides go in body.page-{slug} below.
   ─────────────────────────────────────────────────────────────────── */

.hero_variant_inner_banner.hero_block {
    background: linear-gradient(
        180deg,
        rgba(76, 164, 255, 0.88) 0%,
        rgba(92,  79, 255, 0.78) 100%
    );
    padding-top: 0;
    align-items: flex-start;
}

/* SVG boxes pattern — replaces the default ambient glow ::before */
.hero_variant_inner_banner.hero_block::before {
    inset: 0;
    height: auto;
    background: url('assets/backgrounds/bydenero-boxes-no-fill-tight-inverted copy.svg') repeat center top / 400px auto;
    filter: none;
    opacity: 1;
}

/* Radial soft overlay — desktop only to preserve the mobile ::after gradient line */
@media (min-width: 900px) {
    .hero_variant_inner_banner.hero_block::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background:
            radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.12), transparent 28%),
            radial-gradient(circle at 82% 72%, rgba(162,  89, 255, 0.12), transparent 30%);
        pointer-events: none;
    }
}

/* ── Inner Banner — content card ────────────────────────────────────
   White frosted card. Matches the Split View white card treatment.  */
.hero_variant_inner_banner .hero_content {
    background: rgba(252, 252, 255, 0.95);
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-10);
    border: 1px solid rgba(255, 255, 255, 0.80);
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.14),
        0 0 0 1px rgba(255, 255, 255, 0.60) inset;
    margin-left: 0;
}

.hero_variant_inner_banner .hero_content .hero_heading {
    color: var(--color-primary);
    text-shadow: none;
}

.hero_variant_inner_banner .hero_content .hero_subheading {
    color: var(--color-primary);
}

.hero_variant_inner_banner .hero_content .hero_paragraph {
    color: var(--color-text);
}

.hero_variant_inner_banner .hero_content .hero_eyebrow {
    background: rgba(162, 89, 255, 0.08);
    border-color: rgba(162, 89, 255, 0.28);
    color: var(--color-accent);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

/* ── Inner Banner — portrait-as-background layout ───────────────────
   Applies when section_variant = inner-banner AND portrait image set. */

/* Portrait-as-bg: shift content card right to match homepage hero indent */
.hero_variant_inner_banner .hero_layout_portrait_bg .hero_content {
    margin-left: var(--wrapper-padding);
}

/* Below 900px: hide portrait — gradient shows through */
@media (max-width: 899px) {
    .hero_portrait_bg_img {
        display: none;
    }
}

/* 900px+: narrow to right 55% so face clears the content card.
   Portrait image (1200x1600) has no horizontal overflow so object-position X
   does nothing — element narrowing is the only way to shift the crop right.
   mask-image fades portrait pixels to transparent at the bottom.
   right: wrapper-padding pulls portrait away from the viewport edge. */
@media (min-width: 900px) {
    .hero_portrait_bg_img {
        left: auto;
        right: var(--wrapper-padding);
        width: 55%;
        object-position: center 30%;
        -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 88%);
        mask-image: linear-gradient(to bottom, black 40%, transparent 88%);
    }
}

/* Dark overlay + bottom dissolve — darker toward bottom then transparent
   so the blue gradient shows through. z-index 1 = above img (0), below card (2). */
@media (min-width: 900px) {
    .hero_layout_portrait_bg .hero_visual::after {
        content: "";
        position: absolute;
        top: 0;
        right: var(--wrapper-padding);
        bottom: 0;
        left: auto;
        width: 55%;
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.10) 0%,
            rgba(0, 0, 0, 0.15) 50%,
            rgba(0, 0, 0, 0.45) 80%,
            transparent 100%
        );
        z-index: 1;
        pointer-events: none;
    }
}


/* ============================================================
   10l. PAGE-SPECIFIC OVERRIDES — ABOUT
   Scoped to body.page-about so nothing bleeds to other pages.
   ============================================================ */

/* Full-width breakout + glowing gradient bottom line (matches header ::after) */
body.page-about .split_view {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    position: relative;
}

body.page-about .split_view::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        rgba(162, 89, 255, 0.06) 0%,
        rgba(108, 164, 255, 0.12) 14%,
        rgba(162, 89, 255, 0.40) 28%,
        rgba(212, 114, 255, 0.95) 50%,
        rgba(162, 89, 255, 0.40) 72%,
        rgba(108, 164, 255, 0.12) 86%,
        rgba(162, 89, 255, 0.06) 100%
    );
    box-shadow:
        0 0 10px rgba(212, 114, 255, 0.28),
        0 0 24px rgba(162, 89, 255, 0.18);
    pointer-events: none;
}

/* Breakout removes main's 40px padding — restore it by doubling wrapper padding */
body.page-about .sv_wrapper {
    padding-left: calc(var(--wrapper-padding) * 2);
    padding-right: calc(var(--wrapper-padding) * 2);
}

/* Heading + accent line — match mockup size exactly */
body.page-about .sv_col_heading,
body.page-about .sv_col_accent_line {
    font-size: 2.6rem;
}

/* Heading color on dark variant */
body.page-about .sv_variant_dark .sv_col_heading {
    color: var(--color-text-inverse);
}

/* Body text — slightly muted white, looser line-height */
body.page-about .sv_variant_dark .sv_col_body p {
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.8;
}

/* Image column — rounded card with 4:5 ratio + bottom fade */
body.page-about .sv_col_type_image {
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    position: relative;
}

body.page-about .sv_col_type_image .sv_col_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    filter: brightness(0.9);
}

body.page-about .sv_col_type_image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 15, 44, 0.7) 0%, transparent 50%);
    pointer-events: none;
}

/* Text column — flex column so content stacks naturally */
body.page-about .sv_col_type_text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}



/* Gradient accent line under the heading — same line used site-wide in §10e */
body.page-about .sv_col_accent_line {
    position: relative;
    padding-bottom: var(--space-5);
    margin-bottom: var(--space-5);
}

body.page-about .sv_col_accent_line::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        rgba(162, 89, 255, 0.06)  0%,
        rgba(108, 164, 255, 0.12) 14%,
        rgba(162, 89, 255, 0.40)  28%,
        rgba(212, 114, 255, 0.95) 50%,
        rgba(162, 89, 255, 0.40)  72%,
        rgba(108, 164, 255, 0.12) 86%,
        rgba(162, 89, 255, 0.06)  100%
    );
    box-shadow:
        0 0 10px rgba(212, 114, 255, 0.28),
        0 0 24px rgba(162, 89, 255, 0.18);
    pointer-events: none;
}

/* ── FCS "What You Actually Get" ──────────────────────────────── */

body.page-about .flexible_content_section {
    background:
        radial-gradient(circle at 20% 30%, rgba(108, 164, 255, 0.10), transparent 40%),
        linear-gradient(180deg, rgba(10, 15, 44, 0.82) 0%, rgba(20, 10, 50, 0.88) 100%);
    border: 1px solid rgba(162, 89, 255, 0.16);
    border-radius: 65px;
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.30),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset,
        0 0 28px rgba(162, 89, 255, 0.10);
}

body.page-about .fcs_content {
    margin-bottom: var(--space-12);
}

body.page-about .fcs_eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(162, 89, 255, 0.28);
    border-radius: var(--radius-full);
    background: rgba(162, 89, 255, 0.08);
    font-family: var(--font-accent);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: var(--color-accent);
    margin-bottom: 1.25rem;
}

body.page-about .fcs_heading {
    font-size: 2.4rem;
    color: var(--color-text-inverse);
    margin: 0;
}

body.page-about .flexible_content_section:not(.fcs_variant_value_cards) .fcs_items {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin-top: 0;
}

body.page-about .flexible_content_section:not(.fcs_variant_value_cards) .fcs_item {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(162, 89, 255, 0.18);
    border-radius: 20px;
    padding: var(--space-8) var(--space-6);
}

body.page-about .flexible_content_section:not(.fcs_variant_value_cards) .fcs_item_number {
    font-size: 2rem;
    margin-bottom: var(--space-4);
    line-height: 1;
}

body.page-about .flexible_content_section:not(.fcs_variant_value_cards) .fcs_item_media {
    margin-bottom: var(--space-5);
}

body.page-about .flexible_content_section:not(.fcs_variant_value_cards) .fcs_item_media img {
    display: block;
    width: 100%;
    max-width: none;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: contain;
    border-radius: 0;
}

body.page-about .flexible_content_section:not(.fcs_variant_value_cards) .fcs_item_heading {
    font-size: 1.2rem;
    color: var(--color-secondary);
    margin: 0 0 0.75rem;
}

body.page-about .flexible_content_section:not(.fcs_variant_value_cards) .fcs_item_text,
body.page-about .flexible_content_section:not(.fcs_variant_value_cards) .fcs_item_text p {
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.7;
    font-size: var(--text-base);
    margin: 0;
}

/* ── CTA Banner — About page ───────────────────────────────────── */

body.page-about .cta_banner,
.cta_variant_inner_page_final {
    margin-top: 0;
    margin-bottom: 0;
    background: linear-gradient(135deg, rgba(162, 89, 255, 0.18) 0%, rgba(108, 164, 255, 0.12) 100%);
    border-top: 1px solid rgba(162, 89, 255, 0.20);
    border-top-left-radius: 65px;
    border-top-right-radius: 65px;
    padding: 72px 0;
    overflow: hidden;
}

body.page-about .cta_heading,
.cta_variant_inner_page_final .cta_heading {
    font-size: 2.2rem;
    color: var(--color-text-inverse);
    margin: 0 0 var(--space-4);
}

body.page-about .cta_subheading,
.cta_variant_inner_page_final .cta_subheading {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.05rem;
    line-height: 1.75;
    margin: 0 0 var(--space-8);
}

body.page-about .cta_inner,
.cta_variant_inner_page_final .cta_inner {
    max-width: 700px;
}

.cta_variant_inner_page_final + p:empty,
.cta_variant_inner_page_final + .wp-block-paragraph:empty {
    display: none;
}

main > p.wp-block-paragraph:empty {
    display: none;
    margin: 0;
}

@media (max-width: 768px) {
    .cta_variant_inner_page_final {
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
    }
}

/* ── Timeline "The Path to ByDeNero" ───────────────────────────── */

body.page-about .timeline_block {
    padding: var(--space-20) 0;
}

/* Header */
body.page-about .timeline_eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(162, 89, 255, 0.28);
    border-radius: var(--radius-full);
    background: rgba(162, 89, 255, 0.08);
    font-family: var(--font-accent);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: var(--color-accent);
    margin-bottom: 1.25rem;
}

body.page-about .timeline_heading {
    font-size: 2.4rem;
    color: var(--color-text-inverse);
    margin: 0;
}

/* Tab strip — neon line + dots */
body.page-about .timeline_tabs {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: none;
    padding-bottom: var(--space-6);
    gap: 0;
}

/* The neon line — positioned at the dot center (8px = half of 16px dot) */
body.page-about .timeline_tabs::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 8px;
    height: 2px;
    background: linear-gradient(
        90deg,
        rgba(162, 89, 255, 0.06)  0%,
        rgba(108, 164, 255, 0.12) 14%,
        rgba(162, 89, 255, 0.40)  28%,
        rgba(212, 114, 255, 0.95) 50%,
        rgba(162, 89, 255, 0.40)  72%,
        rgba(108, 164, 255, 0.12) 86%,
        rgba(162, 89, 255, 0.06)  100%
    );
    box-shadow:
        0 0 10px rgba(212, 114, 255, 0.28),
        0 0 24px rgba(162, 89, 255, 0.18);
    pointer-events: none;
    z-index: 0;
}

/* Each tab — dot on top, period label below */
body.page-about .timeline_tab {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    border: none;
    border-bottom: none;
    margin-bottom: 0;
    padding: 0 var(--space-4);
    background: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.45);
    font-family: var(--font-accent);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color 0.25s ease;
    white-space: nowrap;
}

/* The dot */
body.page-about .timeline_tab::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(162, 89, 255, 0.20);
    border: 2px solid rgba(162, 89, 255, 0.45);
    flex-shrink: 0;
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

body.page-about .timeline_tab:hover {
    color: rgba(255, 255, 255, 0.80);
}

body.page-about .timeline_tab:hover::before {
    background: rgba(162, 89, 255, 0.45);
    border-color: var(--color-accent);
}

/* Active dot — full glow */
body.page-about .timeline_tab.is-active {
    color: var(--color-text-inverse);
    border-bottom-color: transparent;
}

body.page-about .timeline_tab.is-active::before {
    background: var(--color-accent);
    border-color: rgba(212, 114, 255, 0.90);
    box-shadow:
        0 0 0 4px rgba(162, 89, 255, 0.18),
        0 0 14px rgba(162, 89, 255, 0.55),
        0 0 28px rgba(212, 114, 255, 0.28);
    transform: scale(1.35);
}

/* Card stage */
body.page-about .timeline_stage {
    margin-top: var(--space-6);
    overflow: visible; /* cards extend beyond stage; timeline_wrapper clips them */
}

/* Outer card narrowed so peek cards appear from the sides without being covered */
body.page-about .timeline_card {
    width: 62%;
    left: 19%;
}

body.page-about .timeline_card_inner {
    width: 100%;
    max-width: none;
    aspect-ratio: unset;
    overflow-y: visible;
    background: rgba(18, 24, 58, 0.72);
    border: 1px solid rgba(162, 89, 255, 0.18);
    border-radius: 20px;
    padding: var(--space-8);
    text-align: left;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset,
        0 0 24px rgba(162, 89, 255, 0.08);
}

body.page-about .timeline_period {
    display: block;
    font-family: var(--font-accent);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-3);
}

body.page-about .timeline_title {
    font-size: var(--text-xl);
    color: var(--color-secondary);
    margin: 0 0 var(--space-4);
}

body.page-about .timeline_body {
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.75;
    font-size: var(--text-base);
    margin: 0;
}

/* Arrows */
body.page-about .timeline_arrow {
    background: rgba(18, 24, 58, 0.72);
    border: 1px solid rgba(162, 89, 255, 0.22);
    color: var(--color-text-inverse);
}

body.page-about .timeline_arrow:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-text-inverse);
}

/* ── Timeline shelf / cover flow — About page ──────────────────────────────
   Cards adjacent to the active one peek in from the sides like an album shelf.
   .timeline_wrapper clips the overflow; .timeline_stage lets cards extend out.
   Scoped to data-transition="fade" (default for this block).
   ────────────────────────────────────────────────────────────────────────── */

body.page-about .timeline_wrapper {
    overflow: visible;
    clip-path: inset(0 var(--wrapper-padding)); /* clips peek cards at content boundary = aligned with header logo */
}

/* Override fade transition — unified 0.4s so all state changes animate smoothly */
body.page-about .timeline_block[data-transition="fade"] .timeline_card {
    transform: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
    z-index: 0;
}

body.page-about .timeline_block[data-transition="fade"] .timeline_card.is-prev {
    opacity: 0.3;
    transform: translateX(-88%) scale(0.85);
    pointer-events: auto;
    cursor: pointer;
    z-index: 1;
    -webkit-mask-image: none;
    mask-image: none;
}

body.page-about .timeline_block[data-transition="fade"] .timeline_card.is-active {
    opacity: 1;
    transform: translateX(0) scale(1);
    z-index: 2;
    -webkit-mask-image: none;
    mask-image: none;
}

body.page-about .timeline_block[data-transition="fade"] .timeline_card.is-next {
    opacity: 0.3;
    transform: translateX(88%) scale(0.85);
    pointer-events: auto;
    cursor: pointer;
    z-index: 1;
    -webkit-mask-image: none;
    mask-image: none;
}

/* Active card inner — boosted glow so center card pops vs peek cards */
body.page-about .timeline_block[data-transition="fade"] .timeline_card.is-active .timeline_card_inner {
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.50),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 0 50px rgba(162, 89, 255, 0.28),
        0 0 100px rgba(162, 89, 255, 0.12);
    border-color: rgba(162, 89, 255, 0.38);
}

body.page-about .timeline_block[data-transition="fade"] .timeline_card.is-prev .timeline_card_inner {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, 0.18) 16%,
        black 42%,
        black 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, 0.18) 16%,
        black 42%,
        black 100%
    );
}

body.page-about .timeline_block[data-transition="fade"] .timeline_card.is-next .timeline_card_inner {
    -webkit-mask-image: linear-gradient(
        to left,
        transparent 0%,
        rgba(0, 0, 0, 0.18) 16%,
        black 42%,
        black 100%
    );
    mask-image: linear-gradient(
        to left,
        transparent 0%,
        rgba(0, 0, 0, 0.18) 16%,
        black 42%,
        black 100%
    );
}

/* Image — taller so portrait photos show more of the subject */
body.page-about .timeline_card_image {
    height: 280px;
    object-position: center 15%;
}


/* ═══════════════════════════════════════════════════════════════════════
   §10j  ZONE BAND — gradient-1 ByDeNero treatment
   Scoped to .zone_band_variant_gradient_1. Mirrors the Split View
   homepage feature background exactly (same gradient, SVG grid, glows).
   ═══════════════════════════════════════════════════════════════════════ */

/* Base gradient background */
.zone_band_variant_gradient_1 {
    background: linear-gradient(
        180deg,
        rgba(76, 164, 255, 0.88)  0%,
        rgba(92, 79,  255, 0.78) 100%
    );
    border-radius: 65px;
    overflow: hidden;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.28),
        0 0 34px rgba(108, 164, 255, 0.12);
}

/* Inverted SVG grid — same tile size and settings as Split View §10 */
.zone_band_variant_gradient_1::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('assets/backgrounds/bydenero-boxes-no-fill-tight-inverted copy.svg');
    background-repeat: repeat;
    background-size: 400px auto;
    background-position: center top;
    pointer-events: none;
}

/* Radial glow accents — same values as Split View §10 */
.zone_band_variant_gradient_1::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.12), transparent 28%),
        radial-gradient(circle at 82% 72%, rgba(162, 89,  255, 0.12), transparent 30%);
    pointer-events: none;
}

/* Elevate heading and inner content above pseudo-element layers (z-index: 0).
   Without this, the SVG grid + glows paint over all block content. */
.zone_band_variant_gradient_1 .zone_band_header,
.zone_band_variant_gradient_1 .zone_band_inner {
    position: relative;
    z-index: 1;
}

/* Full-width gradient-1: all four corners rounded */
.zone_band_variant_gradient_1.zone_band_style_full_width {
    border-radius: 65px;
}

/* Contained gradient-1: 65px radius matching about page FCS card */
.zone_band_variant_gradient_1.zone_band_style_contained {
    border-radius: 65px;
}

/* Responsive: soften radius on small screens */
@media (max-width: 768px) {
    .zone_band_variant_gradient_1.zone_band_style_full_width {
        border-radius: 24px;
    }

    .zone_band_variant_gradient_1.zone_band_style_contained {
        border-radius: 24px;
    }
}


/* ============================================================
   10m. STANDARD PAGE CONTENT
   Light readable card for plain WordPress editor pages
   (Privacy Policy, Terms, etc.) that have no ACF blocks.
   Applied via page.php when post_content has no wp:acf/ blocks.
   ============================================================ */

.standard_page_section {
    padding: var(--space-8) 0 var(--space-16);
}

.standard_page_card {
    max-width: 900px;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 4rem);
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.94);
    color: var(--color-primary);
    box-shadow: var(--shadow-lg);
}

/* Title h1 — output by PHP (get_the_title()), separate from the_content() */
.standard_page_card .standard_page_title {
    color: var(--color-primary);
    text-shadow: none;
    margin-top: 0;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

/* All headings inside card — override global h1/h3/h5 accent/secondary color rules */
.standard_page_card h1,
.standard_page_card h2,
.standard_page_card h3,
.standard_page_card h4,
.standard_page_card h5,
.standard_page_card h6 {
    color: var(--color-primary);
    text-shadow: none;
}

.standard_page_card h2 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
}

.standard_page_card h3,
.standard_page_card h4 {
    margin-top: var(--space-6);
    margin-bottom: var(--space-2);
}

/* Paragraphs */
.standard_page_card p {
    color: rgba(10, 15, 44, 0.82);
    line-height: 1.75;
    margin-bottom: var(--space-4);
}

/* Override global p strong → --color-accent rule */
.standard_page_card p strong {
    color: var(--color-primary);
}

/* Lists */
.standard_page_card ul,
.standard_page_card ol {
    padding-left: var(--space-6);
    margin-bottom: var(--space-4);
}

.standard_page_card li {
    color: rgba(10, 15, 44, 0.82);
    line-height: 1.75;
    margin-bottom: var(--space-2);
}

/* Links */
.standard_page_card a {
    color: var(--color-accent);
    text-decoration: underline;
}

.standard_page_card a:hover {
    color: var(--color-accent-hover);
}

/* Dividers */
.standard_page_card hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-8) 0;
}

@media (max-width: 640px) {
    .standard_page_section {
        padding: var(--space-4) 0 var(--space-10);
    }
}


/* ============================================================
   10n. PAGE-SPECIFIC OVERRIDES — SERVICES
   Spacing polish for the Services page layout.
   Scoped to body.page-services — no other pages affected.
   ============================================================ */

/* Zone Band: intentional breathing room between Services Core and Zone Band */
body.page-services .zone_band {
    margin-top: var(--space-20);
}

/* Process Path: intentional breathing room between Zone Band exit and Process Path */
/* border-radius clips the SVG grid body::before, giving visible rounded corners on dark bg */
body.page-services .fcs_variant_process_path {
    margin-top: var(--space-20);
    border-radius: 65px 65px 0 0;
    overflow: hidden;
}

/* Agency Support: increase top padding from 48px (--space-12) to 64px (--space-16)
   so it feels less tight between the Before/After block above and Zone Band edge */
body.page-services .fcs_variant_agency_support {
    padding-top: var(--space-16);
}

@media (max-width: 768px) {
    body.page-services .zone_band {
        margin-top: var(--space-12);
    }

    body.page-services .fcs_variant_process_path {
        margin-top: var(--space-12);
        border-radius: 24px 24px 0 0;
    }
}

/* Mobile: center all content text on Services page (contact form excluded — on /contact/ only) */
@media (max-width: 767px) {
    body.page-services .sv_col_type_text {
        width: 100%;
        max-width: 100%;
        align-items: center;
    }

    body.page-services .sc_eyebrow,
    body.page-services .sc_heading { text-align: center; }
    body.page-services .sc_body { text-align: center; }
    body.page-services .sc_body p { text-align: center; }
    body.page-services .sc_card_title,
    body.page-services .sc_card_subtext { text-align: center; }

    body.page-services .sv_col_eyebrow,
    body.page-services .sv_col_heading,
    body.page-services .sv_col_accent_line { text-align: center; }
    body.page-services .sv_col_body { text-align: center; }
    body.page-services .sv_col_body p { text-align: center; }

    body.page-services .ba_eyebrow,
    body.page-services .ba_heading { text-align: center; }
    body.page-services .ba_intro { text-align: center; }
    body.page-services .ba_intro p { text-align: center; }

    body.page-services .cta_eyebrow,
    body.page-services .cta_heading,
    body.page-services .cta_subheading { text-align: center; }
}


/* ============================================================
   10o. PAGE-SPECIFIC OVERRIDES — ABOUT
   Spacing and layout polish for the About page.
   Scoped to body.page-about — no other pages affected.
   ============================================================ */

/* Value Cards: breathing room after Timeline exits */
body.page-about .fcs_variant_value_cards {
    margin-top: var(--space-16);
}

/* Split View dark variant — tablet only: cap image column height so text
   appears above the fold. Uses aspect-ratio on the column container +
   object-fit: cover on the img so the photo fills without distortion.
   Not applied at ≤480px (mobile already looks correct at natural size). */
@media (max-width: 768px) and (min-width: 481px) {
    body.page-about .sv_variant_dark .sv_col_type_image {
        aspect-ratio: 16 / 9;
        overflow: hidden;
    }

    body.page-about .sv_variant_dark .sv_col_img {
        height: 100%;
        object-fit: cover;
        object-position: top center;
    }
}

/* Mobile: center all content text on About page (contact form excluded — on /contact/ only) */
@media (max-width: 767px) {
    /* Image always above text when columns stack */
    body.page-about .sv_col_type_image {
        order: -1;
    }

    body.page-about .sv_col_type_text {
        width: 100%;
        max-width: 100%;
        align-items: center;
    }

    body.page-about .sv_col_eyebrow,
    body.page-about .sv_col_heading,
    body.page-about .sv_col_accent_line { text-align: center; }
    body.page-about .sv_col_body { text-align: center; }
    body.page-about .sv_col_body p { text-align: center; }

    body.page-about .timeline_eyebrow,
    body.page-about .timeline_heading,
    body.page-about .timeline_title,
    body.page-about .timeline_body,
    body.page-about .timeline_period { text-align: center; }

    /* timeline_card_inner has an explicit text-align: left override in §10o non-media rules — reset on mobile */
    body.page-about .timeline_card_inner { text-align: center; }

    /* Reduce timeline card heading — base var(--text-xl) is too large on mobile cards */
    body.page-about .timeline_title { font-size: var(--text-md); }

    body.page-about .cta_eyebrow,
    body.page-about .cta_heading,
    body.page-about .cta_subheading { text-align: center; }
}


/* ============================================================
   10p. PAGE-SPECIFIC OVERRIDES — HOMEPAGE
   Spacing and layout polish for the Homepage.
   Scoped to body.page-home — no other pages affected.
   ============================================================ */

/* Split View gradient-1 — tablet only: cap image column height so text
   appears above the fold. The ≤768px reset in split_view.css already
   sets max-width: 100% on the image column; this adds the height cap.
   Not applied at ≤480px (mobile images are proportionate at natural size). */
@media (max-width: 768px) and (min-width: 481px) {
    body.page-home .sv_variant_gradient_1 .sv_col_type_image {
        aspect-ratio: 16 / 9;
        overflow: hidden;
    }

    body.page-home .sv_variant_gradient_1 .sv_col_img {
        height: 100%;
        object-fit: cover;
        object-position: top center;
    }
}


/* ============================================================
   12. ACCESSIBILITY / ADA ENHANCEMENTS
   ============================================================
   Global focus-visible styles for keyboard navigation.
   Reduced-motion support for users with vestibular disorders.

   Nav-specific ADA focus styles live in ada_responsive_nav/style.css.
   Form input focus states live in §6c (global) and §10i (drawer).
   Everything else keyboard/motion-related lives here.
   ============================================================ */

/* ── 12a. Focus-visible — buttons and interactive controls ──*/

/* Generic button focus ring — applies to all .btn, native buttons,
   and [role="button"] elements that don't have their own rule. */
.btn:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(162, 89, 255, 0.18);
}

/* Scroll-to-top button */
#top:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    opacity: 1;
    pointer-events: initial;
}

/* Contact drawer submit button */
.contact_drawer_submit:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(162, 89, 255, 0.32);
}

/* Contact page form submit button */
.contact_form_submit:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(162, 89, 255, 0.18);
}

/* CTA pill buttons — shared across blocks */
.hero_cta_primary:focus-visible,
.hero_cta_secondary:focus-visible,
.cta_btn_primary:focus-visible,
.sv_cta_primary:focus-visible {
    outline: 2px solid var(--color-text-inverse);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgba(162, 89, 255, 0.4);
}

/* Footer nav / social links — light-on-dark context */
.site_footer_nav a:focus-visible,
.site_footer_socials a:focus-visible,
.site_footer_legal a:focus-visible,
.site_footer_logo:focus-visible {
    outline: 2px solid var(--color-text-inverse);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ── 12b. Reduced motion ─────────────────────────────────── */

/* CSS-level: cut all transitions and animations to near-instant.
   JS-driven animations (Timeline carousel, drawer open/close) are
   handled separately in scripts.js via matchMedia check. */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Ensure the contact drawer appears instantly — no slide */
    .contact_drawer_panel {
        transition: none !important;
    }

    /* Scroll-to-top: skip the slide-up animation — show/hide directly */
    #top {
        transition: none !important;
    }
}