/* Vanolee Design Co. — set after the Vanolee Signature: round letters with soft ends, red ink on warm paper,
   spaced capitals like DESIGN CO. Headlines in Comfortaa, text in Nunito (both SIL OFL, in fonts/). */
@font-face { font-family: 'Comfortaa'; src: url('fonts/comfortaa-var-latin.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('fonts/nunito-var-latin.woff2') format('woff2'); font-weight: 200 1000; font-display: swap; }

:root {
  --paper: #F6F2E9; --paper-2: #EFEADF; --paper-3: #E8E2D5; --white: #FFFDF8;
  --ink: #191917; --ink-2: #33312E; --muted: #6B675F; --dim: #9E998F;
  --line: #E6E1D6; --line-strong: #D3CCBE;
  --red: #CF2B20; --red-2: #B4241B; --red-soft: rgba(207, 43, 32, 0.1);
  --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Comfortaa', 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius: 26px; --radius-sm: 16px; --pill: 999px;
  --lift: 0 1px 2px rgba(25, 25, 23, 0.04), 0 22px 46px -28px rgba(25, 25, 23, 0.28);
  --gutter: clamp(20px, 5vw, 76px);
  --header-h: 96px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--font); overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
ul { list-style: none; }
.skip { position: absolute; left: -9999px; top: 12px; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: var(--pill); z-index: 100; }
.skip:focus { left: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: var(--red); color: var(--white); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 8px; }

/* ------------------------------------------------------------------ type */
.label { font: 700 11.5px/1.5 var(--font); letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.label b { color: var(--red); font-weight: 800; }
.label i { font-style: normal; color: var(--dim); }
.display { font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.06; font-size: clamp(42px, 6.4vw, 100px); text-wrap: balance; }
.display-2 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; font-size: clamp(30px, 3.8vw, 56px); text-wrap: balance; }
.display-3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.015em; line-height: 1.18; font-size: clamp(23px, 2.3vw, 33px); text-wrap: balance; }
.note { font-family: var(--display); font-weight: 400; color: var(--ink-2); font-size: clamp(19px, 1.55vw, 23px); line-height: 1.4; }
.lede { color: var(--muted); font-size: clamp(16.5px, 1.3vw, 19px); max-width: 580px; line-height: 1.65; }
.arrow { color: var(--red); display: inline-block; font-weight: 800; transition: transform 0.35s var(--ease-out); }
a:hover .arrow, button:hover .arrow { transform: translateX(4px); }
.arrow.back { transition: transform 0.35s var(--ease-out); }
a:hover .arrow.back { transform: translateX(-4px); }
.rule { height: 1px; background: var(--line); }

/* --------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; font: 800 15.5px/1 var(--font); border: 2px solid var(--ink); border-radius: var(--pill); background: transparent; color: var(--ink); cursor: pointer; transition: transform 0.35s var(--ease-out), background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.35s; }
.btn:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.btn:hover .arrow { color: var(--paper); }
.btn-red { background: var(--red); border-color: var(--red); color: var(--white); box-shadow: 0 14px 28px -18px rgba(207, 43, 32, 0.9); }
.btn-red .arrow { color: var(--white); }
.btn-red:hover { background: var(--red-2); border-color: var(--red-2); color: var(--white); }
.btn-ghost { background: transparent; }
.on-red .btn { border-color: var(--white); background: var(--white); color: var(--ink); box-shadow: none; }
.on-red .btn .arrow { color: var(--red); }
.on-red .btn:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.on-red .btn:hover .arrow { color: var(--white); }
.on-red .btn-ghost { background: transparent; color: var(--white); border-color: rgba(255, 253, 248, 0.7); }
.on-red .btn-ghost .arrow { color: var(--white); }
.text-link { display: inline-flex; gap: 8px; align-items: center; font: 800 15px/1.25 var(--font); color: var(--ink); padding: 4px 0 5px; border-bottom: 2px solid rgba(207, 43, 32, 0.35); transition: border-color 0.3s; }
.text-link:hover { border-color: var(--red); }
.label .text-link { text-transform: none; letter-spacing: 0; }
button.text-link { background: none; border: 0; border-bottom: 2px solid rgba(207, 43, 32, 0.35); cursor: pointer; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------------------------------------------------------------- header */
/* Two rows: the signature with the account and the cart, then the shop by category. Scrolling down tucks the first
   row away so the categories stay in reach; scrolling up brings it back. The frosted ground sits on a layer of its
   own, so the header never becomes the containing block of the full-screen phone menu. */
:root { --header-main-h: 88px; --header-cats-h: 52px; --header-h: calc(var(--header-main-h) + var(--header-cats-h)); }
.header { position: sticky; top: 0; z-index: 50; transition: transform 0.45s var(--ease-out); }
.header::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(246, 242, 233, 0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.header.is-tucked { transform: translateY(calc(-1 * var(--header-main-h))); }
.header-main { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: var(--header-main-h); padding: 0 var(--gutter); }
/* the client's signature at the 230 px their guide gives for a website header; the compact version on phones */
.wordmark { display: inline-flex; align-items: center; flex: none; }
.wordmark picture { display: block; }
.wordmark .signature { display: block; width: 230px; height: auto; }
.header-actions { display: flex; align-items: center; gap: 14px; }
.account-link { padding: 10px 6px; font: 800 15px/1 var(--font); color: var(--ink-2); transition: color 0.25s; }
.account-link:hover, .account-link[aria-current="page"] { color: var(--red); }
.btn-small { padding: 11px 18px; font-size: 14.5px; }
.cart-link { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: var(--ink); background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line-strong); transition: box-shadow 0.25s, color 0.25s, transform 0.35s var(--ease-out); }
.cart-link:hover, .cart-link[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--ink); transform: translateY(-1px); }
.cart-icon { width: 24px; height: 24px; display: block; }
.cart-link .badge { position: absolute; top: -3px; right: -5px; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; background: var(--red); color: var(--white); font: 800 11px/1 var(--font); border-radius: 999px; box-shadow: 0 0 0 2px var(--paper); }
.cart-link .badge:empty, .cart-link .badge[data-count="0"] { display: none; }
.header-cats { position: relative; display: flex; align-items: center; gap: 4px; height: var(--header-cats-h); padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.header-cats::-webkit-scrollbar { display: none; }
.header-cats a { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--pill); font: 800 15px/1 var(--font); color: var(--ink-2); white-space: nowrap; transition: background 0.25s, color 0.25s; }
/* centred in the bar; auto margins give way to a start-aligned scroll when the row is wider than the screen */
.header-cats a:first-child { margin-left: auto; }
.header-cats a:last-child { margin-right: auto; }
.header-cats a:hover { background: var(--paper-2); color: var(--ink); }
.header-cats a[aria-current="page"] { color: var(--ink); background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.header-cats a[aria-current="page"]::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.menu-button { display: none; border: 2px solid var(--ink); background: transparent; padding: 10px 16px; border-radius: var(--pill); font: 800 14px/1 var(--font); cursor: pointer; }
.menu-panel { display: none; }
@media (max-width: 900px) {
  :root { --header-main-h: 72px; --header-cats-h: 50px; }
  .header .wordmark .signature { width: 184px; }
  .account-link, .signup-link { display: none; }
  .menu-button { display: inline-flex; }
  .header-cats a { padding: 9px 12px; font-size: 14.5px; }
  .menu-panel { display: grid; position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; align-content: start; background: var(--paper); padding: 14px var(--gutter) 32px; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.3s var(--ease), transform 0.4s var(--ease-out), visibility 0s linear 0.4s; }
  .menu-panel > a { padding: 16px 0; border-bottom: 1px solid var(--line); font: 700 20px/1.15 var(--display); color: var(--ink); }
  .menu-panel > a[aria-current="page"] { color: var(--red); }
  .menu-account { display: flex; gap: 10px; padding: 8px 0 18px; border-bottom: 1px solid var(--line); }
  .header.menu-open .menu-panel { opacity: 1; visibility: visible; transform: none; transition: opacity 0.3s var(--ease), transform 0.4s var(--ease-out); }
  .menu-lock { overflow: hidden; }
}
@media (max-width: 560px) {
  :root { --header-main-h: 64px; }
  .header .wordmark .signature { width: 160px; }
  .footer .wordmark .signature { width: 200px; }
  .header-actions { gap: 10px; }
  .cart-link { width: 42px; height: 42px; }
}

/* ---------------------------------------------------------------- layout */
.section { padding: clamp(72px, 9vw, 136px) var(--gutter); }
.section-tight { padding: clamp(32px, 4vw, 56px) var(--gutter); }
.section-head { display: grid; gap: 18px; max-width: 900px; margin-bottom: clamp(34px, 4.6vw, 58px); }
.section-head .lede { margin-top: 4px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.split-narrow { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.frame { position: relative; }
/* a soft caption chip in the corner of an image */
.frame-tag { position: absolute; left: 14px; top: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 28px); padding: 8px 14px 8px 11px; border-radius: var(--pill); background: rgba(255, 253, 248, 0.92); box-shadow: 0 1px 2px rgba(25, 25, 23, 0.06); font: 700 13px/1.2 var(--font); color: var(--ink-2); }
.frame-tag::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 1s var(--ease-out); }
[data-reveal].in { opacity: 1; transform: none; }
.band { position: relative; margin: 0 var(--gutter) clamp(56px, 7vw, 96px); background: var(--red); color: var(--white); padding: clamp(56px, 8vw, 120px) clamp(26px, 6vw, 96px); border-radius: clamp(28px, 3.6vw, 48px); overflow: hidden; }
.band .label, .band .label b { color: rgba(255, 253, 248, 0.78); }
.band .lede { color: rgba(255, 253, 248, 0.86); }
.band-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.band .mark-bg { position: absolute; right: 3%; top: 50%; width: clamp(200px, 26vw, 420px); height: auto; transform: translateY(-50%); opacity: 0.14; pointer-events: none; }

/* ------------------------------------------------------------------ hero */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 60px); align-items: center; min-height: calc(100svh - var(--header-h)); padding: clamp(28px, 5vw, 64px) var(--gutter); }
.hero-copy { display: grid; gap: 24px; max-width: 620px; }
.hero .display .line { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.hero .display .word { display: inline-block; transform: translateY(115%); animation: rise 1.1s var(--ease-out) forwards; }
.hero .display .line:nth-child(2) .word { animation-delay: 0.08s; }
.hero .display .line:nth-child(3) .word { animation-delay: 0.16s; }
/* the red word gets a brush swash beneath it, tapering off like the end of a stroke */
.hero .display .red { color: var(--red); padding-bottom: 0.12em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' preserveAspectRatio='none'%3E%3Cpath d='M3 15C60 7 136 3 237 6C153 11 84 15 10 22C5 22 1 19 3 15Z' fill='%23CF2B20'/%3E%3C/svg%3E") no-repeat 0.04em 100% / 96% 0.2em; }
.hero .note { color: var(--red); }
@keyframes rise { to { transform: none; } }
.hero-stage { position: relative; aspect-ratio: 16 / 10; }
/* the film sits on the page's own paper; a feathered edge hides any decoder colour drift at the frame's border */
.hero-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: transparent;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent), linear-gradient(180deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent), linear-gradient(180deg, transparent, #000 4%, #000 96%, transparent); mask-composite: intersect; }
.hero-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 20px; padding-top: 18px; border-top: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) { .hero .display .word { animation: none; transform: none; } }

/* ------------------------------------------------------ scrubbed stories */
.story { position: relative; }
.story .scrub-track { height: 420vh; position: relative; }
.story .scrub-stage { position: sticky; top: var(--header-cats-h); height: calc(100svh - var(--header-cats-h)); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(24px, 4vw, 60px); align-items: center; padding: 0 var(--gutter); }
.story .scrub-view { position: relative; aspect-ratio: 16 / 10; }
.story .scrub-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.story .beats { position: relative; min-height: 280px; }
.story .beat { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.8s var(--ease-out); pointer-events: none; }
.story .beat.is-active { opacity: 1; transform: none; pointer-events: auto; }
.story .beat .label { margin-bottom: 18px; }
.story .beat h3 { margin-bottom: 16px; }
.story .beat p { color: var(--muted); max-width: 420px; }
.story .hud { position: absolute; left: var(--gutter); bottom: 22px; display: flex; gap: 18px; font: 700 12.5px/1 var(--font); color: var(--dim); }
.story .hud b { font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.story [data-loader] { color: var(--red); transition: opacity 0.5s; }
.story [data-loader].is-done { opacity: 0; }
.story-head { padding: 0 var(--gutter); margin: 0 auto clamp(8px, 2vw, 24px); max-width: none; }
.story .beat h3 { font-size: clamp(26px, 2.8vw, 40px); }
.story .scrub-view canvas { border-radius: var(--radius); }
.scrub-static figure img { border-radius: var(--radius); }
.scrub-static { display: none; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 0 var(--gutter); }
.story.is-static .scrub-track { display: none; }
.story.is-static .scrub-static { display: grid; }
.scrub-static figure { position: relative; }
.scrub-static figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); background: var(--paper); }
.scrub-static figcaption { margin-top: 12px; font: 700 15px/1.45 var(--font); color: var(--ink-2); }
.scrub-static figcaption span { display: block; margin-bottom: 2px; font: 800 11px/1.5 var(--font); letter-spacing: 0.22em; text-transform: uppercase; color: var(--red); }

/* --------------------------------------------------------- turntables */
.turn { position: relative; aspect-ratio: 6 / 5; }
.turn[data-turntable] { box-sizing: content-box; padding-bottom: 64px; }
.turn[data-turntable] > img, .turn[data-turntable] > canvas { height: calc(100% - 64px); }
.turn img, .turn canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  /* feathered edges: a render's floor shadow fades into the paper instead of stopping at the frame */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(180deg, transparent, #000 4%, #000 86%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(180deg, transparent, #000 4%, #000 86%, transparent); mask-composite: intersect; }
.turn canvas { opacity: 0; transition: opacity 0.6s var(--ease); }
.turn.is-ready canvas { opacity: 1; }
.rotation-control { position: absolute; right: 12px; bottom: 12px; z-index: 4; }
.rotation-knob { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 15px 6px 6px; border: 1px solid var(--line-strong); border-radius: var(--pill); background: var(--white); color: var(--ink); box-shadow: 0 2px 8px rgba(25,25,23,.07); font: 800 12px/1 var(--font); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.rotation-knob:not(:disabled):hover { border-color: var(--red); }
.rotation-knob:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.rotation-knob:active { cursor: grabbing; }
.rotation-knob:disabled { cursor: wait; color: var(--muted); opacity: .65; }
.rotation-dial { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); }
.rotation-dial svg { width: 20px; height: 20px; }
.rotation-mark { position: absolute; inset: -2px; transform: rotate(var(--view-angle, 0deg)); pointer-events: none; }
.rotation-mark::before { content: ''; position: absolute; top: 0; left: calc(50% - 2px); width: 4px; height: 4px; border-radius: 50%; background: var(--red); }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .product .turn[data-turntable] { padding-bottom: 56px; }
  .product .turn[data-turntable] > img, .product .turn[data-turntable] > canvas { height: calc(100% - 56px); }
  .product .rotation-control { bottom: 10px; }
  .product .rotation-knob { min-height: 40px; gap: 6px; padding: 5px 12px 5px 5px; font-size: 11px; }
  .product .rotation-dial { width: 28px; height: 28px; }
  .product .rotation-dial svg { width: 17px; height: 17px; }
}

/* ------------------------------------------------------------ products */
.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 26px); }
.product { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px 24px; display: grid; gap: 10px; align-content: start; position: relative; transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.3s; }
.product:hover { transform: translateY(-4px); box-shadow: var(--lift); border-color: var(--line-strong); }
.product .turn { margin: 0 -8px; }
.product .num { position: absolute; left: 20px; top: 18px; z-index: 2; }
.product .num, .service > .label { font-size: 13px; letter-spacing: 0.06em; }
.product h3 { font: 700 21px/1.2 var(--display); letter-spacing: -0.01em; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.product h3 .arrow { font-size: 19px; }
.product .spec { font: 700 13px/1.5 var(--font); color: var(--dim); }
.product p { color: var(--muted); font-size: 15px; }
.product .go { position: absolute; inset: 0; border-radius: var(--radius); }
.product .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { border: 1.5px solid var(--line-strong); padding: 6px 11px; border-radius: var(--pill); font: 700 12.5px/1 var(--font); color: var(--muted); background: var(--paper); }

/* ------------------------------------------------------- product page */
.product-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(30px, 5vw, 90px); align-items: start; padding: clamp(12px, 2vw, 24px) var(--gutter) clamp(60px, 7vw, 100px); }
.product-hero .turn { aspect-ratio: 6 / 5; position: sticky; top: calc(var(--header-h) + 24px); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.product-copy { display: grid; gap: 20px; padding-top: 8px; }
.specs { display: grid; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 22px; }
.specs div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.specs div:last-child { border-bottom: 0; }
.specs dt { font: 800 11.5px/1.9 var(--font); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.specs dd { color: var(--ink-2); }
.options { display: grid; gap: 18px; padding: 26px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.options h3 { font: 700 20px/1.2 var(--display); letter-spacing: -0.01em; }
.field { display: grid; gap: 9px; }
.field label { font: 800 11.5px/1 var(--font); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea { background: var(--paper); border: 1.5px solid var(--line-strong); color: var(--ink); font: 500 16px/1.5 var(--font); padding: 12px 14px; outline: none; transition: border-color 0.25s, box-shadow 0.25s; border-radius: 14px; width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--red); box-shadow: 0 0 0 4px var(--red-soft); }
.field textarea { min-height: 130px; resize: vertical; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: inline-block; padding: 10px 16px; border: 1.5px solid var(--line-strong); border-radius: var(--pill); font: 700 14px/1 var(--font); color: var(--ink-2); background: var(--paper); transition: all 0.25s; }
.chip input:hover + span { border-color: var(--ink-2); }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 2px; }
.added { font: 800 14px/1.5 var(--font); color: var(--red); min-height: 21px; }

/* ------------------------------------------------------------- studio */
.services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.service { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 30px 34px; display: grid; gap: 14px; align-content: start; position: relative; overflow: hidden; }
.service::before { content: ''; position: absolute; left: 30px; top: 0; width: 46px; height: 5px; border-radius: 0 0 6px 6px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ease-out); }
.service.in::before { transform: scaleX(1); }
.service h3 { font: 700 clamp(20px, 1.9vw, 25px)/1.2 var(--display); letter-spacing: -0.01em; }
.service p { color: var(--muted); font-size: 15.5px; }
.service ul { display: grid; gap: 7px; font-size: 14.5px; color: var(--ink-2); }
.service li { display: flex; gap: 10px; align-items: baseline; }
.service li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex: none; transform: translateY(-1px); }
.specimen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.specimen div { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; display: grid; gap: 10px; min-height: 210px; align-content: space-between; }
.specimen .big { font-family: var(--display); font-size: clamp(56px, 6.4vw, 108px); line-height: 0.95; letter-spacing: -0.03em; font-weight: 700; }
.specimen .big.text { font-family: var(--font); font-weight: 800; letter-spacing: -0.02em; }
.specimen .big.red { color: var(--red); }
.palette { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.chipcard { aspect-ratio: 1; display: grid; align-content: end; padding: 16px; border-radius: 22px; font: 800 12px/1.6 var(--font); letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid var(--line); transform: translateY(12px) rotate(-1.5deg); opacity: 0; transition: transform 0.9s var(--ease-out), opacity 0.7s var(--ease); }
.chipcard.in { transform: none; opacity: 1; }
.chipcard:nth-child(2).in { transition-delay: 0.08s; }
.chipcard:nth-child(3).in { transition-delay: 0.16s; }
.chipcard:nth-child(4).in { transition-delay: 0.24s; }

/* ---------------------------------------------------------- steps / faq */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.step { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px 30px; display: grid; gap: 12px; align-content: start; }
.step .big { font: 700 clamp(38px, 4vw, 58px)/1 var(--display); letter-spacing: -0.03em; color: var(--red); }
.step h3 { font: 700 clamp(19px, 1.7vw, 23px)/1.22 var(--display); letter-spacing: -0.01em; }
.step p { color: var(--muted); font-size: 15.5px; }
.folds { display: grid; gap: 12px; }
.fold { background: var(--white); border: 1px solid var(--line); border-radius: 22px; padding: 0 24px; transition: border-color 0.3s; }
.fold[open] { border-color: var(--line-strong); }
.fold summary { list-style: none; display: grid; grid-template-columns: 44px minmax(0, 1fr) 30px; gap: 14px; align-items: center; padding: 20px 0; cursor: pointer; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary .num { font: 800 13px/1 var(--font); letter-spacing: 0.08em; color: var(--red); }
.fold summary h3 { font: 700 clamp(17px, 1.5vw, 21px)/1.3 var(--display); letter-spacing: -0.01em; }
.fold summary .plus { position: relative; width: 30px; height: 30px; justify-self: end; border-radius: 50%; background: var(--paper); }
.fold summary .plus::before, .fold summary .plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 2px; background: var(--ink); transform: translate(-50%, -50%); transition: transform 0.35s var(--ease-out); }
.fold summary .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.fold[open] summary .plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.fold-body { overflow: hidden; transition: height 0.45s var(--ease-out); }
.fold-body > div { padding: 0 0 24px 58px; color: var(--muted); max-width: 740px; }
.fold-body a { color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--red); }
.guide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 60px); align-items: center; }
.guide svg { width: 100%; height: auto; display: block; border-radius: var(--radius); overflow: hidden; }
.checklist { display: grid; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 24px; }
.checklist .label { padding-top: 14px; }
.checklist div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.checklist div:last-child { border-bottom: 0; }
.checklist b { color: var(--red); font: 800 13px/1.75 var(--font); letter-spacing: 0.08em; }
.checklist p { color: var(--ink-2); font-size: 15.5px; font-weight: 600; }
.checklist p span { display: block; color: var(--muted); font-size: 14.5px; font-weight: 400; }

/* -------------------------------------------------------------- quote */
.quote-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); align-items: start; }
.cart { display: grid; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 20px; }
.cart-item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cart-item:last-child { border-bottom: 0; }
.cart-item img { width: 96px; aspect-ratio: 6 / 5; object-fit: contain; background: var(--paper); border-radius: 14px; }
.cart-item h3 { font: 700 17px/1.2 var(--display); letter-spacing: -0.01em; }
.cart-item p { color: var(--muted); font-size: 14px; margin-top: 4px; }
.cart-item button { background: none; border: 1.5px solid var(--line-strong); border-radius: var(--pill); cursor: pointer; font: 800 13px/1 var(--font); color: var(--muted); padding: 9px 14px; transition: color 0.25s, border-color 0.25s; }
.cart-item button:hover { color: var(--red); border-color: var(--red); }
.cart-empty { padding: 22px 0; color: var(--muted); }
.cart-empty a { color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--red); }
.form { display: grid; gap: 18px; }
.form .note-line { color: var(--muted); font-size: 14px; }
.form .note-line a { color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--red); }
.form.is-sent .btn-red { background: var(--ink); border-color: var(--ink); box-shadow: none; }
.honeypot { position: absolute; left: -9999px; }

/* ---------------------------------------------------------- misc blocks */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.stat { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px 28px; display: grid; gap: 10px; }
.stat b { font: 700 clamp(40px, 4.6vw, 66px)/1 var(--display); letter-spacing: -0.03em; }
.stat b.red { color: var(--red); }
.stat span { font: 700 14px/1.5 var(--font); color: var(--muted); }
.statement { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); align-items: end; }
.statement blockquote { font: 700 clamp(30px, 3.8vw, 56px)/1.12 var(--display); letter-spacing: -0.02em; text-wrap: balance; }
.statement blockquote em { font-style: normal; color: var(--red); }
.statement p { color: var(--muted); font-size: clamp(15.5px, 1.15vw, 17.5px); }
.statement p.label { font-size: 11.5px; }
.exhibits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.exhibit { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 16px 22px; display: grid; gap: 12px; }
.exhibit figure { aspect-ratio: 6 / 5; background: var(--paper); border-radius: 18px; overflow: hidden; }
.exhibit figure img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.7s var(--ease-out); }
.exhibit:hover figure img { transform: scale(1.04); }
.exhibit h3 { font: 700 20px/1.2 var(--display); letter-spacing: -0.01em; padding: 0 6px; }
.exhibit p { color: var(--muted); font-size: 15px; padding: 0 6px; }
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.contact-grid div { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px 30px; display: grid; gap: 10px; align-content: start; }
.contact-grid h3 { font: 700 18px/1.2 var(--display); letter-spacing: -0.01em; }
.contact-grid p, .contact-grid a { color: var(--muted); font-size: 15.5px; }
.contact-grid a.big { color: var(--ink); font: 800 clamp(18px, 1.6vw, 22px)/1.3 var(--font); border-bottom: 2px solid var(--red); display: inline; width: fit-content; }

/* ------------------------------------------------------------------ shop */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 700 14px/1.4 var(--font); color: var(--muted); }
.crumbs a { color: var(--ink-2); border-bottom: 1.5px solid transparent; transition: border-color 0.25s, color 0.25s; }
.crumbs a:hover { color: var(--red); border-color: var(--red); }
.crumbs .sep { color: var(--dim); }
.crumbs-row { padding-bottom: 6px; }
.cat-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding: clamp(26px, 4vw, 52px) var(--gutter) clamp(20px, 3vw, 36px); }
.cat-copy { display: grid; gap: 20px; max-width: 640px; }
.cat-copy .crumbs { margin-bottom: 4px; }
.cat-copy .display { font-size: clamp(40px, 5vw, 76px); }
.cat-stage .turn { border-radius: var(--radius); }
a:hover .arrow.down { transform: translateY(3px); }
.cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cat-card h3 { font-size: 22px; }
.soon-chip { display: inline-flex; align-items: center; gap: 7px; width: fit-content; padding: 7px 13px 7px 11px; border-radius: var(--pill); background: var(--white); box-shadow: inset 0 0 0 1.5px rgba(207, 43, 32, 0.35); font: 800 12.5px/1 var(--font); color: var(--red); }
.soon-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: soon-pulse 2.2s var(--ease) infinite; }
@keyframes soon-pulse { 50% { transform: scale(0.55); opacity: 0.5; } }
/* a product without its render yet: the V, faint, on warm paper */
.turn.placeholder { background: var(--paper-2); border-radius: 20px; overflow: hidden; }
.turn.placeholder .placeholder-mark { inset: auto; left: 50%; top: 46%; width: 30%; height: auto; transform: translate(-50%, -50%); opacity: 0.13; -webkit-mask-image: none; mask-image: none; }
.placeholder-note { position: absolute; left: 50%; bottom: 13%; transform: translateX(-50%); padding: 7px 12px; border-radius: var(--pill); background: rgba(255, 253, 248, 0.92); font: 700 12.5px/1 var(--font); color: var(--muted); white-space: nowrap; }
.product .turn.placeholder { margin: 4px 0 8px; }
/* the template gallery: four turntables in a row, two on tablets, one on phones */
.templates-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.template h3 { font-size: 22px; }
.template .spec { color: var(--muted); }
/* product page: options and pricing to come */
.price-card { display: grid; gap: 14px; padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.price-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.price-head h2 { font: 700 21px/1.2 var(--display); letter-spacing: -0.01em; }
.specs.specs-soon { background: var(--paper); padding: 2px 18px; }
.specs.specs-soon div { grid-template-columns: 180px minmax(0, 1fr); }
@media (max-width: 640px) { .specs.specs-soon div { grid-template-columns: minmax(0, 1fr); } }
.specs-soon dd { color: var(--dim); }
.cart-add { display: grid; gap: 8px; }
/* accounts, coming soon */
.account { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.account-card { display: grid; gap: 18px; justify-items: stretch; padding: clamp(28px, 4vw, 48px); background: var(--white); border: 1px solid var(--line); border-radius: clamp(26px, 3vw, 40px); }
.account-card .soon-chip { justify-self: start; }
.account-card fieldset { border: 0; display: grid; gap: 16px; margin: 0; padding: 0; min-width: 0; }
.account-card fieldset .btn { justify-self: start; }
.account-card fieldset[disabled] input { opacity: 0.6; cursor: not-allowed; }
.account-card fieldset[disabled] .btn { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.account-card .switch { font-weight: 700; color: var(--muted); }
.account-card .switch a, .account-card .note-line a { color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--red); }
.account-card .note-line { color: var(--muted); font-size: 14.5px; }
.account-stage .turn { border-radius: var(--radius); }
.fan-stage .turn, .box-stage .turn { border-radius: var(--radius); }
@media (max-width: 1100px) { .cat-grid, .templates-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .cat-hero, .templates, .account { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .cat-grid, .templates-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .soon-chip::before { animation: none; } .header { transition: none; } }

/* ---------------------------------------------------------- launch catalogue */
[hidden] { display: none !important; }

.quote-link { padding: 10px 4px; font: 800 15px/1 var(--font); color: var(--ink-2); border-bottom: 2px solid transparent; transition: color 0.25s, border-color 0.25s; white-space: nowrap; }
.quote-link:hover, .quote-link[aria-current="page"] { color: var(--red); border-color: var(--red); }
@media (max-width: 1100px) { .quote-link { display: none; } }
.group-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin: clamp(40px, 5vw, 64px) 0 clamp(18px, 2vw, 26px); padding-bottom: 14px; border-bottom: 1px solid var(--line-strong); }
.section-head + .group-head { margin-top: 0; }
.group-head span { font: 800 12px/1 var(--font); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.shop-links { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 30px; }
.shop-dept + .shop-dept { padding-top: 0; }
/* product page: options and prices */
.price-from { font: 700 15px/1 var(--font); color: var(--muted); }
.price-from b { font: 700 24px/1 var(--display); color: var(--ink); letter-spacing: -0.01em; }
.quote-chip::before { animation: none; }
.config { gap: 18px; }
.field-label { font: 800 11.5px/1 var(--font); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.field label.chip, .field label.art-choice { text-transform: none; letter-spacing: 0; font: inherit; color: inherit; }
.specs.specs-live { background: var(--paper); padding: 2px 18px; }
.specs.specs-live div { grid-template-columns: 150px minmax(0, 1fr); }
.artwork { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
.artwork legend { padding: 0 0 10px; font: 800 11.5px/1.4 var(--font); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.artwork .text-link { justify-self: start; margin-top: 4px; font-size: 14.5px; }
.art-choice { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 16px; border: 1.5px solid var(--line-strong); border-radius: 16px; background: var(--paper); cursor: pointer; transition: border-color 0.25s, background 0.25s; }
.art-choice input { accent-color: var(--red); width: 18px; height: 18px; margin: 0; }
.art-choice span { display: grid; gap: 2px; }
.art-choice b { font: 800 15px/1.3 var(--font); color: var(--ink); }
.art-choice i { font-style: normal; font-size: 13.5px; color: var(--muted); }
.art-choice em { font: 800 14px/1 var(--font); font-style: normal; color: var(--ink-2); white-space: nowrap; }
.art-choice:hover { border-color: var(--ink-2); }
.art-choice:has(input:checked) { border-color: var(--ink); background: var(--white); box-shadow: 0 0 0 3px var(--red-soft); }
.summary { display: grid; gap: 0; padding: 6px 18px; background: var(--paper); border-radius: 18px; }
.summary div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px dashed var(--line-strong); font-size: 15px; color: var(--ink-2); }
.summary div:last-child { border-bottom: 0; }
.summary b { font-weight: 800; color: var(--ink); white-space: nowrap; }
.summary .total span { font: 800 12px/1.7 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.summary .total b { font: 700 26px/1 var(--display); letter-spacing: -0.01em; }
.custom-link { font-size: 15px; color: var(--muted); }
.custom-link b { color: var(--ink-2); font-weight: 800; }
.custom-link a, .fine a { color: var(--ink); font-weight: 800; border-bottom: 2px solid var(--red); }
.fine { font-size: 13px; line-height: 1.55; color: var(--dim); }
.price-tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.price-table { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 18px; display: grid; gap: 12px; align-content: start; }
.price-table h3 { font: 700 19px/1.25 var(--display); letter-spacing: -0.01em; }
.price-table table, .addons table { width: 100%; border-collapse: collapse; font-size: 15px; }
.price-table th, .addons th { text-align: left; font: 800 11px/1.4 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding: 0 0 8px; }
.price-table td { padding: 9px 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.price-table td:nth-child(2) { font-weight: 800; color: var(--ink); }
.price-table td:nth-child(3), .price-table th:nth-child(3) { text-align: right; color: var(--muted); }
.price-table p { font-size: 13.5px; color: var(--muted); }
/* design services */
.packages { align-items: stretch; }
.package { align-content: start; }
.package-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; }
.package-price { display: flex; align-items: baseline; gap: 7px; }
.package-price b { font: 700 clamp(26px, 2.4vw, 32px)/1 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.package-price span { font: 700 13.5px/1.3 var(--font); color: var(--muted); }
.package ul { margin-top: 2px; }
.package li b { color: var(--ink); font-weight: 800; }
.package-limit { font-size: 13.5px !important; color: var(--dim) !important; border-top: 1px solid var(--line); padding-top: 12px; }
.package.bundle { grid-column: 1 / -1; background: var(--ink); border-color: var(--ink); }
.package.bundle h3, .package.bundle .package-price b, .package.bundle li b { color: var(--white); }
.package.bundle p, .package.bundle li, .package.bundle .package-price span { color: rgba(246, 242, 233, 0.78) !important; }
.package.bundle .package-limit { border-color: rgba(246, 242, 233, 0.18); }
.package:target { box-shadow: 0 0 0 3px var(--red); }
.addons { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px clamp(18px, 2.4vw, 30px); overflow-x: auto; }
.addons table { min-width: 640px; }
.addons th { padding: 14px 12px 10px 0; }
.addons tbody th, .addons td { padding: 16px 16px 16px 0; border-top: 1px solid var(--line); vertical-align: top; text-transform: none; letter-spacing: 0; }
.addons tbody th { font: 800 15.5px/1.35 var(--font); color: var(--ink); width: 30%; }
.addons tbody th span, .addons td span { display: block; margin-top: 4px; font: 400 13.5px/1.45 var(--font); color: var(--muted); }
.addons td { color: var(--ink-2); font-size: 14.5px; }
.addons td:last-child { white-space: nowrap; padding-right: 0; }
.addons td b { font: 700 20px/1 var(--display); color: var(--ink); }
.addons tr:target th, .addons tr:target td { background: var(--red-soft); }
.included { margin-top: clamp(14px, 1.8vw, 24px); }
/* custom quote */
.quote-form { gap: 26px; }
.quote-form fieldset { border: 0; margin: 0; padding: 0 0 26px; min-width: 0; display: grid; gap: 14px; border-bottom: 1px solid var(--line); }
.quote-form legend { display: flex; align-items: baseline; gap: 12px; padding: 0 0 6px; font: 700 clamp(19px, 1.7vw, 22px)/1.25 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.quote-form legend span { font: 800 13px/1 var(--font); letter-spacing: 0.08em; color: var(--red); }
.hint-line { font-size: 14.5px; color: var(--muted); margin-top: -4px; }
.quote-form .text-link { justify-self: start; font-size: 14.5px; }
.quote-form input[type="file"] { padding: 10px; font-size: 14.5px; }
.quote-aside { position: sticky; top: calc(var(--header-h) + 24px); }
.confirm { display: grid; gap: 16px; justify-items: start; padding: clamp(26px, 4vw, 44px); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.confirm .note-line { color: var(--muted); font-size: 14.5px; }
.confirm .note-line a { color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--red); }
/* cart lines: printing and the one-time design fee */
.cart-item .lines { display: grid; gap: 3px; margin-top: 6px; font-size: 14px; color: var(--muted); }
.cart-item .lines span { display: flex; justify-content: space-between; gap: 14px; }
.cart-item .lines b { color: var(--ink); font-weight: 800; }
.cart-item .lines i { font-style: normal; }
.cart-summary { margin-top: 14px; display: grid; gap: 6px; padding: 16px 20px; background: var(--paper-2); border-radius: 18px; font-size: 15px; }
.cart-summary div { display: flex; justify-content: space-between; gap: 16px; }
.cart-summary .total { padding-top: 8px; border-top: 1px dashed var(--line-strong); font-weight: 800; }
.cart-summary .total b { font: 700 22px/1 var(--display); }
.cart-summary p { font-size: 13px; color: var(--dim); }
@media (max-width: 960px) { .quote-aside { position: static; } .package.bundle { grid-column: auto; } }
@media (max-width: 640px) { .specs.specs-live div { grid-template-columns: minmax(0, 1fr); } .art-choice { grid-template-columns: 20px minmax(0, 1fr); } .art-choice em { grid-column: 2; } }

/* ---------------------------------------------------------------- footer */
.footer { padding: clamp(48px, 6vw, 80px) var(--gutter) 40px; display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 0.7fr)); gap: 32px; background: var(--paper-2); border-radius: clamp(28px, 3.6vw, 48px) clamp(28px, 3.6vw, 48px) 0 0; }
.footer h4 { font: 800 11.5px/1 var(--font); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.footer-col a { display: block; padding: 6px 0; font-size: 15px; font-weight: 600; color: var(--ink-2); transition: color 0.25s; }
.footer-col a:hover { color: var(--red); }
.footer-brand p { color: var(--muted); font-size: 15px; max-width: 320px; margin-top: 14px; }
.footer-brand .note { font-size: 19px; margin-top: 18px; color: var(--red); }
.footer-meta { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--line-strong); font: 600 13.5px/1.6 var(--font); color: var(--dim); }

/* ------------------------------------------------------------ cursor light */
.cursor-light { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cursor-light { display: block; position: fixed; left: 0; top: 0; width: 520px; height: 520px; pointer-events: none; z-index: 0; border-radius: 50%; background: radial-gradient(circle, rgba(207, 43, 32, 0.06) 0%, rgba(207, 43, 32, 0) 65%); transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.6s; }
  .cursor-light.on { opacity: 1; }
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1100px) { .footer { grid-template-columns: repeat(4, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } .products, .specimen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .palette { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .split, .split-narrow, .product-hero, .studio-layout, .quote-layout, .statement, .guide, .band-inner { grid-template-columns: minmax(0, 1fr); }
  .product-hero .turn, .preview-wrap { position: relative; top: auto; }
  .story .scrub-track { height: 380vh; }
  .story .scrub-stage { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 18px; padding-top: 56px; }
  .story .beats { min-height: 200px; }
  .story .scrub-view { order: -1; }
  .steps, .services, .exhibits, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .footer { grid-template-columns: 1fr 1fr; }
  .fold-body > div { padding-left: 0; }
  .band .mark-bg { opacity: 0.1; }
}
@media (max-width: 640px) {
  .products, .stats, .specimen, .palette, .footer { grid-template-columns: minmax(0, 1fr); }
  .two { grid-template-columns: minmax(0, 1fr); }
  .specs div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .cart-item { grid-template-columns: 72px minmax(0, 1fr); }
  .cart-item button { grid-column: 2; justify-self: start; }
  .fold { padding: 0 18px; }
  .fold summary { grid-template-columns: 32px minmax(0, 1fr) 30px; gap: 10px; }
  .scrub-static[style] { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal], .chipcard { opacity: 1; transform: none; transition: none; }
  .service::before { transform: none; transition: none; }
  .product, .btn { transition: none; }
}

/* split headlines */
[data-letters] .w { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: bottom; padding-bottom: 0.16em; margin-bottom: -0.16em; }
[data-letters] .l { display: inline-block; transform: translateY(108%); opacity: 0; transition: transform 0.9s var(--ease-out), opacity 0.4s var(--ease); }
[data-letters].in .l { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { [data-letters] .l { transform: none; opacity: 1; transition: none; } }

/* never let a flex row or a grid track push the page wider than the screen */
.label, .hero-foot, .preview-tools, .swatches, .actions, .band .actions { flex-wrap: wrap; }
.steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .steps, .steps-4 { grid-template-columns: minmax(0, 1fr); } .hero { grid-template-columns: minmax(0, 1fr); } }
.section, .hero, .story .scrub-stage { max-width: 100vw; }

/* coming-soon placeholder + the logo turntable in a hero */
.soon { border: 1px solid var(--line); background: var(--white); border-radius: var(--radius); padding: clamp(24px, 3.5vw, 44px); display: grid; gap: 16px; position: relative; }
.soon p:not(.label) { color: var(--muted); font-size: 15.5px; }
.soon .lede { max-width: 640px; }
.soon-wide { padding: clamp(32px, 5vw, 64px); }
.hero-turn { aspect-ratio: 6 / 5; }

/* a card left alone on the last row of the three-column grid (ten formats) spans the row: turntable left, words right */
@media (min-width: 1101px) {
  .products:not(.cat-grid):not(.templates-grid) > .product:last-child:nth-child(3n+1) { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: 1fr auto auto auto 1fr; column-gap: clamp(28px, 4vw, 64px); row-gap: 10px; }
  .products:not(.cat-grid):not(.templates-grid) > .product:last-child:nth-child(3n+1) > .turn { grid-column: 1; grid-row: 1 / -1; }
  .products:not(.cat-grid):not(.templates-grid) > .product:last-child:nth-child(3n+1) > h3 { grid-column: 2; grid-row: 2; justify-content: flex-start; font-size: 25px; }
  .products:not(.cat-grid):not(.templates-grid) > .product:last-child:nth-child(3n+1) > .spec { grid-column: 2; grid-row: 3; }
  .products:not(.cat-grid):not(.templates-grid) > .product:last-child:nth-child(3n+1) > p:not(.num):not(.spec) { grid-column: 2; grid-row: 4; max-width: 48ch; font-size: 16px; }
}

/* ---- yard sign designs (Signs & Banners > Yard Signs): a 5-up grid of turntables, the lawn photo and the close-up */
.designs-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.yard-hero { margin: 0 0 clamp(24px, 3vw, 40px); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.yard-hero img { display: block; width: 100%; height: auto; }
.yard-detail { margin: clamp(24px, 3vw, 40px) 0 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.yard-detail a { display: block; }
.yard-detail a:focus-visible { outline: 3px solid var(--red); outline-offset: -4px; }
.yard-detail img { display: block; width: 100%; height: auto; }
.yard-detail figcaption { display: grid; gap: 8px; padding: clamp(20px, 3vw, 40px); }
.yard-detail figcaption b { font-size: 20px; line-height: 1.35; }
.yard-detail figcaption span { max-width: 44ch; color: var(--muted); font-size: 15.5px; line-height: 1.65; }
.yard-detail figcaption small { color: var(--muted); font-size: 12px; }
@media (max-width: 1100px) { .designs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .yard-detail { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .designs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- photographic mockup galleries (vehicle magnets, door hangers): stills instead of turntables */
.mockup-card figure { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.mockup-card figure img { display: block; width: 100%; height: auto; }
.mockup-grid .mockup-card h3 { margin-top: 14px; }

/* Approved product scenes: still-camera selectors with uncropped images. */
.turn.scene-card { overflow: hidden; border-radius: 12px; background: var(--paper); }
.turn.scene-card img { mask-image: none; -webkit-mask-image: none; object-fit: contain; }
.scene-gallery { --scene-ratio: 4 / 3; position: relative; z-index: 2; min-width: 0; }
.scene-gallery--portrait { --scene-ratio: 3 / 4; }
.scene-stage { display: block; width: 100%; aspect-ratio: var(--scene-ratio); max-height: 76svh; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.scene-stage img { display: block; width: 100%; height: 100%; object-fit: contain; }
.scene-stage:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.scene-controls { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 12px; }
.scene-controls button { min-height: 44px; border: 1px solid var(--line-strong); border-radius: var(--pill); padding: 9px 16px; background: var(--white); color: var(--ink); font: 700 12px/1.25 var(--font); cursor: pointer; }
.scene-controls button[aria-pressed="true"] { color: var(--white); background: var(--ink); border-color: var(--ink); }
.scene-controls button:hover { border-color: var(--red); }
.scene-controls button:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.scene-note { margin-top: 12px; font-size: 12px; color: var(--muted); }
.quote-only { display: grid; gap: 18px; }
.quote-only p { color: var(--muted); }
.price-table { min-width: 0; grid-template-columns: minmax(0, 1fr); overflow-x: auto; }
.price-table table { min-width: 0; }
.price-table th, .price-table td { white-space: nowrap; }
.cart-item .lines a { font-weight: 800; color: var(--red); }
.promotion-note { padding: 14px 17px; margin: 16px 0; border-left: 3px solid var(--red); background: var(--paper); color: var(--muted); font-size: 13px; line-height: 1.65; }
.promotion-note b { display: block; color: var(--ink); font-size: 14px; }
.promotion-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.design-offer { grid-column: 1 / -1; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); }
.design-offer > p:last-child { max-width: 85ch; font-size: 14px; color: var(--muted); }
.shipping-included { margin: -8px 0 18px; color: var(--muted); font-size: 13px; }
@media (min-width: 900px) { .product-scene .scene-stage { max-height: min(680px, calc(100svh - 350px)); } }
.mockup-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mockup-grid .scene-stage { max-height: none; }
.mockup-grid .mockup-card h3 { margin-top: 8px; }
@media (max-width: 1100px) { .mockup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .mockup-grid { grid-template-columns: minmax(0, 1fr); } }

/* SSR is readable before enhancement and if WebAssembly cannot load. */
html:not(.arc-ready) [data-reveal], html:not(.arc-ready) .chipcard { opacity: 1; transform: none; }
html:not(.arc-ready) .service::before { transform: none; }
html:not(.arc-ready) .story .scrub-track { display: none; }
html:not(.arc-ready) .scrub-static { display: grid; }
.cursor-light { transition: transform 90ms linear; }

/* Checkout uses the existing paper, ink and red palette. */
.checkout-heading { padding-bottom: 32px; display: grid; gap: 18px; }
.checkout-heading .display { font-size: clamp(42px, 5vw, 72px); }
.checkout-heading .lede { max-width: 720px; }
.checkout-steps { display: flex; gap: 18px 34px; flex-wrap: wrap; list-style: none; padding: 14px 0 0; color: var(--muted); font-size: 14px; font-weight: 700; }
.checkout-steps [aria-current] { color: var(--red); }
.order-layout, .checkout-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.8fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.order-aside { display: grid; gap: 20px; min-width: 0; }
.order-aside > .btn { justify-self: start; }
.order-aside .cart-summary { margin: 0; }
.order-aside .fine { margin: 0; }
.rfq-aside { border-top: 1px solid var(--line); padding-top: 26px; display: grid; gap: 12px; }
.rfq-aside p { color: var(--muted); }
.service-purchase { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 18px; }
.service-purchase .added { flex-basis: 100%; font-size: 14px; white-space: normal; }
.service-purchase .added:empty { display: none; }
.addons td .service-purchase { white-space: normal; min-width: 170px; }
.addons td .service-purchase span { display: inline; color: inherit; margin: 0; }
.design-cart-mark { width: 96px; aspect-ratio: 6 / 5; display: grid; place-items: center; background: var(--paper); border-radius: 14px; font: 700 36px var(--display); color: var(--red); }
.checkout-form fieldset[data-checkout-fields] { border: 0; padding: 0; gap: 26px; }
.checkout-check { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; cursor: pointer; }
.checkout-check input { appearance: auto; width: 18px; height: 18px; padding: 0; margin-top: 3px; flex: 0 0 18px; accent-color: var(--red); }
.delivery-note { padding: 16px 0; border-block: 1px solid var(--line); color: var(--ink-2); }
.checkout-status { color: var(--red); }
.checkout-status:empty { display: none; }
.checkout-cart { border: 0; border-radius: 0; background: transparent; padding: 0; }
.checkout-cart .cart-item { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
.checkout-cart .cart-item img, .checkout-cart .design-cart-mark { width: 64px; }
.checkout-cart .cart-item button { grid-column: 2; justify-self: start; }
.checkout-review { margin-top: 42px; padding-top: 32px; border-top: 2px solid var(--red); scroll-margin-top: 130px; }
.review-details { margin: 24px 0; }
.review-details > div { display: grid; grid-template-columns: minmax(120px, .7fr) minmax(0, 1.3fr); gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.review-details dt { color: var(--muted); }
.review-details dd { margin: 0; }
.preserve-lines { white-space: pre-wrap; }
.payment-unavailable { display: grid; gap: 16px; padding: 24px 0; }
.payment-unavailable .btn { justify-self: start; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 850px) {
  .order-layout, .checkout-layout { grid-template-columns: minmax(0, 1fr); }
  .checkout-layout .order-aside { grid-row: 1; }
  .checkout-steps { gap: 10px 20px; font-size: 12px; }
  .review-details > div { grid-template-columns: minmax(0, 1fr); gap: 5px; }
}
@media (max-width: 650px) {
  .addons table, .addons tbody { display: block; width: 100%; min-width: 0; }
  .addons thead { display: none; }
  .addons tr { display: block; padding: 20px; border-bottom: 1px solid var(--line); }
  .addons tr:last-child { border-bottom: 0; }
  .addons tbody th, .addons td { width: 100%; display: block; padding: 0; border: 0; white-space: normal; }
  .addons tbody td:nth-child(2) { display: none; }
  .addons td:last-child { padding-top: 18px; white-space: normal; }
  .addons .service-purchase { gap: 12px; }
}


/* Native request forms share the storefront's type and paper palette. */
#main .form { max-width: 760px; display: grid; gap: 22px; }
#main .form > label { display: grid; gap: 8px; font-weight: 650; }
#main .form input:not([type=checkbox]):not([type=hidden]),
#main .form select, #main .form textarea,
#main .price-card select { width: 100%; min-width: 0; max-width: 100%; padding: 12px 14px; border: 1px solid #c8c0b4; border-radius: 6px; background: #fffcf5; color: #20201d; font: inherit; }
#main .form textarea { min-height: 150px; resize: vertical; }
#main .form > label:has(input[type=checkbox]) { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; }
#main .form input[type=checkbox] { flex: none; width: 20px; height: 20px; margin-top: 3px; }
#main .price-card form { display: grid; gap: 16px; }
#main .wrap > h1 { margin-bottom: 24px; }
#main .wrap > p, #main .wrap > h2 { margin-bottom: 24px; }
#main input:focus-visible, #main select:focus-visible, #main textarea:focus-visible { outline: 3px solid #d82b1e; outline-offset: 3px; }

#order-options fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 18px; }
#order-options legend { font-weight: 800; margin-bottom: 18px; }
#order-options fieldset label { display: block; padding: 14px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
#order-options input[type=radio] { width: 18px; height: 18px; accent-color: var(--red); margin-right: 8px; }
#order-options label:has(input:checked) { border-color: var(--red); background: var(--red-soft); }