/* ============================================================
   DECYPHER CORPORATION — MAIN STYLESHEET
   ------------------------------------------------------------
   Edit design tokens in :root below to re-theme the entire site.
   ============================================================ */

/* ------------------------------------------------------------
   Size-adjusted fallback font.
   ------------------------------------------------------------
   Prevents layout shift ("flash" in the nav) when navigating
   between pages. Defines a virtual font that uses the system
   Arial metrics tuned to roughly match Montserrat's horizontal
   footprint. When Montserrat isn't cached yet and the fallback
   is briefly visible, nav items render at the same width they
   will have once Montserrat loads — so nothing visibly shifts.
   Numbers derived from Montserrat's reported metrics.
   ------------------------------------------------------------ */
@font-face {
    font-family: 'Montserrat Fallback';
    src: local('Arial'), local('Helvetica');
    size-adjust: 98%;
    ascent-override: 95%;
    descent-override: 25%;
    line-gap-override: 0%;
}

:root {
    /* ---------- COLORS ---------- */
    --color-bg:              #393A42;   /* Overall page background       */
    --color-header:          #2E2F36;   /* Top navigation bar            */
    --color-gradient-start:  #507D91;   /* Hero / band gradient (light)  */
    --color-gradient-end:    #2F4050;   /* Hero / band gradient (dark)   */

    --color-text:            #FFFFFF;   /* Body + H1                     */
    --color-subhead:         #DFA936;   /* H2 / sub-headers (gold)       */
    --color-link:             #5ED4FF;  /* Links (cyan)                  */
    --color-link-hover:       #B4DDEF;  /* Links + button hover (light blue) */

    --color-divider:         rgba(255, 255, 255, 0.25);
    --color-divider-soft:    rgba(255, 255, 255, 0.12);
    --color-card:            #FFFFFF;
    --color-card-text:       #2F4050;

    /* ---------- TYPOGRAPHY ---------- */
    --font-family: 'Montserrat', 'Montserrat Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

    --fs-body:    16px;
    --fs-small:   14px;
    --fs-nav:     13px;
    --fs-h1:      52px;
    --fs-h2:      30px;
    --fs-h3:      18px;
    --fs-quote:   16px;

    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semibold:600;
    --fw-bold:    700;
    --fw-black:   800;

    /* ---------- LAYOUT ---------- */
    --max-width:  1280px;
    --content-width: 860px;        /* narrower reading column          */
    --header-height: 80px;
    --section-pad: 120px;

    /* ---------- MOTION ---------- */
    --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast:   180ms;
    --dur-base:   320ms;
    --dur-slow:   700ms;
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    /* Always reserve space for the vertical scrollbar so the
       viewport width stays identical between long scrolling pages
       and short fit-to-viewport pages (like Contact). Without this,
       the Contact page's `overflow: hidden` removes the scrollbar
       and shifts all content ~15px to the right. */
    scrollbar-gutter: stable;
}

body {
    font-family: var(--font-family);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: 1.65;
    color: var(--color-text);
    /* Base bg color — shows through wherever there isn't a gradient band */
    background-color: var(--color-bg);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
}

/* ------------------------------------------------------------
   Gradient bands — applied PER SECTION via the .section--gradient
   class (or inherently on .band--hero). Each band is a horizontal
   gradient running from deep navy on the left to teal on the
   right. Sections without this class keep the plain dark bg,
   creating the alternating gradient/break rhythm.
   ------------------------------------------------------------ */
.section--gradient,
.band--hero {
    background:
        linear-gradient(90deg, #2B3A47 0%, #507D91 100%);
    position: relative;
}

/* Soft fades at the top and bottom of each gradient band. Tall
   enough (200px) to feel feathered and natural — reaching into
   the gradient section's own edges and into the break above/below
   — but compact enough that each gradient section still shows
   solid gradient color in its middle. */
.section--gradient::before,
.band--hero::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 0;
    height: 200px;
    background: linear-gradient(
        to bottom,
        var(--color-bg) 0%,
        rgba(57, 58, 66, 0.95) 15%,
        rgba(57, 58, 66, 0.75) 32%,
        rgba(57, 58, 66, 0.45) 55%,
        rgba(57, 58, 66, 0.2) 78%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 0;
}
.section--gradient::after,
.band--hero::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: 0;
    height: 200px;
    background: linear-gradient(
        to top,
        var(--color-bg) 0%,
        rgba(57, 58, 66, 0.95) 15%,
        rgba(57, 58, 66, 0.75) 32%,
        rgba(57, 58, 66, 0.45) 55%,
        rgba(57, 58, 66, 0.2) 78%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 0;
}
/* Ensure section content sits above its own fade overlays */
.section--gradient > *,
.band--hero > * { position: relative; z-index: 1; }

/* The FIRST gradient band (hero) should have no top fade — it
   touches the header cleanly. */
.band--hero::before { display: none; }

/* ------------------------------------------------------------
   Decorative dot columns — sit at the top of the page on both
   sides, starting right under the sticky header. They do NOT
   repeat and scroll naturally with the page.

   Fade approach: the top-to-bottom alpha fade (75% → 0%) is
   BAKED INTO THE PNG itself via the alpha channel. No CSS
   mask-image is required — just a plain transparent PNG.
   This sidesteps browser inconsistencies with mask-mode and
   works everywhere PNG transparency does (i.e. everywhere).
   ------------------------------------------------------------ */
html::after {
    content: "";
    position: absolute;
    top: var(--header-height);   /* start right under the sticky header */
    left: 0;
    right: 0;
    height: 1400px;
    z-index: 5;
    pointer-events: none;
    background-image:
        url('../assets/images/dots_fade_left.png'),
        url('../assets/images/dots_fade_right.png');
    background-repeat: no-repeat, no-repeat;
    background-position: left top, right top;
    background-size: 320px auto, 320px auto;
    opacity: 1;                  /* PNG already contains the 75% top + fade */
}
html { position: relative; }

/* Make sure all page content text sits above the decorative dot layer */
.site-header { position: relative; z-index: 100; }
main { position: relative; z-index: 2; }
.section__inner, .band__inner { position: relative; z-index: 10; }
.site-footer { position: relative; z-index: 10; }

img { max-width: 100%; display: block; }

a {
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--color-link-hover); }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

h1, h2, h3, h4 { font-family: var(--font-family); line-height: 1.2; }

h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); color: var(--color-text); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--color-text); text-transform: uppercase; letter-spacing: 0.02em; }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--color-subhead); }

/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--color-header);
    height: var(--header-height);
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: box-shadow var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled { box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); }

.header-inner {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.logo-link { display: flex; align-items: center; }
.logo-img { height: 42px; width: auto; transition: opacity var(--dur-fast) var(--ease-out); }
.logo-link:hover .logo-img { opacity: 0.85; }

.main-nav {
    display: flex;
    align-items: center;
    gap: 38px;
    margin-left: auto;
}

.nav-link {
    color: var(--color-text);
    font-size: var(--fs-nav);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    position: relative;
    padding: 3px 0;
    /* Use a system font stack for nav items only. These fonts are
       already on every device so they render instantly with zero
       download, eliminating the "font flash" / layout shift when
       navigating between pages. The rest of the site still uses
       Montserrat. At nav size (14px uppercase letter-spaced) the
       visual difference is barely noticeable. */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    transition: color var(--dur-fast) var(--ease-out);
}
/* Digitized "trailing data" underline — a dashed segment line that draws in
   on hover and streams left-to-right, echoing the brand mark's line motif. */
/* Left-down accent: a small dot at the top-left that grows into a vertical
   bar on hover. */
.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: var(--color-link);
    /* Hidden at rest. On hover it wipes in from the left; on leave it
       wipes out to the right. */
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--dur-base) var(--ease-out);
}
.nav-link:hover { color: var(--color-link); }
.nav-link.is-active { color: var(--color-link); }
.nav-link:hover::after,
.nav-link:focus::after {
    transform: scaleX(1);
    transform-origin: left;
}

.nav-divider {
    width: 1px;
    height: 28px;
    background-color: rgba(255, 255, 255, 0.25);
}

.nav-email {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    color: var(--color-text);
    font-size: var(--fs-nav);
    font-weight: var(--fw-medium);
    letter-spacing: .5px;
    font-kerning: normal;
    /* Same system font stack as .nav-link for consistency */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}
.nav-email:hover { color: var(--color-link); }
.nav-email svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Mobile nav toggle */
.nav-toggle {
    display: none;
    width: 40px;
    height: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-text);
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO / BANDS — reusable gradient section
   ============================================================ */
.band {
    position: relative;
    overflow: hidden;
    padding: var(--section-pad) 40px;
}

.band--hero {
    /* gradient background is defined alongside .section--gradient above */
}

/* Decorative dot columns flanking hero bands */
/* ------------------------------------------------------------
   The old per-hero dot columns are no longer needed — dots now
   run continuously down the full page via body::after. Hide
   these legacy elements so we don't double-up.
   ------------------------------------------------------------ */
.band__dots { display: none; }
/* Decorative dots drift animation (kept for reference — no longer applied) */
@keyframes dotsDrift {
    0%   { transform: translateY(0)     scale(1); opacity: 0.75; }
    100% { transform: translateY(-18px) scale(1.02); opacity: 0.95; }
}

.band__inner {
    position: relative;
    z-index: 2;
    max-width: var(--max-width);
    margin: 0 auto;
}

/* ============================================================
   HOME PAGE — HERO
   ============================================================ */
.home-hero {
    min-height: calc(100vh - var(--header-height));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Reserve space at the bottom for the absolutely-positioned scroll
       indicator (56px arrow + 72px offset = ~128px). The extra buffer
       prevents the centered content from overlapping the chevron when
       the viewport is shortened vertically. Width is unaffected. */
    padding-bottom: 160px;
}
.home-hero .band__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    /* Match the full content width used by the rest of the home page
       so the hero band reads at the same scale as the sections below. */
    max-width: var(--max-width);
}
.home-hero h1 {
    font-size: clamp(36px, 5vw, 56px);
    font-weight: var(--fw-bold);
    line-height: 1.15;
    max-width: 860px;   /* keep the tagline to a tight, punchy 2 lines */
}
.home-hero p.lead {
    font-size: 17px;
    font-weight: var(--fw-medium);
    line-height: 1.6;
    max-width: 700px;
}
.scroll-indicator {
    position: absolute;
    bottom: 72px;              /* lifted higher up from the edge */
    left: 50%;
    margin-left: -28px;        /* half of width to center */
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);  /* white chevrons */
    background: none;          /* no box */
    border: none;
    animation: bounce 2s var(--ease-in-out) infinite;
    z-index: 3;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out);
}
.scroll-indicator:hover { color: var(--color-link); }
.scroll-indicator svg { width: 100%; height: 100%; }

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(10px); }
}

/* ============================================================
   CONTENT SECTIONS (inside body bg)
   ============================================================ */
.section {
    padding: var(--section-pad) 40px;
    position: relative;
}
/* Break sections (plain .section without --gradient) get tighter
   vertical padding so they don't visually dominate over the
   gradient bands. The fades from neighboring gradient sections
   will bleed into this space. */
.section:not(.section--gradient) {
    padding-top: calc(var(--section-pad) * 0.8);
    padding-bottom: calc(var(--section-pad) * 0.8);
}
/* Gradient bands get extra top/bottom padding so all their content sits on
   the solid gradient, clear of the ~200px soft fade at each edge. */
.section--gradient {
    padding-top: 200px;
    padding-bottom: 200px;
}
.section__inner {
    max-width: var(--content-width);
    margin: 0 auto;
}
.section__inner--wide { max-width: var(--max-width); }

.section-heading { margin-bottom: 8px; }
.section-subheading {
    color: var(--color-subhead);
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    margin-bottom: 20px;
}
.section-divider {
    width: 100%;
    height: 1px;
    background-color: var(--color-divider);
    margin-bottom: 32px;
}

.section p { margin-bottom: 18px; }
.section p:last-child { margin-bottom: 0; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    background-color: var(--color-text);
    color: #2F4050;
    font-family: var(--font-family);
    font-size: var(--fs-nav);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid transparent;
    border-radius: 2px;
    cursor: pointer;
    transition: transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                background-color var(--dur-base) var(--ease-out),
                color var(--dur-base) var(--ease-out);
}
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    background-color: #B4DDEF;
    color: #1a2733;
}
.btn:active { transform: translateY(0); }

.btn--outline {
    background-color: transparent;
    color: var(--color-text);
    border-color: var(--color-text);
}
.btn--outline:hover {
    background-color: #B4DDEF;
    color: #1a2733;
    border-color: #B4DDEF;
}

/* ------------------------------------------------------------
   .btn--small — compact button used in the header. Smaller
   padding and font so it nestles in alongside nav links
   without overpowering them.
   ------------------------------------------------------------ */
.btn--small {
    padding: 8px 16px;
    font-size: 12px;
    letter-spacing: 0.08em;
    border-radius: 2px;
}

/* ------------------------------------------------------------
   .section-cta — small inline call-to-action used to nudge the
   reader toward an action mid-section. Sits left-aligned with
   the surrounding paragraph copy.
   ------------------------------------------------------------ */
.section-cta {
    margin-top: 70px;
    text-align: left;
}
.section-cta p {
    font-weight: var(--fw-bold);
    color: var(--color-text);
    font-size: 15px;
    margin-bottom: 16px;
}

/* ------------------------------------------------------------
   .closing-cta — closing call-to-action band that appears at
   the bottom of the home page. Left-aligned to match the rest
   of the page; sits inside .section--gradient for the band look.
   ------------------------------------------------------------ */
.closing-cta {
    padding-top: 200px;
    padding-bottom: 180px;
}
.closing-cta .section-heading {
    margin-bottom: 14px;
}
.closing-cta p {
    font-size: 16px;
    max-width: none;
    margin-bottom: 28px;
    line-height: 1.6;
}

/* ============================================================
   TESTIMONIAL CARD
   ------------------------------------------------------------
   Styled to match the .capsule--solution pattern used on the
   Home page: translucent white on the gradient/dark background,
   thin light border, rounded rectangle, paragraph-width.
   ============================================================ */
.testimonial {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--color-text);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 22px 32px;
    max-width: none;       /* match surrounding paragraph width (.section__inner) */
    margin: 24px 0 0;
    transition: transform var(--dur-base) var(--ease-out),
                background-color var(--dur-base) var(--ease-out);
}
.testimonial:hover {
    transform: translateX(4px);
    background-color: rgba(255, 255, 255, 0.1);
}
.testimonial blockquote {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 18px;        /* extra breathing room before the cite */
    color: var(--color-text);
    font-style: italic;
}
.testimonial cite {
    display: block;
    font-size: 13px;
    font-weight: var(--fw-bold);
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-style: normal;
    padding-left: 16px;          /* slight indent to set it apart from the quote */
}

/* ============================================================
   HOME PAGE — CONTENT BLOCKS
   ============================================================ */
.who-we-are-grid {
    display: grid;
    grid-template-columns: 1fr 470px;
    gap: 48px;
    margin-top: 52px;
    align-items: center;
}
/* Bullets on the left, brand-mark card on the right */
.who-we-are-grid .bullet-list { order: 1; }
.who-we-are-grid .who-visual { order: 2; }

/* ------------------------------------------------------------
   Who We Are visual — a frosted-glass stat card floating over a
   soft dot + gradient panel. The dot field reuses the hero's
   dot motif so the treatment feels native to the page, and it
   gives the glass card something to blur (frosted glass only
   reads when there's texture behind it).
   ------------------------------------------------------------ */
.who-visual {
    position: relative;
    overflow: visible;
    display: flex;
    align-items: center;
    /* Push the card to the left so the brand mark peeks out on the right. */
    justify-content: flex-start;
    padding: 0;
    background: transparent;
    border: none;
}
/* Brand mark sitting behind/left of the card. The element is taller than the
   card (negative top/bottom inset) so the mark extends above and below it,
   and it's anchored left so it peeks well past the card's left edge. */
.who-visual__dots {
    position: absolute;
    inset: -35px 0;
    background-image: url('../assets/images/brand-element1.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 207px;
    /* Mirror the mark so it tapers outward to the right */
    transform: scaleX(-1);
    pointer-events: none;
}
.glass-card {
    position: relative;
    width: 100%;
    max-width: 300px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 28px 30px;
    border-radius: 16px;
    background: rgb(38 40 50 / 55%);
    -webkit-backdrop-filter: blur(6px) saturate(100%);
    backdrop-filter: blur(6px) saturate(100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}
.glass-card__eyebrow {
    display: block;
    font-size: 11px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-subhead);
    margin-bottom: 16px;
}
.glass-stats { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.glass-stats li { display: flex; flex-direction: column; gap: 2px; }
.glass-stats__num { font-size: 19px; font-weight: var(--fw-bold); color: var(--color-text); line-height: 1.15; }
.glass-stats__label { font-size: 11px; color: rgba(255, 255, 255, 0.72); }
.placeholder-image {
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.3);
}
.placeholder-image svg { width: 56px; height: 56px; }
.bullet-list { list-style: none; padding: 0; }
.bullet-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
    line-height: 1.6;
}
.bullet-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    background-color: var(--color-subhead);
    border-radius: 50%;
}

/* Problem / Solution capsules sit side by side in a 2-up grid so they
   don't stretch into wide, sparse bars on the full-width layout. */
.capsule-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 52px;
    margin-bottom: 16px;
    align-items: stretch;
}
.capsule-pair .capsule { margin-bottom: 0; height: 100%; }

.capsule {
    border-radius: 24px;
    padding: 22px 32px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    transition: transform var(--dur-base) var(--ease-out);
}
.capsule:hover { transform: translateX(4px); }
.capsule--problem {
    background-color: rgba(20, 20, 25, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.capsule--solution {
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.capsule__label {
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.08em;
    color: var(--color-text);
}
.capsule__body { font-size: 14px; line-height: 1.5; }

/* Connector line bridging the AI cards and the advantage table */
.advantage-lead {
    margin-top: 40px;
    font-size: 15px;
    line-height: 1.6;
}
.advantage-lead strong { color: var(--color-text); }

/* Advantage table */
.advantage-table {
    margin-top: 52px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}
.advantage-column h3 {
    color: var(--color-subhead);
    margin-bottom: 18px;
    font-size: 18px;
}
.advantage-column ul { list-style: none; padding: 0; }
.advantage-column li {
    padding: 16px 0;
    border-bottom: 1px solid var(--color-divider-soft);
    font-size: 14px;
    transition: padding-left var(--dur-fast) var(--ease-out);
}
.advantage-column li:hover { padding-left: 8px; }

/* Core skills */
.skills-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-top: 24px;
    align-items: stretch;
}
.skills-grid > div { display: flex; flex-direction: column; }
.skills-list { display: flex; flex-direction: column; flex: 1; justify-content: center; gap: 0; }
.skill-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 26px 4px;
    border-bottom: 1px solid var(--color-divider-soft);
    transition: transform var(--dur-base) var(--ease-out);
}
.skill-item:hover { transform: translateX(6px); }
.skill-item:last-child { border-bottom: none; }
.skill-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    color: var(--color-text);
}
.skill-icon svg { width: 22px; height: 22px; }
.skill-content h4 {
    font-size: 15px;
    font-weight: var(--fw-bold);
    margin-bottom: 2px;
    color: var(--color-text);
    text-transform: none;
}
.skill-content p { font-size: 13px; margin: 0; color: rgba(255, 255, 255, 0.75); }

.tech-list { list-style: none; padding: 0; }
.tech-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-divider-soft);
    font-size: 14px;
    transition: padding-left var(--dur-fast) var(--ease-out);
}
.tech-list li:hover { padding-left: 6px; }
.tech-list li:last-child { border-bottom: none; }
.tech-list .tech-icon {
    width: 18px; height: 18px; flex-shrink: 0;
    color: var(--color-link);
}

/* Process */
.process-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 48px;
    margin-top: 28px;
}
.process-steps { display: flex; flex-direction: column; gap: 24px; }
.process-step {
    display: flex;
    gap: 18px;
    padding: 20px 4px;
    transition: transform var(--dur-base) var(--ease-out);
}
.process-step:hover { transform: translateX(6px); }
.process-step h4 {
    font-size: 15px;
    font-weight: var(--fw-bold);
    margin-bottom: 4px;
    color: var(--color-text);
    text-transform: none;
}
.process-step p { font-size: 13px; color: rgba(255, 255, 255, 0.75); }

/* ============================================================
   HERO MICROCOPY — small no-risk line beneath the hero CTA
   ============================================================ */
.hero-microcopy {
    font-size: 17px;
    font-weight: var(--fw-medium);
    color: rgba(255, 255, 255, 0.85);
    margin-top: -4px;
}
.hero-microcopy strong { color: var(--color-subhead); font-weight: var(--fw-bold); }
/* 4th hero child fades in after the CTA */
.hero-enter > *:nth-child(4) { animation-delay: 600ms; }

/* ============================================================
   AI-OBSESSED — feature card grid
   ------------------------------------------------------------
   Reuses the .skill-icon circle treatment; cards mirror the
   translucent-white-on-dark capsule pattern used elsewhere.
   ============================================================ */
.ai-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 52px;
}
.ai-card {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 26px 28px;
    transition: transform var(--dur-base) var(--ease-out),
                background-color var(--dur-base) var(--ease-out);
}
.ai-card:hover {
    transform: translateY(-4px);
    background-color: rgba(255, 255, 255, 0.1);
}
.ai-card .skill-icon { margin-bottom: 16px; }
.ai-card h4 {
    font-size: 16px;
    font-weight: var(--fw-bold);
    color: var(--color-text);
    text-transform: none;
    margin-bottom: 8px;
}
.ai-card p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.55;
    margin: 0;
}

/* ============================================================
   ENGAGEMENT TIMELINE — "How We Work"
   ------------------------------------------------------------
   Five stages across the top; gold accent = Decypher's free
   investment (stages 1-3), cyan accent = customer investment
   (stages 4-5). Two investment brackets sit beneath, with the
   bold $0 no-risk callout on the left.
   ============================================================ */
/* ------------------------------------------------------------
   HOME PAGE — full-width content column.
   ------------------------------------------------------------
   On the home page every section uses the wide (1280px) inner
   container so all content — headings, dividers, paragraphs,
   capsules, grids, and the timeline — spans the same full width
   and the left/right edges line up everywhere. Scoped to
   .page-home so Case Studies / Contact keep their original
   narrower reading column.
   ------------------------------------------------------------ */
.page-home .section__inner { max-width: var(--max-width); }

.engagement { margin-top: 40px; }
.engagement-track {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    align-items: stretch;
}
.engagement-stage {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* Accent color per track half. Blue = Decypher (brand), gold = Customer.
   Swap the two values below to flip the whole scheme. */
.engagement-stage--free,
.engagement-invest__block--free { --accent: var(--color-link); --accent-rgb: 94, 212, 255; }
.engagement-stage--paid,
.engagement-invest__block--paid { --accent: var(--color-subhead); --accent-rgb: 223, 169, 54; }
.engagement-stage__time {
    text-align: center;
    font-size: 13px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
}
.engagement-stage__card {
    position: relative;
    flex: 1;
    /* Gently rounded top corners (matched by the accent bar) so the bar and
       body flow as one shape with no sharp corners; fuller radius at bottom. */
    border-radius: 6px 6px 14px 14px;
    padding: 24px 18px 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: none;
    background-color: rgba(255, 255, 255, 0.06);
    transition: transform var(--dur-base) var(--ease-out),
                background-color var(--dur-base) var(--ease-out);
}
.engagement-stage__card:hover { transform: translateY(-4px); }
.engagement-stage--paid .engagement-stage__card {
    background-color: rgba(20, 20, 25, 0.4);
}
/* Straight accent line across the top of each tile (begins at the number
   badge) instead of a colored border that curves around the corners. */
.engagement-stage__card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 6px 6px 0 0;
    z-index: 1;
    background-color: var(--accent);
}
.engagement-stage__num {
    position: absolute;
    z-index: 2;
    top: -14px;
    left: 18px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 13px;
    font-weight: var(--fw-bold);
    color: #1a2733;
    background-color: var(--accent);
}
.engagement-stage__card h4 {
    font-size: 15px;
    font-weight: var(--fw-bold);
    color: var(--color-text);
    text-transform: none;
    margin-bottom: 12px;
}
.engagement-stage__card ul { list-style: none; padding: 0; }
.engagement-stage__card li {
    position: relative;
    padding-left: 14px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 6px;
    line-height: 1.45;
}
.engagement-stage__card li:last-child { margin-bottom: 0; }
.engagement-stage__card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--accent);
}

/* Bracket connectors — link each card group down to its investment block.
   Drawn as SVG strokes that inherit the group accent via currentColor, so
   they read clearly on the dark background. preserveAspectRatio="none"
   stretches the bracket to the group width while non-scaling-stroke keeps
   the line weight crisp. */
.engagement-brackets {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-top: 16px;
}
.engagement-bracket--free { grid-column: span 3; color: var(--color-link); }
.engagement-bracket--paid { grid-column: span 2; color: var(--color-subhead); }
.engagement-bracket__svg {
    display: block;
    width: 100%;
    height: 42px;
}
.engagement-bracket__line {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.9;
}

/* Investment brackets */
.engagement-invest {
    display: grid;
    /* Match the 5-column track above (3 free + 2 paid) so the split between
       the two blocks lines up exactly with the gap between cards 3 and 4. */
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-top: 6px;
}
.engagement-invest__block--paid { grid-column: span 2; }
.engagement-invest__block {
    border-radius: 14px;
    padding: 22px 26px;
    background-color: rgba(var(--accent-rgb), 0.10);
    border: 1px solid rgba(var(--accent-rgb), 0.5);
}
.engagement-invest__block--free { grid-column: span 3; }
.engagement-invest__block--paid .engagement-invest__label { color: var(--accent); }
.engagement-invest__label {
    display: block;
    font-size: 13px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text);
    margin-bottom: 6px;
}
.engagement-invest__block--free .engagement-invest__label { color: var(--accent); }
.engagement-invest__amount {
    display: block;
    font-size: 52px;
    font-weight: var(--fw-black);
    color: var(--accent);
    line-height: 1;
}
.engagement-invest__block p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
    margin: 0;
}

/* Engagement timeline — tablet / mobile */
@media (max-width: 960px) {
    .ai-grid { grid-template-columns: 1fr; }
    .engagement-track { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
    .engagement-brackets { display: none; }
    .engagement-invest { grid-template-columns: 1fr; margin-top: 24px; }
}
@media (max-width: 560px) {
    .engagement-track { grid-template-columns: 1fr; gap: 30px; }
    .engagement-invest__block--free { column-gap: 16px; }
    .engagement-invest__amount { font-size: 44px; }
}

/* ============================================================
   CASE STUDIES PAGE
   ============================================================ */
.case-study { padding-top: 32px; padding-bottom: 32px; }
/* Removed the border-top divider between case studies — the gradient
   band on the second case study already creates a clean visual break,
   and the thin line above it looked like a stray artifact. */
.case-study + .case-study { padding-top: 64px; }
/* Extra breathing room below the final case study so the CTA button
   doesn't feel cramped against the footer. */
.case-study:last-of-type { padding-bottom: 72px; }

.case-quote {
    /* Sits within .section__inner so it naturally matches the
       paragraph column width. Just adds a bit of vertical rhythm. */
    margin: 32px 0;
}

.cta-block {
    margin-top: 150px;   /* more breathing room above "Interested in learning more?" */
    padding-top: 0;
}
.cta-block p {
    font-weight: var(--fw-bold);
    margin-bottom: 16px;
    color: var(--color-text);
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-hero {
    padding: 60px 40px;
    min-height: calc(100vh - var(--header-height) - var(--footer-height, 110px));
    display: flex;
    align-items: center;
}
.contact-grid {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 2;
}
.contact-intro { text-align: center; }
.contact-intro h1 {
    font-size: clamp(36px, 4.5vw, 48px);
    line-height: 1.15;
    margin-bottom: 24px;
}
.contact-intro p {
    font-size: 15px;
    font-weight: var(--fw-medium);
    max-width: 420px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ------------------------------------------------------------
   Single-viewport CONTACT PAGE — no scrolling on desktop.
   Applied via <body class="page-contact"> in contact.html.
   Also suppresses the gradient "break" so the whole visible
   page is one continuous gradient band (no dark interruption).
   ------------------------------------------------------------ */
body.page-contact {
    height: 100vh;
    overflow: hidden;               /* no scrolling on desktop */
    display: flex;
    flex-direction: column;
}
body.page-contact main { flex: 1; min-height: 0; display: flex; }
body.page-contact .contact-hero {
    width: 100%;
    padding: 24px 40px;
    min-height: 0;
}

/* Make the contact hero a continuous gradient band (no break fade) */
body.page-contact .band--hero::before,
body.page-contact .band--hero::after { display: none; }

/* Tighter form spacing so everything fits comfortably */
body.page-contact .contact-form { gap: 12px; }
body.page-contact .form-group { gap: 4px; }
body.page-contact .form-group input,
body.page-contact .form-group textarea { padding: 10px 14px; }
body.page-contact .form-group textarea { min-height: 80px; }
body.page-contact .form-submit { margin-top: 4px; }

.contact-form { display: flex; flex-direction: column; gap: 18px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label {
    font-size: 14px;
    font-weight: var(--fw-bold);
    color: var(--color-text);
}
.form-group label .required { color: #FF6B6B; margin-left: 2px; }

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 14px;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    color: var(--color-text);
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: var(--fw-medium);
    transition: border-color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.55);
    font-weight: var(--fw-regular);
    font-size: 12px;
    letter-spacing: 1px;
}
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-link);
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(94, 212, 255, 0.15);
}
.form-group textarea {
    min-height: 110px;
    resize: vertical;
}

/* Inline field-level error (shown below an input when invalid).
   Hidden by default; populated by JS with a friendly message. */
.field-error {
    display: block;
    min-height: 0;
    font-size: 12px;
    font-weight: var(--fw-medium);
    color: #FF8A8A;
    margin-top: 4px;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}
.field-error.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* When an input is in an invalid state, tint its border red */
.form-group input.is-invalid,
.form-group textarea.is-invalid {
    border-color: #FF6B6B;
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.15);
}

/* Top-of-form alert banner — shown when the user submits with
   missing or invalid required fields. Uses the same red accent
   as the field-level errors so the hierarchy is visually unified. */
.form-alert {
    display: none;
    padding: 12px 16px;
    border-radius: 2px;
    background-color: rgba(255, 107, 107, 0.12);
    border: 1px solid rgba(255, 107, 107, 0.55);
    color: #FFD6D6;
    font-size: 13px;
    font-weight: var(--fw-medium);
    line-height: 1.4;
}
.form-alert.is-visible {
    display: block;
    animation: fadeInUp 300ms var(--ease-out);
}

.form-submit { align-self: flex-end; margin-top: 8px; }

.form-message {
    display: none;
    padding: 14px 18px;
    border-radius: 2px;
    background-color: rgba(94, 212, 255, 0.15);
    border: 1px solid var(--color-link);
    color: var(--color-text);
    font-size: 14px;
}
.form-message.is-visible { display: block; animation: fadeInUp 400ms var(--ease-out); }

/* ============================================================
   FOOTER — solid color matching the header for clean visual
   "chrome" around the page content. Works cleanly regardless
   of what section sits above (gradient band, dark break, or
   the contact page's continuous gradient hero).
   ============================================================ */
.site-footer {
    padding: 25px 40px;
    margin-top: 0;
    background-color: var(--color-header);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    position: relative;
}
.footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;           /* vertically center all columns */
    gap: 32px;
    flex-wrap: wrap;
}

/* ------------------------------------------------------------
   LEFT COLUMN — stacks:
     1. "Follow us on" + LinkedIn icon (center-aligned so the
        taller branded icon sits flush with the text)
     2. A hairline divider for gentle separation
     3. Street address (plain text — no leading icon, keeps the
        column visually calm)
   ------------------------------------------------------------ */
.footer-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;                      /* breathing room around the divider */
    line-height: 1.2;
}
.footer-social-row {
    display: flex;
    align-items: center;           /* vertically center text with the branded icon */
    gap: 8px;
}
.footer-left .footer-social-row span {
    font-size: 15px;
    color: var(--color-text);
    font-weight: 500;
}
/* Hairline separator between the social row and the address.
   Intentionally subtle (--color-divider-soft) and short enough
   that it reads as a stylistic accent for the left column,
   not a structural break across the whole footer. */
.footer-left-divider {
    display: block;
    width: 140px;
    height: 1px;
    background-color: var(--color-divider-soft);
}
.footer-address {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.2;
    margin: 0;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--dur-fast) var(--ease-out),
                filter var(--dur-fast) var(--ease-out);
    /* The parent .footer-social-row uses align-items: center,
       so the icon and the "Follow us on" text share a common
       vertical midline — no manual offset needed. */
}
.social-link:hover {
    transform: translateY(-1px);             /* subtle lift, not drop */
    filter: brightness(1.1);                 /* gentle brighten */
}
.social-link svg {
    width: 18px;
    height: 18px;
    display: block;                          /* remove inline-baseline whitespace under the SVG */
}

/* LinkedIn-specific: ensure crisp rounded-square rendering and
   give it a tiny shadow so it reads as a distinct UI element
   on the dark footer rather than floating loose pixels. */
.social-link--linkedin svg {
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.footer-right { text-align: right; font-size: 12px; color: rgba(255, 255, 255, 0.85); }
.footer-right p { margin-bottom: 4px; line-height: 1.2; }
.footer-right .footer-cta {
    font-size: 17px;                 /* bumped up per request */
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    margin-bottom: 6px;
}
.footer-right .footer-cta a { font-weight: var(--fw-bold); }
.footer-right a { font-weight: var(--fw-bold); }

/* ============================================================
   SCROLL REVEAL ANIMATIONS
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 80ms;  }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Hero entrance */
.hero-enter > * {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 800ms var(--ease-out) forwards;
}
.hero-enter > *:nth-child(1) { animation-delay: 150ms; }
.hero-enter > *:nth-child(2) { animation-delay: 300ms; }
.hero-enter > *:nth-child(3) { animation-delay: 450ms; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */
@media (max-width: 960px) {
    :root {
        --section-pad: 90px;
        --fs-h1: 40px;
        --fs-h2: 24px;
    }

    .header-inner { padding: 0 24px; gap: 16px; }
    .main-nav {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        flex-direction: column;
        background-color: var(--color-header);
        padding: 24px;
        gap: 20px;
        align-items: flex-start;
        transform: translateY(-120%);
        /* `visibility: hidden` when closed guarantees the panel
           (and its border / shadow) cannot bleed into the page below
           the sticky header. We delay the visibility change until
           after the slide-up transition completes so the closing
           animation is still visible. The CLOSE transition uses a
           faster, more linear curve so the panel snaps shut crisply
           instead of decelerating into hidden. */
        visibility: hidden;
        transition: transform 200ms ease-in,
                    visibility 0s linear 200ms;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: none;
    }
    .main-nav.is-open {
        transform: translateY(0);
        visibility: visible;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
        /* Opening uses the standard ease-out curve for a smooth
           slide-down, and visibility flips immediately. */
        transition: transform var(--dur-base) var(--ease-out),
                    visibility 0s linear 0s;
    }
    .nav-divider { display: none; }
    .nav-toggle { display: flex; }

    .band, .section { padding-left: 24px; padding-right: 24px; }

    /* Hide the dot columns on tablet — the viewport is narrow enough
       that they crowd the content, and their pseudo-element layer was
       causing a faint artifact band above the sticky header. */
    html::after { display: none; }

    .who-we-are-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }
    .placeholder-image { max-width: 260px; }
    .who-visual { max-width: 460px; width: 100%; }

    .advantage-table,
    .skills-grid,
    .process-grid,
    .capsule-pair {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .contact-hero { padding: 80px 24px; min-height: 0; }
    .contact-grid { grid-template-columns: 1fr; gap: 48px; }

    /* On tablet + mobile, allow the contact page to scroll normally —
       the no-scroll single-viewport layout only applies to desktop. */
    body.page-contact {
        height: auto;
        overflow: visible;
        display: block;
    }
    body.page-contact main { display: block; }
    body.page-contact .contact-hero {
        padding: 80px 24px;
        min-height: 0;
    }
    body.page-contact .contact-form { gap: 18px; }
    body.page-contact .form-group { gap: 6px; }
    body.page-contact .form-group input,
    body.page-contact .form-group textarea { padding: 12px 14px; }
    body.page-contact .form-group textarea { min-height: 110px; }

    .footer-inner { flex-direction: column; align-items: flex-start; }
    .footer-right { text-align: left; }

    .testimonial { padding: 20px 28px; border-radius: 24px; }
}

/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */
@media (max-width: 560px) {
    :root {
        --section-pad: 56px;
        --header-height: 68px;
    }
    .logo-img { height: 32px; }
    .band__dots { display: none; }
    /* Hide the dot columns on mobile — not enough horizontal
       room for them to sit outside the content. */
    html::after { display: none; }

    h1 { font-size: 32px; }
    h2 { font-size: 22px; letter-spacing: 0.01em; }

    .home-hero { min-height: auto; padding-top: 72px; padding-bottom: 72px; }

    /* Hide the bouncing scroll-down chevrons on mobile — at narrow
       widths they overlap the "Book a discovery call" CTA button. */
    .scroll-indicator { display: none; }

    .testimonial { padding: 18px 22px; border-radius: 20px; }
    .testimonial blockquote { font-size: 14px; }
    .testimonial cite { padding-left: 12px; }

    .capsule {
        padding: 18px 24px;
        gap: 6px;
    }

    .btn { padding: 12px 22px; font-size: 13px; }
    .form-submit { align-self: stretch; }

    .band, .section { padding-left: 20px; padding-right: 20px; }
    .header-inner { padding: 0 20px; }
    .site-footer { padding: 20px; }
}