/* ==========================================================================
   home — page-specific layout
   Built against design-output/home/full-page.png and the section captures.
   Header, footer, buttons, pills, CTA banner, FAQ, spine and dividers are
   shared and live in global.css.

   Image areas use placeholder gradients: the reference art is only present
   inside the extracted screenshots, not as separate assets. Each one is a
   single `background` declaration to swap.
   ========================================================================== */

/* ── Section 1 — Hero ─────────────────────────────────────── */

/* Full-bleed illustration (assets/images/hero-bg.jpg, the source artwork) with
   the header floating over its top edge.

   Two stacked parts, and the split is the point: .hero-home__viewport owns one
   full screen for the type, and the client cards sit under it. Measured off
   design-output/home/section-01.png — a 1212px section captured at a 1440x900
   viewport, with the trust line ending at y 710 and the cards starting at 752.
   Holding the cards inside the full-screen box is what squeezed the type and
   pulled the trust line up under the button. The picture still runs behind
   both, as it does on the source. */
.hero-home {
    position: relative;
    isolation: isolate;          /* keeps the image behind this section only */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: var(--s-10);  /* 80px of picture below the cards, as the reference */
    color: var(--text-inverse);
    text-align: center;
    /* Shows while the photograph decodes, and behind it if it fails to load */
    background: #3f6b4a;
}

/* One screen for the type. 180px of head clearance puts the badge at the
   reference's y 183, under the floating bar; the foot padding leaves the
   reference's 42px under the trust line. */
.hero-home__viewport {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    padding-block: 180px var(--s-8);
}

/* An <img> rather than a background so the browser can prioritise and size it
   like any other LCP image. object-fit does the cropping a cover background
   would have done. */
/* The artwork's subject — the figure with the laptop on the rock — sits low and
   right of centre, so the crop is anchored to the bottom rather than the middle:
   a centred crop on a tall section trims exactly the ground the figure sits on. */
.hero-home__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% bottom;
}

/* The artwork is bright at the horizon, so the type gets a gentle scrim:
   dark at the very top for the nav, dark again at the foot for the cards. */
.hero-home::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        180deg,
        rgba(2, 0, 0, 0.42) 0%,
        rgba(2, 0, 0, 0.12) 28%,
        rgba(2, 0, 0, 0.08) 55%,
        rgba(2, 0, 0, 0.55) 100%
    );
}

/* The headline block sits at the top of the screen, on the head clearance —
   the reference puts the badge at y 183, not on the centre line. All the free
   height then falls between the button and the trust line below, which is the
   run of open valley the source opens with. */
.hero-home__content {
    margin-block-start: 0;
}

.hero-home__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 6px 12px;
    border-radius: var(--r-lg);
    background: var(--c-ink-warm);
    font-size: var(--t-sm);
}

/* Sized off the text it sits with, so the pair scale together. The width comes
   from the artwork's 0.8306:1 ratio, and the mask takes the badge's colour. */
.hero-home__eyebrow-icon {
    flex: 0 0 auto;
    width: 0.65em;
    height: 0.78em;
    background-color: currentColor;
    -webkit-mask: url("../assets/images/logo-icon.png") no-repeat center / contain;
            mask: url("../assets/images/logo-icon.png") no-repeat center / contain;
}

.hero-home__title {
    margin: var(--s-5) auto 0;
    font-family: var(--font-serif);
    /* 64px at the 1440 design width, held on one line there */
    font-size: clamp(38px, 4.45vw, 64px);
    font-weight: var(--w-regular);
    line-height: var(--lh-tight);
    text-wrap: balance;
}

.hero-home__subtitle {
    margin-top: var(--s-4);
    font-family: var(--font-serif);
    font-size: clamp(20px, 2.2vw, 32px);
    font-weight: var(--w-regular);
    line-height: var(--lh-snug);
}

.hero-home__cta {
    margin-top: var(--s-6);
}

/* Pinned to the foot of the screen by the second auto margin. The 0 bottom
   margin matters: the frame's own padding sets the gap under it, so the line
   lands on the reference's y 710 rather than floating above it. */
.hero-home__trust {
    max-width: 52ch;
    margin: auto auto 0;
    font-size: var(--t-lg);
    line-height: var(--lh-snug);
}

/* Three client cards, below the full-screen block rather than inside it, so
   they begin where the hero's type ends. They still sit on the picture, which
   carries on behind them — the reference's 42px of air above them. */
.hero-home__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gap);
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding-block-start: 42px;
    padding-inline: var(--gutter);
    text-align: left;
}

.client-card {
    display: flex;
    flex-direction: column;
    min-height: 230px;
    padding: var(--s-5);
    border-radius: var(--r-lg);
    background: var(--c-ink-deep);
}

.client-card__logo {
    margin: auto;
    font-size: var(--t-2xl);
}

.client-card__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-4);
}

.client-card__value {
    font-family: var(--font-serif);
    font-size: var(--t-5xl);
    line-height: 1;
}

.client-card__label {
    margin-top: var(--s-2);
    font-size: var(--t-md);
    color: var(--c-text-invert-80);
}

.client-card__arrow {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-lime);
    color: var(--c-ink);
}

/* ── Section 2 — Client logo marquee ───────────────────────────── */

/* A 120px band of client logos that scrolls. The track holds the list twice
   so the loop has no seam; one pass of translate(-50%) returns it to the
   starting frame. The 80px gap and 40px logo height are the source values. */
.logo-strip {
    height: 120px;
    display: grid;
    align-items: center;
    overflow: hidden;
    background: var(--c-bone-mid);
}

.logo-strip__track {
    display: flex;
    align-items: center;
    gap: var(--s-10);
    width: max-content;
    margin: 0;
    padding: 0 0 0 var(--s-10);
    list-style: none;
    animation: logo-scroll 45s linear infinite;
}

.logo-strip__item {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

/* Height is fixed and width follows each logo's own proportions. The mark
   is flattened to one near-black weight by the shared client-mark rule at
   the foot of global.css, with every other place a client logo appears. */
.logo-strip__item img {
    display: block;
    width: auto;
    height: 40px;
}

@keyframes logo-scroll {
    from { transform: translateX(0); }
    /* Half the track is exactly one copy of the list plus one gap: the
       80px leading pad and the 80px seam gap cancel across the halves. */
    to   { transform: translateX(-50%); }
}

/* Honour a reduced-motion preference: the logos still read, they just sit */
@media (prefers-reduced-motion: reduce) {
    .logo-strip__track {
        animation: none;
    }
}

/* ── Shared section head (pill + centred serif title) ───────────────────── */

.section-head {
    text-align: center;
}

.section-head__title {
    max-width: 22ch;
    margin: var(--s-4) auto var(--s-7);
    font-family: var(--font-serif);
    font-size: clamp(28px, 3.6vw, 48px);
    font-weight: 400;
    line-height: 1.12;
}

/* ── Section 3 — What we do ─────────────────────────────────────────────── */

/* Its own ground, which covers the wrapper's gutter spine for the length of
   the section: no vertical rule down the left here, only the two horizontals
   that frame the cards. */
.services {
    background: var(--bg-primary);
}

/* The heading still sits on the design column even though the band behind it
   is page-wide. */
.services > .section-head,
.process > .section-head,
.stories > .section-head,
.pricing > .section-head {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* Three ruled columns. The middle one leads with text and closes with an
   image, so the picture blocks stagger down the row. */
/* Only the rules run the width of the page. The section sits outside
   .page-wrapper, so the band is already page-wide and needs no break-out. */
.services__band {
    border-block: 1px solid var(--border-color);
}

/* The cards themselves stay on the design column, as does their ground. */
.services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: calc(100% - var(--gutter) * 2);
    max-width: calc(var(--container) - var(--gutter) * 2);
    margin-inline: auto;
    background: var(--c-bone-mid);
}

/* No rules between the columns: the only lines in this section are the two
   that frame it above and below. */
.services__col {
    display: flex;
    flex-direction: column;
}

.services__col--mid {
    flex-direction: column-reverse;
    justify-content: flex-end;
}

.service-copy {
    padding: var(--s-6);
}

.service-copy__title {
    font-family: var(--font-serif);
    font-size: var(--t-4xl);
    font-weight: 400;
}

.service-copy__lead {
    margin-top: var(--s-2);
    font-size: var(--t-md);
    color: var(--text-muted);
}

.service-copy__list {
    display: grid;
    gap: var(--s-4);
    margin-top: var(--s-6);
    font-size: var(--t-md);
    color: var(--text-muted);
}

.service-copy__list li::before {
    content: "\2713";
    margin-right: var(--s-3);
    color: var(--text-muted);
}

/* Photo panel with a floating testimonial card. The artwork fills the panel
   edge to edge and the card floats on top of it. */
.service-shot {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 290px;
    /* The card is inset 40px on every side of the panel and fills the rest,
       which is what holds the panel to its 290px height */
    padding: var(--s-7);
}

.service-shot__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.quote-card {
    position: relative;   /* lifts the card off the artwork behind it */
    width: 100%;
    padding: 20px;
    border-radius: var(--r-lg);
    background: var(--bg-elevated);
}

/* The client's own mark, not set type - 20px tall as on the source */
.quote-card__logo {
    display: block;
    width: auto;
    height: 20px;
}

.quote-card__text {
    margin-block: var(--s-5);
    font-size: var(--t-base);
    line-height: 1.1;   /* 17.5px pitch on the source, tighter than body copy */
    color: var(--text-muted);
}

/* ── Section 4 — How it works ───────────────────────────────────────────── */

/* Its own ground, so the wrapper's gutter spine does not run through it. */
.process {
    background: var(--bg-primary);
}

/* Only the rules reach the page edges. */
.process__band {
    border-block: 1px solid var(--border-color);
}

/* Steps 1-2 left, artwork centre, steps 3-4 right. The middle column is the
   wider one on the source: 426 / 506 / 426 across the 1359px column. */
.process__grid {
    display: grid;
    grid-template-columns: 426fr 506fr 426fr;
    width: calc(100% - var(--gutter) * 2);
    max-width: calc(var(--container) - var(--gutter) * 2);
    margin-inline: auto;
    /* Closed on the sides, as on the source: a rule down each edge of the
       card block, on the gutter. */
    border-inline: 1px solid var(--border-color);
}

/* Full height of the grid, both rows. The call window floats centred on the
   meadow, which is why the artwork is a layer of its own rather than a
   background on the cell. */
.process__media {
    position: relative;
    display: grid;
    place-items: center;
    grid-row: span 2;
    min-height: 562px;
}

.process__media-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.process__media-card {
    position: relative;
    width: 330px;
    max-width: 82%;
    height: auto;
}

.step {
    padding: var(--s-5);
}

/* The rule between the two rows sits on the bottom pair. They are the last
   two steps in source order (1, artwork, 3, 2, 4), and nth-of-type counts the
   artwork div too, so this selects from the end. The artwork column carries no
   rule, which is why the line stops at the picture on both sides. */
.step:nth-last-of-type(-n + 2) {
    border-top: 1px solid var(--border-color);
}

/* Step 1 is the only cell with a ground of its own */
.step--tinted {
    background: var(--c-bone-mid);
}

.step__num {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    font-size: var(--t-base);
}

.step__title {
    margin-top: var(--s-3);
    font-family: var(--font-serif);
    font-size: var(--t-4xl);
    font-weight: var(--w-regular);
}

.step__body {
    margin-top: var(--s-5);
    font-size: var(--t-md);
    color: var(--text-muted);
}

/* ── Section 5 — Stories ────────────────────────────────────────────────── */

/* Its own ground, so the wrapper's gutter spine does not run through it. */
.stories {
    background: var(--bg-primary);
}

/* Rules above and below run the width of the page. */
.stories__band {
    border-block: 1px solid var(--border-color);
}

/* Three equal cells on the design column, ruled down every edge: the two
   outer ones on the gutter and one between each pair. */
.stories__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: calc(100% - var(--gutter) * 2);
    max-width: calc(var(--container) - var(--gutter) * 2);
    margin-inline: auto;
    border-inline: 1px solid var(--border-color);
}

.stories__cell + .stories__cell {
    border-left: 1px solid var(--border-color);
}

/* The card is an inset panel, 20px in from its cell on every side. */
.stories__cell {
    display: flex;
    padding: 20px;
}

.story-card {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 374px;
    padding: 20px;
    border-radius: var(--r-lg);
    background: var(--c-bone-mid);
}

/* align-self, because the card is a flex column: without it the logo is
   stretched to the card's width instead of keeping its own proportions. */
.story-card__logo {
    display: block;
    align-self: flex-start;
    width: auto;
    height: 40px;
}

.story-card__quote {
    margin-block: 28px 0;
    font-size: var(--t-xl);
    line-height: 1.2;
}

/* Portrait and name on one line */
.story-card__by {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-top: 28px;
    font-size: var(--t-md);
}

.story-card__avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

/* Pinned to the foot of the card and filling its width */
.story-card__cta {
    margin-top: auto;
    justify-content: center;
    padding-block: 10px;
    border-radius: var(--r-pill);
}

/* ── Section 6 — Pricing ────────────────────────────────────────────────── */

/* Its own ground, so the wrapper's gutter spine does not run through it. */
.pricing {
    background: var(--bg-primary);
}

/* Rules above and below run the width of the page. */
.pricing__band {
    border-block: 1px solid var(--border-color);
}

/* Two equal cells on the design column, ruled down both edges and between. */
.pricing__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: calc(100% - var(--gutter) * 2);
    max-width: calc(var(--container) - var(--gutter) * 2);
    margin-inline: auto;
    border-inline: 1px solid var(--border-color);
}

.pricing__cell + .pricing__cell {
    border-left: 1px solid var(--border-color);
}

/* Panel and call stacked inside the cell, 20px in from its edges. The call is
   a sibling of the panel, not a child: on the source it sits below the panel,
   on the cell ground. */
.pricing__cell {
    display: flex;
    flex-direction: column;
    gap: 21px;
    padding: 20px;
}

.plan {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 400px;
    padding: 20px;
    border-radius: var(--r-lg);
    background: var(--c-bone-mid);
}

.plan__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
}

.plan__name {
    font-family: var(--font-serif);
    font-size: var(--t-3xl);
    font-weight: var(--w-regular);
}

/* A capsule a shade lighter than the panel it sits on */
.plan__hours {
    flex: 0 0 auto;
    padding: 6px 14px;
    border-radius: var(--r-pill);
    background: var(--bg-primary);
    font-size: var(--t-md);
    line-height: 1.2;
    color: var(--text-muted);
}

.plan__price {
    margin-top: var(--s-5);
    font-family: var(--font-serif);
    font-size: var(--t-4xl);
}

/* Pushed to the foot of the panel; rows sit on a 36px pitch */
.plan__features {
    display: grid;
    gap: 14px;
    margin: auto 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--t-md);
    line-height: 1.2;
    color: var(--text-muted);
}

.plan__features li::before {
    content: "\2713";
    margin-right: var(--s-3);
}

.plan__cta {
    justify-content: center;
    padding-block: 10px;
    border-radius: var(--r-pill);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .services__grid {
        grid-template-columns: 1fr;
    }

    /* Stacked, so the columns need a rule between them again */
    .services__col + .services__col {
        border-top: 1px solid var(--border-color);
    }

    .services__col--mid {
        flex-direction: column;
    }

    .process__grid {
        grid-template-columns: 1fr 1fr;
    }

    /* The artwork cannot span a two-up grid without stranding a step */
    .process__media {
        grid-row: auto;
        grid-column: span 2;
        min-height: 320px;
    }

    .stories__grid,
    .hero-home__stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    /* Less picture under the cards on a narrow screen */
    .hero-home {
        padding-bottom: var(--s-6);
    }

    /* The head clearance belongs to the full-screen frame now. It stays large
       here rather than shrinking: the bar wraps to two rows below 640px and
       its foot lands at 115px, so the badge needs to start clear of that.
       The trust line keeps the auto margin from the base rule, so it still
       lands at the foot of the screen — a fixed margin-top here would strand
       it under the button again. */
    .hero-home__viewport {
        padding-block: 150px var(--s-6);
    }

    .hero-home__stats,
    .stories__grid,
    .pricing__grid,
    .process__grid {
        grid-template-columns: 1fr;
    }

    .process__media {
        grid-column: auto;
    }

    .step {
        border-left: 0;
        border-top: 1px solid var(--border-color);
    }
}