/*
 * SH Digital Labs homepage.
 *
 * Loaded only on the front page. Reads the tokens in main.css and defines no
 * colours of its own. Every section uses a different structure, so no two
 * consecutive sections repeat a layout.
 *
 *   1.  Local tokens and reveal motion
 *   2.  Buttons and links
 *   3.  Hero
 *   4.  About
 *   5.  System map
 *   6.  Marquee
 *   7.  Capability
 *   8.  Features
 *   9.  Process
 *  10.  Projects slider
 *  11.  Packages
 *  12.  Voices
 *  13.  Insights
 *  14.  FAQ
 *  15.  Inquiry chapter
 *  16.  Responsive
 */

/* ==========================================================================
   1. Local tokens and reveal motion
   ========================================================================== */

.home-v3 {
    --hv-radius: 18px;
    --hv-radius-lg: 26px;
    --hv-card: var(--slate-850);
    --hv-card-raised: var(--slate-800);
    --hv-hairline: rgba(169, 199, 255, 0.16);
    --hv-hairline-strong: rgba(179, 208, 255, 0.3);
    --hv-reveal: 900ms;
}

/*
 * Content is visible by default. home.js adds .hv-motion-ready only after the
 * reveal system has initialized, so delayed, blocked or failed JavaScript can
 * never leave the homepage at zero opacity.
 */
.home-v3.hv-motion-ready [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity var(--hv-reveal) cubic-bezier(.22, 1, .36, 1),
        transform var(--hv-reveal) cubic-bezier(.22, 1, .36, 1);
}

.home-v3 [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .home-v3.hv-motion-ready [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Counted figures keep their own rhythm and never reflow while running. */
.hv-count {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ==========================================================================
   2. Buttons and links
   ========================================================================== */

.home-v3 .hv-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
    padding: 14px 22px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
    isolation: isolate;
    transition:
        transform var(--t-fast) var(--ease),
        background var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease),
        box-shadow var(--t-fast) var(--ease);
}

.home-v3 .hv-btn .arrow {
    width: 16px;
    height: 16px;
    transition: transform var(--t-fast) var(--ease);
}

.home-v3 .hv-btn:hover .arrow,
.home-v3 .hv-btn:focus-visible .arrow { transform: translateX(3px); }

/* Solid, weighted, with the arrow held in its own spacing slot. The gradient lives on
   an overlay rather than on the background itself: a gradient cannot
   interpolate to a flat colour, so swapping them on hover snaps instantly
   while the lift animates. Fading the overlay actually transitions. */
.home-v3 .hv-btn--primary {
    padding: 8px 8px 8px 22px;
    background: var(--signal-500);
    border-color: var(--signal-600);
    color: var(--white);
    box-shadow: inset 0 1px 0 rgba(217, 242, 255, 0.3), 0 12px 28px rgba(1, 34, 96, 0.36);
}

.home-v3 .hv-btn--primary::before {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(180deg, var(--signal-500), var(--signal-600) 64%);
    transition: opacity var(--t-standard) var(--ease);
}

/* Keep the label and tile above the overlay. */
.home-v3 .hv-btn--primary > * { position: relative; z-index: 1; }

.home-v3 .hv-btn--primary:hover,
.home-v3 .hv-btn--primary:focus-visible {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(217, 242, 255, 0.36), 0 16px 34px rgba(1, 34, 96, 0.44);
}

.home-v3 .hv-btn--primary:hover::before,
.home-v3 .hv-btn--primary:focus-visible::before { opacity: 0; }

.home-v3 .hv-btn--primary:active { transform: translateY(0) scale(0.99); }

.home-v3 .hv-btn__tile {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border-radius: 10px;
}

.home-v3 .hv-btn__tile .arrow { width: 16px; height: 16px; }

.home-v3 .hv-btn--ghost {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--hv-hairline-strong);
    color: var(--white);
}

.home-v3 .hv-btn--ghost:hover,
.home-v3 .hv-btn--ghost:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--ice-300);
    transform: translateY(-2px);
}

/* The hero's secondary action. Deliberately a different object from the
   primary: an unfilled pill, lighter weight, and a diagonal arrow, so the two
   do not read as a matched pair competing for the same attention. */
.home-v3 .hv-btn--line {
    padding: 14px 24px;
    background: transparent;
    border-color: var(--hv-hairline-strong);
    border-radius: var(--radius-full);
    color: var(--white);
}

.home-v3 .hv-btn--line:hover,
.home-v3 .hv-btn--line:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--ice-300);
    color: var(--ice-300);
}

.home-v3 .hv-btn--line .arrow { width: 15px; height: 15px; }

.home-v3 .hv-btn--line:hover .arrow,
.home-v3 .hv-btn--line:focus-visible .arrow { transform: translate(3px, -3px); }

.home-v3 .hv-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--night-950), 0 0 0 5px rgba(140, 215, 255, 0.55);
}

.home-v3 .hv-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--signal-500);
    font-size: var(--text-ui);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--t-fast) var(--ease);
}

.home-v3 .hv-link .arrow { width: 16px; height: 16px; transition: transform var(--t-fast) var(--ease); }
.home-v3 .hv-link:hover { color: var(--ice-300); }
.home-v3 .hv-link:hover .arrow { transform: translate(3px, -3px); }
.home-v3 .hv-link .arrow:not(.is-back) { flex: 0 0 auto; }

/* ==========================================================================
   3. Hero — a full-bleed staged opening
   ========================================================================== */

.hv-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: min(920px, 94svh);
    padding-block: 180px var(--space-9);
    overflow: hidden;
    background: var(--night-950);
    isolation: isolate;
}

.hv-hero__art,
.hv-hero__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.hv-hero__art {
    background-position: 62% 42%;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Copy keeps its contrast whatever the artwork does underneath it. */
.hv-hero__veil {
    background:
        linear-gradient(180deg, rgba(5, 7, 11, 0.72) 0%, rgba(5, 7, 11, 0.12) 34%, rgba(5, 7, 11, 0.88) 88%),
        linear-gradient(90deg, rgba(5, 7, 11, 0.82) 0%, rgba(5, 7, 11, 0.2) 58%, rgba(5, 7, 11, 0) 100%);
}

.hv-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 7.4fr) minmax(280px, 3.6fr);
    gap: var(--space-9);
    align-items: end;
    width: 100%;
}

.hv-hero__eyebrow { margin-bottom: var(--space-5); color: var(--ice-300); }

.hv-hero__title {
    max-width: 16ch;
    margin: 0 0 var(--space-6);
    font-size: clamp(3rem, 6.1vw, 5.6rem);
    font-weight: 500;
    line-height: 0.96;
    letter-spacing: -0.045em;
    text-wrap: balance;
}

.hv-hero__title em,
.hv-hero__title i,
.hv-hero__title mark {
    background: none;
    color: var(--ice-300);
    font-style: normal;
    font-weight: inherit;
}

.hv-hero__intro {
    max-width: 46ch;
    margin: 0 0 var(--space-7);
    color: var(--mist-300);
    font-size: clamp(1rem, 1.25vw, 1.1875rem);
    line-height: 1.62;
}

.hv-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* The proof card: a glass plate lifted off the artwork. */
.hv-hero__proof {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-6);
    background:
        linear-gradient(140deg, rgba(255, 255, 255, 0.1), transparent 30%),
        rgba(9, 14, 24, 0.72);
    border: 1px solid var(--hv-hairline);
    border-radius: var(--hv-radius-lg);
    box-shadow: 0 26px 60px rgba(0, 4, 15, 0.4);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.hv-hero__proof-figure {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: var(--white);
    font-size: clamp(2.75rem, 4vw, 3.75rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.04em;
}

.hv-hero__proof-plus { color: var(--signal-500); }

.hv-hero__proof-label {
    margin: 0;
    max-width: 26ch;
    color: var(--mist-300);
    font-size: var(--text-body-s);
    line-height: 1.5;
}

.hv-hero__proof-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ice-300);
    font-family: var(--font-mono);
    font-size: var(--text-mono-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
}

.hv-hero__proof-link .arrow { width: 14px; height: 14px; transition: transform var(--t-fast) var(--ease); }
.hv-hero__proof-link:hover .arrow { transform: translate(3px, -3px); }

.hv-hero__scroll {
    position: absolute;
    bottom: var(--space-5);
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--steel-500);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transform: translateX(-50%);
}

.hv-hero__scroll-line {
    width: 1px;
    height: 46px;
    background: linear-gradient(180deg, rgba(140, 215, 255, 0.7), rgba(140, 215, 255, 0));
}

/* CSS fallback structure, used only until the artwork file exists. */
.hv-hero__structure {
    position: absolute;
    top: 12%;
    right: 12%;
    z-index: -1;
    width: min(46%, 560px);
    aspect-ratio: 1 / 0.8;
}

.hv-hero__structure span,
.hv-hero__structure i {
    position: absolute;
    display: block;
    transform: skewX(calc(var(--cut) * -1));
}

.hv-hero__structure span:nth-child(1) { top: 6%; left: 4%; width: 46%; height: 34%; background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(190, 216, 255, 0.14); }
.hv-hero__structure span:nth-child(2) { top: 0; right: 6%; width: 38%; height: 22%; background: linear-gradient(160deg, #1d2a3d, #0b111b); }
.hv-hero__structure span:nth-child(3) { bottom: 4%; left: 10%; width: 40%; height: 22%; background: linear-gradient(20deg, #0b111b, #1a2638); }
.hv-hero__structure span:nth-child(4) { right: 8%; bottom: 12%; width: 34%; height: 34%; background: linear-gradient(150deg, #2476ff, #0645c9 55%, #062a78); }
.hv-hero__structure i { top: -4%; left: 44%; width: 11%; height: 108%; background: linear-gradient(180deg, #8cd7ff, #2476ff 34%, #0645c9 72%, rgba(6, 69, 201, 0.2)); box-shadow: 0 0 60px rgba(1, 88, 248, 0.45); }

/* ==========================================================================
   4. About
   ========================================================================== */

.hv-about__head {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-9);
    align-items: end;
}

.home-v3 .hv-about h2 {
    max-width: 18ch;
    margin: 0;
    font-size: var(--text-display-2);
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.hv-about__narrative p {
    margin: 0 0 var(--space-4);
    color: var(--mist-300);
    font-size: var(--text-body-l);
    line-height: 1.6;
}

.hv-about__figure-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-7);
    align-items: center;
    margin-top: var(--space-10);
    padding-top: var(--space-8);
    border-top: 1px solid var(--rule);
}

.hv-about__figure {
    margin: 0;
    color: rgba(233, 240, 252, 0.14);
    font-size: clamp(4.5rem, 9vw, 8.5rem);
    font-weight: 600;
    line-height: 0.82;
    letter-spacing: -0.06em;
}

.hv-about__figure-label {
    max-width: 40ch;
    margin: 0;
    color: var(--mist-300);
    font-size: var(--text-body-m);
    line-height: 1.55;
}

.hv-principles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gutter);
    margin: var(--space-9) 0 0;
    padding: 0;
    list-style: none;
}

.hv-principle { display: grid; gap: var(--space-3); align-content: start; }

.hv-principle__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background: rgba(1, 88, 248, 0.1);
    border: 1px solid var(--hv-hairline);
    border-radius: 12px;
    color: var(--ice-300);
    clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
}

.hv-principle__icon .icon { width: 22px; height: 22px; }
.hv-principle h3 { margin: 0; font-size: var(--text-h4); font-weight: 500; letter-spacing: -0.01em; }
.hv-principle p { margin: 0; color: var(--mist-300); font-size: var(--text-body-s); line-height: 1.55; }

/* ==========================================================================
   5. System map — the interactive moment
   ========================================================================== */

/* A block inside the about chapter now, not a section of its own, so it takes
   a margin rather than section padding. */
.hv-map { position: relative; margin-top: var(--space-10); }

/* The argument reads on the left, the demonstration sits beside it. */
.hv-map__layout {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-9);
    align-items: center;
}

.hv-map__intro { min-width: 0; }

.home-v3 .hv-map__heading {
    margin: 0 0 var(--space-4);
    font-size: var(--text-display-2);
    font-weight: 500;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.home-v3 .hv-map__heading em {
    color: var(--ice-300);
    font-style: normal;
}

.hv-map__text { margin: 0; max-width: 46ch; color: var(--mist-300); font-size: var(--text-body-l); }

/* No frame, no caption, no legend: the drawing is the only thing on this side.
   A square box, so the node ring reads as a circle rather than an oval. */
.hv-map__canvas-wrap {
    position: relative;
    width: 100%;
    max-width: 540px;
    margin-inline: auto;
    aspect-ratio: 1 / 1;
    touch-action: none;
}

.hv-map__canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.hv-map__canvas:active { cursor: grabbing; }

/* The list is the accessible equivalent of the canvas, not decoration. */
.hv-map__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
}

.hv-map__list-item {
    padding: 5px 12px;
    border: 1px solid var(--hv-hairline);
    border-radius: var(--radius-full);
    color: var(--mist-300);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hv-map__list-item--presence { border-color: rgba(255, 255, 255, 0.45); }
.hv-map__list-item--growth { border-color: rgba(140, 215, 255, 0.4); }
.hv-map__list-item--software { border-color: rgba(1, 88, 248, 0.45); }

.hv-map__foot { margin-top: var(--space-6); }

/* ==========================================================================
   6. Marquee — the single brand field
   ========================================================================== */

.hv-marquee {
    padding-block: var(--space-6);
    overflow: hidden;
    background: var(--signal-600);
    color: var(--night-950);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.hv-marquee__track { display: flex; width: max-content; }

.hv-marquee__list {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-6);
    margin: 0;
    padding: 0 var(--space-6) 0 0;
    list-style: none;
    font-size: clamp(1.75rem, 3.4vw, 3rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    white-space: nowrap;
}

.hv-marquee__list li { display: inline-flex; align-items: center; gap: var(--space-6); }
.hv-marquee__list span { color: rgba(5, 7, 11, 0.36); }

.hv-marquee.is-running .hv-marquee__track { animation: hv-marquee 42s linear infinite; }
.hv-marquee.is-paused .hv-marquee__track { animation-play-state: paused; }

@keyframes hv-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .hv-marquee__track { animation: none; }
    .hv-marquee { overflow-x: auto; }
}

/* ==========================================================================
   7. Capability — three equal pillar cards
   ========================================================================== */

.hv-capability__head {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-8);
    align-items: end;
    margin-bottom: var(--space-8);
}

.home-v3 .hv-capability h2 {
    max-width: 18ch;
    margin: 0;
    font-size: var(--text-display-2);
    letter-spacing: -0.035em;
}

.hv-capability__text { max-width: 52ch; margin: 0; color: var(--mist-300); font-size: var(--text-body-l); }

.hv-capability__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gutter);
    align-items: stretch;
    margin-bottom: var(--space-8);
}

/* One link per card: the arrow is decoration, so there is a single tab stop
   and a single target.

   The card itself does not clip. The artwork lives on its own rounded surface
   layer, and the arrow sits in a notch painted in the section background. When
   the card clipped the arrow with its own corner, the two curves anti-aliased
   against each other and left a sliver of card around the button; with the
   notch, everything behind the button is background colour. */
.hv-pillar {
    --pillar-radius: 30px;
    --notch-gap: 12px;
    --notch-curve: 22px;
    --action-size: 72px;
    --pillar-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: clamp(400px, 36vw, 520px);
    padding: clamp(28px, 3.2vw, 52px);
    border-radius: var(--pillar-radius);
    color: var(--pc-ink);
    text-decoration: none;
    isolation: isolate;
    transition: transform 520ms var(--pillar-ease);
}

.hv-pillar--white { --pc-bg: var(--white); --pc-ink: var(--night-950); --pc-sub: rgba(5, 7, 11, 0.66); }
.hv-pillar--blue  { --pc-bg: var(--signal-600); --pc-ink: var(--white); --pc-sub: rgba(255, 255, 255, 0.84); }
.hv-pillar--deep  { --pc-bg: #071a3d; --pc-ink: var(--white); --pc-sub: rgba(255, 255, 255, 0.72); }

/* Every supplied background is near-black where the copy sits, so an image
   card always takes white ink whatever its fallback tone. */
.hv-pillar.has-image { --pc-ink: var(--white); --pc-sub: rgba(233, 240, 252, 0.76); }

.hv-pillar__surface {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background: var(--pc-bg);
    border-radius: inherit;
    /* A mask keeps the rounded clip exact on the scaling image without
       promoting the surface to its own compositing layer. A separate layer
       (translateZ) let the clip and the image land on different sub-pixels
       while the card lifted, and a hairline of background showed at the
       bottom edge mid-transition. */
    isolation: isolate;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
}

/* Under a photograph the fallback tone must never be bright: any edge pixel
   that does show during the transition then matches the artwork, not white
   or signal blue. */
.hv-pillar.has-image .hv-pillar__surface { background: #020308; }

/* Overscanned by 2px on every side so the image edge never coincides with the
   clip edge, even at fractional offsets during the lift. */
.hv-pillar__image {
    position: absolute;
    inset: -2px;
    display: block;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    object-fit: cover;
    object-position: right top;
    transition: transform 1100ms var(--pillar-ease);
}

/* Weighted to the bottom-left where the copy sits; the waves stay untouched. */
.hv-pillar__veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, rgba(3, 5, 10, 0.78) 0%, rgba(3, 5, 10, 0.3) 38%, rgba(3, 5, 10, 0) 64%),
        linear-gradient(90deg, rgba(3, 5, 10, 0.4) 0%, rgba(3, 5, 10, 0) 58%);
    transition: opacity 520ms var(--pillar-ease);
}

.hv-pillar__body {
    position: relative;
    display: grid;
    gap: var(--space-3);
    /* Never runs under the notch. */
    max-width: min(22ch, calc(100% - var(--action-size)));
}

.hv-pillar__title {
    font-size: clamp(1.5rem, 2vw, 2rem);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.025em;
}

.hv-pillar__text {
    color: var(--pc-sub);
    font-size: var(--text-body-s);
    line-height: 1.55;
    transition: color 520ms var(--pillar-ease);
}

/* The notch: a block of section background in the corner, rounded where it
   meets the card, with two concave fillets so the card's right and bottom
   edges flow into it instead of meeting it at a hard angle. */
.hv-pillar__notch {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: var(--notch-gap) 0 0 var(--notch-gap);
    background: var(--bg);
    border-top-left-radius: calc(var(--notch-curve) + var(--notch-gap));
}

.hv-pillar__notch::before,
.hv-pillar__notch::after {
    position: absolute;
    width: var(--notch-curve);
    height: var(--notch-curve);
    content: "";
    background: radial-gradient(
        circle at 0 0,
        transparent calc(var(--notch-curve) - 0.5px),
        var(--bg) var(--notch-curve)
    );
}

.hv-pillar__notch::before { right: 0; bottom: 100%; }
.hv-pillar__notch::after  { right: 100%; bottom: 0; }

.hv-pillar__action {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--action-size);
    height: var(--action-size);
    background: var(--night-950);
    border-radius: var(--notch-curve);
    color: var(--white);
    transition: background-color 420ms var(--pillar-ease);
}

/* Two arrows in a clipped frame: on hover the first leaves through the
   top-right and the second arrives from the bottom-left. */
.hv-pillar__arrows {
    position: relative;
    width: 22px;
    height: 22px;
    overflow: hidden;
}

.hv-pillar__arrows .arrow {
    position: absolute;
    inset: 0;
    width: 22px;
    height: 22px;
    transition: transform 520ms cubic-bezier(0.65, 0, 0.35, 1);
}

.hv-pillar__arrows .arrow:last-child { transform: translate(-140%, 140%); }

/* Scoped under .home-v3 so it outranks the scroll-reveal rule, which also sets
   transform and transition on every [data-reveal] element. */
.home-v3 .hv-pillar[data-reveal] {
    transition:
        opacity var(--hv-reveal) var(--ease-enter),
        transform 520ms var(--pillar-ease);
}

.home-v3 .hv-pillar:hover,
.home-v3 .hv-pillar:focus-visible { transform: translateY(-4px); }

.hv-pillar:hover .hv-pillar__image,
.hv-pillar:focus-visible .hv-pillar__image { transform: scale(1.06); }

.hv-pillar:hover .hv-pillar__veil,
.hv-pillar:focus-visible .hv-pillar__veil { opacity: 0.86; }

.hv-pillar:hover .hv-pillar__text,
.hv-pillar:focus-visible .hv-pillar__text { color: var(--pc-ink); }

.hv-pillar:hover .hv-pillar__action,
.hv-pillar:focus-visible .hv-pillar__action { background-color: var(--signal-600); }

.hv-pillar:hover .hv-pillar__arrows .arrow:first-child,
.hv-pillar:focus-visible .hv-pillar__arrows .arrow:first-child { transform: translate(140%, -140%); }

.hv-pillar:hover .hv-pillar__arrows .arrow:last-child,
.hv-pillar:focus-visible .hv-pillar__arrows .arrow:last-child { transform: none; }

.hv-pillar:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px rgba(140, 215, 255, 0.65);
}

@media (prefers-reduced-motion: reduce) {
    .hv-pillar,
    .hv-pillar__image,
    .hv-pillar__veil,
    .hv-pillar__text,
    .hv-pillar__action,
    .hv-pillar__arrows .arrow { transition: none; }

    .home-v3 .hv-pillar:hover,
    .home-v3 .hv-pillar:focus-visible,
    .hv-pillar:hover .hv-pillar__image,
    .hv-pillar:focus-visible .hv-pillar__image { transform: none; }
}

/* ==========================================================================
   8. Features — one dominant visual, four annotations
   ========================================================================== */

.hv-features__head {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.home-v3 .hv-features h2 {
    max-width: 16ch;
    margin: 0;
    font-size: var(--text-display-2);
    letter-spacing: -0.035em;
}

.hv-features__wordmark {
    color: rgba(233, 240, 252, 0.06);
    font-size: clamp(3rem, 7vw, 7rem);
    font-weight: 600;
    line-height: 0.8;
    letter-spacing: -0.05em;
    white-space: nowrap;
    user-select: none;
}

.hv-features__layout {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-9);
    align-items: center;
}

.hv-features__media {
    position: relative;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--hv-hairline);
    border-radius: var(--hv-radius-lg);
}

.hv-features__image { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.hv-features__glow {
    position: absolute;
    right: -20%;
    bottom: -40%;
    width: 70%;
    height: 90%;
    background: radial-gradient(circle, rgba(1, 88, 248, 0.36) 0%, rgba(1, 88, 248, 0) 66%);
    pointer-events: none;
}

.hv-features__list { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }

.hv-feature {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--rule);
}

.hv-feature:last-child { border-bottom: 0; padding-bottom: 0; }

.hv-feature__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background: rgba(1, 88, 248, 0.12);
    border: 1px solid var(--hv-hairline);
    border-radius: 12px;
    color: var(--ice-300);
    clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
}

.hv-feature__icon .icon { width: 22px; height: 22px; }
.hv-feature h3 { margin: 0 0 6px; font-size: var(--text-body-m); font-weight: 500; }
.hv-feature p { margin: 0; color: var(--mist-300); font-size: var(--text-body-s); line-height: 1.55; }

/* ==========================================================================
   9. Process — oversized numerals beside a swapping panel
   ========================================================================== */

.hv-process__head { max-width: 60ch; margin-bottom: var(--space-9); }

.home-v3 .hv-process h2 {
    margin: var(--space-2) 0 var(--space-4);
    font-size: var(--text-display-2);
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.hv-process__lede { margin: 0; color: var(--mist-300); font-size: var(--text-body-l); }

.hv-process__layout {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-9);
    align-items: start;
}

.hv-process__steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.hv-process__step { border-bottom: 1px solid var(--rule); }

.hv-process__trigger {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 46px;
    gap: var(--space-5);
    align-items: center;
    width: 100%;
    padding: var(--space-5) 0 var(--space-2);
    background: none;
    border: 0;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.hv-process__num {
    color: rgba(233, 240, 252, 0.22);
    font-size: clamp(2rem, 3.4vw, 3rem);
    font-weight: 600;
    line-height: 0.9;
    letter-spacing: -0.04em;
    transition: color var(--t-standard) var(--ease);
}

.hv-process__title {
    font-size: var(--text-h3);
    font-weight: 500;
    letter-spacing: -0.02em;
    transition: transform var(--t-fast) var(--ease);
}

.hv-process__rule { height: 1px; background: var(--rule); transition: background var(--t-fast) var(--ease); }

.hv-process__step.is-active .hv-process__num { color: var(--signal-500); }
.hv-process__step.is-active .hv-process__rule { background: var(--ice-300); }
.hv-process__trigger:hover .hv-process__title { transform: translateX(5px); }

.hv-process__text {
    max-width: 58ch;
    margin: 0;
    padding: 0 0 var(--space-6) calc(clamp(2rem, 3.4vw, 3rem) + var(--space-5));
    color: var(--mist-300);
    font-size: var(--text-body-s);
    line-height: 1.6;
}

.hv-process__panels { position: sticky; top: 110px; display: grid; }

.hv-process__panel {
    position: relative;
    display: grid;
    gap: var(--space-4);
    align-content: start;
    padding: var(--space-7);
    overflow: hidden;
    background:
        radial-gradient(circle at 86% 8%, rgba(1, 88, 248, 0.24) 0%, rgba(1, 88, 248, 0) 54%),
        var(--slate-850);
    border: 1px solid var(--hv-hairline);
    border-radius: var(--hv-radius-lg);
    min-height: 320px;
    isolation: isolate;
}

/* With artwork the panel becomes a photograph: taller, image behind, a veil
   over it, content above. isolation keeps the negative z-indexes below the
   content but above the panel's own background. */
.hv-process__panel.has-art {
    align-content: end;
    min-height: 440px;
}

.hv-process__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Darkest at the bottom-left where the copy sits, so it holds contrast over
   any frame of the photograph. */
.hv-process__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(0deg, rgba(5, 7, 11, 0.94) 0%, rgba(5, 7, 11, 0.72) 42%, rgba(5, 7, 11, 0.3) 100%),
        linear-gradient(90deg, rgba(5, 7, 11, 0.5) 0%, rgba(5, 7, 11, 0) 70%);
}

.hv-process__layout.is-enhanced .hv-process__panel {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--t-standard) var(--ease), transform var(--t-standard) var(--ease);
}

.hv-process__layout.is-enhanced .hv-process__panel.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.hv-process__panel-index {
    margin: 0;
    color: var(--ice-300);
    font-family: var(--font-mono);
    font-size: var(--text-mono-label);
    letter-spacing: 0.1em;
}

.hv-process__panel h3 { margin: 0; font-size: var(--text-h2); font-weight: 500; letter-spacing: -0.03em; }

.hv-process__outputs { display: grid; gap: var(--space-3); margin: var(--space-3) 0 0; padding: 0; list-style: none; }

.hv-process__outputs li {
    position: relative;
    padding-left: 22px;
    color: var(--mist-300);
    font-size: var(--text-body-s);
}

.hv-process__outputs li::before {
    position: absolute;
    top: 0.62em;
    left: 0;
    width: 10px;
    height: 2px;
    content: "";
    background: var(--ice-300);
    transform: skewX(calc(var(--cut) * -1));
}

.hv-process__panel-cut {
    position: absolute;
    top: -14%;
    right: 14%;
    width: 74px;
    height: 128%;
    background: linear-gradient(180deg, rgba(140, 215, 255, 0.16), rgba(1, 88, 248, 0.02));
    transform: skewX(calc(var(--cut) * -1));
    pointer-events: none;
}

/* ==========================================================================
   10. Projects — a cinematic, draggable rail
   ========================================================================== */

.hv-projects { overflow: hidden; }

.hv-projects__head {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: var(--space-8);
    align-items: end;
    margin-bottom: var(--space-8);
}

.home-v3 .hv-projects h2 {
    max-width: 20ch;
    margin: 0;
    font-size: var(--text-display-2);
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.hv-projects__counter {
    display: flex;
    align-items: baseline;
    gap: 6px;
    justify-self: end;
    color: rgba(233, 240, 252, 0.16);
    font-size: clamp(3.5rem, 7vw, 6.5rem);
    font-weight: 600;
    line-height: 0.85;
    letter-spacing: -0.055em;
}

.hv-projects__counter-plus { color: rgba(36, 118, 255, 0.5); }

.hv-projects__counter-label {
    align-self: end;
    padding-bottom: 0.6em;
    color: var(--steel-500);
    font-family: var(--font-mono);
    font-size: var(--text-mono-label);
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hv-projects__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    padding-inline: max(var(--margin), calc((100vw - var(--content)) / 2));
    /* Snapping aligns a card to the snapport, which ignores padding-inline.
       Without a matching scroll-padding the first card is pulled flush to the
       edge and the rail loses its alignment with the container. */
    scroll-padding-inline: max(var(--margin), calc((100vw - var(--content)) / 2));
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.hv-projects__viewport::-webkit-scrollbar { display: none; }
.hv-projects__viewport.is-enhanced { cursor: grab; }
.hv-projects__viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.hv-projects__viewport.is-dragging .hv-project__link { pointer-events: none; }

.hv-projects__track {
    display: flex;
    gap: var(--gutter);
    margin: 0;
    padding: 0 0 var(--space-4);
    list-style: none;
}

.hv-project { flex: 0 0 clamp(280px, 34vw, 470px); scroll-snap-align: start; }

.hv-project__link {
    display: grid;
    gap: var(--space-4);
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.hv-project__media {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: var(--night-950);
    border: 1px solid var(--hv-hairline);
    border-radius: var(--hv-radius-lg);
}

.hv-project__image {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform var(--t-deliberate) var(--ease-enter);
}

.hv-project__link:hover .hv-project__image { transform: scale(1.03); }

.hv-project__plate {
    display: flex;
    align-items: flex-end;
    aspect-ratio: 3 / 2;
    padding: var(--space-5);
    background: linear-gradient(160deg, var(--slate-800), var(--night-950) 72%);
    color: var(--ice-300);
    font-family: var(--font-mono);
    font-size: var(--text-mono-data);
    text-transform: uppercase;
}

.hv-project__status {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    padding: 5px 11px;
    background: rgba(5, 7, 11, 0.72);
    border: 1px solid var(--hv-hairline);
    border-radius: var(--radius-full);
    color: var(--mist-300);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.hv-project__body { display: grid; gap: var(--space-2); }

.hv-project__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: 0;
    color: var(--steel-500);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hv-project__title { margin: 0; font-size: var(--text-h4); font-weight: 500; letter-spacing: -0.015em; }
.hv-project__text { margin: 0; color: var(--mist-300); font-size: var(--text-body-s); line-height: 1.55; }

.hv-project__action {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--space-2);
    color: var(--signal-500);
    font-size: var(--text-ui);
    font-weight: 500;
}

.hv-project__action .arrow { width: 16px; height: 16px; transition: transform var(--t-fast) var(--ease); }
.hv-project__link:hover .hv-project__action .arrow { transform: translateX(3px); }

.hv-projects__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.hv-projects__controls { display: flex; gap: var(--space-3); }

.hv-slider-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--hv-hairline-strong);
    border-radius: var(--radius-full);
    color: var(--white);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}

.hv-slider-btn:hover:not(:disabled) { background: var(--signal-600); border-color: var(--signal-600); }
.hv-slider-btn:disabled { opacity: 0.32; cursor: default; }
.hv-slider-btn .arrow { width: 18px; height: 18px; }
.hv-slider-btn .arrow.is-back { transform: rotate(180deg); }

/* ==========================================================================
   11. Packages
   ========================================================================== */

.hv-packages__note {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: var(--space-4) var(--gutter);
    margin-bottom: var(--space-8);
    padding: var(--space-4) 0;
    border-block: 1px solid var(--rule);
}

.hv-packages__note-label {
    color: var(--steel-500);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hv-packages__note p { max-width: 68ch; margin: 0; color: var(--mist-300); font-size: var(--text-body-s); }

.hv-packages__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gutter);
    align-items: stretch;
}

.hv-package {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-7) var(--space-6) var(--space-6);
    overflow: hidden;
    background: var(--hv-card);
    border: 1px solid var(--hv-hairline);
    border-radius: var(--hv-radius);
    transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.hv-package:hover { border-color: var(--hv-hairline-strong); transform: translateY(-3px); box-shadow: var(--shadow-low); }

.hv-package__plane {
    position: absolute;
    top: -18%;
    right: 12%;
    width: 54px;
    height: 90px;
    background: linear-gradient(180deg, rgba(1, 88, 248, 0.14), rgba(1, 88, 248, 0));
    transform: skewX(calc(var(--cut) * -1));
    pointer-events: none;
}

.hv-package--featured {
    background:
        radial-gradient(circle at 82% 6%, rgba(1, 88, 248, 0.3) 0%, rgba(1, 88, 248, 0) 48%),
        var(--night-950);
    border-color: rgba(169, 199, 255, 0.24);
    box-shadow: var(--shadow-high);
}

.hv-package--featured .hv-package__plane { background: linear-gradient(180deg, rgba(140, 215, 255, 0.26), rgba(140, 215, 255, 0)); }

.hv-package__badge {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    padding: 4px 10px;
    border: 1px solid rgba(190, 216, 255, 0.32);
    border-radius: var(--radius-full);
    color: var(--ice-300);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hv-package__index {
    margin: 0;
    color: var(--steel-500);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hv-package__title { margin: 0; font-size: var(--text-h3); font-weight: 500; letter-spacing: -0.02em; }
.hv-package__text { margin: 0; color: var(--mist-300); font-size: var(--text-body-s); line-height: 1.55; }

.hv-package__price-block {
    display: grid;
    gap: var(--space-1);
    margin-top: var(--space-4);
    padding-top: var(--space-5);
    border-top: 1px solid var(--rule);
}

.hv-package__price-label,
.hv-package__note-text {
    color: var(--steel-500);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hv-package__price {
    margin: 0;
    font-size: var(--text-h1);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.hv-package__features {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-5) 0 var(--space-6);
    padding: var(--space-5) 0 0;
    list-style: none;
    border-top: 1px solid var(--rule);
}

.hv-package__features li { position: relative; padding-left: 26px; font-size: var(--text-body-s); line-height: 1.45; }

.hv-package__features li::before,
.hv-package__features li::after {
    position: absolute;
    top: 0.66em;
    width: 7px;
    height: 2px;
    content: "";
    background: var(--signal-600);
    transform: skewX(calc(var(--cut) * -1));
}

.hv-package__features li::before { left: 0; }
.hv-package__features li::after { left: 10px; opacity: 0.45; }

.hv-package--featured .hv-package__features li::before,
.hv-package--featured .hv-package__features li::after { background: var(--ice-300); }

.hv-package__cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 52px;
    margin-top: auto;
    padding: 8px 8px 8px 16px;
    background: var(--white);
    border: 1px solid var(--white);
    border-radius: var(--radius-sm);
    color: var(--night-950);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.hv-package__cta-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 8px;
    background: rgba(5, 7, 11, 0.1);
}

.hv-package__cta-tile .icon { width: 16px; height: 16px; transition: transform var(--t-fast) var(--ease); }

.hv-package__cta:hover,
.hv-package__cta:focus-visible {
    background: var(--signal-600);
    border-color: var(--signal-600);
    color: var(--white);
}

.hv-package__cta:hover .hv-package__cta-tile { background: rgba(255, 255, 255, 0.16); }
.hv-package__cta:hover .icon { transform: translate(3px, -3px); }

.hv-package--featured .hv-package__cta { background: var(--signal-600); border-color: var(--signal-600); color: var(--white); }
.hv-package--featured .hv-package__cta:hover { background: var(--signal-500); border-color: var(--signal-500); }
.hv-package--featured .hv-package__cta-tile { background: rgba(255, 255, 255, 0.16); }

.hv-decision {
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr) auto;
    gap: 26px;
    align-items: center;
    margin-top: 52px;
    padding: 20px 20px 20px 24px;
    background:
        radial-gradient(circle at 10% 50%, rgba(1, 88, 248, 0.2) 0%, rgba(1, 88, 248, 0) 28%),
        linear-gradient(110deg, #07101d, #11151c 62%, #0b1422);
    border: 1px solid var(--hv-hairline);
    border-radius: 20px;
    box-shadow: 0 24px 58px rgba(18, 39, 74, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: var(--white);
}

.hv-decision__mark {
    display: grid;
    gap: 5px;
    align-content: center;
    width: 66px;
    height: 66px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(190, 216, 255, 0.18);
    border-radius: 16px;
}

.hv-decision__mark i { height: 3px; background: var(--ice-300); transform: skewX(calc(var(--cut) * -1)); }
.hv-decision__mark i:nth-child(2) { width: 72%; background: var(--signal-500); }
.hv-decision__mark i:nth-child(3) { width: 44%; background: rgba(140, 215, 255, 0.5); }

.hv-decision__label {
    margin: 0 0 4px;
    color: var(--ice-300);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hv-decision__text { max-width: 680px; margin: 0; color: var(--mist-300); font-size: var(--text-body-s); }

/* ==========================================================================
   12. Voices
   ========================================================================== */

/* The brand-mark pattern fills the section's empty right-hand field. The
   artwork is a non-tiling transparent portrait with marks cropped at its left
   edge, so it is placed once rather than repeated, anchored to the right, and
   scaled past the section height so the marks crop the way the source does.
   Kept at low opacity so it reads as texture, and masked towards the copy and
   at both section edges so it has no hard boundary. */
.hv-voices {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.hv-voices::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: min(44vw, 640px);
    content: "";
    background: url("../pattern-sh.webp") right center / auto 118% no-repeat;
    opacity: 0.16;
    pointer-events: none;
    -webkit-mask-image:
        linear-gradient(90deg, transparent 0%, #000 46%),
        linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(90deg, transparent 0%, #000 46%),
        linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
    mask-composite: intersect;
}

.hv-voices__head { max-width: 52ch; margin-bottom: var(--space-8); }

.home-v3 .hv-voices h2 {
    margin: var(--space-2) 0 0;
    font-size: var(--text-display-2);
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.hv-voices__wall {
    columns: 3;
    column-gap: var(--gutter);
    margin: 0;
    padding: 0;
    list-style: none;
}

.hv-voice {
    break-inside: avoid;
    margin: 0 0 var(--gutter);
    padding: var(--space-6);
    background: var(--hv-card);
    border: 1px solid var(--hv-hairline);
    border-radius: var(--hv-radius);
}

.hv-voice blockquote { margin: 0 0 var(--space-4); color: var(--white); font-size: var(--text-body-m); line-height: 1.55; }
.hv-voice__by { display: grid; gap: 2px; font-size: var(--text-body-s); }
.hv-voice__by span { color: var(--steel-500); }

.hv-voices__empty {
    display: grid;
    gap: var(--space-6);
    max-width: 860px;
    padding: var(--space-9);
    background:
        radial-gradient(circle at 88% 10%, rgba(1, 88, 248, 0.2) 0%, rgba(1, 88, 248, 0) 48%),
        var(--slate-850);
    border: 1px solid var(--hv-hairline);
    border-radius: var(--hv-radius-lg);
}

.hv-voices__empty-text { max-width: 54ch; margin: 0; color: var(--mist-300); font-size: var(--text-body-l); line-height: 1.6; }
.hv-voices__empty-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* ==========================================================================
   13. Insights — editorial rows
   ========================================================================== */

.hv-insights__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
    margin-bottom: var(--space-8);
}

.home-v3 .hv-insights h2 {
    max-width: 20ch;
    margin: var(--space-2) 0 0;
    font-size: var(--text-h1);
    letter-spacing: -0.03em;
}

.hv-insights__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.hv-insight { border-bottom: 1px solid var(--rule); }

.hv-insight__link {
    display: grid;
    grid-template-columns: 48px minmax(0, 190px) minmax(0, 1fr) 48px;
    gap: var(--space-5);
    align-items: center;
    padding: var(--space-5) 0;
    color: inherit;
    text-decoration: none;
}

.hv-insight__index { color: var(--steel-500); font-family: var(--font-mono); font-size: var(--text-mono-label); letter-spacing: 0.1em; }

.hv-insight__media { margin: 0; overflow: hidden; border-radius: 12px; }

.hv-insight__image,
.hv-insight__plate {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform var(--t-deliberate) var(--ease-enter);
}

.hv-insight__plate { background: linear-gradient(150deg, var(--slate-800), var(--night-950)); border: 1px solid var(--hv-hairline); }
.hv-insight__link:hover .hv-insight__image { transform: scale(1.04); }

.hv-insight__meta { margin: 0 0 6px; color: var(--steel-500); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.hv-insight__title { margin: 0 0 6px; font-size: var(--text-h4); font-weight: 500; letter-spacing: -0.015em; transition: color var(--t-fast) var(--ease); }
.hv-insight__link:hover .hv-insight__title { color: var(--ice-300); }
.hv-insight__text { margin: 0; color: var(--mist-300); font-size: var(--text-body-s); }

.hv-insight__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--hv-hairline);
    border-radius: var(--radius-full);
    color: var(--mist-300);
    transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.hv-insight__action .arrow { width: 16px; height: 16px; }
.hv-insight__link:hover .hv-insight__action { border-color: var(--ice-300); color: var(--ice-300); }

/* ==========================================================================
   14. FAQ — a sticky argument against a disclosure list
   ========================================================================== */

.hv-faq__layout {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-9);
    align-items: start;
}

.hv-faq__aside { position: sticky; top: 110px; }

.home-v3 .hv-faq h2 {
    max-width: 16ch;
    margin: var(--space-2) 0 var(--space-4);
    font-size: var(--text-display-2);
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.hv-faq__text {
    max-width: 42ch;
    margin: 0 0 var(--space-6);
    color: var(--mist-300);
    font-size: var(--text-body-m);
    line-height: 1.6;
}

.hv-faq__list { border-top: 1px solid var(--rule); }

.hv-faq__item { border-bottom: 1px solid var(--rule); }

/* Native disclosure: the platform supplies the keyboard and screen-reader
   behaviour, so only the default marker needs removing. */
.hv-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-5) 0;
    list-style: none;
    cursor: pointer;
    transition: color var(--t-fast) var(--ease);
}

.hv-faq__q::-webkit-details-marker { display: none; }

.hv-faq__q-text {
    font-size: var(--text-body-m);
    font-weight: 500;
    letter-spacing: -0.01em;
}

.hv-faq__q:hover { color: var(--ice-300); }

.hv-faq__q:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 5px rgba(140, 215, 255, 0.55);
}

/* A plus that becomes a minus: one bar stays, the crossing bar fades out. */
.hv-faq__mark {
    position: relative;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

.hv-faq__mark::before,
.hv-faq__mark::after {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    content: "";
    background: var(--ice-300);
    transform: translateY(-50%);
    transition: transform var(--t-standard) var(--ease), opacity var(--t-standard) var(--ease);
}

.hv-faq__mark::after { transform: translateY(-50%) rotate(90deg); }

.hv-faq__item[open] .hv-faq__mark::after {
    opacity: 0;
    transform: translateY(-50%) rotate(0deg);
}

.hv-faq__a {
    max-width: 62ch;
    padding: 0 0 var(--space-5);
    color: var(--mist-300);
    font-size: var(--text-body-s);
    line-height: 1.62;
}

.hv-faq__a p { margin: 0; }

.hv-faq__item[open] .hv-faq__a { animation: hv-faq-reveal 320ms var(--ease-enter) both; }

@keyframes hv-faq-reveal {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hv-faq__item[open] .hv-faq__a { animation: none; }
    .hv-faq__mark::before,
    .hv-faq__mark::after { transition: none; }
}

/* ==========================================================================
   15. Inquiry chapter
   ========================================================================== */

.home-v3 .project-inquiry { position: relative; overflow: hidden; }

.home-v3 .project-inquiry::after {
    position: absolute;
    top: -14%;
    left: 34%;
    width: 96px;
    height: 128%;
    content: "";
    background: linear-gradient(180deg, rgba(140, 215, 255, 0.1), rgba(1, 88, 248, 0.02) 64%, transparent);
    transform: skewX(calc(var(--cut) * -1));
    pointer-events: none;
}

.home-v3 .project-inquiry-inner { position: relative; z-index: 1; }

/* ==========================================================================
   16. Responsive
   ========================================================================== */

@media (max-width: 1279px) {
    .hv-voices__wall { columns: 2; }
}

@media (max-width: 1023px) {
    .hv-hero { min-height: auto; padding-block: 150px var(--space-8); }
    .hv-hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
    .hv-hero__proof { max-width: 420px; }
    .hv-hero__scroll { display: none; }


    .hv-about__head,
    .hv-map__layout,
    .hv-capability__head,
    .hv-features__layout,
    .hv-process__layout,
    .hv-faq__layout,
    .hv-projects__head { grid-template-columns: minmax(0, 1fr); }

    .hv-faq__aside { position: static; }

    .hv-about__figure-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
    /* Stacked, the button would otherwise stretch the full column width. */
    .hv-about__figure-row .hv-btn { justify-self: start; }
    .hv-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .hv-process__panels { position: static; }

    .hv-capability__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .hv-features__head { flex-direction: column; align-items: flex-start; }
    .hv-features__wordmark { display: none; }

    .hv-projects__counter { justify-self: start; }
    .hv-packages__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .hv-insight__link { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: var(--space-4); }
    .hv-insight__index,
    .hv-insight__action { display: none; }
}

@media (max-width: 767px) {
    .hv-hero { padding-block: 130px var(--space-7); }
    .hv-hero__title { max-width: none; font-size: clamp(2.5rem, 11vw, 3.5rem); }
    .hv-hero__actions { flex-direction: column; align-items: stretch; }
    .home-v3 .hv-hero .hv-btn { width: 100%; }


    .hv-principles { grid-template-columns: minmax(0, 1fr); }
    .hv-packages__grid { grid-template-columns: minmax(0, 1fr); }

    /* Same composition, smaller: artwork above, text anchored at the bottom. */
    .hv-capability__cards { grid-template-columns: minmax(0, 1fr); }
    .hv-pillar {
        --pillar-radius: 24px;
        --notch-gap: 10px;
        --notch-curve: 18px;
        --action-size: 60px;

        min-height: 360px;
    }
    .hv-voices__wall { columns: 1; }
    .hv-voices__empty { padding: var(--space-6); }

    /* Stacked, the copy spans the full width and there is no empty field left
       for the pattern to occupy; anywhere it goes it would sit behind text. */
    .hv-voices::before { display: none; }
    .hv-voices__empty-actions { flex-direction: column; align-items: stretch; }

    /* Stays square at every width; aspect-ratio does the sizing. */
    .hv-map__canvas-wrap { max-width: 380px; }

    .hv-process__trigger { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); }
    .hv-process__rule { display: none; }
    .hv-process__text { padding-left: 0; }
    .hv-process__panel { padding: var(--space-5); min-height: 0; }
    .hv-process__panel.has-art { min-height: 340px; }

    .hv-project { flex: 0 0 82vw; }
    .hv-projects__foot { flex-direction: column; align-items: flex-start; }

    .hv-insight__link { grid-template-columns: minmax(0, 1fr); }
    .hv-insight__media { max-width: 220px; }

    .hv-decision { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5); }
    .hv-decision__mark { display: none; }
    .hv-decision__cta { width: 100%; }

    .hv-marquee__list { font-size: clamp(1.5rem, 8vw, 2rem); gap: var(--space-5); }
}