/* ==========================================================================
   BOALD — Section types
   One block per section type in the catalogue (styleguide.html). Layout only:
   text size comes from the text styles in base.css, text colour from the
   section's data-theme. No section sets a font-size or a fixed text colour.

   Shared parts      .section-head · .card-grid / .card · .section-note
   Section types     .hero · .split · .rows · .works · .testi · .statement
                     .steps · .numbers · .prose-block · .quote-block · .cta
   Rules and the Webflow mapping: README.md in this folder's parent.
   ========================================================================== */

/* ==========================================================================
   SHARED PARTS
   ========================================================================== */

/* Content width: one for every section, set on .padding-global in base.css. No section, row or list sets its own width (CEO, 2026-10-12) */

/* ---- Section head: eyebrow, title, optional lead -------------------------- */
.section-head { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; }
.section-head > .text-h2,
.section-head > h2 { margin-top: clamp(0.75rem, 1.4vw, 1.25rem); }
.section-head > .text-lead { margin-top: var(--sp-lg); }
/* centred head (statements, feature rows) */
.section-head--center { align-items: center; text-align: center; max-width: 1180px; margin-inline: auto; }
.section-head--center > .text-lead { max-width: calc((100% - var(--gap-columns)) * 2 / 3); }
/* head in the right two thirds (About "Who we are") */
.section-head--right { width: calc((100% - var(--gap-columns)) * 2 / 3); margin-left: auto; }
@media (max-width: 991px) {
  .section-head--center > .text-lead { max-width: var(--measure-lead); }
  .section-head--right { width: auto; margin-left: 0; }
}
.section-head--right > .text-eyebrow + .text-lead { margin-top: clamp(1.75rem, 3vw, 2.75rem); }
.section-head--right > .text-lead + .text-lead { margin-top: 1.35em; }

/* ---- Cards ----------------------------------------------------------------- */
.card-grid { position: relative; z-index: 1; display: grid; gap: var(--gap-card); align-items: stretch; }
.card-grid--stack { grid-template-columns: minmax(0, 1fr); }
.card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* an odd last card spans the row (five cards in a two- or four-column grid) */
.card-grid--2 > .card:last-child:nth-child(odd),
.card-grid--4 > .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* four across only from Webflow's 1920 breakpoint: below it a quarter column is too narrow to read (about 23 characters a line at 1728) */
@media (min-width: 1920px) {
  .card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* tablet: four-card grids stay two per row; two- and three-card grids go to one column (Quinn, 2026-10-08) */
@media (max-width: 991px) {
  .card-grid--2, .card-grid--3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .card-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* icon (optional) and title from the top, body pinned to the bottom */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  min-height: clamp(18rem, 26vw, 26rem);
  padding: clamp(1.75rem, 3vw, 3rem);
  background: var(--bg-lift);
  border-radius: var(--radius-lg);
}
[data-theme="dark"] .card { background: var(--c-ink-panel); }
.card > .text-h3 { max-width: 18ch; }
.card > .text-body { margin-top: auto; padding-top: var(--sp-lg); }
.card__icon { display: block; width: clamp(4.5rem, 7vw, 6.5rem); height: auto; margin: 0 0 var(--sp-lg) -0.35rem; }
/* compact card: no minimum height (labels, phases) */
.card--compact { min-height: 0; }
.card--compact > .text-body { margin-top: 0; padding-top: 0; }
@media (max-width: 991px) {
  .card { min-height: 0; }
}

/* ==========================================================================
   BENTO — title card + four cards + two photos (Home "Why us", bento version)
   desktop 3 columns · tablet 2 · phone 1
   ========================================================================== */
.bento { padding-top: calc(var(--section-pad-block) * 0.5); padding-bottom: calc(var(--section-pad-block) * 1.3); }
.bento__grid { position: relative; z-index: 1; display: grid; gap: var(--gap-card); grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "head head p1" "c1 c2 p1" "p2 c3 c4"; }
.bento__head { grid-area: head; }
.bento__c1 { grid-area: c1; }
.bento__c2 { grid-area: c2; }
.bento__c3 { grid-area: c3; }
.bento__c4 { grid-area: c4; }
.bento__p1 { grid-area: p1; }
.bento__p2 { grid-area: p2; }
.bento__photo { position: relative; overflow: hidden; min-height: 18rem; border-radius: var(--radius-lg); background: var(--bg-lift); }
.bento__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 991px) {
  .bento__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "head head" "c1 c2" "p1 p1" "c3 c4" "p2 p2"; }
  .bento__photo { min-height: 0; aspect-ratio: 3 / 2; }
}
@media (max-width: 767px) {
  .bento__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "c1" "p1" "c2" "c3" "p2" "c4"; }
}

/* ---- Bento variant: bento--offset (Home "How we help", index-v2) ----------
   head: eyebrow alone in column 1, statement and button in columns 2–3
   cards ". c1 c2" / "c3 c4 p1", both rows the same height; the picture fills its cell
   each card: line icon, fixed empty space, rule, title, one-line description. The space
   above the rule is fixed, so the rule sits at the same height in every card */
.bento.bento--offset { padding-block: calc(var(--section-pad-block) * 0.6); }
.bento__top { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap-card); row-gap: var(--sp-xl); margin-bottom: clamp(3rem, 6vw, 5.5rem); }
.bento__intro { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap-card); align-items: start; }
.bento__statement { grid-column: 2 / 4; }
.text-lead.bento__statement { margin-top: 0; }
.bento__cta { grid-column: 2 / 4; justify-self: start; }
.bento__grid.bento__grid--offset { grid-template-areas: ". c1 c2" ". c3 c4"; grid-template-rows: 1fr 1fr; }
.card.bento__card { min-height: 0; gap: 0; }
.bento__icon { display: block; flex: none; width: 40px; height: 40px; color: var(--text-muted); }
.bento__art { display: block; flex: none; width: auto; max-width: 100%; height: clamp(6rem, 9vw, 8.5rem); object-fit: contain; object-position: left bottom; margin-bottom: calc(clamp(2.5rem, 4.5vw, 4.5rem) + var(--sp-lg)); }
.bento__rule { flex: none; width: 100%; height: 1px; margin: clamp(2.5rem, 4.5vw, 4.5rem) 0 var(--sp-lg); border: 0; background: var(--border-subtle); }
/* reveal card: eyebrow + title; on hover or keyboard focus the card turns dark, the sketch folds away
   and the paragraph shows. Hover/focus-within on the card styling its children is Webflow custom code */
/* layout never changes on hover (no jump): the card has a fixed minimum height, the sketch is
   positioned in its middle (out of flow), and the text sits at the bottom. On hover the sketch fades
   and the paragraph opens (grid rows 0fr → 1fr) under the title, pushing eyebrow and title up */
.card.bento__card--reveal { position: relative; display: grid; grid-template-rows: 1fr 1fr; overflow: hidden; outline: none; min-height: clamp(31rem, 36vw, 36rem); --bento-pad: clamp(1.75rem, 3vw, 3rem); transition: background-color 0.5s var(--ease-out); }
/* eyebrow in the top half; title and paragraph start at the card's midline */
.bento__artwrap { position: relative; min-height: 0; }
.bento__card--reveal .bento__art { position: absolute; left: 0; top: 50%; height: clamp(7rem, 10vw, 10rem); max-width: 100%; margin: 0; object-position: left center; transform: translateY(-50%); transition: opacity 0.4s var(--ease-out), transform 0.6s var(--ease-out); }
.bento__text { position: relative; display: flex; flex-direction: column; align-self: start; }
.text-h3-feature.bento__title { max-width: none; margin-top: 0; }
.bento__label { position: relative; z-index: 1; align-self: start; }
.bento__morewrap { display: grid; grid-template-rows: 1fr; }
/* the paragraph shows in every state; eyebrow → title and title → paragraph share one gap (--sp-lg) */
.text-body.bento__more { min-height: 0; overflow: hidden; margin-top: 0; padding-top: var(--sp-lg); }
.card.bento__card--reveal:hover, .card.bento__card--reveal:focus-within { background: var(--c-ink); --text-strong: var(--c-cream-100); --text-body: var(--c-cream-88); --text-muted: var(--c-cream-64); --eyebrow-color: var(--c-sand-soft); }
.bento__card--reveal:hover .bento__art, .bento__card--reveal:focus-within .bento__art { opacity: 0; transform: translateY(calc(-50% - 1rem)); }
.bento__card--reveal:focus-visible { box-shadow: 0 0 0 2px var(--c-sand-deep); }
@media (prefers-reduced-motion: reduce) { .bento__card--reveal, .bento__card--reveal .bento__art, .bento__morewrap, .bento__more { transition: none; } }
/* on a dark section the hover inverts to light; the ink sketches are inverted to read on the dark card */
[data-theme="dark"] .card.bento__card--reveal:hover, [data-theme="dark"] .card.bento__card--reveal:focus-within { background: var(--c-paper); --text-strong: var(--c-ink-100); --text-body: var(--c-ink-88); --text-muted: var(--c-ink-64); --eyebrow-color: var(--c-sand-text); }
[data-theme="dark"] .bento__art { filter: invert(0.6); }
.bento__card--reveal:focus-visible { box-shadow: 0 0 0 2px var(--c-sand-deep); }
@media (prefers-reduced-motion: reduce) { .bento__card--reveal, .bento__card--reveal .bento__art, .bento__text, .bento__more { transition: none; } }
.text-body.bento__desc { margin-top: var(--sp-sm); padding-top: 0; }
.bento__photo.bento__photo--fill { min-height: 0; }
/* closing card in the picture cell: darker ground, title, one sentence, button at the bottom */
/* closing band after the cards: full screen width, black-and-white photo under an ink veil, copy in the content width */
/* clip-path clips the fixed photo to the band, so the band reveals a picture that stays still */
.bento__band { position: relative; overflow: hidden; isolation: isolate; clip-path: inset(0); margin-top: calc(var(--section-pad-block) * 0.6); height: 50vh; height: 50svh; background: var(--c-ink-deep); --text-strong: var(--c-cream-100); --text-body: var(--c-cream-88); }
.bento__band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(25, 24, 24, 0.85) 0%, rgba(25, 24, 24, 0.6) 55%, rgba(25, 24, 24, 0.45) 100%); }
.bento__band .bento__ctaimg { position: fixed; inset: 0; height: 100vh; }
/* the copy is fixed to the screen like the photo; the band reveals both. When the band is a third on screen,
   motion.js adds .is-in (component behaviour): the title opens like a curtain, then the sentence and button fade up */
.bento__bandinner { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--sp-md); }
.bento__bandtitle { clip-path: inset(0 0 100% 0); transform: translateY(1.5rem); transition: clip-path 1s var(--ease-in-out), transform 1s var(--ease-out); }
.bento__bandline { opacity: 0; transform: translateY(1rem); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.bento__band.is-in .bento__bandtitle { clip-path: inset(0 0 -10% 0); transform: none; }
.bento__band.is-in .bento__bandline { opacity: 1; transform: none; transition-delay: 0.55s; }
.bento__band.is-in .bento__cardcta.bento__bandline { transition-delay: 0.7s; }
@media (prefers-reduced-motion: reduce) { .bento__bandtitle, .bento__bandline { clip-path: none; opacity: 1; transform: none; transition: none; } }
.bento__bandinner .bento__desc.bento__bandline + .bento__cardcta.bento__bandline { margin-top: var(--sp-md); }
.card.bento__card--cta { position: relative; overflow: hidden; isolation: isolate; min-height: clamp(20rem, 26vw, 26rem); background: var(--c-ink-deep); --text-strong: var(--c-cream-100); --text-body: var(--c-cream-88); }
.bento__ctaimg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(0.9); }
.card.bento__card--cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(25, 24, 24, 0.85) 0%, rgba(25, 24, 24, 0.6) 55%, rgba(25, 24, 24, 0.45) 100%); }
.bento__cardcta { margin-top: auto; align-self: flex-start; }
.text-body.bento__desc + .bento__cardcta { margin-top: auto; }
.bento__card--cta .bento__desc { margin-bottom: var(--sp-xl); }
@media (max-width: 991px) {
  .bento__top { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-lg); }
  .bento__intro { grid-template-columns: minmax(0, 1fr); row-gap: clamp(0.75rem, 1.4vw, 1.25rem); }
  .bento__statement { grid-column: auto; }
  .bento__cta { grid-column: auto; }
  .bento__grid.bento__grid--offset { grid-template-areas: "c1 c2" "c3 c4"; grid-template-rows: 1fr 1fr; }
  .bento__photo.bento__photo--fill { aspect-ratio: 16 / 9; }
}
@media (max-width: 767px) {
  .bento__grid.bento__grid--offset { grid-template-areas: "c1" "c2" "c3" "c4"; grid-template-rows: repeat(4, auto); }
}

/* ==========================================================================
   OFFERS — section head, then full-width link rows (Home v2 "Ways to work with us")
   each row: name, paragraph, eyebrow line on the left, Lucide square-arrow-right on the right; very light rules
   between rows, edge to edge of the screen, that keep their colour on hover.
   Each row has its own sand step as a full-width band (offers__row--1 to --4); hover moves the arrow
   ========================================================================== */
.offers { overflow-x: clip; }
.offers__list { position: relative; z-index: 1; margin-top: clamp(3rem, 6vw, 5.5rem); --offers-rule: color-mix(in srgb, var(--border-subtle) 50%, transparent); }
.offers__row { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name arrow"; align-items: center; gap: var(--sp-md) var(--gap-columns); padding-block: clamp(2.5rem, 4.5vw, 4rem); color: inherit; text-decoration: none; outline: none; }
/* the white fill runs edge to edge: centred on the row, one screen wide */
.offers__row::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--offers-bg, transparent); transition: background-color var(--dur-med) var(--ease-out); }
/* hover and focus fade the band to white; leaving fades it back the same way */
.offers__row:hover::before, .offers__row:focus-visible::before { background-color: var(--c-white); }
.offers__row.offers__row--plain:hover::before { background-color: transparent; }
/* one sand step per row, lightest first; the eyebrow uses ink-64 because --c-sand-text is under 3:1 on the darker steps */
.offers__row.offers__row--1 { --offers-bg: var(--c-paper-lift); }
.offers__row.offers__row--2 { --offers-bg: color-mix(in srgb, var(--c-paper-lift) 66%, var(--c-sand-soft)); }
.offers__row.offers__row--3 { --offers-bg: color-mix(in srgb, var(--c-paper-lift) 33%, var(--c-sand-soft)); }
.offers__row.offers__row--4 { --offers-bg: var(--c-sand-soft); }
.offers__row { --eyebrow-color: var(--c-ink-64); }
/* content holds the left two-thirds (same width as the How we help 2×2 cards); the colour band stays full width */
@media (min-width: 992px) { .offers__row { padding-right: calc((100% + var(--gap-card)) / 3); } }
.offers__row:focus-visible { box-shadow: inset 0 0 0 2px var(--c-sand-deep); }
.offers__name { grid-area: name; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-sm); min-width: 0; }
.text-body.offers__body { margin-top: var(--sp-xs); }
/* fill: none beats base.css svg { fill: currentColor }, so the icon stays outlined */
.offers__arrow { grid-area: arrow; display: block; width: 74px; height: 74px; fill: none; color: var(--text-strong); transition: transform var(--dur-fast) var(--ease-out); }
.offers__arrowbox { stroke: var(--text-faint); }
/* custom code in Webflow: the row's hover and focus move its arrow and show the ::before fill */
.offers__row:hover .offers__arrow, .offers__row:focus-visible .offers__arrow { transform: translateX(6px); }
/* row as a button (2026-10-15): reset the button so it looks like the link row it replaced */
.offers__row { width: 100%; margin: 0; border: 0; font: inherit; text-align: left; background: none; cursor: pointer; }
.offers__row.offers__row--plain { cursor: default; }
/* OFFERS PANEL (bento sheet, 2026-10-15) — one <dialog class="offers__panel offers__panel--N"> per row, opened by motion.js ("offers panel").
   The dialog is a transparent full-screen layer; inside it .offers__sheet is centred at the section's content edges (the dialog sits inside
   .padding-global and inherits its side padding), up to 88% of the screen tall, in the row's sand step, radius-lg. The sheet grows out of
   the row (clip-path), then the tiles rise in reading order. Around it the page darkens (ink 65%) and blurs (6px). Phones: the sheet fills the screen.
   Inside: no boxes, only hairlines. From 992px left 5 of 12 (eyebrow, name text-h2, paragraph text-lead, good fit text-h3), right 7 of 12
   ("What you get": rows with the number in text-stat sand and the line in text-body-lg), then a full-width bar of three terms and the button.
   custom code in Webflow: the dialog, its ::backdrop, [open] and .is-open, and the cursor states */
.offers__panel { position: fixed; inset: 0; z-index: 1000; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding-block: 0; padding-inline: inherit; border: 0; background: transparent; overflow: visible; --text-strong: var(--c-ink-100); --text-body: var(--c-ink-88); --text-muted: var(--c-ink-64); --border-subtle: var(--c-ink-16); --eyebrow-color: var(--c-ink-64); color: var(--c-ink-100); }
.offers__panel[open] { display: grid; place-items: center; }
.offers__panel::backdrop { background: rgba(30, 28, 29, 0); -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); transition: background-color 0.6s var(--ease-in-out), backdrop-filter 0.6s var(--ease-in-out), -webkit-backdrop-filter 0.6s var(--ease-in-out); }
.offers__panel.is-open::backdrop { background: rgba(30, 28, 29, 0.65); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.offers__panel.offers__panel--1 { --offers-bg: var(--c-paper-lift); }
.offers__panel.offers__panel--2 { --offers-bg: color-mix(in srgb, var(--c-paper-lift) 66%, var(--c-sand-soft)); }
.offers__panel.offers__panel--3 { --offers-bg: color-mix(in srgb, var(--c-paper-lift) 33%, var(--c-sand-soft)); }
.offers__panel.offers__panel--4 { --offers-bg: var(--c-sand-soft); }
.offers__sheet { position: relative; display: flex; flex-direction: column; width: 100%; max-height: 88dvh; border-radius: var(--radius-lg); background: var(--offers-bg, var(--c-paper-lift)); overflow: hidden; }
.offers__scroll { display: flex; flex-direction: column; justify-content: safe center; min-height: 0; padding: var(--gap-card); overflow-y: auto; overscroll-behavior: contain; }
.offers__close { position: absolute; top: calc(var(--gap-card) + 0.75rem); right: calc(var(--gap-card) + 0.75rem); z-index: 3; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 1px solid var(--c-ink-16); border-radius: 50%; background: transparent; color: var(--c-ink-100); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.offers__close svg { width: 28px; height: 28px; fill: none; }
.offers__close:hover { background: var(--c-white); border-color: var(--c-ink-100); }
.offers__close:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--c-sand-deep); }
.offers__scroll { padding: clamp(2rem, 4vw, 4.5rem); }
.offers__layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: calc(var(--gap-columns) * 2); row-gap: clamp(2.5rem, 5vh, 4rem); }
.offers__left { grid-column: 1 / span 6; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-md); min-width: 0; }
.offers__paneltitle { margin: 0; transform-origin: 0 0; }
.offers__left .text-lead { margin: 0; }
.offers__fit { display: flex; flex-direction: column; gap: var(--sp-sm); margin-top: var(--sp-xl); }
.offers__fit .text-lead { margin: 0; }
.offers__right { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: var(--sp-sm); min-width: 0; }
/* the numbers share one column (subgrid), so they line up whatever the count */
.offers__items { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.offers__item { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: last baseline; padding-block: var(--sp-md); }
.offers__item + .offers__item { border-top: 1px solid var(--border-subtle); }
/* sand-deep: quieter than the words beside it (2.2:1, decorative, CEO request 2026-10-15) */
.offers__itemnum { color: var(--c-sand-deep); font-variant-numeric: tabular-nums; line-height: 1; font-size: calc(var(--fs-stat) * 0.8); }
/* panel paragraphs and list items one step under lead size */
.offers__panel .text-lead { font-size: calc(var(--fs-lead) * 0.85); }
.offers__bar { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); align-items: stretch; padding-top: var(--sp-xl); }
.offers__terms { flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; min-width: 0; }
.offers__termcol { display: flex; flex-direction: column; gap: var(--sp-2xs, 0.25rem); padding: var(--sp-lg); }
.offers__termcol:first-child { padding-left: 0; }
.offers__termcol + .offers__termcol { border-left: 1px solid var(--border-subtle); }
.offers__termcol dd { margin: 0; }
.offers__termcol .text-eyebrow { margin-bottom: var(--sp-xs); }
/* call to action laid out like a term (label, value), as a fourth column: ink tile, the primary button's shadow */
.offers__cta { display: flex; flex-direction: column; gap: var(--sp-2xs, 0.25rem); min-width: 0; padding: var(--sp-lg); border-radius: var(--radius-lg); background: var(--c-ink); box-shadow: var(--shadow-pill-light); color: var(--c-cream-100); text-decoration: none; outline: none; --text-strong: var(--c-cream-100); --text-faint: var(--c-cream-40); --eyebrow-color: var(--c-sand-soft); }
.offers__cta .text-eyebrow { margin-bottom: var(--sp-xs); }
.offers__ctaarrow { align-self: flex-end; width: 48px; height: 48px; margin-top: auto; fill: none; transition: transform var(--dur-fast) var(--ease-out); }
.offers__cta .offers__arrowbox { stroke: color-mix(in srgb, currentColor 40%, transparent); }
.offers__cta:hover .offers__ctaarrow, .offers__cta:focus-visible .offers__ctaarrow { transform: translateX(6px); }
.offers__cta:focus-visible { box-shadow: var(--shadow-pill-light), 0 0 0 2px var(--c-sand-deep); }
/* the custom cursor moves into the open dialog (the top layer hides it otherwise); there the ring is the close control */
.cursor-ring .cursor-ring__x, .cursor-ring .cursor-ring__label { display: none; }
.cursor-ring.is-close { width: 84px; height: 84px; margin: -42px 0 0 -42px; }
.cursor-ring.is-close .cursor-ring__x { display: block; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%); background: linear-gradient(45deg, transparent calc(50% - 0.75px), var(--c-cream) calc(50% - 0.75px), var(--c-cream) calc(50% + 0.75px), transparent calc(50% + 0.75px)), linear-gradient(-45deg, transparent calc(50% - 0.75px), var(--c-cream) calc(50% - 0.75px), var(--c-cream) calc(50% + 0.75px), transparent calc(50% + 0.75px)); }
.cursor-ring.is-close .cursor-ring__label { display: block; position: absolute; left: calc(100% + 0.75rem); top: 50%; transform: translateY(-50%); white-space: nowrap; color: var(--c-cream); }
.offers__note { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-lg); }
/* 2026-10-23 (Morgan, CEO request): the bar with the terms and "Next step" stays pinned to the bottom of the sheet while the content above it
   scrolls, so the booking button is always in view (it sat below the fold at 1440 x 900 in every panel). The bar runs to the sheet's edges on the
   sheet colour with a hairline on top; terms and button are tighter, and the arrow sits in the button's corner so the tile is one block shorter.
   bottom and margin-inline cancel the .offers__scroll padding (same clamp). Phones: the sheet is the full screen, so the bar stays in the flow. */
.offers__bar { position: sticky; bottom: calc(-1 * clamp(2rem, 4vw, 4.5rem)); z-index: 2; margin-inline: calc(-1 * clamp(2rem, 4vw, 4.5rem)); padding: var(--sp-sm) clamp(2rem, 4vw, 4.5rem) var(--sp-md); background: var(--offers-bg, var(--c-paper-lift)); border-top: 1px solid var(--border-subtle); }
.offers__termcol { padding: var(--sp-sm) var(--sp-lg); }
.offers__cta { position: relative; padding: var(--sp-md) calc(var(--sp-md) + 56px) var(--sp-md) var(--sp-md); }
.offers__ctaarrow { position: absolute; right: var(--sp-md); bottom: var(--sp-md); }
@media (max-width: 991px) {
  .offers__row { align-items: start; }
  .offers__arrow { margin-top: 0.35rem; }
  .offers__left, .offers__right { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .offers__panel { padding-inline: 0; }
  .offers__sheet { height: 100dvh; max-height: none; border-radius: 0; }
  .offers__scroll { flex: 1 1 auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
  .offers__close { background: var(--offers-bg, var(--c-paper-lift)); border-radius: 50%; }
  .offers__scroll { justify-content: flex-start; }
  .offers__scroll { padding: 5.5rem var(--section-pad-inline) 2.5rem; }
  .offers__bar { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-lg); }
  .offers__terms { grid-template-columns: minmax(0, 1fr); }
  .offers__termcol { padding: var(--sp-md) 0; }
  .offers__termcol:first-child { padding-top: 0; }
  .offers__terms { row-gap: var(--sp-lg); }
  .offers__termcol, .offers__termcol:first-child { padding: 0; }
  .offers__termcol + .offers__termcol { border: 0; }
  .offers__bar { position: static; margin: 0; padding: var(--sp-xl) 0 0; background: none; border-top: 0; }

}

/* ==========================================================================
   CASE BENTO — one bento of tiles per case (Home v2 "Selected work")
   layouts: --side (2 : 1 : 1, Main left; --flip puts it right) · --centre (1 : 2 : 1, Main middle)
   every case has two mockup tiles, Main and Detail. Every case uses Boald's palette only: number tile in ember
   with cream text; no client colours. The combo classes (casebento--kiwi, --sav, --signal) stay on the markup
   (contrast: cream-100/88 on ember 7.8:1 · cream on ink-panel 13:1 · ink-64 on paper-lift 4.6:1)
   ========================================================================== */
.casebento { overflow-x: clip; }
.casebento__case { position: relative; z-index: 1; margin-top: clamp(3.5rem, 7vw, 6rem); }
.casebento__label { margin-bottom: var(--sp-lg); }
.casebento__grid { display: grid; gap: var(--gap-card); min-height: clamp(36rem, 50vw, 48rem); grid-template-rows: 1fr 1fr; }
.casebento__grid--side { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "main num quote" "main what detail"; }
.casebento__grid--side.casebento__grid--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); grid-template-areas: "num quote main" "what detail main"; }
.casebento__grid--centre { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: "num main detail" "what main quote"; }
.casebento__tile { position: relative; overflow: hidden; display: flex; flex-direction: column; min-width: 0; padding: clamp(1.25rem, 2.2vw, 2rem); border-radius: var(--radius-lg); }
.casebento__tile--placeholder { background: var(--c-paper-lift); }
.casebento__file { position: absolute; top: clamp(1.25rem, 2.2vw, 2rem); left: clamp(1.25rem, 2.2vw, 2rem); color: var(--c-ink-64); }
.casebento__main { grid-area: main; justify-content: flex-end; min-height: 22rem; }
.casebento__media { position: absolute; inset: 0; }
.casebento__img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* a casebento__img can be a <video> (muted loop playsinline preload="metadata", no autoplay, no controls); motion.js plays it only while on screen */
.casebento__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(25, 24, 24, 0.85) 0%, rgba(25, 24, 24, 0.45) 40%, rgba(25, 24, 24, 0) 70%); }
.casebento__maincopy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--sp-lg); max-width: 36rem; --text-strong: var(--c-cream-100); --text-body: var(--c-cream-88); }
.casebento__stat { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-sm) var(--sp-md); }
.casebento__number { grid-area: num; justify-content: space-between; gap: var(--sp-lg); background: var(--c-sand); --text-strong: var(--c-ink-100); --text-body: var(--c-ink-88); --text-muted: var(--c-ink-64); --border-subtle: var(--c-ink-16); }
/* Detail: detail.jpg filling the tile, no text; no padding so the picture runs to the edge */
.casebento__detail { grid-area: detail; min-height: 14rem; padding: 0; }
/* Signal detail video: fills the card edge to edge, centred */
.casebento--signal .casebento__detail .casebento__img { object-fit: cover; object-position: center; }
/* Quote: one background, no inner card; quote at the top, portrait, name and role at the bottom. Grows with its text (overflow visible) */
.casebento__quotetile { grid-area: quote; overflow: visible; background: var(--c-ink-panel); --text-strong: var(--c-cream-100); --text-body: var(--c-cream-88); --text-muted: var(--c-cream-64); }
.casebento__quote { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-lg); margin: 0; }
.casebento__quotetext { margin: 0; }
/* Media tile in the quote's place (a video or picture until the client's quote arrives): one background, no inner card, picture to the edge */
.casebento__tile.casebento__tile--media { padding: 0; overflow: hidden; }
.casebento__attr { display: flex; align-items: center; gap: var(--sp-sm); }
.casebento__portrait { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.casebento__attrtext { display: flex; flex-direction: column; min-width: 0; }
/* What we did: logo top right, sentence (text-body-lg is-strong) under it, tags at the bottom. Grows with its text (overflow visible) */
.casebento__what { grid-area: what; overflow: visible; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: var(--sp-lg); background: var(--c-ink-panel); --text-strong: var(--c-cream-100); }
.casebento__sentence { grid-row: 2; margin: 0; }
.casebento__logo { grid-row: 1; justify-self: end; }
.casebento__tags { grid-row: 3; display: flex; flex-wrap: wrap; gap: var(--sp-xs); }
.casebento__more { position: relative; z-index: 1; margin-top: clamp(4rem, 8vw, 7rem); }
/* More work: three How we help cards in a row */
.casebento__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-card); margin-top: clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width: 991px) { .casebento__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .casebento__cards { grid-template-columns: minmax(0, 1fr); } }
/* More work: Offers rows without link, arrow or hover */
.offers__row.offers__row--plain { grid-template-areas: "name"; grid-template-columns: minmax(0, 1fr); }
@media (max-width: 991px) {
  .casebento__grid { min-height: 0; grid-template-rows: auto; }
  .casebento__grid--side, .casebento__grid--side.casebento__grid--flip { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "main main" "num quote" "what detail"; }
  .casebento__grid--centre { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "main main" "num detail" "what quote"; }
  .casebento__main { min-height: 0; aspect-ratio: 16 / 10; }
  .casebento__number, .casebento__detail, .casebento__quotetile, .casebento__what { min-height: 16rem; }
}
@media (max-width: 767px) {
  .casebento__grid--side, .casebento__grid--side.casebento__grid--flip, .casebento__grid--centre { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "num" "quote" "what" "detail"; }
  .casebento__main { aspect-ratio: 4 / 5; }
}

/* ---- Section note: one lead-size line that closes a section ---------------- */
.section-note { position: relative; z-index: 1; margin-top: clamp(4rem, 10vh, 7rem); color: var(--text-strong); }
.section-note--center { max-width: var(--measure); margin-inline: auto; text-align: center; text-wrap: balance; }
.section-note--left { width: calc((100% - var(--gap-columns)) * 2 / 3); }
@media (max-width: 991px) {
  .section-note--left { width: auto; }
}

/* ==========================================================================
   HERO — three variants
   default (Home): copy block centred in the first screen, picture box below
   .hero--inner + .hero__grid--split: copy two thirds, picture one third (About)
   .hero--inner + .hero__grid--form:  copy and form side by side (Contact)
   ========================================================================== */
.hero-backdrop {
  position: relative;
  z-index: 2; /* above the global .bg-lines so the hairlines pass behind the picture */
  overflow: hidden;
  padding-bottom: clamp(2.5rem, 7vh, 5rem);
  --hero-box-h: clamp(300px, 62svh, 760px);
  --hero-lift: 4rem;        /* copy sits this far above the screen centre */
  --hero-lift-px: 64;       /* same value, unitless, read by motion.js */
  --hero-box-gap: calc(6rem + var(--hero-lift));
  --hero-nav-clear: clamp(5rem, 11svh, 7rem);
}
.hero__inner { position: relative; z-index: 3; width: 100%; padding-block: clamp(7rem, 34svh, 22rem) 0; }
@media (max-height: 620px) { .hero__inner { padding-block: 6rem 0; } }
.hero__grid { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-md); container-type: inline-size; }
/* desktop: the column is as wide as the title; Tablet sets it back to 100% */
.hero__col { position: relative; z-index: 1; width: max-content; display: flex; flex-direction: column; gap: var(--sp-lg); }
/* custom code in Webflow (a :not selector), so it keeps its own width condition */
@media (min-width: 992px) {
  .hero__col > :not(.text-h1):not(.text-lead) { max-width: 58vw; }
}
/* the hero eyebrow is ink, not sand, on every hero */
.hero .text-eyebrow { color: var(--text-strong); }
/* explicit <br> lines stay on one line from tablet up */
.hero .text-h1 .line-mask { white-space: nowrap; }
@media (max-width: 767px) {
  .hero .text-h1 .line-mask { white-space: normal; }
}
/* the hero button shows only where the navbar button is hidden */
.hero__cta { display: none; }
@media (max-width: 991px) {
  .hero__cta { display: inline-flex; align-self: flex-start; margin-top: var(--sp-lg); padding: 12px 20px; font-size: var(--fs-caption); border-radius: var(--radius-sm); }
}
/* the scribble would outlive the ink title as the page goes dark: it fades with --nav-light */
.hero .scribble-layer, .hero .scribble-word::after, .hero__artinner { opacity: var(--nav-light, 1); }

/* Home: watermark fixed behind the copy, fades out on the first scroll */
.hero__ghost {
  position: fixed; z-index: 0; left: 50%; top: 62%;
  transform: translate(-50%, -50%);
  width: 122%;
  aspect-ratio: 1887.918 / 358.23;
  background-color: color-mix(in srgb, #ffffff calc(var(--nav-light, 0) * 100%), #262425);
  -webkit-mask: url(../assets/boald-wordmark-mask.svg) center / contain no-repeat;
  mask: url(../assets/boald-wordmark-mask.svg) center / contain no-repeat;
  pointer-events: none;
}
@media (max-width: 991px) { .hero__ghost { width: 150%; } }

/* Home: copy block vertically centred by motion.js (data-hero-center), picture box below */
.hero:not(.hero--inner) .hero__inner { padding-top: 0; }
.hero:not(.hero--inner) .hero__grid { box-sizing: border-box; padding-top: var(--hero-nav-clear); }
.hero__box {
  position: relative; flex: none;
  height: var(--hero-box-h);
  margin-top: var(--hero-box-gap);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-ink-deep);
}
.hero__media { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; background: var(--c-ink-deep); }
.hero__mediahint { font-family: var(--font-mono); font-variation-settings: "MONO" var(--mono-axis); font-size: var(--fs-caption); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--c-cream-40); }

/* inner pages: full first screen, content centred */
.hero--inner .hero-backdrop { min-height: 100svh; display: flex; padding-bottom: 0; }
/* auto margins centre the content but never push it above the top: a tall hero (Contact's form) starts below the navbar */
.hero--inner .hero__inner { margin-block: auto; padding-block: clamp(9rem, 17svh, 11rem) clamp(6rem, 12svh, 9rem); }

.hero__grid--split { display: grid; grid-template-columns: 2fr 1fr; align-items: center; gap: var(--gap-columns); }
.hero__grid--split .hero__col { width: 100%; }
.hero__grid--split .hero__col > :not(.text-h1):not(.text-lead) { max-width: var(--measure); }
.hero__art { position: relative; min-width: 0; }
.hero__artinner { position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center; width: 100%; }
.hero__artinner img { width: 100%; height: 100%; object-fit: contain; max-width: none; mix-blend-mode: multiply; }
/* side panel instead of a picture (case page: the result, up front) */
.hero__aside { position: relative; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-sm); }

.hero__grid--form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--gap-columns); }
.hero__grid--form .hero__col { width: 100%; }

@media (max-width: 991px) {
  .hero__col { width: 100%; }
  .hero__grid--split, .hero__grid--form { grid-template-columns: 1fr; gap: var(--sp-xl); }
  .hero__artinner { aspect-ratio: 4 / 3; max-width: 420px; }
  .hero--inner .hero__inner { padding-block: clamp(6rem, 14svh, 8rem) clamp(3rem, 8svh, 5rem); }
}
/* phone landscape: more room under the navbar */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-backdrop { --hero-nav-clear: 7.5rem; }
}

/* ==========================================================================
   SPLIT — head on the left, body on the right
   .split--text   1fr 2fr, body = lead paragraphs           (Home "Where you are")
   .split--cards  1fr 1fr, head sticky, body = stacked cards (Home "Who you work with")
   .split__portrait  optional 4:5 picture in the head, between the section head and the paragraph.
                     Its height follows the screen height so the whole sticky head (title, portrait, paragraph)
                     fits on screen and stays centred; its width follows from the 4:5 ratio. Empty frame =
                     placeholder ground (same as .casebento__tile--placeholder) holding a [NEEDS] marker.
   ========================================================================== */
.split { overflow: clip; isolation: isolate; }
.split--text  { padding-bottom: calc(var(--section-pad-block) * 2); } /* long tail: the theme change happens in this empty room */
.split--cards { padding-top: calc(var(--section-pad-block) * 0.5); padding-bottom: calc(var(--section-pad-block) * 1.3); }
.split__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 2fr; align-items: start; gap: var(--gap-columns); }
.split--cards .split__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-2xl); }
.split__head { padding-top: 4px; }
.split__head > .text-body { margin-top: var(--sp-lg); }
.split__portrait { position: relative; display: grid; place-items: center; height: clamp(14rem, calc(100svh - 34rem), 36rem); max-width: 100%; aspect-ratio: 4 / 5; margin-top: var(--sp-xl); padding: var(--sp-md); overflow: hidden; border-radius: var(--radius-lg); background: var(--c-paper-lift); text-align: center; }
.split__portrait img, .split__portrait video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split__body { display: flex; flex-direction: column; gap: 1.35em; }
.split--cards .split__body { padding-top: 4px; gap: var(--gap-card); }
.split__head { align-self: start; }
/* sticks vertically centred: offset by half the viewport minus half its own height (--head-h set in motion.js) */
.split--cards .split__head { position: sticky; top: max(calc(var(--sp-4xl) + 2rem), calc(50svh - var(--head-h, 12rem) / 2)); }
/* text body starts level with the title, not the eyebrow */
.split--text .split__body { padding-top: calc(4px + var(--fs-eyebrow) + clamp(0.75rem, 1.4vw, 1.25rem)); }
.split--text .split__body > .text-lead { max-width: var(--measure); }
@media (max-width: 991px) {
  .split__grid, .split--cards .split__grid { grid-template-columns: 1fr; gap: var(--sp-xl); }
  .split__body { max-width: var(--container-text); }
  .split--cards .split__body { padding-top: 0; max-width: none; }
  .split--cards .split__head { position: static; }
  .split--text .split__body { padding-top: 0; }
}
@media (max-width: 767px) {
  .split__portrait { width: 100%; height: auto; }
}

/* ==========================================================================
   ROWS — picture and text side by side, alternating sides (Home "How we help")
   ========================================================================== */
.rows { overflow: clip; padding-block: calc(var(--section-pad-block) * 1.15) calc(var(--section-pad-block) * 1.9); }
.rows > .padding-global > .section-head { margin-bottom: calc(var(--sp-4xl) * 2.25); }
.rows__list { position: relative; z-index: 1; display: flex; flex-direction: column; gap: clamp(5rem, 12vw, 11rem); }
/* picture 40%, copy 60% (CEO, 2026-10-12) */
.rows__item { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(2rem, 3.4vw, 3.25rem); align-items: center; }
.rows__item--flip { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.rows__item--flip .rows__media { order: 2; }
/* every row mirrors the others (CEO, 2026-10-12): the picture sits on its outer edge at 80% of its column, the text block on the opposite outer edge,
   so the space between them lands in the middle. Rows with the picture on the left get that space as left padding on the copy.
   Inside its box the drawing leans toward the text, so a tall, narrow sketch and a wide one leave the same middle space */
.rows__media { width: 80%; justify-self: start; }
.rows__item--flip .rows__media { justify-self: end; }
.rows__mediainner img { object-position: right center; }
.rows__item--flip .rows__mediainner img { object-position: left center; }
.rows__copy { width: min(100%, var(--measure)); justify-self: end; }
.rows__item--flip .rows__copy { justify-self: start; }
.rows__media { position: relative; aspect-ratio: 6 / 5; border-radius: var(--radius-lg); overflow: hidden; }
/* the inner is the blend group: it supplies the page ground the sketch multiplies onto */
.rows__mediainner { position: absolute; inset: 0; background: var(--bg); }
/* already-transparent PNG: no ground box, so nothing shows behind the sketch when the page darkens */
.rows__mediainner--clear { background: none; }
.rows__mediainner--clear img { mix-blend-mode: normal; }
.rows__mediainner img { width: 100%; height: 100%; object-fit: contain; padding: 6%; box-sizing: border-box; display: block; mix-blend-mode: multiply; }
/* sketch cropped to its drawing: fills the box with no inner margin */
.rows__mediainner--fit img { padding: 0; }
.rows__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-md); }
/* card row: the whole row is one lifted card holding the copy; the sketch sits in a nested sand card inset by a small, even padding */
.rows__item--card { --rows-card-pad: clamp(2.25rem, 4.5vw, 4.5rem); --rows-nest-pad: clamp(0.75rem, 1.4vw, 1.25rem); grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--rows-nest-pad); align-items: stretch; padding: calc(var(--rows-nest-pad) * 2); background: var(--bg-lift); border-radius: var(--radius-lg); }
@media (min-width: 992px) { .rows__item--card.rows__item--flip { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.rows__item--card .rows__media, .rows__item--card .rows__copy { width: auto; justify-self: stretch; }
.rows__item--card .rows__mediainner img { object-position: center; }
.rows__item--card .rows__media { background: none; border-radius: 0; }
[data-theme="dark"] .rows__item--card { background: var(--c-ink-panel); }
.rows__item--card .rows__copy { position: relative; align-self: center; }
.rows__item--card .rows__copy::before { content: ""; position: absolute; left: 0; top: var(--rows-card-pad); bottom: var(--rows-card-pad); width: 1px; background: var(--border-subtle); }
.rows__item--card.rows__item--flip .rows__copy::before { left: auto; right: 0; }
.rows__item--card .rows__mediainner { inset: var(--rows-card-pad); }
.rows__item--card .rows__copy { justify-content: center; padding: var(--rows-card-pad); }
@media (max-width: 991px) { .rows__item.rows__item--card { gap: var(--rows-nest-pad); } .rows__item--card .rows__copy, .rows__item--card.rows__item--flip .rows__copy { padding: calc(var(--rows-card-pad) * 0.6); align-self: stretch; } .rows__item--card .rows__copy::before, .rows__item--card.rows__item--flip .rows__copy::before { top: 0; bottom: auto; left: calc(var(--rows-card-pad) * 0.6); right: calc(var(--rows-card-pad) * 0.6); width: auto; height: 1px; } }
.rows__copy > .text-h3-feature { max-width: 26ch; }
.rows__copy > .text-h3-feature .line-mask { padding-bottom: 0.42em; margin-bottom: -0.42em; }
.rows__copy .scribble-word { --scr-w: 68%; --scr-b: -0.3em; }
.rows__copy > .text-body { margin-top: var(--sp-2xs); }
@media (max-width: 991px) {
  .rows > .padding-global > .section-head { margin-bottom: calc(var(--sp-3xl) * 1.9); }
  .rows__list { gap: clamp(4rem, 11vw, 6.5rem); }
  .rows__item, .rows__item--flip { grid-template-columns: 1fr; gap: var(--sp-lg); }
  .rows__item--flip .rows__media { order: 0; }
  .rows__media, .rows__item--flip .rows__media { aspect-ratio: 4 / 3; width: auto; justify-self: stretch; }
  .rows__mediainner img, .rows__item--flip .rows__mediainner img { object-position: center; }
  .rows__copy, .rows__item--flip .rows__copy { width: auto; justify-self: stretch; }
  .rows__copy > .text-h3-feature { max-width: none; }
  .rows__copy > .text-h3-feature br { display: none; }
}

/* ==========================================================================
   WORKS — case cards, each plays its intro as it enters (Home "Selected work")
   ========================================================================== */
.works { z-index: 2; padding-bottom: calc(var(--section-pad-block) * 2); } /* long tail before the theme change */
.works > .padding-global > .section-head { padding-top: 4px; padding-bottom: clamp(3rem, 9vh, 6.5rem); }
.works__stack { position: relative; display: flex; flex-direction: column; gap: clamp(6rem, 45vh, 22rem); }
/* phone/tablet-only copy of the head, scrolling normally above the cards */
.works-intro { display: none; }
.works-intro .section-head { gap: var(--sp-md); }

/* base: the picture sits above the panel; beside it, below 1440, the panel is too narrow for the title (Quinn, 2026-10-08) */
.workcard { position: relative; display: block; gap: var(--gap-card); color: inherit; }
.workcard--flip .workcard__media { order: 2; }
.workcard__media { aspect-ratio: 16 / 9; }
.workcard__panel { margin-top: var(--gap-card); }
/* Webflow's 1440 breakpoint: picture and panel side by side */
@media (min-width: 1440px) {
  .workcard { display: grid; grid-template-columns: 1.5fr 1fr; height: 57.5svh; min-height: min-content; }
  .workcard--flip { grid-template-columns: 1fr 1.5fr; }
  .workcard__media { aspect-ratio: auto; }
  .workcard__panel { margin-top: 0; }
}
.workcard__media { position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--c-ink-deep); align-self: stretch; cursor: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.workcard__media img {
  position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover;
  transform: scale(1.05); opacity: 0;
  transition: transform 0.5s var(--ease-out), opacity 0.35s var(--ease-out);
}
.workcard__media img.is-active { opacity: 1; }
.workcard__media:hover img { transform: scale(1.01); }
.workcard__panel { border-radius: var(--radius-md); background: var(--c-ink-panel); padding: var(--pad-panel); display: flex; flex-direction: column; }
/* masks for the card intro: each .cline rises out of its .cmask */
.workcard .cmask { display: block; overflow: hidden; }
.workcard .cline { display: block; will-change: transform; }
.workcard__eyebrow { display: block; margin-bottom: var(--sp-md); }
.workcard__title { margin-bottom: var(--sp-lg); }
.workcard__tags .cline { display: flex; flex-wrap: wrap; gap: 8px; }
.workcard__copy { margin-top: var(--sp-md); }
/* the description shows only from Webflow's 1920 breakpoint; the title carries the claim below it */
.workcard .workcard__copy { display: none; }
@media (min-width: 1920px) { .workcard .workcard__copy { display: block; } }
.workcard__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-card); margin-top: var(--sp-lg); }
.workcard__stats > .workcard__stat:only-child { grid-column: 1 / -1; }
/* work-card numbers belong to the card (smaller than .text-stat) */
.workcard__num { display: block; font-size: clamp(2.125rem, 3.1vw, 3.25rem); font-weight: 300; line-height: 1.05; letter-spacing: var(--ls-tight); color: var(--text-strong); }
.workcard__cap { display: block; margin-top: var(--sp-2xs); }

/* glass follower cursor over the picture */
.workcard__cursor {
  position: absolute; left: 50%; top: 50%;
  width: 96px; height: 96px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), inset 0 1px 0 rgba(255,255,255,0.28);
  display: grid; place-items: center;
  transform: translate(-50%, -50%) scale(0.25);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out), transform 0.45s var(--ease-out);
  pointer-events: none; z-index: 2;
}
.workcard__cursor svg { width: 30px; height: 30px; fill: none; stroke: var(--c-white); stroke-width: 1.5; }
.workcard__media:hover .workcard__cursor { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* slideshow arrows: the touch replacement for the hover cursor */
.slide-arrows { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: flex; gap: 8px; }
.slide-arrows button {
  width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2), inset 0 1px 0 rgba(255,255,255,0.28);
}
.slide-arrows svg { width: 20px; height: 20px; fill: none; stroke: var(--c-white); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .slide-arrows { display: none; } }

/* touch and narrow screens: the glass cursor becomes a fixed tap button */
@media (hover: none), (pointer: coarse), (max-width: 991px) {
  .workcard__media .slide-arrows, .testi__media .slide-arrows { display: none; }
  .workcard__cursor {
    opacity: 1; left: auto !important; top: auto !important;
    right: var(--sp-md); bottom: var(--sp-md);
    width: 48px; height: 48px; transform: none; box-shadow: none;
    z-index: 5; pointer-events: auto;
  }
  .workcard__media:hover .workcard__cursor,
  .testi__media:hover .testi__cursor,
  .testi__panel:hover .testi__cursor { transform: none !important; }
  .workcard__media { transform: none !important; }
  .workcard__cursor svg { width: 22px; height: 22px; }
  .workcard__media .workcard__cursor svg path:first-child { display: none; }
  .testi__panel .testi__cursor { display: none; }
}
@media (max-width: 991px) {
  .works-intro { display: block; }
  .works > .padding-global > .section-head { display: none; }
  .works__stack { gap: clamp(5rem, 22vh, 12rem); }
  .workcard__stats { margin-top: var(--sp-sm); }
  .workcard__num { font-size: clamp(1.5rem, 3vw, 2rem); }
  .workcard__cap { margin-top: 2px; }
}
/* phones: no tags (the card title carries the claim). Needs .workcard in front to beat ".workcard .cmask { display: block }" */
@media (max-width: 767px) { .workcard .workcard__tags { display: none; } }

/* ==========================================================================
   TESTI — testimonial slider: picture left, rotating quote right
   ========================================================================== */
.testi { padding-top: clamp(2.5rem, 6vw, 5rem); }
.testi .section-head { margin-bottom: calc(var(--sp-4xl) * 1.25); }
.testi__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: var(--gap-card); align-items: stretch; }
.testi__media { position: relative; overflow: hidden; cursor: none; border-radius: var(--radius-lg); touch-action: pan-y; user-select: none; -webkit-user-select: none;
  min-height: calc((min(100vw - 2 * var(--section-pad-inline), var(--container-large)) - 2 * var(--inset-extra) - var(--gap-card)) / 2 * 9 / 16); }
.testi__frame { position: absolute; left: 0; right: 0; top: -10%; height: 120%; will-change: transform; }
.testi__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.testi__frame img.is-active { opacity: 1; }
.testi__media:hover .testi__cursor { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.testi__panel { position: relative; overflow: hidden; cursor: none; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; border-radius: var(--radius-md); background: var(--c-sand-mute); padding: var(--pad-panel); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.testi__panel:hover .testi__cursor { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* the arrow over the sand quote panel is ink: white on sand is 2.3:1 (CEO, 2026-10-11) */
.testi__panel .testi__cursor svg { stroke: var(--c-ink); }
/* autoplay progress bar along the panel's bottom edge */
.testi__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; z-index: 3; pointer-events: none; }
.testi__progress-bar { display: block; width: 100%; height: 100%; background: var(--c-ember); transform: scaleX(0); transform-origin: left center; will-change: transform; }
.tmask { display: block; overflow: hidden; }
.tline { display: block; will-change: transform; }
.testi__quote { font-family: var(--font-mono); font-variation-settings: "MONO" var(--mono-axis); font-size: var(--fs-quote); line-height: 1.4; color: var(--c-ink); }
.testi__who { margin-top: clamp(1.75rem, 3vw, 3rem); display: flex; flex-direction: column; gap: 2px; }
.testi__name { color: var(--c-ink); }
.testi__role { color: var(--c-ink-64); }
@media (max-width: 991px) {
  /* full-bleed picture with the quote over a dark bottom gradient */
  .testi { padding-bottom: 0; }
  .testi > .padding-global { padding-inline: 0; }
  .testi .container-large { max-width: none; }
  .testi .section-head { padding-inline: var(--section-pad-inline); }
  .testi__grid { display: block; position: relative; min-height: min(88svh, 720px); }
  .testi__media { position: absolute; inset: 0; min-height: 0; border-radius: 0; }
  .testi__panel {
    position: absolute; inset: auto 0 0 0; z-index: 2; min-height: 0; border-radius: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 26%, rgba(0,0,0,0.82) 55%, rgba(0,0,0,0.94) 100%);
    padding: var(--sp-4xl) var(--section-pad-inline) var(--sp-lg);
    gap: var(--sp-lg); justify-content: flex-end;
  }
  .testi__quote, .testi__name { color: var(--c-cream-100); }
  .testi__role { color: var(--c-cream-64); }
  .testi__who { margin-top: var(--sp-md); }
  .testi__panel .testi__cursor svg { stroke: var(--c-white); }
}

/* ==========================================================================
   STATEMENT — head, card grid, closing note
   centred head + four cards + centred note      (About "How we use AI", Contact "Clarity Sprint")
   right head + three cards + left note          (About "Who we are")
   ========================================================================== */
.statement > .padding-global > .card-grid { margin-top: clamp(3rem, 8vh, 5.5rem); }
.statement > .padding-global > .section-head--right + .card-grid { margin-top: clamp(6rem, 15vh, 10.5rem); }
/* About: the first section pulls up under the full-screen hero */
.hero--inner + .statement { padding-top: clamp(2.5rem, 5svh, 4rem); margin-top: -16svh; }
@media (max-width: 991px) {
  .statement > .padding-global > .card-grid,
  .statement > .padding-global > .section-head--right + .card-grid { margin-top: var(--sp-2xl); }
  .section-note { margin-top: calc(var(--sp-2xl) * 1.5); }
}

/* ==========================================================================
   STEPS — head, then numbered steps, with or without a picture
   ========================================================================== */
.steps > .padding-global > .section-head { max-width: var(--container-text); }
.steps__split { position: relative; z-index: 1; margin-top: clamp(4rem, 10vh, 7rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--gap-columns); align-items: stretch; }
.steps__split--solo { grid-template-columns: minmax(0, 1fr); }
/* the picture column matches the height of the steps beside it */
.steps__media { position: relative; min-height: 100%; border-radius: var(--radius-lg); overflow: hidden; background: var(--c-ink-panel); }
.steps__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.steps__list { display: flex; flex-direction: column; }
.steps__item { display: grid; grid-template-columns: minmax(0, 4.5rem) minmax(0, 1fr); gap: var(--sp-lg); align-items: start; padding-block: clamp(2rem, 4.5vh, 3.25rem); border-top: 1px solid var(--border-subtle); }
.steps__item:first-child { border-top: none; padding-top: 0; }
.steps__item:last-child { border-bottom: 1px solid var(--border-subtle); }
.steps__num { font-family: var(--font-mono); font-variation-settings: "MONO" var(--mono-axis); font-size: var(--fs-caption); letter-spacing: var(--ls-eyebrow); color: var(--eyebrow-color); padding-top: 0.45em; }
.steps__copy { display: flex; flex-direction: column; gap: var(--sp-sm); }
@media (max-width: 991px) {
  .steps__split { grid-template-columns: 1fr; gap: var(--sp-2xl); margin-top: var(--sp-2xl); }
  .steps__media { aspect-ratio: 4 / 3; min-height: 0; }
  .steps__item { grid-template-columns: 1fr; gap: var(--sp-sm); padding-block: var(--sp-xl); }
  .steps__item:first-child { border-top: 1px solid var(--border-subtle); padding-top: var(--sp-xl); }
  .steps__num { padding-top: 0; }
  .steps__copy { max-width: none; }
}

/* ==========================================================================
   NUMBERS — a row of result numbers with captions (case pages)
   ========================================================================== */
.numbers__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-card); margin-top: var(--sp-lg); }
.numbers__item { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--sp-sm); padding: var(--pad-panel); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.numbers__item--pending { border-style: dashed; }
@media (max-width: 991px) { .numbers__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   PROSE BLOCK — eyebrow, title, paragraphs at reading width (case pages)
   ========================================================================== */
.prose-block > .padding-global > .section-head > .text-h2 { max-width: 24ch; }
.prose-block__body { position: relative; z-index: 1; max-width: 68ch; margin-top: var(--sp-xl); display: flex; flex-direction: column; gap: var(--sp-md); }

/* ==========================================================================
   QUOTE BLOCK — one client quote with attribution (case pages)
   ========================================================================== */
.quote-block__inner { position: relative; z-index: 1; border: 1px solid var(--c-sand); border-radius: var(--radius-md); padding: clamp(2rem, 5vw, 4rem); display: flex; flex-direction: column; gap: var(--sp-md); }

/* ==========================================================================
   CTA — the close: eyebrow, title, lead, button, picture
   .cta--center: no picture, everything centred (mid-page call to action)
   ========================================================================== */
.cta__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--gap-columns); align-items: center; }
.cta__col { display: flex; flex-direction: column; align-items: flex-start; }
.cta__col > .section-head > .text-h2 { margin-top: var(--sp-2xl); max-width: 24ch; }
.cta__col > .text-body-lg { margin-top: var(--sp-lg); }
.cta__col > .text-body { margin-top: var(--sp-sm); }
.cta__col > .btn { margin-top: var(--sp-2xl); }
.cta__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 10; background: var(--c-ink-panel); display: grid; place-items: center; }
.cta__media img { width: 100%; height: 100%; object-fit: cover; }
.cta--center .cta__col { align-items: center; text-align: center; margin-inline: auto; max-width: 52rem; }
.cta--center .section-head { align-items: center; }
.cta--center .cta__row { display: flex; gap: var(--sp-sm); flex-wrap: wrap; justify-content: center; margin-top: var(--sp-2xl); }
.cta--center .cta__row > .btn { margin-top: 0; }
@media (max-width: 767px) {
  .cta__grid { grid-template-columns: 1fr; gap: var(--sp-xl); }
}