/* ==========================================================================
   pages.css — page-specific sections (hero, bands, closing)
   ========================================================================== */

/* --------------------------------------------------------------------------
   §11.2 — Hero. Large headline, short lead, primary CTA. Cover-scatter
   background on the sky field. The one place boldness is spent.

   Height: the hero is locked to exactly one viewport below the sticky header
   (no internal scroll, ever). Type and vertical rhythm use viewport-aware
   clamps so the content shrinks to fit a short screen instead of overflowing.
   Mobile reverts to natural, content-driven height.
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    background: var(--sky);          /* §3 — sky is hero only */
    overflow: hidden;
    color: var(--raven);
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h)); /* dynamic viewport — accounts for mobile browser UI */
    display: flex;
    align-items: center;
}
.hero__inner {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    /* Vertical padding scales with viewport height so it never eats the space
       the content needs on short screens. */
    padding: clamp(24px, 4vh, 72px) var(--pad-x);
}
@media (max-width: 768px) {
    .hero {
        /* Natural height on mobile — let content set the size, no forced vh.
           Avoids the address-bar resize jump and lets the headline breathe. */
        height: auto;
        min-height: calc(100svh - var(--header-h));
        display: block;
    }
    .hero__inner {
        padding: clamp(56px, 11vw, 100px) var(--pad-x-mobile) clamp(56px, 9vw, 88px);
    }
}

/* Short desktop screens (laptops): the locked height stays, content tightens. */
@media (min-width: 769px) and (max-height: 760px) {
    .hero__inner { padding-block: clamp(16px, 2.5vh, 40px); }
    /* Drop the decorative corner identifiers — not enough vertical room. */
    .hero__footnote { display: none; }
}

.hero__eyebrow {
    font-size: var(--fs-eyebrow);
    font-weight: 800;
    letter-spacing: var(--tr-eyebrow);
    text-transform: uppercase;
    color: var(--deep-sky);
    margin-bottom: clamp(12px, 2.2vh, 22px);
}
.hero__title {
    /* Default (mobile / natural-height hero): width-based size only. */
    font-size: var(--fs-hero);
    font-weight: 900;
    letter-spacing: var(--tr-hero);
    line-height: 0.98;
    color: var(--raven);
    max-width: 16ch;
    text-wrap: balance;
}
/* Desktop (locked-height hero): also cap by viewport height so a short screen
   shrinks the headline and the hero fits in one viewport without scrolling. */
@media (min-width: 769px) {
    .hero__title { font-size: min(var(--fs-hero), 12.5vh); }
}
.hero__title .accent { color: var(--cerulean); }

/* Cerulean rule under the title (echoes cov-rule) */
.hero__rule {
    width: 96px;
    height: 3px;
    background: var(--cerulean);
    border: 0;
    margin: clamp(16px, 3vh, 32px) 0;
}
.hero__lead {
    font-size: var(--fs-lead);
    line-height: 1.5;
    color: var(--midnight);
    max-width: 56ch;
}
.hero__actions {
    margin-top: clamp(18px, 3.4vh, 36px);
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Quiet identifiers in the lower corners (echo cov-caption / cov-year) */
.hero__footnote {
    position: absolute;
    bottom: 22px;
    z-index: 10;
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: var(--tr-tag);
    text-transform: uppercase;
    color: rgba(11,36,69,0.5);
}
.hero__footnote--start { inset-inline-start: var(--pad-x); }
.hero__footnote--end   { inset-inline-end: var(--pad-x); letter-spacing: 0.28em; }
@media (max-width: 768px) {
    .hero__footnote { display: none; }
}

/* --------------------------------------------------------------------------
   Positioning band — the "what we do" intro and 4-card grid sit on icefield.
   Standard section; nothing special beyond rhythm.
   -------------------------------------------------------------------------- */
.band { padding-block: var(--section-y); }
.band__head { margin-bottom: clamp(40px, 4vw, 64px); }

/* Two-column intro: heading left, supporting paragraph right (alignment device) */
.split-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: end;
    margin-bottom: clamp(40px, 4vw, 64px);
}
.split-intro__aside {
    font-size: var(--fs-body);
    line-height: 1.65;
    color: var(--raven);
}
.split-intro__aside p + p { margin-top: 14px; }
@media (max-width: 820px) {
    .split-intro { grid-template-columns: 1fr; gap: 24px; align-items: start; }
}

/* --------------------------------------------------------------------------
   The shift narrative — Advisory & Intent → Managed Delivery (§1)
   A horizontal "from → to" device on a midnight band. The brand's core story.
   -------------------------------------------------------------------------- */
.shift {
    background: var(--midnight);
    color: var(--white);
    position: relative;
    overflow: hidden;
}
.shift::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
    background-size: 44px 44px;
    pointer-events: none;
}
.shift .container { position: relative; z-index: 1; }
.shift__eyebrow {
    font-size: var(--fs-eyebrow);
    font-weight: 800;
    letter-spacing: var(--tr-eyebrow);
    text-transform: uppercase;
    color: var(--cerulean-light);
    margin-bottom: 28px;
}
.shift__row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
}
.shift__pole .label {
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: var(--tr-tag);
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    margin-bottom: 12px;
}
.shift__pole .term {
    font-size: clamp(1.5rem, 1rem + 2vw, 2.6rem);
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.05;
}
.shift__pole--from .term { color: rgba(255,255,255,0.55); }
.shift__pole--to .term   { color: var(--white); }
.shift__pole--to .term .accent { color: var(--cerulean-light); }

.shift__arrow {
    width: clamp(40px, 6vw, 72px);
    color: var(--cerulean);
    display: flex;
    align-items: center;
}
.shift__arrow svg { width: 100%; height: auto; stroke: currentColor; fill: none; stroke-width: 1.5; }
[dir="rtl"] .shift__arrow svg { transform: scaleX(-1); }

.shift__foot {
    margin-top: clamp(32px, 4vw, 48px);
    padding-top: 28px;
    border-top: 1px solid var(--border-on-dark);
    font-size: var(--fs-lead);
    line-height: 1.5;
    color: rgba(255,255,255,0.82);
    max-width: 58ch;
}
.shift__foot .land { color: var(--white); font-weight: 700; }

@media (max-width: 720px) {
    .shift__row { grid-template-columns: 1fr; gap: 20px; }
    .shift__arrow { transform: rotate(90deg); width: 40px; }
    [dir="rtl"] .shift__arrow svg { transform: none; }
}

/* --------------------------------------------------------------------------
   Use-case teaser — sector cards feeding from the UseCases deck (§12.4)
   Sector-anonymized: sector descriptor + metric + one line.
   -------------------------------------------------------------------------- */
.usecase-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gutter);
}
.usecase {
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: 2px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: border-color var(--dur-mid) var(--ease-inout);
}
.usecase:hover { border-color: var(--cerulean); }
.usecase__sector {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cerulean);
}
.usecase__metric {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.usecase__metric .num {
    font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 0.9;
    color: var(--raven);
    font-variant-numeric: tabular-nums;
}
.usecase__metric .unit {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--silver-dark);
}
.usecase__line {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--raven);
}
@media (max-width: 720px) {
    .usecase-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   §11.7 — Two-column closing CTA. 45% midnight + 55% icefield. Corner
   triangle accent at the seam. The print back-cover, made into a web band.
   -------------------------------------------------------------------------- */
.closing {
    display: grid;
    grid-template-columns: 45% 55%;
    min-height: 420px;
}
.closing__left {
    background: var(--midnight);
    color: var(--white);
    padding: clamp(48px, 5vw, 80px);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.closing__left::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 12mm 12mm;
    pointer-events: none;
}
/* §6.5 — corner triangle, upper-inline-end of the midnight panel */
.closing__left::after {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    width: 0; height: 0;
    border-style: solid;
    border-width: 0 56px 56px 0;
    border-color: transparent var(--cerulean) transparent transparent;
    z-index: 1;
}
[dir="rtl"] .closing__left::after {
    inset-inline-end: auto;
    inset-inline-start: 0;
    border-width: 0 0 56px 56px;
    border-color: transparent transparent transparent var(--cerulean);
}
.closing__inner { position: relative; z-index: 2; }
.closing__mark { display: flex; gap: 4px; margin-bottom: 24px; }
.closing__mark span { width: 12px; height: 12px; background: var(--cerulean); }
.closing__mark span:nth-child(2) { background: var(--sky); opacity: 0.7; }
.closing__mark span:nth-child(3) { background: var(--ice); opacity: 0.4; }
.closing__headline {
    font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.2rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--white);
    margin-bottom: 18px;
    max-width: 18ch;
}
.closing__body {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.78);
    max-width: 40ch;
}
.closing__right {
    background: var(--icefield);
    padding: clamp(48px, 5vw, 80px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
}
.closing__right .eyebrow { color: var(--cerulean); }
.closing__cta-title {
    font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.2rem);
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--raven);
    max-width: 16ch;
}
.closing__contacts { display: flex; flex-direction: column; gap: 16px; }
.closing__contact-row { display: flex; align-items: center; gap: 14px; }
.closing__contact-ico {
    flex-shrink: 0;
    width: 42px; height: 42px;
    border-radius: 4px;
    background: rgba(51,116,186,0.08);
    display: flex; align-items: center; justify-content: center;
    color: var(--cerulean);
}
.closing__contact-ico svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.closing__contact-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(35,31,32,0.55);
    margin-bottom: 2px;
}
.closing__contact-value {
    font-size: 1rem;
    font-weight: 800;
    color: var(--raven);
    word-break: break-word;
}

@media (max-width: 860px) {
    .closing { grid-template-columns: 1fr; }
    .closing__left { min-height: 280px; }
}

/* --------------------------------------------------------------------------
   Services page — intro lead + full six-pillar grid + standards strip
   -------------------------------------------------------------------------- */
.svc-hero {
    background: var(--sky);
    position: relative;
    overflow: hidden;
}
.svc-hero__inner {
    position: relative;
    z-index: 10;
    max-width: var(--container);
    margin-inline: auto;
    padding: clamp(64px, 7vw, 110px) var(--pad-x) clamp(56px, 6vw, 90px);
}
@media (max-width: 768px) {
    .svc-hero__inner { padding-inline: var(--pad-x-mobile); }
}
.svc-hero__title {
    font-size: var(--fs-h1);
    font-weight: 900;
    letter-spacing: var(--tr-display);
    line-height: 1.05;
    color: var(--raven);
    max-width: 18ch;
}
.svc-hero__lead {
    font-size: var(--fs-lead);
    line-height: 1.5;
    color: var(--midnight);
    margin-top: 22px;
    max-width: 56ch;
}

.pillar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gutter);
}
@media (max-width: 980px) { .pillar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .pillar-grid { grid-template-columns: 1fr; } }

/* Standards strip — sober line items, the "how the work gets done" voice */
.standards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 clamp(32px, 5vw, 72px);
}
.standards__item {
    padding-block: 28px;
    border-top: 1px solid var(--border-soft);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: start;
}
.standards__num {
    font-size: 0.9rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: var(--cerulean);
    font-variant-numeric: tabular-nums;
    padding-top: 2px;
}
.standards__title {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--raven);
    margin-bottom: 8px;
}
.standards__body {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--raven);
}
@media (max-width: 720px) {
    .standards { grid-template-columns: 1fr; }
}