/* Hallmark · shape: navy hero band, Rows, Split, Grid, Steps (a real ol), Showcase per page type · genre: modern-minimal · theme: brand · redesign: restyle
 * paper: oklch(98.6% 0.004 262) · accent: oklch(52.4% 0.265 265) · display: Poppins · body: Mulish · hero: Settled · nav: slab · footer: mast · signature: the navy hero with the page's own image, as on the homepage
 * axes: cool paper/geometric sans/signal blue · posture: Restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H4 E4 S4 R4 V3 · weakest: V, the service and case pages share one skeleton by design; they differ in the hero image, the meta bar and the proof section */
/* Hallmark · answered F4 · the navy cta-band carries the same accent button recipe as the page buttons · one recipe, used in two places, never two filled buttons side by side */
/* Hallmark · answered F7 · the media frames share one 6px radius on purpose · every picture on the site is a photograph in the same frame, set apart by size and role */
/* Hallmark · answered F15 · the 62rem legal measure and the 980px quote measure are text measures for reading, not container widths · the page container stays 1440px */
/* Hallmark · answered F1 · the apostrophes stay straight so the page text equals the live site and its JSON-LD word for word */
@import url("./hm.css");

.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.section { padding-block: var(--section-gap-s); }
.section--light { background: var(--color-paper); }
.section--grey { background: var(--color-paper-2); }
.section--dark { background: var(--color-ink); color: var(--color-on-navy-2); }
.section--dark h2, .section--dark h3 { color: var(--color-on-navy); }
main > section:last-of-type { padding-bottom: calc(var(--section-gap-s) + var(--space-xl)); }
.is-active { border-bottom-color: var(--color-accent-on-navy) !important; }

/* ---------- hero band ---------- */
.phero { position: relative; background: var(--color-ink); color: var(--color-on-navy-2); padding-block: var(--space-3xl); }
.phero__grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.phero__inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-lg); min-width: 0; }
.phero__inner { max-width: 62rem; }
.phero h1 { max-width: 22ch; font: 600 var(--text-display-s)/1.08 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-on-navy); }
.phero--plain h1 { max-width: 22ch; font-size: var(--text-display); }
.h1-sub { display: block; margin-top: var(--space-sm); font: 400 var(--text-lead)/1.4 var(--font-body); letter-spacing: 0; color: var(--color-on-navy-2); }
.phero__sub { font: 600 var(--text-lg)/1.35 var(--font-display); color: var(--color-on-navy); }
.phero__intro { max-width: 56ch; font-size: var(--text-lead); line-height: 1.5; color: var(--color-on-navy-2); }
.phero__cta { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xs); }
.phero__trust { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-on-navy-2); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-on-navy-2); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--color-on-navy); text-decoration: underline; }
.crumbs span[aria-current] { color: var(--color-on-navy); }

/* ---------- section heads ---------- */
.head-row { display: flex; align-items: end; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-2xl); }
.head-row > div { min-width: 0; }
.head-row h2 { max-width: 24ch; }
.head-row p { margin-top: var(--space-sm); max-width: 52ch; font-size: var(--text-lead); color: var(--color-ink-2); }
.section--dark .head-row p { color: var(--color-on-navy-2); }

/* ---------- case meta bar ---------- */
.pmeta { background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.pmeta__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg) var(--gap-columns); padding-block: var(--space-xl); }
.pmeta__label { margin-bottom: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.pmeta__val { font: 600 var(--text-lg)/1.3 var(--font-display); }
.pmeta__val a { color: var(--color-accent); text-underline-offset: 0.22em; }
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); }
.tag { font-size: var(--text-sm); color: var(--color-ink-2); }
a.tag { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
.rstats { padding-block: var(--section-gap-s) 0; background: var(--color-paper); }
.rstats__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rstats .stat b::after { display: none; }
.rstats small { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2); }

/* ---------- prose rows ---------- */
.prose-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; gap: var(--space-xl) var(--gap-columns); }
.prose-row > div:first-child { grid-column: 1 / span 5; }
.prose-row > div:first-child h2 { position: sticky; top: calc(7rem + var(--space-lg)); }
.prose-row__body { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: var(--space-lg); min-width: 0; }
.prose-row__body p:first-child { font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink); }
.prose-row__body p:not(:first-child) { color: var(--color-ink-2); }
.prose-row + .prose-row { margin-top: var(--space-3xl); }

/* ---------- steps: a real ol ---------- */
.timeline__track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.timeline__track--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.step { counter-increment: step; padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-muted); }
.step::before { content: counter(step); display: block; margin-bottom: var(--space-md); font: 600 var(--text-display-s)/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-accent); font-variant-numeric: tabular-nums; }
.step h3 { margin-bottom: var(--space-sm); }
.step p { color: var(--color-ink-2); }

/* ---------- split, benefits, band ---------- */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; gap: var(--space-2xl) var(--gap-columns); }
.split__media { grid-column: 1 / span 6; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--radius-card); overflow: hidden; background: var(--color-paper-3); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__body { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; }
.split__body p { color: var(--color-ink-2); }
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.col { padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-muted); }
.col h3 { margin-bottom: var(--space-sm); }
.col p { color: var(--color-ink-2); }
.cta-band { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); margin-top: var(--space-3xl); padding: var(--space-2xl); border-radius: var(--radius-card); background: var(--color-ink); color: var(--color-on-navy-2); }
.cta-band__title { font: 600 var(--text-section)/1.1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-on-navy); }
.cta-band__sub { margin-top: var(--space-xs); }

/* ---------- projects (two or three cards) and links to other services ---------- */
.work { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.work > .work__card { grid-column: span 4; }
.work--two > .work__card { grid-column: span 6; }
.work__card { display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; text-decoration: none; }
.work__img { margin: 0; aspect-ratio: 3 / 2; border-radius: var(--radius-card); overflow: hidden; background: var(--color-paper-3); }
.work__img img { width: 100%; height: 100%; object-fit: cover; }
.work__img--cutout img { object-fit: contain; padding: var(--space-md); }
.work__body { display: grid; gap: var(--space-xs); }
.work__card h2, .work__card h3 { max-width: 28ch; font-size: var(--text-title); line-height: 1.2; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.work__card:hover h2, .work__card:hover h3 { text-decoration-color: var(--color-accent); }
.work__card p { color: var(--color-ink-2); }
.work__card small { font-size: var(--text-sm); color: var(--color-ink-2); }
.also { margin-top: var(--space-3xl); }
.also > h3 { margin-bottom: var(--space-lg); font-size: var(--text-xl); }
.also__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap-columns); }
.also__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.also__item { display: grid; gap: var(--space-2xs); padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-muted); text-decoration: none; }
.also__item strong { font: 600 var(--text-lg)/1.3 var(--font-display); }
.also__item span { color: var(--color-ink-2); }
.also__item:hover strong { color: var(--color-accent); }
.gallery-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: var(--gap-columns); margin-top: var(--space-2xl); }
.gallery-strip img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); }
.gallery-strip img.cutout { object-fit: contain; padding: var(--space-md); background: var(--color-paper-3); }

/* ---------- video proof ---------- */
.proof { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; gap: var(--space-xl) var(--gap-columns); }
.proof > div:first-child { grid-column: 1 / span 5; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
.proof__stat { font: 600 var(--text-display)/1 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.proof__label { font-weight: 700; color: var(--color-accent); }
.proof__text { max-width: 46ch; margin-bottom: var(--space-md); color: var(--color-ink-2); }
.ytgrid { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); }
.ytcap { display: block; margin-top: var(--space-sm); font-weight: 700; line-height: 1.35; }
.yt { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-card); background: var(--color-navy-2); text-decoration: none; }
.yt img { width: 100%; height: 100%; object-fit: cover; }
.yt__hover { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in oklch, var(--color-ink) 78%, transparent); color: var(--color-on-navy); font-weight: 700; opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.yt:hover .yt__hover, .yt:focus-visible .yt__hover { opacity: 1; }
.yt__tag { position: absolute; left: var(--space-sm); top: var(--space-sm); padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-input); background: color-mix(in oklch, var(--color-ink) 82%, transparent); color: var(--color-on-navy); font-size: var(--text-sm); }
@media (hover: hover) { .yt__tag { display: none; } }
.vgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.vcard { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.vcard__body { display: grid; gap: var(--space-3xs); }
.vcard__title { font-weight: 700; line-height: 1.35; }
.vcard__meta { font-size: var(--text-sm); color: var(--color-ink-2); font-variant-numeric: tabular-nums; }

/* ---------- case sections ---------- */
.case-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); margin: 0; padding: 0; list-style: none; counter-reset: card; }
.case-card { counter-increment: card; padding-top: var(--space-lg); }
.case-card::before { content: counter(card); display: block; margin-bottom: var(--space-md); font: 600 var(--text-display-s)/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-accent-on-navy); font-variant-numeric: tabular-nums; }
.case-card h3 { margin-bottom: var(--space-sm); }
.case-card p { color: var(--color-on-navy-2); }
.case-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); height: clamp(420px, 46vw, 640px); }
.case-grid figure, .case-pair figure { margin: 0; overflow: hidden; border-radius: var(--radius-card); background: var(--color-paper-3); }
.case-grid__big { grid-row: 1 / 3; }
.case-grid img, .case-pair img { width: 100%; height: 100%; object-fit: cover; }
.case-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); }
.case-pair figure { aspect-ratio: 16 / 11; }
.case-cta { display: flex; align-items: end; justify-content: space-between; gap: var(--space-xl); }
.case-cta__title { font: 600 var(--text-section)/1.1 var(--font-display); letter-spacing: var(--tracking-display); }
.case-cta__sub { margin-top: var(--space-sm); color: var(--color-ink-2); }
.case-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); }
.pquote:not(.pquote--duo) .wrap { max-width: calc(980px + 2 * var(--gutter)); }
.pquote .q { max-width: 36ch; margin-bottom: var(--space-lg); }
.pquote .pquote__nl { margin: calc(-1 * var(--space-md)) 0 var(--space-lg); }
.pquote .review__link { margin-top: var(--space-lg); }

/* ---------- about, contact ---------- */
.studio__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; gap: var(--space-2xl) var(--gap-columns); }
.studio__photo { grid-column: 1 / span 5; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--radius-card); overflow: hidden; background: var(--color-ink); }
.studio__photo img { width: 100%; height: 100%; object-fit: cover; }
.studio__photo img.is-fallback { object-fit: contain; padding: 22%; }
.studio__body { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: var(--space-lg); min-width: 0; }
.studio__text { display: flex; flex-direction: column; gap: var(--space-md); }
.studio__text p:first-child { font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: var(--space-xl) var(--gap-columns); }
.contact-card { padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-muted); }
.contact-card h3 { margin-bottom: var(--space-xs); }
.contact-card p { color: var(--color-ink-2); }
.contact-card a { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-accent); font-weight: 700; }

/* ---------- legal, 404, under construction ---------- */
.legal-intro { padding-block: var(--space-3xl) var(--space-2xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.legal-intro .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); }
.legal-intro h1 { max-width: 20ch; }
.legal-intro p { max-width: 62ch; color: var(--color-ink-2); }
.legal-list { display: flex; flex-direction: column; max-width: 62rem; }
.legal-item { padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.legal-item:first-child { border-top: 0; padding-top: 0; }
.legal-item h2 { margin-bottom: var(--space-md); font-size: var(--text-2xl); }
.legal-item p { margin-bottom: var(--space-md); color: var(--color-ink-2); }
.legal-points { display: flex; flex-direction: column; gap: var(--space-xs); margin: var(--space-md) 0; padding: 0; list-style: none; }
.legal-points li { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-input); background: var(--color-paper-2); color: var(--color-ink-2); }
.legal-points strong { color: var(--color-ink); }
.contact-box { margin-top: var(--space-md); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-ink); color: var(--color-on-navy-2); }
.contact-box h3 { margin-bottom: var(--space-sm); color: var(--color-on-navy); }
.contact-box a { color: var(--color-on-navy); }
.nf-wrap, .construction-wrap { display: flex; align-items: center; min-height: calc(100svh - 7rem - var(--space-xl)); padding-block: var(--space-3xl); background: var(--color-paper); }
.nf-wrap .wrap, .construction-wrap .wrap { width: 100%; }
.nf-title, .construction-title { max-width: 16ch; margin-bottom: var(--space-md); font: 600 var(--text-display)/1.05 var(--font-display); letter-spacing: var(--tracking-display); }
.nf-text, .construction-text { max-width: 48ch; margin-bottom: var(--space-xl); font-size: var(--text-lead); color: var(--color-ink-2); }
.construction-card > div:last-child, .nf-wrap .wrap > div:last-child { display: flex; flex-wrap: wrap; gap: var(--space-md); }
main.nf-wrap, main.construction-wrap { padding-bottom: calc(var(--space-3xl) + var(--space-xl)); }

/* ---------- the one reveal for the subpages ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (max-width: 60rem) {
  .phero__grid, .pmeta__grid, .timeline__track, .timeline__track--3, .cols3, .also__grid, .also__grid--three, .ytgrid, .vgrid, .case-cards, .case-pair, .contact-grid, .rstats__grid, .gallery-strip { grid-template-columns: minmax(0, 1fr); }
  .phero { padding-block: var(--space-2xl); }
    .prose-row > div:first-child, .prose-row__body, .split__media, .split__body, .proof > div:first-child, .ytgrid, .studio__photo, .studio__body { grid-column: 1 / -1; }
  .prose-row > div:first-child h2 { position: static; }
  .work > .work__card, .work--two > .work__card { grid-column: 1 / -1; }
  .head-row, .cta-band, .case-cta { flex-direction: column; align-items: flex-start; }
  .cta-band { padding: var(--space-xl) var(--space-lg); }
  .case-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; height: auto; }
  .case-grid__big { grid-row: auto; }
  .case-grid figure { aspect-ratio: 16 / 11; }
  .prose-row + .prose-row { margin-top: var(--space-2xl); }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}
.blue { color: var(--color-accent); }

/* ---------- ink on the navy surfaces of the subpages (hero, quote band, cta band) ---------- */
.phero .btn--quiet, .section--dark .btn--quiet, .cta-band .btn--quiet { color: var(--color-on-navy); border-color: var(--color-on-navy-edge); }
.phero .btn--quiet:hover, .section--dark .btn--quiet:hover, .cta-band .btn--quiet:hover { background: var(--color-navy-3); border-color: var(--color-on-navy-2); }
.phero .link, .section--dark .link, .cta-band .link { color: var(--color-on-navy); text-decoration-color: var(--color-accent-on-navy); }
.phero .link:hover, .section--dark .link:hover, .cta-band .link:hover { color: var(--color-accent-on-navy); }
.phero :focus-visible, .section--dark :focus-visible, .cta-band :focus-visible { outline-color: var(--color-accent-on-navy); }
.link:has(.wa-icon) { display: inline-flex; align-items: center; gap: var(--space-xs); }
.legal-item .contact-box p { margin-bottom: var(--space-2xs); color: var(--color-on-navy-2); }