/* packages/www/src/site.css - the www.picarm.com landing page.
 *
 * Same family as the jewellery counter (packages/client/jewellery): Ubuntu,
 * the picarm navy, hairline borders on a cool off-white panel, pill controls.
 * Hand-written rather than Tailwind because the page is one file and has no
 * build step that runs PostCSS; the tokens below are the counter's values.
 *
 * Font URLs name the public path (/fonts/...). scripts/build-www.js rewrites
 * them to the hashed copies under /assets/fonts/. Keep them single-quoted.
 */

@font-face {
  font-family: 'Ubuntu';
  src: url('/assets/fonts/ubuntu-latin-400-2rrjY6wK.woff2') format('woff2');
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ubuntu';
  src: url('/assets/fonts/ubuntu-latin-500-Qo7Ck9O3.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ubuntu';
  src: url('/assets/fonts/ubuntu-latin-700-NligcX40.woff2') format('woff2');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #0d1a33;
  --navy: #1d3558;
  --navy-deep: #13264a;
  --slate: #3d5c72;
  --muted: #5d6a80;
  /* Small uppercase labels (table heads, footer headings, credits). Was
     #7c88a0, 3.4:1 on the panel - under WCAG AA for text this small. This is
     4.8:1 on the panel and 5.1:1 on white. */
  --label: #636f87;
  /* Icon strokes and hairline controls that must clear 3:1 (WCAG 1.4.11). */
  --icon: #6a7ba6;
  --line: #e3e7ee;
  --panel: #f7f8fa;
  --white: #ffffff;
  --mint: #4ef2be;
  --lilac: #6a7ba6;
  --radius: 12px;
  --gutter: 24px;
  --max: 1180px;
  --font: 'Ubuntu', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 17px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--navy); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { margin: 0; line-height: 1.15; font-weight: 700; color: var(--navy); text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }
p { margin: 0; }
::selection { background: var(--navy); color: var(--white); }
/* FOCUS IS NAVY ON LIGHT GROUND, MINT ON NAVY. The ring used to be mint
   everywhere, which is 1.4:1 against white - a keyboard user on the light
   pages could not see where they were (WCAG 2.4.7 / 1.4.11 want 3:1). Mint
   stays where it reads: on the navy band and the navy buttons' own ground. */
:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.sample :focus-visible { outline-color: var(--mint); }
.price-col b, .hero-facts b, .ba-service, .service-card-text span { font-variant-numeric: tabular-nums; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -48px; z-index: 60;
  background: var(--navy); color: var(--white); padding: 8px 14px; border-radius: 8px;
}
.skip:focus { top: 12px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---- buttons -------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; border-radius: 8px; border: 1px solid transparent;
  padding: 11px 20px; font: 500 1rem/1.2 var(--font);
  text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-sm { padding: 8px 14px; font-size: .9375rem; min-height: 44px; }
.btn-lg { padding: 14px 24px; font-size: 1.0625rem; }
.btn-primary { background: var(--navy); color: var(--white); }
.btn-primary:hover { background: var(--navy-deep); }
.btn-ghost { background: var(--white); color: var(--navy); border-color: #cfd5e0; }
.btn-ghost:hover { border-color: var(--navy); }
.btn-mint { background: var(--mint); color: var(--navy-deep); font-weight: 700; }
.btn-mint:hover { background: #7df6cf; }

/* Header styles are shared with /app in packages/shared/site-header.css. */

/* ---- hero ----------------------------------------------------------- */
.hero { padding: 56px 0 72px; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6.4fr);
  gap: 56px; align-items: center;
}
/* WHO IT IS FOR, said under the headline rather than as a tracked-caps
   kicker above it. Same words; the headline now opens the page instead of a
   label, and the line reads as the first sentence of the pitch. */
.audience {
  color: var(--navy); font-size: 1.1875rem; font-weight: 500; line-height: 1.4;
  margin-bottom: 14px; max-width: 34em;
}
.hero h1 {
  font-size: clamp(2.5rem, 5.2vw, 4.25rem); letter-spacing: -.025em; line-height: 1.02;
  margin-bottom: 20px;
}
.lead { font-size: 1.125rem; color: var(--slate); max-width: 34em; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.fine { margin-top: 14px; font-size: .9375rem; color: var(--muted); }
.hero-facts {
  list-style: none; margin: 32px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 8px 28px; color: var(--muted); font-size: .9375rem;
}
.hero-facts b { color: var(--navy); font-weight: 700; font-size: 1.0625rem; margin-right: 2px; }

/* ---- before/after --------------------------------------------------- */
.ba-stage {
  --pos: 50%;
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius);
  overflow: hidden; background: #e9ecf1;
  box-shadow: 0 1px 2px rgba(13, 26, 51, .06), 0 12px 32px -12px rgba(13, 26, 51, .22);
  cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.ba-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  pointer-events: none; -webkit-user-drag: none;
}
.ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-divider {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px;
  background: var(--white); box-shadow: 0 0 0 1px rgba(13, 26, 51, .12);
  pointer-events: none;
}
.ba-handle {
  position: absolute; top: 50%; left: var(--pos);
  width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: var(--white); box-shadow: 0 2px 10px rgba(13, 26, 51, .28);
  cursor: ew-resize;
}
.ba-handle::before, .ba-handle::after {
  content: ''; position: absolute; top: 50%; width: 0; height: 0; margin-top: -6px;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.ba-handle::before { left: 11px; border-right: 7px solid var(--navy); }
.ba-handle::after { right: 11px; border-left: 7px solid var(--navy); }
/* The handle sits on any photograph, dark or white, so its ring is two-tone:
   navy against the white disc, white outside that. One of the two always
   reads against whatever is behind it. */
.ba-handle:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--navy), 0 0 0 6px var(--white), 0 2px 10px 4px rgba(13, 26, 51, .28);
}
.ba-tag {
  position: absolute; top: 12px; padding: 4px 9px; border-radius: 999px;
  background: rgba(13, 26, 51, .62); color: var(--white);
  font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  pointer-events: none;
}
.ba-tag-before { left: 12px; }
.ba-tag-after { right: 12px; }
.ba-stage.is-swapping .ba-img { opacity: .55; transition: opacity .12s ease; }

.ba-caption {
  display: flex; align-items: baseline; gap: 12px; margin-top: 14px; min-height: 3.2em;
  font-size: .9375rem; color: var(--slate);
}
.ba-caption b { color: var(--navy); font-weight: 600; }
.ba-service {
  flex: none; padding: 2px 9px; border: 1px solid #cfd5e0; border-radius: 999px;
  font-size: .75rem; color: var(--navy); background: var(--panel);
}
.ba-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pill {
  border: 1px solid #dfe3ea; background: var(--white); color: var(--slate);
  border-radius: 999px; padding: 5px 13px; font: 500 .8125rem/1.25 var(--font); cursor: pointer;
}
.pill:hover { border-color: var(--navy); color: var(--navy); }
.pill[aria-pressed='true'] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.ba-thumbs {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px;
}
.ba-thumbs li[hidden] { display: none; }
.ba-thumb {
  position: relative; display: block; width: 100%; padding: 0; border: 2px solid transparent; border-radius: 8px;
  overflow: hidden; background: var(--panel); cursor: pointer;
  box-shadow: 0 0 0 1px var(--line);
}
.ba-thumb img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.ba-thumb:hover { box-shadow: 0 0 0 1px var(--lilac); }
.ba-thumb[aria-pressed='true'] { border-color: var(--navy); box-shadow: none; }
.ba-credit { margin-top: 12px; font-size: .8125rem; color: var(--label); }

/* ---- sections ------------------------------------------------------- */
.section { padding: 80px 0; }
.band { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-title { font-size: clamp(1.75rem, 3vw, 2.375rem); letter-spacing: -.015em; }
.section-lead { margin-top: 12px; color: var(--slate); max-width: 40em; font-size: 1.0625rem; }

/* COLUMNS, NOT BOXES. These were white cards with a mint dash over every
   heading - the stock icon-tile-heading-text grid. Three or four short
   paragraphs side by side group by proximity alone; a navy rule over each
   column sets where it starts, as a printed page would. */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; margin-top: 40px; }
.card { padding-top: 20px; border-top: 2px solid var(--navy); }
.card h3 { font-size: 1.1875rem; margin-bottom: 10px; }
.card p { color: var(--slate); font-size: .96875rem; }

.steps {
  list-style: none; margin: 36px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px;
  counter-reset: none;
}
.step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy); color: var(--white); font-weight: 700; margin-bottom: 18px;
}
.step h3 { font-size: 1.1875rem; margin-bottom: 8px; }
.step p { color: var(--slate); font-size: .96875rem; }

/* ---- prices --------------------------------------------------------- */
.price-table {
  margin-top: 32px; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.price-row {
  display: grid; grid-template-columns: 210px minmax(0, 1fr) 130px; gap: 24px;
  padding: 20px 26px; border-top: 1px solid var(--line); align-items: baseline;
  color: var(--slate); font-size: .96875rem;
}
.price-row:first-child { border-top: 0; }
.price-head {
  padding-top: 14px; padding-bottom: 14px; background: var(--panel);
  color: var(--label); font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
}
.price-name { color: var(--navy); font-weight: 700; font-size: 1.0625rem; }
.price-col { text-align: right; white-space: nowrap; }
.price-col b { color: var(--navy); font-size: 1.375rem; font-weight: 700; }
.price-col .price-each { display: block; margin-top: 2px; font-size: .8125rem; color: var(--muted); font-weight: 400; }
.price-note { margin-top: 14px; font-size: .9375rem; color: var(--muted); }

/* ---- sample band ---------------------------------------------------- */
.sample {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  background: var(--navy); color: #dfe6f2; border-radius: var(--radius); padding: 44px 48px;
}
.sample h2 { color: var(--white); font-size: clamp(1.5rem, 2.6vw, 2.125rem); letter-spacing: -.01em; margin-bottom: 12px; }
.sample p { max-width: 38em; }

/* ---- studios -------------------------------------------------------- */
.studios { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; }
.studios p { color: var(--slate); font-size: 1.0625rem; }
.studios p + p { margin-top: 14px; }

/* ---- faq ------------------------------------------------------------ */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 18px 40px 18px 0; font-weight: 500; color: var(--navy); font-size: 1.0625rem;
}
.faq summary::-webkit-details-marker { display: none; }
/* The plus is drawn, two 2px bars, rather than a '+' and '–' glyph pair that
   sat at different heights in Ubuntu. Opening turns the vertical bar flat. */
.faq summary::before, .faq summary::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 14px; height: 2px; margin-top: -1px;
  border-radius: 1px; background: var(--icon);
  transition: transform .2s cubic-bezier(.22, .72, .22, 1);
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq summary:hover::before, .faq summary:hover::after { background: var(--navy); }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }
.faq details p { padding: 0 40px 20px 0; color: var(--slate); }

/* ---- footer --------------------------------------------------------- */
.site-footer { background: var(--panel); border-top: 1px solid var(--line); padding: 48px 0 56px; font-size: .9375rem; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; }
.footer-logo { height: 44px; width: auto; margin-bottom: 16px; }
.footer-legal { color: var(--muted); }
.footer-h {
  color: var(--label); font-size: .6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px;
}
.footer-list { list-style: none; margin: 0; padding: 0; color: var(--muted); }
.footer-list li + li { margin-top: 6px; }
.footer-list a { color: var(--slate); text-decoration: none; }
.footer-list a:hover { color: var(--navy); text-decoration: underline; }

/* ---- articles (the guides, terms, privacy) --------------------------- */
.article { padding: 40px 0 72px; }
/* The free-sample band straight after an article or the guides index does
   not need a second section's worth of space above it. */
.article + .section, .guides + .section { padding-top: 0; }
.article-wrap { max-width: 760px; }
.crumbs { font-size: .875rem; margin-bottom: 18px; }
.crumbs a { color: var(--slate); text-decoration: none; }
.crumbs a:hover { color: var(--navy); text-decoration: underline; }
.crumbs a:not(:last-child)::after { content: ' /'; color: var(--label); }
.article-title { font-size: clamp(2rem, 4.4vw, 3rem); letter-spacing: -.02em; line-height: 1.08; }
.article-meta { margin-top: 12px; color: var(--muted); font-size: .9375rem; }
.prose { margin-top: 28px; color: var(--ink); }
.prose > * + * { margin-top: 18px; }
/* THE READING MEASURE. The column is 712px so the before/after figures and
   tables can be big, but running text across all of it was ~90 characters a
   line at 17px. Text holds to ~68ch; figures and tables keep the full width. */
.prose > :is(p, ul, ol, h2, h3) { max-width: 68ch; }
.prose > .article-lead { max-width: 60ch; } /* larger type, same right edge */
.prose h1 { font-size: clamp(2rem, 4.4vw, 2.75rem); letter-spacing: -.02em; }
.prose h2 { font-size: 1.5rem; letter-spacing: -.01em; margin-top: 44px; scroll-margin-top: 16px; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: 8px; }
.prose b { color: var(--navy); font-weight: 600; }
.article-lead { font-size: 1.1875rem; color: var(--slate); }
.article-figure { margin: 30px 0 34px; }
.article-figure figcaption { margin-top: 12px; font-size: .9375rem; color: var(--slate); }
.article-figure figcaption b { color: var(--navy); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.split-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.split-table th, .split-table td { text-align: left; vertical-align: top; padding: 12px 16px; border-top: 1px solid var(--line); }
.split-table th {
  border-top: 0; background: var(--panel); color: var(--label);
  font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
}
.split-table td { color: var(--slate); width: 50%; }
.split-table td + td, .split-table th + th { border-left: 1px solid var(--line); }
.checklist li::marker { color: var(--navy); font-weight: 700; }
.legal-updated { color: var(--muted); font-size: .9375rem; }
.legal code { font-size: .875em; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }

/* ---- the guides index ------------------------------------------------- */
.guides .section-lead { margin-bottom: 8px; }
.guide-search { max-width: 560px; margin-top: 28px; }
.guide-search[hidden], .guide-group[hidden], .guide-card[hidden] { display: none; }
.guide-search label { display: block; margin-bottom: 8px; font-weight: 500; }
.guide-search-controls { display: flex; gap: 12px; }
.guide-search input { min-width: 0; flex: 1; min-height: 48px; padding: 10px 12px; border: 1px solid var(--icon); border-radius: 8px; background: var(--white); color: var(--navy); font: inherit; }
.guide-search input::placeholder { color: var(--slate); }
.guide-search button { min-height: 48px; padding: 8px 12px; color: var(--navy); background: none; border: 0; text-decoration: underline; font: inherit; cursor: pointer; }
.guide-search [role="status"] { margin-top: 8px; font-size: .875rem; color: var(--slate); }
.guide-topics { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 24px; }
.guide-topics a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.guide-group { margin-top: 48px; scroll-margin-top: 24px; }
.guide-group h2 { font-size: 1.5rem; margin-bottom: 16px; }
.guide-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px;
}
.guide-card { border-top: 1px solid var(--line); }
.guide-card a {
  display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 20px;
  align-items: start; height: 100%; padding: 24px 0; text-decoration: none; color: inherit;
}
.guide-card a:hover h3 { text-decoration: underline; text-underline-offset: .18em; }
.guide-card img { width: 112px; height: 100px; object-fit: cover; border-radius: 8px; }
.guide-card a:not(:has(img)) > div { grid-column: 1 / -1; }
.guide-card h3 { font-size: 1.1875rem; line-height: 1.3; margin-bottom: 8px; text-wrap: pretty; }
.guide-card p { color: var(--slate); font-size: .96875rem; }
.guide-more { display: inline-block; margin-top: 12px; color: var(--navy); font-weight: 500; font-size: .9375rem; }
.guide-more::after { content: ' \2192'; }

/* ---- cookie banner (consent.js; same shape as the counter's) ---------- */
/* The cookie bar: one slim strip on the bottom edge, never a dialog. No
   backdrop and no focus trap, so the page stays usable while it is up, and it
   goes on either answer. Reject and Accept share ONE class on purpose - the
   ICO's test is that refusing is as easy as agreeing, so neither may look like
   the default. On a phone the sentence wraps beside the buttons (two lines at
   most) rather than stacking above them. */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line);
  box-shadow: 0 -4px 18px -8px rgba(13, 26, 51, .25);
}
.consent[hidden] { display: none; }
.consent-bar {
  max-width: var(--max); margin: 0 auto; padding: 8px 16px;
  display: flex; align-items: center; gap: 12px;
}
.consent-text { flex: 1 1 auto; min-width: 0; margin: 0; font-size: .8125rem; line-height: 1.35; color: var(--slate); }
.consent-text a { color: var(--navy); white-space: nowrap; }
@media (max-width: 639px) { .consent-tags { display: none; } }
.consent-actions { flex: none; display: flex; gap: 8px; }
.consent-btn {
  min-height: 34px; padding: 6px 14px; border: 1px solid var(--navy); border-radius: 6px;
  background: var(--navy); color: var(--white); font: 500 .8125rem/1.2 var(--font); cursor: pointer;
}
.consent-btn:hover { background: var(--navy-deep); border-color: var(--navy-deep); }
.consent-btn:focus-visible { outline: 2px solid var(--lilac); outline-offset: 2px; }
.link-button {
  border: 0; padding: 0; background: none; cursor: pointer;
  font: inherit; color: var(--slate); text-align: left;
}
.link-button:hover { color: var(--navy); text-decoration: underline; }

/* ---- upload and go ---------------------------------------------------
   The header's "Upload photos" never hides, at any width: it is the one way
   into the counter from every page. The guides end on a dropzone-shaped LINK
   to the same place (see uploadPanel in build-www.js for why it is a link). */
.btn-upload .icon-upload { flex: none; }
.upload-band { padding-bottom: 0; }
.upload-panel {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 44px 28px; border: 2px dashed #b9c3d4; border-radius: var(--radius);
  background: var(--panel); color: var(--navy); text-align: center; text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.upload-panel:hover, .upload-panel:focus-visible, .upload-panel.is-dragover {
  border-color: var(--navy); background: #eef1f6;
}
.upload-panel-title { font-size: clamp(1.375rem, 2.4vw, 1.75rem); }
.upload-panel-text { max-width: 36em; color: var(--slate); }
.upload-panel .btn { margin-top: 6px; }

/* ---- "Same piece, every finish": the counter's cube --------------------
   Ported from the jewellery counter (input.css .j-cube-*, and the reasoning
   lives there): six letter charms spelling PICARM on six faces, a quarter turn
   every 1250ms, a random finish per turn, draggable. Kept the same on purpose:
     - touch-action: none on the SCENE ONLY, so a finger drags the cube but can
       still scroll past the box anywhere else;
     - NO backface-visibility on the faces - they are opaque, so the far ones
       are hidden already, and hiding backfaces makes a face vanish mid-turn;
     - the shadow is fixed to the scene and does not turn with the cube;
     - --cube tops out at CUBE_CSS_PX (280px), the size the faces are rendered
       at twice; 0.68 of the stage leaves root-2 headroom for the corner sweep.
   Sized off the box (a container), not the viewport, because on www the box
   is a column whose width the viewport does not decide alone. */
.finishes { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.finishes-copy p { color: var(--slate); max-width: 34em; }
.finishes-copy p + p { margin-top: 12px; }
.finishes-copy .section-lead b { color: var(--navy); }
.finishes-copy .btn { margin-top: 10px; }
/* Held to the counter's column width (26-30rem there): wider, and the 280px
   cube sits adrift in a square twice its size. */
.cube-box {
  container-type: inline-size; width: 100%; max-width: 30rem; justify-self: center;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
  padding: 16px;
}
.cube-axes { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); gap: 8px 10px; align-items: start; }
.cube-label {
  padding-top: 6px; color: var(--label); font-size: .6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; white-space: nowrap;
}
.cube-pills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cube-pills .pill { width: 100%; padding: 5px 6px; text-align: center; white-space: nowrap; font-size: .75rem; }
.cube-pills .pill:disabled { opacity: .4; cursor: not-allowed; }
.cube-pills .pill:disabled:hover { border-color: #dfe3ea; color: var(--slate); }
.cube-pills .pill[aria-pressed='true']:disabled:hover { border-color: var(--navy); color: var(--white); }
.cube-scene {
  --cube: min(280px, calc(100cqw * .68));
  position: relative; width: 100%; aspect-ratio: 1 / 1; margin-top: 14px;
  display: grid; place-items: center; perspective: 1100px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 6px; background: var(--white);
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab;
}
.cube-scene.is-dragging { cursor: grabbing; }
.cube-scene::before {
  content: ''; position: absolute; left: 50%; bottom: 12%; width: 58%; height: 10%;
  transform: translateX(-50%); background: rgba(29, 53, 88, .14); border-radius: 50%;
  filter: blur(12px); pointer-events: none;
}
.cube {
  position: relative; width: var(--cube); height: var(--cube);
  transform-style: preserve-3d; will-change: transform;
  transition: transform 550ms cubic-bezier(.22, .72, .22, 1);
}
.cube-scene.is-dragging .cube { transition: none; }
.cube-face {
  position: absolute; inset: 0; overflow: hidden; display: grid; place-items: center;
  background: var(--white); border: 1px solid var(--line);
}
.cube-face img {
  width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none;
}
.cube-face-front { transform: translateZ(calc(var(--cube) / 2)); }
.cube-face-back { transform: rotateY(180deg) translateZ(calc(var(--cube) / 2)); }
.cube-face-right { transform: rotateY(90deg) translateZ(calc(var(--cube) / 2)); }
.cube-face-left { transform: rotateY(-90deg) translateZ(calc(var(--cube) / 2)); }
.cube-face-top { transform: rotateX(90deg) translateZ(calc(var(--cube) / 2)); }
.cube-face-bottom { transform: rotateX(-90deg) translateZ(calc(var(--cube) / 2)); }
.cube-toggle {
  position: absolute; top: 6px; right: 6px; z-index: 1;
  display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.cube-toggle:hover, .cube-toggle:focus-visible { color: var(--navy); background: #eef1f6; }
.cube-toggle .cube-icon-play { display: none; }
.cube-toggle[aria-pressed='true'] .cube-icon-play { display: block; }
.cube-toggle[aria-pressed='true'] .cube-icon-pause { display: none; }

/* ---- slider shapes and labels (30 October 2026) --------------------- */
/* A pair may be cut to 3:4 or 2:3 (showcase.js SHAPES); the landing page's
   swapping stage is always 4:3. A tall stage is held to a sensible width so
   it never runs to twice the height of the screen. */
.ba-stage.is-portrait { aspect-ratio: 3 / 4; }
.ba-stage.is-tall { aspect-ratio: 2 / 3; }
/* A narrow figure is held narrow WHOLE - picture and caption together - so
   the caption starts at the picture's left edge rather than at the column's
   (or, in the service grid, centred under nothing in particular). */
.article-figure:has(.is-portrait) { max-width: 460px; margin-left: auto; margin-right: auto; }
.article-figure:has(.is-tall) { max-width: 400px; margin-left: auto; margin-right: auto; }
/* THE PILLS SAY WHAT IS ON SCREEN. site.js hides the Before pill once the
   divider has passed over it (nothing of the before is under it any more)
   and the After pill likewise; opacity only, so nothing shifts. */
.ba-tag { transition: opacity .18s ease; }
.ba-tag.is-hidden { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .ba-tag { transition: none; } }

/* ---- the service pages --------------------------------------------- */
.service-figure { margin: 0; }
.service-hero .service-figure:has(.is-portrait) { max-width: 500px; margin: 0 auto; }
.service-hero .service-figure:has(.is-tall) { max-width: 440px; margin: 0 auto; }
.service-figure figcaption { margin-top: 12px; font-size: .9375rem; color: var(--slate); }
.service-figure figcaption b { color: var(--navy); }
.service-hero .service-figure figcaption { min-height: 3em; }
.figure-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 28px; margin-top: 36px; align-items: start;
}
.figure-grid .service-figure:has(.is-portrait) { width: 100%; max-width: 420px; justify-self: center; }
.figure-grid .service-figure:has(.is-tall) { width: 100%; max-width: 360px; justify-self: center; }
.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.parts-list { display: grid; gap: 48px; margin-top: 36px; }
.parts { margin: 0; }
.parts-row {
  display: grid; grid-template-columns: minmax(0, 1.5fr) auto minmax(0, 1fr);
  align-items: center; gap: 20px;
}
.parts.is-portrait .parts-row { grid-template-columns: minmax(0, 2fr) auto minmax(0, 1fr); }
.parts.is-single .parts-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.parts-in { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; }
.parts-part, .parts-out { margin: 0; }
.parts-part img, .parts-out img {
  width: 100%; height: auto; border-radius: var(--radius); background: var(--panel);
  box-shadow: 0 1px 2px rgba(13, 26, 51, .06), 0 10px 28px -14px rgba(13, 26, 51, .25);
}
.parts.is-portrait .parts-out img { max-width: 360px; margin: 0 auto; }
.parts-part figcaption, .parts-out figcaption {
  margin-top: 8px; font-size: .75rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--label); text-align: center;
}
.parts-arrow { display: block; width: 32px; height: 32px; color: var(--icon); }
.parts-caption { margin-top: 16px; font-size: .9375rem; color: var(--slate); max-width: 46em; }
.parts-caption b { color: var(--navy); }

.related { padding-top: 0; }
.related-title { font-size: 1.125rem; }
.related-list {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 28px;
}
.related-list a { color: var(--slate); }
.related-list a:hover { color: var(--navy); }

/* ---- the landing page's service cards ------------------------------- */
.service-cards {
  list-style: none; margin: 32px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
}
.service-card a {
  display: block; height: 100%; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--white);
}
.service-card a:hover { border-color: var(--lilac); }
.service-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: var(--white); }
.service-card-text { display: block; padding: 14px 16px 18px; border-top: 1px solid var(--line); }
.service-card-text b { display: block; color: var(--navy); font-size: 1.0625rem; }
.service-card-text b::after { content: ' \2192'; }
.service-card-text span { display: block; margin-top: 4px; color: var(--muted); font-size: .9375rem; }
.services-more { margin-top: 20px; }
.services-more a { color: var(--navy); font-weight: 500; }
.ba-credit a { color: var(--slate); }

/* ---- /work/: the gallery --------------------------------------------- */
.work .section-lead b { color: var(--navy); font-weight: 600; }
.work-filters { margin-top: 26px; }
.work-grid {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px;
}
.work-grid li[hidden] { display: none; }
.work-item {
  position: relative; display: block; border-radius: 10px; overflow: hidden;
  background: var(--panel); box-shadow: 0 0 0 1px var(--line);
}
.work-item img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .25s ease; }
.work-item:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .work-item img { transition: none; } .work-item:hover img { transform: none; } }
.work-item:hover { box-shadow: 0 0 0 1px var(--lilac); }
/* "Has a before and after": a 12px split square in the top corner, muted and
   without a pill, so 25 of them read as a quiet index rather than a pattern. */
.work-badge {
  position: absolute; right: 7px; top: 7px; width: 12px; height: 12px; display: block;
  color: rgba(13, 26, 51, .42); filter: drop-shadow(0 0 1px rgba(255, 255, 255, .9));
}
.work-badge svg, .work-mark svg { display: block; width: 100%; height: 100%; }
.work-mark { display: inline-block; width: 11px; height: 11px; margin: 0 2px; vertical-align: -1px; color: var(--slate); }
.work + .section { padding-top: 0; }

.lightbox {
  border: 0; padding: 0; background: transparent; max-width: none; max-height: none;
  width: min(1100px, 94vw); color: var(--ink);
}
.lightbox::backdrop { background: rgba(9, 17, 34, .82); }
.lightbox-box { background: var(--white); border-radius: var(--radius); overflow: hidden; }
.lightbox-stage { position: relative; background: var(--panel); display: flex; justify-content: center; }
.lightbox-stage img { display: block; width: auto; height: auto; max-width: 100%; max-height: 76vh; object-fit: contain; }
.lightbox-stage.is-loading img { opacity: .55; }
.lightbox-tag { top: 12px; left: 12px; }
.lightbox-tag[hidden] { display: none; }
.lightbox-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 16px; padding: 12px 16px 14px; border-top: 1px solid var(--line);
}
.lightbox-caption { font-size: .9375rem; color: var(--slate); flex: 1 1 20em; }
.lightbox-caption b { color: var(--navy); font-weight: 600; }
.lightbox-actions { display: flex; align-items: center; gap: 8px; }
.lightbox-actions .pill[hidden] { display: none; }
.lightbox-btn {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border-radius: 50%; border: 1px solid #dfe3ea; background: var(--white);
  color: var(--navy); cursor: pointer; transition: border-color .15s ease;
}
.lightbox-btn svg { width: 18px; height: 18px; }
.lightbox-btn:hover { border-color: var(--navy); }

/* ---- narrower screens ----------------------------------------------- */
@media (max-width: 1040px) {
  /* Put the first action beside the promise, then show the proof. The
     interactive gallery must not push the free sample below a full screen. */
  .hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hero-copy { display: contents; }
  .hero-copy > * { max-width: 40em; }
  .hero h1 { order: 1; }
  .audience { order: 2; }
  .hero .cta-row { order: 3; margin-top: 4px; }
  .hero .fine { order: 4; margin-bottom: 24px; }
  .hero-show { order: 5; margin: 4px 0 28px; }
  .lead { order: 6; }
  .hero-facts { order: 7; }
}
@media (max-width: 1040px) {
  .cards-4, .service-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .figure-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .parts-row, .parts.is-portrait .parts-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .parts-in > :only-child { grid-column: 1 / -1; max-width: 360px; justify-self: center; }
  .parts-arrow { transform: rotate(90deg); justify-self: center; }
  .cards-4 { grid-template-columns: minmax(0, 1fr); }
  .finishes { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cards, .steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .studios, .faq-wrap { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sample { flex-direction: column; align-items: flex-start; padding: 32px 28px; }
  .guide-list { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .price-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 18px 20px; }
  .price-row > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .price-head { display: none; }
  .price-table .price-row:nth-child(2) { border-top: 0; }
  .price-col .price-each { display: inline; margin: 0 0 0 4px; }
}
@media (max-width: 400px) {
  .hide-xs { display: none; }
}
@media (max-width: 560px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  .hide-sm { display: none; }
  .cube-axes { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .cube-label { padding-top: 6px; }
  .cube-box { padding: 12px; }
  .upload-panel { padding: 32px 18px; }
  .hero { padding: 32px 0 48px; }
  .hero h1 { font-size: 2.375rem; margin-bottom: 12px; }
  .audience { font-size: 1.0625rem; margin-bottom: 18px; }
  .lead { font-size: 1.0625rem; }
  .cta-row .btn { flex: 1 1 100%; }
  .hero .cta-row .btn { flex: 1 1 140px; padding: 13px 12px; font-size: 1rem; }
  .section { padding: 56px 0; }
  .ba-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; scrollbar-color: var(--icon) var(--panel); }
  .ba-thumbs li { flex: 0 0 72px; }
  .guide-group { margin-top: 36px; }
  .guide-card a { grid-template-columns: minmax(0, 1fr) 80px; gap: 16px; padding: 20px 0; }
  .guide-card img { width: 80px; height: 80px; }
  .service-cards { grid-template-columns: minmax(0, 1fr); }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .lightbox { width: 100vw; }
  .lightbox-box { border-radius: 0; }
  .lightbox-stage img { max-height: 70vh; }
  .ba-caption { flex-direction: column; gap: 6px; min-height: 0; }
  .ba-handle { width: 42px; height: 42px; margin: -21px 0 0 -21px; }
  .sample { padding: 28px 22px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .article { padding: 28px 0 56px; }
  .prose h2 { font-size: 1.3125rem; margin-top: 36px; }
  .article-lead { font-size: 1.0625rem; }
  .split-table th, .split-table td { padding: 10px 12px; }
}

/* Shared by the static website and the Vue counter. Keep the header identical
   across both renderers without importing the marketing page's global styles. */
.site-header {
  --navy: #1d3558; --navy-deep: #13264a; --slate: #3d5c72;
  --line: #e3e7ee; --white: #fff; --mint: #4ef2be; --gutter: 24px;
  --font: 'Ubuntu', system-ui, -apple-system, 'Segoe UI', sans-serif;
  position: sticky; top: 0; z-index: 50;
  flex: none; border-bottom: 1px solid var(--line); background: var(--white);
  font: 400 17px/1.6 var(--font); -webkit-font-smoothing: antialiased;
}
/* Leave anchor targets and keyboard-focused controls below the pinned header. */
html:has(.site-header) { scroll-padding-top: 93px; }
/* Legacy view wrappers must not bound the sticky header to its own height. */
.general-counter .counter-header-slot { display: contents; }
@media (max-width: 1220px) { html:has(.site-header) { scroll-padding-top: 142px; } }
@media (max-width: 560px) { html:has(.site-header) { scroll-padding-top: 138px; } }
.site-header *, .site-header *::before, .site-header *::after { box-sizing: border-box; }
.site-header .wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.site-header .header-row { display: flex; align-items: center; gap: 32px; min-height: 76px; }
.site-header .brand img { display: block; max-width: 100%; height: 48px; width: auto; }
.site-header .nav { display: flex; gap: 20px; margin-left: auto; }
.site-header .nav a { color: var(--slate); text-decoration: none; font-size: .9375rem; white-space: nowrap; padding: 6px 0; }
.site-header .nav a:hover { color: var(--navy); }
.site-header .nav a[aria-current='page'] {
  color: var(--navy); text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: .45em; text-decoration-color: var(--mint);
}
.site-header .header-ctas { display: flex; gap: 10px; }
.site-header .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 8px; border: 1px solid transparent; padding: 8px 14px;
  font: 500 .9375rem/1.2 var(--font); min-height: 44px;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.site-header .btn-primary { background: var(--navy); color: var(--white); }
.site-header .btn-primary:hover { background: var(--navy-deep); }
.site-header .btn-ghost { background: var(--white); color: var(--navy); border-color: #cfd5e0; }
.site-header .btn-ghost:hover { border-color: var(--navy); }
.site-header .btn:disabled { cursor: wait; opacity: .55; }
.site-header .icon-upload { flex: none; }
.site-header .site-menu-toggle { display: none; }
.site-header :is(a, button):focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
@media (max-width: 1220px) {
  .site-header .header-row { flex-wrap: wrap; min-height: 0; row-gap: 0; padding-top: 12px; align-content: flex-start; }
  .site-header .header-ctas { margin-left: auto; }
  .site-header[data-menu-ready] .site-menu-toggle {
    display: flex; align-items: center; justify-content: space-between;
    order: 3; flex: 1 0 100%; margin: 10px calc(-1 * var(--gutter)) 0;
    padding: 0 var(--gutter); min-height: 48px; border: 0; border-top: 1px solid var(--line);
    background: var(--white); color: var(--navy); font: 500 16px/1.4 var(--font); cursor: pointer;
  }
  .site-header .site-menu-toggle[aria-expanded='true'] svg { transform: rotate(180deg); }
  .site-header .nav {
    display: grid; grid-template-columns: 1fr; order: 4; flex: 1 0 100%;
    gap: 0; margin: 0 calc(-1 * var(--gutter)); padding: 8px var(--gutter) 16px;
    background: var(--white); max-height: calc(100dvh - 150px); overflow-y: auto;
    overscroll-behavior-y: contain;
  }
  .site-header[data-menu-ready] .nav {
    position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    box-shadow: 0 12px 24px -16px rgb(13 26 51 / .3);
  }
  .site-header[data-menu-ready]:not([data-menu-open='true']) .nav { display: none; }
  .site-header .nav a { display: flex; align-items: center; min-height: 44px; padding: 10px 8px; white-space: normal; font-size: 16px; }
  .site-header .nav a:hover { background: #f7f8fa; }
  .site-header .nav a:focus-visible { outline-offset: 0; }
}
@media (min-width: 561px) and (max-width: 1220px) {
  .site-header .nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .site-header { --gutter: 16px; font-size: 16px; }
  .site-header .header-row { column-gap: 12px; }
  .site-header .brand img { height: 40px; }
}
@media (max-width: 400px) { .site-header .hide-xs { display: none; } }
@media (prefers-reduced-motion: reduce) { .site-header .btn { transition: none; } }