/* ============================================================================
   JAVAID — Homepage, warm-light (cinematic redesign)
   Replaces the retired dark home skin (home-dark.css). Scoped to
   body.is-page-home so inner pages are untouched. Everything here rides the
   warm monograph tokens from main.css. STYLE-BIBLE.md §3.

   Sections (front-page.php): syshero → ticker → folio(#work) → reveal band →
   section → testimonials carousel → estimator(#estimate) → CTA billboard.
   ============================================================================ */

/* ── Rhythm ────────────────────────────────────────────────────────────────
   The base sheet pads every section by var(--pad-y) top AND bottom (up to
   144px), so consecutive sections doubled into cavernous gaps. Retune the home
   to one generous-but-controlled rhythm; the hairline .section+.section rule
   still divides them. */
body.is-page-home .section,
body.is-page-home .folio,
body.is-page-home .pull-carousel,
body.is-page-home .pull {
    padding-block: clamp(52px, 6.5vw, 104px);
}

/* The selected-work folio leads straight out of the hero — pull its top in a
   touch so the "Selected work." title sits closer to the schematic above it. */
body.is-page-home .folio { padding-top: clamp(40px, 5vw, 80px); }

/* ── Trust ticker → quiet mono micro-label strip ────────────────────────────
   Was a giant serif italic marquee (32–64px) that shouted over the hero. In
   the drafting language it reads as a calm, tracked mono index of tools. */
body.is-page-home .ticker {
    padding-block: 16px;
    background: var(--canvas);
}
body.is-page-home .ticker__track { gap: 0; }
body.is-page-home .ticker__item {
    font-family: var(--mono);
    font-style: normal;
    font-variation-settings: normal;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--mute);
    gap: 22px;
    padding-right: 22px;
}
/* The diamond separator: a small accent tick, not a raised serif glyph. */
body.is-page-home .ticker__item .dmd {
    color: var(--accent);
    transform: none;
    font-size: 9px;
}

/* ── Homepage estimator (embedded [project_estimator] plugin) ────────────────
   The plugin's own CSS was toned for the old dark site, so its option cards
   fell to near-invisible faint fills on cream. Give them real presence: a
   defined surface, a hairline that answers the cursor, and an accent-led
   selected state — matching the site's card language. */
body.is-page-home .home-estimator__widget {
    background: var(--canvas-2);
    border: 1px solid var(--rule);
}
body.is-page-home .jpe__option {
    background: var(--canvas);
    border: 1px solid var(--rule);
    border-radius: 2px;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
body.is-page-home .jpe__option:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}
body.is-page-home .jpe__option.is-selected,
body.is-page-home .jpe__option[aria-pressed="true"],
body.is-page-home .jpe__option.is-active {
    border-color: var(--accent);
    background: var(--accent-soft);
}
body.is-page-home .jpe__option-label { color: var(--ink); }
/* Progress dots + title in the drafting language. */
body.is-page-home .jpe__progress { background: var(--rule); }
body.is-page-home .jpe__dot { background: var(--rule); }
body.is-page-home .jpe__dot.is-on { background: var(--accent); }
body.is-page-home .jpe__progress-label { font-family: var(--mono); color: var(--mute-2); }

/* The shared .dwork index + cursor preview styles moved to dennis.css (site-wide)
   so the /work page reuses them. Homepage-only tweaks (if any) stay here. */

/* ════════════════════════════════════════════════════════════════════════════
   DENNIS LOOK & FEEL — lower homepage sections
   Big grotesque headings, hairline structure (no glassy boxes), generous space,
   blue accent used sparingly. Content unchanged; only the presentation.
   ════════════════════════════════════════════════════════════════════════════ */

/* Section headings — consistent big grotesque with a blue-italic accent word. */
body.is-page-home .folio__intro h2,
body.is-page-home .sec-head {
    font-family: var(--heading);
    font-weight: 500;
    font-size: clamp(36px, 5.4vw, 88px);
    line-height: 0.98;
    letter-spacing: -0.035em;
    color: var(--ink);
    text-wrap: balance;
}
body.is-page-home .folio__intro h2 em,
body.is-page-home .sec-head em { font-style: italic; font-weight: 450; color: var(--accent); }
body.is-page-home .folio__intro { align-items: end; gap: clamp(28px, 4vw, 64px); margin-bottom: clamp(40px, 5vw, 80px); }
body.is-page-home .folio__intro .body { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: var(--ink-mute); max-width: 52ch; }
body.is-page-home .eyebrow {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
}

/* Metrics — oversized grotesque figures on a hairline grid. */
body.is-page-home .metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--rule);
    gap: 0;
}
body.is-page-home .metric {
    padding: clamp(26px, 3.2vw, 52px) clamp(14px, 2vw, 28px) 0 0;
    border: 0;
}
body.is-page-home .metric .num {
    font-family: var(--heading);
    font-weight: 500;
    font-size: clamp(44px, 6.5vw, 104px);
    line-height: 0.9;
    letter-spacing: -0.045em;
    color: var(--ink);
    display: block;
}
body.is-page-home .metric .num em { font-style: normal; color: var(--accent); }
body.is-page-home .metric .lbl {
    display: block;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mute);
    margin-top: 16px;
    max-width: 20ch;
    line-height: 1.35;
}
@media (max-width: 720px) {
    body.is-page-home .metrics { grid-template-columns: repeat(2, 1fr); }
    body.is-page-home .metric:nth-child(n+3) { padding-top: 32px; }
}

/* Approach — three hairline-topped columns, big blue numeral. */
body.is-page-home .approach {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 3vw, 56px);
    border-top: 1px solid var(--rule);
    padding-top: clamp(28px, 3.5vw, 52px);
}
body.is-page-home .approach .step {
    background: none;
    border: 0;
    padding: 0;
    box-shadow: none;
}
body.is-page-home .approach .step__num { margin-bottom: 12px; }
body.is-page-home .approach .step__num em {
    font-family: var(--heading);
    font-style: normal;
    font-weight: 500;
    font-size: clamp(40px, 5vw, 78px);
    letter-spacing: -0.04em;
    color: var(--accent);
}
body.is-page-home .approach .step__title {
    font-family: var(--heading);
    font-weight: 500;
    font-size: clamp(21px, 2.3vw, 30px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 10px 0 12px;
    color: var(--ink);
}
body.is-page-home .approach .step__body { color: var(--ink-mute); font-size: 16px; line-height: 1.6; }
@media (max-width: 760px) { body.is-page-home .approach { grid-template-columns: 1fr; gap: 36px; } }

/* Testimonials — one big grotesque quote, left-aligned, no card. Reset the old
   centered layout (margin auto + 104px slide padding made it cavernous). */
body.is-page-home .pull-carousel { padding-block: clamp(48px, 6vw, 96px); }
/* Viewport hugs the active slide (dennis.js animates its height), so short
   quotes don't leave a cavernous gap before the controls. */
body.is-page-home .pull-carousel__viewport {
    overflow: hidden;
    transition: height 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
body.is-page-home .pull-carousel__track { align-items: flex-start; }
body.is-page-home .pull-carousel__slide.pull {
    padding: 0;
    min-height: 0;
    height: auto;
    align-self: flex-start;
    text-align: center;
    background: none;
}
body.is-page-home .pull { background: none; text-align: center; }
body.is-page-home .pull__mark {
    font-family: var(--heading);
    font-size: clamp(56px, 7vw, 104px);
    line-height: 0.5;
    color: var(--accent);
    margin: 0 0 clamp(12px, 1.6vw, 22px);
    text-align: center;
}
body.is-page-home .pull__body {
    font-family: var(--heading);
    font-style: normal;
    font-weight: 400;
    font-size: clamp(26px, 3.6vw, 56px);
    line-height: 1.16;
    letter-spacing: -0.025em;
    color: var(--ink);
    max-width: 40ch;
    margin: 0 auto;            /* centered */
    text-align: center;
}
body.is-page-home .pull__attr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mute);
    margin: clamp(28px, 3.5vw, 48px) 0 0;
}
body.is-page-home .pull__attr .dmd { color: var(--accent); }
body.is-page-home .pull__attr strong { color: var(--ink); font-weight: 500; }
body.is-page-home .pull-carousel__arrow {
    border: 1px solid var(--rule);
    border-radius: 50%;
    width: 48px; height: 48px;
    color: var(--ink);
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
body.is-page-home .pull-carousel__arrow:hover { border-color: var(--accent); background: var(--accent); color: #fff; }
body.is-page-home .pull-carousel__dots button.is-active,
body.is-page-home .pull-carousel__dots [data-slide].is-active { background: var(--accent); }

/* Explore / bento — a clean 2×2 hairline matrix; each block fills top→bottom on hover. */
body.is-page-home .bento {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border-top: 1px solid var(--rule);
    border-left: 1px solid var(--rule);
}
body.is-page-home .bento .step {
    position: relative;
    background: none;
    border: 0;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    box-shadow: none;
    padding: clamp(30px, 3.4vw, 60px);
    min-height: clamp(220px, 20vw, 300px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: var(--ink);
    transition: background 0.3s ease;
}
body.is-page-home .bento .dept__num {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 4px;
}
body.is-page-home .bento .step__title {
    font-family: var(--heading);
    font-weight: 500;
    font-size: clamp(26px, 3.2vw, 46px);
    line-height: 1.04;
    letter-spacing: -0.03em;
    margin: 0;
    color: var(--ink);
    max-width: 16ch;
}
body.is-page-home .bento .step__body { color: var(--ink-mute); font-size: 15px; line-height: 1.55; margin: 0; }
body.is-page-home .bento .step .link { margin-top: auto; color: var(--accent); transition: color 0.25s ease; width: max-content; font-weight: 600;text-transform: initial;letter-spacing: 0.1em;font-size:16px;}
body.is-page-home .bento .step .link .arr { transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); display: inline-block; font-size: 20px; }
/* Corner arrow that answers the hover (Dennis-style card affordance). */
body.is-page-home .bento .step::after {
    content: '\2197';
    position: absolute;
    top: clamp(26px, 3vw, 52px);
    right: clamp(26px, 3vw, 52px);
    font-size: 22px;
    line-height: 1;
    color: var(--accent);
    opacity: 0;
    transform: translate(-6px, 6px);
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (hover: hover) {
    body.is-page-home .bento .step:hover { background-color: #eaeaea; }
    body.is-page-home .bento .step:hover::after { opacity: 1; transform: translate(0, 0); }
    body.is-page-home .bento .step:hover .link { color: var(--accent); }
    body.is-page-home .bento .step:hover .link .arr { transform: translateX(6px); }
}
@media (max-width: 720px) { body.is-page-home .bento { grid-template-columns: 1fr; } }

/* Final CTA — a bold light-grey statement (echoes the hero grey), sitting just
   above the dark footer so the page ends light → grey → dark. */
body.is-page-home .accent-panel.cta-billboard {
    background: radial-gradient(120% 90% at 50% 0%, #EDEDEB 0%, #E4E4E1 60%, #DCDCD8 100%);
    padding-block: clamp(80px, 12vw, 180px);
}
body.is-page-home .cta-billboard__inner { text-align: center; }
body.is-page-home .cta-billboard .eyebrow {
    color: var(--accent);
    justify-content: center;
    display: flex;
    margin-bottom: clamp(20px, 3vw, 36px);
}
body.is-page-home .cta-billboard__head {
    font-family: var(--heading);
    font-weight: 500;
    font-size: clamp(40px, 7.2vw, 128px);
    line-height: 0.96;
    letter-spacing: -0.04em;
    color: var(--ink);
    text-wrap: balance;
    font-variation-settings: normal;
    margin: 0 auto;
    max-width: 16ch;
}
body.is-page-home .cta-billboard__head em { font-style: italic; font-weight: 450; color: var(--accent); }
body.is-page-home .cta-billboard__deck {
    color: var(--ink-mute);
    max-width: 52ch;
    margin: clamp(28px, 3.5vw, 44px) auto 0;
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.6;
}
body.is-page-home .cta-billboard__row { justify-content: center; margin-top: clamp(32px, 4vw, 52px); }
body.is-page-home .cta-billboard .btn--primary { background: var(--ink); border-color: var(--ink); color: var(--reverse, #F1F1F1); }
body.is-page-home .cta-billboard .btn--primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
body.is-page-home .cta-billboard__alt { color: var(--ink); }

/* ── Cinematic entrance plate (B1) — STYLE-BIBLE.md §"The entrance" ──────────
   The engraved-plate moment: a cream plate with the Boska hallmark, a mono
   role line, a filling accent rule, and a large folio counter bottom-left that
   settles 000→100, then the whole plate lifts to reveal the hero. Hidden unless
   html.intro-armed was set in <head> (desktop, motion on, first visit of the
   session) — so mobile / audits / reduced-motion never see it and LCP is safe.
   Job: set the printed-plate tone in the first second and cover font load. */
.intro { display: none; }
html.intro-armed .intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: var(--canvas);
    will-change: transform;
}
html.intro-armed .intro.is-lift {
    transform: translateY(-100%);
    transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1);
}
.intro__plate {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}
.intro__mark {
    font-family: var(--heading);
    font-weight: 500;
    font-size: clamp(40px, 7vw, 88px);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.intro__role {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--mute);
}
.intro__rule {
    margin-top: clamp(28px, 4vw, 44px);
    width: min(280px, 44vw);
    height: 1px;
    background: var(--rule);
    overflow: hidden;
}
.intro__rule-fill {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
}
.intro__count {
    position: absolute;
    left: var(--pad-x);
    bottom: clamp(22px, 5vh, 52px);
    font-family: var(--mono);
    font-weight: 300;
    font-size: clamp(44px, 8.5vw, 116px);
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}