/*
 Theme Name:   Hello Elementor Child
 Template:     hello-elementor
 Version:      1.0.8
 Text Domain:  hello-elementor-child
*/

/*
 ===========================================
 AIPD GROUP — Brand Variables & Global CSS
 Aligned with House & Land Co Brand Guidelines v1.0
 (see /01-design/brand/brand-guidelines.html)
 ===========================================
*/

:root {
    /* Foundation — inherited from HALCO */
    --ink:       #000000;
    --paper:     #FFFFFE;
    --sage:      #707F6A;
    --charcoal:  #1A1A1A;
    --slate:     #222222;

    /* Complementary — sub-brand extensions */
    --cream:     #EDE6D6;
    --stone:     #C5C0B5;
    --ochre:     #C4A86A;
    --clay:      #B5634A;
    --forest:    #2C3A2A;
    --mist:      #DDE2D8;

    /* Functional */
    --rule:      rgba(0,0,0,0.10);
    --rule-2:    rgba(0,0,0,0.06);
    --muted:     #6B6B6B;

    /* Legacy AIPD aliases — kept so existing CSS keeps working.
       Per HALCO brand realignment: `--aipd-navy` no longer renders as
       #1A2B4A — it now maps to `--ink` so the global default heading /
       link / background colour is brand-compliant. The variable name
       lives on purely so existing rules don't break. */
    --aipd-navy:       var(--ink);
    --aipd-sage:       var(--sage);
    --aipd-white:      var(--paper);
    --aipd-offwhite:   #F7F5F2;
    --aipd-slate:      #4A5568;
    --aipd-light:      var(--rule);

    /* Type families per brand */
    --font-heading: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body:    'Inter',   -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, monospace;

    --maxw: 1240px;
    --gutter: 56px;

    /* ──────────────────────────────────────────────
       DESIGN SYSTEM TOKENS — editorial refinement pass.
       One motion language, one spacing rhythm, one
       elevation system. Sections migrate onto these
       incrementally; tokens are the source of truth.
       ────────────────────────────────────────────── */

    /* Motion — single easing language, restrained durations */
    --ease-silk:  cubic-bezier(0.16, 1, 0.3, 1);    /* decelerate — reveals, editorial */
    --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);   /* symmetric — stage swaps */
    --dur-1: 0.3s;    /* micro — hovers, chips */
    --dur-2: 0.55s;   /* standard — cards, cross-fades */
    --dur-3: 1.1s;    /* reveal — section entrances */

    /* Spacing scale — 8px base, editorial vertical rhythm */
    --space-2xs: 8px;
    --space-xs:  16px;
    --space-sm:  24px;
    --space-md:  40px;
    --space-lg:  64px;
    --space-xl:  96px;
    --space-2xl: 140px;
    --section-pad: clamp(96px, 11vw, 160px);

    /* Type scale — Manrope display, modular ~1.24 */
    --fs-display: clamp(2.75rem, 6vw, 5rem);
    --fs-h1:      clamp(2.25rem, 4.4vw, 3.6rem);
    --fs-h2:      clamp(1.85rem, 3.2vw, 2.8rem);
    --fs-h3:      clamp(1.35rem, 2vw, 1.7rem);
    --fs-lede:    clamp(1.05rem, 1.4vw, 1.3rem);
    --fs-eyebrow: 0.8125rem;

    /* Elevation — warm-neutral depth, restrained */
    --shadow-1: 0 1px 2px rgba(20,20,20,0.04), 0 2px 8px rgba(20,20,20,0.04);
    --shadow-2: 0 4px 12px rgba(20,20,20,0.05), 0 12px 32px rgba(20,20,20,0.06);
    --shadow-3: 0 8px 20px rgba(20,20,20,0.06), 0 24px 56px rgba(20,20,20,0.10);

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
}

::selection { background: var(--sage); color: var(--paper); }

/* ===================
   Base
=================== */
body {
    font-family: var(--font-body);
    color: var(--aipd-slate);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--aipd-navy);
    line-height: 1.25;
    /* Editorial display type — subtle optical tracking so large
       Manrope headings read tighter and more intentional. */
    letter-spacing: -0.011em;
}

a {
    color: var(--aipd-navy);
    transition: color var(--dur-1) var(--ease-silk);
}

a:hover {
    color: var(--aipd-sage);
}

/* ===================
   Buttons
=================== */
.aipd-btn-primary {
    background-color: var(--aipd-sage);
    color: var(--aipd-navy);
    border: 2px solid var(--aipd-sage);
    border-radius: 4px;
    padding: 14px 36px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.3px;
    transition: all 0.4s var(--ease-silk);
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
}

.aipd-btn-primary:hover {
    background-color: transparent;
    color: var(--aipd-sage);
}

.aipd-btn-secondary {
    background-color: transparent;
    color: var(--aipd-navy);
    border: 2px solid var(--aipd-navy);
    border-radius: 4px;
    padding: 14px 36px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    transition: all 0.4s var(--ease-silk);
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
}

.aipd-btn-secondary:hover {
    background-color: var(--aipd-navy);
    color: var(--aipd-white);
}

/* Elementor button overrides */
.elementor-button.aipd-primary {
    background-color: var(--aipd-sage) !important;
    color: var(--aipd-navy) !important;
    border: 2px solid var(--aipd-sage) !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    transition: all 0.4s var(--ease-silk) !important;
}

.elementor-button.aipd-primary:hover {
    background-color: transparent !important;
    color: var(--aipd-sage) !important;
}

.elementor-button.aipd-secondary {
    background-color: transparent !important;
    color: var(--aipd-navy) !important;
    border: 2px solid var(--aipd-navy) !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    transition: all 0.4s var(--ease-silk) !important;
}

.elementor-button.aipd-secondary:hover {
    background-color: var(--aipd-navy) !important;
    color: var(--aipd-white) !important;
}

/* ===================
   Background Utilities
=================== */
.aipd-bg-navy     { background-color: var(--aipd-navy); }
.aipd-bg-offwhite { background-color: var(--aipd-offwhite); }
.aipd-bg-white    { background-color: var(--aipd-white); }

.aipd-bg-navy h1,
.aipd-bg-navy h2,
.aipd-bg-navy h3,
.aipd-bg-navy h4,
.aipd-bg-navy p,
.aipd-text-white  { color: var(--aipd-white); }

.aipd-text-gold   { color: var(--aipd-sage); }
.aipd-text-navy   { color: var(--aipd-navy); }

/* ===================
   Header — Fixed nav with state-driven backgrounds
   Responsive padding scales from mobile to desktop.
=================== */
.site-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
    background: transparent !important;
    border-bottom: none !important;
    /* Horizontal padding tightened more on the right so the nav pills
       and Download CTA sit close to the viewport edge. Left padding
       slightly looser so the logo doesn't crowd the corner. */
    padding: clamp(12px, 1.6vw, 22px) clamp(8px, 1.2vw, 16px) clamp(12px, 1.6vw, 22px) clamp(12px, 1.8vw, 24px) !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    transition: padding 0.3s ease, background 0.35s ease, border-color 0.35s ease,
                opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    box-sizing: border-box;
    transform: translateY(0);
}

/* Once the user is past the hero (charcoal-backdrop nav state), group
   the nav pills RIGHT against the Download Property Guide CTA so the
   whole control cluster reads as a single block on the right edge. We
   push the menu to the right with margin-left:auto so the logo holds
   the left, then tighten the gap between the menu and the CTA pill. */
.site-header.is-past-hero .main-menu,
.site-header.is-past-hero nav ul,
.site-header.is-past-hero .menu {
    margin-left: auto !important;
    margin-right: 6px !important;
}

/* AIPD logo fades out the moment the user scrolls into the hero section
   so the cinematic villa-build video has the whole top-left corner. The
   nav pills + Download CTA stay so the visitor still has navigation. */
.site-header.is-in-hero .site-branding,
.site-header.is-in-hero .site-branding-text,
.site-header.is-in-hero .site-title,
.site-header.is-in-hero .site-logo {
    opacity: 0 !important;
    transform: translateX(-8px);
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Make sure the brand wrapper inherits the same fade so we catch
   whichever element actually holds the logo (theme-dependent). */
.site-header .site-branding,
.site-header .site-branding-text,
.site-header .site-title,
.site-header .site-logo {
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Nav fully hidden while the preloader (zoom-typo intro) is on screen. */
.site-header.is-hidden {
    opacity: 0 !important;
    pointer-events: none;
    transform: translateY(-100%);
}

/* Nav slides up out of view while the user is inside the chapter stack
   scroll range. JS toggles `.is-stack-hidden` based on `.aipd-stack`
   position. Nav reappears once user scrolls past the chapter stack. */
.site-header.is-stack-hidden {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
}

/* Site brand / logo wordmark */
.site-header .site-branding,
.site-header .site-branding-text {
    margin: 0;
    padding: 0;
}

.site-header .site-title,
.site-header .site-branding h1,
.site-header .site-branding a {
    font-family: var(--font-heading) !important;
    /* Logo size scales 20px (mobile) → 28px (desktop) */
    font-size: clamp(20px, 2vw, 28px) !important;
    font-weight: 600 !important;
    /* light by default — the nav now opens over the charcoal preloader */
    color: var(--paper) !important;
    line-height: 1 !important;
    letter-spacing: -0.5px !important;
    text-decoration: none !important;
    margin: 0 !important;
    white-space: nowrap;
}

.site-header .site-description {
    display: none !important;
}

/* Pill navigation menu */
.site-header .main-menu,
.site-header nav ul,
.site-header .menu {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: center;
}

.site-header .main-menu a,
.site-header nav ul a,
.site-header .menu a,
.site-header .menu-item a {
    display: inline-block !important;
    background: var(--paper) !important;
    border-radius: 10px !important;
    /* Padding scales 6px/10px → 8px/16px (smaller pill) */
    padding: clamp(6px, 0.7vw, 8px) clamp(10px, 1.2vw, 16px) !important;
    margin: 0 !important;
    font-family: var(--font-body) !important;
    /* Font scales 10px → 11px */
    font-size: clamp(10px, 0.85vw, 11px) !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.7px !important;
    color: var(--ink) !important;
    text-decoration: none !important;
    border: none !important;
    white-space: nowrap !important;
    /* Stable hover — no layout shifts, no margin-shift glitching */
    transition: background 0.3s var(--ease-silk),
                color 0.3s var(--ease-silk) !important;
}

.site-header .main-menu a:hover,
.site-header nav ul a:hover,
.site-header .menu a:hover,
.site-header .menu-item a:hover {
    /* Hover — white pill flips to sage on the hero / at-top nav. */
    background: var(--sage) !important;
    color: var(--paper) !important;
}

/* Last item (Contact) styled as the forest CTA pill */
.site-header .menu-item:last-child a,
.site-header nav ul li:last-child a {
    background: var(--forest) !important;
    color: var(--paper) !important;
}

.site-header .menu-item:last-child a:hover,
.site-header nav ul li:last-child a:hover {
    background: #1e2e1e !important;
    color: var(--paper) !important;
}

/* Logo wordmark hover */
.site-header .site-title a,
.site-header .site-branding a {
    transition: opacity 0.3s var(--ease-silk), color 0.3s var(--ease-silk) !important;
}

.site-header .site-title a:hover,
.site-header .site-branding a:hover {
    opacity: 0.7 !important;
}

/* ============================================
   Nav scroll-zone states
   ──────────────────────────────────────────────
   .is-in-hero   = chapter stack is in view
                   → hide all non-essential pills,
                     keep only the Contact pill +
                     the floating Download CTA
   .is-past-hero = past chapter stack (Trust Strip+)
                   → charcoal background, full nav visible
   ============================================ */

/* All menu items get a smooth opacity transition */
.site-header .menu-item,
.site-header nav ul li {
    transition: opacity 0.35s ease, transform 0.35s ease, max-width 0.45s ease;
    will-change: opacity, max-width;
}

/* IN-HERO state — scrolling through the villa-build hero.
   Nav stays fully transparent over the hero (no background) until the
   page reaches the Stats strip (past-hero). */
.site-header.is-in-hero {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
}

/* Hide ALL menu items in-hero — only the floating Download Property Guide
   CTA shows until we reach the Trust Strip (past-hero state) */
.site-header.is-in-hero .menu-item,
.site-header.is-in-hero nav ul li {
    opacity: 0;
    pointer-events: none;
    max-width: 0;
    overflow: hidden;
    transform: translateX(8px);
}

/* PAST-HERO state — Trust Strip and below */
.site-header.is-past-hero {
    background: var(--charcoal) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Logo wordmark — light over the (transparent) hero and charcoal nav. */
.site-header.is-in-hero .site-title a,
.site-header.is-in-hero .site-branding a,
.site-header.is-in-hero .site-title,
.site-header.is-in-hero .site-branding h1 {
    color: var(--paper) !important;
}
.site-header.is-past-hero .site-title a,
.site-header.is-past-hero .site-branding a,
.site-header.is-past-hero .site-title,
.site-header.is-past-hero .site-branding h1 {
    color: var(--paper) !important;
}

/* Past-hero menu pills — pastel sage green on charcoal nav, hover flips
   to charcoal. Selectors match every variant the base nav rule covers
   (main-menu / nav ul / menu / menu-item) so the base rule's paper bg
   doesn't sneak through on some links. */
.site-header.is-past-hero .main-menu a,
.site-header.is-past-hero nav ul a,
.site-header.is-past-hero .menu a,
.site-header.is-past-hero .menu-item a {
    background: var(--sage) !important;
    color: var(--paper) !important;
    border: 1px solid var(--sage) !important;
}

.site-header.is-past-hero .main-menu a:hover,
.site-header.is-past-hero nav ul a:hover,
.site-header.is-past-hero .menu a:hover,
.site-header.is-past-hero .menu-item a:hover {
    background: #5c6857 !important;
    color: var(--paper) !important;
    border-color: #5c6857 !important;
}

/* Contact pill (last item) stays forest on the past-hero nav too */
.site-header.is-past-hero .main-menu li:last-child a,
.site-header.is-past-hero nav ul li:last-child a,
.site-header.is-past-hero .menu-item:last-child a {
    background: var(--forest) !important;
    color: var(--paper) !important;
    border: 1px solid var(--forest) !important;
}
.site-header.is-past-hero .main-menu li:last-child a:hover,
.site-header.is-past-hero nav ul li:last-child a:hover,
.site-header.is-past-hero .menu-item:last-child a:hover {
    background: #1e2e1e !important;
    border-color: #1e2e1e !important;
}

/* Past-hero — the WHOLE charcoal nav is right-aligned. AIPD Group
   wordmark is hidden, the .header-inner collapses to fit just the
   nav pills, the parent header switches to flex-end so the entire
   cluster (pills + Download CTA) sits flush on the right edge with
   nothing on the left. The Download CTA is absolutely positioned at
   right:14-32px and ~170px wide, so the header-inner needs a
   margin-right that reserves that footprint plus a small visible
   gap between the last pill and the CTA. */
.site-header.is-past-hero {
    justify-content: flex-end !important;
}
.site-header.is-past-hero .site-branding,
.site-header.is-past-hero .site-branding-text,
.site-header.is-past-hero .site-title,
.site-header.is-past-hero .site-logo {
    display: none !important;
}
.site-header.is-past-hero .header-inner {
    flex: 0 1 auto !important;
    width: auto !important;
    /* Margin-right reserves space for the absolute-positioned Download
       CTA. Calibrated so the CONTACT-to-Download gap is ≈6px — same
       as the flex gap between every other nav pill. At 1280 the 12.5vw
       term gives ≈160px → 6px gap; the 166px max keeps the same 6px
       gap on wider screens (1440, 1920+) where the CTA's right offset
       clamps to 32px. */
    margin: 0 clamp(144px, 12.5vw, 166px) 0 0 !important;
}
.site-header.is-past-hero .main-menu,
.site-header.is-past-hero nav ul,
.site-header.is-past-hero .menu {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* Prevent the header from wrapping. The flex children stay on one row. */
.site-header { flex-wrap: nowrap !important; }
.site-header .main-menu,
.site-header nav ul,
.site-header .menu { flex-wrap: nowrap !important; }

/* Push body content down so nothing is hidden behind the fixed nav */
body.elementor-page,
body {
    /* hero will overlap the nav since hero is also off-white;
       only add top padding for non-elementor pages */
}

/* .site-header.scrolled is now superseded by .is-in-hero / .is-past-hero
   (kept as a fallback for the smaller padding when scrolled) */
.site-header.scrolled {
    padding: 14px 40px !important;
}

/* Tight mobile — hide the inline menu; the hamburger opens a dropdown.
   The clamp() defaults handle 600px – desktop; below 720px we collapse. */
@media (max-width: 720px) {
    /* Hide the INLINE desktop menu on phones. Scoped to `.site-navigation`
       (the main nav) so it does NOT also hit `.site-navigation-dropdown` —
       the old `.site-header .menu-item{display:none!important}` rule hid the
       dropdown's items too, which is why the hamburger looked dead. */
    .site-header .site-navigation { display: none !important; }
    /* Don't clip the dropdown that the base theme drops below the header. */
    .site-header,
    .site-header .header-inner { overflow: visible !important; }

    /* The dropdown's position + show/hide is handled by the BASE Hello theme
       (it absolutely-positions the panel under the header and toggles
       max-height/scaleY on `.elementor-active`). We only need to (a) re-show
       the items two child rules force-hid — the `display:none` collapse AND
       the `.is-in-hero` opacity/max-width:0 hide both matched the dropdown —
       and (b) restyle the panel to the dark brand palette. */
    .site-navigation-dropdown ul.menu li {
        display: block !important;
        opacity: 1 !important;
        max-width: none !important;
        overflow: visible !important;
        pointer-events: auto !important;
        transform: none !important;
    }
    .site-navigation-dropdown ul.menu {
        background: rgba(18, 18, 18, 0.98) !important;
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        box-shadow: 0 24px 40px rgba(0, 0, 0, 0.45);
    }
    .site-navigation-dropdown ul.menu li a {
        background: transparent !important;
        color: var(--paper) !important;
        box-shadow: inset 0 -1px 0 rgba(244, 236, 218, 0.08) !important;
        font-family: var(--font-body);
        font-size: 17px;
        font-weight: 500;
        letter-spacing: 0.01em;
        padding: 16px clamp(20px, 6vw, 36px) !important;
    }
    .site-navigation-dropdown ul.menu li:last-child a { box-shadow: none !important; }
    .site-navigation-dropdown ul.menu li.current-menu-item a,
    .site-navigation-dropdown ul.menu li a:hover {
        background: rgba(244, 236, 218, 0.06) !important;
        color: var(--ochre) !important;
    }

    /* After the stats (is-past-hero) the hamburger moves to the far LEFT,
       leaving the Download CTA alone on the right. The hero state is left
       untouched (hamburger stays on the right there). Overrides the desktop
       past-hero flex-end + the header-inner CTA-reserve margin. */
    .site-header.is-past-hero { justify-content: flex-start !important; }
    .site-header.is-past-hero .header-inner { margin: 0 !important; }
}

/* ===========================================
   Single-page architecture overrides
   (chapter stack is the hero — no Elementor hero section)
=========================================== */
.elementor-top-section { padding: 0; }

/* Trust strip = first Elementor section. The actual styling lives in
   the TRUST STRIP block further down (~line 2170) — dark editorial
   treatment per mockup. This rule used to set a white background and
   was conflicting; it's been removed. */

/* NOTE: a legacy rule here forced `padding: 100px 24px` on every
   Elementor top-section from the 2nd onward. That made sense in the
   old injection era (only the Stats section was a real Elementor
   section). Now every section is a native AIPD widget that supplies
   its own padding, so the rule was removed — it was double-padding
   every section. Section wrappers stay at padding 0 (rule above). */

/* Center all section h2 intro headings + subtitle paragraphs on home */
body.home .elementor-top-section .elementor-widget-heading > .elementor-widget-container {
    text-align: center !important;
}
body.home .elementor-top-section .elementor-widget-heading h2.elementor-heading-title,
body.home .elementor-top-section .elementor-widget-heading h3.elementor-heading-title {
    text-align: center !important;
    max-width: 920px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Lead paragraph after section heading - center on home */
body.home .elementor-top-section > .elementor-container > .elementor-row > .elementor-column[data-element_type="column"]:only-child > .elementor-widget-wrap > .elementor-widget-text-editor {
    text-align: center !important;
}
body.home .elementor-top-section > .elementor-container > .elementor-row > .elementor-column[data-element_type="column"]:only-child > .elementor-widget-wrap > .elementor-widget-text-editor > .elementor-widget-container {
    max-width: 720px;
    margin: 0 auto;
}

/* ===========================================
   Problem section (americanhousing.com editorial)
   Big left heading + right intro with vertical rule,
   then 4 numbered columns with separator lines
=========================================== */
.aipd-problem {
    background: var(--charcoal);
    color: var(--paper);
    /* Was 120/140 — section was eating a full viewport just in vertical
     * padding around the chevron list. 64/72 keeps generous breathing
     * room without making the visitor scroll a screen of empty charcoal. */
    padding: 64px 0 72px;
    margin: 0;
    width: 100%;
    position: relative;
    overflow: hidden;
}
/* Mockup #problem::before — thin sage rule across the top */
.aipd-problem::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sage), transparent);
}

.aipd-problem__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Top: 2-column heading + intro */
.aipd-problem__top {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    grid-template-rows: auto auto;
    /* zero row-gap — eyebrow's own margin-bottom (28px) controls the
       eyebrow→heading spacing; 60px column gap between left + right */
    gap: 0 60px;
    align-items: start;
    padding-bottom: 100px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
/* Explicit placement so the eyebrow stacks above the heading in column 1
   and the intro paragraph stays on the right spanning both rows. */
.aipd-problem__eyebrow { grid-column: 1; grid-row: 1; }
.aipd-problem__heading { grid-column: 1; grid-row: 2; }
.aipd-problem__intro   { grid-column: 2; grid-row: 1 / span 2; }

.aipd-problem__heading {
    font-family: var(--font-heading) !important;
    /* Brand Display spec: 56/100 — clamp from 36 → 56 */
    font-size: clamp(36px, 4.4vw, 56px) !important;
    line-height: 1.08 !important;
    font-weight: 600 !important;
    color: var(--paper) !important;
    letter-spacing: -0.025em !important;
    margin: 0 !important;
    max-width: 100%;
}

/* Italic accent + word-fade on the heading */
.aipd-problem__heading em {
    font-family: var(--font-heading) !important;
    font-style: normal !important;
    font-weight: 300 !important;
    color: var(--sage) !important;
}

.aipd-problem__heading .word {
    display: inline-block;
    /* Words start dim, fade in to full paper on scroll-active */
    color: rgba(255, 255, 255, 0.22);
    transition: color 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.aipd-problem__heading .word.is-active {
    color: var(--paper);
}

.aipd-problem__intro {
    position: relative;
    padding-left: 28px;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    /* Vertically centre the intro paragraph within the grid row so it sits
       in the middle of the section, opposite the tall left-column heading,
       rather than anchored to the top */
    align-self: center;
    padding-top: 0;
}
.aipd-problem__intro p {
    font-family: var(--font-body) !important;
    font-size: 17px !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    margin: 0 !important;
    max-width: 420px;
}

/* Chevron arrow grid (findrealestate.com inspired)
   — text inside each chevron with dark gradient overlay
   — sleek scroll-reveal cascade + hover zoom */
.aipd-problem__chevrons {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 100px 0 40px;
    padding: 0;
    overflow: visible;
    perspective: 1200px;
}

.aipd-problem__chevron {
    flex: 1;
    aspect-ratio: 4 / 5;
    /* cover preserves the source aspect ratio and crops what spills past
       the chevron edges — no stretching of wide landscape source images
       into the tall chevron container */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    /* All four chevrons use the SAME clip-path so they read as identical shapes.
       The first one's V-notch on the left simply sits past the section edge — invisible. */
    clip-path: polygon(
        0% 0%,
        82% 0%,
        100% 50%,
        82% 100%,
        0% 100%,
        18% 50%
    );
    margin-left: -8%;
    overflow: hidden;
    transition:
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    cursor: pointer;
    will-change: transform, opacity;
}

.aipd-problem__chevron:first-child {
    margin-left: 0;
}

/* Black gradient tint overlay — top transparent → bottom dark for legibility */
.aipd-problem__chevron::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.18) 0%,
            rgba(0, 0, 0, 0.50) 50%,
            rgba(10, 20, 40, 0.86) 100%);
    z-index: 1;
    transition: opacity 0.6s ease, background 0.6s ease;
}


/* Content layout: number top, text bottom */
.aipd-problem__chevron-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    padding: 32px 22% 32px 22%;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* All chevrons share the same shape now, so no first-child padding override needed */

/* Number sits in the top-left corner */
.aipd-problem__chevron-num {
    font-family: var(--font-heading);
    font-size: clamp(28px, 2.8vw, 44px);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
    flex-shrink: 0;
}

/* Title + body block — centered vertically with auto margins, with gap from number */
.aipd-problem__chevron-text {
    margin: auto 0;
    padding-top: 36px;       /* visual gap below number */
    padding-bottom: 36px;
    text-align: center;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Title — prominent, always visible, centered */
.aipd-problem__chevron-title {
    font-family: var(--font-heading) !important;
    font-size: clamp(20px, 1.9vw, 26px) !important;
    font-weight: 600 !important;
    line-height: 1.18 !important;
    color: var(--paper) !important;
    margin: 0 0 14px 0 !important;
    letter-spacing: -0.5px !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

/* Body — hover reveals, centered with the title.
   Heavier weight + full paper colour + a two-layer shadow so it
   stays legible over whatever photo sits behind the chevron. */
.aipd-problem__chevron-body {
    font-family: var(--font-body) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
    color: var(--paper) !important;
    margin: 0 auto !important;
    max-width: 240px;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85),
                 0 1px 4px rgba(0, 0, 0, 0.6);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover state — soft lift + scale zoom (preserves image aspect ratio),
   deeper overlay, body reveals */
.aipd-problem__chevron:hover {
    transform: translateX(6px) translateY(-6px) scale(1.04);
    z-index: 5;
}

.aipd-problem__chevron:hover::before {
    /* Darker mid + bottom on hover so the body text reads cleanly. */
    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.30) 0%,
            rgba(0, 0, 0, 0.70) 50%,
            rgba(8, 14, 28, 0.95) 100%);
}

.aipd-problem__chevron:hover .aipd-problem__chevron-text {
    transform: translateY(-2px);
}

.aipd-problem__chevron:hover .aipd-problem__chevron-body {
    max-height: 200px;
    opacity: 1;
}

/* Scroll-reveal stagger using --aipd-delay custom property */
.aipd-problem__chevron.aipd-reveal {
    opacity: 0;
    transform: translateY(36px) scale(0.97);
    transition:
        opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1) var(--aipd-delay, 0ms),
        transform 0.95s cubic-bezier(0.22, 1, 0.36, 1) var(--aipd-delay, 0ms);
}

.aipd-problem__chevron.aipd-reveal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Restore hover transform on revealed chevrons */
.aipd-problem__chevron.aipd-reveal.is-visible:hover {
    transform: translateX(6px) translateY(-6px) scale(1);
}

/* Sequential 1→2→3→4 reveal — all four chevrons get `.is-revealed`
   together (the IntersectionObserver fires once on entry), but each
   one's `--aipd-delay` inline value (0 / 320 / 640 / 960 ms) staggers
   the transition start, so they appear one after another. */
.aipd-problem__chevron--seq {
    opacity: 0;
    transform: translateX(-34px) scale(0.96);
    transition:
        opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1) var(--aipd-delay, 0ms),
        transform 0.95s cubic-bezier(0.22, 1, 0.36, 1) var(--aipd-delay, 0ms);
}
.aipd-problem__chevron--seq.is-revealed {
    opacity: 1;
    transform: translateX(0) scale(1);
}
.aipd-problem__chevron--seq.is-revealed:hover {
    transform: translateX(6px) translateY(-6px) scale(1);
}

/* Bottom: 4-column numbered grid */
.aipd-problem__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding-top: 60px;
}

.aipd-problem__col {
    padding: 0 28px;
    border-left: 1px solid var(--aipd-light);
    min-height: 200px;
}
.aipd-problem__col:first-child { border-left: none; padding-left: 0; }
.aipd-problem__col:last-child { padding-right: 0; }

.aipd-problem__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--aipd-navy);
    color: var(--aipd-white);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 24px;
}

.aipd-problem__title {
    font-family: var(--font-heading) !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    color: var(--aipd-navy) !important;
    letter-spacing: -0.4px !important;
    margin: 0 0 16px 0 !important;
}

.aipd-problem__body {
    font-family: var(--font-body) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--aipd-slate) !important;
    margin: 0 !important;
}

@media (max-width: 1024px) {
    .aipd-problem__top { grid-template-columns: 1fr; gap: 32px; padding-bottom: 60px; }
    .aipd-problem__intro { padding-left: 0; border-left: none; border-top: 1px solid var(--aipd-light); padding-top: 24px; }
    .aipd-problem__grid { grid-template-columns: repeat(2, 1fr); gap: 48px 0; padding-top: 48px; }
    .aipd-problem__col:nth-child(odd) { border-left: none; padding-left: 0; }
    .aipd-problem__col:nth-child(2) { padding-right: 0; }
    .aipd-problem__chevrons { margin: 56px -16px 24px; }
    .aipd-problem__chevron { aspect-ratio: 4 / 5; }
}
@media (max-width: 600px) {
    .aipd-problem { padding: 80px 0 100px; }
    .aipd-problem__inner { padding: 0 24px; }
    .aipd-problem__grid { grid-template-columns: 1fr; gap: 40px; }
    .aipd-problem__col { border-left: none !important; padding: 0 !important; }
    .aipd-problem__heading { font-size: clamp(32px, 8vw, 48px) !important; }
    .aipd-problem__chevrons {
        margin: 40px -24px 32px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 0 12px;
    }
    .aipd-problem__chevron {
        flex: 0 0 70%;
        aspect-ratio: 3 / 4;
        scroll-snap-align: center;
    }
}

/* Smooth scroll + offset for fixed nav */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

/* ===========================================
   What AIPD Does — vorszk-inspired editorial section
   Top: split editorial intro (statement + label/lede/CTA)
   Bottom: numbered timeline of services
=========================================== */
.aipd-what {
    background: var(--cream);
    color: var(--ink);
    padding: 160px 0 180px;
    width: 100%;
    overflow: hidden;
}

.aipd-what__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
}

/* TOP: split editorial intro */
.aipd-what__intro {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 80px;
    align-items: end;
    padding-bottom: 120px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    margin-bottom: 100px;
}

.aipd-what__label {
    font-family: var(--font-mono) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--ochre) !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    margin: 0 0 32px 0 !important;
}
.aipd-what__label .num {
    letter-spacing: -0.05em;
    margin-right: 4px;
}

.aipd-what__statement {
    font-family: var(--font-heading) !important;
    /* Brand Display XL territory but pulled down so it aligns with other
       page H2s rather than dwarfing them — was 48→96, now 44→72 */
    font-size: clamp(44px, 5.4vw, 72px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.025em !important;
    font-weight: 500 !important;
    color: var(--ink) !important;
    margin: 0 0 36px 0 !important;
}

.aipd-what__statement em {
    font-family: var(--font-heading) !important;
    font-style: normal !important;
    font-weight: 300 !important;
    color: var(--sage) !important;
}

.aipd-what__bullet {
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--muted) !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: 12px;
}

.aipd-what__bullet-mark {
    color: var(--aipd-sage);
    font-size: 10px;
    line-height: 1;
}

.aipd-what__intro-right {
    padding-bottom: 8px;
}

.aipd-what__lede {
    font-family: var(--font-body) !important;
    font-size: 19px !important;
    line-height: 1.55 !important;
    color: var(--slate) !important;
    margin: 0 0 40px 0 !important;
    max-width: 480px;
}

.aipd-what__lede em {
    font-family: var(--font-body) !important;
    font-style: normal !important;
    font-weight: 300 !important;
    color: var(--sage) !important;
}

.aipd-what__cta {
    display: inline-flex !important;
    align-items: center;
    gap: 14px;
    background: var(--sage);
    border: 1px solid var(--sage);
    border-radius: 999px;
    padding: 14px 8px 14px 24px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--paper);
    text-decoration: none;
    transition: background 0.3s ease, border-color 0.3s ease, padding 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.aipd-what__cta:hover {
    background: var(--forest);
    border-color: var(--forest);
    color: var(--paper);
    padding-left: 30px;
}

.aipd-what__cta-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--paper);
    color: var(--sage);
    font-size: 16px;
    font-weight: 600;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.aipd-what__cta:hover .aipd-what__cta-arrow {
    transform: translateX(4px);
    background: var(--paper);
    color: var(--forest);
}

/* BOTTOM: numbered timeline */
.aipd-what__timeline {
    display: flex;
    flex-direction: column;
}

.aipd-what__step {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 60px;
    padding: 40px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.10);
    align-items: start;
    transition: padding 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.aipd-what__step:last-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}

.aipd-what__step:hover {
    padding-left: 16px;
}

.aipd-what__step-num {
    font-family: var(--font-heading);
    font-size: 64px;
    font-weight: 300;
    color: var(--aipd-sage);
    line-height: 1;
    letter-spacing: -2px;
}

.aipd-what__step-content {
    padding-top: 18px;
    max-width: 720px;
}

.aipd-what__step-title {
    font-family: var(--font-heading) !important;
    font-size: clamp(24px, 2.4vw, 32px) !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    color: var(--ink) !important;
    letter-spacing: -0.6px !important;
    margin: 0 0 14px 0 !important;
}

.aipd-what__step-body {
    font-family: var(--font-body) !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
    color: var(--muted) !important;
    margin: 0 !important;
}

@media (max-width: 1024px) {
    .aipd-what__intro {
        grid-template-columns: 1fr;
        gap: 48px;
        padding-bottom: 80px;
        margin-bottom: 60px;
    }
    .aipd-what__step {
        grid-template-columns: 100px 1fr;
        gap: 32px;
    }
    .aipd-what__step-num {
        font-size: 44px;
    }
}

@media (max-width: 600px) {
    .aipd-what { padding: 100px 0 120px; }
    .aipd-what__inner { padding: 0 24px; }
    .aipd-what__statement { font-size: clamp(36px, 11vw, 56px) !important; }
    .aipd-what__step { grid-template-columns: 1fr; gap: 8px; padding: 32px 0; }
    .aipd-what__step-content { padding-top: 0; }
    .aipd-what__step-num { font-size: 36px; }
}

/* ===========================================
   aipd-what scroll-scrubbed video stage
   ===========================================
   Editorial intro (above) stays on cream. Below it, a scroll-pinned
   dark stage scrubs a cinematic Bali villa build video, with the 6
   AIPD services as fading overlay text. Last 18% of section scroll
   holds the final frame as a sustained hero shot.
*/

/* Hero ONLY: kill bottom padding + allow visible overflow so the
   scrub stage sits flush. This must NOT hit .aipd-what--intro — that
   section needs its normal bottom padding, or its cream stops short
   of the Elementor section's min-height and a white band shows. */
.aipd-what--hero {
    overflow: visible !important;
    padding-bottom: 0 !important;
}
/* Hero variant — scrub stage sits flush to the top; no leftover
   section padding/background band above it. Charcoal backdrop so the
   white cover (position:fixed) fades to reveal the dark villa stage —
   a cinematic "white veil lifts" reveal. */
.aipd-what--hero {
    padding-top: 0 !important;
    background: var(--charcoal, #141414) !important;
}

/* Hero download button — floating in the bottom-right CORNER of the
   scrub stage. Bumped in size so it reads as a deliberate CTA rather
   than an afterthought, and pinned tight to the viewport edge. */
.aipd-what__download {
    position: absolute;
    right: clamp(10px, 1.4vw, 18px);
    bottom: clamp(14px, 2.2vh, 28px);
    z-index: 25;
    width: 240px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--paper);
    border-radius: 14px;
    padding: 18px 20px;
    text-decoration: none;
    box-shadow: 0 18px 44px rgba(0,0,0,0.36);
    transition: opacity 0.45s cubic-bezier(0.22,1,0.36,1),
                transform 0.4s cubic-bezier(0.22,1,0.36,1),
                box-shadow 0.4s ease;
}
.aipd-what__download:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 54px rgba(0,0,0,0.44);
}
/* Hidden during Guidance — the card fades in from Clarity onward. */
.aipd-what__download.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
}
.aipd-what__download-text { flex: 1; min-width: 0; }
.aipd-what__download-title {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink);
    margin: 0 0 7px;
}
.aipd-what__download-cta {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.72;
}
.aipd-what__download-thumb {
    width: 50px; height: 50px;
    background: var(--clay);
    border-radius: 8px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--paper);
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
}
@media (max-width: 768px) {
    .aipd-what__download { width: 200px; right: 10px; bottom: 14px; padding: 14px 16px; }
}
.aipd-what__intro {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 80px !important;
}

/* Outer container provides the SCROLL LENGTH for the pinned stage.
   The hero now has 3 overlay steps (was 6) so we don't need 6 × 115vh —
   60vh per stage gives the playback-driven scrub enough room to play
   through smoothly without making the page feel endless. 30vh trailing
   hold-buffer so the final overlay settles before the stage un-sticks. */
.aipd-what__scrub {
    position: relative;
    width: 100%;
    height: calc(50vh * 3 + 20vh);
    background: var(--ink);
}

/* Sticky pinned stage — takes over the viewport while user scrolls
   through the scrub band. */
.aipd-what__stage {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background: var(--ink);
}

.aipd-what__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 1;
    /* Force GPU compositing so the video paints on its own layer and
       doesn't share the main paint pipeline with scroll handlers /
       observers — major smoothness win for the scrub. */
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}
.aipd-what__video.is-ready { opacity: 1; }

/* Vignette layer — three effects composited:
   1. Blue tint at 20% (cinematic dusk colour, AIPD legacy navy)
   2. Inner shadow with visible spread (premium "stroke spread"
      framing — also helps mask any source-video edge artifacts)
   3. Subtle top/bottom gradients for text legibility against
      whatever frame the video happens to be on.                 */
.aipd-what__stage-vignette {
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 3;
    /* Layer 1 (top): blue tint at 20%
       Layer 2 (bottom): legibility gradient at top + bottom */
    background:
        linear-gradient(rgba(26, 43, 74, 0.20), rgba(26, 43, 74, 0.20)),
        linear-gradient(180deg,
            rgba(0,0,0,0.35) 0%,
            rgba(0,0,0,0) 22%,
            rgba(0,0,0,0) 65%,
            rgba(0,0,0,0.45) 100%);
    /* Inner shadow stroke + spread — darkens edges noticeably,
       fades into the center so the villa stays bright. Two layers
       so the falloff feels organic, not a hard rim. */
    box-shadow:
        inset 0 0 160px 60px rgba(0, 0, 0, 0.60),
        inset 0 0 80px 0    rgba(0, 0, 0, 0.30);
}

.aipd-what__stage-loading {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(244, 236, 218, 0.55);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    z-index: 5;
    transition: opacity 0.6s ease;
}
.aipd-what__stage-loading.is-hidden { opacity: 0; pointer-events: none; }

.aipd-what__stage-hint {
    position: absolute;
    top: clamp(84px, 12vh, 120px);
    left: clamp(24px, 5vw, 64px);
    z-index: 10;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ochre);
    display: flex; align-items: center; gap: 10px;
}
.aipd-what__stage-hint::before {
    content: ''; width: 32px; height: 1px;
    background: var(--ochre);
}

/* One service per scroll band — fade in/out as scroll progresses */
.aipd-what__overlay-step {
    position: absolute;
    left: clamp(28px, 6vw, 80px);
    bottom: clamp(120px, 18vh, 200px);
    max-width: 720px;
    z-index: 10;
    pointer-events: none;
}
.aipd-what__overlay-step.is-active.is-revealed {
    pointer-events: auto;
}

/* Inner reveal — children fade up like the chapter stack:
   chip → title → body → CTA. Hidden until the video has crossed the
   band's REVEAL_FRAC threshold (set in aipd_video_scrub_script),
   then stagger in. When the band changes (or scrolls below the
   threshold), the .is-revealed class is removed and the children
   fade out together (transition-delay falls back to 0). */
/* Chip + body + CTA: fade up at staggered delays. */
.aipd-what__overlay-step .aipd-what__overlay-chip,
.aipd-what__overlay-step .aipd-what__overlay-body,
.aipd-what__overlay-step .aipd-what__overlay-cta {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.aipd-what__overlay-step.is-active.is-revealed .aipd-what__overlay-chip {
    opacity: 1; transform: translateY(0);
    transition-delay: 0s;
}
/* Body "pops up" AFTER the title has finished typing — translateY +
   slight scale-up with an overshoot easing so it lands with a pop. */
.aipd-what__overlay-step .aipd-what__overlay-body {
    transform: translateY(18px) scale(0.96);
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.aipd-what__overlay-step.is-active.is-revealed .aipd-what__overlay-body {
    opacity: 1; transform: translateY(0) scale(1);
    transition-delay: 1.15s;
}
.aipd-what__overlay-step.is-active.is-revealed .aipd-what__overlay-cta {
    opacity: 1; transform: translateY(0);
    transition-delay: 1.45s;
}

/* Title typewriter — each character is wrapped by JS in a
   <span class="char" style="--i:N">. Chars fade + lift in sequence
   so the title "types itself" out left-to-right. The label container
   stays at opacity:1 (so layout space is reserved); the chars handle
   visibility. Reverse direction un-types in the same stagger. */
.aipd-what__overlay-step .aipd-what__overlay-label {
    opacity: 1;
}
/* Word wrappers — keep characters within a word together so the
   title line-breaks word-by-word, not mid-word. */
.aipd-what__overlay-label .word {
    display: inline-block;
    white-space: nowrap;
}
.aipd-what__overlay-label .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.28s ease calc(var(--i, 0) * 22ms),
                transform 0.32s ease calc(var(--i, 0) * 22ms);
}
.aipd-what__overlay-step.is-active.is-revealed .aipd-what__overlay-label .char {
    opacity: 1;
    transform: translateY(0);
}

/* CTA pill — matches the chapter-stack CTA (forest bg, paper text). */
.aipd-what__overlay-cta {
    display: inline-block;
    margin-top: clamp(12px, 2vh, 24px);
    padding: 10px 22px;
    background: var(--sage);
    color: var(--paper) !important;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 8px;
    text-decoration: none;
}
.aipd-what__overlay-cta:hover {
    background: #5c6857;
    color: var(--paper) !important;
}

/* (.aipd-what__overlay-num removed — the chip pill + the dot
   indicator at the bottom now cover step identity; the big "01."
   was redundant.) */

/* Chip wrapper — positions the .aipd-chip pill above the chapter
   title. The pill itself (sage / ochre / clay, with icon + text) is
   styled by the shared .aipd-chip block. */
.aipd-what__overlay-chip {
    margin: 0 0 14px 0;
}

/* Chapter chip "fill on reveal" — mirrors the chapter stack's chip
   animation: bg pill scales in from the left, then icon, then text. */
.aipd-what__overlay-chip .aipd-chip__bg {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.aipd-what__overlay-chip .aipd-chip__icon {
    opacity: 0;
    transition: opacity 0.35s ease;
}
.aipd-what__overlay-chip .aipd-chip__text {
    display: inline-block;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.aipd-what__overlay-step.is-active.is-revealed .aipd-what__overlay-chip .aipd-chip__bg {
    transform: scaleX(1);
}
.aipd-what__overlay-step.is-active.is-revealed .aipd-what__overlay-chip .aipd-chip__icon {
    opacity: 1;
    transition-delay: 0.25s;
}
.aipd-what__overlay-step.is-active.is-revealed .aipd-what__overlay-chip .aipd-chip__text {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.35s;
}

.aipd-what__overlay-label em {
    font-style: normal;
    font-weight: inherit;
    color: inherit;
}

.aipd-what__overlay-label {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(36px, 4.2vw, 64px);
    line-height: 1.04;
    letter-spacing: -0.012em;
    color: var(--paper);
    margin-bottom: clamp(16px, 2.2vh, 24px);
    text-shadow: 0 2px 24px rgba(0,0,0,0.45);
    max-width: 18ch;
}

.aipd-what__overlay-body {
    font-family: var(--font-body);
    font-size: clamp(15px, 1.2vw, 18px);
    /* Bolder + stronger shadow so it stays legible over the villa
       footage — the previous 400-weight at 88% opacity was thin. */
    font-weight: 500;
    line-height: 1.55;
    color: var(--paper);
    margin: 0;
    max-width: 52ch;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75),
                 0 1px 4px rgba(0, 0, 0, 0.55);
}

/* Progress chrome — bottom center */
.aipd-what__overlay-progress {
    position: absolute;
    bottom: clamp(28px, 4vh, 52px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex; align-items: center; gap: 18px;
    color: rgba(244, 236, 218, 0.85);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}
.aipd-what__overlay-dots { display: flex; gap: 10px; }
.aipd-what__overlay-dot {
    width: 22px;
    height: 1px;
    background: rgba(244, 236, 218, 0.22);
    transition: background 0.4s ease, transform 0.4s ease;
}
.aipd-what__overlay-dot.is-passed { background: rgba(244, 236, 218, 0.65); }
.aipd-what__overlay-dot.is-active {
    background: var(--ochre);
    transform: scaleY(2);
}

/* ============================================================
   MOBILE HERO — full-bleed video + centred text (<=768px)
   ------------------------------------------------------------
   The villa footage is 16:9 landscape. On a portrait phone the video
   fills the ENTIRE stage edge-to-edge (object-fit:cover crops it to the
   centre strip) — no charcoal card border. The chapter text is centred
   over it, and a LIGHT scrim (not the heavy desktop inner-shadow "tent")
   only darkens the top (nav/chip) and foot (dots/cue) for legibility;
   the middle stays close to the footage's true colour so the villa reads
   vibrant. The floating Property-Guide card is hidden so the scroll cue
   has nothing to collide with.
   ============================================================ */
@media (max-width: 768px) {
    /* Lighter scrim — replaces the desktop blue tint + heavy inner-shadow
       (which read as a flat dark tent on the small screen). */
    .aipd-what__stage-vignette {
        box-shadow: none;
        background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.42) 0%,
            rgba(0, 0, 0, 0.10) 20%,
            rgba(0, 0, 0, 0.08) 50%,
            rgba(0, 0, 0, 0.14) 72%,
            rgba(0, 0, 0, 0.50) 100%);
    }

    /* Chapter text — centred over the video (was pinned to the foot) */
    .aipd-what__overlay-step {
        left: 50%;
        right: auto;
        top: 50%;
        bottom: auto;
        transform: translate(-50%, -50%);
        width: min(92vw, 600px);
        max-width: none;
        text-align: center;
    }
    .aipd-what__overlay-chip { display: flex; justify-content: center; }
    /* Lift the desktop 18ch/52ch caps on mobile so the heading + body use
       the full centred block (less padding to the screen edges). */
    .aipd-what__overlay-label {
        font-size: clamp(26px, 6.8vw, 40px);
        margin-left: auto;
        margin-right: auto;
        max-width: none;
    }
    .aipd-what__overlay-body {
        font-size: clamp(13.5px, 3.4vw, 15.5px);
        margin-left: auto;
        margin-right: auto;
        max-width: none;
    }

    /* Scroll cue + progress dots over the foot of the video. Download
       card is hidden, so nothing collides; dots clear the home-indicator
       safe area. */
    .aipd-what__overlay-progress { bottom: clamp(22px, 4vh, 40px); }
    .aipd-what__stage .aipd-villa-continue { bottom: clamp(66px, 10vh, 104px); }
    .aipd-what__stage .aipd-villa-continue__label {
        white-space: nowrap;
        letter-spacing: 0.2em;
        font-size: 10.5px;
    }

    /* The floating Property-Guide card crowded the hero and collided with
       the scroll cue; hidden on phones (the guide is linked again lower on
       the page and in the closing CTA section). */
    .aipd-what__download { display: none !important; }

    .aipd-what__stage-hint { font-size: 10px; }
}

/* ===========================================
   Built for serious buyers — combined Who + Why
   Editorial layout: header → 4 audiences → divider → 6 values
=========================================== */
.aipd-fit {
    background: var(--cream);
    color: var(--ink);
    padding: 140px 0;
    width: 100%;
}

.aipd-fit__inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.aipd-fit__head {
    max-width: 880px;
    margin: 0 0 80px;
}

.aipd-fit__label {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--muted) !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    margin: 0 0 28px 0 !important;
}

.aipd-fit__heading {
    font-family: var(--font-heading) !important;
    font-size: clamp(40px, 5.4vw, 76px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.025em !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    margin: 0 0 28px 0 !important;
}

.aipd-fit__heading em {
    font-family: var(--font-heading) !important;
    font-style: normal !important;
    font-weight: 300 !important;
    color: var(--sage) !important;
}

.aipd-fit__intro {
    font-family: var(--font-body) !important;
    font-size: 19px !important;
    line-height: 1.55 !important;
    color: var(--ink-2, #1A1A1A) !important;
    font-weight: 300 !important;
    max-width: 38ch !important;
    margin: 0 !important;
}

/* Audiences: 4-column grid */
.aipd-fit__audiences {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}

.aipd-fit__audience {
    padding: 36px 28px 36px 0;
    border-right: 1px solid var(--rule-2);
    transition: padding 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.aipd-fit__audience:first-child { padding-left: 0; }
.aipd-fit__audience:last-child { border-right: none; padding-right: 0; }
.aipd-fit__audience:not(:first-child) { padding-left: 28px; }

.aipd-fit__audience:hover {
    padding-left: 36px;
}
.aipd-fit__audience:first-child:hover {
    padding-left: 8px;
}

.aipd-fit__audience-title {
    font-family: var(--font-heading) !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    color: var(--ink) !important;
    letter-spacing: -0.015em !important;
    margin: 0 0 14px 0 !important;
}

.aipd-fit__audience-body {
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: var(--muted) !important;
    margin: 0 !important;
}

/* Divider with label between audiences and values */
.aipd-fit__divider {
    display: flex;
    align-items: center;
    margin: 100px 0 56px;
    gap: 20px;
}

.aipd-fit__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--rule);
}

.aipd-fit__divider-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* Values: 3-column grid */
.aipd-fit__values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--rule);
}

.aipd-fit__value {
    padding: 40px 32px 40px 0;
    border-right: 1px solid var(--rule-2);
    border-bottom: 1px solid var(--rule);
    position: relative;
}
.aipd-fit__value:nth-child(3n) { border-right: none; padding-right: 0; }
.aipd-fit__value:not(:nth-child(3n + 1)) { padding-left: 32px; }
.aipd-fit__value:nth-last-child(-n+3) { border-bottom: none; padding-bottom: 16px; }

.aipd-fit__value-num {
    display: block;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 500;
    color: var(--sage);
    letter-spacing: 0.05em;
    margin-bottom: 18px;
}

.aipd-fit__value-title {
    font-family: var(--font-heading) !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.18 !important;
    color: var(--ink) !important;
    letter-spacing: -0.015em !important;
    margin: 0 0 12px 0 !important;
}

.aipd-fit__value-body {
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: var(--muted) !important;
    margin: 0 !important;
}

@media (max-width: 1024px) {
    .aipd-fit { padding: 100px 0; }
    .aipd-fit__audiences { grid-template-columns: repeat(2, 1fr); border-bottom: none; }
    .aipd-fit__audience { border-bottom: 1px solid var(--rule-2); padding: 32px 28px !important; }
    .aipd-fit__audience:nth-child(2n) { border-right: none; }
    .aipd-fit__audience:first-child { padding-left: 0 !important; }
    .aipd-fit__audience:last-child { border-bottom: none; }
    .aipd-fit__values { grid-template-columns: repeat(2, 1fr); }
    .aipd-fit__value { padding: 32px 28px 32px 28px !important; border-bottom: 1px solid var(--rule-2); }
    .aipd-fit__value:nth-child(2n) { border-right: none; padding-right: 0 !important; }
    .aipd-fit__value:nth-child(2n + 1) { padding-left: 0 !important; }
    .aipd-fit__divider { margin: 60px 0 40px; }
}

@media (max-width: 600px) {
    .aipd-fit { padding: 80px 0; }
    .aipd-fit__inner { padding: 0 24px; }
    .aipd-fit__head { margin-bottom: 48px; }
    .aipd-fit__audiences,
    .aipd-fit__values { grid-template-columns: 1fr; }
    .aipd-fit__audience,
    .aipd-fit__value { padding: 28px 0 !important; border-right: none; }
    .aipd-fit__audience:last-child,
    .aipd-fit__value:last-child { border-bottom: none; }
}

/* ===========================================
   Mission Statement
   findrealestate-style scroll-fade words +
   vorszk-style sans/italic-serif typography mix
=========================================== */
.aipd-mission {
    background: var(--aipd-offwhite);
    padding: 200px 0;
    width: 100%;
    overflow: hidden;
}

.aipd-mission__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
}

.aipd-mission__label {
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--aipd-sage) !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    margin: 0 0 56px 0 !important;
}

.aipd-mission__statement {
    font-family: var(--font-heading) !important;
    font-size: clamp(36px, 5.4vw, 80px) !important;
    line-height: 1.1 !important;
    letter-spacing: -1.5px !important;
    font-weight: 500 !important;
    color: var(--aipd-navy) !important;
    max-width: 1180px;
    margin: 0 !important;
}

.aipd-mission__statement em {
    font-family: var(--font-heading) !important;
    font-style: normal !important;
    font-weight: 300 !important;
    color: var(--sage) !important;
}

.aipd-mission__statement .word {
    display: inline-block;
    color: rgba(26, 43, 74, 0.18);
    transition: color 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.aipd-mission__statement .word.is-active {
    color: var(--aipd-navy);
}

@media (max-width: 768px) {
    .aipd-mission { padding: 120px 0; }
    .aipd-mission__inner { padding: 0 24px; }
    .aipd-mission__label { font-size: 11px !important; margin-bottom: 32px !important; }
    .aipd-mission__statement { font-size: clamp(28px, 7vw, 44px) !important; }
}

/* ===========================================
   Chapter Stack — Floema-style pinned stage
   One sticky .aipd-stage holds all 3 photos + content overlaid.
   3 trigger spacers below the stage drive the scroll length.
   As user scrolls: photo cross-fades, content cross-fades, the heading
   "writes itself" word-by-word, the CTA pops up, the horizontal sage
   line at vertical middle fills left → right with 3 marker dots that
   light up as the fill arrives, and chip-buttons (Guidance/Clarity/
   Ownership) paint in left → right with their own scroll-driven fill.
=========================================== */

/* Ensure no Elementor wrapper breaks the sticky context */
.elementor-section:has(.aipd-stack),
.elementor-container:has(.aipd-stack),
.elementor-column:has(.aipd-stack),
.elementor-widget-wrap:has(.aipd-stack),
.elementor-widget:has(.aipd-stack),
.elementor-widget-container:has(.aipd-stack),
.elementor-element:has(.aipd-stack) {
    overflow: visible !important;
    transform: none !important;
    will-change: auto !important;
    -webkit-transform: none !important;
}

.aipd-stack {
    position: relative;
    width: 100%;
    background: var(--ink);
    margin: 0;
    padding: 0;
}

/* The pinned stage — stays in viewport for the full scroll-length of
   the chapter stack while the three trigger spacers below it scroll past. */
.aipd-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background-color: var(--ink);
}

/* Three overlaid background photos — each one's translateY is driven
   directly by scroll progress in JS (no CSS transition). As the user
   scrolls, the next image rises up from below in real time, the previous
   image slides up past the viewport. Feels like a continuous unrolling
   film tied to the scroll wheel. The `.is-active` class is kept as an
   initial-paint hint so the first photo renders correctly before JS runs. */
.aipd-stage__photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: translateY(100%);
    z-index: 0;
    will-change: transform;
}
.aipd-stage__photo.is-active { transform: translateY(0); }

/* Heavy navy gradient + inset vignette overlay covering whichever photo
   is active. Image stays sharp; only the wash darkens it. */
.aipd-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(105deg,
            rgba(10, 18, 32, 0.88) 0%,
            rgba(20, 35, 60, 0.72) 45%,
            rgba(15, 25, 45, 0.45) 100%),
        linear-gradient(to top,
            rgba(10, 15, 25, 0.60) 0%,
            transparent 50%);
    z-index: 1;
    pointer-events: none;
}
.aipd-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow:
        inset 0 0 220px 60px rgba(0, 0, 0, 0.40),
        inset 0 0 50px 8px rgba(0, 0, 0, 0.18);
    z-index: 2;
    pointer-events: none;
}

/* Trigger spacers — each one drives the scroll for a single chapter.
   Total chapter stack length = chapter_count × trigger_height. The 150vh
   default gave a good "weighted" feel for the original 3-chapter design;
   for higher chapter counts we shrink it so the entire stack doesn't
   monopolise the page (e.g. 6 chapters × 150vh = 900vh, way too long).
   The widget sets `data-chapter-count` on `.aipd-stack` for this lookup. */
.aipd-trigger {
    position: relative;
    height: 150vh;
    width: 100%;
}
.aipd-stack[data-chapter-count="4"] .aipd-trigger { height: 48vh; }
.aipd-stack[data-chapter-count="5"] .aipd-trigger { height: 42vh; }
.aipd-stack[data-chapter-count="6"] .aipd-trigger { height: 36vh; }
.aipd-stack[data-chapter-count="7"] .aipd-trigger { height: 32vh; }
.aipd-stack[data-chapter-count="8"] .aipd-trigger { height: 28vh; }

/* Per-chapter index (01/02/03) — single element, JS updates the text.
   Sits above-left of the timeline. */
.aipd-chapter__index {
    position: absolute;
    top: calc(50vh - 28px);
    left: clamp(28px, 6vw, 80px);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--paper);
    letter-spacing: 0.18em;
    z-index: 4;
    opacity: 0.85;
    margin: 0;
}

/* Horizontal sage progress line at vertical middle of the section */
.aipd-stack__midline {
    position: absolute;
    top: 50vh;
    left: 0; right: 0;
    height: 0;
    z-index: 20;
    pointer-events: none;
}
.aipd-stack__midline-track {
    position: absolute;
    left: clamp(28px, 6vw, 80px);
    right: clamp(28px, 6vw, 80px);
    top: 0;
    height: 1px;
    background: transparent;
}
.aipd-stack__midline-fill {
    position: absolute;
    left: clamp(28px, 6vw, 80px);
    top: 0;
    width: 0%;
    height: 1px;
    max-width: calc(100% - 2 * clamp(28px, 6vw, 80px));
    background: #a8b8a0;
}
/* Marker dots along the horizontal line — invisible until the fill reaches them */
.aipd-stack__midline-marker {
    position: absolute;
    top: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #a8b8a0;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.aipd-stack__midline-marker.is-reached {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 0 4px rgba(168, 184, 160, 0.18);
}
/* Dynamic marker positioning — `--aipd-step-frac` is set inline in PHP and
   ranges from 0 (left clamp) to 1 (right clamp). Works for any N chapters. */
.aipd-stack__midline-marker {
    left: calc(clamp(28px, 6vw, 80px) + (100% - 2 * clamp(28px, 6vw, 80px)) * var(--aipd-step-frac, 0));
}

/* Chip-buttons sit above the line at chapter-specific points. Label
   visibility (overall fade-in) is controlled by `.is-reached`; the inner
   bg/icon/text fill is scroll-driven via JS for proper progress feel. */
.aipd-stack__midline-label {
    position: absolute;
    bottom: 22px;
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s linear;
    will-change: opacity;
}
/* Labels follow the same fractional positioning as the markers but with
   a small extra inset on each side so the first/last chips don't overflow
   off the track edges — chips are translateX(-50%) so half their width
   sits beyond the position point. The 60px inset keeps even chunky labels
   like "Coordinate" and "Visibility" safely inside the viewport. */
.aipd-stack__midline-label {
    left: calc(clamp(28px, 6vw, 80px) + 60px + (100% - 2 * clamp(28px, 6vw, 80px) - 120px) * var(--aipd-step-frac, 0));
}
.aipd-stack__midline-label.is-reached { opacity: 1; }

/* Inner chip elements — scroll-driven by JS (no CSS transitions here) */
.aipd-stack__midline-label .aipd-chip__bg {
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}
.aipd-stack__midline-label .aipd-chip__icon {
    opacity: 0;
    will-change: opacity;
}
.aipd-stack__midline-label .aipd-chip__text {
    display: inline-block;
    transform: translateY(12px);
    opacity: 0;
    will-change: opacity, transform;
}

/* Chip pill (Floema category-tag pattern). Box-shadow is JS-driven so
   the "lift" only appears as the chip fills in — no stray shadow ring
   visible around an empty chip outline before the bg has painted. */
.aipd-chip {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 10px;
    border-radius: 30px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    white-space: nowrap;
    box-shadow: none;
}
.aipd-chip__bg {
    position: absolute;
    inset: 0;
    border-radius: 30px;
    z-index: 0;
}
.aipd-chip__icon,
.aipd-chip__text {
    position: relative;
    z-index: 1;
}
.aipd-chip__icon {
    display: inline-flex;
    width: 14px; height: 14px;
}
.aipd-chip--sage  .aipd-chip__bg { background: #a8b8a0; }
.aipd-chip--ochre .aipd-chip__bg { background: var(--ochre); }
.aipd-chip--clay  .aipd-chip__bg { background: var(--clay); }
.aipd-chip--clay  { color: var(--paper); }

/* Fixed content panel — three chapter blocks overlaid, JS cross-fades */
.aipd-stage__content {
    position: absolute;
    top: calc(50vh + 32px);
    left: clamp(28px, 7vw, 120px);
    width: min(620px, 60vw);
    z-index: 3;
}
.aipd-stage__chapter {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    text-align: left;
    color: #fff;
    opacity: 0;
    transition: opacity 0.55s var(--ease-silk);
    pointer-events: none;
}
.aipd-stage__chapter.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* Title — Floema spec, Manrope 400 ~40px, no text-shadow */
.aipd-chapter .aipd-chapter__title,
.aipd-stage__chapter .aipd-chapter__title {
    font-family: var(--font-heading) !important;
    font-size: clamp(28px, 3.4vw, 40px) !important;
    font-weight: 400 !important;
    line-height: 1.05 !important;
    color: #fff !important;
    margin: 0 0 34px 0 !important;
    letter-spacing: -0.04em !important;
    max-width: 520px;
    text-shadow: none;
}
.aipd-chapter__title em {
    font-family: var(--font-heading) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    color: #a8b8a0 !important;
    text-shadow: none;
}

/* Title "writes itself" — each word fades + lifts in sequence (JS wraps
   words in <span class="word"> with --i index) */
.aipd-chapter__title .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 65ms),
                transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 65ms);
    will-change: opacity, transform;
}
.aipd-stage__chapter.is-active .aipd-chapter__title .word {
    opacity: 1;
    transform: translateY(0);
}

/* Body — fades up after the title starts writing */
.aipd-stage__chapter .aipd-chapter__body {
    font-family: var(--font-body) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    max-width: 460px !important;
    margin: 0 0 32px 0 !important;
    text-shadow: none;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.7s,
                transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.7s;
}
.aipd-stage__chapter.is-active .aipd-chapter__body {
    opacity: 1;
    transform: translateY(0);
}

/* Chapter CTA — small forest pill, pops up from below after the body */
.aipd-chapter__cta {
    display: inline-block !important;
    padding: 9px 20px;
    background: var(--forest);
    color: var(--paper) !important;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.25s;
}
.aipd-chapter__cta:hover { background: #1e2e1e; }

.aipd-stage__chapter .aipd-chapter__cta {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1) 1.4s,
                transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) 1.4s,
                background 0.25s;
}
.aipd-stage__chapter.is-active .aipd-chapter__cta {
    opacity: 1;
    transform: translateY(0);
}

/* "Scroll to Explore" — shown at load, fades the moment scroll begins */
.aipd-stack__scroll-hint {
    position: absolute;
    bottom: 32px;
    left: 0; right: 0;
    text-align: center;
    z-index: 4;
    pointer-events: none;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--paper);
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.75s var(--ease-silk),
                transform 0.75s var(--ease-silk);
}
.aipd-stack__scroll-hint.is-hidden {
    opacity: 0;
    transform: translateY(8px);
}
.aipd-stack__scroll-hint span { display: inline-block; opacity: 0.8; }

/* Floating Property Guide download card — bottom-right, hidden on
   chapter 1, fades in for chapters 2 & 3 */
.aipd-stack__download-card {
    position: absolute;
    right: 20px;
    bottom: 24px;
    width: 184px;
    z-index: 25;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transform-origin: bottom right;
    transition: opacity 1.1s var(--ease-silk),
                transform 1.2s var(--ease-silk);
    will-change: opacity, transform;
}
.aipd-stack__download-card.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.aipd-stack__download-card-inner {
    background: var(--paper);
    color: var(--ink);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(0,0,0,0.22);
}
.aipd-stack__download-card-text { flex: 1; min-width: 0; }
.aipd-stack__download-card-title {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 6px;
}
.aipd-stack__download-card-cta {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.7;
}
.aipd-stack__download-card-thumb {
    width: 40px; height: 40px;
    background: var(--clay);
    border-radius: 5px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--paper);
    font-family: var(--font-heading);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

@media (max-width: 768px) {
    .aipd-stage__content {
        left: clamp(20px, 5vw, 40px);
        width: calc(100% - 40px);
    }
    .aipd-chapter__title { font-size: clamp(24px, 6vw, 32px) !important; }
    .aipd-chapter__body { font-size: 15px !important; }
    .aipd-stack__download-card { display: none; }
}

/* ===========================================
   Reveal-on-scroll utility
   Apply via .aipd-reveal — IntersectionObserver
   adds .is-visible when in view
=========================================== */
.aipd-reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity var(--dur-3) var(--ease-silk),
                transform var(--dur-3) var(--ease-silk);
}
.aipd-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.aipd-reveal--delay-1 { transition-delay: 0.1s; }
.aipd-reveal--delay-2 { transition-delay: 0.2s; }
.aipd-reveal--delay-3 { transition-delay: 0.3s; }

/* ===================
   Mobile
=================== */
@media (max-width: 768px) {
    h1 { font-size: clamp(26px, 6vw, 44px); }
    h2 { font-size: clamp(22px, 5vw, 34px); }

    .aipd-btn-primary,
    .aipd-btn-secondary {
        width: 100%;
        text-align: center;
        padding: 14px 24px;
    }
}


/* ============================================================
   ── MOCKUP-ALIGNED SECTIONS ──────────────────────────────────
   Per the AIPD mockup (01-design/references/aipd-website-mockup.html).
   Brand-aligned typography (Manrope / Inter / JetBrains Mono),
   colour blocks (paper · cream · charcoal · forest · ink · sage),
   editorial layout with hairline rules and number-led eyebrows.
   ============================================================ */

/* Generic mockup section reset */
.aipd-about,
.aipd-process,
.aipd-developer,
.aipd-trust,
.aipd-cta,
.aipd-mission,
.aipd-footer {
    width: 100%;
    box-sizing: border-box;
}

.aipd-about__inner,
.aipd-process__inner,
.aipd-developer__inner,
.aipd-trust__inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* Unified dash-led eyebrow used across every section.
   JetBrains Mono at 13px, matching the "OUR APPROACH" reference size.
   Brand-aligned: editorial mono labels render in OCHRE (the brand's
   "gold" accent) wherever readable. Sage stays the body emphasis colour;
   ochre is reserved for these mono moments. */
.aipd-problem__eyebrow,
.aipd-about__eyebrow,
.aipd-process__eyebrow,
.aipd-developer__eyebrow,
.aipd-trust__eyebrow {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ochre);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 28px 0;
}
.aipd-problem__eyebrow .num,
.aipd-about__eyebrow .num,
.aipd-process__eyebrow .num,
.aipd-developer__eyebrow .num,
.aipd-trust__eyebrow .num {
    color: var(--ochre);
    font-weight: 500;
    letter-spacing: -0.05em;  /* tighten the dashes so they read as a single mark */
}

/* ====== ABOUT ====== */
.aipd-about { background: var(--paper); padding: 64px 0 72px; }
.aipd-about__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}
.aipd-about__left { }
.aipd-about__heading {
    font-family: var(--font-heading) !important;
    font-size: clamp(32px, 4vw, 52px) !important;
    font-weight: 600 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.1 !important;
    color: var(--ink) !important;
    margin: 0 0 28px 0 !important;
}
.aipd-about__heading em {
    font-style: normal !important;
    font-weight: 300 !important;
    color: var(--sage) !important;
}
.aipd-about__visual {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    /* Match the source image's 3:2 aspect ratio (2048×1366) so the photo
       fits the container exactly — no cropping top OR bottom. Height now
       scales with container width. */
    aspect-ratio: 3 / 2;
    margin-top: 24px;
}
.aipd-about__visual img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.aipd-about__visual-caption {
    position: absolute; inset: auto 0 0 0;
    padding: 20px 24px;
    background: linear-gradient(to top, rgba(26,43,74,0.9), transparent);
}
.aipd-about__visual-caption span {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ochre);
}
.aipd-about__right {
    align-self: start;
    /* Drop the paragraph column down so it aligns roughly with where the
       photo starts on the left, not with the heading at the very top */
    padding-top: clamp(80px, 7vw, 120px);
}
.aipd-about__right p {
    font-family: var(--font-body) !important;
    font-size: 17px !important;
    color: var(--aipd-slate) !important;
    line-height: 1.7 !important;
    margin: 0 0 20px 0 !important;
}
.aipd-about__right p:last-child { margin-bottom: 0 !important; }

/* ====== ABOUT — scroll-reveal stagger ======
   When the section enters the viewport, an IntersectionObserver (in
   aipd_inline_scroll_script) toggles `.is-on` on the section root. Each
   element animates in with a small translate + fade, staggered so the
   page tells the "how we solve it" story beat by beat instead of all at
   once. Subtle — these aren't hero animations, just enough motion to
   make the section feel alive as the visitor arrives. */
.aipd-about__eyebrow,
.aipd-about__heading,
.aipd-about__visual,
.aipd-about__right > p {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.aipd-about__visual {
    /* Photo gets a slightly bigger drift so it reads as the heaviest
       element settling in last. */
    transform: translateY(24px) scale(0.985);
    transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.aipd-about.is-on .aipd-about__eyebrow     { opacity: 1; transform: translateY(0); transition-delay: 0ms; }
.aipd-about.is-on .aipd-about__heading     { opacity: 1; transform: translateY(0); transition-delay: 80ms; }
.aipd-about.is-on .aipd-about__visual      { opacity: 1; transform: translateY(0) scale(1); transition-delay: 240ms; }
.aipd-about.is-on .aipd-about__right > p:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 200ms; }
.aipd-about.is-on .aipd-about__right > p:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 320ms; }
.aipd-about.is-on .aipd-about__right > p:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 440ms; }

/* Heading word-reveal — each word slides up out of its own clip rect.
   The JS in aipd_inline_scroll_script wraps each word in a span. */
.aipd-about__heading .word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    margin-right: 0.18em;
}
.aipd-about__heading .word > span,
.aipd-about__heading .word > em {
    display: inline-block;
    transform: translateY(110%);
    transition: transform 850ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}
.aipd-about.is-on .aipd-about__heading .word > span,
.aipd-about.is-on .aipd-about__heading .word > em {
    transform: translateY(0);
}
/* Word-by-word stagger using a CSS variable set inline by the JS */
.aipd-about__heading .word > span,
.aipd-about__heading .word > em {
    transition-delay: calc(180ms + var(--i, 0) * 60ms);
}

/* ====== PROCESS ====== */
.aipd-process { background: var(--paper); padding: 110px 0; }
.aipd-process__header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    margin-bottom: 80px;
    align-items: end;
}
.aipd-process__heading {
    font-family: var(--font-heading) !important;
    font-size: clamp(32px, 4vw, 52px) !important;
    font-weight: 600 !important;
    letter-spacing: -0.025em !important;
    color: var(--ink) !important;
    line-height: 1.1 !important;
    margin: 0 !important;
}
.aipd-process__heading em {
    font-style: normal !important;
    font-weight: 300 !important;
    color: var(--sage) !important;
}
.aipd-process__intro {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--aipd-slate);
    line-height: 1.7;
    margin: 0;
}
.aipd-process__steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: relative;
}
.aipd-process__steps::before {
    content: "";
    position: absolute;
    top: 28px; left: calc(10% + 4px); right: calc(10% + 4px);
    height: 1px; background: var(--aipd-light);
}
.aipd-process__step { padding: 0 16px; text-align: center; }
.aipd-process__dot {
    width: 56px; height: 56px; border-radius: 50%;
    border: 1px solid var(--aipd-light); background: var(--paper);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px; position: relative; z-index: 1;
    transition: background 0.4s var(--ease-silk),
                border-color 0.4s var(--ease-silk),
                box-shadow 0.4s var(--ease-silk);
}
.aipd-process__step:hover .aipd-process__dot {
    background: var(--sage);
    border-color: var(--sage);
    box-shadow: 0 8px 20px rgba(112,127,106,0.35);
}
.aipd-process__step:hover .aipd-process__step-n { color: var(--paper); }
.aipd-process__step-n {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--ochre);
    transition: color 0.25s;
}
.aipd-process__step-title {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}
.aipd-process__step-desc {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--aipd-slate);
    line-height: 1.5;
}
.aipd-process__table {
    margin-top: 80px;
    border: 1px solid var(--aipd-light);
    border-radius: 4px;
    overflow: hidden;
}
.aipd-process__row {
    display: grid;
    grid-template-columns: 1fr 1fr 100px;
    padding: 18px 32px;
    border-bottom: 1px solid var(--aipd-light);
    align-items: center;
}
.aipd-process__row:last-child { border-bottom: none; }
.aipd-process__row:nth-child(even) { background: var(--aipd-offwhite); }
.aipd-process__row--head {
    padding: 14px 32px;
    background: var(--charcoal) !important;
}
.aipd-process__row--head span {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ochre);
}
.aipd-process__stage {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}
.aipd-process__desc {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--aipd-slate);
    line-height: 1.4;
}
.aipd-process__pct {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--sage);
    text-align: right;
}

/* ====== DEVELOPER ====== */
.aipd-developer {
    background: var(--forest);
    padding: 110px 0;
    position: relative;
    overflow: hidden;
}
.aipd-developer__watermark {
    position: absolute;
    right: -40px; top: 50%;
    transform: translateY(-50%) rotate(90deg);
    font-family: var(--font-heading);
    font-size: 120px;
    font-weight: 800;
    color: rgba(255,255,255,0.025);
    letter-spacing: -0.04em;
    pointer-events: none;
    white-space: nowrap;
    z-index: 0;
}
.aipd-developer__inner { position: relative; z-index: 1; }
.aipd-developer__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: center;
}
.aipd-developer__eyebrow { color: var(--ochre) !important; }
.aipd-developer__eyebrow .num { color: var(--ochre); }
.aipd-developer__heading {
    font-family: var(--font-heading) !important;
    font-size: clamp(32px, 4vw, 48px) !important;
    font-weight: 600 !important;
    color: var(--paper) !important;
    letter-spacing: -0.025em !important;
    line-height: 1.1 !important;
    margin: 0 0 24px 0 !important;
}
.aipd-developer__heading em {
    font-style: normal !important;
    font-weight: 300 !important;
    color: var(--sage) !important;
}
.aipd-developer__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(112,127,106,0.2);
    border: 1px solid rgba(112,127,106,0.4);
    border-radius: 2px;
    padding: 10px 16px;
    margin-bottom: 32px;
}
.aipd-developer__badge span {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ochre);
}
.aipd-developer__star { color: var(--ochre); font-size: 14px; }
.aipd-developer__body {
    font-family: var(--font-body);
    font-size: 16px;
    color: rgba(255,255,255,0.78);
    line-height: 1.7;
    margin: 0 0 20px 0;
}
.aipd-developer__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 36px;
}
.aipd-developer__stat { padding: 28px 24px; background: rgba(255,255,255,0.03); }
.aipd-developer__stat-val {
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 700;
    color: var(--ochre);
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 6px;
}
.aipd-developer__stat-val em {
    font-style: normal;
    color: var(--ochre);
    font-size: 22px;
}
.aipd-developer__stat-label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ochre);
}
.aipd-developer__right {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.aipd-developer__card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    padding: 28px;
    transition: background 0.4s var(--ease-silk),
                border-color 0.4s var(--ease-silk),
                box-shadow 0.4s var(--ease-silk),
                transform 0.4s var(--ease-silk);
}
.aipd-developer__card:hover {
    background: rgba(112,127,106,0.15);
    border-color: rgba(112,127,106,0.3);
    box-shadow: 0 20px 50px rgba(0,0,0,0.22);
    transform: translateY(-3px);
}
.aipd-developer__card-img {
    width: calc(100% + 56px);
    margin: -28px -28px 20px -28px;
    height: 180px;
    overflow: hidden;
    border-radius: 4px 4px 0 0;
}
.aipd-developer__card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.5s ease;
}
.aipd-developer__card:hover .aipd-developer__card-img img { transform: scale(1.05); }
.aipd-developer__card-tag {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ochre);
    margin-bottom: 10px;
    display: block;
}
.aipd-developer__card-name {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    color: var(--paper);
    letter-spacing: -0.01em;
    margin-bottom: 8px;
}
.aipd-developer__card-detail {
    font-family: var(--font-body);
    font-size: 14px;
    color: rgba(255,255,255,0.45);
    line-height: 1.5;
}
.aipd-developer__card-price {
    margin-top: 14px;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    color: var(--stone);
    letter-spacing: -0.01em;
}

/* ====== TRUST (6-card) ====== */
.aipd-trust { background: var(--aipd-offwhite); padding: 110px 0; }
.aipd-trust__header { max-width: 540px; margin-bottom: 64px; }
.aipd-trust__heading {
    font-family: var(--font-heading) !important;
    font-size: clamp(32px, 4vw, 48px) !important;
    font-weight: 600 !important;
    letter-spacing: -0.025em !important;
    color: var(--ink) !important;
    line-height: 1.1 !important;
    margin: 0 0 16px 0 !important;
}
.aipd-trust__heading em {
    font-style: normal !important;
    font-weight: 300 !important;
    color: var(--sage) !important;
}
.aipd-trust__intro {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--aipd-slate);
    line-height: 1.7;
    margin: 0;
}
.aipd-trust__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}
.aipd-trust__card {
    background: var(--paper);
    padding: 40px 36px;
    border-bottom: 3px solid transparent;
    transition: border-color 0.4s var(--ease-silk),
                box-shadow 0.4s var(--ease-silk),
                transform 0.4s var(--ease-silk);
}
.aipd-trust__card:hover {
    border-color: var(--sage);
    box-shadow: 0 16px 40px rgba(0,0,0,0.07), 0 4px 12px rgba(0,0,0,0.04);
    transform: translateY(-3px);
}
.aipd-trust__title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin-bottom: 10px;
}
.aipd-trust__desc {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--aipd-slate);
    line-height: 1.65;
}

/* ====== MISSION (static centered quote on ink) ====== */
.aipd-mission {
    background: var(--ink);
    padding: 64px var(--gutter);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.aipd-mission::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(112,127,106,0.12) 0%, transparent 70%);
    pointer-events: none;
}
.aipd-mission__quote {
    position: relative;
    z-index: 1;
    font-family: var(--font-heading);
    font-size: clamp(24px, 4vw, 48px);
    font-weight: 500;
    color: var(--paper);
    letter-spacing: -0.025em;
    line-height: 1.3;
    max-width: 860px;
    margin: 0 auto 32px;
}
.aipd-mission__quote em {
    font-style: normal;
    font-weight: 300;
    color: var(--sage);
}
.aipd-mission__attr {
    position: relative;
    z-index: 1;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ochre);
    margin: 0;
}

/* ====== AIPD secondary pages (Contact + Resources) ======
   Lightweight page wrapper that hosts the form shortcodes. Matches the
   homepage section rhythm (cream/paper bg, 64px vertical padding, JetBrains
   Mono eyebrow, Manrope display heading, Inter lede paragraph). The form
   sits beneath — full width on mobile, max-w 640 (contact) or 480 (resources)
   on desktop. */
.aipd-page {
    background: var(--paper);
    padding: clamp(80px, 10vh, 120px) 24px 80px;
    min-height: calc(100vh - 200px);
}
.aipd-page--contact { background: var(--cream, #EDE6D6); }
.aipd-page__inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: left;
}
.aipd-page__eyebrow {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ochre);
    margin: 0 0 24px;
}
.aipd-page__eyebrow .num { color: var(--ochre); letter-spacing: -0.05em; margin-right: 6px; }
.aipd-page__heading {
    font-family: var(--font-heading);
    font-size: clamp(34px, 4.6vw, 56px);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.06;
    color: var(--ink);
    margin: 0 0 24px;
}
.aipd-page__heading em {
    font-family: var(--font-heading);
    font-style: normal;
    font-weight: 300;
    color: var(--sage);
}
.aipd-page__lede {
    font-family: var(--font-body);
    font-size: 17.5px;
    line-height: 1.6;
    color: var(--ink);
    max-width: 600px;
    margin: 0 0 48px;
}

/* ====== AIPD FORMS (Contact + Resources) ======
   Two flavors: full contact form (4 fields) and inline resources email
   capture (2 fields). Brand-aligned: Manrope headings, Inter inputs,
   JetBrains Mono eyebrows + monospace inputs flagged invalid via
   :invalid:not(:placeholder-shown). Honeypot is visually hidden via
   absolute positioning off-canvas (sr-only pattern). */
.aipd-form {
    max-width: 640px;
    margin: 0 auto;
    font-family: var(--font-body);
    color: var(--ink);
}
.aipd-form--resources { max-width: 480px; }

.aipd-form__form { display: flex; flex-direction: column; gap: 18px; }
.aipd-form__row { display: flex; flex-direction: column; gap: 6px; }
.aipd-form__row--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.aipd-form__row--split > div { display: flex; flex-direction: column; gap: 6px; }

.aipd-form__label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.78;
}
.aipd-form__label span { color: var(--clay); margin-left: 4px; }

.aipd-form__input,
.aipd-form__textarea {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 8px;
    padding: 12px 14px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.aipd-form__input:focus,
.aipd-form__textarea:focus {
    outline: none;
    border-color: var(--sage);
    box-shadow: 0 0 0 3px rgba(112, 127, 106, 0.18);
}
.aipd-form__textarea { resize: vertical; min-height: 110px; line-height: 1.55; }

.aipd-form__submit {
    align-self: flex-start;
    background: var(--forest);
    color: var(--paper);
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    border: none;
    border-radius: 10px;
    padding: 14px 28px;
    cursor: pointer;
    transition: background 0.4s var(--ease-silk),
                transform 0.4s var(--ease-silk),
                box-shadow 0.4s var(--ease-silk);
}
.aipd-form__submit:hover {
    background: #1e2e1e;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(44,58,42,0.28);
}
.aipd-form__submit:focus-visible {
    outline: 3px solid var(--sage);
    outline-offset: 3px;
}

.aipd-form__legal {
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink);
    opacity: 0.6;
    margin: 4px 0 0;
}

/* Honeypot — hidden off-canvas, accessible to bots but invisible to humans/SRs */
.aipd-form__hp {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    margin: -1px; padding: 0;
    white-space: nowrap;
}

/* Thank-you state */
.aipd-form__thanks {
    padding: 40px 0;
    text-align: left;
}
.aipd-form__eyebrow {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ochre);
    margin: 0 0 16px;
}
.aipd-form__eyebrow .num { color: var(--ochre); letter-spacing: -0.05em; margin-right: 6px; }
.aipd-form__thanks-heading {
    font-family: var(--font-heading);
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.12;
    color: var(--ink);
    margin: 0 0 16px;
}
.aipd-form__thanks-body {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    margin: 0;
}
.aipd-form__thanks-body a { color: var(--sage); text-decoration: underline; text-underline-offset: 3px; }
.aipd-form__thanks-body a:hover { color: var(--forest); }

/* Validation visual cue */
.aipd-form__input:invalid:not(:placeholder-shown),
.aipd-form__textarea:invalid:not(:placeholder-shown) {
    border-color: var(--clay);
}

@media (max-width: 600px) {
    .aipd-form__row--split { grid-template-columns: 1fr; }
    .aipd-form__submit { width: 100%; }
}

/* ====== CONTACT CTA (sage) ====== */
.aipd-cta {
    background: var(--sage);
    background-image: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,255,255,0.10) 0%, transparent 70%),
                      radial-gradient(ellipse 50% 80% at 80% 100%, rgba(44,58,42,0.25) 0%, transparent 60%);
    padding: 64px var(--gutter);
    text-align: center;
    position: relative;
}
.aipd-cta__eyebrow {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--stone);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 28px 0;
}
.aipd-cta__eyebrow .num {
    color: var(--paper);
    font-weight: 500;
    letter-spacing: -0.05em;
}
.aipd-cta__headline {
    font-family: var(--font-heading);
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--paper);
    line-height: 1.05;
    margin: 0 0 20px 0;
}
.aipd-cta__sub {
    font-family: var(--font-body);
    font-size: 18px;
    color: rgba(255,255,255,0.78);
    line-height: 1.6;
    max-width: 540px;
    margin: 0 auto 48px;
}
.aipd-cta__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}
.aipd-cta__btn-dark {
    font-family: var(--font-heading) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--paper) !important;
    background: var(--forest) !important;
    padding: 16px 36px !important;
    border-radius: 3px !important;
    text-decoration: none !important;
    transition: background 0.2s, transform 0.2s !important;
    display: inline-block;
}
.aipd-cta__btn-dark:hover {
    background: #1e2e1e !important;
    color: var(--paper) !important;
    transform: translateY(-1px);
}
.aipd-cta__btn-light {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    color: rgba(255,255,255,0.78);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s;
}
.aipd-cta__btn-light:hover { color: var(--paper); }
.aipd-cta__btn-light::after {
    content: "→";
    transition: transform 0.2s;
}
.aipd-cta__btn-light:hover::after { transform: translateX(4px); }

/* ====== FOOTER (charcoal, replaces theme footer on home) ====== */
.aipd-footer {
    background: var(--charcoal);
    padding: 40px var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.aipd-footer__brand {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    color: var(--paper);
}
.aipd-footer__brand span {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 400;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: block;
    margin-top: 3px;
}
.aipd-footer__links {
    display: flex;
    gap: 28px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    justify-content: center;
}
.aipd-footer__links a {
    font-family: var(--font-body);
    font-size: 13px;
    color: rgba(255,255,255,0.48);
    text-decoration: none;
    transition: color 0.35s var(--ease-silk);
}
.aipd-footer__links a:hover { color: rgba(255,255,255,0.85); }
.aipd-footer__legal {
    font-family: var(--font-mono);
    font-size: 10px;
    color: rgba(255,255,255,0.2);
    letter-spacing: 0.08em;
}

/* ====== STICKY NAV CTA (revealed on scroll) ======
   Fully responsive — position, size, and padding all scale. */
.aipd-nav-cta {
    position: absolute;
    /* Right offset scales 14px (mobile) → 32px (desktop) */
    right: clamp(14px, 2vw, 32px);
    top: 50%;
    transform: translateY(-50%) translateY(-4px);
    /* Padding matches the nav pills exactly (was 1.4vw, now 1.2vw) */
    padding: clamp(6px, 0.7vw, 8px) clamp(10px, 1.2vw, 16px);
    background: var(--clay);
    color: var(--paper) !important;
    font-family: var(--font-body) !important;       /* match the nav menu items */
    /* Font scales 10px → 11px — matches the smaller nav pills */
    font-size: clamp(10px, 0.85vw, 11px) !important;
    font-weight: 500 !important;
    letter-spacing: 0.7px !important;
    /* Match the 10px radius of the smaller nav pills */
    border-radius: 10px !important;
    text-decoration: none !important;
    text-transform: uppercase !important;            /* match the nav menu items */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    max-width: calc(100vw - 32px);
    transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease;
    z-index: 200;
}
.aipd-nav-cta.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) translateY(0);
}
.aipd-nav-cta:hover {
    background: #9a543f !important;   /* clay, darkened ~15% */
    color: var(--paper) !important;
}

/* Desktop: flow the Download CTA INLINE as the last pill in the right-hand
   cluster (after Contact) instead of floating it absolutely over the menu.
   The uppercase label widened the button and the absolute version overlapped
   the Contact pill — overlap that read as broken padding. Mobile (≤720px)
   keeps the absolute version: there the menu items are hidden, so the CTA is
   the only control and has nothing to collide with. */
@media (min-width: 721px) {
    .aipd-nav-cta {
        position: static !important;
        transform: none !important;
        display: none;
        align-items: center;
        margin-left: 6px;        /* gap from the Contact pill */
        opacity: 1;
    }
    .aipd-nav-cta.is-visible {
        display: inline-flex;
        transform: none !important;
        opacity: 1;
    }
    /* The CTA now supplies its own gap, so drop the menu's reserved margin. */
    .site-header.is-past-hero .main-menu,
    .site-header.is-past-hero nav ul,
    .site-header.is-past-hero .menu {
        margin-right: 0 !important;
    }
}

/* ====== TRUST STRIP — cream bed, charcoal numbers ======
   The Trust Strip is the FIRST Elementor section, but after the chapter
   stack is injected as a `<section>` sibling, `:nth-of-type(1)` no longer
   matches it. The injection JS tags it with `.aipd-trust-strip` so we
   can target by class. Cream surface, charcoal numbers, sage `+` / `M+`
   suffix accent, ochre mono labels underneath. */
.aipd-trust-strip {
    background: var(--paper) !important;
    padding: 56px var(--gutter) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.aipd-trust-strip .elementor-heading-title {
    font-family: var(--font-heading) !important;
    font-size: clamp(28px, 3.4vw, 44px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
    color: var(--charcoal) !important;
    line-height: 1 !important;
}
/* Sage suffix accent on the stats — wrapped by the count-up JS.
   Mockup `.hero-stat-val span { color: var(--sage); }`. */
.aipd-trust-strip .elementor-heading-title span,
.aipd-trust-strip .elementor-heading-title .aipd-stat-suffix,
.aipd-trust-strip .aipd-stat-suffix {
    color: #707F6A !important;
    font-weight: 700 !important;
}
.aipd-trust-strip .elementor-widget-text-editor p {
    font-family: var(--font-mono) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--ochre) !important;
}

/* ====== RESPONSIVE (mockup sections) ====== */
@media (max-width: 900px) {
    .aipd-about__grid,
    .aipd-process__header,
    .aipd-developer__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .aipd-trust__grid { grid-template-columns: repeat(2, 1fr); }
    .aipd-process__steps { grid-template-columns: 1fr 1fr; gap: 32px; }
    .aipd-process__steps::before { display: none; }
    .aipd-developer__stats { grid-template-columns: 1fr; }
    .aipd-footer {
        flex-direction: column;
        text-align: center;
    }
}
@media (max-width: 600px) {
    .aipd-about, .aipd-process, .aipd-developer, .aipd-trust { padding: 70px 0; }
    .aipd-trust__grid { grid-template-columns: 1fr; }
    .aipd-process__row--head,
    .aipd-process__row { grid-template-columns: 1fr; gap: 4px; padding: 14px 20px; }
    .aipd-process__pct { text-align: left; }
}

/* ============================================================
   HOW WE WORK — 6-phase zig-zag with scroll-drawn centerline
   ============================================================ */
.aipd-howwe {
  --hw-sage: var(--sage, #707f6a);
  --hw-sage-soft: var(--mist, #DDE2D8);
  --hw-sage-tint: #EEF1E8;
  --hw-sage-deep: #4F5C49;
  --hw-cream: var(--cream, #EDE6D6);
  --hw-forest: var(--forest, #2C3A2A);
  --hw-ochre: var(--ochre, #C4A86A);
  --hw-ochre-deep: #8C7438;
  --hw-clay: var(--clay, #B5634A);
  --hw-clay-deep: #7F4232;
  --hw-stone: var(--stone, #C5C0B5);
  --hw-paper: var(--paper, #fffffe);
  --hw-ink: var(--ink, #000);
  --hw-hairline: rgba(197, 192, 181, 0.45);
  --hw-spring: cubic-bezier(.34, 1.56, .64, 1);
  --hw-smooth: cubic-bezier(.22, .61, .36, 1);
  background: var(--hw-cream);
  padding: 48px 32px;
  font-family: 'Inter', sans-serif;
}
.aipd-howwe__card {
  max-width: 1280px;
  margin: 0 auto;
  background: var(--hw-paper);
  border-radius: 32px;
  padding: 44px 56px 48px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 30px 80px -40px rgba(0,0,0,.12);
  position: relative;
  overflow: hidden;
}

.aipd-howwe__header {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 40px;
}
.aipd-howwe__header-left { min-width: 0; }
.aipd-howwe__eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--hw-ochre);
  margin: 0 0 24px 0;
}
.aipd-howwe__eyebrow-dash {
  color: var(--hw-ochre);
  font-weight: 500;
  margin-right: 8px;
}
.aipd-howwe__heading {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: clamp(36px, 4.8vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--hw-ink);
  margin: 0;
}
.aipd-howwe__heading em {
  font-family: 'Manrope', sans-serif;
  font-weight: 300;
  font-style: normal;
  color: var(--hw-sage);
}
.aipd-howwe__h-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  margin-right: 0.18em;
}
.aipd-howwe__h-word > span,
.aipd-howwe__h-word > em {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 850ms var(--hw-smooth);
}
.aipd-howwe__header.is-on .aipd-howwe__h-word > span,
.aipd-howwe__header.is-on .aipd-howwe__h-word > em {
  transform: translateY(0);
}
.aipd-howwe__sub {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--hw-ink);
  margin: 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 800ms var(--hw-smooth) 700ms, transform 800ms var(--hw-smooth) 700ms;
}
.aipd-howwe__header.is-on .aipd-howwe__sub { opacity: 1; transform: translateY(0); }

.aipd-howwe__rows { position: relative; }
.aipd-howwe__centerline {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
}
.aipd-howwe__centerline-track {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 0%, var(--hw-hairline) 6%, var(--hw-hairline) 94%, transparent 100%);
}
.aipd-howwe__centerline-fill {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0;
  background: var(--hw-sage);
  transition: height 120ms ease-out;
}

.aipd-howwe__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 40px;
  position: relative;
}
.aipd-howwe__row:last-child { margin-bottom: 0; }
.aipd-howwe__row--reverse .aipd-howwe__visual { order: -1; }

.aipd-howwe__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--hw-sage-deep);
  background: var(--hw-sage-soft);
  padding: 8px 16px;
  border-radius: 100px;
  margin-bottom: 28px;
}
.aipd-howwe__chip-num { font-weight: 700; letter-spacing: .15em; color: var(--hw-ochre-deep); }
.aipd-howwe__step-h {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: var(--hw-ink);
  margin-bottom: 18px;
  max-width: 22ch;
}
.aipd-howwe__step-h em {
  font-family: 'Manrope', sans-serif;
  font-weight: 300;
  font-style: normal;
  color: var(--hw-sage);
}
.aipd-howwe__step-p {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--hw-ink);
  max-width: 44ch;
}

/* row reveal */
.aipd-howwe__chip,
.aipd-howwe__step-h,
.aipd-howwe__step-p {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--hw-smooth), transform 700ms var(--hw-smooth);
}
.aipd-howwe__visual {
  opacity: 0;
  transform: translateX(40px) scale(.97);
  transform-origin: center center;
  transition: opacity 800ms var(--hw-smooth), transform 800ms var(--hw-spring);
}
.aipd-howwe__row--reverse .aipd-howwe__visual { transform: translateX(-40px) scale(.97); }
.aipd-howwe__row.is-on .aipd-howwe__chip   { opacity: 1; transform: translateY(0); transition-delay:  60ms; }
.aipd-howwe__row.is-on .aipd-howwe__step-h { opacity: 1; transform: translateY(0); transition-delay: 160ms; }
.aipd-howwe__row.is-on .aipd-howwe__step-p { opacity: 1; transform: translateY(0); transition-delay: 260ms; }
.aipd-howwe__row.is-on .aipd-howwe__visual { opacity: 1; transform: translateX(0) scale(1); transition-delay: 200ms; }

/* visual card shell — forest → sage editorial gradient (all phases) */
.aipd-howwe__visual {
  position: relative;
  padding: 24px;
  border-radius: 28px;
  background: linear-gradient(
    135deg,
    #1F2A1F 0%,
    var(--hw-forest) 30%,
    var(--hw-sage) 100%
  );
  /* Each row was originally anchored to 320px; the small visuals can
     read fine at 200px while the bigger ones (calendar, milestones)
     are content-driven and grow beyond this anyway. */
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow:
    0 24px 60px -28px rgba(44,58,42,.65),
    inset 0 1px 0 rgba(255,255,255,.16);
  transition:
    opacity 800ms var(--hw-smooth),
    transform 800ms var(--hw-spring),
    background 900ms var(--hw-smooth);
}
.aipd-howwe__visual::before { content: none; }
.aipd-howwe__panel {
  background: var(--hw-paper);
  border-radius: 16px;
  padding: 22px 22px 20px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 12px 32px -14px rgba(0,0,0,.22);
  position: relative;
  z-index: 1;
}
.aipd-howwe__panel-h {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--hw-ink);
  margin-bottom: 4px;
}
.aipd-howwe__panel-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--hw-ochre-deep);
  margin-bottom: 18px;
}

/* Phase 1 — calendar */
.aipd-howwe .p1-cal { background: #F4F5F1; border-radius: 10px; padding: 14px; margin-bottom: 12px; }
.aipd-howwe .p1-cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.aipd-howwe .p1-cal-month { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 13px; }
.aipd-howwe .p1-cal-nav { display: flex; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(0,0,0,.4); }
.aipd-howwe .p1-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.aipd-howwe .p1-cal-dow { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--hw-ochre-deep); text-align: center; padding: 2px 0; }
.aipd-howwe .p1-cal-d { text-align: center; font-family: 'Inter', sans-serif; font-size: 11px; padding: 6px 0; border-radius: 6px; color: rgba(0,0,0,.7); }
.aipd-howwe .p1-cal-d--muted { color: rgba(0,0,0,.25); }
.aipd-howwe .p1-cal-d--sel {
  background: var(--hw-sage);
  color: var(--hw-paper);
  font-weight: 600;
  transform: scale(0);
  transition: transform 460ms var(--hw-spring) 800ms;
}
.aipd-howwe .aipd-howwe__row.is-on .p1-cal-d--sel { transform: scale(1); }
.aipd-howwe .p1-slot {
  display: flex; align-items: center; gap: 10px;
  background: #EDE5DF; color: var(--hw-clay-deep);
  border-radius: 8px; padding: 10px 12px;
  opacity: 0; transform: translateY(8px);
  transition: opacity 400ms var(--hw-smooth) 1100ms, transform 400ms var(--hw-smooth) 1100ms;
}
.aipd-howwe .aipd-howwe__row.is-on .p1-slot { opacity: 1; transform: translateY(0); }
.aipd-howwe .p1-slot-time { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 12px; }
.aipd-howwe .p1-slot-meta { font-family: 'Inter', sans-serif; font-size: 11px; opacity: .85; }

/* Phase 2 — buyer profile (5 fields cascading after panel-h + panel-sub) */
.aipd-howwe .p2-field { margin-bottom: 11px; opacity: 0; transform: translateY(8px); }
.aipd-howwe .aipd-howwe__row.is-on .p2-field { animation: aipdHowweRise .55s var(--hw-smooth) forwards; }
.aipd-howwe .aipd-howwe__row.is-on .p2-field:nth-of-type(3) { animation-delay: 500ms; }
.aipd-howwe .aipd-howwe__row.is-on .p2-field:nth-of-type(4) { animation-delay: 700ms; }
.aipd-howwe .aipd-howwe__row.is-on .p2-field:nth-of-type(5) { animation-delay: 900ms; }
.aipd-howwe .aipd-howwe__row.is-on .p2-field:nth-of-type(6) { animation-delay: 1100ms; }
.aipd-howwe .aipd-howwe__row.is-on .p2-field:nth-of-type(7) { animation-delay: 1300ms; }
@keyframes aipdHowweRise { to { opacity: 1; transform: translateY(0); } }
.aipd-howwe .p2-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--hw-ochre-deep); margin-bottom: 5px; }
.aipd-howwe .p2-val {
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; color: var(--hw-ink);
  background: #F4F5F1; border-radius: 8px; padding: 9px 12px;
  border: 1px solid var(--hw-hairline);
  display: flex; align-items: center; justify-content: space-between;
}
.aipd-howwe .p2-val .tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 100px;
}
.aipd-howwe .p2-val .tag--ochre {
  color: var(--hw-ochre-deep);
  background: rgba(196, 168, 106, 0.14);
}
.aipd-howwe .p2-val .tag--clay {
  color: var(--hw-clay-deep);
  background: rgba(181, 99, 74, 0.12);
}

/* Phase 3 — shortlist */
.aipd-howwe .p3-list { margin-top: -2px; }
.aipd-howwe .p3-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 8px; border-radius: 10px;
  opacity: 0; transform: translateX(-14px);
  transition: opacity 480ms var(--hw-smooth), transform 480ms var(--hw-smooth);
}
.aipd-howwe .aipd-howwe__row.is-on .p3-row { opacity: 1; transform: translateX(0); }
.aipd-howwe .aipd-howwe__row.is-on .p3-row[data-i="0"] { transition-delay: 600ms; }
.aipd-howwe .aipd-howwe__row.is-on .p3-row[data-i="1"] { transition-delay: 800ms; }
.aipd-howwe .aipd-howwe__row.is-on .p3-row[data-i="2"] { transition-delay: 1000ms; }
.aipd-howwe .p3-row + .p3-row { border-top: 1px solid var(--hw-hairline); }
.aipd-howwe .p3-thumb {
  width: 48px; height: 38px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--hw-forest) 0%, var(--hw-sage) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 2px rgba(44,58,42,.18);
  flex-shrink: 0;
}
.aipd-howwe .p3-body { flex: 1; min-width: 0; }
.aipd-howwe .p3-name { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 13px; color: var(--hw-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aipd-howwe .p3-loc { font-family: 'Inter', sans-serif; font-size: 11px; color: rgba(0,0,0,.55); margin-top: 2px; }
.aipd-howwe .p3-check {
  width: 22px; height: 22px; border-radius: 50%;
  background: #EDE5DF;
  border: 1.5px solid var(--hw-clay);
  box-shadow: 0 1px 2px rgba(127, 66, 50, 0.15);
  color: var(--hw-clay-deep);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
  transform: scale(0); transition: transform 380ms var(--hw-spring);
}
.aipd-howwe .aipd-howwe__row.is-on .p3-row[data-i="0"] .p3-check { transition-delay: 900ms; }
.aipd-howwe .aipd-howwe__row.is-on .p3-row[data-i="1"] .p3-check { transition-delay: 1100ms; }
.aipd-howwe .aipd-howwe__row.is-on .p3-row[data-i="2"] .p3-check { transition-delay: 1300ms; }
.aipd-howwe .aipd-howwe__row.is-on .p3-check { transform: scale(1); }

/* Phase 4 — diligence */
.aipd-howwe .p4-item { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--hw-hairline); }
.aipd-howwe .p4-item:last-child { border-bottom: 0; }
.aipd-howwe .p4-check {
  width: 20px; height: 20px; border-radius: 5px;
  border: 1.5px solid var(--hw-hairline); background: var(--hw-paper);
  display: grid; place-items: center; flex-shrink: 0;
  transition: background 400ms var(--hw-smooth), border-color 400ms var(--hw-smooth);
}
.aipd-howwe .p4-check svg {
  width: 12px; height: 12px;
  stroke: var(--hw-clay-deep); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round; fill: none;
  stroke-dasharray: 24; stroke-dashoffset: 24;
  transition: stroke-dashoffset 420ms var(--hw-smooth);
}
.aipd-howwe .aipd-howwe__row.is-on .p4-item[data-i="0"] .p4-check { background: #EDE5DF; border-color: var(--hw-clay); transition-delay: 600ms; }
.aipd-howwe .aipd-howwe__row.is-on .p4-item[data-i="1"] .p4-check { background: #EDE5DF; border-color: var(--hw-clay); transition-delay: 850ms; }
.aipd-howwe .aipd-howwe__row.is-on .p4-item[data-i="2"] .p4-check { background: #EDE5DF; border-color: var(--hw-clay); transition-delay: 1100ms; }
.aipd-howwe .aipd-howwe__row.is-on .p4-item[data-i="3"] .p4-check { background: #EDE5DF; border-color: var(--hw-clay); transition-delay: 1350ms; }
.aipd-howwe .aipd-howwe__row.is-on .p4-item[data-i="0"] .p4-check svg { stroke-dashoffset: 0; transition-delay: 700ms; }
.aipd-howwe .aipd-howwe__row.is-on .p4-item[data-i="1"] .p4-check svg { stroke-dashoffset: 0; transition-delay: 950ms; }
.aipd-howwe .aipd-howwe__row.is-on .p4-item[data-i="2"] .p4-check svg { stroke-dashoffset: 0; transition-delay: 1200ms; }
.aipd-howwe .aipd-howwe__row.is-on .p4-item[data-i="3"] .p4-check svg { stroke-dashoffset: 0; transition-delay: 1450ms; }
.aipd-howwe .p4-body { flex: 1; }
.aipd-howwe .p4-title { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 13px; color: var(--hw-ink); }
.aipd-howwe .p4-meta { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; color: var(--hw-ochre-deep); margin-top: 2px; }

/* Phase 5 — payment milestones */
.aipd-howwe .p5-rail { position: relative; height: 4px; background: var(--hw-hairline); border-radius: 4px; margin: 12px 0 20px; overflow: hidden; }
.aipd-howwe .p5-rail-fill {
  position: absolute; inset: 0 100% 0 0;
  background: linear-gradient(90deg, var(--hw-forest), var(--hw-sage));
  border-radius: 4px;
  transition: inset 1000ms cubic-bezier(.65,.05,.36,1) 400ms;
}
.aipd-howwe .aipd-howwe__row.is-on .p5-rail-fill { inset: 0 35% 0 0; }
.aipd-howwe .p5-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.aipd-howwe .p5-ms { text-align: center; position: relative; }
.aipd-howwe .p5-ms-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--hw-paper); border: 1.5px solid var(--hw-hairline);
  margin: 0 auto 6px; position: relative; z-index: 1;
  transition: border-color 320ms var(--hw-smooth), transform 380ms var(--hw-spring);
}
.aipd-howwe .p5-ms-dot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #EDE5DF;
  opacity: 0;
  transition: opacity 380ms var(--hw-smooth);
}
.aipd-howwe .aipd-howwe__row.is-on .p5-ms[data-i="0"] .p5-ms-dot         { border-color: var(--hw-clay); transform: scale(1.2); transition-delay: 500ms; }
.aipd-howwe .aipd-howwe__row.is-on .p5-ms[data-i="0"] .p5-ms-dot::before { opacity: 1; transition-delay: 500ms; }
.aipd-howwe .aipd-howwe__row.is-on .p5-ms[data-i="1"] .p5-ms-dot         { border-color: var(--hw-clay); transform: scale(1.2); transition-delay: 700ms; }
.aipd-howwe .aipd-howwe__row.is-on .p5-ms[data-i="1"] .p5-ms-dot::before { opacity: 1; transition-delay: 700ms; }
.aipd-howwe .aipd-howwe__row.is-on .p5-ms[data-i="2"] .p5-ms-dot         { border-color: var(--hw-clay); transform: scale(1.2); transition-delay: 900ms; }
.aipd-howwe .aipd-howwe__row.is-on .p5-ms[data-i="2"] .p5-ms-dot::before { opacity: 1; transition-delay: 900ms; }
.aipd-howwe .aipd-howwe__row.is-on .p5-ms[data-i="3"] .p5-ms-dot         { border-color: var(--hw-clay); transform: scale(1.2); transition-delay: 1100ms; }
.aipd-howwe .aipd-howwe__row.is-on .p5-ms[data-i="3"] .p5-ms-dot::before { opacity: 1; transition-delay: 1100ms; }
.aipd-howwe .p5-ms-pct { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; color: var(--hw-ochre-deep); margin-bottom: 2px; }
.aipd-howwe .p5-ms-label { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--hw-ochre-deep); line-height: 1.3; }

/* Phase 6 — handover */
.aipd-howwe .p6-cert {
  position: relative; padding: 18px;
  background: linear-gradient(180deg, #F8F9F4, #F1F3EB);
  border-radius: 10px; border: 1px solid var(--hw-hairline);
  text-align: center; overflow: hidden;
}
.aipd-howwe .p6-cert-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--hw-ochre-deep); margin-bottom: 10px; }
.aipd-howwe .p6-cert-h { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 18px; letter-spacing: -0.01em; margin-bottom: 4px; }
.aipd-howwe .p6-cert-h em { font-family: 'Manrope', sans-serif; font-weight: 300; font-style: normal; color: var(--hw-sage); }
.aipd-howwe .p6-cert-sub { font-family: 'Inter', sans-serif; font-size: 12px; color: rgba(0,0,0,.55); margin-bottom: 14px; }
.aipd-howwe .p6-cert-checks { display: flex; justify-content: center; gap: 18px; margin-bottom: 10px; }
.aipd-howwe .p6-cc { display: flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; color: var(--hw-sage-deep); }
.aipd-howwe .p6-cc-dot { width: 9px; height: 9px; border-radius: 50%; background: #EDE5DF; border: 1.5px solid var(--hw-clay); transform: scale(0); transition: transform 400ms var(--hw-spring); }
.aipd-howwe .aipd-howwe__row.is-on .p6-cc[data-i="0"] .p6-cc-dot { transform: scale(1); transition-delay: 700ms; }
.aipd-howwe .aipd-howwe__row.is-on .p6-cc[data-i="1"] .p6-cc-dot { transform: scale(1); transition-delay: 950ms; }
.aipd-howwe .aipd-howwe__row.is-on .p6-cc[data-i="2"] .p6-cc-dot { transform: scale(1); transition-delay: 1200ms; }
.aipd-howwe .p6-stamp {
  position: absolute; top: 12px; right: 12px;
  width: 56px; height: 56px;
  border: 2px solid var(--hw-clay); border-radius: 50%;
  display: grid; place-items: center;
  font-family: 'JetBrains Mono', monospace; font-size: 8.5px; font-weight: 600;
  letter-spacing: .12em; text-align: center; color: var(--hw-clay-deep); line-height: 1.1;
  opacity: 0; transform: scale(.5) rotate(-15deg);
  transition: opacity 420ms var(--hw-smooth) 1500ms, transform 520ms var(--hw-spring) 1500ms;
}
.aipd-howwe .aipd-howwe__row.is-on .p6-stamp { opacity: 1; transform: scale(1) rotate(-12deg); }

/* milestone table */
.aipd-howwe__milestone-table { margin-top: 120px; border-top: 1px solid var(--hw-hairline); padding-top: 64px; }
.aipd-howwe__mt-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--hw-ochre-deep); text-align: center; margin-bottom: 12px; }
.aipd-howwe__mt-h { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 26px; text-align: center; margin-bottom: 40px; letter-spacing: -0.015em; }
.aipd-howwe__mt-h em { font-family: 'Manrope', sans-serif; font-weight: 300; font-style: normal; color: var(--hw-sage); }
.aipd-howwe__mt-row {
  display: grid;
  grid-template-columns: 1.4fr 2.6fr 0.6fr;
  gap: 24px; padding: 16px 8px;
  border-bottom: 1px solid var(--hw-hairline);
  align-items: baseline;
}
.aipd-howwe__mt-row--head { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--hw-ochre-deep); }
.aipd-howwe__mt-stage { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 14.5px; }
.aipd-howwe__mt-desc { font-family: 'Inter', sans-serif; font-size: 13.5px; color: var(--hw-ink); }
.aipd-howwe__mt-pct { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; text-align: right; color: var(--hw-ochre-deep); }

@media (max-width: 980px) {
  .aipd-howwe { padding: 80px 16px; }
  .aipd-howwe__card { padding: 64px 24px 72px; border-radius: 24px; }
  .aipd-howwe__header {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 56px;
    align-items: start;
  }
  .aipd-howwe__centerline { display: none; }
  .aipd-howwe__row { grid-template-columns: 1fr; gap: 24px; margin-bottom: 72px; }
  .aipd-howwe__row--reverse .aipd-howwe__visual { order: 0; }
  .aipd-howwe__visual { min-height: 280px; padding: 24px; }
  .aipd-howwe__panel { max-width: 340px; }
  .aipd-howwe__mt-row { grid-template-columns: 1fr; gap: 4px; }
  .aipd-howwe__mt-row--head { display: none; }
  .aipd-howwe__mt-pct { text-align: left; }
}

/* ============================================================
   DEVELOPER PARTNERSHIP — pinned stage-swap (forest bg)
   ============================================================ */
.aipd-devp {
  --dv-ink: var(--ink, #000);
  --dv-paper: var(--paper, #fffffe);
  --dv-sage: var(--sage, #707f6a);
  --dv-sage-light: #9DAA95;
  --dv-forest: var(--forest, #2C3A2A);
  --dv-ochre: var(--ochre, #C4A86A);
  --dv-ochre-deep: #8C7438;
  --dv-clay-light: #D08A6E;
  --dv-stone: var(--stone, #C5C0B5);
  --dv-hairline: rgba(255,255,255,.12);
  --dv-silk: cubic-bezier(.16, 1, .3, 1);
  position: relative;
  background: var(--dv-forest);
  /* 3 pinned stages — was 360vh (120vh each), tightened so the section
     no longer feels like a third of the page. 200vh = ~67vh per stage,
     plenty for the stage-swap transitions. */
  height: 170vh;
  font-family: 'Inter', sans-serif;
}
.aipd-devp__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.aipd-devp__inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 1fr 1.02fr;
  gap: 72px;
  align-items: center;
}

.aipd-devp__left { position: relative; }
.aipd-devp__eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dv-ochre);
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 22px 0;
}
.aipd-devp__eyebrow-dash { color: var(--dv-ochre); letter-spacing: -.05em; }
.aipd-devp .aipd-devp__title {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--dv-paper);
  margin: 0 0 28px 0;
}
.aipd-devp__title em {
  font-family: 'Manrope', sans-serif;
  font-weight: 300; font-style: normal;
  color: var(--dv-sage-light);
}

.aipd-devp__nav {
  position: relative;
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--dv-hairline);
  border-radius: 100px;
  padding: 5px;
  margin-bottom: 34px;
  width: fit-content;
}
.aipd-devp__nav-pill {
  position: absolute;
  top: 5px; left: 5px;
  height: calc(100% - 10px);
  background: var(--dv-paper);
  border-radius: 100px;
  transition: transform .85s var(--dv-silk), width .85s var(--dv-silk);
  z-index: 0;
}
.aipd-devp__nav .aipd-devp__tab {
  position: relative;
  z-index: 1;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(244,236,218,.62);
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  padding: 9px 18px;
  margin: 0;
  border-radius: 100px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .55s var(--dv-silk);
}
.aipd-devp__nav .aipd-devp__tab.is-active { color: var(--dv-forest); }

.aipd-devp__stages { position: relative; min-height: 220px; }
.aipd-devp__stage {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity .9s var(--dv-silk), transform .9s var(--dv-silk);
  pointer-events: none;
}
.aipd-devp__stage.is-active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.aipd-devp__stage.is-prev { transform: translateX(-40px); }
.aipd-devp__stage-num {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--dv-ochre);
  margin-bottom: 12px;
}
.aipd-devp__stage-name {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: -0.015em;
  color: var(--dv-paper);
  margin-bottom: 14px;
}
.aipd-devp__stage-name em { font-weight: 300; font-style: normal; color: var(--dv-sage-light); }
.aipd-devp__stage-body {
  font-family: 'Inter', sans-serif;
  font-size: 15.5px;
  line-height: 1.62;
  color: rgba(244,236,218,.82);
  max-width: 42ch;
  margin-bottom: 16px;
}
.aipd-devp__stage-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--dv-clay-light);
}

.aipd-devp__stats {
  display: flex;
  gap: 36px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--dv-hairline);
}
.aipd-devp__stat-val {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.02em;
  color: var(--dv-paper);
  line-height: 1;
}
.aipd-devp__stat-val em { font-style: normal; font-weight: 300; color: var(--dv-sage-light); }
.aipd-devp__stat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dv-ochre);
  margin-top: 9px;
}

.aipd-devp__cards { position: relative; height: 520px; }
.aipd-devp__card {
  position: absolute;
  inset: 0;
  background: var(--dv-paper);
  border-radius: 22px;
  overflow: hidden;
  opacity: 0;
  transform: translateX(70px) scale(.96);
  transition: opacity .9s var(--dv-silk), transform .9s var(--dv-silk);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.6);
}
.aipd-devp__card.is-active { opacity: 1; transform: translateX(0) scale(1); }
.aipd-devp__card.is-prev { transform: translateX(-70px) scale(.96); }
.aipd-devp__card-img { height: 340px; background: var(--dv-stone); overflow: hidden; }
.aipd-devp__card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aipd-devp__card-meta { padding: 22px 26px 26px; }
.aipd-devp__card-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dv-ochre-deep);
  margin-bottom: 10px;
}
.aipd-devp__card-name {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--dv-ink);
  margin-bottom: 8px;
}
.aipd-devp__card-detail {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--dv-ink);
}

@media (max-width: 940px) {
  .aipd-devp { height: auto; }
  .aipd-devp__pin { position: static; height: auto; padding: 80px 0; }
  .aipd-devp__inner { grid-template-columns: 1fr; gap: 36px; padding: 0 20px; }
  .aipd-devp__stages { min-height: 0; }
  .aipd-devp__stage { position: relative; opacity: 1; transform: none; }
  .aipd-devp__stage:not(:first-child) { display: none; }
  .aipd-devp__cards { height: 440px; }
  .aipd-devp__card { position: relative; opacity: 1; transform: none; }
  .aipd-devp__card:not(:first-child) { display: none; }
  /* Centre the 3 stats (number + subtext) on mobile — equal columns with
     centred text so each subtext sits centred under its number. */
  .aipd-devp__stats { gap: clamp(12px, 4vw, 36px); }
  .aipd-devp__stat { flex: 1; text-align: center; }
}

/* ============================================================
   WHY BUYERS USE US — hover accordion (inside Trust section)
   ============================================================ */
.aipd-why__board {
  --aw-container-bg: #EFEEE8;
  --aw-card-bg: #FCFBF8;
  --aw-ochre: var(--ochre, #C4A86A);
  --aw-forest: var(--forest, #2C3A2A);
  --aw-ink: var(--ink, #000);
  --aw-stone: var(--stone, #C5C0B5);
  --aw-hairline: rgba(0,0,0,.07);
  --aw-silk: cubic-bezier(.16, 1, .3, 1);
  background: var(--aw-container-bg);
  border-radius: 28px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.aipd-why__row { display: flex; gap: 14px; }

.aipd-why__card {
  flex: 1;
  min-width: 0;
  display: flex;
  background: var(--aw-card-bg);
  border: 1px solid var(--aw-hairline);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: flex 0.8s var(--aw-silk);
}
.aipd-why__card.is-open { flex: 1.95; }

.aipd-why__card-content {
  flex: 1;
  min-width: 0;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
}
.aipd-why__chip {
  width: 48px; height: 48px;
  border-radius: 13px;
  background: var(--aw-ochre);
  color: var(--aw-forest);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.aipd-why__chip svg { width: 25px; height: 25px; display: block; }
.aipd-why__card-text { margin-top: auto; padding-top: 44px; }
.aipd-why__title {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.018em;
  color: var(--aw-ink);
  margin-bottom: 10px;
}
.aipd-why__desc {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(0,0,0,.6);
}

.aipd-why__card-photo {
  flex: 0 0 0%;
  min-width: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0;
  transition: flex-basis .8s var(--aw-silk), opacity .45s var(--aw-silk), padding .8s var(--aw-silk);
}
.aipd-why__card.is-open .aipd-why__card-photo {
  flex: 0 0 48%;
  opacity: 1;
  padding: 14px 14px 14px 0;
}
.aipd-why__card-photo span {
  display: block;
  width: 100%; height: 100%;
  border-radius: 13px;
  background-size: cover;
  background-position: center;
  background-color: var(--aw-stone);
}

@media (max-width: 920px) {
  .aipd-why__row { flex-direction: column; }
  .aipd-why__card { flex: none; }
  .aipd-why__card.is-open { flex: none; }
  .aipd-why__card-photo { display: none; }
}

/* ============================================================
   OWNERSHIP PATHWAYS — three comparison cards (before How we work)
   ============================================================ */
.aipd-own {
  --ow-ink: var(--ink, #000);
  --ow-paper: var(--paper, #fffffe);
  --ow-sage: var(--sage, #707f6a);
  --ow-sage-deep: #4F5C49;
  --ow-cream: var(--cream, #EDE6D6);
  --ow-ochre: var(--ochre, #C4A86A);
  --ow-ochre-deep: #8C7438;
  --ow-stone: var(--stone, #C5C0B5);
  --ow-hairline: rgba(0,0,0,.09);
  --ow-silk: cubic-bezier(.16, 1, .3, 1);
  background: var(--ow-cream);
  border-top: 1px solid var(--ow-hairline);
  /* Was 130/140 — same compression pattern as the other sections. */
  padding: 64px 48px 72px;
  font-family: 'Inter', sans-serif;
}
.aipd-own__inner { max-width: 1180px; margin: 0 auto; }

.aipd-own__header { max-width: 760px; margin: 0 0 40px; }
.aipd-own__eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ow-ochre);
  margin: 0 0 24px 0;
}
.aipd-own__eyebrow .num { letter-spacing: -.05em; margin-right: 8px; }
.aipd-own__heading {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  /* Matched to the other section headings on the site (Problem, How We
     Work). Was clamp(34, 4.4vw, 52) — now clamp(36, 4.4vw, 56) so all
     display headings read at the same brand size. */
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ow-ink);
  margin-bottom: 20px;
}
.aipd-own__heading em {
  font-family: 'Manrope', sans-serif;
  font-weight: 300; font-style: normal;
  color: var(--ow-sage);
}
.aipd-own__intro {
  font-family: 'Inter', sans-serif;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ow-ink);
  max-width: 580px;
}

.aipd-own__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.aipd-own__card {
  background: var(--ow-paper);
  border: 1px solid var(--ow-hairline);
  border-radius: 20px;
  padding: 32px 30px 34px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s var(--ow-silk), transform .8s var(--ow-silk),
              border-color .4s var(--ease-silk),
              box-shadow .4s var(--ease-silk);
}
.aipd-own__card.is-in { opacity: 1; transform: translateY(0); }
.aipd-own__card:hover {
  border-color: var(--ow-sage);
  box-shadow: 0 24px 56px -28px rgba(44,58,42,.45), 0 8px 20px rgba(0,0,0,0.05);
}
.aipd-own__card-index {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .14em;
  /* Brighter brand gold — was the deeper ochre, now the lighter ochre
     so the 01/02/03 numerals read as a clear gold accent. */
  color: var(--ow-ochre);
  margin-bottom: 22px;
}
.aipd-own__card-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 23px;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ow-ink);
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--ow-hairline);
}
.aipd-own__card-label {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 10px;
}
/* The "What's involved" label that follows the description gets extra
   top breathing room so it doesn't crash into the previous paragraph. */
.aipd-own__card-desc + .aipd-own__card-label {
  margin-top: 20px;
}
.aipd-own__card-desc {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--ow-ink);
}
/* Detail bullets — small clay dash before each line, matching the
   brand `——` eyebrow rhythm. */
.aipd-own__card-details {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ow-ink);
}
.aipd-own__card-details li {
  position: relative;
  padding: 0 0 0 18px;
  margin: 0 0 9px 0;
}
.aipd-own__card-details li:last-child { margin-bottom: 0; }
.aipd-own__card-details li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 10px;
  height: 1px;
  /* Was clay — switched to black so the bullet dashes read as part of
     the body type rather than a brand accent. */
  background: var(--ink);
}

@media (max-width: 880px) {
  .aipd-own { padding: 90px 20px 100px; }
  .aipd-own__header { margin-bottom: 52px; }
  .aipd-own__cards { grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================================
   PRELOADER — zoom-in-typo intro (first section on the homepage)
   ============================================================ */
.aipd-preloader {
  position: relative;
  /* Was 200vh — the engulf animation only needs ~one extra viewport of
     scroll runway past the sticky 100vh pin to complete cleanly. 130vh
     gives that runway without forcing the visitor to scroll an extra
     full screen just to get past the intro. */
  height: 130vh;
  background: var(--charcoal, #141414);
}
.aipd-preloader__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.aipd-preloader__cover {
  position: absolute;
  inset: 0;
  background: var(--charcoal, #141414);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.aipd-preloader .aipd-preloader__word {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: min(26vw, 80vh);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--paper, #fffffe);
  display: flex;
  white-space: nowrap;
  margin: 0;
  will-change: transform, opacity;
}
.aipd-preloader__word span { display: inline-block; opacity: 0; }
.aipd-preloader.is-ready .aipd-preloader__word span {
  animation: aipdPreFade 1s cubic-bezier(.22,.61,.36,1) forwards;
}
.aipd-preloader.is-ready .aipd-preloader__word span:nth-child(1) { animation-delay: .15s; }
.aipd-preloader.is-ready .aipd-preloader__word span:nth-child(2) { animation-delay: .28s; }
.aipd-preloader.is-ready .aipd-preloader__word span:nth-child(3) { animation-delay: .41s; }
.aipd-preloader.is-ready .aipd-preloader__word span:nth-child(4) { animation-delay: .54s; }
@keyframes aipdPreFade { to { opacity: 1; } }

.aipd-preloader__hint {
  position: absolute;
  left: 50%; bottom: 36px;
  transform: translateX(-50%);
  z-index: 4;
  /* Match the section eyebrow labels (.aipd-what__label — "—— OUR
     APPROACH"): JetBrains Mono, 13px / 500, 0.18em tracking, ochre. */
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ochre);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.aipd-preloader__hint span:last-child {
  animation: aipdPreBob 1.6s ease-in-out infinite;
}
@keyframes aipdPreBob {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(5px); }
}

/* ============================================================
   Homepage now uses the native AIPD Footer widget — hide the
   theme's own footer so it doesn't render a second time.
   (Previously hidden by the wp_footer injection, now retired.)
   ============================================================ */
body.home #site-footer,
body.home footer.site-footer { display: none !important; }

/* ============================================================
   ACCESSIBILITY — prefers-reduced-motion
   ----------------------------------------------------------------
   The homepage is animation-heavy. For visitors who've explicitly
   asked their OS to reduce motion (vestibular conditions, attention
   regulation), we collapse the most aggressive transitions to
   opacity-only or duration:0, and disable autoplay/scrub on the
   hero video. We deliberately KEEP small fades — the page should
   still feel polished, not bare — but kill anything that translates
   significantly or scrubs scroll-tied position.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    /* General — kill long transitions and translate-based motion */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    /* Hero video scrub — collapse to a still poster. The video src is
       still attached so the JS controller doesn't crash, but we hide
       the video and let the poster image stand in. */
    .aipd-what__video {
        display: none !important;
    }
    .aipd-what__stage {
        background-image: url('/wp-content/themes/hello-elementor-child/assets/videos/villa-build-poster.jpg');
        background-size: cover;
        background-position: center;
    }
    /* Hero overlay step content stays visible (no chip fill scrub),
       but we always show the active step rather than transitioning. */
    .aipd-what__overlay-step { opacity: 0; }
    .aipd-what__overlay-step.is-active { opacity: 1; }

    /* Chapter stack — collapse scroll-driven photo slide to instant swap.
       The photos themselves are toggled `.is-active` by JS; we hide all
       non-active ones rather than animating their translate. */
    .aipd-stage__photo {
        transform: none !important;
        transition: opacity 0.2s linear !important;
        opacity: 0;
    }
    .aipd-stage__photo.is-active { opacity: 1; }

    /* Chip-fill scrub — just show the chip fully, no progressive fill */
    .aipd-stack__midline-label .aipd-chip__bg { transform: scaleX(1) !important; }
    .aipd-stack__midline-label .aipd-chip__icon,
    .aipd-stack__midline-label .aipd-chip__text {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Section reveal staggers — drop the slide-up, keep only fade */
    .aipd-about__eyebrow,
    .aipd-about__heading,
    .aipd-about__visual,
    .aipd-about__right > p,
    .aipd-about__heading .word > span,
    .aipd-about__heading .word > em {
        transform: none !important;
    }
    .aipd-howwe__row { transform: none !important; }
    .aipd-howwe__row .aipd-howwe__chip,
    .aipd-howwe__row .aipd-howwe__step-h,
    .aipd-howwe__row .aipd-howwe__step-p,
    .aipd-howwe__row .aipd-howwe__visual { transform: none !important; }

    /* Problem chevrons — show all sequentially without translate */
    .aipd-problem__chevron--seq { transform: none !important; }

    /* Ownership cards — show without translate */
    .aipd-own__card { transform: none !important; }

    /* Preloader — fade-out only, no zoom */
    .aipd-preloader__word { transform: none !important; }
}

/* ============================================================
   MOBILE FIXES — verified at 375px / 414px / 768px
   ----------------------------------------------------------------
   The chapter stack midline (6 chip pills along a horizontal track)
   doesn't fit on phones. Below 768px we hide the line + chips and
   let the photo cross-fade + per-chapter title/body do the storytelling.
   The chapter index counter (01..06) stays so the visitor still has
   a sense of progress.
   ============================================================ */
@media (max-width: 768px) {
    /* Chapter stack — hide the horizontal chip line on phones.
       The chapter content (title, body) plus photo cross-fade carries
       the story; the line was a desktop affordance only. */
    .aipd-stack__midline,
    .aipd-stack__midline-track,
    .aipd-stack__midline-fill,
    .aipd-stack__midline-marker,
    .aipd-stack__midline-label {
        display: none !important;
    }

    /* Chapter content needs more breathing room on phones */
    .aipd-stage__content {
        left: 24px !important;
        right: 24px !important;
        max-width: none !important;
    }
    .aipd-chapter__title { font-size: clamp(28px, 8vw, 44px) !important; }
    .aipd-chapter__body { font-size: 15px !important; }

    /* Scroll-hint is decorative — drop it on phones where vertical real
       estate is precious. */
    .aipd-stack__scroll-hint { display: none !important; }
}

@media (max-width: 600px) {
    /* Hero — typography needs to scale down further on small phones */
    .aipd-what__overlay-label,
    .aipd-what__overlay-step h2 {
        font-size: clamp(28px, 9vw, 42px) !important;
    }
    .aipd-what__overlay-body {
        font-size: 14.5px !important;
    }
    /* Hero download card already has @media (max-width: 768px) tuned size;
       on the smallest phones, hide it entirely so it doesn't block the scrub */
    .aipd-what__download { display: none !important; }
}

/* ============================================================
   STAT STRIP — slim credibility ribbon below the hero
   ----------------------------------------------------------------
   3 numbers (HALCO group stats) animated on scroll-in. Sits between
   the hero and the chapter stack so visitors get proof immediately
   instead of scrolling 8 sections deep. Designed as a <dl> for
   semantic correctness (number = term, label = definition).
   ============================================================ */
.aipd-stat-strip {
    background: var(--ink);
    color: var(--paper);
    padding: 44px clamp(20px, 4vw, 64px);
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 254, 0.06);
    border-bottom: 1px solid rgba(255, 255, 254, 0.06);
}
.aipd-stat-strip__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
    align-items: center;
    text-align: center;
}
.aipd-stat-strip__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 6vw, 80px);
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 980px;
}
.aipd-stat-strip__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
}
.aipd-stat-strip__item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: calc(clamp(-40px, -3vw, -12px));
    top: 18%;
    bottom: 18%;
    width: 1px;
    background: rgba(255, 255, 254, 0.12);
}
.aipd-stat-strip__num {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(36px, 5.4vw, 64px);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--paper);
    margin: 0;
    font-variant-numeric: tabular-nums;
    /* Sage accent gradient — subtle, just on the numerals */
    background: linear-gradient(180deg, var(--paper) 0%, #c5cdbe 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.aipd-stat-strip__label {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: clamp(10px, 0.9vw, 12px);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 254, 0.72);
    margin: 0;
    max-width: 220px;
    line-height: 1.45;
}
.aipd-stat-strip__attr {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ochre);
    margin: 0;
    opacity: 0.78;
}

@media (max-width: 768px) {
    .aipd-stat-strip { padding: 32px 20px; }
    .aipd-stat-strip__list {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .aipd-stat-strip__item:not(:last-child)::after { display: none; }
    .aipd-stat-strip__item:not(:last-child) {
        padding-bottom: 28px;
        border-bottom: 1px solid rgba(255, 255, 254, 0.08);
    }
    .aipd-stat-strip__num { font-size: clamp(40px, 12vw, 56px); }
}

@media (prefers-reduced-motion: reduce) {
    /* Skip the count-up easing — show final values immediately */
    .aipd-stat-strip__num { transition: none !important; }
}

/* ============================================================
   404 PAGE — brand-styled "page not found"
   ----------------------------------------------------------------
   Reuses the existing .aipd-page wrapper from Contact/Resources
   and adds two recovery CTAs (home + Property Guide). Centered
   on the viewport so it doesn't feel like an error.
   ============================================================ */
.aipd-page--404 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 60px);
    text-align: center;
}
.aipd-page--404 .aipd-page__inner {
    text-align: center;
    margin: 0 auto;
}
.aipd-page--404 .aipd-page__lede {
    margin-left: auto;
    margin-right: auto;
}
.aipd-page__actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}
.aipd-page__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: 10px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.aipd-page__btn--dark,
.aipd-page__btn--dark:link,
.aipd-page__btn--dark:visited {
    background: var(--forest);
    color: var(--paper) !important;
}
.aipd-page__btn--dark:hover {
    background: #1e2e1e;
    color: var(--paper) !important;
    transform: translateY(-2px);
}
.aipd-page__btn--light,
.aipd-page__btn--light:link,
.aipd-page__btn--light:visited {
    background: transparent;
    color: var(--ink) !important;
    border: 1px solid var(--ink);
}
.aipd-page__btn--light:hover {
    background: var(--ink);
    color: var(--paper) !important;
    transform: translateY(-2px);
}