/* 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;
  --label: #7c88a0;
  --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); }
h1, h2, h3 { margin: 0; line-height: 1.15; font-weight: 700; color: var(--navy); }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }

.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: 10;
  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; }
.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 --------------------------------------------------------- */
.site-header { border-bottom: 1px solid var(--line); background: var(--white); }
.header-row { display: flex; align-items: center; gap: 32px; min-height: 76px; }
.brand img { height: 48px; width: auto; }
.nav { display: flex; gap: 20px; margin-left: auto; }
.nav a { color: var(--slate); text-decoration: none; font-size: .9375rem; white-space: nowrap; }
.nav a:hover { color: var(--navy); }
.header-ctas { display: flex; gap: 10px; }

/* ---- 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;
}
.eyebrow {
  color: var(--label); font-size: .75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em; margin-bottom: 18px;
}
.hero h1 {
  font-size: clamp(2.5rem, 5.2vw, 4.25rem); letter-spacing: -.025em; line-height: 1.02;
  margin-bottom: 22px;
}
.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); }
.ba-handle:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
.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 {
  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; }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 26px 28px;
}
.card h3 { font-size: 1.1875rem; margin-bottom: 10px; }
.card h3::before {
  content: ''; display: block; width: 28px; height: 3px; border-radius: 2px;
  background: var(--mint); margin-bottom: 16px;
}
.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: 16px; padding: 44px 48px;
  background-image: radial-gradient(circle at 100% 0, rgba(78, 242, 190, .16), transparent 46%);
}
.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; }
.faq summary::after {
  content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-52%);
  font-size: 1.5rem; font-weight: 400; color: var(--lilac);
}
.faq details[open] summary::after { content: '–'; }
.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::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; }
.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; }
.prose a { text-underline-offset: 2px; }
.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); }
.article-credit { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .8125rem; color: var(--label); }
.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-list {
  list-style: none; margin: 32px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
}
.guide-card a {
  display: block; height: 100%; text-decoration: none; color: inherit;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.guide-card a:hover { border-color: var(--lilac); }
.guide-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.guide-card h2 { font-size: 1.3125rem; margin: 20px 22px 8px; }
.guide-card p { margin: 0 22px; color: var(--slate); font-size: .96875rem; }
.guide-more { display: inline-block; margin: 14px 22px 22px; color: var(--navy); font-weight: 500; }
.guide-more::after { content: ' \2192'; }

/* ---- cookie banner (consent.js; same shape as the counter's) ---------- */
.consent {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(0, 0, 0, .6);
}
.consent[hidden] { display: none; }
.consent-box {
  width: 100%; max-width: 28rem; background: var(--white); border-radius: 10px; padding: 24px;
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .35);
}
.consent-title { font-size: 1.125rem; margin-bottom: 8px; }
.consent-text { font-size: .9375rem; color: var(--slate); margin-bottom: 22px; }
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.consent-pill {
  position: fixed; right: 8px; bottom: 8px; z-index: 40;
  border: 1px solid #cfd5e0; border-radius: 6px; background: rgba(255, 255, 255, .9);
  padding: 4px 8px; font: 500 .6875rem/1.2 var(--font); color: var(--muted); cursor: pointer;
}
.consent-pill[hidden] { display: none; }
.consent-pill:hover { color: var(--navy); background: var(--white); }
.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: #9aa5ba; 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; }
.article-figure .ba-stage.is-portrait { max-width: 460px; margin: 0 auto; }
.article-figure .ba-stage.is-tall { max-width: 400px; margin: 0 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-hero .hero-show .ba-stage.is-portrait { max-width: 500px; margin: 0 auto; }
.service-hero .hero-show .ba-stage.is-tall { max-width: 440px; margin: 0 auto; }
.service-figure { margin: 0; }
.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 .ba-stage.is-portrait { max-width: 420px; margin: 0 auto; }
.figure-grid .ba-stage.is-tall { max-width: 360px; margin: 0 auto; }
.figure-grid .service-figure figcaption { max-width: 34em; margin-left: auto; margin-right: auto; }
.figure-grid + .ba-credit { margin-top: 28px; }
.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 { font-size: 2rem; color: var(--lilac); line-height: 1; }
.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); }
.work-badge {
  position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 999px;
  background: rgba(13, 26, 51, .7); color: var(--white);
  font-size: .6875rem; font-weight: 600; letter-spacing: .04em;
}
.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 {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid #dfe3ea; background: var(--white);
  color: var(--navy); font: 500 1.375rem/1 var(--font); cursor: pointer;
}
.lightbox-btn:hover { border-color: var(--navy); }

/* ---- narrower screens ----------------------------------------------- */
@media (max-width: 1220px) {
  .nav { display: none; }
  .header-ctas { margin-left: auto; }
}
@media (max-width: 1040px) {
  /* ONE COLUMN, AND THE SLIDER COMES STRAIGHT AFTER THE HEADLINE. Stacked
     in source order the slider landed below the fold on a phone - the page
     opened on four paragraphs about pictures and no picture. The copy box
     dissolves (display: contents) so its children and the slider can be
     ordered as one list. */
  .hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hero-copy { display: contents; }
  .hero-copy > * { max-width: 40em; }
  .eyebrow { order: 1; }
  .hero h1 { order: 2; }
  .hero-show { order: 3; margin: 4px 0 28px; }
  .lead { order: 4; }
  .hero .cta-row { order: 5; margin-top: 22px; }
  .fine { 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: 16px; }
  .steps { 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; }
}
@media (max-width: 400px) {
  .hide-xs { display: none; }
}
@media (max-width: 560px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  .header-row { min-height: 64px; gap: 12px; }
  .brand img { height: 40px; }
  .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: 18px; }
  .eyebrow { margin-bottom: 12px; }
  .lead { font-size: 1.0625rem; }
  .cta-row .btn { flex: 1 1 100%; }
  .section { padding: 56px 0; }
  .ba-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .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; }
  .card { padding: 22px; }
  .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; }
}