/* ==========================================================================
   Project (case study) · pinned scroll sections
   --------------------------------------------------------------------------
   Set --brand per project (theme.json "Project brand" or an inline style on
   <body>) to recolor dark sections, rail and buttons.
   ========================================================================== */
:root {
  --pad: max(var(--side), calc((100vw - var(--max-w)) / 2 + var(--side)));  /* 1440 max content width */
  --vh: 100svh;
}
html {
  /* Snapping switches on once project.js has added the snap points (.is-snapping),
     otherwise the browser snaps to the only snap target it can find at load. */
  overscroll-behavior-y: none;
  scrollbar-width: none;
  background: var(--brand);
}
html.is-snapping { scroll-snap-type: y mandatory; }
html::-webkit-scrollbar { display: none; }
body.page-project {                                     /* class beats WordPress's global body colours */
  font-weight: var(--fw-light);
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}

/* Section text colour: everything inside a section follows the colour set on it in the editor.
   Secondary text, dividers and card borders are tints of currentColor (62% / 35% / 20%),
   so they match whatever Text colour you pick. The first value in each pair is a fallback. */
.sec .site-foot { color: inherit; }
.sec .site-foot .copy { color: var(--muted); color: color-mix(in srgb, currentColor 62%, transparent); }
.sec .site-foot .socials a { color: rgba(255,255,255,.7); color: color-mix(in srgb, currentColor 70%, transparent); }

/* ---------- Section rail (right edge; base style in site.css) ---------- */
.rail { position: fixed; z-index: 20; }                /* .dot-nav component, fixed to the viewport */
.rail-light .rail { --dot: rgba(29,27,26,.18); }

/* ---------- Sections: each is N viewports tall, content pinned ---------- */
.sec { position: relative; height: calc(var(--vh) * var(--steps, 1)); }
.sec.dark { background: var(--brand); color: var(--fg); }
.snap { position: absolute; left: 0; width: 1px; height: var(--vh); scroll-snap-align: start; scroll-snap-stop: always; pointer-events: none; }
.pin {
  position: sticky; top: 0;
  height: var(--vh);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 64px;
  padding: 0 var(--pad);
}
.left, .right { position: relative; z-index: 3; }
.right { justify-self: end; width: 100%; max-width: 344px; }
.media { position: relative; display: grid; place-items: center; }

/* Type: .sec h1 = t-display, .sec h2 = t-h2, .body = t-meta (18px; see site.css) */
.sec h1 { max-width: 9.5em; }
.sec h2 { max-width: 11em; }
.body { color: var(--ink-muted); color: color-mix(in srgb, currentColor 62%, transparent); }
.body + .body { margin-top: 24px; }                    /* space between paragraphs (one line at 18px) */

/* Step counter under right-hand copy */
.count {
  margin-top: 32px; display: flex; align-items: center; gap: 16px;
  font-variant-numeric: tabular-nums;
}
.count > span:not(.bar) { position: relative; top: var(--cap-shift); color: var(--ink-muted); color: color-mix(in srgb, currentColor 62%, transparent); }
.count .bar { position: relative; flex: 0 0 72px; height: 1px; background: rgba(29,27,26,.15); background: color-mix(in srgb, currentColor 15%, transparent); overflow: hidden; }
.count .bar i { position: absolute; inset: 0; background: var(--brand); transform-origin: left; transform: scaleX(0); }

/* ---------- Swapping copy (changes with each image) ---------- */
.swaps { display: grid; }
.swap {
  grid-area: 1 / 1; align-self: center;
  transition: opacity .55s var(--ease), transform .75s var(--ease), filter .55s var(--ease);
}
.swap:not(.on) { opacity: 0; filter: blur(8px); pointer-events: none; transform: translateY(var(--dir, 24px)); }
.swap.on { transition-delay: .12s; }
.right .swaps .swap { align-self: start; }

/* ---------- Reveal (per section, both scroll directions) ---------- */
.reveal {
  opacity: 0; transform: translateY(24px); filter: blur(8px);
  transition: opacity .8s var(--ease), transform 1s var(--ease), filter .8s var(--ease);
  transition-delay: calc(var(--r, 0) * 110ms);
}
.in .reveal { opacity: 1; transform: none; filter: none; transition-delay: calc(.15s + var(--r, 0) * 110ms); }

/* ---------- Image surface (placeholder colour shows while the image loads) ---------- */
.ph {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  background: var(--c, #111);
}
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ph .tag {
  position: absolute; left: 16px; bottom: 16px;
  color: rgba(255,255,255,.4);
}
.ph.light .tag { color: rgba(29,27,26,.35); }
.ph::after {             /* depth shade driven by JS (--shade) */
  content: ""; position: absolute; inset: 0; background: #000;
  opacity: var(--shade, 0); pointer-events: none;
}

/* ---------- 1. Hero ---------- */
.hero .pin { align-items: center; }
.hero .media { align-self: end; height: 100%; }
.phone {
  --c: var(--fg);
  --pw: min(28vw, 400px);
  width: var(--pw);
  height: min(78%, calc(var(--pw) / .578));   /* never taller than the 540x935 screen image */
  align-self: end;
  border-radius: 48px 48px 0 0;
  box-shadow: 0 0 0 2px rgba(255,255,255,.18), var(--shadow-hero);   /* thin rim + soft upward shadow */
  transform: translateY(40%); opacity: 0;
  transition: transform 1.3s var(--ease) .25s, opacity .9s var(--ease) .25s;
}
.in .phone { transform: none; opacity: 1; }
.phone img { object-position: 50% 0; }
.hero .meta { list-style: none; display: grid; gap: 16px; color: var(--muted); color: color-mix(in srgb, currentColor 62%, transparent); }   /* type: t-meta */
.hero .meta li { display: grid; grid-template-columns: auto 1fr; gap: 8px; }   /* bullet + text; wrapped lines hang */
.hero .meta li::before { content: "•"; content: "•" / ""; }                         /* "/ ''" = not read aloud */
.hero .btn-solid { margin-top: 32px; }                 /* "View more" (hidden for now) */

/* ---------- 1b. Hero, desktop-screen version (.hero-wide) ----------
   Same content as the phone hero, stacked and centred: title, meta, then a
   960px 5:4 desktop screenshot rising in from the bottom edge (the mobile layout, on desktop). */
.hero-wide .pin {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 24px; padding-top: 136px; padding-bottom: 0; text-align: center;
}
.hero-wide .left, .hero-wide .right { width: 100%; max-width: none; justify-self: auto; }
.hero-wide .right { order: 1; }
.hero-wide .media { order: 2; flex: 1; min-height: 0; width: 100%; height: auto; align-self: stretch; place-items: start center; margin-top: 16px; }
.hero-wide h1 { max-width: 16em; margin: 0 auto; }
.hero-wide .meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; }
.screen {
  --c: var(--fg);
  width: min(960px, 100%); aspect-ratio: 5 / 4;            /* 1920 x 1536 image at 2x */
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  box-shadow: 0 0 0 2px rgba(255,255,255,.18), var(--shadow-hero);   /* thin rim + soft upward shadow */
  transform: translateY(40%); opacity: 0;
  transition: transform 1.3s var(--ease) .25s, opacity .9s var(--ease) .25s;
}
.in .screen { transform: none; opacity: 1; }
.sec .screen img { object-position: 50% 0; }

/* ---------- 2. Rotating deck ---------- */
.deck { position: relative; width: var(--sq); height: var(--sq); --sq: min(24vw, 46svh, 384px); }
.deck > .ph, .cascade > .ph, .solo > .ph {
  position: absolute; inset: 0;
  will-change: transform, opacity;
  box-shadow: var(--shadow-image);
}

/* ---------- 3. Single portrait ---------- */
.solo { position: relative; --h: min(62svh, 34vw, 624px); height: var(--h); width: calc(var(--h) * .75); }
.solo > .ph {
  clip-path: inset(18% 18% 18% 18% round var(--radius));
  transform: scale(1.12);
  transition: clip-path 1.2s var(--ease) .1s, transform 1.4s var(--ease) .1s;
}
.in .solo > .ph { clip-path: inset(0 0 0 0 round var(--radius)); transform: none; }
/* The reveal's clip-path also clips the image's own shadow, so the shadow lives on a layer
   behind it that grows with the image (18% inset × 1.12 scale ≈ 72% → 100%). */
.solo::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius);
  box-shadow: var(--shadow-image);
  opacity: 0; transform: scale(.72);
  transition: transform 1.2s var(--ease) .1s, opacity 1.2s var(--ease) .1s;
}
.in .solo::before { opacity: 1; transform: none; }

/* ---------- 4. Cascade (same size as .solo) ---------- */
.cascade { position: relative; --h: min(62svh, 34vw, 624px); height: var(--h); width: calc(var(--h) * .75); margin-top: 48px; }

/* ---------- 5. Final designs: carousel ---------- */
.finals .pin {
  display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 40px;
  padding-top: 104px; padding-bottom: 56px;
}
.finals h1, .finals h2 { max-width: none; }
.carousel { position: relative; width: 100%; outline: none; }
.carousel .viewport {
  position: relative; overflow: hidden; border-radius: var(--radius);
  height: auto; aspect-ratio: 16 / 9;          /* matches the 16:9 final-design images */
  touch-action: pan-y; cursor: grab; user-select: none;
}
.carousel .viewport.dragging { cursor: grabbing; }
.track { display: flex; height: 100%; will-change: transform; transition: transform .9s var(--ease); }
.dragging .track { transition: none; }
.slide { flex: 0 0 100%; height: 100%; position: relative; overflow: hidden; cursor: zoom-in; }
.slide .ph {
  position: absolute; inset: 0; border-radius: 0;
  transform: scale(1.08); transition: transform 1.2s var(--ease);
}
.slide.on .ph { transform: none; }
.slide .ph .tag { left: 24px; bottom: 24px; }
.finals-wrap { align-self: center; width: min(100%, calc((100svh - 248px) * 16 / 9)); display: flex; flex-direction: column; gap: 32px; }
.finals-head { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.ctrls { display: flex; align-items: center; gap: 32px; }
.fcount { margin-top: 0; }
.fcount > span:not(.bar) { color: var(--muted); color: color-mix(in srgb, currentColor 62%, transparent); }
.fcount .bar { background: rgba(255,255,255,.2); background: color-mix(in srgb, currentColor 20%, transparent); }
.fcount .bar i { background: currentColor; transition: transform .6s var(--ease); }
.arrows { display: flex; gap: 8px; }

/* Expand button: frosted, sits on the image */
.expand {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 40px; height: 40px;
  background: rgba(29,27,26,.45);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* Icon buttons inside a light section (e.g. Final designs arrows after a background change):
   same ink variant as back-to-top. project.js sets data-theme from the section's real colour. */
.sec[data-theme="light"] .icon-btn:not(.expand) { color: var(--ink); background: rgba(29,27,26,.04); border-color: var(--ink-line); }
.sec[data-theme="light"] .icon-btn:not(.expand):hover { background: var(--ink); color: var(--fg); border-color: var(--ink); }

/* ---------- Full-screen image viewer ---------- */
.viewer {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(12,9,7,.96);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease), visibility 0s linear .45s;
  color: var(--fg);
}
.viewer.open { opacity: 1; visibility: visible; transition: opacity .45s var(--ease), visibility 0s; }
.viewer-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--gutter) + env(safe-area-inset-top)) calc(var(--gutter) + env(safe-area-inset-right)) 12px calc(var(--gutter) + env(safe-area-inset-left));
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.viewer-stage { position: relative; min-height: 0; overflow: hidden; touch-action: pinch-zoom; user-select: none; }
.viewer-track { display: flex; height: 100%; transition: transform .7s var(--ease); }
.viewer-stage.dragging .viewer-track { transition: none; }
.vslide {
  flex: 0 0 100%; height: 100%; display: flex; align-items: center; justify-content: center;   /* flex so max-height: 100% below is honoured */
  padding: 0 calc(var(--gutter) + env(safe-area-inset-right)) 0 calc(var(--gutter) + env(safe-area-inset-left));
}
.vslide > * {
  max-width: 100%; max-height: 100%;
  transform: scale(.96); opacity: .4; transition: transform .7s var(--ease), opacity .5s var(--ease);
}
.viewer.open .vslide.on > * { transform: none; opacity: 1; }
.vslide img { display: block; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-sm); }
/* Long images (e.g. full-page or long mobile screens): fit the width and scroll up / down.
   project.js adds .tall when an image is more than 2.5x taller than wide. Everything else fits on screen. */
.vslide.tall {
  display: block; overflow-y: auto; overscroll-behavior: contain;
  touch-action: pan-y pinch-zoom;                       /* finger scrolls; sideways swipe still changes image */
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.vslide.tall > img { max-height: none; max-width: min(100%, 1200px); margin: 0 auto; }
.vslide > .ph { flex: none; }
.vslide .ph {       /* placeholder keeps the carousel's 2:1 shape, contained in the screen */
  width: min(100%, calc((100dvh - 184px) * 2)); aspect-ratio: 2 / 1; height: auto; border-radius: var(--radius-sm);
}
.viewer-foot {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 12px var(--gutter) calc(var(--gutter) + env(safe-area-inset-bottom));
}
.viewer .icon-btn { width: 48px; height: 48px; }
.viewer .close:hover { color: var(--ink); }
.rotate-hint {
  display: none; align-items: center; gap: 8px;
  color: var(--muted);
}
.rotate-hint svg { width: 16px; height: 16px; }
@media (max-width: 768px) and (orientation: portrait) { .rotate-hint { display: inline-flex; } }
@media (orientation: landscape) and (max-height: 496px) {   /* phone turned sideways: image gets the whole screen */
  .viewer { grid-template-rows: minmax(0, 1fr); }
  .viewer-bar, .viewer-foot { position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none; }
  .viewer-bar { top: 0; padding-top: calc(12px + env(safe-area-inset-top)); }
  .viewer-foot { bottom: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .viewer-bar > *, .viewer-foot > * { pointer-events: auto; }
  .vslide { padding: 8px calc(72px + env(safe-area-inset-right)) 8px calc(72px + env(safe-area-inset-left)); }
  .vslide .ph { width: min(100%, calc((100dvh - 16px) * 2)); }
  .viewer-foot { justify-content: space-between; top: 50%; bottom: auto; transform: translateY(-50%); padding: 0 calc(12px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left)); }
  .viewer-foot .arrows { width: 100%; justify-content: space-between; }
  .viewer .icon-btn { width: 40px; height: 40px; background: rgba(12,9,7,.5); }
  .viewer-bar { z-index: 3; }
  .vcount { position: relative; z-index: 3; padding: 8px 12px; border-radius: var(--radius-pill); background: rgba(12,9,7,.6); }
}
html.viewer-lock, html.viewer-lock body { overflow: hidden; }

/* ---------- 6. Impacts ---------- */
.impacts .pin { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0; }
.impacts h2 { max-width: none; }
.impacts .lede { margin-top: 24px; max-width: 600px; color: var(--muted); color: color-mix(in srgb, currentColor 62%, transparent); }
.impacts .cards {
  margin-top: 56px; width: 100%; align-self: stretch;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: left;
}
.impacts .card {
  border-radius: var(--radius-md);
  background: var(--paper); color: var(--ink);             /* white card, dark text on any section colour */
  box-shadow: 0 24px 48px -32px rgba(0,0,0,.45);
  padding: 24px; min-height: 240px;
  display: flex; flex-direction: column;
  transition: opacity .8s var(--ease), transform 1s var(--ease), filter .8s var(--ease);
}
/* Card icon: core Icon block (.wp-block-icon) or the older hand-coded .ico span */
/* Circle = the section's background colour (--sec-bg, set by project.js), icon = the card's white.
   Icon block → Color: "Text" recolours the icon, "Background" recolours the circle
   (both land on the <svg>, so they override these defaults). */
.impacts .card .ico { width: 48px; height: 48px; border-radius: var(--radius-pill); background: var(--sec-bg, var(--ink)); color: var(--paper); display: grid; place-items: center; }
.impacts .card .ico svg { width: 24px; height: 24px; }
.impacts .card .wp-block-icon { width: 48px; height: 48px; margin: 0; padding: 0; border: 0; background: none; color: var(--paper); line-height: 0; }
.impacts .card .wp-block-icon svg {
  width: 100%; height: 100%; padding: 12px; box-sizing: border-box;   /* 24px icon, same as .icon-btn */
  border-radius: var(--radius-pill); background-color: var(--sec-bg, var(--ink));
  fill: currentColor;                                            /* filled library icons; stroke icons set fill: none inline */
}
.impacts .card h3 { margin-top: 16px; }
.impacts .card p { margin-top: auto; padding-top: 48px; color: var(--ink-muted); }

/* Back to top: shared rules in site.css */

/* ---------- Previous / next project: text links with a centre divider ---------- */
.pnav {
  position: absolute; left: 50%; bottom: calc(var(--gutter) - 8px);
  transform: translateX(-50%);
  display: flex; align-items: center;
  white-space: nowrap;
}
.pnav a {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 24px;
  color: inherit; text-decoration: none;                  /* type: t-meta on .pnav; follows the section's text colour */
  transition: color .35s var(--ease);
}
.pnav a + a::before {          /* the divider */
  content: ""; position: absolute; left: 0; top: 50%;
  width: 1px; height: 24px; margin-top: -12px;
  background: var(--line); background: color-mix(in srgb, currentColor 35%, transparent);
}
.pnav .cat { color: var(--muted); color: color-mix(in srgb, currentColor 62%, transparent); transition: color .35s var(--ease); }
.pnav svg { width: 16px; height: 16px; flex: none; transition: transform .35s var(--ease); }
@media (hover: hover) {
  .pnav a:hover, .pnav a:hover .cat { color: var(--orange); }
  .pnav .prev:hover svg { transform: translateX(-4px); }
  .pnav .next:hover svg { transform: translateX(4px); }
}
.pnav a:focus-visible { outline: 2px solid var(--accent); outline-offset: -8px; border-radius: 8px; }

/* ---------- Footer + project nav live inside the last screen (moved there by project.js) ---------- */
.sec-end .site-foot {
  position: absolute; left: var(--gutter); right: var(--gutter);
  bottom: calc(var(--gutter) - 12px + env(safe-area-inset-bottom));
  text-align: left;
}
.sec-end .site-foot { pointer-events: none; }                 /* the full-width footer row sits over the links… */
.sec-end .site-foot > * { pointer-events: auto; }             /* …so only its copyright and icons take clicks */
.sec-end .pnav { bottom: calc(var(--gutter) - 16px); z-index: 2; }   /* centred in the footer row, above it */
.at-end .to-top { bottom: calc(var(--gutter) + 40px); }        /* lifts above the social icons */

/* ---------- Medium ---------- */
@media (max-width: 1024px) {
  .pin { gap: 40px; }
  .impacts .cards { grid-template-columns: repeat(2, 1fr); max-width: 720px; align-self: center; }
  .impacts .card { min-height: 168px; }
  .sec-end .pnav { bottom: 56px; }
  .sec-end .pin { padding-bottom: 120px; }
}
@media (min-width: 896px) and (max-width: 1024px) { .impacts .cards { grid-template-columns: repeat(4, 1fr); max-width: none; align-self: stretch; } }
@media (min-width: 769px) and (max-width: 1024px) {   /* scale-ok: complement of 768 */
  .impacts .card { min-height: 0; padding: 24px; }
  .impacts .card p { padding-top: 32px; }
  .impacts .pin { padding-top: 96px; }
}

/* ---------- Mobile: headline top, media middle, copy bottom ---------- */
@media (max-width: 768px) {

  .pin {
    display: flex; flex-direction: column; align-items: stretch; justify-content: space-between;
    gap: 24px; padding: 88px var(--pad) 32px;
  }
  .media { flex: 1; min-height: 0; }
  .right { max-width: none; justify-self: auto; }
  .sec h2 { max-width: none; }
  .count { margin-top: 16px; }

  .hero .pin { padding-bottom: 0; }
  .hero .right { order: 1; }
  .hero .media { order: 2; flex: 1; }
  .hero .meta { display: flex; flex-wrap: wrap; gap: 8px 16px; }
  .hero .btn-solid { margin-top: 16px; }
  /* Phones: title, list and the whole screen stack in the middle of the viewport */
  .hero-wide .pin { justify-content: center; padding-top: 88px; padding-bottom: 40px; gap: 16px; }
  .hero-wide .media { flex: none; margin-top: 16px; place-items: center; }
  .screen { width: 100%; border-radius: var(--radius-sm); }
  .phone { --pw: min(72vw, 320px); height: min(100%, calc(var(--pw) / .578)); border-radius: 32px 32px 0 0; }

  .deck { --sq: min(62vw, 30svh); }
  /* Deck grows into the free space; rotated back cards need ~15% extra room */
  .media:has(.deck) { container-type: size; }
  .media .deck { --sq: min(calc((100cqh - 80px) / 1.15), calc((100cqw - 16px) / 1.15)); }
  .solo { --h: min(34svh, 80vw); }
  .cascade { --h: min(34svh, 80vw); margin-top: 40px; }
  /* Cascade: image grows to fill the free space between title and copy */
  .media:has(.cascade) { container-type: size; }
  .media .cascade { --h: min(calc(100cqh - 104px), calc(100cqw / .75)); margin-top: 48px; }

  .finals .pin { justify-content: center; gap: 24px; }
  .finals-wrap { gap: 24px; }
  .finals-head .ctrls { width: 100%; justify-content: space-between; }

  .impacts .lede { margin-top: 16px; }
  .impacts .cards { margin-top: 32px; gap: 8px; }
  .impacts .card { padding: 16px; min-height: 0; }
  .impacts .card .ico,
  .impacts .card .wp-block-icon { width: 40px; height: 40px; }
  .impacts .card .wp-block-icon svg { padding: 8px; }
  .impacts .card h3 { font-size: var(--fs-base); line-height: 24px; margin-top: 12px; }
  .impacts .card p { padding-top: 24px; }
  .impacts .pin { justify-content: flex-start; padding-bottom: 120px; }
  .pnav a { padding: 16px; gap: 8px; }
  .pnav a + a::before { height: 16px; margin-top: -8px; }
  .pnav .cat { display: none; }
  .pnav svg { width: 16px; height: 16px; }

  /* Hero: everything centred */
  .hero .left, .hero .right { text-align: center; }
  .hero h1 { margin: 0 auto; }
  .hero .meta { justify-content: center; }
  .hero .media { align-self: stretch; justify-items: center; }
  .phone { justify-self: center; margin: 0 auto; }

  /* Single-image section: no image, copy gets the room */
  .enhance .media { display: none; }
  .enhance .pin { justify-content: flex-start; gap: 32px; }

  /* Impacts: last screen grows to fit stacked cards and scrolls naturally */
  .impacts { height: auto; min-height: var(--vh); scroll-snap-align: start; }
  .impacts .snap { display: none; }
  .impacts .pin {
    position: relative; height: auto; min-height: var(--vh); overflow: visible;
    justify-content: flex-start; padding: 96px var(--pad) 0;
  }
  .impacts .cards { grid-template-columns: 1fr; gap: 12px; margin-top: 32px; }
  .impacts .card { padding: 24px; }
  .impacts .card p { padding-top: 32px; }

  .sec-end .pnav { position: relative; left: auto; bottom: auto; transform: none; align-self: center; margin-top: 40px; }
  .sec-end .site-foot {
    position: relative; left: auto; right: auto; bottom: auto; align-self: stretch;
    margin-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
  .at-end .to-top { bottom: 48px; }
  .sec-end .pin { padding-bottom: 0; }
}

/* ---------- WordPress block markup (image / gallery blocks inside sections) ---------- */
.sec figure { margin: 0; }
.sec .ph img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.sec .phone img { object-position: 50% 0; }
.finals .carousel { display: block; gap: 0; margin: 0; }