/* ─────────────────────────────────────────────────────────────────────
   DM The Planner, v3
   Palette, type pairing and editorial direction carried over from v2.
   Changes in this pass: the DM lockup is the brand mark everywhere,
   Bodoni Moda is restricted to display roles, plum appears once per
   page as a signature block, and heroes are art directed per viewport.
   ───────────────────────────────────────────────────────────────────── */

:root {
  --plum:   #241522;
  --plum-2: #180D18;
  --wine:   #5E2337;
  --bone:   #EFEDE8;
  --shell:  #E4DAD5;
  --peach:  #E3A47D;
  --ink:    #211A1E;
  --ash:    #6B5C61;
  --rule:   rgba(33, 26, 30, .16);
  --rule-d: rgba(239, 237, 232, .22);

  --serif: "Bodoni Moda", "Times New Roman", serif;
  --sans:  "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gap:   2px;
  --pad:   clamp(2.6rem, 5vw, 4.75rem);
  --side:  clamp(1.15rem, 5vw, 4.5rem);
  --ease:  cubic-bezier(.22, .61, .36, 1);
  --logo:  68px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Two guards against a strip of empty background at the foot of the page on
   phones. The flex column pins the footer to the bottom when a page is
   shorter than the viewport, and overflow-x: clip stops any element that
   runs a few pixels wide from creating a phantom scroll area. clip is used
   rather than hidden so nothing sticky or fixed is affected. */
html { overflow-x: clip; background: var(--plum-2); }

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(.97rem, .2vw + .93rem, 1.04rem);
  line-height: 1.68;
  letter-spacing: .004em;
  -webkit-font-smoothing: antialiased;
}

/* Keep short pages filled and make mobile overscroll beyond the document
   inherit the dark footer canvas instead of exposing a white root layer. */
main { flex: 1 0 auto; }
.foot { flex-shrink: 0; }

img { max-width: 100%; display: block; }

main { flex: 1 0 auto; }
.foot { flex: none; }

/* ── Type roles ──────────────────────────────────────────────────────
   Bodoni carries display only: hero headlines, section statements,
   founder names and the pull quote. Everything else is Jost, because
   Bodoni's hairlines disappear below about 20px. */

h1, h2, .name, blockquote {
  font-family: var(--serif);
  font-weight: 400;
  font-optical-sizing: auto;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.35rem, 5.9vw, 4.9rem); line-height: .98; letter-spacing: -.02em; }
h2 { font-size: clamp(1.85rem, 3.7vw, 3rem);   line-height: 1.04; letter-spacing: -.015em; }
h2.h2-s { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.name { font-size: clamp(1.45rem, 1.8vw, 1.8rem); line-height: 1.1; letter-spacing: -.01em; }

h3 {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.06rem;
  line-height: 1.35;
  letter-spacing: .015em;
  margin: 0;
}

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }

.measure { max-width: 62ch; }
.measure-s { max-width: 46ch; }

.lead { font-size: clamp(1.05rem, .5vw + .94rem, 1.22rem); line-height: 1.56; }
.small { font-size: .85rem; line-height: 1.6; color: var(--ash); }

/* Controlled headline breaks. Each line is its own span: inline on phones so
   the words are separated by a real space that cannot collapse, block at
   larger sizes so the line breaks exactly where it is meant to. This replaced
   a <br> that was hidden with display: none, which ran words together on
   mobile whenever the space in front of it was missing. */
.ln  { display: inline; }
.lnm { display: block; }
@media (min-width: 700px) {
  .ln  { display: block; }
  .lnm { display: inline; }
}

.skip { position: absolute; left: -999px; top: 0; z-index: 99;
        background: var(--plum); color: var(--bone); padding: .8rem 1.1rem; }
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--peach); outline-offset: 3px; }

/* ── Sections ────────────────────────────────────────────────────────── */

section { padding: var(--pad) var(--side); }
section.flush { padding-left: 0; padding-right: 0; }
section.tight { padding-top: clamp(1.3rem, 2.4vw, 2.1rem); }
section.no-bottom { padding-bottom: 0; }

.wrap { max-width: 1320px; margin: 0 auto; }
.wrap-n { max-width: 940px; margin: 0 auto; }

.dark { background: var(--plum); color: var(--bone); }
.deep { background: var(--plum-2); color: var(--bone); }
.dark h1, .dark h2, .dark h3, .dark .name, .dark .lead,
.deep h1, .deep h2, .deep h3, .deep .name, .deep .lead { color: var(--bone); }
.dark p, .deep p { color: rgba(239, 237, 232, .84); }
.dark a, .deep a { color: var(--bone); }
.dark .small, .deep .small { color: rgba(239, 237, 232, .68); }

.shell-bg { background: var(--shell); }

.opener { border-top: 1px solid var(--rule); padding-top: 1.15rem; }
.dark .opener, .deep .opener { border-color: var(--rule-d); }

/* Jost label, sentence case, never tracked-out capitals. */
.label { font-family: var(--sans); font-size: .82rem; letter-spacing: .02em;
         color: var(--ash); margin: 0 0 .7rem; }
.dark .label, .deep .label { color: rgba(239, 237, 232, .7); }

/* ── Navigation, carrying the DM lockup ─────────────────────────────── */

.nav {
  position: fixed; inset: 0 0 auto; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .8rem var(--side);
  color: var(--bone);
  transition: background-color .4s var(--ease), color .4s var(--ease),
              padding .4s var(--ease);
}
.nav.solid {
  background: var(--bone); color: var(--ink);
  padding-top: .45rem; padding-bottom: .45rem;
  border-bottom: 1px solid var(--rule);
}

.lockup { display: block; line-height: 0; flex: none; }
.lockup img { height: var(--logo); width: auto; transition: height .4s var(--ease); }
.nav.solid .lockup img { height: calc(var(--logo) * .68); }
.on-light { display: none; }
.nav.solid .on-dark { display: none; }
.nav.solid .on-light { display: block; }

.menu { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.1rem);
        list-style: none; margin: 0; padding: 0; }
.menu a { font-family: var(--sans); font-size: .92rem; letter-spacing: .02em;
          text-decoration: none; padding: .3rem 0; }
.menu a:hover { text-decoration: underline; }
.menu a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--peach); }
.menu .cta { border: 1px solid currentColor; padding: .5rem 1.15rem; font-size: .86rem; }
.menu .cta:hover { background: var(--bone); color: var(--plum); text-decoration: none; }
.nav.solid .menu .cta:hover { background: var(--plum); color: var(--bone); }

.burger { display: none; background: none; border: 0; color: inherit;
          padding: .45rem; cursor: pointer; }
.burger i { display: block; width: 26px; height: 1px; background: currentColor;
            margin: 6px 0; transition: transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 980px) { :root { --logo: 56px; } }

@media (max-width: 860px) {
  :root { --logo: 48px; }
  .burger { display: block; }
  .menu {
    position: fixed; inset: 0; flex-direction: column;
    justify-content: center; align-items: flex-start; gap: 1.1rem;
    padding: 6.5rem var(--side) 3rem;
    background: var(--plum); color: var(--bone);
    transform: translateY(-101%); transition: transform .45s var(--ease);
  }
  .menu.open { transform: translateY(0); }
  .menu a { font-size: 1.28rem; letter-spacing: .04em; }
  .menu .cta { font-size: 1rem; margin-top: .8rem; }
}

/* The menu is a fixed overlay inside the nav, so the lockup and the close
   control have to sit above it and use the on-dark artwork while open. */
.nav:has(.menu.open) .lockup, .nav:has(.menu.open) .burger { position: relative; z-index: 2; }
.nav:has(.menu.open) .burger { color: var(--bone); }
.nav.solid:has(.menu.open) { background: transparent; border-color: transparent; }
.nav.solid:has(.menu.open) .on-dark { display: block; }
.nav.solid:has(.menu.open) .on-light { display: none; }

/* ── Heroes ─────────────────────────────────────────────────────────── */

.hero { position: relative; display: grid; align-items: end;
        min-height: 88svh; padding: 0; overflow: hidden; }
.hero.short { min-height: 66svh; }
/* On desktop the hero box is capped against the viewport width so its shape
   stays close to the 2:1 and 21:9 files being served. Without this the box is
   far wider than the image and the browser trims the top and bottom, which is
   what was cutting faces on laptops while phones looked fine. */
@media (min-width: 800px) {
  .hero { min-height: min(92svh, 56.25vw); }        /* matches the 16:9 file */
  .hero.short { min-height: min(80svh, 50vw); }     /* matches the 2:1 file */
}
.hero > .plate { position: absolute; inset: 0; aspect-ratio: auto; }
.hero > .plate img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(177deg, rgba(24,13,24,.56) 0%, rgba(24,13,24,.10) 32%,
              rgba(24,13,24,.30) 56%, rgba(24,13,24,.62) 78%, rgba(24,13,24,.92) 100%);
}
.hero-copy {
  position: relative; z-index: 2; color: var(--bone);
  padding: 0 var(--side) clamp(2.2rem, 5.5vw, 4.4rem);
  max-width: 1320px; margin: 0 auto; width: 100%;
}
.hero-copy h1, .hero-copy h2, .hero-copy p { color: var(--bone); }
.hero-copy p { max-width: 44ch; margin-top: 1.1rem; }

@media (max-width: 700px) {
  .hero { min-height: 86svh; }
  .hero.short { min-height: 60svh; }
  .hero-copy p { max-width: 34ch; font-size: 1rem; }
}

/* One orchestrated entrance, on the hero only. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise .9s var(--ease) both; }
  .hero-copy > *:nth-child(2) { animation-delay: .1s; }
  .hero-copy > *:nth-child(3) { animation-delay: .2s; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } }
}

/* ── Photography ────────────────────────────────────────────────────── */

.plate { display: block; overflow: hidden; background: var(--shell); position: relative; }
.plate img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.r-21   { aspect-ratio: 2 / 1; }
.r-219  { aspect-ratio: 21 / 9; }
.r-wide { aspect-ratio: 16 / 9; }
.r-43   { aspect-ratio: 4 / 3; }
.r-land { aspect-ratio: 3 / 2; }
.r-port { aspect-ratio: 4 / 5; }
.r-tall { aspect-ratio: 3 / 4; }
.r-23   { aspect-ratio: 2 / 3; }   /* the skylight frame, its own native shape */
.r-sq   { aspect-ratio: 1 / 1; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .zoom img { transition: transform 1.6s var(--ease); }
  .zoom:hover img { transform: scale(1.035); }
}

/* A single restrained reveal, applied to photography only. */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; transform: translateY(12px);
        transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .rv.in { opacity: 1; transform: none; }
}

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 760px) {
  .pair, .trio { grid-template-columns: 1fr; }
}

figure { margin: 0; }
figcaption { font-size: .8rem; color: var(--ash); margin-top: .6rem; }
.dark figcaption, .deep figcaption { color: rgba(239, 237, 232, .6); }


/* Final editorial rhythm: keep the traditional triptych as one composed
   moment, then give the closing image enough negative space to begin a new beat. */
.trad-gallery {
  padding: clamp(1.4rem, 2.5vw, 2rem) var(--side) clamp(5.5rem, 8vw, 7.5rem);
}
.trad-gallery .trio {
  max-width: 1320px;
  margin: 0 auto;
  gap: clamp(.45rem, .8vw, .8rem);
}
@media (min-width: 761px) {
  .trad-gallery .r-port { aspect-ratio: 4 / 5; }
}
@media (max-width: 760px) {
  .trad-gallery { padding-bottom: clamp(3.5rem, 10vw, 5rem); }
}

/* ── Asymmetric two column ──────────────────────────────────────────── */

.duo { display: grid; gap: clamp(1.4rem, 3vw, 3rem); align-items: center; }
@media (min-width: 900px) {
  .duo { grid-template-columns: 1.05fr .95fr; }
  .duo.wide-img { grid-template-columns: .88fr 1.12fr; }
  .duo.narrow-img { grid-template-columns: 1.2fr .8fr; }
  .duo.flip > :first-child { order: 2; }
  .duo.top { align-items: start; }
}
/* On phones the photograph leads, then the writing. */
@media (max-width: 899px) {
  .duo.img-first > :last-child { order: -1; }
}

/* ── Lists, with real markers ───────────────────────────────────────── */

.marks { list-style: none; margin: 1.3rem 0 0; padding: 0;
         display: flex; flex-direction: column; gap: .6rem; }
.marks li { position: relative; padding-left: 1.5rem; font-size: .95rem; line-height: 1.55; }
.marks li::before { content: ''; position: absolute; left: .1rem; top: .62em;
  width: 6px; height: 6px; background: var(--peach); transform: rotate(45deg); }

/* ── Buttons ────────────────────────────────────────────────────────── */

.row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.7rem; }

.btn { display: inline-block; font-family: var(--sans); font-size: .9rem;
  letter-spacing: .03em; padding: .8rem 1.55rem; text-decoration: none;
  border: 1px solid currentColor; background: none; color: inherit; cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease); }
.btn:hover { background: var(--ink); color: var(--bone); }
.dark .btn:hover, .deep .btn:hover, .hero-copy .btn:hover { background: var(--bone); color: var(--plum); }

.btn-fill { background: var(--wine); border-color: var(--wine); color: var(--bone); }
.btn-fill:hover { background: var(--plum); border-color: var(--plum); color: var(--bone); }
.dark .btn-fill:hover, .deep .btn-fill:hover,
.hero-copy .btn-fill:hover { background: var(--bone); border-color: var(--bone); color: var(--plum); }

.tlink { display: inline-block; margin-top: 1.2rem; font-size: .9rem;
  text-decoration: none; border-bottom: 1px solid var(--peach); padding-bottom: .18rem; }
.tlink:hover { border-bottom-color: currentColor; }

/* ── Service levels and value blocks ────────────────────────────────── */

.levels { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 820px) { .levels { grid-template-columns: repeat(2, 1fr); } }
.level { border-top: 1px solid var(--rule); padding-top: 1.2rem; }
.dark .level, .deep .level { border-color: var(--rule-d); }
.level h3 { margin-bottom: .5rem; font-size: 1.1rem; }
.level p { font-size: .95rem; }

/* A service block answers four questions in a fixed order. */
.svc-facts { margin: 1.4rem 0 0; }
.duo h2.h2-s + .lead { margin-top: 1rem; }
.svc-facts dt { font-family: var(--sans); font-size: .78rem; letter-spacing: .04em;
  color: var(--ash); margin-top: 1rem; }
.dark .svc-facts dt, .deep .svc-facts dt { color: rgba(239, 237, 232, .66); }
.svc-facts dd { margin: .25rem 0 0; font-size: .96rem; line-height: 1.55; }

/* ── Chapter openings. The hairline and the heading carry the structure;
   the day already reads in order without numbering it. */
.chapter { border-top: 1px solid var(--rule); padding-top: 1.4rem; }
.chapter h3 { margin-bottom: .8rem; }
.chapter + * h2, .duo h2.h2-s { margin-bottom: .1rem; }

/* ── Founders ───────────────────────────────────────────────────────── */

.founders { display: grid; gap: clamp(1.6rem, 4vw, 3.2rem); }
@media (min-width: 780px) { .founders { grid-template-columns: 1fr 1fr; } }
.founder { border-top: 1px solid var(--rule); padding-top: 1.3rem; }
.dark .founder, .deep .founder { border-color: var(--rule-d); }
.founder .role { font-family: var(--sans); font-size: .82rem; letter-spacing: .05em;
  color: var(--wine); margin: .35rem 0 .85rem; }
.dark .founder .role, .deep .founder .role { color: var(--peach); }

/* ── Pull quote, the one italic in the type system ──────────────────── */

blockquote { font-size: clamp(1.5rem, 2.8vw, 2.4rem); line-height: 1.2;
  letter-spacing: -.012em; margin: 0; max-width: 30ch; }
blockquote em { font-style: italic; }

/* ── Questions ──────────────────────────────────────────────────────── */

.qa details { border-top: 1px solid var(--rule); padding: 1.05rem 0; }
.qa details:last-of-type { border-bottom: 1px solid var(--rule); }
.dark .qa details, .deep .qa details { border-color: var(--rule-d); }
.qa summary { cursor: pointer; list-style: none; display: flex; gap: 1rem;
  justify-content: space-between; align-items: baseline;
  font-family: var(--sans); font-size: 1.02rem; letter-spacing: .01em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: '+'; color: var(--wine); flex: none; font-size: 1.1rem; }
.dark .qa summary::after, .deep .qa summary::after { color: var(--peach); }
.qa details[open] summary::after { content: '\2212'; }
.qa details p { margin: .8rem 0 0; font-size: .94rem; max-width: 62ch; }

/* ── Form ───────────────────────────────────────────────────────────── */

.form { display: grid; gap: 1.1rem; }
@media (min-width: 760px) { .form { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .82rem; letter-spacing: .03em; color: var(--ash); }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 1rem; font-weight: 300; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--rule);
  padding: .55rem 0; border-radius: 0; min-height: 44px; }
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--wine); }
.form-note { grid-column: 1 / -1; font-size: .82rem; color: var(--ash); margin: 0; }

/* ── Footer ─────────────────────────────────────────────────────────── */

.foot { background: var(--plum-2); color: rgba(239, 237, 232, .8);
        padding: clamp(2.6rem, 5vw, 4rem) var(--side) 1.5rem; }
.foot a { color: var(--bone); text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot-grid { display: grid; gap: 2rem; max-width: 1320px; margin: 0 auto; }
@media (min-width: 780px) { .foot-grid { grid-template-columns: 1.4fr .8fr 1fr; } }
.foot .lockup img { height: 104px; margin-bottom: 1.1rem; }
.foot h4 { font-family: var(--sans); font-size: .8rem; font-weight: 400;
  letter-spacing: .1em; color: rgba(239, 237, 232, .55); margin: 0 0 .9rem; }
.foot ul { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .5rem; font-size: .92rem; }
.foot-end { max-width: 1320px; margin: 2.4rem auto 0; padding-top: 1.2rem;
  border-top: 1px solid var(--rule-d); display: flex; flex-wrap: wrap;
  gap: .6rem 1.5rem; justify-content: space-between; font-size: .78rem;
  color: rgba(239, 237, 232, .5); }

/* ── Hero slideshow ─────────────────────────────────────────────────────
   Three stacked frames with a slow crossfade. One moment of motion on the
   page, deliberately unhurried, and switched off for reduced motion. */
.slides { position: absolute; inset: 0; }
.slides .slide { position: absolute; inset: 0; aspect-ratio: auto;
  opacity: 0; transition: opacity 1.6s var(--ease); }
.slides .slide.is-on { opacity: 1; }
.slides .slide img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) {
  .slides .slide { transition: none; }
}

.dots { display: flex; gap: .55rem; }
.dot { width: 7px; height: 7px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(239, 237, 232, .7); background: none;
  transition: background-color .4s var(--ease); }
.dot.on { background: var(--bone); }
@media (max-width: 700px) { .dots { display: none; } }

/* ── Slide dots, bottom right of the hero ───────────────────────────── */
.hero-side { position: absolute; z-index: 3; right: var(--side);
  bottom: clamp(2.2rem, 4vw, 3.4rem); }
@media (max-width: 899px) { .hero-side { display: none; } }

/* ── Featured Essence card ───────────────────────────────────────────
   Fortis-style glass panel: anchored inside the hero at bottom-right.
   No white frame, no bone band, no overlap into the section below. */
.press-band {
  position: absolute;
  z-index: 5;
  right: var(--side);
  bottom: clamp(2.2rem, 4vw, 3.4rem);
  width: min(21.5rem, calc(100% - (2 * var(--side))));
}
.press-band .press {
  width: 100%;
  padding: .72rem .82rem;
  background: rgba(20, 24, 25, .11);
  -webkit-backdrop-filter: blur(18px) saturate(132%);
  backdrop-filter: blur(18px) saturate(132%);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .10);
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.press-band .press:hover {
  background: rgba(20, 24, 25, .24);
  box-shadow: 0 9px 24px rgba(0, 0, 0, .12);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .press-band .press { background: rgba(25, 31, 31, .58); }
}
.press {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: .72rem;
  align-items: center;
  text-decoration: none;
}
.press img {
  width: 96px;
  height: 66px;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
}
.press .k {
  display: block;
  font-size: .61rem;
  letter-spacing: .14em;
  color: var(--peach);
  margin-bottom: .18rem;
}
.press .t {
  display: block;
  font-size: .92rem;
  line-height: 1.3;
  color: var(--bone);
}
.press .r {
  font-size: .72rem;
  letter-spacing: .05em;
  color: rgba(239, 237, 232, .78);
  border-bottom: 1px solid rgba(239, 237, 232, .42);
  padding-bottom: .16rem;
  white-space: nowrap;
}
.press:hover .t { text-decoration: underline; text-underline-offset: .2em; }
.press:hover .r { color: var(--bone); }

/* Keep the slideshow dots clear of the feature card. */
.hero:has(.press-band) .hero-side { bottom: 1.2rem; }

@media (max-width: 1100px) {
  .press-band { width: min(21.5rem, calc(100% - (2 * var(--side)))); }
  .press { grid-template-columns: 96px minmax(0, 1fr); }
  .press img { width: 96px; height: 68px; }
}
@media (max-width: 700px) {
  .press-band {
    right: var(--side);
    bottom: 1rem;
    width: calc(100% - (2 * var(--side)));
  }
  .press-band .press {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: .75rem;
    padding: .7rem .8rem;
    border-radius: 14px;
  }
  .press img { width: 82px; height: 58px; }
  .press .k { font-size: .56rem; }
  .press .t { font-size: .82rem; }
}

/* ── Four up ────────────────────────────────────────────────────────── */
.quad { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
@media (max-width: 899px) { .quad { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .quad { grid-template-columns: 1fr; } }