/* Focal Merchandising - the showroom shelf.
   The page ground is the charcoal of her studio sweep, so each unit stands on the page with no photograph
   edge, and every row of units stands on one 1px Focal gold shelf line that runs off both screen edges.
   The gold line belongs under rows of units and nowhere else: every other piece of section furniture is a
   ground step or a neutral hairline. */

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

html {
  background: var(--showroom);
  overflow-x: clip;
  scrollbar-color: #4a463d var(--deep);
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--head-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--showroom);
  color: var(--body);
  font-family: var(--text);
  font-size: 1.125rem;
  line-height: 1.6;
  overflow-x: clip;
  caret-color: var(--gold);
  font-variant-numeric: tabular-nums;
}

::selection { background: var(--gold); color: var(--showroom); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--deep); }
::-webkit-scrollbar-thumb { background: #4a463d; border: 3px solid var(--deep); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

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

a { color: var(--white); text-decoration-color: var(--gold); text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
a:hover { color: var(--gold-action); }
:focus-visible { outline: 2px solid var(--gold-action); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 {
  font-kerning: normal;
  font-feature-settings: "kern" 1;
  font-family: var(--display);
  font-weight: 600;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
  /* her capitals wrap at word boundaries and are never hyphenated; a word that still cannot fit its column
     breaks rather than paint over its neighbour (the fluid sizes below keep that from ever being needed) */
  hyphens: manual;
  overflow-wrap: break-word;
}
p { margin: 0; text-wrap: pretty; }
strong, b { color: var(--white); font-weight: 600; }

.wrap { width: min(100% - 2 * var(--gutter), var(--content)); margin-inline: auto; }
.stage { width: min(100% - 2 * var(--gutter), var(--stage-max)); margin-inline: auto; }

.skip {
  position: absolute; left: 16px; top: -60px;
  background: var(--gold-action); color: var(--on-gold);
  padding: 10px 16px; z-index: 30; font-weight: 600;
}
.skip:focus { top: 12px; }

/* ---------- Header (the engine's navigation component drives the menu) ---------- */

.site-head { background: var(--deep); z-index: 20; }
.site-head[data-se-nav-scrolled] { background: var(--deep); box-shadow: 0 1px 0 #2f2e2c, 0 8px 24px -16px rgb(0 0 0 / 0.6); }
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: var(--head-h);
}
.brand { display: block; flex: 0 1 auto; min-width: 0; }
/* sized from brand.json logoMetrics: displayHeight 48, 36 on a phone; never upscaled (1480x443 source) */
.brand img { height: 48px; width: auto; }

.site-nav { display: flex; flex-wrap: nowrap; align-items: center; gap: clamp(14px, 1.6vw, 28px); }
.site-nav:not([data-se-nav-mode="overlay"]) { margin-left: auto; }

/* the one header action: a compact "Plan a Project", shown only where the bar has room for it beside the
   menu (from 1440 beside the seven links; from 600 to 1179 beside the Menu button) */
/* outlined, so the page keeps one filled gold action per screen (the hero's, the band's) */
.site-head .head-cta {
  display: none; min-height: 48px; padding: 0 20px; font-size: 0.8125rem; flex: none;
  background: transparent; color: var(--gold-action); box-shadow: inset 0 0 0 1px var(--gold);
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.site-head .head-cta:hover { background: var(--gold-action); color: var(--on-gold); }
@media (min-width: 600px) and (max-width: 1179.98px) {
  .site-head .head-cta { display: inline-flex; margin-left: auto; order: 1; }
  .nav-toggle { order: 2; }
  .site-head .wrap { gap: 20px; }
}
@media (min-width: 1280px) { .site-head .head-cta { display: inline-flex; } }
.site-nav a {
  font-family: var(--display); font-size: 0.875rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: var(--white); padding: 14px 0; display: inline-block;
  transition: color 180ms var(--ease-out);
}
.site-nav a[aria-current="page"] { color: var(--gold); }
.site-nav a:hover { color: var(--gold-action); }

.nav-toggle {
  flex: 0 0 auto; position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; min-width: 48px; padding: 0 4px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--display); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  font-size: 0.875rem; color: var(--white);
}
.nav-toggle .bars { width: 22px; height: 12px; border-top: 1px solid var(--white); border-bottom: 1px solid var(--white); position: relative; }
.nav-toggle .bars::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--white); }
html[data-se-nav-open] .nav-toggle .bars { border-color: transparent; }
html[data-se-nav-open] .nav-toggle .bars::after { transform: rotate(45deg); }
html[data-se-nav-open] .nav-toggle .bars::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--white); transform: rotate(-45deg); }

.site-nav[data-se-nav-mode="overlay"] {
  background: var(--deep);
  flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
  padding: calc(var(--head-h) + 16px) var(--gutter) 40px;
  overflow-y: auto;
}
.site-nav[data-se-nav-mode="overlay"] a {
  font-size: clamp(1.25rem, 1rem + 1.6vw, 1.75rem); letter-spacing: 0.08em;
  padding: 14px 0; border-bottom: 1px solid #2f2e2c;
}
@media (prefers-reduced-motion: no-preference) {
  .site-nav[data-se-nav-mode="overlay"][data-se-nav-open] a { animation: menu-in 420ms var(--ease-out) both; }
  .site-nav[data-se-nav-mode="overlay"][data-se-nav-open] a:nth-child(n+3) { animation-delay: 40ms; }
  .site-nav[data-se-nav-mode="overlay"][data-se-nav-open] a:nth-child(n+5) { animation-delay: 80ms; }
  @keyframes menu-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* ---------- Buttons and links ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 30px; white-space: nowrap;
  background: var(--gold-action); color: var(--on-gold);
  font-family: var(--display); font-weight: 700; font-size: 0.9375rem;
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  transition: background-color 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.btn:hover { background: var(--white); color: var(--on-gold); }
.btn:active { transform: translateY(1px); background: var(--colour-primary-active); }
.btn:focus-visible, .cf-submit:focus-visible { outline-offset: 4px; }

.text-link {
  font-family: var(--display); font-weight: 600; font-size: 0.875rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
  text-decoration: none; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; white-space: nowrap;
}
.text-link::after { content: "\2192"; font-family: var(--text); letter-spacing: 0; transition: transform 260ms var(--ease-out); }
.text-link:hover { color: var(--gold-action); }
.text-link:hover::after, .text-link:focus-visible::after { transform: translateX(4px); }
.text-link:active { color: var(--white); }
.site-nav a:active, .jump a:active, .pf-index a:active, .foot-grid a:active { color: var(--white); }

/* her own small gold lines, set between the two short rules of her wordmark (-FOCAL-) */
.dash { display: inline-flex; align-items: center; gap: 12px; }
.dash::before, .dash::after { content: ""; flex: none; width: 18px; height: 1px; background: var(--gold); }

/* ---------- The shelf: the signature move ---------- */

/* A shelf row: her units stand on one gold line that runs off both screen edges. Each unit figure is
   stretched to the row's height and its photograph sits at the figure's foot, so every unit's base meets
   the line (each image is cropped to its own lowest visible pixel). --w is the unit's own pixel width at
   1x, --u is page pixels per source pixel (at most 1 for a 1x photograph: her units paint at their own
   size or smaller), --k a per-unit step down, and flex-shrink scales a row evenly when the room is
   narrower than the units. */
.shelf {
  position: relative;
  display: flex; align-items: stretch; justify-content: space-between;
  gap: clamp(12px, 2vw, 40px);
  --u: 1px;
  /* breathing room between her units and the line under them (Renie, 2026-10-24: "almost touching") */
  padding-bottom: clamp(16px, 1.8vw, 28px);
}
.shelf.flat { padding-bottom: 0; }
/* The line runs under the row it carries. Only the two fixtures (the hero shelf and Portfolio's PoP
   gondola) run it off both screen edges; a row of rectangular store photographs (.flat) has nothing
   standing on it, so it gets no line at all. */
.shelf::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0;
  height: 1px; background: var(--gold); pointer-events: none;
}
.shelf.fixture::after { left: -100vw; right: -100vw; }
.shelf.flat::after { display: none; }
.unit {
  margin: 0; position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  /* never past --cap per source pixel: 1px for her 1x photographs, the lead and the bowl (2x files) a hair more */
  flex: 0 1 min(calc(var(--w) * var(--k, 1) * var(--u)), calc(var(--w) * var(--k, 1) * var(--cap, 1px)));
  min-width: 0;
  transition: transform 420ms var(--ease-out);
}
.unit img { width: 100%; height: auto; }
.unit:hover { transform: translateY(-4px); }

.xl, .xxl { display: none !important; }
@media (min-width: 1900px) {
  .xl { display: flex !important; }
  .xl-dup { display: none; }
}
@media (min-width: 2000px) { .xxl { display: flex !important; } }

/* scroll reveal: progressive enhancement only, the page is complete without it */
@media (prefers-reduced-motion: no-preference) {
  .hero-shelf .unit { animation: settle 1000ms var(--ease-out) both; }
  .hero-shelf .unit:nth-child(2) { animation-delay: 60ms; }
  .hero-shelf .unit:nth-child(3) { animation-delay: 120ms; }
  .hero-shelf .unit:nth-child(5) { animation-delay: 180ms; }
  .hero-shelf .unit:nth-child(6) { animation-delay: 240ms; }
  .gondola .tier-1 .unit { animation: settle 1000ms var(--ease-out) both; }
  .gondola .tier-1 .unit:nth-child(even) { animation-delay: 120ms; }
  @keyframes settle { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }
  /* the lead photo is the first screen's main picture: it settles onto the shelf but never fades in,
     so it is on screen the moment it arrives (a fade from 0 held the phone's largest paint back ~1s) */
  .hero-shelf .unit.lead { animation-name: settle-lead; }
  @keyframes settle-lead { from { transform: translateY(-18px); } to { transform: none; } }
  /* nothing starts hidden: a block is visible from the first paint (no script, a full-page capture, a fast
     scroll), and only rises in once, as its first pixel enters the screen */
  .reveal.revealing { animation: rise 700ms var(--ease-out) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}

/* Shelf stocking (Home, PoP Display): as the visitor scrolls, her units drop onto the gold line one by
   one until the shelf is full. The shelf is fully stocked in the HTML and CSS; only site.js adds
   .stocking, and only with motion allowed, so no script, reduced motion and a full-page capture all show
   every unit standing. Each unit is its own view timeline, read with the screen's bottom 10% inset: its
   photograph starts falling once the unit's foot (the line) is above that, and lands within the next 16vh
   of scroll, the next unit 8vh later. Only the photograph moves (transform and opacity), never the unit,
   so the timeline and the layout stay put and the landed frame is the static shelf exactly. Browsers
   without scroll-driven animations get the same curve from site.js through --t. */
@media (prefers-reduced-motion: no-preference) {
  .stock.stocking .unit:nth-child(2) { --i: 1; }
  .stock.stocking .unit:nth-child(3) { --i: 2; }
  .stock.stocking .unit:nth-child(4) { --i: 3; }
  /* from 1900px the second unit (.xl-dup) is not shown, so the order closes up; on a phone the shelf is
     rows of two, each row arriving as it reaches the line, so the stagger is only left then right */
  @media (min-width: 1900px) {
    .stock.stocking .unit:nth-child(3) { --i: 1; }
    .stock.stocking .unit:nth-child(4) { --i: 2; }
  }
  @media (max-width: 760px) {
    .stock.stocking .unit:nth-child(odd) { --i: 0; }
    .stock.stocking .unit:nth-child(even) { --i: 1; }
  }
  @supports (animation-timeline: view()) {
    .stock.stocking .unit { view-timeline: --stock-unit block; view-timeline-inset: 0 10%; }
    .stock.stocking .unit picture {
      animation: stock-drop cubic-bezier(0.33, 1, 0.68, 1) both;
      animation-timeline: --stock-unit;
      animation-range: contain calc(var(--i, 0) * 8vh) contain calc(var(--i, 0) * 8vh + 16vh);
    }
  }
  .stock.stocking.stocking-js .unit picture {
    opacity: clamp(0, var(--t, 1) * 2.4, 1);
    transform: translateY(calc((1 - var(--t, 1)) * (1 - var(--t, 1)) * (1 - var(--t, 1)) * -48px));
  }
  @keyframes stock-drop {
    from { opacity: 0; transform: translateY(-48px); }
    40% { opacity: 1; }
    to { opacity: 1; transform: none; }
  }
}

/* ---------- Section rhythm ---------- */

.section { padding-block: clamp(72px, 9vw, 136px); }
.band { background: var(--deep); }
/* where two sections on the same ground meet, a neutral hairline marks the change of subject */
.band + .band, .reviews + .enquiry, main > section:not(.band) + .cta-band:not(.band) { border-top: 1px solid #2f2e2c; }
.section-head { margin-bottom: clamp(36px, 4vw, 56px); display: flex; align-items: start; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.section-head h2 { font-size: clamp(1.75rem, 1.05rem + 2.1vw, 3rem); }
main > section { overflow-x: clip; }

/* ---------- Home: hero ---------- */

.hero { padding-block: clamp(20px, 2vw, 32px) clamp(40px, 4vw, 64px); }
/* the band after the hero starts close under the shelf, so on a tall screen her HELLO is in view, not a
   strip of empty charcoal */
.hero + .section { padding-top: clamp(48px, 5vw, 80px); }
.hero-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title evoke" "what cta";
  column-gap: 48px; row-gap: 14px; align-items: start;
}
.hero h1 {
  grid-area: title;
  font-size: min(clamp(2.05rem, 0.9rem + 3.4vw, 4.5rem), 9vw - 3px);
  line-height: 1.02; padding-top: 0.1em;
}
.hero .evoke {
  grid-area: evoke; justify-self: end; padding-top: clamp(4px, 1vw, 20px);
  font-family: var(--display); text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--gold); font-size: clamp(0.95rem, 0.8rem + 0.4vw, 1.2rem); font-weight: 600;
}
.hero-head .btn { grid-area: cta; justify-self: end; }
.hero .hero-what {
  grid-area: what; align-self: center; margin: 0;
  color: var(--white); font-size: clamp(0.98rem, 0.9rem + 0.25vw, 1.15rem); letter-spacing: 0.02em;
}
.hero .hero-what span { white-space: nowrap; }
.hero .hero-what span:not(:last-child)::after { content: "\00B7"; color: var(--gold); padding-inline: 0.45em 0.2em; }

/* Her units at up to their own size, the two 2x units a touch over it, scaled so the shelf line stays in
   the first screen; the lead stands in a 4:5 crop (its extra width is her own charcoal ground). */
.hero .stage { width: min(100% - 32px, var(--stage-max)); }
.hero-shelf .lead, .hero-shelf .x2 { --cap: 1.03px; }
.hero-shelf {
  margin-top: clamp(8px, 1vw, 16px);
  --u: clamp(0.6px, (100svh - 288px) / 484, 1.03px);
  justify-content: center;
  gap: clamp(12px, 1.25vw, 72px);
}
.hero .reticle-mark {
  position: absolute; left: 50%; bottom: -15px; width: 28px; height: 29px;
  transform: translateX(-50%); z-index: 1;
  background: var(--showroom); padding: 0 5px; box-sizing: content-box;
}
@media (max-width: 1099.98px) { .hero-shelf .wide { display: none; } }
/* From 2000px the shelf runs toward both screen edges: four more of her units join it (.xxl), the line's
   stage widens to the screen, and the lead and the bowl (her two 2x files) grow to 1.35 page pixels per
   source pixel, still under the 2 their files carry; every 1x unit stays at or under its own size. The
   shelf's scale still reads the viewport height, so the headline and the action stay in the first screen. */
@media (min-width: 2000px) {
  .hero .stage { width: calc(100% - 64px); max-width: none; }
  .hero-shelf {
    --u: clamp(0.6px, (100svh - 262px) / 484, 1.35px);
    justify-content: space-between;
    gap: clamp(12px, 1vw, 40px);
  }
  .hero-shelf .lead, .hero-shelf .x2 { --cap: 1.35px; }
}

/* ---------- Home: hello ---------- */

.hello .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.lexicon { display: grid; gap: 34px; padding-top: 8px; margin: 0; }
.entry dt { font-family: var(--display); color: var(--white); font-weight: 600; font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); letter-spacing: 0.02em; }
.entry .syl { color: var(--gold); }
.entry .say { font-family: var(--text); font-weight: 400; color: var(--muted); font-size: 1rem; letter-spacing: 0; margin-left: 0.4em; }
.entry .pos { font-family: var(--text); font-style: italic; font-weight: 400; color: var(--body); font-size: 1rem; letter-spacing: 0; margin-left: 0.3em; }
.entry dd { margin: 8px 0 0; max-width: 40ch; }
.hello h2 { font-size: clamp(2.25rem, 1.4rem + 3vw, 4rem); letter-spacing: 0.08em; margin-bottom: 26px; }
.hello .lead-copy { font-size: clamp(1.15rem, 1rem + 0.45vw, 1.375rem); color: var(--white); max-width: var(--measure); }
.hello .simple { margin-top: 28px; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.16em; color: var(--gold); font-weight: 600; }

/* ---------- The stages line (a neutral line with gold stops; the gold line is the shelf's alone) ---------- */

.stages ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); position: relative; }
.stages ol::before { content: ""; position: absolute; top: 14px; left: 0; right: 0; height: 1px; background: var(--hair); }
.step { position: relative; padding-top: 52px; container-type: inline-size; }
.step .stop { position: absolute; top: 9px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 6px var(--bg-here, var(--showroom)); }
/* Home: the four stages end at a finished unit of hers, standing on its own short line */
.stages-room { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(32px, 4vw, 72px); align-items: end; }
.stages-room .section-head { grid-column: 1 / -1; }
.stage-end { --u: 0.72px; justify-content: center; }
/* About: her three steps beside the store they ended in */
.process-room { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); gap: 40px clamp(36px, 6vw, 96px); align-items: center; }
.process-room picture { max-width: 750px; }
.process-room img { width: 100%; }
.process-unit { --u: 0.86px; justify-content: center; }
.step .stop.reticle { top: 0; left: -2px; width: 29px; height: 30px; border-radius: 0; background: var(--showroom) url("../../images/brand/reticle.png") center / contain no-repeat; }
/* "INSTALLATION" is about 9.6em in her face and tracking: a step heading never grows past its own column */
.step h3 { font-size: min(clamp(1.25rem, 1rem + 0.7vw, 1.6rem), 10cqi); margin-bottom: 12px; }
.step p { font-size: 1.0625rem; }

/* ---------- Home: categories ---------- */

.cat { display: grid; gap: clamp(28px, 4vw, 64px); }
.cat + .cat { margin-top: clamp(96px, 10vw, 160px); }
.cat-copy h3 { font-size: clamp(1.4rem, 1.05rem + 1vw, 2rem); margin-bottom: 16px; }
.cat-copy p { max-width: 46ch; }
.cat-copy .text-link { margin-top: 10px; }

.cat-pop { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
.cat-pop .shelf { justify-content: space-evenly; }

.cat-inshop .cat-copy { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.cat-inshop .cat-copy h3 { margin: 0; }
/* her six in-shop photographs on the content grid: one row exactly the text's width, every photograph the
   same height (each takes width in proportion to its own shape), tops and feet on shared lines */
.inshop-shelf { margin-top: clamp(40px, 5vw, 64px); gap: clamp(12px, 1.6vw, 24px); justify-content: flex-start; align-items: flex-start; }
.inshop-shelf .unit { flex: calc(var(--w) / var(--hgt)) 1 0; justify-content: flex-start; }

/* the two store photographs share one height (both 750x504) and each heading starts at its photo's edge */
.cat-rooms { --rooms-gap: clamp(20px, 2.5vw, 36px); margin-top: clamp(96px, 10vw, 160px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; column-gap: var(--rooms-gap); row-gap: 40px; }
.cat-rooms .rooms { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rooms-gap); align-items: start; }
.cat-rooms .rooms img { width: 100%; }

.run { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 48px); row-gap: clamp(32px, 4vw, 52px); position: relative; }
.run-group { display: contents; }
.run .shelf { grid-row: 1; grid-column: span 2; justify-content: space-evenly; --u: 0.94px; }
/* each unit stands centred over the heading it shows: the shelf splits on the same columns and gap as
   the headings under it */
@media (min-width: 761px) {
  .run .shelf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 48px); justify-items: center; }
  .run .shelf .unit { width: min(calc(var(--w) * var(--u)), 100%); }
}
.run .run-group:first-child .shelf { grid-column: 1 / 3; }
.run .run-group:last-child .shelf { grid-column: 3 / 5; }
.run .cat-copy { grid-row: 2; container-type: inline-size; }
/* the longest single word in these headings, "PROMOTIONAL", is about 8.4em wide in her face and tracking,
   so the heading never grows past what its own column can hold on one word */
.run .cat-copy h3 { font-size: min(clamp(1.4rem, 1.05rem + 1vw, 2rem), 11.5cqi); }

.cat-strip { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--hair); }
.cat-strip .cat-copy { display: contents; }
.cat-strip h3 { margin: 0; }
.cat-strip p { max-width: 56ch; }

/* ---------- The Focal Advantage ---------- */

.advantage ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
.advantage li { border-top: 1px solid var(--hair); padding-top: 26px; }
.advantage h3 { font-size: clamp(1.2rem, 1rem + 0.5vw, 1.45rem); margin-bottom: 12px; }

/* ---------- Logo wall: each of her logo files on a plate its own ink reads on ---------- */

/* Two plates, because no one ground carries both her black-ink and her white-ink files: the stone wall,
   then her white-ink logos as their own band on the dark plate, never mixed into the stone run. Rows
   centre, so a short last row sits in the middle rather than trailing off to one side. */
.wall {
  --wg: clamp(6px, 0.7vw, 10px);
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--wg);
}
.wall li {
  flex: 0 0 calc((100% - (var(--cols, 5) - 1) * var(--wg)) / var(--cols, 5));
  background: var(--plate-light); aspect-ratio: 339 / 158; display: flex; align-items: center; justify-content: center; padding: 0;
}
.wall + .wall { margin-top: var(--wg); }
.wall-dark li { background: var(--plate-dark); box-shadow: inset 0 0 0 1px var(--plate-dark-edge); }
@media (min-width: 1181px) { .clients .wall { --cols: 8; } }
.wall img { width: 88%; height: 84%; object-fit: contain; transition: transform 300ms var(--ease-out); }
.wall li:hover img { transform: scale(1.05); }
.wall-stage { width: min(100% - 2 * var(--gutter), var(--content)); margin-inline: auto; }
@media (min-width: 1800px) {
  .wall-stage { width: min(100% - 2 * var(--gutter), 2240px); }
  .wall { --cols: 8; }
}

/* ---------- Reviews (Home and FAQ) ---------- */

.reviews .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(36px, 6vw, 96px); align-items: start; }
.reviews .section-head { grid-column: 1 / -1; }
.rating { display: grid; gap: 10px; justify-items: start; }
.rating .word { font-family: var(--display); font-weight: 700; letter-spacing: 0.14em; color: var(--white); font-size: clamp(1.5rem, 0.9rem + 2vw, 3rem); }
.rating .stars { display: flex; gap: 4px; }
.rating .stars img { width: 26px; height: 26px; }
.rating .count strong { color: var(--white); font-weight: 600; }
.rating .g { width: 92px; height: auto; margin-top: 6px; }
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.quotes:has(> .quote:only-child) { grid-template-columns: minmax(0, 1fr); }
.quote { margin: 0; border-top: 1px solid var(--hair); padding-top: 24px; }
.quote .stars { display: flex; gap: 3px; margin-bottom: 14px; }
.quote .stars img { width: 18px; height: 18px; }
.quote blockquote { margin: 0; color: var(--white); font-size: clamp(1.3rem, 0.85rem + 1.2vw, 2rem); line-height: 1.4; }
.quote figcaption { margin-top: 16px; font-size: 0.95rem; color: var(--muted); }
.quote figcaption b { color: var(--body); font-weight: 600; }

/* ---------- Enquiry (Home) and the contact block ---------- */

.enquiry .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.enquiry h2 { font-size: clamp(1.9rem, 1.1rem + 2.4vw, 3.25rem); }
.enquiry .mark { width: 54px; height: auto; margin-bottom: 28px; }
.details { margin-top: 36px; display: grid; gap: 22px; font-style: normal; }
.details h2, .details h3 { font-size: 0.8125rem; letter-spacing: 0.18em; color: var(--gold); margin-bottom: 6px; }
.details a { color: var(--white); text-decoration: none; white-space: nowrap; }
.details a:hover { text-decoration: underline; }
.details p { line-height: 1.7; }
.form-note { color: var(--muted); font-size: 1rem; margin-bottom: 24px; max-width: 56ch; }

/* the generated form (build-contact-form), styled in the direction */
.cf-form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; }
.cf-form > * { grid-column: 1 / -1; }
.cf-field { display: grid; gap: 8px; margin: 0; }
.cf-form > .cf-field:nth-of-type(-n+4) { grid-column: auto; }
.cf-label { font-family: var(--display); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--white); }
.cf-input, .cf-textarea, .cf-form select {
  font: inherit; color: var(--white); background: var(--surface);
  border: 0; border-bottom: 1px solid var(--colour-grey-400); border-radius: 0;
  padding: 12px 14px; min-height: 48px; width: 100%;
  transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
.cf-textarea { min-height: 150px; resize: vertical; }
.cf-input:hover, .cf-textarea:hover { border-bottom-color: var(--body); }
.cf-input:focus, .cf-textarea:focus, .cf-form select:focus { outline: none; border-bottom: 2px solid var(--gold-action); background: #34333a; }
.cf-submit {
  justify-self: start; min-height: 52px; padding: 0 34px; border: 0; cursor: pointer;
  background: var(--gold-action); color: var(--on-gold);
  font-family: var(--display); font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  transition: background-color 200ms var(--ease-out);
}
.cf-submit:hover { background: var(--white); }
.cf-submit:active { transform: translateY(1px); }
.cf-submit:disabled { opacity: 0.6; cursor: progress; }
.cf-form p { margin: 0; }
.cf-status { color: var(--body); font-size: 1rem; }
.cf-status a { color: var(--gold-action); }

/* ---------- Inner pages: the page head ---------- */

.page-head { padding-block: clamp(36px, 5vw, 72px) clamp(40px, 5vw, 72px); }
.page-head h1 { font-size: clamp(2.4rem, 1rem + 5vw, 5.5rem); line-height: 1; }
.page-head .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 48px; align-items: start; }
.page-head .wrap.stack { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.page-head .stack .jump { grid-template-columns: repeat(var(--jc, 2), minmax(0, 1fr)); max-width: 1100px; }
.jump { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--jc, 2), auto); column-gap: 32px; }
.jump a { font-family: var(--display); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--body); display: inline-flex; align-items: center; min-height: 40px; white-space: nowrap; }
.jump a:hover { color: var(--gold-action); }

/* ---------- Portfolio ---------- */

.pf-head { padding-block: clamp(32px, 4vw, 56px) 0; }
.pf-head .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 48px; align-items: start; }
.pf-head h1 { font-size: clamp(2.4rem, 1rem + 5vw, 5.5rem); line-height: 1; }
.pf-index { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, auto); column-gap: 32px; }
.pf-index a { font-family: var(--display); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--body); display: inline-flex; align-items: center; min-height: 40px; white-space: nowrap; }
.pf-index a:hover { color: var(--gold-action); }

.pf-label { display: flex; align-items: baseline; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 40px); }
.pf-label h2 { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); }

.pf-pop { padding-block: clamp(36px, 4vw, 56px) clamp(80px, 9vw, 136px); }
.gondola { display: grid; gap: clamp(56px, 6vw, 96px); }
.gondola .shelf { justify-content: center; gap: clamp(20px, 3vw, 80px); }
.gondola .tier-1 { --u: min(1px, calc((100svh - 330px) / 478)); }

.pf-inshop .grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.pf-inshop .grid .pf-label { margin: 0; display: block; align-self: start; }
.pf-inshop .grid .pf-label h2 { margin-bottom: 18px; }
.pf-inshop { padding-top: clamp(24px, 3vw, 48px); }
.pf-inshop .tiers { display: grid; gap: clamp(48px, 5vw, 80px); }
.pf-inshop .shelf { --u: 1px; justify-content: space-evenly; gap: clamp(16px, 2.4vw, 48px); }

.pf-rooms .pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); width: min(100% - 2 * var(--gutter), var(--content)); margin-inline: auto; }
.pf-rooms .pair img { width: 100%; }
@media (min-width: 1680px) { .pf-rooms .pair { width: min(100% - 2 * var(--gutter), 1528px); } }

/* each group's heading leads its own shelf: close to the units it names, far from the block above */
.pf-run .run { row-gap: 8px; }
.pf-run .run .shelf { --u: 1px; grid-row: 2; }
.pf-run .group-label { grid-row: 1; grid-column: span 2; }
.pf-run .group-label h2 { font-size: clamp(1.2rem, 1rem + 0.7vw, 1.6rem); }
.pf-run .run-group:first-child .group-label { grid-column: 1 / 3; }
.pf-run .run-group:last-child .group-label { grid-column: 3 / 5; }

.pf-clients .wall { --cols: 7; }
@media (min-width: 1800px) { .pf-clients .wall { --cols: 8; } }
/* Portfolio's ten white-ink logos close the wall as one band of two full rows of five, each plate the
   same size as the stone ones above it */
@media (min-width: 1181px) {
  .pf-clients .wall-dark {
    width: calc((100% - (var(--cols) - 1) * var(--wg)) / var(--cols) * 5 + 4 * var(--wg));
    margin: clamp(20px, 2.4vw, 36px) auto 0;
  }
  .pf-clients .wall-dark li { flex-basis: calc((100% - 4 * var(--wg)) / 5); }
}

/* the closing call to action on inner pages */
/* every unit of hers already stands above on this page, so the enquiry closes on her words and her
   contacts: the action on the left, her phones and mail on the right, feet on one line */
.pf-cta .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px clamp(36px, 6vw, 96px); align-items: start; }
.pf-cta-copy { display: grid; gap: 24px; justify-items: start; }
.pf-cta .mark { width: 54px; height: auto; }
.pf-cta h2 { font-size: clamp(1.9rem, 1rem + 3.2vw, 4.5rem); max-width: 16ch; }
.pf-cta .details { margin-top: 0; grid-template-columns: minmax(0, 1fr); }
.cta-band .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.cta-band h2 { font-size: clamp(1.6rem, 1rem + 1.8vw, 2.6rem); max-width: 22ch; }

/* The closing band is not the same band on every page. Products and Promotional Products close on her
   store interior at no more than its own 750px (one with the photograph leading, one with it trailing);
   About and FAQ close on a short shelf of her units. */
.cta-band .wrap.cta-room { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(36px, 6vw, 96px); align-items: center; }
.cta-band .wrap.cta-room.copy-first { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.cta-room picture { max-width: 750px; }
.cta-room img { width: 100%; }
.cta-copy { display: grid; gap: 28px; justify-items: start; }
.cta-band .wrap.cta-units { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(36px, 6vw, 96px); align-items: center; }
.cta-band .wrap.cta-units.copy-first { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.cta-units .shelf { --u: 0.86px; justify-content: space-evenly; }
.cta-band .wrap.cta-row { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: clamp(32px, 4vw, 56px); }
.cta-row .cta-copy { justify-items: center; }
.cta-row h2 { max-width: 26ch; }
.cta-row .shelf { --u: 0.72px; width: 100%; justify-content: space-evenly; }

/* ---------- Products: her twelve formats ---------- */

.formats { padding-block: 0 clamp(72px, 9vw, 136px); }
.format { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; padding-block: clamp(56px, 7vw, 104px); border-top: 1px solid var(--hair); }
.format:first-child { border-top: 0; }
.format h2 { font-size: clamp(1.5rem, 1.05rem + 1.4vw, 2.4rem); margin-bottom: 18px; }
.format p { max-width: var(--measure); }
.format .shelf { justify-content: space-evenly; --u: 1px; margin-top: 8px; }
.format.flip > .format-copy { order: 2; }
/* a single photograph starts on the column's edge, the grid line the text beside it keys to */
.format .shelf:has(> .unit:only-child) { justify-content: flex-start; }
.format.plain { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.format.plain h2 { margin: 0; }
.format-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 96px); }
/* align-content: start, so the shorter of the two never spreads its spare height between its heading and
   its paragraph (the two paragraphs start on one line) */
.format-pair .format { grid-template-columns: minmax(0, 1fr); border-top: 0; padding-block: 0; gap: 0; align-content: start; }
.format-pair .format h2 { margin-bottom: 18px; }
.formats .band { padding-block: clamp(64px, 8vw, 112px); margin-block: 0; }

/* ---------- Promotional Products: her sixteen items as an index ---------- */

.promo-index { --jc: 4; }
.promo-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(40px, 7vw, 120px); }
.promo-list > li { border-top: 1px solid var(--hair); padding-block: 30px 40px; }
.promo-list h2 { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); margin-bottom: 14px; }
.promo-list p { max-width: var(--measure); }

/* the page head: her title and her index, with a shelf of her units standing beside them */
/* her title runs the width; her units stand beside the index, their tops level with its first name */
.page-head .wrap.promo-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "title title" "index units"; gap: 28px clamp(32px, 5vw, 80px); align-items: start; }
/* "PROMOTIONAL" is about 8.6em in her face and tracking: the title is sized to the column it sits in */
.page-head .wrap.promo-head { container-type: inline-size; }
.promo-head h1 { grid-area: title; font-size: min(clamp(2.4rem, 1rem + 5vw, 5.5rem), 6.2cqi); }
@media (max-width: 1180px) { .promo-head h1 { font-size: min(clamp(2.4rem, 1rem + 5vw, 5.5rem), 11cqi); } }
.promo-head .jump { grid-area: index; grid-template-columns: repeat(var(--jc), minmax(0, 1fr)); }
.promo-head .promo-lead { grid-area: units; align-self: start; justify-content: space-evenly; }
.promo-head .promo-index { --jc: 2; column-gap: 32px; }

/* her items as one index: the name on the left, her paragraph on the right; a name she wrote no paragraph
   for sits as a name, the way it would in a printed index */
.promo-list.index { grid-template-columns: minmax(0, 1fr); }
.promo-list.index > li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 12px clamp(32px, 5vw, 80px); align-items: baseline; padding-block: 26px 30px; }
.promo-list.index h2 { margin: 0; }
.promo-list.index > li:not(:has(p)) { padding-block: 22px; }
.promo-list.index > li.pic { align-items: start; }
.promo-list .promo-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px clamp(28px, 4vw, 56px); align-items: start; }
.promo-list .promo-body .shelf { --u: 0.9px; justify-content: center; min-width: 200px; }

/* ---------- About ---------- */

.about-intro .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.about-intro h1 { font-size: clamp(2.1rem, 1rem + 3.6vw, 4.25rem); line-height: 1.04; margin-bottom: clamp(24px, 3vw, 40px); }
.about-intro p { font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3rem); max-width: var(--measure); }
.about-intro picture img { width: 100%; }
.mv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 6vw, 96px); }
.mv > div { border-top: 1px solid var(--hair); padding-top: 26px; }
.mv h2 { font-size: clamp(1.4rem, 1.05rem + 1vw, 2rem); margin-bottom: 16px; }
.mv p { font-size: clamp(1.125rem, 1rem + 0.35vw, 1.3rem); color: var(--white); max-width: 52ch; }
.process { --bg-here: var(--showroom); }
.team .people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; gap: clamp(20px, 3vw, 48px); }
.team .people img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1); }
.team .people h3 { margin-top: 20px; font-size: clamp(1.3rem, 1.05rem + 0.6vw, 1.7rem); }
.team .people p { color: var(--gold); font-family: var(--display); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.875rem; font-weight: 600; margin-top: 6px; }
.team .section-head { flex-direction: column; align-items: start; }
.team .section-head p { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.16em; color: var(--gold); font-weight: 600; font-size: 0.9rem; }

/* ---------- FAQ ---------- */

.faq-head .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.faq-head h1 { font-size: clamp(2.2rem, 1rem + 4vw, 4.75rem); line-height: 1.02; }
.faq-head .shelf { justify-content: space-evenly; --u: 0.84px; }
.faq-body .wrap { max-width: 980px; }
.se-faq { display: grid; gap: 0; }
.se-faq h2 { display: none; }
.se-faq__item { border-top: 1px solid var(--hair); }
.se-faq__item:last-child { border-bottom: 1px solid var(--hair); }
.se-faq__q {
  list-style: none; cursor: pointer; display: flex; align-items: start; justify-content: space-between; gap: 24px;
  padding: 24px 0; min-height: 48px;
  font-family: var(--display); font-weight: 600; color: var(--white); font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem); letter-spacing: 0.02em; line-height: 1.35;
}
.se-faq__q::-webkit-details-marker { display: none; }
.se-faq__q::after { content: "+"; flex: none; font-family: var(--text); font-weight: 400; color: var(--gold); font-size: 1.6rem; line-height: 1; transition: transform 260ms var(--ease-out); }
.se-faq__item[open] > .se-faq__q::after { transform: rotate(45deg); }
.se-faq__q:hover { color: var(--gold-action); }
.se-faq__a { padding: 0 0 28px; max-width: var(--measure); }
.se-faq__a p + p { margin-top: 12px; }

/* ---------- Contact ---------- */

.contact-top .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
/* "CONTACT US" is about 6.9em in her face and tracking: sized to its own column, it always sits on one line */
.contact-top .wrap > div:first-child { container-type: inline-size; }
.contact-top h1 { font-size: min(clamp(2.4rem, 1rem + 5vw, 5.5rem), 13.5cqi); line-height: 1; white-space: nowrap; }
.contact-top .details { margin-top: clamp(28px, 4vw, 48px); }
.contact-top picture img { width: 100%; }
.contact-form .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.contact-form h2 { font-size: clamp(1.9rem, 1.1rem + 2.4vw, 3.25rem); margin-bottom: 20px; }
.contact-form .mark { width: 54px; height: auto; margin-bottom: 28px; }

/* ---------- Footer ---------- */

.site-footer { background: var(--deep); padding-block: clamp(56px, 7vw, 96px) 36px; }
/* three columns that close at about the same depth: her mark, the two actions and her address; the pages; her phones and mail */
.foot-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3.4fr); gap: 40px; }
.foot-loc { margin-top: 28px; }
.foot-grid .foot-logo { height: 48px; width: auto; }
.foot-grid h3 { font-size: 0.8125rem; letter-spacing: 0.18em; color: var(--gold); margin-bottom: 14px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.foot-grid a { color: var(--body); text-decoration: none; display: inline-block; padding-block: 6px; }
.foot-grid a:hover { color: var(--white); }
.foot-cta { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 22px; }
.foot-cta a { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; color: var(--white); font-size: 0.875rem; }
.copyright { margin-top: 56px; padding-top: 24px; border-top: 1px solid #2f2e2c; font-size: 0.9rem; color: var(--muted); }
.credit { margin-top: 8px; font-size: 0.8rem; color: var(--muted); }
.credit-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.credit-link:hover, .credit-link:focus-visible { color: var(--colour-primary-hover, #c5a860); }

/* ---------- Narrower screens ---------- */

@media (max-width: 1180px) {
  .cat-pop { grid-template-columns: minmax(0, 1fr); }
  .reviews .wrap, .enquiry .wrap, .hello .wrap, .contact-form .wrap { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid > div:first-child { grid-column: 1 / -1; }
  .wall, .pf-clients .wall { --cols: 4; }
  .pf-inshop .grid { grid-template-columns: minmax(0, 1fr); }
  .pf-inshop .grid .pf-label { position: static; }
  .promo-index { --jc: 3; }
  .page-head .wrap.promo-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "units" "index"; }
  .promo-head .promo-lead { width: min(100%, 760px); justify-self: center; }
}

@media (max-width: 960px) {
  .format, .format.plain, .format-pair, .about-intro .wrap, .faq-head .wrap, .contact-top .wrap { grid-template-columns: minmax(0, 1fr); }
  .format.flip > .format-copy { order: 0; }
  .promo-list { grid-template-columns: minmax(0, 1fr); }
  .promo-list.index > li { grid-template-columns: minmax(0, 1fr); }
  .promo-list .promo-body { grid-template-columns: minmax(0, 1fr); }
  .team .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-head .wrap { grid-template-columns: minmax(0, 1fr); }
  .promo-index { --jc: 2; }
}

/* 761-1000: her four categories in the run go two across (each pair under its own shelf), so
   "PROMOTIONAL" has a column it fits in; the hero's line moves under the headline */
@media (min-width: 761px) and (max-width: 1000px) {
  .run { grid-template-columns: minmax(0, 1fr); row-gap: clamp(56px, 7vw, 80px); }
  .run-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 48px); row-gap: clamp(28px, 4vw, 44px); }
  .run .shelf, .run .run-group:first-child .shelf, .run .run-group:last-child .shelf { grid-row: auto; grid-column: 1 / -1; column-gap: clamp(24px, 4vw, 48px); }
  .run .cat-copy { grid-row: auto; }
  .pf-run .group-label, .pf-run .run-group:first-child .group-label, .pf-run .run-group:last-child .group-label { grid-row: auto; grid-column: 1 / -1; }
}
@media (min-width: 761px) and (max-width: 960px) {
  .hero-head { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title title" "evoke evoke" "what cta"; }
  .hero .evoke { justify-self: start; padding-top: 0; }
}

/* an inner page's title and its index share a row only where both fit; below that the index sits under it */
@media (max-width: 1240px) { .page-head .wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
@media (max-width: 960px) { .pf-head .wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

@media (max-width: 760px) {
  body { font-size: 1.0625rem; }
  :root { --head-h: 72px; }
  .brand img, .foot-grid .foot-logo { height: 36px; }

  /* hero: headline, her line and the one action first, then the lead unit fills the column in its 4:5
     crop, then her other units two across */
  .hero { padding-top: 20px; padding-bottom: 48px; }
  .hero-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "evoke" "what" "cta"; row-gap: 12px; }
  .hero .evoke { justify-self: start; padding-top: 0; font-size: 0.95rem; }
  .hero-head .btn { justify-self: stretch; margin-top: 8px; }

  /* every shelf becomes rows of two, each unit standing on its own run of the gold line */
  .shelf, .gondola .shelf {
    display: grid; grid-template-columns: 1fr 1fr; gap: 28px 0;
    margin-inline: calc(-1 * var(--gutter));
  }
  .stage, .hero .stage { width: 100%; }
  .stage > .shelf, .stage.gondola .shelf { margin-inline: 0; }
  .shelf::after { display: none; }
  .unit { align-items: center; border-bottom: 1px solid var(--gold); padding: 10px 10px 16px; }
  .shelf.flat .unit { border-bottom: 0; padding-bottom: 0; }
  .shelf { padding-bottom: 0; }
  .unit picture { width: calc(var(--w) * 0.5px); max-width: 100%; }
  .unit.solo, .shelf:not(.hero-shelf) .unit:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .hero-shelf { margin-top: 24px; }
  .hero-shelf .lead { order: -1; grid-column: 1 / -1; padding: 0; }
  .hero-shelf .lead picture { width: 100%; }
  .gondola { gap: 28px; }

  .cat-rooms, .cat-rooms .rooms, .cat-inshop .cat-copy, .cat-strip, .advantage ul, .quotes, .stages ol, .cf-form, .pf-rooms .pair, .mv, .team .people { grid-template-columns: minmax(0, 1fr); }
  .cf-form > .cf-field:nth-of-type(-n+4) { grid-column: 1 / -1; }
  .cta-band .wrap.cta-room, .cta-band .wrap.cta-room.copy-first, .cta-band .wrap.cta-units, .cta-band .wrap.cta-units.copy-first { grid-template-columns: minmax(0, 1fr); }

  /* complete rows on a phone. Portfolio's first tier: the tree (her 2x file) leads across the row, then
     her other four units in pairs. Its In-Shop Branding: both rows of three run as one grid of six, in
     pairs, with no line under any (half of them are store photographs). */
  .gondola .tier-1 .unit.feature { order: -1; grid-column: 1 / -1; }
  .gondola .tier-1 .unit.feature picture { width: min(100%, 295px); }
  .gondola .tier-1:not(.hero-shelf) .unit:last-child { grid-column: auto; }
  .pf-inshop .tiers { grid-template-columns: 1fr 1fr; gap: 28px 0; margin-inline: calc(-1 * var(--gutter)); }
  .pf-inshop .tiers > .shelf { display: contents; }
  .pf-inshop .tiers .shelf:not(.hero-shelf) .unit:last-child { grid-column: auto; }
  .pf-inshop .tiers .unit { border-bottom: 0; }
  /* the logo walls: six tracks, each plate two wide, and a short last row's plates widen to close it */
  .wall-stage { container-type: inline-size; }
  .wall, .pf-clients .wall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: calc((100cqi - 2 * var(--wg)) / 3 * 158 / 339); }
  .wall li { grid-column: span 2; aspect-ratio: auto; }
  .wall li:last-child:nth-child(3n+1) { grid-column: span 6; }
  .wall li:nth-last-child(2):nth-child(3n+1), .wall li:last-child:nth-child(3n+2) { grid-column: span 3; }
  /* Products' twelve formats: one name per line, never a ragged wrap */
  .page-head .jump:not(.promo-index) { display: grid; grid-template-columns: minmax(0, 1fr); }
  .run { grid-template-columns: minmax(0, 1fr); }
  .run-group { display: grid; gap: 28px; }
  .run-group + .run-group { margin-top: 32px; }
  .run .shelf, .pf-run .run .shelf, .pf-run .group-label { grid-row: auto; grid-column: auto !important; }
  .pf-run .run-group { gap: 12px; }
  .pf-run .run-group + .run-group { margin-top: 72px; }
  .run .cat-copy { grid-row: auto; }

  .stages ol { gap: 34px; padding-left: 44px; }
  .stages ol::before { top: -12px; bottom: -12px; left: 14px; right: auto; width: 1px; height: auto; }
  .step { padding-top: 0; }
  .step .stop { left: -35px; top: 8px; }
  .step .stop.reticle { left: -44px; top: 0; }

  .wall, .pf-clients .wall { --cols: 3; }
  .pf-head .wrap { grid-template-columns: minmax(0, 1fr); }
  /* a page index on a phone runs as one wrapped line of names, each name whole, never a two-column grid
     of half-wrapped labels */
  .pf-index, .jump, .page-head .wrap.promo-head .jump { display: flex; flex-wrap: wrap; gap: 0 22px; }
  .pf-index a, .jump a, .promo-head .jump a { white-space: nowrap; min-height: 44px; padding-block: 0; }
  .pf-cta .wrap { grid-template-columns: minmax(0, 1fr); }
  .pf-cta .details { grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
  .stages-room, .process-room { grid-template-columns: minmax(0, 1fr); }
  .stage-end { margin-top: 12px; }
  .team .people { max-width: 420px; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}