/* =========================================
   Amaryllis — ABOUT US PAGE
   -----------------------------------------
   Loaded only on the About template. style.css stays the base:
   tokens, reset, header/footer and the whole .reveal / .stagger
   motion system come from there and are not repeated here.

   Measurements now come from the Figma inspect panel rather than
   from screenshots. Everything on this page hangs off three numbers:

     content column   1280   (the Vision card sits at X 80 on a
                              1440 frame, so 1440 - 80 - 80)
     gap              16     (two 632 cards inside 1280; three 416
                              tiles inside 1280 — same figure both times)
     commitment band  1440 x 400
========================================= */

.about-page {
    /* --- Page inset -------------------------------------------
     * Figma puts the content at X 80 on a 1440 frame: 1280 wide,
     * 80 either side. Held as a hard 1280 cap that left ~320px of
     * white down each side of a 1920 display, which is what made the
     * margins look heavy.
     *
     * Carried as the RATIO instead — 80/1440 is 5.55% — so the
     * content is exactly 1280 at the design width and keeps the same
     * proportion of the page above it. The cap is the theme-wide
     * --container, so it still cannot run away on an ultrawide.
     * ----------------------------------------------------------- */
    --page-inset: clamp(18px, 5.55vw, 104px);
    --content-max: var(--container);
    --col-gap: 16px;

    /* Inset for the banner copy. Sits between the header's 5% gutter
       and the tighter --section-gutter used by the card grids. */
    --about-inset: clamp(20px, 3.9vw, 56px);

    --about-ink: #111111;
    --about-body: var(--c-ink);
    --about-muted: #4a4a4a;

    --tile-radius: 14px;

    /* How far the Why Choose artwork is drawn past its box so the
       card's overflow clips a baked-in white edge off. See the note
       on .why-media img for why this is needed at all. Raise it if
       any tile still shows a border; per-tile overrides are listed
       under that rule. */
    --trim: 1.04;
}

/* =========================================
   1. BANNER
   Building photograph, copy left and vertically centred.
========================================= */
.about-hero {
    position: relative;
    width: 100%;
    /* Figma draws this one 1440 x 620, but every banner on the site is
       now the same height: the window, less the sticky header. */
    height: var(--hero-h);
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: #eef2f5;
}

.about-hero-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* The building sits against a bright sky that runs almost white at
   the left, so the headline needs only the faintest lift to hold
   its contrast — not a visible scrim. */
.about-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.22) 30%,
        rgba(255, 255, 255, 0) 52%
    );
    pointer-events: none;
}

/* NOTE: Figma's "Ellipse 4" here is a HIDDEN layer (visible: false),
   so there is no curved white base under this banner. Do not build
   it — same for Ellipse 5 over the intro. */

/* Figma puts the hero copy at x=54, not at the 80px page inset the
   rest of the page uses — 54/1440 = 3.75%. */
.about-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 clamp(16px, 3.75vw, 54px);
}

/* Figma: the copy group is 542 wide at x=54. */
.about-hero-copy {
    max-width: 542px;
}

/* --- Banner type ------------------------------------------------
 * Sized against the Figma frame rather than by eye. Measuring the
 * two at matched scale, the headline's cap height sits at about 4.2x
 * the paragraph's; it was running at 3.3x, which is why the heading
 * read small and the paragraph read heavy next to it.
 *
 * On the 1440 frame that resolves to roughly 61px and 14.5px, hence
 * the 4.24vw / 1.01vw figures — both fluid, so the relationship
 * holds at every width instead of only at the cap.
 * ------------------------------------------------------------- */
/* Figma: Source Sans Pro w700 64 / lh 74 / #1f1f1f — the same hero
   size as Career. Was estimated at 61. */
.about-hero-copy h1 {
    font-family: var(--font-display);
    font-size: clamp(30px, 4.44vw, 62px);
    font-weight: 700;
    line-height: 1.16;
    color: var(--about-ink);
    margin-bottom: 15px;
}

/* Figma: Open Sans w600 16 / lh 24 / #1f1f1f across the full 542. */
.about-hero-copy p {
    font-family: var(--font-body);
    font-size: clamp(12px, 1.11vw, 14px);
    font-weight: 400;
    line-height: 1.5;
    color: var(--c-ink);
    max-width: 542px;
}

/* Same load-in as the other page banners. amaryllis-rise lives in
   style.css, so this only schedules it. */
.has-js .about-hero-copy > * {
    opacity: 0;
    animation: amaryllis-rise 0.9s var(--ease) forwards;
}

.has-js .about-hero-copy > *:nth-child(1) { animation-delay: 0.15s; }
.has-js .about-hero-copy > *:nth-child(2) { animation-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
    .has-js .about-hero-copy > * {
        opacity: 1;
        animation: none;
    }
}

/* =========================================
   2. INTRO PROSE
========================================= */
/* --- Vertical rhythm --------------------------------------------
 * Figma runs a uniform 48px between every block on this page: the
 * banner ends at 720 and the intro starts at 768; the intro ends at
 * 1767 and Vision/Mission starts at 1815; that block ends at 2211
 * and the section header starts at 2259; the header ends at 2299 and
 * the grid starts at 2347. Each section therefore carries 48 above
 * and nothing below — the next section's top padding is the gap.
 * ------------------------------------------------------------- */
.about-intro {
    padding: clamp(28px, 3.33vw, 48px) var(--page-inset) 0;
    background: var(--c-page);
}

.about-prose {
    /* Stays on --content-max (the theme-wide --container, 1852) along
       with the rest of the page. A 1280px cap matching Figma's block
       was tried and reverted on request. */
    max-width: var(--content-max);
    margin: 0 auto;
}

/* Figma: the whole intro is one 1280-wide block of Open Sans 24 / lh 40
   / #1f1f1f. This was running at 16px. Figma draws it w600; the weight
   was dropped to 400 with the rest of the Open Sans type on request. */
/* Ceiling 24 -> 22 on desktop. Only the ceiling moves — the 16px floor
   and the 1.67vw slope are unchanged, so phone and tablet are exactly
   as before. */
.about-prose p {
    font-family: var(--font-body);
    /* Figma sets this block at 24; the sitewide 2px reduction took the
       ceiling to 22, then 20, and now 18.

       ONLY the ceiling moves. The 1.67vw slope stays as it is on
       purpose: recalibrating it to 18/1440 would drag the mid-range
       down too — 1280 would fall to the 16px floor rather than to the
       18 that was asked for, and 1024 would drop from 17.1 to 16.
       Left alone, every width that used to render 20 now renders 18
       and everything below 1080 is untouched.

       The column WIDTH is deliberately not capped — see .about-prose
       above. The side margins stay exactly as they are. */
    font-size: clamp(16px, 1.67vw, 18px);
    font-weight: 400;
    line-height: 1.67;
    color: var(--about-body);
    /* Exactly one blank line, which is how the gap is built in Figma:
       the intro is a SINGLE text block there, and the three groups are
       separated by an empty line rather than by paragraph spacing. So
       the baseline-to-baseline step across a group boundary is two
       line-heights, and a margin of one line-height is what reproduces
       it. 17px was roughly half that, which is why the groups read as
       too tightly packed against the design.

       In em, so it tracks the clamped font-size: 1.67em is the same
       multiplier as line-height above, at every width. */
    margin-bottom: 1.67em;
}

.about-prose p:last-child {
    margin-bottom: 0;
}

.about-prose strong {
    font-weight: 700;
    color: var(--about-ink);
}

/* =========================================
   3. VISION / MISSION
   Figma: two 632 x 396 cards, 16px apart, inside the 1280 column.
   Nothing but a shadow separates them from the page, so the shadow
   has to be soft and wide rather than tight, or they read as
   outlined boxes.
========================================= */
.about-vm {
    padding: clamp(28px, 3.33vw, 48px) var(--page-inset) 0;
    background: var(--c-page);
    overflow-x: clip;
}

.vm-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--col-gap);
    max-width: var(--content-max);
    margin: 0 auto;
}

.vm-card {
    /* --- No min-height any more ---------------------------------
     * Figma draws this card as a fixed 632 x 396 with the copy
     * optically centred, and that was reproduced as a min-height with
     * justify-content: center. It stopped being right once the body
     * copy came down from 24px: the text no longer fills 396, so the
     * leftover space was split above and below and read as a huge
     * top/bottom pad. Measured before removing it:
     *
     *     1280  content 228  card 352  ->  60 / 64 of air
     *     1440  content 231  card 396  ->  81 / 85
     *     1920  content 164  card 396  ->  114 / 118
     *
     * The card now takes its height from its content, so the only
     * vertical space is the padding below — 34 top, 38 bottom, in
     * proportion with the 40px sides. The two cards still match each
     * other because grid items stretch to the tallest in the row.
     * ---------------------------------------------------------- */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 34px 40px 38px;
    background: var(--c-page);
    /* Figma: radius 28, with DROP_SHADOW y10 blur10 #000000 at 20%.
       Note this is NOT the y14/blur25 shadow used on Career and
       Contact — the About cards carry a tighter one. */
    border-radius: 28px;
    box-shadow: var(--card-shadow);
    text-align: center;
    transition: box-shadow 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

.vm-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow-hover);
}

/* Figma: Source Sans Pro w700 40 / lh 24. Was capped at 28. */
.vm-card h2 {
    font-family: var(--font-display);
    font-size: clamp(20px, 2.78vw, 38px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--about-ink);
    margin-bottom: 18px;
}

/* Figma: Open Sans w600 24 / lh 40 / #1f1f1f. */
/* Body copy only — 24 -> 22 on desktop. The "Vision" / "Mission"
   headings (.vm-card h2, 40px) are deliberately NOT touched. */
.vm-card p {
    font-family: var(--font-body);
    font-size: clamp(15px, 1.67vw, 20px);
    font-weight: 400;
    line-height: 1.67;
    color: var(--about-body);
}

/* Left card in from the left, right card from the right. Overrides
   style.css's home-page stagger, which would send the second one in
   from the left too. */
.has-js .vm-grid.stagger > *:nth-child(1) { --reveal-delay: 0ms;  --reveal-x: -24px; }
.has-js .vm-grid.stagger > *:nth-child(2) { --reveal-delay: 90ms; --reveal-x: 24px; }

/* =========================================
   4. WHY CHOOSE
   -----------------------------------------
   Six cards, three across, two rows. Each is a 416 x 277 photograph
   with the heading and copy BELOW it in dark text — not an overlay,
   so no scrim and no white type here.
========================================= */
/* 48 above the section header, and 48 below the grid before Our
   Commitment begins at 3387. */
.about-why {
    padding: clamp(28px, 3.33vw, 48px) var(--page-inset);
    background: var(--c-page);
    overflow-x: clip;
}

/* Figma: Source Sans Pro w700 40 / lh 24, 48px above the grid. */
.about-section-title {
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(22px, 2.78vw, 38px);
    font-weight: 700;
    color: var(--about-ink);
    line-height: 1.2;
    margin-bottom: clamp(28px, 3.33vw, 48px);
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Figma: cards at x = 80 / 528 / 976 and rows at y = 2347 / 2859
       give a uniform 32px gap both ways, in a 1312 grid — wider than
       the 1280 the rest of the page uses. */
    gap: 32px;
    max-width: 1312px;
    margin: 0 auto;
}

.why-card {
    /* Figma inspect: the card is 416 x 480 — a 277-tall photograph
       with the copy beneath it, both inside ONE rounded box.
       ------------------------------------------------------------
       The photo previously carried its own radius and a 12px margin,
       so its rounded BOTTOM corners sat against the white page and
       read as a notch or seam under the image. Rounding the card and
       clipping the photo to it means the photo meets the copy with
       no join at all. */
    display: flex;
    flex-direction: column;
    background: var(--c-page);
    /* Figma: radius 24, fill #fdfdfd, DROP_SHADOW y10 blur10 #000000
       at 20%. Was radius var(--tile-radius) with a 7% shadow. */
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

.why-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--card-shadow-hover);
}

.why-media {
    /* Figma inspect: 416 x 277. Flush to the card's top and sides —
       no radius of its own, the card's overflow does the clipping. */
    aspect-ratio: 416 / 277;
    overflow: hidden;
    background: #eef1f2;
}

.why-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* --- Anchoring, and trimming a baked-in edge -----------------
     * Two separate problems, two separate fixes.
     *
     * 1. object-position: center TOP, not centre. If an export
     *    includes more than the photograph — the whole 416x480 card,
     *    say, with its white copy area underneath — a centred crop
     *    shows the middle of that file, which means losing the top of
     *    the photo AND keeping a white strip at the bottom. Anchoring
     *    to the top shows the picture from its first row down and
     *    pushes anything extra out of the bottom of the box, losing
     *    nothing that matters.
     *
     * 2. The scale then clips a hairline off the sides. transform-
     *    origin is top as well, so the whole of the vertical crop is
     *    taken from the BOTTOM edge, where the white actually is,
     *    rather than being split evenly top and bottom.
     *
     * Re-exporting the Image layer at 416x277 is the real fix; set
     * --trim to 1 once that is done.
     * ----------------------------------------------------------- */
    object-position: center top;
    transform: scale(var(--trim, 1.04));
    transform-origin: center top;
    transition: transform 0.8s var(--ease-out);
}

.why-card:hover .why-media img {
    /* Multiplies the trim rather than replacing it — a bare
       scale(1.04) here would undo it and flash the edge back in. */
    transform: scale(calc(var(--trim, 1.04) * 1.04));
}

/* Per-tile override, for any export carrying more white than the
   rest. Match on the filename and raise the number until the edge
   is gone:

   .why-card:has(img[src*="why-innovation"]) { --trim: 1.10; }
   .why-card:has(img[src*="why-solutions"])  { --trim: 1.08; }
*/

/* 480 total less the 277 photo leaves 203 for the copy block.
   Figma insets it a uniform 24: the card is 416 wide, the Content
   frame is 416, and the title inside runs 368 at x+24. */
.why-body {
    padding: 24px;
}

/* Figma: Source Sans Pro w700 20 / lh 24 / #1f1f1f, with the copy
   block gapped 12px below it. */
.why-card h3 {
    font-family: var(--font-display);
    font-size: clamp(15px, 1.39vw, 18px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--about-ink);
    margin-bottom: 12px;
}

/* Figma: Open Sans w600 16 / lh 24 / #5f5f5f — a lighter grey than
   the page ink, and the ONLY place on this page that uses it. */
.why-card p {
    font-family: var(--font-body);
    font-size: clamp(12px, 1.11vw, 14px);
    font-weight: 400;
    line-height: 1.5;
    color: #5f5f5f;
}

/* Cards arrive left to right across each row, each from its own
   side of the grid. */
.has-js .why-grid.stagger > *:nth-child(3n + 1) { --reveal-delay: 0ms;   --reveal-x: -24px; }
.has-js .why-grid.stagger > *:nth-child(3n + 2) { --reveal-delay: 80ms;  --reveal-x: 0px; }
.has-js .why-grid.stagger > *:nth-child(3n + 3) { --reveal-delay: 160ms; --reveal-x: 24px; }

/* =========================================
   5. OUR COMMITMENT
   Redesigned to the client's September Figma frame: a shorter band,
   1440 x 400, with the copy in TWO columns over the photograph -
     left  at x=269, 440 wide: heading, green lead, the two buttons
     right at x=787, 410 wide: the paragraph and the green closer.
   The columns are shares of the band, so they hold the design's
   proportions at any desktop width.
========================================= */
.about-commitment {
    position: relative;
    display: flex;
    align-items: center;
    /* width:100% is required, not decorative. With the width left to
       `auto`, the min-height below is resolved back through the ratio
       into a WIDTH, and the band rendered wider than the window and put
       a horizontal scrollbar on the whole page. Declaring the width makes
       it definite, so min-height can only raise the height. Same fix as
       .map-frame in contact.css. */
    width: 100%;
    aspect-ratio: 1440 / 400;
    min-height: 360px;
    /* No side padding: the column shares below are measured against the
       full band, as in the frame. */
    padding: clamp(28px, 3.9vw, 56px) 0;
    overflow: hidden;
    background-color: #eef0ec;
}

.commitment-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The band is shallower than the photograph (1440 x 580), so a strip
       is cropped; weighted low, as in the frame, so the pot and the
       sculpture keep their bases. */
    object-position: center 60%;
}

/* The redesign shows the photograph close to full strength - the copy
   sits on the plain wall between the planting and the window - so the
   wash is only a light veil now (it was 58% white). */
.about-commitment::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(255, 255, 255, 0.18);
    pointer-events: none;
}

/* 269 | 440 | 78 | 410 | rest, as shares of 1440. The paragraph block
   spans both rows, so the left pair (heading + buttons) and the right
   block are centred against each other. */
.commitment-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    display: grid;
    grid-template-columns: 18.68% 30.56% 5.42% 28.47% 1fr;
    grid-template-areas:
        ". head    . body ."
        ". actions . body .";
    align-items: center;
    text-align: left;
}

.commitment-head    { grid-area: head; align-self: end; }
.commitment-body    { grid-area: body; }
.commitment-actions { grid-area: actions; align-self: start; }

/* "OUR COMMITMENT" - Source Sans Pro w700, upper case, ink, about 24px.
   Upper case by CSS, so the source text stays readable as written. */
.commitment-inner h2 {
    font-family: var(--font-display);
    font-size: clamp(18px, 1.67vw, 26px);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--about-ink);
    margin-bottom: 14px;
}

/* The green headline of the block: the heading's face and size, upper
   case, brand green. Qualified with .commitment-inner so it beats the
   `.commitment-inner p` rule below on specificity. */
.commitment-inner p.commitment-lead {
    font-family: var(--font-display);
    font-size: clamp(18px, 1.67vw, 26px);
    font-weight: 700;
    line-height: 1.33;
    text-transform: uppercase;
    color: var(--c-brand);
    /* Breaks after "CLEAN," as in the frame, at any width. */
    max-width: 16.5em;
    margin-bottom: 0;
}

/* Open Sans w400, about 15px on 21, in the 410 column. */
.commitment-inner p {
    font-family: var(--font-body);
    font-size: clamp(13px, 1.18vw, 17px);
    font-weight: 400;
    line-height: 1.45;
    color: var(--about-body);
    margin-bottom: 12px;
}

/* "Every great space begins with great air." - Source Sans Pro w700,
   brand green, about 22px. Qualified for the same reason as the lead. */
.commitment-inner p.commitment-closer {
    font-family: var(--font-display);
    font-size: clamp(16px, 1.53vw, 23px);
    font-weight: 700;
    line-height: 1.15;
    color: var(--c-brand);
    /* Breaks after "with", as in the frame. */
    max-width: 15em;
    margin-bottom: 0;
}

.commitment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(12px, 1.6vw, 24px);
    /* Lead to buttons: 52 on the 1440 band. */
    margin-top: clamp(22px, 3.6vw, 52px);
}

/* Not .btn-outline from style.css - that one carries a 460px
   min-width for the home-page hero and would blow this row apart. */
.btn-about {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Two 202 x 40 buttons in the redesign, 1px ink outline. */
    min-width: clamp(132px, 14.03vw, 210px);
    min-height: 40px;
    padding: 8px 18px;
    border: 1px solid var(--about-ink);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.35);
    color: var(--about-ink);
    font-family: var(--font-display);
    font-size: clamp(13px, 1.04vw, 16px);
    font-weight: 600;
    transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out);
}

/* Figma component set "Banner Buttons" draws both of these twice:
       Property 1=Contact Us          → no fill, 1px #1f1f1f, label #1f1f1f
       Property 1=Contact Us_Hover    → fill #81af4a, NO stroke, label #fdfdfd
   and the same pair for Download catalogue. The hover was filling with
   the ink colour instead of the brand green, so the design's one
   moment of colour never appeared. --c-brand IS #81af4a. */
.btn-about:hover,
.btn-about:focus-visible {
    background: var(--c-brand);
    border-color: var(--c-brand);
    color: var(--c-page);
}

/* =========================================
   6. RESPONSIVE
   Figma supplied a desktop frame only.
========================================= */
@media (max-width: 992px) {
    .about-hero-copy { max-width: 420px; }

    /* Three across leaves each card under 240px, at which point the
       heading breaks onto three lines. Two across, and the last pair
       simply sits on a third row. */
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 26px var(--col-gap);
    }

    .has-js .why-grid.stagger > *:nth-child(3n + 1),
    .has-js .why-grid.stagger > *:nth-child(3n + 2),
    .has-js .why-grid.stagger > *:nth-child(3n + 3) {
        --reveal-delay: 0ms;
        --reveal-x: 0px;
    }

    .has-js .why-grid.stagger > *:nth-child(2n + 1) { --reveal-x: -20px; }
    .has-js .why-grid.stagger > *:nth-child(2n + 2) { --reveal-delay: 90ms; --reveal-x: 20px; }

    /* Two columns stop fitting here. The copy stacks - heading and lead,
       then the paragraph and closer, then the buttons - left-aligned in
       one readable column, and the band takes its height from the copy. */
    .about-commitment {
        aspect-ratio: auto;
        min-height: 0;
        padding: 52px var(--section-gutter);
    }

    .commitment-inner {
        max-width: 620px;
        margin: 0 auto;
        grid-template-columns: 1fr;
        grid-template-areas:
            "head"
            "body"
            "actions";
    }

    .commitment-head { margin-bottom: 18px; }

    .commitment-inner h2,
    .commitment-inner p.commitment-lead { font-size: 22px; }

    .commitment-inner p { font-size: 15px; line-height: 1.6; }

    .commitment-inner p.commitment-closer { font-size: 20px; }

    .commitment-actions { margin-top: 26px; }

    /* Equal buttons once they sit side by side under the copy. */
    .btn-about { min-width: 180px; }

    /* --- Keeping the photograph readable on a phone --------------
     * Once the copy stacks, this band is far TALLER than it is wide,
     * and object-fit: cover crops a wide photograph down to a narrow
     * central slice. The centre of this particular shot is the blank
     * wall between the planting and the window, so the crop lands on
     * the one featureless part of the image and the section looks
     * empty — the picture is loading, there is just nothing in the
     * visible slice.
     *
     * Pulling the crop left keeps the planting in frame, and the
     * wash comes down because a lighter image needs less of it.
     * ----------------------------------------------------------- */
    .commitment-img {
        object-position: 30% center;
    }

    /* Stacked, the copy runs across the planting and the window rather
       than the plain wall, so the veil comes back up for contrast. */
    .about-commitment::after {
        background: rgba(255, 255, 255, 0.62);
    }
}

@media (max-width: 768px) {
    .vm-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .has-js .vm-grid.stagger > *:nth-child(1),
    .has-js .vm-grid.stagger > *:nth-child(2) { --reveal-x: 0px; }

    /* min-height: 0 used to be here to undo the base rule's floor.
       That floor is gone, so only the tighter padding remains. */
    .vm-card {
        padding: 30px 26px 32px;
    }
}

@media (max-width: 576px) {
    /* --- Phone: the photograph becomes a band, not a backdrop -------
     * Client request - "some part of the image should be visible".
     * It was not visible at all, and the reason is measurable: the
     * photograph is 2880 x 1234, and at 375px wide the band showed a
     * ~370px slice of it. object-position put that slice at 26%,
     * which by the numbers is the flattest, brightest part of the
     * frame (mean luminance 204-229, detail 15-24) - bare wall. Under
     * a 62% white wash it read as a plain panel.
     *
     * The detail is at the two ENDS (the planting at 0-10%, detail 62;
     * the window at 80-100%, detail 48-62), and no single crop of a
     * 370px window catches both. So on a phone the picture stops being
     * a backdrop and becomes a band across the top at its OWN ratio -
     * the whole photograph, nothing cropped - with the copy underneath
     * on the section's own colour, where it is easiest to read.
     * ------------------------------------------------------------- */
    .about-commitment {
        display: block;
        aspect-ratio: auto;
        min-height: 0;
        padding: 0 0 32px;
    }

    .commitment-img {
        position: static;
        width: 100%;
        height: auto;
        /* The file's own ratio, so cover crops nothing. */
        aspect-ratio: 2880 / 1234;
        object-fit: cover;
        object-position: center;
    }

    /* Nothing sits on the photograph now, so the veil that kept the
       copy legible over it has nothing to do. */
    .about-commitment::after {
        content: none;
    }

    .commitment-inner {
        padding: 26px var(--section-gutter) 0;
    }

    /* --- Phone: the banner carries its HEADLINE only ---------------
     * Client request, and the same rule on every page that has a
     * banner. At 375px the frame is too shallow for a headline and a
     * standfirst both; the headline alone sits comfortably on the
     * photograph, which is where the client wants it. Everything here
     * is back from 577px up.
     * ----------------------------------------------------------- */
    .about-hero-copy p {
        display: none;
    }

    .about-hero-copy,
    .about-hero-copy p {
        max-width: none;
    }

    /* The <br> breaks in the banner headline are desktop-only */
    .about-hero-copy h1 br { display: none; }

    .about-intro { padding: 28px var(--page-inset) 18px; }
    .about-vm    { padding: 18px var(--page-inset) 26px; }
    .about-why   { padding: 12px var(--page-inset) 30px; }

    .about-section-title { margin-bottom: 16px; }

    .why-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .about-commitment { padding: 36px var(--section-gutter); }

    /* Narrower again, so crop further from the centre. */
    .commitment-img {
        object-position: 26% center;
    }

    .commitment-inner h2,
    .commitment-inner p.commitment-lead { font-size: 20px; }

    .commitment-inner p { line-height: 1.7; }

    .commitment-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .btn-about {
        width: 100%;
        min-width: 0;
        min-height: 46px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vm-card,
    .why-media img,
    .btn-about {
        transition: none;
    }

    .vm-card:hover { transform: none; }
    /* Not `none` — that would undo the trim and show the white edge */
    .why-card:hover .why-media img { transform: scale(var(--trim, 1.04)); }
}