/* ============================================
   SCMa2z — Main Stylesheet
   ============================================

   HOW THIS FILE IS ORGANIZED:
   1. Font Import
   2. CSS Variables (site-wide settings)
   3. Reset (remove browser defaults)
   4. Base Styles (body, links)
   5. Reusable Section Styles
   6. Hero Section
   7. Section 1: The Problem
   8. Section 2: How We're Different
   9. Section 3: Services Overview
   10. Section 4: How We Work (Process)
   11. Section 6: Credentials / About
   12. Section 7: Blog / Insights Preview
   13. Section 8: Individual Learner Callout
   14. Section 9: Final CTA
   15. Footer
   16. Buttons (reusable across the whole site)
   17. Responsive Design (mobile → desktop)

   WHAT ARE CSS VARIABLES?
   Variables start with -- and are defined in :root.
   Think of them as "saved settings." Instead of
   typing a color code 50 times, you save it once
   and reference it everywhere. Change it in ONE place,
   it updates everywhere.

   Usage: var(--variable-name)
   ============================================ */


/* ---- 1. FONT IMPORT ----
   We're loading "Plus Jakarta Sans" from Google Fonts.
   It's a modern geometric sans-serif with personality —
   clean enough for enterprise, distinctive enough to
   avoid looking generic. We load 4 weights:
   400 = Regular (body text)
   500 = Medium (subheadings)
   600 = Semibold (buttons, labels)
   700 = Bold (headlines)

   display=swap means: show text immediately in a fallback
   font, then swap to Jakarta once it loads. This prevents
   a flash of invisible text (FOIT). */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');


/* ---- 2. CSS VARIABLES ---- */
:root {
    /* COLORS
       Named by purpose, not by color.
       This way, if you change your blue to teal later,
       you only update it here — not in 100 places. */

    --color-bg: #f8f9fb;               /* Page background: subtle cool gray */
    --color-text: #0c1421;             /* Primary text: deep navy (not pure black — softer on eyes) */
    --color-text-muted: #556171;       /* Secondary text: muted gray for supporting copy */
    --color-accent: #0062cc;           /* Brand accent: confident blue (buttons, links) */
    --color-accent-hover: #004da3;     /* Accent on hover: slightly darker */
    --color-border: #d8dce3;           /* Borders: subtle gray */
    --color-white: #ffffff;

    /* TYPOGRAPHY
       Using rem units (relative to root font size).
       1rem = 16px by default in all browsers.
       rem scales if the user changes their browser font size —
       this is important for accessibility. */

    --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    /* Fallback fonts: if Jakarta fails to load, the browser
       uses the system font (-apple-system on Mac, etc.) */

    --text-base: 1rem;           /* 16px — body text */
    --text-lg: 1.1875rem;       /* 19px — subheadline on mobile */
    --text-xl: 1.375rem;        /* 22px — subheadline on desktop */
    --text-hero-mobile: 2rem;   /* 32px — headline on phones */
    --text-hero-tablet: 2.75rem;/* 44px — headline on tablets */
    --text-hero-desktop: 3.25rem;/* 52px — headline on large screens */

    /* Section heading sizes (used for h2 headings) */
    --text-section-mobile: 1.625rem; /* 26px — section headline on phones */
    --text-section-tablet: 2rem;     /* 32px — section headline on tablets */
    --text-section-desktop: 2.375rem;/* 38px — section headline on desktops */

    /* SPACING SCALE
       Consistent spacing creates visual rhythm.
       Each step roughly doubles, creating a clear hierarchy.
       Using these instead of random pixel values keeps
       the design feeling intentional and polished. */

    --space-xs: 0.5rem;    /* 8px */
    --space-sm: 1rem;      /* 16px */
    --space-md: 1.5rem;    /* 24px */
    --space-lg: 2rem;      /* 32px */
    --space-xl: 3rem;      /* 48px */
    --space-2xl: 5rem;     /* 80px */

    /* MISC */
    --radius: 0.5rem;              /* 8px — border radius for buttons, cards */
    --transition: 200ms ease;      /* Smooth hover animations */
    --max-width: 68rem;            /* 1088px — max page content width */
}


/* ---- 3. RESET ----
   Browsers add their own margins, padding, and sizing
   to elements. This reset removes those defaults so
   every element starts from zero — giving us full control.

   box-sizing: border-box is KEY. It means:
   "When I say width: 200px, I mean 200px TOTAL
   (including padding and border)."
   Without it, padding gets ADDED to the width,
   which causes unexpected layout issues. */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/* ---- 4. BASE STYLES ---- */
body {
    font-family: var(--font-family);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);

    /* Font smoothing: makes text render crisper on Mac/iOS.
       This is the difference between text looking slightly
       blurry vs. sharp and clean. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ---- 5. HERO SECTION ----
   The hero fills the full screen height and centers
   its content using FLEXBOX.

   FLEXBOX EXPLAINED:
   display: flex       → "arrange my children in a flexible layout"
   align-items: center → "center children vertically"
   justify-content: center → "center children horizontally"

   Together, these 3 properties perfectly center content
   both ways. This is one of the most useful CSS patterns
   you'll ever learn. */

#hero {
    min-height: 100vh;
    /* min-height: 100vh means "at least as tall as the
       browser window." vh = viewport height.
       100vh = 100% of the visible screen. */

    display: flex;
    align-items: center;
    justify-content: center;

    /* Padding keeps content away from screen edges.
       More top padding pushes content slightly above
       true center — this feels more natural to the eye
       (known as "optical centering"). */
    padding: var(--space-2xl) var(--space-md);
    padding-top: calc(var(--space-2xl) + 2rem);

    /* BACKGROUND: Subtle radial gradient
       This creates a very faint blue glow behind the
       content — barely visible, but it adds depth.
       This technique is exactly what Linear and Stripe
       use to make their white backgrounds feel alive
       instead of flat.

       radial-gradient creates a circle of color that
       fades out. We're using a very low opacity (0.04 = 4%)
       so it's almost invisible — just enough to feel. */
    background:
        radial-gradient(
            ellipse 70% 50% at 50% 45%,
            rgba(0, 98, 204, 0.04) 0%,
            transparent 70%
        ),
        var(--color-bg);

    position: relative;
    overflow: hidden;
}

/* Decorative top border — a thin accent line at the very top
   of the page. Subtle but adds a finishing touch. */
#hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--color-accent) 50%,
        transparent 100%
    );
    opacity: 0.5;
    /* PSEUDO-ELEMENTS EXPLAINED:
       ::before creates an invisible element INSIDE #hero.
       We can style it independently — here we use it as
       a decorative accent line. content: '' is required
       (even empty) or the pseudo-element won't appear. */
}

/* Hero Content: controls text width and alignment */
.hero-content {
    max-width: 620px;
    /* max-width limits how wide the text block gets.
       Long lines of text are hard to read. The ideal
       line length is 50-75 characters. 620px achieves
       that with our font size. */

    text-align: center;
    position: relative;
    z-index: 1;
}

/* Main Headline */
.hero-headline {
    font-size: var(--text-hero-mobile);
    font-weight: 700;
    line-height: 1.15;
    color: var(--color-text);

    /* Negative letter-spacing at large sizes.
       Large text looks better slightly tighter —
       this is a typography best practice that
       professional designers always apply. */
    letter-spacing: -0.03em;

    margin-bottom: var(--space-md);
}

/* Subheadline */
.hero-subheadline {
    font-size: var(--text-lg);
    font-weight: 400;
    line-height: 1.65;
    color: var(--color-text-muted);

    /* text-wrap: balance makes the browser distribute
       words more evenly across lines, preventing awkward
       short last lines ("widows"). Modern CSS feature. */
    text-wrap: balance;

    margin-bottom: var(--space-xl);
}

/* CTA Button Group */
.hero-cta-group {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    /* gap adds space BETWEEN flex children.
       Cleaner than using margins on each button. */

    flex-wrap: wrap;
    /* flex-wrap: wrap means if buttons don't fit
       side by side (on small phones), they'll stack
       vertically instead of overflowing off-screen. */
}


/* ---- 6. REUSABLE SECTION STYLES ----
   These classes are shared across EVERY content section
   on the page. Build once, reuse everywhere.

   PATTERN:
   <section id="unique-name">
     <div class="section-content">
       ...content...
     </div>
   </section>

   The <section> handles background color and vertical padding.
   The .section-content handles max-width and horizontal centering. */

.section-content {
    max-width: var(--max-width);
    /* Uses the same max-width variable (1088px) defined in :root.
       This keeps all sections the same width — visual consistency. */

    margin: 0 auto;
    /* margin: 0 auto is the classic centering trick.
       0 = no margin top/bottom.
       auto = split remaining horizontal space equally on both sides.
       This centers a block element within its parent. */

    padding: 0 var(--space-md);
    /* Horizontal padding prevents content from touching
       screen edges on mobile. The section itself handles
       vertical spacing (top/bottom padding). */
}

/* Reusable section headline style for all <h2> headings */
.section-headline {
    font-size: var(--text-section-mobile);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text);
    letter-spacing: -0.02em;
    /* Same negative letter-spacing trick as the hero headline,
       just slightly less aggressive since these are smaller. */

    text-wrap: balance;
}


/* ---- 7. SECTION 1: THE PROBLEM ----
   This section agitates the visitor's pain point.
   Design approach: white background to create a clear
   visual break from the hero. Left-aligned text for
   readability (long paragraphs are harder to read centered).

   The narrow max-width on .problem-body keeps line lengths
   comfortable — around 65 characters per line, which is
   the sweet spot for reading ease. */

#problem {
    background-color: var(--color-white);
    /* White background creates contrast against the hero's
       cool gray (#f8f9fb). This visual "break" tells the
       visitor they've entered a new section. */

    padding: var(--space-2xl) 0;
    /* Generous vertical padding (80px) above and below.
       We put padding on the <section>, not on .section-content,
       because the background color needs to stretch full-width
       while the content stays centered and narrow. */
}

#problem .section-headline {
    text-align: center;
    max-width: 620px;
    margin: 0 auto var(--space-xl);
    /* margin: 0 auto var(--space-xl) means:
       0 on top, auto on left/right (centers it),
       var(--space-xl) = 48px on bottom (space before paragraphs). */
}

/* The three problem paragraphs */
.problem-body {
    max-width: 580px;
    /* Narrower than the headline (580 vs 620px).
       This creates a subtle visual "funnel" —
       headline is wider, body text is slightly narrower.
       A small detail that makes the layout feel designed
       rather than accidental. */

    margin: 0 auto;
    /* Centers the paragraph block */
}

.problem-body p {
    font-size: var(--text-base);
    line-height: 1.75;
    /* Taller line-height (1.75 vs body's 1.6) for these
       longer paragraphs. More space between lines makes
       dense text easier to scan. */

    color: var(--color-text-muted);
    /* Muted gray instead of full dark. The headline grabs
       attention in dark navy; the body text supports it
       in a softer tone. This creates visual hierarchy —
       your eye goes to the headline first, then the body. */
}

.problem-body p + p {
    margin-top: var(--space-md);
    /* The "+" is called an ADJACENT SIBLING SELECTOR.
       p + p means "a <p> that comes directly after another <p>."

       This adds 24px of space BETWEEN paragraphs, but NOT
       above the first one. It's more precise than putting
       margin-bottom on every <p>, which would add unwanted
       space after the last paragraph too.

       This is a professional CSS pattern worth remembering. */
}


/* ---- 8. SECTION 2: HOW WE'RE DIFFERENT ----
   This section uses a CARD GRID to display four differentiators.
   Design approach: cool gray background (same as page bg) to
   alternate with the white Problem section above.

   NEW CONCEPT: CSS GRID
   We used Flexbox for the hero (centering a single block).
   Now we use CSS Grid for a 2D layout (rows AND columns).

   Flexbox vs Grid — when to use which:
   - Flexbox = 1 direction (a row of buttons, centering content)
   - Grid = 2 directions (rows AND columns, like a card layout)

   Both are essential tools. This section teaches Grid. */

#differentiators {
    background-color: var(--color-bg);
    /* Back to cool gray (#f8f9fb). This creates an alternating
       rhythm: hero (gray) → problem (white) → differentiators (gray).
       Alternating backgrounds visually separate sections without
       needing borders or dividers. */

    padding: var(--space-2xl) 0;
}

#differentiators .section-headline {
    text-align: center;
    max-width: 620px;
    margin: 0 auto var(--space-sm);
}

/* Section Subheadline (reusable for any section that needs one) */
.section-subheadline {
    font-size: var(--text-base);
    font-weight: 400;
    color: var(--color-text-muted);
    text-align: center;
    margin-bottom: var(--space-xl);
}

/* Differentiator Card Grid
   CSS GRID EXPLAINED:

   display: grid               → "I'm a grid container"
   grid-template-columns       → defines how many columns and how wide
   gap                         → space between grid cells

   On mobile: 1 column (cards stack vertically)
   On desktop: 2 columns (2x2 grid)

   The responsive switch from 1→2 columns happens in the
   @media queries at the bottom of this file. */
.diff-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* 1fr means "one fraction of available space" = one full-width column.
       On mobile, each card takes the full width and stacks vertically. */

    gap: var(--space-md);
    /* 24px between cards on all sides. Grid gap is cleaner
       than adding margins to individual cards. */
}

/* Individual Card */
.diff-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-lg);
    /* 32px padding inside each card. Generous internal
       spacing keeps the card from feeling cramped. */

    /* Smooth transition for hover effect */
    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}

.diff-card:hover {
    border-color: rgba(0, 98, 204, 0.25);
    /* Border shifts from gray to a faint blue — subtly
       connects the card to the brand accent on hover. */

    box-shadow: 0 4px 16px rgba(12, 20, 33, 0.06);
    /* A very soft shadow creates a "lifting off the page"
       effect. The low opacity (0.06 = 6%) keeps it subtle.
       This is the exact technique Linear uses on their cards. */

    transform: translateY(-2px);
    /* Moves the card up 2px. Combined with the shadow,
       this creates a convincing "floating" interaction. */
}

/* Card Icon Container
   Uses Phosphor Icons inside gradient background circles.
   Each icon gets a color-specific modifier class for its
   unique gradient.

   PATTERN: .diff-icon + .diff-icon--blue (modifier)
   The base class handles size, shape, and layout.
   The modifier class handles only the color. */
.diff-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    /* border-radius: 50% on a square element = perfect circle.
       This is how you make circular containers in CSS. */

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: var(--space-md);
}

/* Icon size inside the circle */
.diff-icon i {
    font-size: 2.25rem;    /* 36px — clear and readable at a glance */
    /* The Phosphor icon inherits its color from the parent's
       "color" property — that's set on each modifier below. */
}

/* COLOR MODIFIERS
   Each uses a subtle gradient background with a matching
   icon color. The gradients go from slightly more opaque
   to slightly less — creating a soft directional light
   effect instead of a flat circle.

   Stripe uses this exact technique: tinted circles with
   monochrome icons inside. Clean and professional. */

.diff-icon--blue {
    background: linear-gradient(135deg, rgba(58, 107, 165, 0.12) 0%, rgba(91, 140, 201, 0.06) 100%);
    color: #3a6ba5;
}

.diff-icon--teal {
    background: linear-gradient(135deg, rgba(61, 139, 132, 0.12) 0%, rgba(95, 168, 163, 0.06) 100%);
    color: #3d8b84;
}

.diff-icon--purple {
    background: linear-gradient(135deg, rgba(91, 95, 199, 0.12) 0%, rgba(124, 127, 220, 0.06) 100%);
    color: #5b5fc7;
}

.diff-icon--cyan {
    background: linear-gradient(135deg, rgba(74, 139, 168, 0.12) 0%, rgba(96, 165, 196, 0.06) 100%);
    color: #4a8ba8;
}

/* Card Title */
.diff-title {
    font-size: 1.0625rem;    /* 17px — slightly larger than body */
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
    margin-bottom: var(--space-xs);
}

/* Card Description */
.diff-description {
    font-size: 0.9375rem;    /* 15px — slightly smaller than body */
    line-height: 1.7;
    color: var(--color-text-muted);
    /* Muted text keeps the visual hierarchy clear:
       icon (visual) → title (bold, dark) → description (lighter, smaller) */
}


/* ---- 9. SECTION 3: SERVICES OVERVIEW ----
   Visually mirrors Section 2 (Differentiators) for consistency.
   Same card style, same grid, same icon system.

   The key difference: service cards include a "Learn more" link
   at the bottom. This requires the card to use flexbox internally
   so the link always sits at the card's bottom edge — even when
   card descriptions have different lengths.

   Background: white (continuing the alternating pattern).
   gray → white → gray → white */

#services {
    background-color: var(--color-white);
    padding: var(--space-2xl) 0;
}

#services .section-headline {
    text-align: center;
    max-width: 620px;
    margin: 0 auto var(--space-xl);
}

/* Service Card Grid — identical to .diff-grid */
.service-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

/* Service Card
   Matches .diff-card styling, but adds flexbox for internal
   layout. This is a NEW CONCEPT:

   FLEXBOX INSIDE A GRID CELL
   The grid controls where cards sit on the page (2x2 layout).
   Flexbox inside each card controls how content stacks within
   the card (icon → title → description → link).

   flex-direction: column → stack children vertically.
   This is the same as normal flow, BUT it unlocks a key
   feature: margin-top: auto on the link pushes it to the
   bottom of the card. Without flexbox, auto margins don't
   work vertically. */
.service-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-lg);

    /* Flexbox for internal layout */
    display: flex;
    flex-direction: column;

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}

.service-card:hover {
    border-color: rgba(0, 98, 204, 0.25);
    box-shadow: 0 4px 16px rgba(12, 20, 33, 0.06);
    transform: translateY(-2px);
}

/* Service Card Title */
.service-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
    margin-bottom: var(--space-xs);
}

/* Service Card Description */
.service-description {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--color-text-muted);
}

/* "Learn more →" Link
   margin-top: auto is the KEY trick here.
   In a flex column, auto margin absorbs all remaining space —
   pushing the link to the bottom of the card regardless of
   how tall the description text is.

   This keeps all "Learn more" links aligned across cards
   even when descriptions are different lengths. */
.service-link {
    display: inline-block;
    margin-top: var(--space-md);

    font-size: 0.875rem;        /* 14px — smaller than body for subtlety */
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;

    transition: color var(--transition);
}

.service-link:hover {
    color: var(--color-accent-hover);
}


/* ---- 10. SECTION 4: HOW WE WORK (PROCESS) ----
   This section displays our 4-phase methodology as a
   vertical TIMELINE. Unlike the card grids above, this
   uses a LINEAR layout to show progression — phase 1
   leads to phase 2 leads to phase 3, etc.

   NEW CONCEPT: TIMELINE LAYOUT
   The timeline combines several techniques:
   1. Flexbox rows (number circle + content side by side)
   2. Pseudo-elements (the connecting line between phases)
   3. z-index layering (circles sit ON TOP of the line)

   The connecting line is drawn using ::after pseudo-elements
   on each phase (except the last). The line starts at the
   bottom of the circle and extends down to the next phase,
   creating a continuous visual thread.

   Background: gray (continuing the alternating pattern).
   services (white) → process (gray) */

#process {
    background-color: var(--color-bg);
    padding: var(--space-2xl) 0;
}

#process .section-headline {
    text-align: center;
    max-width: 620px;
    margin: 0 auto var(--space-sm);
}

#process .section-subheadline {
    margin-bottom: var(--space-sm);
}

/* Intro text — centered, muted, bridges the subheadline
   and the timeline below. Sets up the list with a colon. */
.process-intro {
    text-align: center;
    color: var(--color-text-muted);
    margin-bottom: var(--space-xl);
}

/* Timeline Container
   list-style: none removes the default "1. 2. 3." numbering
   that <ol> adds. We still get the SEMANTIC benefits of an
   ordered list (screen readers, SEO) while controlling the
   visual presentation ourselves with .phase-number circles.

   max-width keeps the timeline narrower than the full
   section — timelines feel awkward when stretched too wide.
   640px keeps it readable and focused. */
.process-timeline {
    list-style: none;
    max-width: 640px;
    margin: 0 auto;
    position: relative;
    /* position: relative creates a positioning context.
       The connecting lines (::after) on each phase are
       positioned absolutely WITHIN their parent <li>,
       but the timeline itself needs relative positioning
       for everything to layer correctly. */
}

/* Each Phase Row
   Flexbox creates the side-by-side layout:
   [circle] [content]

   align-items: flex-start keeps the circle at the TOP
   of the content block (not centered vertically, which
   would look odd with multi-line content). */
.process-phase {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    position: relative;
    /* position: relative on each <li> so the ::after
       connecting line can be positioned within it. */

    padding-bottom: var(--space-xl);
    /* Space between phases. We use padding (not margin)
       so the ::after connecting line can extend through
       this space — padding is INSIDE the element,
       margin is outside. The line needs to be inside. */
}

.process-phase:last-child {
    padding-bottom: 0;
    /* No padding after the last phase — nothing to
       connect to, and no extra whitespace needed. */
}

/* THE CONNECTING LINE
   This is the vertical line that visually connects
   one phase to the next, creating the "timeline" feel.

   HOW IT WORKS:
   ::after creates an invisible element inside each <li>.
   We make it a thin, tall rectangle and position it so it:
   - Starts just below the circle (top: 48px = circle height)
   - Extends to the bottom of the <li> (bottom: 0)
   - Sits at the horizontal center of the circle (left: 23px)

   :not(:last-child) means "every phase EXCEPT the last one."
   The last phase has nothing below it, so no line needed.

   VISUAL RESULT:
   ● ← circle
   | ← this line (::after)
   |
   ● ← next circle (sits on top of line via z-index)
   |
   |
   ● ← next circle
   |
   |
   ●  ← last circle (no line below) */
.process-phase:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 23px;
    /* 23px = center of a 48px circle.
       48 / 2 = 24, minus half the line width (1px) = 23px.
       This centers the 2px line under the circle. */

    top: 48px;
    /* Starts right below the circle (which is 48px tall). */

    bottom: 0;
    /* Extends to the very bottom of the <li>'s padding.
       This reaches down to where the next circle begins. */

    width: 2px;
    background-color: var(--color-border);
}

/* PHASE NUMBER CIRCLE
   The large numbered circles that anchor each phase.

   flex-shrink: 0 is CRITICAL here.
   Without it, if the content next to the circle is wide,
   flexbox might try to SHRINK the circle to make room.
   flex-shrink: 0 says "never shrink me, I'm always 48px."

   z-index: 1 makes the circle sit ON TOP of the connecting
   line. Without this, the line would show through the circle
   because ::after elements render above their parent's
   background by default. */
.phase-number {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;

    background-color: var(--color-white);
    border: 2px solid var(--color-border);
    /* White background with gray border. The white background
       is what "covers" the connecting line behind it, creating
       the illusion of the line running between circles. */

    display: flex;
    align-items: center;
    justify-content: center;
    /* Flexbox centering for the number text inside. */

    font-size: 1.125rem;       /* 18px */
    font-weight: 700;
    color: var(--color-accent);
    /* Bold blue number — draws the eye to each phase. */

    position: relative;
    z-index: 1;

    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition);
    /* Smooth transitions for the hover effect where the
       circle fills with blue. Three properties animate:
       background (white → blue), border (gray → blue),
       color (blue → white). */
}

/* PHASE CONTENT
   The text block next to each circle: title, bullets, outcome.

   padding + border-radius create a subtle "card-like" area
   that becomes visible on hover (when background turns white).
   Without hover, the padding just provides breathing room. */
.phase-content {
    flex: 1;
    /* flex: 1 means "take up all remaining horizontal space."
       The circle is fixed at 48px, the content fills the rest. */

    border-radius: var(--radius);
    padding: 0.625rem var(--space-sm);
    /* 10px top/bottom, 16px left/right.
       The 10px top padding vertically aligns the title text
       roughly with the center of the 48px circle:
       Circle center = 24px from top
       Title text center ≈ 10px padding + 11px (half of line-height)
       = ~21px. Close enough to feel aligned. */

    transition: background-color var(--transition);
}

/* Phase Title */
.phase-title {
    font-size: 1.0625rem;     /* 17px — matches .diff-title */
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
    margin-bottom: var(--space-xs);
}

/* Phase Bullet Points
   list-style: none removes default bullets (•).
   We draw our own smaller, styled dots using ::before
   pseudo-elements — this gives us full control over
   the dot's size, color, and position. */
.phase-details {
    list-style: none;
    margin-bottom: var(--space-sm);
}

.phase-details li {
    font-size: 0.9375rem;     /* 15px — matches card descriptions */
    line-height: 1.7;
    color: var(--color-text-muted);
    padding-left: 1.25rem;
    /* 20px left padding creates space for our custom bullet.
       The ::before dot sits in this space. */

    position: relative;
    /* Needed so the ::before dot can be positioned
       absolutely within this <li>. */
}

/* Custom bullet dots
   Tiny circles positioned to the left of each line.
   Smaller and more refined than browser default bullets. */
.phase-details li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65rem;
    /* 10.4px from top — positions the dot vertically
       at the center of the first line of text.
       (line-height 1.7 × 15px = 25.5px → center ≈ 12.75px
       minus half dot height 2.5px ≈ 10.25px ≈ 0.65rem) */

    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--color-border);
    /* Gray dots — subtle, not distracting. They provide
       structure without competing with the content. */
}

/* PHASE OUTCOME
   The "Outcome:" line at the bottom of each phase.
   This is the VALUE STATEMENT — what the client GETS.

   border-left creates a small accent bar that visually
   separates the outcome from the bullets above and draws
   attention to it. This is a common pattern in editorial
   design for callouts and pull quotes. */
.phase-outcome {
    font-size: 0.9375rem;     /* 15px */
    line-height: 1.7;
    color: var(--color-text);
    /* Darker than the bullets above — outcomes are more
       important and deserve stronger visual weight. */

    font-style: italic;
    /* Italic differentiates the outcome from the factual
       bullets above. It reads as a "promise" or "takeaway." */

    border-left: 3px solid var(--color-accent);
    padding-left: var(--space-sm);
    /* Blue left border + padding = indented callout style. */
}

.phase-outcome strong {
    font-style: normal;
    /* Resets italic on the "Outcome:" label itself.
       Bold + italic together looks cluttered, so we keep
       the label bold-only and let the rest be italic. */

    color: var(--color-accent);
    /* Blue "Outcome:" label ties to the blue border,
       creating a cohesive accent color moment. */
}

/* HOVER EFFECTS
   When a visitor hovers over a phase, two things happen:
   1. The number circle fills with blue (white → blue)
   2. The content area gets a white background

   These are subtle but rewarding — they give the timeline
   a feeling of interactivity without being flashy.

   WHY hover on .process-phase (the <li>)?
   Because .process-phase contains BOTH the circle and
   the content. Hovering anywhere on the row triggers both
   effects simultaneously. If we put hover on each child
   separately, you'd have to hover precisely over the circle
   OR the content — bad UX. */
.process-phase:hover .phase-number {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
    /* Circle goes from outlined (white bg, blue text)
       to filled (blue bg, white text). */
}

.process-phase:hover .phase-content {
    background-color: var(--color-white);
    /* Content gets a white card-like background.
       On the gray section background (#f8f9fb), this
       white creates a subtle "highlight" effect. */
}


/* ---- 11. SECTION 6: CREDENTIALS / ABOUT ----
   A brief personal credibility section. Unlike the card
   grids and timeline above, this uses a simple TWO-COLUMN
   layout: photo on one side, text on the other.

   NEW CONCEPT: RESPONSIVE LAYOUT DIRECTION
   On mobile, the photo and text STACK vertically (column).
   On desktop, they sit SIDE BY SIDE (row).
   We achieve this by changing flex-direction in the
   media queries: column (mobile) → row (desktop).

   This is one of flexbox's superpowers — you can completely
   change a layout's direction with a single property change.

   Background: white (continuing the alternating pattern).
   process (gray) → credentials (white) */

#credentials {
    background-color: var(--color-white);
    padding: var(--space-2xl) 0;
}

#credentials .section-headline {
    text-align: center;
    max-width: 620px;
    margin: 0 auto var(--space-xl);
}

/* Two-column container (stacked on mobile, side-by-side on desktop).
   On mobile: flex-direction defaults to column, everything stacks.
   The switch to row happens in the 48rem media query below. */
.credentials-container {
    display: flex;
    flex-direction: column;
    /* column = stack children vertically.
       Photo on top, text below. This is the mobile layout. */

    align-items: center;
    /* Centers both children horizontally when stacked.
       On desktop (row direction), this changes to centering
       them vertically instead — flexbox axes flip when
       you change direction. */

    gap: var(--space-lg);

    max-width: 700px;
    margin: 0 auto;
    /* Center the whole block within .section-content.
       700px keeps it compact — this section shouldn't
       feel sprawling. Credibility is about focus. */
}

/* PHOTO AREA
   Wraps the placeholder (and eventually the real <img>).
   flex-shrink: 0 prevents the photo from being squished
   when the text beside it is long. Same trick we used
   on the timeline phase numbers. */
.credentials-photo {
    flex-shrink: 0;
}

/* PHOTO PLACEHOLDER
   A styled circle that stands in until the real photo
   is ready. Uses the same design language as our icon
   circles (gradient background + Phosphor icon) but
   larger and with a dashed border to signal "placeholder."

   DASHED BORDER: a well-known UI convention meaning
   "something goes here." Users instinctively understand
   it's temporary. Solid border would look like a design
   choice; dashed says "drop your image here." */
.photo-placeholder {
    width: 140px;
    height: 140px;
    border-radius: 50%;

    border: 2px dashed var(--color-border);
    /* Dashed = "placeholder, not final." */

    background: linear-gradient(
        135deg,
        rgba(58, 107, 165, 0.06) 0%,
        rgba(91, 140, 201, 0.03) 100%
    );
    /* Very subtle blue tint — matches the icon circle
       gradients from the differentiators section.
       Keeps the placeholder feeling designed, not broken. */

    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-placeholder i {
    font-size: 3.5rem;       /* 56px — large enough to fill the circle */
    color: var(--color-border);
    /* Gray icon — muted so it clearly reads as placeholder,
       not as a design element. When the real photo replaces
       this, it'll be a huge visual upgrade. */
}

/* FUTURE: Real photo styles.
   When you swap the placeholder for an <img>, use this class:

   .credentials-img {
       width: 140px;
       height: 140px;
       border-radius: 50%;
       object-fit: cover;
   }

   object-fit: cover makes the image fill the circle
   without distortion — it crops the edges rather than
   stretching. Essential for circular profile photos
   since most photos aren't perfectly square. */

/* BIO TEXT AREA
   On mobile, text is centered (matches the centered photo).
   On desktop, text-align switches to left in the media query. */
.credentials-body {
    text-align: center;
    /* Centered on mobile since the photo is centered above.
       If text were left-aligned under a centered photo,
       it would feel misaligned and awkward. */
}

/* Bio paragraph — the strongest statement, slightly larger.
   This is the first thing people read after the headline,
   so it carries more weight typographically. */
.credentials-bio {
    font-size: var(--text-base);
    font-weight: 500;
    /* font-weight: 500 (medium) is between normal (400)
       and semibold (600). It gives the bio just a touch
       more presence than regular text without being as
       heavy as a title. Subtle but effective. */

    line-height: 1.7;
    color: var(--color-text);
    margin-bottom: var(--space-sm);
}

/* Background paragraph — supporting detail, softer tone. */
.credentials-background {
    font-size: 0.9375rem;     /* 15px — slightly smaller */
    line-height: 1.7;
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}

/* SPECIALIZATIONS LINE
   The "Specialized in: X | Y | Z" scannable format.

   border-top creates a thin separator line above,
   visually grouping the specializations as a distinct
   "footer" to the bio section. It's like a business
   card's tagline — quick-hit credentials at a glance. */
.credentials-specializations {
    font-size: 0.875rem;      /* 14px — compact, scannable */
    line-height: 1.7;
    color: var(--color-text-muted);

    border-top: 1px solid var(--color-border);
    padding-top: var(--space-md);
    /* The border + padding creates breathing room between
       the background paragraph and the specializations.
       More effective than just margin — the line provides
       a visual "here's a different kind of info" signal. */
}

.credentials-specializations strong {
    color: var(--color-text);
    /* "Specialized in:" in dark text makes it a clear label.
       The specializations themselves stay muted, creating
       a label → content hierarchy within one line. */
}

/* Pipe dividers between specializations.
   Lighter color than the text so they read as separators,
   not as content. Slight horizontal padding adds breathing
   room around each pipe. */
.spec-divider {
    color: var(--color-border);
    /* Uses the border gray — even lighter than muted text.
       This makes the pipes feel like visual dividers rather
       than characters you'd try to read. */

    padding: 0 0.375rem;
    /* 6px on each side of the pipe. Without this, the pipes
       would be jammed against the text: "MM|Ariba" vs
       "MM | Ariba". Small detail, big readability difference. */
}


/* ---- 12. SECTION 7: BLOG / INSIGHTS PREVIEW ----
   A teaser section showing 3 recent blog posts as cards.
   Follows the same card-grid pattern as differentiators
   and services, but with a key difference: 3 columns
   on desktop instead of 2.

   Card structure is simpler than service cards — no icons.
   Blog post titles are the visual anchor instead. Each card
   uses flexbox internally (like service cards) so the
   "Read Article →" link always sits at the bottom.

   Background: gray (continuing the alternating pattern).
   credentials (white) → insights (gray) */

#insights {
    background-color: var(--color-bg);
    padding: var(--space-2xl) 0;
}

#insights .section-headline {
    text-align: center;
    max-width: 620px;
    margin: 0 auto var(--space-sm);
}

/* Insights Card Grid
   Starts as a single column on mobile (same as all our grids).
   Switches to 2 columns on tablet, then 3 on desktop.
   The 3-column layout is why we created a separate grid class
   instead of reusing .service-grid (which stays at 2 columns). */
.insights-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Mobile: single column, cards stack vertically. */

    gap: var(--space-md);
}

/* Individual Insight Card
   Same visual language as .service-card, but with two
   visual enhancements:
   1. A colored LEFT BORDER accent (3px) that gives each
      card a color identity tied to its topic badge.
   2. A topic BADGE above the title for quick scanning.

   The left border is a well-established editorial design
   pattern — newspapers and magazines use colored sidebar
   rules to categorize content. It adds visual interest
   without clutter, and the color ties to the badge above
   for a cohesive card identity.

   BORDER TRICK: We use border-left: 3px solid on each
   color modifier. But this shifts the card content 2px
   to the right (3px left border vs 1px on other sides).
   We compensate by keeping border: 1px on all sides first,
   then overriding ONLY border-left on the modifier class.
   This way the border-radius still works correctly on
   all four corners. */
.insight-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-lg);

    /* Flexbox column so the footer sits at the bottom.
       Same technique as .service-card — margin-top: auto
       on .insight-footer absorbs remaining vertical space. */
    display: flex;
    flex-direction: column;

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}

.insight-card:hover {
    box-shadow: 0 4px 16px rgba(12, 20, 33, 0.06);
    transform: translateY(-2px);
}

/* COLOR MODIFIER CLASSES
   Each modifier sets the left border color. We reuse
   the SAME color values from .diff-icon modifiers
   (#3a6ba5 blue, #3d8b84 teal, #5b5fc7 purple) so the
   palette stays consistent across the whole site.

   border-left overrides the 1px border on the left side
   with a thicker, colored version. The other 3 sides
   keep their 1px gray border. */
.insight-card--blue {
    border-left: 3px solid #3a6ba5;
}

.insight-card--teal {
    border-left: 3px solid #3d8b84;
}

.insight-card--purple {
    border-left: 3px solid #5b5fc7;
}

/* TOPIC BADGES
   Small rounded labels that categorize posts at a glance.
   Visitors scanning the section can quickly spot topics
   that interest them without reading titles.

   DESIGN PATTERN: "Pill badge"
   - Rounded corners (border-radius high enough to pill)
   - Subtle tinted background (not solid — too heavy)
   - Matching text color (ties to card's left border)
   - Small, uppercase text (reads as a label, not content)

   This is the same pattern GitHub uses for labels,
   Notion uses for tags, and Medium uses for topics. */
.insight-badge {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    /* 4px top/bottom, 10px left/right.
       Compact padding keeps badges small and label-like.
       They should feel like metadata, not headlines. */

    font-size: 0.6875rem;       /* 11px — deliberately small */
    font-weight: 700;
    letter-spacing: 0.05em;
    /* Slight letter-spacing at small sizes improves
       readability, especially for uppercase text.
       Without it, letters feel jammed together. */

    text-transform: uppercase;
    /* UPPERCASE reinforces that this is a LABEL (category),
       not a sentence. It's a visual convention — badges,
       tags, and status indicators are almost always uppercase
       on modern sites. */

    border-radius: 4px;
    /* Slightly rounded corners — enough to feel soft,
       not so much that it becomes a full pill shape.
       Matches the subtle, professional aesthetic. */

    margin-bottom: var(--space-sm);
}

/* Badge Color Modifiers
   Each uses a very low-opacity background tint with
   a matching solid text color. Same approach as our
   .diff-icon gradient circles — tinted, not solid.

   WHY low opacity backgrounds?
   Solid-colored badges (like bright blue blocks) would
   scream for attention and clash with the minimalist
   design. Tinted backgrounds whisper the category while
   letting the title remain the visual anchor. */
.insight-badge--blue {
    background-color: rgba(58, 107, 165, 0.1);
    color: #3a6ba5;
}

.insight-badge--teal {
    background-color: rgba(61, 139, 132, 0.1);
    color: #3d8b84;
}

.insight-badge--purple {
    background-color: rgba(91, 95, 199, 0.1);
    color: #5b5fc7;
}

/* Insight Card Title */
.insight-title {
    font-size: 1.0625rem;       /* 17px — matches other card titles */
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.4;
    /* line-height: 1.4 (vs 1.3 on service titles) because
       blog titles are longer and wrap to multiple lines.
       More line spacing improves readability on wrapped text. */

    margin-bottom: var(--space-sm);
}

/* Insight Card Excerpt */
.insight-excerpt {
    font-size: 0.9375rem;       /* 15px — matches other card descriptions */
    line-height: 1.7;
    color: var(--color-text-muted);
}

/* Card Footer: "Read Article →" + "X min read"
   Uses flexbox to place them on opposite ends of the
   same line. margin-top: auto pushes the entire footer
   to the card bottom — same trick as before, but now
   applied to the wrapper instead of the link directly.

   LAYOUT:
   [Read Article →]          [5 min read]
   ← flex start        flex end → */
.insight-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* space-between pushes the first child (link) to the
       left and the last child (read time) to the right,
       with all remaining space between them. */

    margin-top: auto;
    /* auto margin absorbs vertical space — keeps footer
       pinned to card bottom regardless of content height. */

    padding-top: var(--space-md);
    /* 24px above the footer. Replaces the old margin-top
       on .insight-link — spacing now lives on the wrapper. */
}

/* "Read Article →" Link */
.insight-link {
    display: inline-block;

    font-size: 0.875rem;        /* 14px — same as .service-link */
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;

    transition: color var(--transition);
}

.insight-link:hover {
    color: var(--color-accent-hover);
}

/* Read Time Indicator
   A small, muted label that sets time expectations.
   "5 min read" reduces click friction — visitors are
   more likely to start reading when they know the
   commitment is short.

   Popularized by Medium, now a standard convention
   on blog cards across the web. */
.insight-read-time {
    font-size: 0.75rem;         /* 12px — smallest text on the card */
    color: var(--color-text-muted);
    /* Muted gray — this is metadata, not content.
       It should be findable but not attention-grabbing. */
}

/* "View All Insights →" CTA
   Centered below the card grid. Wrapping in a <div> lets
   us use text-align: center independently of the grid layout.
   The top margin creates clear separation from the cards above. */
.insights-cta {
    text-align: center;
    margin-top: var(--space-xl);
    /* 48px above — enough space that the "View All" link
       reads as a section-level action, not part of the last card. */
}


/* ---- 13. SECTION 8: INDIVIDUAL LEARNER CALLOUT ----
   This section intentionally breaks the visual pattern.
   Every section above uses flat white or cool gray backgrounds.
   This one uses a GRADIENT — a deliberate pattern break that
   signals "this content is for a different audience."

   GRADIENT APPROACH:
   Blue-to-purple diagonal gradient at low opacity, layered
   over a subtle dot pattern texture. The gradient provides
   color energy; the dots add tactile depth. Together they
   create a surface that feels more dynamic than the flat
   sections above — matching the more casual, energetic tone
   of the copy.

   WHY blue-to-purple?
   Blue is already our brand accent. Purple adds warmth and
   creativity — a common association with personal growth and
   learning. The shift from blue (corporate) to purple
   (individual) literally mirrors our audience shift.

   TEXTURE PATTERN:
   Uses a radial-gradient trick to create tiny dots.
   This is a pure CSS technique — no image files needed.
   The dots are barely visible (2% opacity) but add just
   enough texture to prevent the gradient from feeling like
   a flat PowerPoint background. Stripe and Linear use
   similar subtle noise/dot patterns on colored sections. */

#individual-learner {
    /* LAYERED BACKGROUNDS
       CSS lets you stack multiple backgrounds with commas.
       They render in ORDER: first listed = on top.

       Layer 1 (top): Dot pattern texture
       Layer 2 (bottom): Blue-to-purple gradient

       The dots sit ON TOP of the gradient. Since the dots
       are nearly transparent, the gradient shows through. */
    background:
        /* Layer 1: Dot pattern
           radial-gradient creates a tiny circle (1px).
           background-size: 20px 20px tiles it into a grid.
           The circles are only 2% opacity — just a whisper
           of texture. Without this, the gradient feels flat
           and artificial. With it, the surface has life. */
        radial-gradient(
            circle at 1px 1px,
            rgba(255, 255, 255, 0.08) 1px,
            transparent 0
        ),
        /* Layer 2: Main gradient
           135deg = top-left to bottom-right diagonal.
           Starts with a blue tint, ends with a purple tint.
           Both colors are very low opacity (0.06-0.08) so
           the effect is SUBTLE — a gentle wash of color,
           not a loud statement. */
        linear-gradient(
            135deg,
            rgba(58, 107, 165, 0.08) 0%,
            rgba(91, 95, 199, 0.06) 100%
        );
    background-size:
        20px 20px,     /* Dot pattern: tiles every 20px */
        100% 100%;     /* Gradient: stretches to fill */

    /* Less vertical padding than main sections.
       var(--space-xl) = 48px vs var(--space-2xl) = 80px.
       This makes the section feel compact — a callout,
       not a full section. Size communicates hierarchy:
       smaller = secondary importance. */
    padding: var(--space-xl) 0;
}

/* Callout Inner Container
   Narrow and centered. The narrow width (520px max) serves
   three purposes:
   1. Keeps line lengths comfortable for reading
   2. Makes the section feel compact and focused
   3. Visually communicates "quick aside" vs. the wider
      sections above (which go up to 700px+) */
.learner-callout {
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
}

/* Headline: slightly different treatment
   Uses the standard section headline size but with a
   touch of italic to feel more personal and conversational.
   Corporate sections above use straight, authoritative
   headings. This one leans in with a friendly tilt.

   font-style: italic on a headline is uncommon — and that's
   the point. It breaks the pattern and catches the eye. */
.learner-headline {
    font-size: var(--text-section-mobile);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text);
    letter-spacing: -0.02em;

    font-style: italic;
    /* Italic = personal, conversational, inviting.
       Non-italic = authoritative, corporate, formal.
       This single property changes the entire TONE. */

    margin-bottom: var(--space-md);
}

/* Body Paragraphs */
.learner-body {
    font-size: var(--text-base);
    line-height: 1.75;
    color: var(--color-text-muted);
    text-wrap: balance;
}

.learner-body + .learner-body {
    margin-top: var(--space-sm);
    /* Adjacent sibling selector: space between paragraphs
       but not above the first one. Same pattern as
       .problem-body p + p. */
}

/* CTA Button Override
   The .learner-cta class adds spacing above the button.
   We reuse .btn .btn-primary for the actual button styling
   and just add the margin needed in this specific context. */
.learner-cta {
    margin-top: var(--space-lg);
    /* 32px above the button — enough separation from the
       text but not so much it feels disconnected. */
}


/* ---- 14. SECTION 9: FINAL CTA ----
   The closing conversion section. Serves both audiences
   (corporate + individual) with a single, unified block.

   Design philosophy: SIMPLICITY.
   This section has ONE job — get the visitor to click a
   button. No cards, no grids, no icons. Just a headline,
   two short paragraphs, and two buttons. Every element
   earns its place; nothing is decorative.

   LAYOUT PATTERN:
   Mirrors the hero section's centered layout:
   headline → supporting text → button group.
   This creates a visual "bookend" effect — the page
   opens and closes with the same structure. Visitors
   subconsciously feel closure and completion.

   Background: white. The primary blue button has maximum
   contrast against white, making it the strongest visual
   element in the section. The outline secondary button
   sits beside it without competing. */

#final-cta {
    background-color: var(--color-white);
    padding: var(--space-2xl) 0;
}

/* CTA Block: the narrow centered wrapper.
   Same concept as .learner-callout — constrained width
   keeps the section punchy and focused.

   560px is wide enough for the two-button layout on
   desktop but narrow enough to feel intentional.
   Centered text works here because the content is
   short (headline + two brief paragraphs). */
.cta-block {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}

.cta-block .section-headline {
    margin-bottom: var(--space-md);
}

/* Body Text: the two audience paragraphs.
   Each paragraph has a bold label ("Corporate teams:" /
   "Individuals:") that acts as a scanning anchor. Visitors
   find their paragraph in under a second. */
.cta-body {
    margin-bottom: var(--space-xl);
    /* 48px below the text, before the buttons.
       Generous spacing gives the buttons room to breathe
       and prevents them from feeling jammed against the text. */
}

.cta-body p {
    font-size: var(--text-base);
    line-height: 1.75;
    color: var(--color-text-muted);
}

.cta-body p + p {
    margin-top: var(--space-sm);
    /* Space between the two paragraphs. Same adjacent
       sibling pattern used in .problem-body. */
}

.cta-body strong {
    color: var(--color-text);
    /* Bold labels in dark navy — they pop against the
       muted gray paragraph text. This creates a two-level
       hierarchy within each paragraph: label (dark, bold)
       → description (gray, normal). */
}


/* ---- 15. FOOTER ----
   The visual "bookend" of the page. Dark navy background
   creates a definitive endpoint — visitors know they've
   reached the bottom. This is the same deep navy used for
   primary text (#0c1421), which ties the footer to the
   overall brand palette without introducing new colors.

   DARK BACKGROUND = INVERTED COLOR SCHEME
   Everything above uses dark text on light backgrounds.
   The footer flips this: light text on dark background.
   This inversion is what makes it feel like a distinct
   zone — "site info, not content."

   All text and link colors within the footer are set
   explicitly because they can't inherit the default
   dark text colors (which would be invisible on the
   dark background). */

#site-footer {
    background-color: var(--color-text);
    /* Using --color-text (#0c1421) as the BACKGROUND.
       This deep navy is dark enough to feel "footer dark"
       but warmer than pure black (#000). Pure black
       backgrounds feel harsh and cheap — dark navy
       feels premium. Stripe, Linear, and Vercel all
       use dark navy (not black) for their footers. */

    padding: var(--space-xl) 0 var(--space-lg);
    /* Less top padding than main sections (48px vs 80px)
       and even less on bottom (32px). Footers should feel
       compact — they're utilitarian, not content. */

    color: rgba(255, 255, 255, 0.6);
    /* Sets the DEFAULT text color for everything inside
       the footer to white at 60% opacity. This is a soft,
       muted white that's readable without being glaring.
       Individual elements can override this for emphasis
       (like the logo, which gets full white). */
}

/* FOOTER GRID: 3-column layout on desktop
   On mobile: stacks vertically (single column).
   On tablet+: 3 columns with custom proportions.

   Unlike our card grids (equal columns), the footer grid
   uses different column WIDTHS:
   - Brand column: wider (takes 2fr — more space for tagline)
   - Links column: narrow (1fr — short link list)
   - Contact column: narrow (1fr — short info)

   This asymmetry matches the CONTENT — the brand block
   has more text, so it gets more room. Equal columns
   would leave the brand cramped and the links columns
   with awkward empty space. */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Mobile: single column, everything stacks. */

    gap: var(--space-lg);
    padding-bottom: var(--space-lg);
    /* Padding below the grid creates space before the
       bottom bar's border-top line. */
}

/* BRAND COLUMN */
.footer-logo {
    display: block;
    height: 22px;
    width: auto;
    margin-bottom: var(--space-xs);
    /* White logo SVG — the brightest element in the footer.
       The brand mark should be the first thing your eye
       finds in the dark footer area. */
}

.footer-tagline {
    font-size: 0.875rem;        /* 14px — smaller, supporting text */
    line-height: 1.6;
    /* Inherits the rgba(255,255,255,0.6) from #site-footer.
       Muted white — secondary to the logo above. */
}

/* COLUMN HEADINGS ("Quick Links" / "Contact")
   Small, uppercase labels — same convention as our
   insight badges. Uppercase at small sizes reads as
   a CATEGORY LABEL, not a headline. */
.footer-heading {
    font-size: 0.75rem;         /* 12px — deliberately small */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    /* Generous letter-spacing at 12px. Small uppercase
       text NEEDS spacing to be readable — without it,
       the letters blur together. 0.08em is standard
       for small-caps and labels. */

    color: rgba(255, 255, 255, 0.4);
    /* Even more muted than body text (40% vs 60%).
       These headings are structural labels, not content.
       They help you FIND the section, then fade away
       while you read the actual links below. */

    margin-bottom: var(--space-sm);
}

/* FOOTER LISTS (links + contact)
   Removes default list styling. Both the Quick Links
   and Contact columns use <ul> for semantics, but we
   strip the visual bullets and spacing. */
.footer-links ul,
.footer-contact ul {
    list-style: none;
}

.footer-links li,
.footer-contact li {
    margin-bottom: 0.375rem;
    /* 6px between list items. Tighter than main content
       spacing — footer lists should be compact. */
}

/* FOOTER LINKS
   Default state: muted white (inherits from footer).
   Hover state: full white. Simple and clean.

   No underlines by default (text-decoration: none).
   On hover, we DON'T add underlines either — the
   color change alone is sufficient feedback in a
   footer context. Main content links should have
   underlines for discoverability, but footer links
   are already understood to be clickable (they're
   in a navigation list). */
.footer-links a,
.footer-contact a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.875rem;        /* 14px */

    transition: color var(--transition);
}

.footer-links a:hover,
.footer-contact a:hover {
    color: var(--color-white);
}

/* Non-link contact items (like "Dallas, Texas").
   Same size and color as links for visual consistency. */
.footer-contact li {
    font-size: 0.875rem;
}

/* BOTTOM BAR
   The copyright + legal links row. Separated from the
   columns above by a subtle border-top line.

   The border uses white at very low opacity (10%) —
   just visible enough to create a divider without
   drawing attention. On dark backgrounds, low-opacity
   white borders look much better than solid gray lines. */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--space-lg);

    display: flex;
    flex-direction: column;
    /* Mobile: stack copyright above legal links. */

    align-items: center;
    gap: var(--space-sm);
    text-align: center;
}

/* Copyright text */
.footer-copyright {
    font-size: 0.8125rem;       /* 13px — true fine print */
    /* Inherits muted white from the footer. */
}

/* Legal Links (Privacy Policy / Terms) */
.footer-legal {
    display: flex;
    gap: var(--space-md);
    /* 24px between the two legal links. */
}

.footer-legal a {
    font-size: 0.8125rem;       /* 13px — matches copyright */
    color: rgba(255, 255, 255, 0.4);
    /* Even MORE muted than regular footer links (40% vs 60%).
       Legal links are the least important elements on the
       entire page. They exist because they have to, not
       because visitors seek them out. */

    text-decoration: none;
    transition: color var(--transition);
}

.footer-legal a:hover {
    color: rgba(255, 255, 255, 0.7);
    /* Hover goes to 70% — noticeable change from 40%,
       but still not full white. Even on hover, legal
       links don't need to scream for attention. */
}


/* ---- 17. BUTTONS ----
   Two-class pattern: .btn + .btn-primary/.btn-secondary

   .btn holds ALL shared button styles (padding, font, shape).
   The modifier class (.btn-primary, .btn-secondary) adds
   only the COLOR differences.

   WHY? Because when we add buttons to other pages later,
   we reuse .btn everywhere and only change the modifier.
   This is called the "BEM-like" naming pattern. */

.btn {
    text-decoration: none;
    /* Removes the underline that <a> tags have by default */

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.875rem 1.75rem;     /* 14px top/bottom, 28px left/right */
    min-width: 180px;

    font-family: var(--font-family);
    font-size: 0.9375rem;          /* 15px — slightly smaller than body for refinement */
    font-weight: 600;
    letter-spacing: 0.01em;

    border-radius: var(--radius);
    border: 1.5px solid transparent;

    cursor: pointer;

    /* TRANSITIONS: makes hover effects smooth instead of instant.
       We list each property that will animate.
       200ms = 0.2 seconds. "ease" = starts fast, ends slow. */
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

/* Focus state for keyboard navigation (accessibility).
   When someone tabs to a button, this outline shows
   them which element is focused. Important for users
   who can't use a mouse. */
.btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* PRIMARY BUTTON: Solid blue — the main action */
.btn-primary {
    background-color: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
}

.btn-primary:hover {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);

    /* Lift effect: moves button up 1px on hover.
       Combined with the shadow, this creates a subtle
       "floating" effect that feels interactive and premium. */
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 98, 204, 0.25);
}

.btn-primary:active {
    /* :active fires while the button is being clicked.
       We push it back down to create a "press" feeling. */
    transform: translateY(0);
    box-shadow: none;
}

/* SECONDARY BUTTON: Ghost/outline — the softer option */
.btn-secondary {
    background-color: transparent;
    color: var(--color-text);
    border-color: var(--color-border);
}

.btn-secondary:hover {
    border-color: var(--color-text);
    background-color: rgba(12, 20, 33, 0.03);
    /* Very faint fill on hover — just enough to show
       the button is interactive. The 0.03 = 3% opacity. */
}

.btn-secondary:active {
    background-color: rgba(12, 20, 33, 0.06);
}


/* ---- 18. RESPONSIVE DESIGN ----

   MOBILE-FIRST APPROACH:
   All the styles above are designed for mobile (small screens).
   These @media queries ADD overrides for larger screens.

   WHY mobile-first?
   1. Most web traffic is mobile
   2. It's easier to ADD complexity than to strip it away
   3. Mobile styles are simpler = faster base loading

   @media (min-width: 48rem) means:
   "Apply these styles ONLY when the screen is 768px or wider."

   Common breakpoints:
   48rem = 768px (tablets)
   64rem = 1024px (small desktops/laptops)
   80rem = 1280px (large desktops) */

/* -- Tablets (768px+) -- */
@media (min-width: 48rem) {
    #hero {
        padding: var(--space-2xl) var(--space-lg);
    }

    .hero-headline {
        font-size: var(--text-hero-tablet);
    }

    .hero-subheadline {
        font-size: var(--text-xl);
    }

    /* Problem section: scale up headline and body text */
    .section-headline {
        font-size: var(--text-section-tablet);
    }

    #problem {
        padding: var(--space-2xl) 0;
        /* Padding stays the same on tablet, but the larger
           font sizes naturally fill the space better. */
    }

    .problem-body p {
        font-size: var(--text-lg);
        /* Bump paragraph text from 16px to 19px on tablets.
           Larger screens = more viewing distance = need
           slightly larger text for comfort. */
    }

    /* Process timeline: slightly more breathing room */
    .process-phase {
        gap: var(--space-lg);
        /* Widen the gap between circle and content from
           24px to 32px — tablets have more room. */
    }

    /* Credentials: switch from stacked to side-by-side.
       THIS IS THE KEY RESPONSIVE MOMENT:
       flex-direction changes from column → row.
       Photo moves from above the text to beside it.
       One property change, completely different layout. */
    .credentials-container {
        flex-direction: row;
        /* row = children sit side by side (photo | text). */

        align-items: center;
        /* In row direction, align-items controls VERTICAL
           centering. This vertically centers the photo
           with the text block beside it. */

        text-align: left;
    }

    .credentials-body {
        text-align: left;
        /* Text aligns left when sitting beside the photo.
           Centered text next to a left-aligned photo
           would look unbalanced. */
    }

    .photo-placeholder {
        width: 160px;
        height: 160px;
        /* Slightly larger on tablets — more room to breathe. */
    }

    /* Individual Learner: scale headline on tablet */
    .learner-headline {
        font-size: var(--text-section-tablet);
    }

    /* Footer: switch to 3-column layout.
       2fr for brand (wider — more text content),
       1fr each for links and contact (narrow lists). */
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr;
    }

    /* Bottom bar: horizontal layout on tablet+.
       Copyright on left, legal links on right. */
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }

    /* Insights: switch from 1 column to 2 columns.
       On tablet, 3 cards in 2 columns means the 3rd card
       sits alone on the second row — this is fine. Grid
       handles it automatically. At desktop (64rem), we
       switch to 3 columns for the perfect 1-row layout. */
    .insights-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Differentiators: switch from 1 column to 2x2 grid */
    .diff-grid,
    .service-grid {
        grid-template-columns: repeat(2, 1fr);
        /* repeat(2, 1fr) = "make 2 columns of equal width."
           This is shorthand for "1fr 1fr".

           With 4 cards and 2 columns, CSS Grid automatically
           wraps into 2 rows. We didn't need to specify rows —
           Grid figures it out. This is called "implicit rows."

           COMMA-SEPARATED SELECTORS:
           .diff-grid, .service-grid means "apply these styles
           to BOTH classes." This avoids duplicating the same
           rule. Any time two elements share identical styles,
           you can combine them with a comma. */

        gap: var(--space-md);
    }
}

/* -- Desktops (1024px+) -- */
@media (min-width: 64rem) {
    .hero-content {
        max-width: 700px;
    }

    .hero-headline {
        font-size: var(--text-hero-desktop);
    }

    /* Problem section: full desktop sizing */
    .section-headline {
        font-size: var(--text-section-desktop);
    }

    #problem {
        padding: 6rem 0;
        /* Slightly more vertical breathing room on desktop (96px).
           Larger screens need more whitespace or sections
           feel cramped relative to the screen size. */
    }

    #problem .section-headline {
        max-width: 700px;
        /* Let the headline stretch wider on desktop
           to match the increased font size. */
    }

    .problem-body {
        max-width: 620px;
    }

    /* Differentiators: more breathing room on desktop */
    #differentiators {
        padding: 6rem 0;
    }

    .diff-grid,
    .service-grid {
        gap: var(--space-lg);
    }

    .diff-card,
    .service-card {
        padding: var(--space-xl);
    }

    /* Services: more breathing room on desktop */
    #services {
        padding: 6rem 0;
    }

    /* Process: scale up on desktop */
    #process {
        padding: 6rem 0;
    }

    /* Larger circles on desktop — 56px instead of 48px.
       More screen real estate means we can be bolder. */
    .phase-number {
        width: 56px;
        height: 56px;
        font-size: 1.25rem;       /* 20px — slightly larger number */
    }

    /* Adjust the connecting line position for larger circles.
       56px circle → center at 27px (56/2 - 1 for line width). */
    .process-phase:not(:last-child)::after {
        left: 27px;
        top: 56px;
    }

    .phase-title {
        font-size: 1.1875rem;     /* 19px — more prominent on desktop */
    }

    .process-timeline {
        max-width: 700px;
        /* Slightly wider on desktop to use the space. */
    }

    /* Credentials: full desktop sizing */
    #credentials {
        padding: 6rem 0;
    }

    .credentials-container {
        max-width: 740px;
        gap: var(--space-xl);
        /* Wider gap (48px) between photo and text.
           Desktop screens have the space — use it
           to let the layout breathe. */
    }

    .photo-placeholder {
        width: 180px;
        height: 180px;
        /* Full size on desktop. Large enough to feel
           like a real headshot, but not so large it
           overwhelms the text beside it. */
    }

    .photo-placeholder i {
        font-size: 4.5rem;        /* 72px — scales with the larger circle */
    }

    .credentials-bio {
        font-size: var(--text-lg);
        /* 19px — matches the problem body text size.
           Larger text for the lead paragraph gives it
           the weight it deserves on bigger screens. */
    }

    /* Insights: full desktop sizing */
    #insights {
        padding: 6rem 0;
    }

    /* THE KEY CHANGE: 3 columns on desktop.
       With exactly 3 cards, this creates a single perfect row.
       repeat(3, 1fr) = "3 equal-width columns."

       This is why we didn't reuse .service-grid — that stays
       at 2 columns even on desktop. Different content, different
       layout needs. */
    .insights-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-lg);
        /* Wider gap on desktop (32px vs 24px) — same as
           .diff-grid and .service-grid at this breakpoint. */
    }

    .insight-card {
        padding: var(--space-xl);
        /* More internal padding on desktop (48px vs 32px) —
           same scaling as .diff-card and .service-card. */
    }

    /* Individual Learner: desktop sizing */
    .learner-headline {
        font-size: var(--text-section-desktop);
    }

    #individual-learner {
        padding: var(--space-2xl) 0;
        /* Slightly more breathing room on desktop (80px vs 48px)
           but still less than main sections (which use 6rem = 96px).
           Keeps the callout feeling compact and secondary. */
    }

    .learner-callout {
        max-width: 560px;
        /* Slightly wider on desktop (560 vs 520px) to
           use the space, but still narrower than main
           sections. The constraint reinforces "callout." */
    }

    .learner-body {
        font-size: var(--text-lg);
        /* 19px on desktop — matches the problem body text.
           Larger screens need larger text for comfort. */
    }

    /* Final CTA: desktop sizing */
    #final-cta {
        padding: 6rem 0;
        /* Matches the generous padding of main sections.
           The final CTA deserves full presence — it's the
           closing moment of the page. */
    }

    .cta-body p {
        font-size: var(--text-lg);
        /* 19px on desktop — same scaling as other body text. */
    }

    /* Footer: more breathing room on desktop */
    #site-footer {
        padding: var(--space-2xl) 0 var(--space-xl);
        /* 80px top, 48px bottom. More generous on desktop
           but still compact relative to main sections. */
    }

    .footer-grid {
        gap: var(--space-xl);
        padding-bottom: var(--space-xl);
    }
}


/* ============================================
   CONTACT PAGE STYLES
   ============================================
   These styles only apply to elements on contact.html.
   They live in the same stylesheet because:
   1. One CSS file = one HTTP request = faster loading
   2. Shared styles (buttons, footer) are already here
   3. The file is still small enough that splitting isn't needed

   When the site grows to 10+ pages with unique styles,
   THEN splitting into page-specific CSS files makes sense.
   For now, one file is simpler and faster.
   ============================================ */


/* ---- CONTACT HERO ----
   Compact utility hero. Much shorter than the homepage
   hero (no min-height: 100vh). Visitors already decided
   to reach out — get them to the form fast. */

#contact-hero {
    padding: var(--space-2xl) 0 var(--space-xl);
    text-align: center;

    background:
        radial-gradient(
            ellipse 70% 50% at 50% 45%,
            rgba(0, 98, 204, 0.04) 0%,
            transparent 70%
        ),
        var(--color-bg);
    /* Same subtle radial gradient as the homepage hero.
       Visual consistency across pages — visitors
       subconsciously recognize "same site, different page." */
}

.contact-headline {
    font-size: var(--text-hero-mobile);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--color-text);

    max-width: 560px;
    margin: 0 auto var(--space-md);
}

.contact-subheadline {
    font-size: var(--text-lg);
    font-weight: 400;
    line-height: 1.65;
    color: var(--color-text-muted);
    text-wrap: balance;

    max-width: 480px;
    margin: 0 auto;
}


/* ---- TWO-PATH SELECTOR ----
   Two clickable cards that let visitors self-identify.
   Clicking a card highlights it and adjusts the form. */

#path-selector {
    background-color: var(--color-white);
    padding: var(--space-xl) 0;
}

.selector-label {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text);
    text-align: center;
    margin-bottom: var(--space-md);
}

/* The two-card container.
   Flexbox (not grid) because we want the cards to be
   equal width AND wrap to column on mobile. Flexbox
   with flex: 1 on children achieves both. */
.selector-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);

    max-width: 640px;
    margin: 0 auto;
}

/* Individual Selector Card
   Styled as a button but LOOKS like a card.
   reset: remove all default button styling first,
   then apply our card styles. */
.selector-card {
    /* Reset button defaults */
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
    text-align: left;

    /* Card styling (matches .diff-card / .service-card) */
    background-color: var(--color-white);
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-lg);

    display: flex;
    align-items: center;
    gap: var(--space-md);

    transition:
        border-color var(--transition),
        background-color var(--transition),
        box-shadow var(--transition);
}

.selector-card:hover {
    border-color: rgba(0, 98, 204, 0.3);
    box-shadow: 0 4px 16px rgba(12, 20, 33, 0.06);
}

/* Active State: the SELECTED card.
   Blue border + faint blue background tint signals
   "this is your current selection." The combination
   of border color + background is stronger feedback
   than border alone. */
.selector-card--active {
    border-color: var(--color-accent);
    background-color: rgba(0, 98, 204, 0.03);
    box-shadow: 0 4px 16px rgba(0, 98, 204, 0.08);
}

.selector-card:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Selector Icon */
.selector-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;

    background: linear-gradient(
        135deg,
        rgba(58, 107, 165, 0.12) 0%,
        rgba(91, 140, 201, 0.06) 100%
    );

    display: flex;
    align-items: center;
    justify-content: center;
}

.selector-icon i {
    font-size: 1.5rem;
    color: #3a6ba5;
}

.selector-card--active .selector-icon {
    background: linear-gradient(
        135deg,
        rgba(0, 98, 204, 0.15) 0%,
        rgba(0, 98, 204, 0.08) 100%
    );
}

.selector-card--active .selector-icon i {
    color: var(--color-accent);
}

.selector-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
    margin-bottom: 0.125rem;
}

.selector-description {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}


/* ---- CONTACT FORM SECTION ---- */

#contact-form-section {
    background-color: var(--color-bg);
    padding: var(--space-2xl) 0;
}

/* Two-column layout: form (wider) + sidebar (narrow) */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
}

/* FORM STYLES */

/* Form Group: wrapper for each label + input + error.
   margin-bottom creates consistent spacing between fields. */
.form-group {
    margin-bottom: var(--space-md);
}

/* Company group hidden state.
   JavaScript adds this class when individual path is selected.
   display: none removes it completely from layout AND
   screen reader announcements. */
.form-group--hidden {
    display: none;
}

/* Labels */
.form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}

/* Required asterisk (visual only — aria-hidden in HTML) */
.required {
    color: #c44;
    /* Red asterisk — universal "required field" convention.
       Slightly muted red (not bright) to avoid feeling alarming. */
}

/* Optional label */
.optional {
    font-weight: 400;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

/* Input & Textarea shared styles
   Both use the SAME visual treatment for consistency.
   Visitors should never wonder "is this a different
   kind of field?" — they all look and behave the same. */
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    /* 12px top/bottom, 16px left/right.
       Slightly more horizontal padding for comfortable
       text entry. The cursor doesn't feel jammed against
       the border. */

    font-family: var(--font-family);
    font-size: var(--text-base);
    color: var(--color-text);
    line-height: 1.5;

    background-color: var(--color-white);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);

    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}

/* Placeholder text — muted gray, lighter than input text. */
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(85, 97, 113, 0.5);
    /* 50% opacity of our muted text color.
       Placeholders should be VISIBLE but clearly
       different from actual typed text. */
}

/* Focus State: when a field is actively being typed in.
   Blue border + subtle blue glow. This is the same
   treatment as .selector-card--active — blue means
   "currently active" throughout the site. */
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    /* Remove browser's default focus outline — we're
       replacing it with our own styled border + shadow. */

    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(0, 98, 204, 0.1);
    /* The box-shadow creates a "glow" around the field.
       3px spread, blue at 10% opacity. This is the exact
       pattern Stripe uses on their form inputs. */
}

/* Error State: red border when validation fails. */
.form-group--error input,
.form-group--error textarea {
    border-color: #c44;
    box-shadow: 0 0 0 3px rgba(204, 68, 68, 0.08);
}

/* Error Messages (hidden by default) */
.form-error {
    display: none;
    /* Hidden until JavaScript adds .form-group--error
       to the parent wrapper. */

    font-size: 0.8125rem;
    color: #c44;
    margin-top: 0.375rem;
}

/* Show error when parent has error class */
.form-group--error .form-error {
    display: block;
}

/* Textarea: prevent horizontal resizing.
   Horizontal resize breaks the form layout.
   Vertical resize is fine — let users make
   the box taller if they're writing a lot. */
.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* Submit Button */
.form-submit {
    width: 100%;
    margin-top: var(--space-sm);
}

/* Privacy Note */
.form-privacy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;

    margin-top: var(--space-md);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.form-privacy i {
    font-size: 1rem;
    color: #3d8b84;
    /* Teal shield icon — teal connotes safety/trust.
       Matches the teal from our color palette. */
}


/* ---- CONTACT SIDEBAR ---- */

/* The sidebar sticks to the top of its grid cell on
   desktop when the form is taller. position: sticky
   keeps it visible as the user scrolls through
   longer forms. */
.contact-sidebar {
    align-self: start;
    /* align-self: start prevents the sidebar from
       stretching to match the form's full height.
       It stays compact at its natural content height. */
}

/* Sidebar Card */
.sidebar-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-lg);
}

.sidebar-heading {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-lg);
}

/* Each contact item: icon + text side by side */
.sidebar-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    /* 12px gap between icon and text. Tight but
       readable — sidebar items are compact. */
}

.sidebar-item + .sidebar-item {
    margin-top: var(--space-md);
    /* Space between items, not above the first. */
}

.sidebar-item > i {
    font-size: 1.25rem;
    color: var(--color-accent);
    margin-top: 0.125rem;
    /* 2px top nudge aligns the icon visually with
       the first line of text beside it. Icons and
       text have different visual baselines — this
       small adjustment makes them feel aligned. */

    flex-shrink: 0;
}

.sidebar-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: 0.125rem;
}

.sidebar-link {
    font-size: 0.875rem;
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition);
}

.sidebar-link:hover {
    color: var(--color-accent-hover);
}

.sidebar-value {
    font-size: 0.875rem;
    color: var(--color-text);
}


/* ---- SUCCESS MESSAGE ----
   Replaces the form after successful submission.
   Centered, with a large check icon for instant
   visual confirmation. */

.form-success {
    text-align: center;
    padding: var(--space-2xl) 0;
}

.success-icon {
    margin-bottom: var(--space-md);
}

.success-icon i {
    font-size: 4rem;
    color: #3d8b84;
    /* Teal checkmark — same color as the shield icon.
       Teal = success/trust in our color system. */
}

.success-title {
    font-size: var(--text-section-mobile);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-sm);
}

.success-text {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    margin-bottom: var(--space-xl);
}


/* ---- CONTACT PAGE RESPONSIVE ---- */

/* Tablets (768px+) */
@media (min-width: 48rem) {

    .contact-headline {
        font-size: var(--text-hero-tablet);
    }

    .contact-subheadline {
        font-size: var(--text-xl);
    }

    /* Selector cards: side by side on tablet+ */
    .selector-group {
        flex-direction: row;
    }

    .selector-card {
        flex: 1;
        /* flex: 1 on both cards = equal width.
           They split the available space 50/50. */

        /* On wider screens, stack icon above text
           for a more card-like feel */
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    /* Form + sidebar: two columns */
    .contact-layout {
        grid-template-columns: 2fr 1fr;
        /* Form gets 2/3 of the width, sidebar gets 1/3.
           The form has more content and needs more room. */

        gap: var(--space-xl);
        align-items: start;
    }

    .form-submit {
        width: auto;
        /* On tablet+, button goes back to natural width
           instead of full-width. Full-width buttons feel
           right on mobile (thumb-friendly) but look odd
           on wider screens. */
    }

    .success-title {
        font-size: var(--text-section-tablet);
    }
}

/* Desktops (1024px+) */
@media (min-width: 64rem) {

    #contact-hero {
        padding: 6rem 0 var(--space-xl);
    }

    .contact-headline {
        font-size: var(--text-hero-desktop);
        max-width: 620px;
    }

    #path-selector {
        padding: var(--space-xl) 0 var(--space-2xl);
    }

    .selector-group {
        max-width: 700px;
    }

    .selector-card {
        padding: var(--space-xl);
    }

    #contact-form-section {
        padding: var(--space-2xl) 0 6rem;
    }

    .contact-layout {
        gap: var(--space-2xl);
    }

    /* Sticky sidebar: stays visible while scrolling
       through the form on tall screens. */
    .contact-sidebar {
        position: sticky;
        top: var(--space-lg);
        /* Sticks 32px from the top of the viewport.
           As the user scrolls past the form fields,
           the sidebar stays in view — always accessible. */
    }

    .sidebar-card {
        padding: var(--space-xl);
    }

    .success-title {
        font-size: var(--text-section-desktop);
    }
}


/* ============================================
   SERVICES PAGE STYLES
   ============================================
   Detailed service pages with two-column content
   layouts. Each service gets a full-width section
   with: header (icon + title + intro) on top, then
   a two-column grid (topics list + sidebar info).

   Alternating backgrounds (white/gray) and reversed
   column order on even services create visual rhythm
   across 4 similarly-structured sections.
   ============================================ */


/* ---- SERVICES HERO ----
   Same compact utility hero pattern as the contact page.
   Visitors already know what SCMa2z does — get them to
   the service details quickly. */

#services-hero {
    padding: var(--space-2xl) 0 var(--space-xl);
    text-align: center;

    background:
        radial-gradient(
            ellipse 70% 50% at 50% 45%,
            rgba(0, 98, 204, 0.04) 0%,
            transparent 70%
        ),
        var(--color-bg);
    /* Same subtle radial gradient as homepage and contact
       heroes. Visual consistency across pages. */
}

.services-headline {
    font-size: var(--text-hero-mobile);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--color-text);

    max-width: 620px;
    margin: 0 auto var(--space-md);
}

.services-subheadline {
    font-size: var(--text-lg);
    font-weight: 400;
    line-height: 1.65;
    color: var(--color-text-muted);
    text-wrap: balance;

    max-width: 520px;
    margin: 0 auto;
}


/* ---- SERVICE DETAIL SECTIONS ----
   Each of the 4 service areas gets a full-width section.
   Default background is white. The --alt modifier
   switches to gray for the alternating pattern. */

.service-detail {
    background-color: var(--color-white);
    padding: var(--space-2xl) 0;
}

.service-detail--alt {
    background-color: var(--color-bg);
    /* Gray background for even-numbered services.
       white (SAP) → gray (Ariba) → white (Process) → gray (Go-Live) */
}


/* ---- SERVICE HEADER ----
   Centered block: icon + headline + intro paragraph.
   Sits above the two-column content grid. Centers the
   reader's focus before they scan the details below. */

.service-header {
    text-align: center;
    max-width: 660px;
    margin: 0 auto var(--space-xl);
    /* Centered with bottom margin to separate from grid. */
}

.service-header .diff-icon {
    margin: 0 auto var(--space-md);
    /* Centers the icon horizontally (auto left/right margins
       on a flex container with a set width = centered).
       Bottom margin separates icon from headline. */
}

.service-header .section-headline {
    margin-bottom: var(--space-md);
}

/* Intro paragraph under the headline.
   Muted text, balanced wrapping, comfortable line-height
   for the 2-3 sentence description. */
.service-detail-intro {
    font-size: var(--text-base);
    line-height: 1.75;
    color: var(--color-text-muted);
    text-wrap: balance;
}


/* ---- TWO-COLUMN CONTENT GRID ----
   Topics list (wider) + sidebar info (narrower).

   Mobile: single column, topics stacked above info.
   Tablet+: side-by-side with 3fr + 2fr proportions.

   The --reversed modifier swaps column order on desktop
   using CSS Grid's "order" property — no need to change
   the HTML structure. On mobile (single column), order
   has no visual effect. */

.service-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Mobile: single column, everything stacks. */

    gap: var(--space-xl);

    max-width: 900px;
    margin: 0 auto;
    /* Narrower than .section-content max-width (1088px).
       Two-column text content looks better at ~900px.
       Too wide and the line lengths become uncomfortable. */
}


/* ---- TOPICS COLUMN (LEFT) ----
   "What You'll Learn" — the primary content column.
   Uses a styled list with bold lead-ins per item. */

.service-topics-heading {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    /* Same style as footer headings — uppercase label
       that categorizes the content below. Small and
       structural, not attention-grabbing. */

    margin-bottom: var(--space-md);
}

.service-topics-list {
    list-style: none;
    /* Custom bullets via ::before, same as .phase-details. */
}

.service-topics-list li {
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--color-text-muted);
    padding-left: 1.5rem;
    /* 24px left padding creates space for custom bullet. */

    position: relative;
}

.service-topics-list li + li {
    margin-top: var(--space-sm);
    /* 16px between items. More generous than .phase-details
       (which uses tighter spacing) because each item here
       has more text and a bold lead-in. */
}

/* Custom bullet: small accent-colored dots.
   Matches the service's icon color via the parent section,
   but we use the accent blue as default since it's the
   brand color and works for all services. */
.service-topics-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6rem;
    /* Vertically aligned with the first line of text. */

    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-accent);
    opacity: 0.4;
    /* 40% opacity keeps bullets present but not distracting.
       The bold lead-in text is the real visual anchor. */
}

/* Bold lead-in text for each topic.
   "Purchase Orders" — dark text that contrasts with the
   muted description text after the em dash. This creates
   a scannable pattern: visitors can read just the bold
   words to get the gist of what's covered. */
.service-topics-list strong {
    color: var(--color-text);
    font-weight: 600;
}


/* ---- SIDEBAR INFO COLUMN (RIGHT) ----
   "Who It's For" + "Key Outcomes" + "Delivery"
   Three stacked info blocks with consistent styling. */

.service-sidebar-info {
    /* On mobile, this appears below the topics list.
       On desktop, it sits beside it in the grid. */
}

/* Each info block: heading + list or paragraph.
   Background card treatment groups the content visually
   and separates it from the topics column. */
.service-info-block {
    background-color: rgba(0, 98, 204, 0.02);
    /* Very faint blue tint — barely visible but creates
       a subtle "different zone" feeling compared to the
       white/gray section background. */

    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-md);
}

.service-info-block + .service-info-block {
    margin-top: var(--space-sm);
    /* 16px between stacked info blocks. */
}

/* Info Block Heading: same uppercase label style */
.service-info-heading {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-accent);
    /* Blue label — ties to the brand accent and
       differentiates from the gray .service-topics-heading.
       The color difference signals "this is different content." */

    margin-bottom: var(--space-xs);
}

/* Info Block List: compact bullet list */
.service-info-list {
    list-style: none;
}

.service-info-list li {
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--color-text);
    padding-left: 1rem;
    position: relative;
}

.service-info-list li + li {
    margin-top: 0.25rem;
    /* Tight spacing — these are short one-liners. */
}

/* Tiny custom bullets for info lists */
.service-info-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55rem;

    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--color-border);
    /* Gray dots — muted, structural. The text carries
       the meaning, the dots just provide list structure. */
}

/* Info Block Text (for "Delivery" which uses a paragraph
   instead of a bullet list) */
.service-info-text {
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--color-text);
}


/* ---- SERVICES FINAL CTA ----
   Reuses the existing .cta-block styles from the homepage.
   Just needs its own background. */

#services-cta {
    background-color: var(--color-white);
    padding: var(--space-2xl) 0;
}


/* ---- SERVICES PAGE RESPONSIVE ---- */

/* Tablets (768px+) */
@media (min-width: 48rem) {

    .services-headline {
        font-size: var(--text-hero-tablet);
    }

    .services-subheadline {
        font-size: var(--text-xl);
    }

    /* Two-column layout activates on tablet.
       3fr for topics (wider), 2fr for sidebar info (narrower).
       This ratio gives topics ~60% width — enough room for
       the longer description text without awkward wrapping. */
    .service-detail-grid {
        grid-template-columns: 3fr 2fr;
        gap: var(--space-xl);
        align-items: start;
        /* align-items: start prevents the shorter sidebar
           from stretching to match the taller topics column. */
    }

    /* REVERSED LAYOUT for even-numbered services.
       CSS Grid "order" property controls visual order
       without changing the HTML source order.

       Default: topics (order: 0) | sidebar (order: 0)
       Grid places them left-to-right in source order.

       Reversed: topics gets order: 2 → moves to the right.
       Sidebar stays at order: 0 → moves to the left.

       WHY not just swap the HTML?
       Because mobile layout should always be topics-first
       (the primary content). order only affects the VISUAL
       order; screen readers still read source order. */
    .service-detail-grid--reversed .service-topics {
        order: 2;
    }

    /* When reversed, adjust the grid proportions.
       Sidebar on left gets 2fr, topics on right gets 3fr.
       Same ratio, just flipped. */
    .service-detail-grid--reversed {
        grid-template-columns: 2fr 3fr;
    }
}

/* Desktops (1024px+) */
@media (min-width: 64rem) {

    #services-hero {
        padding: 6rem 0 var(--space-xl);
    }

    .services-headline {
        font-size: var(--text-hero-desktop);
        max-width: 700px;
    }

    .service-detail {
        padding: 6rem 0;
    }

    .service-detail-grid {
        max-width: 960px;
        gap: var(--space-2xl);
        /* Wider gap (80px) between columns on desktop.
           More breathing room between the two content areas. */
    }

    .service-detail-intro {
        font-size: var(--text-lg);
    }

    .service-topics-list li {
        font-size: var(--text-base);
        /* Slightly larger on desktop for comfort. */
    }

    .service-info-block {
        padding: var(--space-md) var(--space-lg);
        /* More horizontal padding in info blocks on desktop. */
    }

    #services-cta {
        padding: 6rem 0;
    }
}


/* ============================================
   ABOUT PAGE STYLES
   ============================================
   Personal credibility page with:
   - Compact hero
   - Two-column bio (photo + narrative)
   - Approach philosophy cards
   - Expertise scanner cards
   - Single-button CTA

   Reuses existing patterns (.diff-card, .diff-icon,
   .cta-block) where possible and adds about-specific
   styles for the bio layout and expertise cards.
   ============================================ */


/* ---- ABOUT HERO ----
   Same compact utility hero as services and contact. */

#about-hero {
    padding: var(--space-2xl) 0 var(--space-xl);
    text-align: center;

    background:
        radial-gradient(
            ellipse 70% 50% at 50% 45%,
            rgba(0, 98, 204, 0.04) 0%,
            transparent 70%
        ),
        var(--color-bg);
}

.about-headline {
    font-size: var(--text-hero-mobile);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--color-text);

    max-width: 560px;
    margin: 0 auto var(--space-md);
}

.about-subheadline {
    font-size: var(--text-lg);
    font-weight: 400;
    line-height: 1.65;
    color: var(--color-text-muted);
    text-wrap: balance;

    max-width: 520px;
    margin: 0 auto;
}


/* ---- BACKGROUND SECTION ----
   Two-column bio layout: photo + narrative.
   Expanded version of the homepage credentials
   section with more text and a larger photo. */

#about-background {
    background-color: var(--color-white);
    padding: var(--space-2xl) 0;
}

/* Bio Layout Container
   Mobile: stacks vertically (photo above narrative).
   Tablet+: side-by-side via flexbox.
   Same pattern as .credentials-container on homepage
   but wider (780px max) to accommodate more text. */
.about-bio-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);

    max-width: 780px;
    margin: 0 auto;
}

/* Photo Column */
.about-photo {
    flex-shrink: 0;
    text-align: center;
}

/* Photo Placeholder
   Larger than the homepage version (180px vs 140px).
   This is the main "meet the person" moment — it
   deserves more visual weight. */
.about-photo-placeholder {
    width: 180px;
    height: 180px;
    border-radius: 50%;

    border: 2px dashed var(--color-border);

    background: linear-gradient(
        135deg,
        rgba(58, 107, 165, 0.06) 0%,
        rgba(91, 140, 201, 0.03) 100%
    );

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto var(--space-md);
}

.about-photo-placeholder i {
    font-size: 4.5rem;
    color: var(--color-border);
}

/* FUTURE: Real photo styles.
   .about-photo-img {
       width: 180px;
       height: 180px;
       border-radius: 50%;
       object-fit: cover;
       margin: 0 auto var(--space-md);
       display: block;
   } */

/* Name and Title below photo */
.about-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.02em;
}

.about-title {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}

/* Narrative Column */
.about-narrative {
    text-align: center;
    /* Centered on mobile to match centered photo above.
       Switches to left-aligned on tablet+. */
}

/* Section Heading within the narrative.
   Not using .section-headline because this heading
   is smaller and left-aligned within the bio block,
   not a full-width centered section title. */
.about-section-heading {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    /* Same uppercase label style as footer headings
       and service topic headings. Consistent "label"
       pattern across the site. */

    margin-bottom: var(--space-md);
}

/* Bio Paragraphs */
.about-text {
    font-size: var(--text-base);
    line-height: 1.75;
    color: var(--color-text-muted);
}

.about-text + .about-text {
    margin-top: var(--space-md);
    /* 24px between paragraphs. Slightly more generous
       than .problem-body (16px) because this narrative
       has more paragraphs and needs breathing room
       to not feel like a wall of text. */
}


/* ---- APPROACH SECTION ----
   Reuses .diff-card and .diff-grid patterns from homepage.
   Only needs custom headline/intro styling and the grid
   class reference. The cards themselves use existing styles. */

#about-approach {
    background-color: var(--color-bg);
    padding: var(--space-2xl) 0;
}

.about-approach-headline {
    text-align: center;
    max-width: 620px;
    margin: 0 auto var(--space-sm);
}

.about-approach-intro {
    font-size: var(--text-base);
    line-height: 1.75;
    color: var(--color-text-muted);
    text-align: center;
    text-wrap: balance;

    max-width: 560px;
    margin: 0 auto var(--space-xl);
}

/* The card grid reuses .diff-grid and .diff-card styles
   from the homepage differentiators section. The grid class
   is applied directly in HTML as "about-approach-grid"
   so we can scope any future overrides without affecting
   the homepage. For now, it mirrors .diff-grid exactly. */
.about-approach-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}


/* ---- RESULTS SECTION ----
   Measurable outcomes displayed as a clean list with
   teal checkmark icons. Teal = trust/success in our
   color system (same color as the shield icon on the
   contact form and the success checkmark).

   Centered and narrow — this is a "proof" section,
   not a content-heavy section. Short, punchy, scannable.

   Background: white (between approach gray and expertise white,
   creating: gray approach → white results → white expertise.
   The results section transitions the alternating pattern
   while visually grouping with expertise as a "credibility"
   block.) */

#about-results {
    background-color: var(--color-white);
    padding: var(--space-2xl) 0;
}

.about-results-headline {
    text-align: center;
    max-width: 620px;
    margin: 0 auto var(--space-sm);
}

.about-results-intro {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    text-align: center;
    margin-bottom: var(--space-xl);
}

/* Results List: no default bullets, centered narrow column */
.results-list {
    list-style: none;
    max-width: 560px;
    margin: 0 auto;
}

/* Each result item: checkmark icon + text side by side */
.results-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.results-item + .results-item {
    margin-top: var(--space-md);
    /* 24px between items — generous spacing so each
       result reads as a distinct "win." */
}

/* Checkmark Icon
   Teal circle check — same color as the success icon
   on the contact form. Teal signals "verified, achieved,
   trustworthy" across the site. */
.results-icon {
    flex-shrink: 0;
    margin-top: 0.125rem;
    /* 2px nudge aligns icon center with text baseline. */
}

.results-icon i {
    font-size: 1.375rem;
    color: #3d8b84;
    /* Teal — matches success/trust color throughout site. */
}

/* Result Text */
.results-text {
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--color-text-muted);
}

.results-text strong {
    color: var(--color-text);
    font-weight: 600;
    /* Bold key metrics in dark text so they pop against
       the muted descriptions. Visitors scanning quickly
       see: "60-80% reduction", "independently within days",
       "Faster PO cycle times", "Confident super-users". */
}

/* Closing Statement
   A single punchy sentence that anchors the section.
   Slightly different treatment: italic + accent border
   (same pattern as .phase-outcome on the homepage timeline)
   to make it feel like a personal statement/promise. */
.results-closing {
    max-width: 560px;
    margin: var(--space-xl) auto 0;

    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--color-text);
    font-style: italic;

    border-left: 3px solid var(--color-accent);
    padding-left: var(--space-sm);
}


/* ---- EXPERTISE SECTION ----
   Scannable expertise cards with colored left borders.
   Similar to the insight cards' left-border pattern
   but simpler — no badges, no footers. Just name +
   brief description.

   This section is a "credibility scanner": visitors
   glance at it to confirm expertise depth, not to
   read in detail. Design supports fast scanning. */

#about-expertise {
    background-color: var(--color-bg);
    padding: var(--space-2xl) 0;
}

.about-expertise-headline {
    text-align: center;
    max-width: 620px;
    margin: 0 auto var(--space-sm);
}

.about-expertise-intro {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    text-align: center;
    margin-bottom: var(--space-xl);
}

.expertise-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);

    max-width: 800px;
    margin: 0 auto;
}

/* Expertise Card
   Left-border accent (same as .insight-card) with
   clean interior: just a name + description.
   Uses flexbox column so content stacks neatly. */
.expertise-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-md) var(--space-lg);

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}

.expertise-card:hover {
    box-shadow: 0 4px 16px rgba(12, 20, 33, 0.06);
    transform: translateY(-2px);
}

/* Color Modifiers: colored left border per card.
   Reuses the exact same color values as .insight-card
   modifiers for palette consistency. */
.expertise-card--blue {
    border-left: 3px solid #3a6ba5;
}

.expertise-card--teal {
    border-left: 3px solid #3d8b84;
}

.expertise-card--purple {
    border-left: 3px solid #5b5fc7;
}

.expertise-card--cyan {
    border-left: 3px solid #4a8ba8;
}

.expertise-name {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
    margin-bottom: 0.25rem;
}

.expertise-desc {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--color-text-muted);
}


/* ---- ABOUT FINAL CTA ----
   Reuses existing .cta-block styles. Just needs
   its own section background. */

#about-cta {
    background-color: var(--color-bg);
    padding: var(--space-2xl) 0;
}


/* ---- ABOUT PAGE RESPONSIVE ---- */

/* Tablets (768px+) */
@media (min-width: 48rem) {

    .about-headline {
        font-size: var(--text-hero-tablet);
    }

    .about-subheadline {
        font-size: var(--text-xl);
    }

    /* Bio layout: switch from stacked to side-by-side.
       Photo on left, narrative on right. */
    .about-bio-layout {
        flex-direction: row;
        align-items: flex-start;
        /* flex-start keeps the photo pinned to the top
           of the narrative text, not vertically centered
           (which would look odd with 4 paragraphs). */
    }

    .about-narrative {
        text-align: left;
        /* Left-aligned text beside the photo.
           Centered text next to a side image looks odd. */
    }

    .about-photo-placeholder {
        width: 200px;
        height: 200px;
    }

    .about-photo-placeholder i {
        font-size: 5rem;
    }

    /* Approach cards: 2x2 grid on tablet */
    .about-approach-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Expertise: 2 columns on tablet */
    .expertise-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktops (1024px+) */
@media (min-width: 64rem) {

    #about-hero {
        padding: 6rem 0 var(--space-xl);
    }

    .about-headline {
        font-size: var(--text-hero-desktop);
        max-width: 620px;
    }

    #about-background {
        padding: 6rem 0;
    }

    .about-bio-layout {
        max-width: 840px;
        gap: var(--space-2xl);
    }

    .about-photo-placeholder {
        width: 220px;
        height: 220px;
    }

    .about-photo-placeholder i {
        font-size: 5.5rem;
    }

    .about-text {
        font-size: var(--text-lg);
    }

    #about-approach {
        padding: 6rem 0;
    }

    .about-approach-intro {
        font-size: var(--text-lg);
    }

    .about-approach-grid {
        gap: var(--space-lg);
    }

    .about-approach-grid .diff-card {
        padding: var(--space-xl);
    }

    #about-results {
        padding: 6rem 0;
    }

    .about-results-intro {
        font-size: var(--text-lg);
    }

    .results-text {
        font-size: var(--text-lg);
    }

    .results-closing {
        font-size: var(--text-lg);
    }

    #about-expertise {
        padding: 6rem 0;
    }

    .expertise-card {
        padding: var(--space-lg) var(--space-xl);
    }

    #about-cta {
        padding: 6rem 0;
    }
}


/* ============================================
   BLOG PAGE STYLES
   ============================================
   The blog listing page reuses .insight-card and
   .insights-grid from the homepage. Only the hero
   and a few blog-specific elements need new styles.
   ============================================ */


/* ---- BLOG HERO ---- */

#blog-hero {
    padding: var(--space-2xl) 0 var(--space-xl);
    text-align: center;

    background:
        radial-gradient(
            ellipse 70% 50% at 50% 45%,
            rgba(0, 98, 204, 0.04) 0%,
            transparent 70%
        ),
        var(--color-bg);
}

.blog-headline {
    font-size: var(--text-hero-mobile);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--color-text);

    max-width: 560px;
    margin: 0 auto var(--space-md);
}

.blog-subheadline {
    font-size: var(--text-lg);
    font-weight: 400;
    line-height: 1.65;
    color: var(--color-text-muted);
    text-wrap: balance;

    max-width: 480px;
    margin: 0 auto;
}


/* ---- BLOG LISTING ---- */

#blog-listing {
    background-color: var(--color-white);
    padding: var(--space-2xl) 0;
}

/* Post Count: small metadata line above the grid.
   Sets expectations — "here's how much content is here."
   Same uppercase label style used for footer headings,
   service topic headings, etc. */
.blog-post-count {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: var(--space-lg);
}

/* Blog cards use <h2> instead of <h3> since they're
   the primary content on this page (not nested inside
   a section with its own h2 like on the homepage).
   The styles are inherited from .insight-title. */


/* ---- BLOG PAGE RESPONSIVE ---- */

@media (min-width: 48rem) {

    .blog-headline {
        font-size: var(--text-hero-tablet);
    }

    .blog-subheadline {
        font-size: var(--text-xl);
    }
}

@media (min-width: 64rem) {

    #blog-hero {
        padding: 6rem 0 var(--space-xl);
    }

    .blog-headline {
        font-size: var(--text-hero-desktop);
        max-width: 620px;
    }

    #blog-listing {
        padding: 6rem 0;
    }
}


/* ============================================
   BLOG POST (ARTICLE) STYLES
   ============================================
   Individual article pages. The design follows
   editorial conventions from Medium, Substack, and
   longform journalism sites:
   - Narrow content column (680px) for comfortable reading
   - Generous line-height and paragraph spacing
   - Clean typographic hierarchy (h1 > h2 > p)
   - Blockquotes styled as callout boxes

   The .post-body class styles ALL child elements
   via descendant selectors (e.g., .post-body p).
   This means article content can be written in plain
   HTML without adding CSS classes to every element.
   ============================================ */


/* ---- ARTICLE HEADER ---- */

.post-header {
    padding: var(--space-2xl) 0 var(--space-xl);

    background:
        radial-gradient(
            ellipse 70% 50% at 50% 45%,
            rgba(0, 98, 204, 0.04) 0%,
            transparent 70%
        ),
        var(--color-bg);
}

.post-header .section-content {
    max-width: 680px;
    /* Narrower than the site default (1088px).
       Article content should be narrow for comfortable
       reading — 680px gives us ~65 characters per line
       at our body font size. */
}

/* Back Link: returns visitor to blog listing.
   Small, muted, left-aligned — a navigation aid,
   not a visual feature. */
.post-back-link {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;

    margin-bottom: var(--space-lg);

    transition: color var(--transition);
}

.post-back-link:hover {
    color: var(--color-accent);
}

/* Article Title: the largest text on the page.
   Uses the section headline size (not hero size)
   because articles need to feel like content,
   not marketing. Hero-sized titles feel like
   landing pages; section-sized titles feel editorial. */
.post-title {
    font-size: var(--text-section-mobile);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--color-text);

    margin-top: var(--space-sm);
    margin-bottom: var(--space-md);
}

/* Article Metadata: date + read time */
.post-meta {
    font-size: 0.875rem;
    color: var(--color-text-muted);

    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.post-meta-divider {
    color: var(--color-border);
}


/* ---- ARTICLE BODY ----
   Styles for ALL content elements within the article.
   Uses descendant selectors so article HTML stays clean.

   TYPOGRAPHY CHOICES:
   - Body text: 16px on mobile, 18-19px on desktop
   - Line-height: 1.8 (very generous for long reading)
   - Paragraph spacing: 24px (full breath between thoughts)
   - Heading spacing: extra top margin to separate sections */

.post-body {
    background-color: var(--color-white);
    padding: var(--space-xl) 0;
}

.post-body .section-content {
    max-width: 680px;
}

/* Paragraphs */
.post-body p {
    font-size: var(--text-base);
    line-height: 1.8;
    color: var(--color-text-muted);
}

.post-body p + p {
    margin-top: var(--space-md);
}

/* Section Headings (h2) within the article.
   Each "Mistake #" gets an h2. Large top margin
   creates clear visual breaks between sections —
   readers can see where one section ends and the
   next begins even while scrolling quickly. */
.post-body h2 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-text);

    margin-top: var(--space-2xl);
    margin-bottom: var(--space-md);
}

/* First paragraph after h2 gets no top margin
   (the h2's bottom margin is sufficient). But we
   need to override the p + p margin for the FIRST
   paragraph after a heading. */
.post-body h2 + p {
    margin-top: 0;
}

/* Blockquotes: styled as callout boxes.
   Used for "What to do instead:" actionable advice.
   Left border accent (same pattern as .phase-outcome
   on the homepage) with a subtle background tint. */
.post-body blockquote {
    margin: var(--space-lg) 0;
    padding: var(--space-md) var(--space-lg);

    border-left: 3px solid var(--color-accent);
    background-color: rgba(0, 98, 204, 0.03);
    border-radius: 0 var(--radius) var(--radius) 0;
    /* Rounded corners on right side only. Left side
       stays sharp because the border-left acts as
       the visual edge. */
}

.post-body blockquote p {
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--color-text);
    /* Slightly darker text in blockquotes — these
       are actionable advice and deserve more weight. */
}

.post-body blockquote strong {
    color: var(--color-accent);
    /* Blue "What to do instead:" label ties to the
       blue left border. Same pattern as .phase-outcome
       strong on the homepage. */
}


/* ---- AUTHOR SECTION ---- */

#post-author {
    background-color: var(--color-white);
    padding: 0 0 var(--space-2xl);
}

/* Author Card: compact bio block.
   Photo on left, info on right. Same pattern as
   the homepage credentials but smaller and contained
   in a bordered card. */
.author-card {
    max-width: 680px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-md);

    border-top: 1px solid var(--color-border);
    padding-top: var(--space-xl);
}

/* Author Photo Placeholder */
.author-photo-placeholder {
    width: 72px;
    height: 72px;
    border-radius: 50%;

    border: 2px dashed var(--color-border);

    background: linear-gradient(
        135deg,
        rgba(58, 107, 165, 0.06) 0%,
        rgba(91, 140, 201, 0.03) 100%
    );

    display: flex;
    align-items: center;
    justify-content: center;
}

.author-photo-placeholder i {
    font-size: 2rem;
    color: var(--color-border);
}

.author-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: 0.25rem;
}

.author-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}

.author-bio {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--color-text-muted);
    max-width: 420px;
}

.author-link {
    display: inline-block;
    margin-top: var(--space-sm);

    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;

    transition: color var(--transition);
}

.author-link:hover {
    color: var(--color-accent-hover);
}


/* ---- RELATED POSTS ---- */

#related-posts {
    background-color: var(--color-bg);
    padding: var(--space-2xl) 0;
}

.related-heading {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);

    margin-bottom: var(--space-lg);
}

/* Related Grid: 2 cards side by side on tablet+.
   Only 2 cards (not 3) because the current article
   is excluded from recommendations. */
.related-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}


/* ---- POST CTA ---- */

#post-cta {
    background-color: var(--color-white);
    padding: var(--space-2xl) 0;
}


/* ---- BLOG POST RESPONSIVE ---- */

@media (min-width: 48rem) {

    .post-title {
        font-size: var(--text-section-tablet);
    }

    /* Author card: horizontal on tablet */
    .author-card {
        flex-direction: row;
        text-align: left;
        align-items: flex-start;
    }

    /* Related posts: 2 columns on tablet */
    .related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 64rem) {

    .post-header {
        padding: 6rem 0 var(--space-xl);
    }

    .post-title {
        font-size: var(--text-section-desktop);
    }

    .post-body {
        padding: var(--space-2xl) 0;
    }

    .post-body p {
        font-size: var(--text-lg);
    }

    .post-body h2 {
        font-size: 1.5rem;
    }

    .post-body blockquote p {
        font-size: var(--text-base);
    }

    .related-grid {
        gap: var(--space-lg);
    }

    .related-grid .insight-card {
        padding: var(--space-xl);
    }

    #related-posts {
        padding: 6rem 0;
    }

    #post-cta {
        padding: 6rem 0;
    }
}


/* ============================================
   SITE NAVIGATION
   ============================================
   Ultra-minimal glassmorphism nav bar.
   Inspired by Linear.app, Stripe, and Vercel.

   GLASSMORPHISM: The nav background is semi-transparent
   with a backdrop-filter blur. Content behind the nav
   shows through as a frosted blur — this creates depth
   without adding visual weight. The nav feels like it
   floats above the page.

   SCROLL BEHAVIOR: At the top of the page, the nav is
   nearly invisible (low opacity bg). When scrolled, it
   becomes slightly more opaque — the .nav--scrolled class
   is added by JavaScript.

   MOBILE: A sliding drawer from the right replaces the
   typical hamburger dropdown. The toggle uses two thin
   lines (not three) that morph to an X. Links stagger
   in with cascading animation for a delightful feel.

   z-index layering:
   Nav bar: 1000
   Overlay: 998
   Drawer:  999
   ============================================ */


/* ---- NAV BAR ---- */

#site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;

    /* GLASSMORPHISM
       Semi-transparent background + backdrop blur.
       The content behind shows through as a frosted blur.

       At rest (top of page): very transparent (70%).
       When scrolled: more opaque (92%) via .nav--scrolled.

       -webkit-backdrop-filter is needed for Safari. */
    background: rgba(248, 249, 251, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    /* Ultra-thin bottom border — barely visible.
       Uses white-ish transparency instead of gray
       so it works on all background colors. */
    border-bottom: 1px solid rgba(216, 220, 227, 0.4);

    transition:
        background-color 0.4s ease,
        border-color 0.4s ease;
    /* Slow transition (0.4s) for the scroll state change.
       This makes the glassmorphism intensify gradually
       as you scroll — feels organic, not abrupt. */
}

/* Scrolled State: more opaque, more visible border */
#site-nav.nav--scrolled {
    background: rgba(248, 249, 251, 0.92);
    border-bottom-color: rgba(216, 220, 227, 0.7);
}

/* Inner Container: controls max-width and layout */
.nav-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-md);

    display: flex;
    align-items: center;
    justify-content: space-between;

    height: 56px;
    /* Fixed height instead of padding. This ensures
       the nav is always exactly 56px tall — predictable
       for scroll offset calculations. Thin but functional.
       Linear uses ~52px, Stripe ~60px. */
}


/* ---- BRAND ---- */

.nav-brand {
    display: flex;
    align-items: center;
    text-decoration: none;

    transition: opacity var(--transition);
}

.nav-brand:hover {
    opacity: 0.7;
    /* Subtle opacity fade — more refined than
       a color change. Linear uses this pattern. */
}

.nav-logo-img {
    height: 24px;
    width: auto;
    display: block;
}


/* ---- DESKTOP NAV LINKS ---- */

.nav-links {
    display: none;
    /* Hidden on mobile. Shown on tablet+ via media query. */

    align-items: center;
    gap: var(--space-lg);
    /* 32px between links — generous spacing is key
       to the .io minimal aesthetic. Cramped links
       feel cheap; generous spacing feels intentional. */
}

.nav-link {
    position: relative;

    font-size: 0.8125rem;
    /* 13px — deliberately small. Sophisticated navs
       use small type. Big nav links feel like templates.
       Small, well-spaced links feel designed.
       Linear uses ~13px, Vercel uses ~14px. */

    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    letter-spacing: 0.01em;

    padding: 0.25rem 0;
    /* Tiny vertical padding adds a bit of click area
       without affecting visual size. */

    transition: color 0.3s ease;
}

.nav-link:hover {
    color: var(--color-text);
}

/* Active Page: full dark text (not muted) */
.nav-link[aria-current="page"] {
    color: var(--color-text);
}

/* ANIMATED UNDERLINE
   A thin line that slides in from the left on hover
   and slides out to the right when the cursor leaves.
   This "draw and erase" animation is the signature
   micro-interaction of premium navs.

   HOW IT WORKS:
   1. ::after creates a thin line positioned below the text
   2. Default: scaleX(0) hides it, origin at right edge
   3. Hover: scaleX(1) shows it, origin at left edge
   4. The origin FLIP is what creates the directional effect:
      - Entering: line grows from left → right (origin: left)
      - Leaving: line shrinks from left → right (origin: right)

   CUBIC-BEZIER: custom easing for a snappier feel.
   (0.4, 0, 0.2, 1) is close to Material Design's
   "standard" easing — fast start, smooth finish. */

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1.5px;

    background-color: var(--color-accent);

    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* Active Page Underline: always visible.
   Same line, but persistent instead of animated. */
.nav-link[aria-current="page"]::after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* CONTACT CTA LINK
   Subtle pill shape — barely differentiated from
   regular links. Not a loud button, just a hint of
   "this one's different." Thin border + slight padding.
   Vercel and Linear both use this understated CTA pattern
   in their navs. */
.nav-link--cta {
    color: var(--color-text);
    font-weight: 600;

    border: 1.5px solid var(--color-border);
    border-radius: 100px;
    /* 100px radius = full pill shape on any size. */

    padding: 0.375rem 1rem;
    /* 6px top/bottom, 16px left/right.
       Just enough to create a pill without feeling bulky. */

    transition:
        color 0.3s ease,
        border-color 0.3s ease,
        background-color 0.3s ease;
}

.nav-link--cta:hover {
    border-color: var(--color-text);
    background-color: rgba(12, 20, 33, 0.03);
}

/* Remove the underline animation on the CTA pill —
   it has its own border treatment instead. */
.nav-link--cta::after {
    display: none;
}


/* ---- MOBILE TOGGLE ---- */

/* Two-line toggle — NOT a hamburger.
   Two thin horizontal lines are more minimal than three.
   They morph to an X when the drawer is open.

   WHY NOT a hamburger?
   Three lines are generic. Two lines feel intentional
   and distinctive — the visitor notices it's different.
   The morphing animation (parallel → X) is also cleaner
   with two lines than three. */

.nav-toggle {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* flex-end aligns lines to the right edge.
       The second line is shorter, creating an asymmetric
       stack that looks more designed than uniform lines. */

    gap: 5px;

    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    /* Padding extends the touch target without making
       the visual element larger. 8px padding on a ~20px
       icon = ~36px touch target (close to the 44px
       recommended minimum). */

    -webkit-tap-highlight-color: transparent;
    /* Removes the blue flash on tap in mobile Safari. */
}

.nav-toggle-line {
    display: block;
    height: 1.5px;
    background-color: var(--color-text);
    border-radius: 1px;

    transition:
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.35s ease;
}

/* First line: full width */
.nav-toggle-line:first-child {
    width: 20px;
}

/* Second line: shorter — asymmetric for visual interest.
   This offset makes the icon feel designed rather than
   just "two lines." */
.nav-toggle-line:last-child {
    width: 14px;
}

/* MORPH TO X
   When drawer opens, both lines become the same width
   and rotate to form an X. The translateY values are
   calculated from the gap and line height:
   gap=5px, line-height=1.5px
   Center-to-center distance = 5 + 1.5 = 6.5px
   Each line moves half: 3.25px */
.nav-toggle--active .nav-toggle-line:first-child {
    width: 20px;
    transform: translateY(3.25px) rotate(45deg);
}

.nav-toggle--active .nav-toggle-line:last-child {
    width: 20px;
    transform: translateY(-3.25px) rotate(-45deg);
}


/* ---- MOBILE OVERLAY ---- */

/* Semi-transparent dark backdrop behind the drawer.
   Clicking it closes the drawer. Fades in/out. */
.nav-overlay {
    position: fixed;
    inset: 0;
    /* inset: 0 is shorthand for top/right/bottom/left: 0.
       Covers the entire viewport. */

    background-color: rgba(12, 20, 33, 0.4);
    z-index: 998;

    opacity: 0;
    visibility: hidden;
    /* Both opacity AND visibility are needed.
       opacity: 0 makes it invisible.
       visibility: hidden removes it from click events.
       Together they allow a smooth fade animation. */

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}

.nav-overlay--visible {
    opacity: 1;
    visibility: visible;
}


/* ---- MOBILE DRAWER ---- */

/* Slide-in panel from the right edge.
   Glassmorphism treatment matches the nav bar. */
.nav-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    /* 280px or 85% of viewport — whichever is smaller.
       85vw prevents the drawer from covering the entire
       screen on small phones, leaving a visible edge of
       the overlay that invites dismissal. */

    z-index: 999;

    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    /* Subtle left shadow for depth */
    box-shadow: -8px 0 32px rgba(12, 20, 33, 0.08);

    /* Slide animation */
    transform: translateX(100%);
    /* translateX(100%) = moved fully off-screen to the right.
       When open, transitions to translateX(0) = natural position. */

    visibility: hidden;

    transition:
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.4s ease;

    /* Internal layout */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Centers the links vertically within the drawer.
       This feels more intentional than top-aligned —
       the links float in the middle of the panel. */

    padding: var(--space-2xl) var(--space-xl);
}

.nav-drawer--open {
    transform: translateX(0);
    visibility: visible;
}


/* ---- DRAWER LINKS ---- */

.nav-drawer-links {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    /* Very tight gap — the links themselves have
       generous padding for touch targets. */
}

.nav-drawer-link {
    font-size: 1.125rem;
    /* 18px — larger than desktop nav links for
       comfortable mobile tapping. */

    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;

    padding: 0.75rem 0;
    /* 12px top/bottom padding creates generous
       touch targets (18px text + 24px padding = 42px). */

    border-radius: var(--radius);

    /* STAGGERED ENTRANCE ANIMATION
       Each link starts shifted right and transparent.
       When the drawer opens, they slide left and fade in.
       JavaScript sets transition-delay on each link
       (0ms, 50ms, 100ms, 150ms, 200ms) for the cascade. */
    opacity: 0;
    transform: translateX(20px);

    transition:
        opacity 0.35s ease,
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        color var(--transition);
    /* transition-delay is set dynamically by JavaScript
       for the stagger effect. */
}

.nav-drawer--open .nav-drawer-link {
    opacity: 1;
    transform: translateX(0);
}

.nav-drawer-link:hover {
    color: var(--color-text);
}

/* Active page in drawer */
.nav-drawer-link[aria-current="page"] {
    color: var(--color-text);
    font-weight: 600;
}

/* Contact CTA in drawer: subtle pill button */
.nav-drawer-link--cta {
    color: var(--color-white);
    font-weight: 600;
    text-align: center;

    background-color: var(--color-accent);
    border-radius: var(--radius);
    padding: 0.875rem var(--space-md);

    margin-top: var(--space-md);
}

.nav-drawer-link--cta:hover {
    color: var(--color-white);
    background-color: var(--color-accent-hover);
}


/* ---- NAV RESPONSIVE ---- */

/* Tablets (768px+): show desktop links, hide toggle */
@media (min-width: 48rem) {

    .nav-links {
        display: flex;
        /* Shows the desktop navigation links. */
    }

    .nav-toggle {
        display: none;
        /* Hides the mobile toggle button. */
    }
}

/* Desktops (1024px+): more generous spacing */
@media (min-width: 64rem) {

    .nav-inner {
        height: 64px;
        /* Slightly taller on desktop — more room to breathe. */
    }

    .nav-links {
        gap: var(--space-xl);
        /* 48px between links on large screens. Luxurious
           spacing is the hallmark of .io design. */
    }

    .nav-link {
        font-size: 0.875rem;
        /* 14px on desktop — slightly larger for readability
           at increased viewing distance. */
    }
}