/* ================================================================
   styles.css — Clarity Academics design system
   ================================================================

   HOW THIS FILE IS ORGANIZED (top to bottom = cascade order)
   ----------------------------------------------------------
   LAYER 1  FOUNDATIONS   design tokens (colors, type scale, spacing)
                          + reset/base element styles
   LAYER 2  UTILITIES     small single-purpose helpers (spacing,
                          width, skip link)
   LAYER 3  COMPONENTS    reusable building blocks (buttons, nav,
                          mobile menu, FAQ, CTA, footer, panels)
   LAYER 4  MOTION        animation / reveal styles + reduced-motion
   LAYER 5  RESPONSIVE    breakpoint overrides

   HOW TO ADD A NEW COMPOFNENT (e.g. hero, cards, split section)
   ------------------------------------------------------------
   1. Reuse the tokens in LAYER 1 — never hardcode a color, font size,
      or spacing value; reference var(--...) so it stays consistent.
   2. Add the component's styles in LAYER 3, at the marked spot:
         ▼▼▼ ADD NEW COMPONENTS BELOW ▼▼▼
   3. Name it for what it is (.hero, .card, .split), give it a comment
      banner, and bake in focus/hover states.
   4. Put any breakpoint tweaks for it in LAYER 5 (or right beside the
      component — just be consistent).
   ================================================================ */


/* ////////////////////////////////////////////////////////////////
   LAYER 1 — FOUNDATIONS
   //////////////////////////////////////////////////////////////// */

/* ================================================================
   1. CSS CUSTOM PROPERTIES (Brand Tokens & Fluid Typography)
   ================================================================ */

/* --- Fluid Typography Scale (with clamp support) --- */
@supports (font-size: clamp(1rem, 1vi, 1rem)) {
    :root {
        --fs-xs: clamp(0.69rem, 0.15vi + 0.66rem, 0.84rem);
        --fs-sm: clamp(0.83rem, 0.22vi + 0.78rem, 1.05rem);
        --fs-base: clamp(1rem, 0.32vi + 0.93rem, 1.31rem);
        --fs-md: clamp(1.2rem, 0.45vi + 1.1rem, 1.64rem);
        --fs-lg: clamp(1.44rem, 0.63vi + 1.3rem, 2.05rem);
        --fs-xl: clamp(1.73rem, 0.86vi + 1.54rem, 2.56rem);
        --fs-xxl: clamp(2.07rem, 1.16vi + 1.81rem, 3.2rem);
        --fs-xxxl: clamp(2.49rem, 1.56vi + 2.14rem, 4.01rem);
        --fs-xxxxl: clamp(2.99rem, 2.07vi + 2.52rem, 5.01rem);
    }
}

/* --- Fallback for browsers that don't support clamp --- */
@supports not (font-size: clamp(1rem, 1vi, 1rem)) {
    :root {
        --fs-xs: 0.69rem;
        --fs-sm: 0.83rem;
        --fs-base: 1rem;
        --fs-md: 1.2rem;
        --fs-lg: 1.44rem;
        --fs-xl: 1.73rem;
        --fs-xxl: 2.07rem;
        --fs-xxxl: 2.49rem;
        --fs-xxxxl: 2.99rem;
    }
    @media screen and (min-width: 1920px) {
        :root {
            --fs-xs: 0.84rem;
            --fs-sm: 1.05rem;
            --fs-base: 1.31rem;
            --fs-md: 1.64rem;
            --fs-lg: 2.05rem;
            --fs-xl: 2.56rem;
            --fs-xxl: 3.2rem;
            --fs-xxxl: 4.01rem;
            --fs-xxxxl: 5.01rem;
        }
    }
}

/* --- Brand Color Palette --- */
:root {
    /* Primary Colors */
    --dusty-indigo: #3A5167;
    --dark-indigo: #2E4252;
    
    /* Accent Greens */
    --moss-green: #8A9A5B; /* kept for future use — no longer used as a text color below */
    
    /* Warm Neutrals */
    --rich-sand: #DDBE9B;
    --light-sand: #EFE1CD;   /* per V5 Brand Bible: background panels, cards */
    --oat-cream: #EFE9E1;
    
    /* Action Colors */
    --rust-clay: #B26A4F;
    --dark-clay: #8F533F;
    
    /* Base */
    --white: #ffffff;

    /* Typography */
    --font-serif: 'Cormorant Garamond', serif;
    --font-sans: 'Montserrat', sans-serif;

    /* Layout */
    --container-width: 1200px;
    --section-padding-block: 4rem;
}


/* ================================================================
   2. CSS RESET & BASE STYLES
   ================================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    margin: 0;
    padding: 0;
}

/* Form controls do NOT inherit typography from their parent by default —
   browsers give them their own system font. That is why the testimonial
   carousel arrows were rendering in Arial while everything around them
   was Montserrat. This makes controls inherit like any other element.
   It is an element-level selector, so every existing class rule that
   sets its own font (.btn, .contact-submit, .rc-chip, the form inputs)
   still wins on specificity and is unaffected. */
button, input, textarea, select {
    font-family: inherit;
}

/* Horizontal overflow guard lives on html ONLY. Putting overflow-x
   on body turns body into a scroll container, which silently breaks
   position: sticky (the navbar). html's overflow propagates to the
   viewport, so this still clips any accidental horizontal overflow. */
html {
    overflow-x: hidden;
}

html {
    /* scroll-behavior moved into a no-preference media query below
       so it respects users who request reduced motion */
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    background-color: var(--oat-cream);
    color: var(--dusty-indigo);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* --- Images --- */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- Links --- */
a {
    color: inherit;
}

/* --- Headings --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    line-height: 1.2;
    color: var(--dark-indigo);
}

/* --- Paragraphs --- */
p {
    font-family: var(--font-sans);
    color: var(--dusty-indigo);
}



/* ////////////////////////////////////////////////////////////////
   LAYER 2 — UTILITIES
   //////////////////////////////////////////////////////////////// */

/* ================================================================
   3. UTILITY CLASSES
   ================================================================ */
main {
    position: relative;
    z-index: 1;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 2;
}

.section {
    padding-block: var(--section-padding-block);
    position: relative;
}

/* --- Spacing Utilities (the template's vertical-rhythm vocabulary;
   use these instead of inline margins so pages stay consistent) --- */
.mt-sm   { margin-top: 1rem; }
.mt-md   { margin-top: 1.5rem; }
.mt-lg   { margin-top: 2rem; }
.mb-sm   { margin-bottom: 0.9rem; }
.mb-md   { margin-bottom: 1.5rem; }
.mb-lg   { margin-bottom: 3rem; }

/* --- Width Constraints (center a block and cap its measure) --- */
.max-w-narrow  { max-width: 600px; margin-left: auto; margin-right: auto; }
.max-w-medium  { max-width: 800px; margin-left: auto; margin-right: auto; }

/* --- Dark Panel (wraps content/buttons meant for dark backgrounds,
   e.g. the inverted button, which is light-on-dark) --- */
.panel-dark {
    background-color: var(--dark-indigo);
    border-radius: 18px;
    padding: 2.5rem 2rem;
}

/* --- Section Kicker (Small Label Above Headings) --- */
.section-kicker {
    display: inline-block;
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--rust-clay);
    margin-bottom: 0.9rem;
}

/* --- Section Title --- */
.section-title {
    font-family: var(--font-serif);
    font-size: var(--fs-xxxl);
    line-height: 1.1;
    letter-spacing: 0.05em;
    margin-bottom: 1.4rem;
    color: var(--dark-indigo);
}

/* --- Section Lead Paragraph --- */
.section-lead {
    max-width: 640px;
    font-size: var(--fs-base);
    color: var(--dark-indigo);
    opacity: 0.95;
    margin: 0 auto;
}

/* --- Page Title (h1 hero on interior pages) --- */
.page-title {
    font-size: var(--fs-xxxl);
    margin-bottom: 1.5rem;
    color: var(--dusty-indigo);
}

/* --- Centered Page Layout --- */
.centered-page {
    text-align: center;
}


/* ================================================================
   4. SKIP LINK (WCAG 2.4.1 — Bypass Blocks)
   ================================================================ */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 10000;
    padding: 0.8rem 1.6rem;
    background: var(--dark-indigo);
    color: var(--oat-cream);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 8px 8px;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid var(--rust-clay);
    outline-offset: 2px;
}



/* ////////////////////////////////////////////////////////////////
   LAYER 3 — COMPONENTS
   //////////////////////////////////////////////////////////////// */

/* ================================================================
   5. BUTTON STYLES
   ================================================================ */
/* ================================================================
   The [hidden] attribute must always win.
   Without this, any class that sets `display` (like .btn's
   inline-flex) overrides the browser's built-in [hidden] rule and
   the element stays visible. Do not remove.
   ================================================================ */
[hidden] {
    display: none !important;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.1rem 3rem;
    border-radius: 50px;
    border: none;
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
    white-space: nowrap;
    position: relative;
}

/* --- Button Shine Effect --- */
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255,255,255,0.28), transparent 60%);
    transform: translateX(-120%);
    transition: transform 0.5s ease;
    pointer-events: none;
}

.btn:hover::before {
    transform: translateX(0);
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

/* --- Primary Button (Rust Clay) --- */
.btn-primary {
    background: var(--rust-clay);
    color: var(--white);
    box-shadow: 0 10px 30px rgba(178, 106, 79, 0.3);
}

.btn-primary:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(178, 106, 79, 0.5);
    background-color: var(--dark-clay);
}

/* --- Secondary Button (Outline) --- */
.btn-secondary {
    background: transparent;
    border: 1.5px solid var(--dusty-indigo);
    color: var(--dusty-indigo);
    box-shadow: 0 10px 24px rgba(58, 81, 103, 0.08);
}

.btn-secondary:hover {
    background: var(--dusty-indigo);
    color: var(--white);
}

/* --- Button Wrapper (For Grouping) ---
   SITE RULE: every content button is centered. The wrapper is a
   full-width centered flex row, so buttons center regardless of
   the surrounding text alignment. (Nav chrome is unaffected —
   the navbar button doesn't use .btn-wrapper.) */
.btn-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* --- Nav-size Button Variant --- */
.btn-nav {
    padding: 0.8rem 1.8rem;
    font-size: 0.8rem;
}

/* --- CTA Inverted Button Variant (standalone — do NOT combine with
   .btn-primary, whose :hover would override the background and break
   text contrast). Light button, dark text, stays high-contrast on
   hover by brightening rather than darkening. --- */
.btn-inverted {
    background-color: var(--oat-cream);
    color: var(--rust-clay);
    box-shadow: 0 10px 30px rgba(178, 106, 79, 0.3);
}

.btn-inverted:hover {
    background-color: var(--oat-cream);
    color: var(--rust-clay);
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(178, 106, 79, 0.45);
}

/* --- Button color override for light text on primary bg --- */
.btn-light-text {
    color: var(--oat-cream);
}


/* ================================================================
   6. NAVIGATION (Consistent with index.html)
   ================================================================ */
nav {
    /* Sticky, not fixed: the nav occupies normal flow space, so the
       page needs NO JavaScript body-padding sync. (The old fixed nav
       + JS "only grow" padding ratchet caused blank pages on cold
       mobile loads when an unstyled-navbar measurement got locked in.) */
    position: sticky;
    top: 0;
    width: 100%;
    padding: 1rem 2rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    z-index: 1000;
    background: rgba(239, 233, 225, 0.85);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255,255,255,0.3);
    transition: 0.4s ease;
}

/* --- Scrolled State --- */
nav.scrolled {
    padding: 0.8rem 2rem;
    background: rgba(255, 255, 255, 0.95);
   -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

/* --- Brand Lockup (Logo + Text) --- */
.brand-lockup {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    z-index: 1000;
}

.logo-svg {
    height: 75px;
    width: auto;
    transition: 0.3s;
}

nav.scrolled .logo-svg {
    height: 60px;
}

/* Brand name beside the mark. Font-family and weight are stated
   explicitly rather than inherited, so this stays Cormorant Garamond
   Bold even if the global heading rules are ever changed. Colour is
   --dark-indigo (#2E4252) to match the logo lockup. */
.brand-text h4 {
    font-family: var(--font-serif);
    font-size: var(--fs-md);
    line-height: 1;
    color: var(--dark-indigo);
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* NOTE: the "Clarity. Confidence. Calling." tagline that used to sit
   under the brand name was removed from base.njk, so its .brand-text
   span rule is gone too. */

/* --- Desktop Navigation Links --- */
.nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: center;
}

/* --- Nav CTA (right slot) --- */
.nav-cta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.nav-links a {
    text-decoration: none;
    color: var(--dusty-indigo);
    font-weight: 500;
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.2s;
    position: relative;
}

/* --- Underline Hover Effect --- */
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0%;
    height: 2px;
    background: var(--rust-clay);
    transition: 0.3s;
}

.nav-links a:hover::after {
    width: 100%;
}

/* --- Current Page Indicator ---
   Mark the active page's link with aria-current="page" in the HTML;
   it gets the accent color + persistent underline. Semantic (screen
   readers announce it) and replaces any inline color overrides. */
.nav-links a[aria-current="page"],
.mobile-menu > a[aria-current="page"] {
    color: var(--rust-clay);
}

.nav-links a[aria-current="page"]::after {
    width: 100%;
}


/* ================================================================
   7. MOBILE MENU
   ================================================================ */
/* --- Hamburger Button --- */
.hamburger {
    display: none;
    cursor: pointer;
    z-index: 1000;
    flex-direction: column;
    gap: 6px;
    background: transparent;
    border: none;
}

.bar {
    width: 30px;
    height: 3px;
    background-color: var(--dusty-indigo);
    transition: 0.3s;
    border-radius: 3px;
}

/* --- Mobile Menu Overlay --- */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;       /* fallback for browsers without dvh */
    height: 100dvh;      /* dynamic viewport height — avoids iOS Safari clipping */
    background: var(--oat-cream);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    transform: translateY(-100%);
    transition: 0.5s ease-in-out;
    z-index: 1000;
}

.mobile-menu.active {
    transform: translateY(0);
}

/* Direct-child selector (>) so this ONLY styles the nav links
   (Mission / Services / About) and never the nested CTA button,
   which keeps its own .btn styling. */
.mobile-menu > a {
    font-family: var(--font-serif);
    font-size: var(--fs-xxl);
    color: var(--dusty-indigo);
    text-decoration: none;
}


/* ================================================================
   8. FAQ SECTION
   ================================================================ */
.faq-grid {
    max-width: 800px;
    margin: 0 auto;
}

details.faq-item {
    border-radius: 18px;
    border: 1px solid rgba(58,81,103,0.18);
    background: rgba(255,255,255,0.98);
    padding: 1.1rem 1.4rem;
    margin-bottom: 0.9rem;
    box-shadow: 0 12px 32px rgba(0,0,0,0.04);
}

details.faq-item[open] {
    box-shadow: 0 18px 48px rgba(0,0,0,0.07);
}

.faq-item summary {
    list-style: none;
    cursor: pointer;
    font-size: var(--fs-base);
    font-weight: 600;
    /* Flex layout lives on the summary itself so the question text
       and the toggle icon are the two flex items. text-align:left
       overrides the inherited center alignment from .centered-page. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

/* Question text grows to fill available space (so it wraps normally
   instead of collapsing to its longest word). */
.faq-question {
    flex: 1;
}

/* --- FAQ toggle indicator (decorative, hidden from AT) --- */
.faq-toggle-icon {
    flex-shrink: 0;
    font-style: normal;
    font-size: var(--fs-md);
    opacity: 0.55;
}

.faq-item p {
    margin-top: 0.7rem;
    font-size: var(--fs-sm);
}


/* ================================================================
   9. FINAL CTA / CONTACT
   ================================================================ */
.cta-section {
    padding: 8rem 2rem;
    background-color: var(--dark-indigo);
    text-align: center;
    color: white;
}

.cta-section h2 {
    font-size: var(--fs-xxxl);
    margin-bottom: 1.5rem;
    color: var(--oat-cream);
}

.cta-section p {
    color: var(--oat-cream);
}

.cta-lead {
    max-width: 600px;
    margin: 0 auto 3rem;
    font-size: 1.3rem;
    opacity: 0.9;
}


/* ================================================================
   10. FOOTER
   ================================================================ */
footer {
    background-color: var(--dusty-indigo);
    color: var(--oat-cream);
    padding: 5rem 2rem 2rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-col h4 {
    font-size: var(--fs-base);
    margin-bottom: 1.5rem;
    color: var(--rich-sand);
    font-weight: 700;
}

.footer-col p {
    font-size: var(--fs-sm);
    color: rgba(255,255,255,0.75);
}

.footer-col a {
    display: block;
    text-decoration: none;
    font-size: var(--fs-sm);
    color: rgba(255,255,255,0.7);
    margin-bottom: 0.8rem;
    transition: color 0.3s ease, transform 0.3s ease;
}

.footer-col a:hover {
    color: var(--rich-sand);
    transform: translateX(5px);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6);
    font-size: var(--fs-sm);
}



/* ================================================================
   ▼▼▼ ADD NEW COMPONENTS BELOW (and above this line stay in
   LAYER 3). New component styles go here so they inherit the
   tokens above and sit before the motion/responsive layers. ▼▼▼
   ================================================================ */

/* ================================================================
   13. SPLIT SECTION (media + content, two columns)
   ================================================================
   Generic side-by-side layout: an image (or placeholder) beside a
   text block. Collapses to one column at the mobile-nav breakpoint
   (960px) — see LAYER 5. Use .split--flip to put media on the right.
   ================================================================ */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
    text-align: left;
}

/* Grid children default to min-width:auto, which means they refuse to
   shrink below their content's intrinsic minimum width. One unshrinkable
   child (a nowrap button, a long unbroken word) can therefore force the
   whole grid — and with it the entire page — wider than the screen.
   This lets the column shrink to fit the viewport instead.
   Must be paired with wrappable button text: .btn sets overflow:hidden,
   so without the .btn rule in the 640px block below, the label would be
   clipped rather than wrapped. */
.split > * {
    min-width: 0;
}

/* Media on the right instead of the left */
.split--flip .split-media {
    order: 2;
}

.split-media {
    border-radius: 22px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background-color: var(--light-sand);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* <picture> is an INLINE wrapper with no box of its own. Once an <img>
   is nested inside one, a height:100% on that image resolves against the
   picture element rather than the intended container, so the photo stops
   filling its frame and leaves gaps above and below. Giving picture a
   block box that fills .split-media restores the original behaviour
   exactly. The global rule also removes the few pixels of inline
   line-height gap that would otherwise appear under card images. */
picture {
    display: block;
}

.split-media picture {
    width: 100%;
    height: 100%;
}

.split-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Text shown inside .split-media while a real photo is pending */
.split-placeholder {
    font-family: var(--font-serif);
    font-size: var(--fs-md);
    color: var(--dusty-indigo);
    opacity: 0.25;
    letter-spacing: 0.1em;
}

.split-content h2 {
    font-size: var(--fs-xxl);
    line-height: 1.15;
    margin-bottom: 1.6rem;
}

.split-content p {
    font-size: var(--fs-sm);
    line-height: 1.85;
    margin-bottom: 1.2rem;
}

.split-content p:last-of-type {
    margin-bottom: 2.2rem;
}


/* ================================================================
   14. CARD GRID
   ================================================================
   Responsive grid of white cards (values, features, programs).
   auto-fit handles its own wrapping; no breakpoint needed.
   .card-number is the large ghosted ordinal (optional).
   ================================================================ */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    text-align: left;
}

/* Cards size to their own content instead of stretching to the
   tallest card in the row (for editorial side-by-side cards with
   unequal content; default stretch suits uniform card sets). */
.card-grid--start {
    align-items: start;
}

.card {
    background: var(--white);
    border: 1px solid rgba(58, 81, 103, 0.1);
    border-radius: 18px;
    padding: 2rem 1.8rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.04);
}

.card-number {
    font-family: var(--font-serif);
    font-size: var(--fs-xxxl);
    color: var(--rust-clay);
    opacity: 0.15;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.card h3 {
    font-size: var(--fs-md);
    margin-bottom: 0.6rem;
}

.card p {
    font-size: var(--fs-sm);
    line-height: 1.7;
    opacity: 0.88;
}


/* ================================================================
   15. QUOTE BAND
   ================================================================
   Full-width dark section holding a single pull quote. Distinct
   from .cta-section: a quote, not a call to action.
   ================================================================ */
.quote-band {
    background-color: var(--dark-indigo);
    padding: 7rem 2rem;
    text-align: center;
}

.quote-band blockquote {
    font-family: var(--font-serif);
    font-size: var(--fs-xl);
    font-style: italic;
    color: var(--oat-cream);
    max-width: 760px;
    margin: 0 auto 1.8rem;
    line-height: 1.4;
    letter-spacing: 0.01em;
}

.quote-band-attr,
.pull-quote-attr {
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--rich-sand);
}


/* ================================================================
   16. SECTION BACKGROUND MODIFIERS
   ================================================================
   Add to a .section to change its background. Enables alternating
   section backgrounds. .section-dark also recolors the standard
   text components inside it so nothing goes low-contrast.
   ================================================================ */
.section-dark {
    background-color: var(--dark-indigo);
}

.section-dark .section-kicker {
    color: var(--rich-sand);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark .section-title {
    color: var(--oat-cream);
}

.section-dark p {
    color: rgba(239, 233, 225, 0.85);
}

.section-dark .section-lead {
    color: var(--oat-cream);
}

/* White cards inside a dark section keep their own text colors
   (without this, the dark-section recoloring above would put cream
   headings on white card backgrounds). */
.section-dark .card h3 {
    color: var(--dark-indigo);
}

.section-dark .card p {
    color: var(--dusty-indigo);
}

.section-dark .card .section-kicker {
    color: var(--rust-clay);
}

.section-sand {
    background-color: var(--light-sand);
}


/* ================================================================
   17. STATEMENT (large serif display paragraph)
   ================================================================
   For a mission statement, manifesto line, or any single passage
   set large. Pairs naturally with .section-dark.
   ================================================================ */
.statement {
    font-family: var(--font-serif);
    font-size: var(--fs-xxl);
    line-height: 1.25;
    letter-spacing: 0.02em;
    color: var(--dark-indigo);
    max-width: 840px;
    margin: 0 auto 1.4rem;
}

.section-dark .statement {
    color: var(--oat-cream);
}


/* ================================================================
   18. DIVIDED LIST
   ================================================================
   Unbulleted list with hairline dividers between items. For
   "what's included" lists, feature runs, etc. Use inside a .card
   or .panel-dark, or standalone.
   ================================================================ */
.divided-list {
    list-style: none;
    text-align: left;
}

.divided-list li {
    padding: 0.9rem 0;
    border-top: 1px solid rgba(58, 81, 103, 0.12);
}

.divided-list li:first-child {
    border-top: none;
    padding-top: 0;
}


/* ================================================================
   19. HERO
   ================================================================
   Full-viewport centered hero for the home page: headline with an
   italic accent (<em>), subhead, and a row of action buttons over
   a soft radial glow. Mobile rules live in LAYER 5 (640px).
   ================================================================ */
.hero {
    min-height: 92vh;     /* fallback */
    min-height: 92svh;    /* small viewport units — avoids iOS Safari jump */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6rem 1.5rem 4rem;
    position: relative;
    overflow: hidden;
}

/* Soft radial glow behind the hero content (rgba of --rich-sand) */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(221, 190, 155, 0.25) 0%, transparent 70%);
    pointer-events: none;
}

.hero-inner {
    max-width: 860px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.hero-headline {
    font-family: var(--font-serif);
    font-size: var(--fs-xxxxl);
    line-height: 1.05;
    letter-spacing: 0.02em;
    color: var(--dark-indigo);
    margin-bottom: 1.6rem;
}

.hero-headline em {
    font-style: italic;
    color: var(--rust-clay);
}

.hero-subhead {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    color: var(--dusty-indigo);
    max-width: 580px;
    margin: 0 auto 2.8rem;
    line-height: 1.7;
    opacity: 0.9;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}


/* ================================================================
   20. ACTION CARD (card variant with a pinned button)
   ================================================================
   Add to .card when the card ends in a button (program cards,
   service cards). Equal-height cards keep their buttons aligned
   on one baseline, and the card lifts on hover.
   ================================================================ */
.card--action {
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card--action p {
    flex: 1;
}

.card--action .btn {
    align-self: center;
    margin-top: 1.2rem;
}

.card--action:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}


/* ================================================================
   21. PULL QUOTE (light)
   ================================================================
   Centered serif quote for light sections. (The dark full-width
   variant is .quote-band.) Attribution shares the recipe with
   .quote-band-attr — see that rule above.
   ================================================================ */
.pull-quote {
    font-family: var(--font-serif);
    font-size: var(--fs-xl);
    font-style: italic;
    color: var(--dark-indigo);
    max-width: 720px;
    margin: 2rem auto 1.5rem;
    line-height: 1.4;
    letter-spacing: 0.02em;
}


/* ================================================================
   22. SERVICE BLOCK (detailed offer row)
   ================================================================
   Full-width stacked rows for program/offer pages: a sticky meta
   column (tier label, name, tagline, chip, button) beside a long
   content column. Rows divide with a hairline. Works on light
   sections and inside .section-dark. Collapses at 960px (LAYER 5).
   ================================================================ */
.service-block {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 4rem;
    align-items: start;
    padding: 4rem 0;
    border-top: 1px solid rgba(58, 81, 103, 0.12);
    text-align: left;
}

.service-block:first-of-type {
    border-top: none;
}

.service-block-meta {
    position: sticky;
    top: 120px;
}

.service-tier {
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 600;
    color: var(--rust-clay);
    margin-bottom: 0.6rem;
}

@media (max-width: 768px) {
   /* Center all paragraphs, headers, and buttons in the block */
    .service-block {
        text-align: center;
    }
    
    /* Override the default left-alignment of the bulleted list */
    .service-block .divided-list {
        text-align: center;
}
}

.service-block h2 {
    font-size: var(--fs-xxxl);
    line-height: 1.1;
    margin-bottom: 1.2rem;
}

.service-tagline {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--fs-lg);
    color: var(--dusty-indigo);
    opacity: 0.75;
    margin-bottom: 1.8rem;
    line-height: 1.4;
}

.service-block p {
    font-size: var(--fs-base);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.service-block .btn-wrapper {
    margin-top: 0.5rem;
}

/* "Who it's for" chip */
.for-chip {
    display: inline-block;
    background: var(--light-sand);
    border-radius: 50px;
    padding: 0.4rem 1.1rem;
    font-size: var(--fs-xs);
    font-family: var(--font-sans);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--dusty-indigo);
    margin-bottom: 1.5rem;
}

/* Dash-list modifier: divided list items led by an em dash */
.divided-list--dash li {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    font-size: var(--fs-sm);
}

.divided-list--dash li::before {
    content: '\2014';
    color: var(--rust-clay);
    font-weight: 700;
    flex-shrink: 0;
}

/* Service block + lists inside a dark section */
.section-dark .service-block {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.section-dark .service-tier {
    color: var(--rich-sand);
}

.section-dark .service-tagline {
    color: rgba(239, 233, 225, 0.7);
}

.section-dark .for-chip {
    background: rgba(255, 255, 255, 0.1);
    color: var(--oat-cream);
}

.section-dark .divided-list li {
    border-top-color: rgba(255, 255, 255, 0.12);
    color: rgba(239, 233, 225, 0.85);
}


/* ================================================================
   23. COMPARISON TABLE
   ================================================================
   Side-by-side program comparison. Use .check / .dash for the
   yes/no cells. Pairs well with .section-sand. Compact rules for
   small screens live in LAYER 5.

   ALWAYS wrap the table in .table-scroll: tables cannot shrink
   below their content's minimum width, so on narrow screens an
   unwrapped table widens the whole page and breaks every
   full-width section background. The wrapper lets the table
   scroll horizontally within itself instead.
   ================================================================ */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-scroll .compare-table {
    min-width: 640px;   /* columns stay readable; wrapper scrolls */
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 2.5rem;
    font-size: var(--fs-sm);
    text-align: left;
}

.compare-table th {
    font-family: var(--font-serif);
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--dark-indigo);
    padding: 1rem 1.2rem;
    text-align: left;
    border-bottom: 2px solid rgba(58, 81, 103, 0.2);
}

.compare-table th:first-child {
    width: 30%;
}

.compare-table td {
    padding: 0.9rem 1.2rem;
    border-bottom: 1px solid rgba(58, 81, 103, 0.1);
    color: var(--dusty-indigo);
    vertical-align: top;
}

.compare-table tr:last-child td {
    border-bottom: none;
}

.compare-table td:first-child {
    font-weight: 600;
    color: var(--dark-indigo);
}

.check {
    color: var(--rust-clay);
    font-weight: 700;
}

.dash {
    color: rgba(58, 81, 103, 0.3);
}


/* ================================================================
   24. PROSE (long-form text pages)
   ================================================================
   For legal pages, policies, and any long-form written content.
   Restores readable headings, paragraphs, and bulleted lists
   (the global reset strips list styling). Left-aligned, capped
   at a comfortable reading measure, centered in its container.
   ================================================================ */
.prose {
    max-width: 760px;
    margin: 0 auto;
    text-align: left;
}

.prose h2 {
    font-size: var(--fs-xl);
    margin: 2.8rem 0 1rem;
}

.prose h2:first-child {
    margin-top: 0;
}

.prose h3 {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--dark-indigo);
    margin: 1.8rem 0 0.6rem;
}

.prose p {
    font-size: var(--fs-sm);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.prose ul {
    list-style: disc;
    padding-left: 1.4rem;
    margin: 0.6rem 0 1.4rem;
}

.prose li {
    font-size: var(--fs-sm);
    line-height: 1.7;
    margin-bottom: 0.5rem;
    color: var(--dusty-indigo);
}

.prose li::marker {
    color: var(--rust-clay);
}

/* ////////////////////////////////////////////////////////////////
   LAYER 4 — MOTION
   //////////////////////////////////////////////////////////////// */

/* ================================================================
   11. REVEAL ANIMATIONS (Progressive Enhancement)
   ================================================================
   Content is visible by default (works without JS).
   The .js class on <html> activates the hidden state,
   so only JS-capable browsers get the animation.
   ================================================================ */
/* HOW THIS WORKS — and why it is layered the way it is.

   Default state: VISIBLE. The rule below is the baseline, and it is what
   a browser with no JavaScript, a crawler, or a reader-mode view sees.
   Content must never depend on a script in order to exist.

   The hidden starting state is applied only when BOTH are true:
     1. .js is on <html>   — set by main.js, so if the script fails to
                             load the page simply shows everything.
     2. the visitor has NOT asked for reduced motion.

   Point 2 is the important accessibility detail. The usual shortcut is
   to animate everything and then zero out the duration for reduced-motion
   users, but that still starts them at opacity:0 and leaves them relying
   on JavaScript to become visible. Nesting the hidden state inside
   (prefers-reduced-motion: no-preference) means those visitors are never
   hidden in the first place — there is nothing to recover from.

   Motion is deliberately restrained: an 18px rise over 700ms on an
   ease-out curve. Large travel distances read as "template" and make
   long pages feel sluggish on a phone. */
.reveal {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: no-preference) {

    .js .reveal {
        opacity: 0;
        transform: translateY(18px);
        /* Only opacity and transform are animated. Both are handled by
           the compositor, so a reveal never triggers layout or paint —
           this is what keeps scrolling at 60fps on a mid-range phone. */
        transition:
            opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
            transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
        /* Set per-element by main.js to stagger items that enter
           together (a row of cards). Defaults to no delay. */
        transition-delay: var(--reveal-delay, 0ms);
        will-change: opacity, transform;
    }

    .js .reveal.is-revealed {
        opacity: 1;
        transform: none;
        /* Released once the animation is done. Leaving will-change on
           permanently keeps every revealed element on its own GPU layer,
           which costs memory for no benefit after the one-shot reveal. */
        will-change: auto;
    }
}

/* Printing must never depend on scroll position or JavaScript. */
@media print {
    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Reduced-motion users: still neutralize any remaining transitions. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}



/* ////////////////////////////////////////////////////////////////
   LAYER 5 — RESPONSIVE
   //////////////////////////////////////////////////////////////// */

/* ================================================================
   12. RESPONSIVE BREAKPOINTS
   ================================================================ */

/* --- Mobile Navigation (max-width: 960px) --- */
@media (max-width: 960px) {
    nav {
        grid-template-columns: 1fr auto;
    }

    .nav-links {
        display: none;
    }

    .nav-cta {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .section {
        padding-block: 3rem;
    }

    /* Split section stacks to one column (media above content);
       content centers, matching single-column reading flow */
    .split {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .split-content {
        text-align: center;
    }

    .split--flip .split-media {
        order: 0;
    }

    .split-media {
        aspect-ratio: 3 / 2;
        max-height: 340px;
    }

    /* Service block stacks; meta column stops being sticky */
    .service-block {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .service-block-meta {
        position: static;
    }

    .compare-table {
        font-size: var(--fs-xs);
    }

    .compare-table th,
    .compare-table td {
        padding: 0.7rem 0.8rem;
    }
}

/* --- Small Mobile (max-width: 640px) --- */
@media (max-width: 640px) {

    /* Long button labels must be allowed to wrap on narrow screens.
       .btn sets white-space:nowrap globally, which is right on desktop
       but dangerous on mobile: a nowrap button inside a grid or flex
       column sets that column's minimum width, and the page is then
       forced wider than the screen. That is exactly what pushed the
       About page to 430px on a 375px phone — the "Reserve Your
       Complimentary Session" button could not break onto two lines.

       Deliberately applied to EVERY .btn rather than section by
       section. Scoped one-off fixes already existed for .cta-section
       and .hero-actions; the About page was simply never added, and
       the next new page would have hit the same bug. */
    .btn {
        white-space: normal;
        text-align: center;
        padding-inline: 1.75rem;
    }

    .cta-section .btn {
        padding: 1rem 1.5rem;
        font-size: var(--fs-sm);
        white-space: normal;
        text-align: center;
        width: 90%;
    }

    .cta-section {
        padding: 5rem 1.5rem;
    }

    .quote-band {
        padding: 5rem 1.5rem;
    }

    /* Hero tightens and stacks its action buttons */
    .hero {
        min-height: 80vh;
        min-height: 80svh;
        padding: 5rem 1.2rem 3rem;
    }

    .hero-headline {
        font-size: var(--fs-xxxl);
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;
    }

    .hero-actions .btn {
        width: 85%;
        white-space: normal;
        text-align: center;
    }

    .compare-table th:first-child {
        width: 35%;
    }
}

/* ================================================================
   25. CONTACT SECTION ("Let's Talk")
   ================================================================
   Dark two-column section: heading left, form right.
   Collapses to one column at 960px.
   ================================================================ */
.contact-section {
    background-color: var(--dark-indigo);
    padding: 7rem 2rem;
}

.contact-inner {
    max-width: var(--container-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 6rem;
    align-items: center;
}

/* Left column */
.contact-kicker {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--rich-sand);
    margin-bottom: 1rem;
}

.contact-heading {
    font-family: var(--font-serif);
    font-size: var(--fs-xxxxl);
    line-height: 1.05;
    color: var(--oat-cream);
    margin-bottom: 1.4rem;
}

.contact-sub {
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    color: rgba(239, 233, 225, 0.75);
    line-height: 1.8;
    max-width: 340px;
}

/* Form */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.contact-field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.contact-field label {
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    color: rgba(239, 233, 225, 0.85);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.contact-field label span {
    color: var(--rust-clay);
}

.contact-field input {
    background: transparent;
    border: 1.5px solid rgba(239, 233, 225, 0.25);
    border-radius: 50px;
    padding: 0.9rem 1.4rem;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    color: var(--oat-cream);
    outline: none;
    transition: border-color 0.2s ease;
    width: 100%;
}

.contact-field input::placeholder {
    color: rgba(239, 233, 225, 0.3);
}

.contact-field input:focus {
    border-color: rgba(239, 233, 225, 0.7);
}

.contact-submit {
    background: transparent;
    border: 1.5px solid var(--oat-cream);
    border-radius: 50px;
    padding: 1rem 2rem;
    font-family: var(--font-serif);
    font-size: var(--fs-md);
    color: var(--oat-cream);
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
    width: 100%;
    letter-spacing: 0.02em;
}

.contact-submit:hover {
    background: var(--oat-cream);
    color: var(--dark-indigo);
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 960px) {
    .contact-inner {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .contact-heading {
        font-size: var(--fs-xxxl);
    }

    .contact-sub {
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    .contact-section {
        padding: 5rem 1.5rem;
    }
}

/* ================================================================
   27. TESTIMONIALS CAROUSEL
   ================================================================
   Rotating quotes with prev/next arrows and dot indicators. One
   slide visible at a time (data-active="true"); JS swaps the flag.
   Serif italic quote centered on the page background.
   ================================================================ */
.testimonials {
    padding: 4rem 2rem 3rem;
    background-color: var(--oat-cream);
}

/* Add this right below it! */
@media (max-width: 768px) {
    .testimonials {
        padding: 1rem 1.5rem 2rem; /* Mobile padding: much smaller gap at the top */
    }
}

.testimonials-inner {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;   /* anchor for the absolutely-pinned arrows */
    padding: 0 4rem;      /* room for the arrows on each side */
}

.testimonial-arrow {
    position: absolute;
    top: 50%;             /* center on the viewport — which now has a
                             stable height (tallest quote), so the
                             arrows never move between slides */
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 2.5rem;
    line-height: 1;
    color: var(--dusty-indigo);
    opacity: 0.5;
    cursor: pointer;
    padding: 0.5rem 0.8rem;
    transition: opacity 0.2s;
}
.testimonial-prev { left: 0; }
.testimonial-next { right: 0; }
.testimonial-arrow:hover {
    opacity: 1;
}

.testimonial-viewport {
    position: relative;
    display: grid;        /* stack all slides in one cell so the
                             viewport always reserves the TALLEST
                             slide's height — height never changes
                             when switching, so arrows never move */
}

/* All slides occupy the same grid cell (stacked) */
.testimonial-slide {
    grid-area: 1 / 1;
    margin: 0;
    text-align: center;
    max-width: 1000px;   /* wider = fewer lines, shorter section */
    justify-self: center;
    align-self: center;  /* quote sits centered between the arrows;
                            the dots (inside the slide) ride just below
                            the author, so they stay close to the quote */
    opacity: 0;
    visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease;
}

.testimonial-slide[data-active="true"] {
    opacity: 1;
    visibility: visible;
}

.testimonial-quote {
    font-family: var(--font-serif);
    font-size: var(--fs-lg);
    font-style: italic;
    line-height: 1.5;
    color: var(--dusty-indigo);
    margin: 0 0 1.8rem;
    letter-spacing: 0.01em;
}

.testimonial-author {
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--dark-indigo);
    letter-spacing: 0.04em;
}

.testimonial-dots {
    display: flex;
    justify-content: center;
    gap: 0.7rem;
    margin-top: 1rem;
}

.testimonial-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1.5px solid var(--dusty-indigo);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
}
.testimonial-dot[aria-selected="true"] {
    background: var(--dusty-indigo);
}

@media (max-width: 640px) {
    /* Tighten vertical space on mobile so the next section peeks through */
    .testimonials {
        padding: 2rem 1rem 1.5rem;
    }
    .testimonials-inner {
        gap: 0.5rem;
        padding: 0 2rem;   /* less side gutter; more width for the quote */
    }
    .testimonial-arrow {
        font-size: 1.8rem;
        padding: 0.3rem 0.4rem;
    }
    .testimonial-quote {
        font-size: var(--fs-md);
        margin-bottom: 1.2rem;
    }
    .testimonial-dots {
        margin-top: 1rem;
    }
}
/* ================================================================
   Contact section — mobile text centering fix
   ================================================================ */
@media (max-width: 960px) {
    .contact-left {
        text-align: center;
    }
    .contact-sub {
        max-width: 100%;
        margin: 0 auto;
    }
}

/* ---- Hamburger to X Animation ---- */
.hamburger .bar {
    transition: transform 0.3s ease, opacity 0.2s ease;
    transform-origin: center;
}

/* When the menu is active, aria-expanded="true" is set by JS */
.hamburger[aria-expanded="true"] .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger[aria-expanded="true"] .bar:nth-child(2) {
    opacity: 0;
    
}

.hamburger[aria-expanded="true"] .bar:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}

/* ---- Calendly Widget Height ---- */
.calendly-inline-widget {
    height: 700px; /* This restores the 700px height for desktops! */
}

@media (max-width: 768px) {
    .calendly-inline-widget {
        height: 950px; /* This overrides it to 1050px ONLY on mobile */
    }
}
/* ================================================================
   SOCIAL LINKS — a row of social icons, usable anywhere
   ================================================================
   Markup comes from the macro in _includes/social.njk:
       {% from "social.njk" import social %}
       {{ social(instagram="...", linkedin="...") }}

   Icons use currentColor, so they read correctly on light
   sections AND on .section-dark without any extra work.

   Modifiers:  --center  --right   (alignment)
               --sm      --lg      (size)
   ================================================================ */
.social-links {
    display: flex;
    gap: 0.9rem;
    list-style: none;
    padding: 0;
    margin: 1.4rem 0 0;
}

.social-links--center { justify-content: center; }
.social-links--right  { justify-content: flex-end; }

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid var(--dusty-indigo);
    background-color: var(--white);
    color: var(--dusty-indigo);
    transition: background-color 0.2s ease, color 0.2s ease,
                border-color 0.2s ease;
}

.social-links a:hover,
.social-links a:focus-visible {
    opacity: 1;
    background-color: var(--dusty-indigo);
    border-color: var(--dusty-indigo);
    color: var(--oat-cream);
}

.social-links svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

.social-links--sm a   { width: 30px; height: 30px; }
.social-links--sm svg { width: 14px; height: 14px; }
.social-links--lg a   { width: 46px; height: 46px; }
.social-links--lg svg { width: 21px; height: 21px; }

}