/* Sri Chamundi Jewels Palace. Across the Counter, second build.
   Tokens from website/research/final-direction.json. One light, one plane, one accent per viewport.
   Motion: placement first, then a little life on every touch point. Nothing distorts a piece. */

:root {
  --stone: #E9E4DA;
  --stone-warm: #E3DCD0;
  --speckle: #CEBFAA;
  --pearl: #F2EADB;
  --ink: #241612;
  --ink-64: rgba(36, 22, 18, 0.64);
  --ink-14: rgba(36, 22, 18, 0.14);
  --green-velvet: #14352A;
  --emerald: #1E6246;
  --teal: #1F9C7C;
  --gold: #B08640;
  --gold-lit: #DBB45F;
  --gold-oxide: #7A5A2E;
  --peach: #E7BF9D;
  --jute: #C9A96A;
  --kempu: #961E33;
  --veil: #0E0806;

  --font-display: "Faustina", Georgia, "Times New Roman", serif;
  --font-text: "Archivo", Arial, Helvetica, sans-serif;
  --font-tamil: "Anek Tamil", Latha, sans-serif;
  --font-mark: "Cinzel", "Trajan Pro", Georgia, serif;

  --counter-0: 76px; --counter-0-lh: 80px; --counter-0-ls: -2.3px;
  --counter-1: 54px; --counter-1-lh: 58px; --counter-1-ls: -1.4px;
  --counter-2: 38px; --counter-2-lh: 44px; --counter-2-ls: -0.8px;
  --counter-3: 28px; --counter-3-lh: 34px; --counter-3-ls: -0.4px;
  --counter-4: 22px; --counter-4-lh: 30px; --counter-4-ls: -0.2px;
  --body-lg: 19px; --body-lg-lh: 30px;
  --body: 17px; --body-lh: 28px;
  --small: 15px; --small-lh: 24px;
  --caption: 13px; --caption-lh: 20px;
  --label: 12px; --label-lh: 16px; --label-ls: 1.4px;
  --rate: 56px;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px;
  --s12: 48px; --s16: 64px; --s24: 96px; --s32: 128px; --s40: 160px;
  --content: 1440px;
  --gutter: 24px;

  --hairline: 1px solid var(--gold);
  --pencil: 1px solid var(--ink-14);
  --shadow-contact: 0 6px 18px rgba(36, 22, 18, 0.10);
  --shadow-settled: 0 8px 24px rgba(36, 22, 18, 0.18);
  --shadow-lift: 0 10px 26px rgba(36, 22, 18, 0.14);
  --shadow-raise: 2px 12px 32px rgba(26, 15, 10, 0.18);

  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-state: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-ui: 180ms; --dur-ground: 160ms; --dur-state: 240ms; --dur-entrance: 260ms;
  --dur-cloth: 600ms; --dur-settle: 900ms; --dur-reveal: 700ms;
  --angle-cloth: 18deg;

  --rail-h: 56px;
  --edge-h: 56px;
  --strip-h: 48px;

  color-scheme: light;
}

/* procedural plates, stand-ins until the photographed plates arrive */
:root {
  --stone-plate: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.62  0 0 0 0 0.55  0 0 0 0 0.45  0 0 0 9 -6.2'/></filter><rect width='320' height='320' filter='url(%23n)' opacity='0.28'/></svg>");
  --fibre-plate: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.4' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.35  0 0 0 0 0.25  0 0 0 0.5 -0.15'/></filter><rect width='200' height='200' filter='url(%23f)' opacity='0.22'/></svg>");
  --pile-plate: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' seed='11' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.6  0 0 0 0 0.45  0 0 0 0.9 -0.35'/></filter><rect width='240' height='240' filter='url(%23p)' opacity='0.35'/></svg>");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--strip-h) + 12px); scroll-padding-bottom: 88px; -webkit-text-size-adjust: 100%; }
@media (min-width: 900px) { html { scroll-padding-top: calc(var(--edge-h) + 16px); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--stone);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--body);
  line-height: var(--body-lh);
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--rail-h) + env(safe-area-inset-bottom));
}
@media (min-width: 900px) { body { padding-bottom: 0; } }
body.veiled { overflow: hidden; }

img, picture { display: block; max-width: 100%; }
a { color: inherit; text-decoration-color: var(--gold); text-underline-offset: 3px; transition: text-decoration-color var(--dur-ui) var(--ease-standard); }
a:hover { text-decoration-color: var(--gold-lit); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }
::selection { background: var(--gold-lit); color: var(--ink); }

h1, h2, h3, .display { font-family: var(--font-display); font-weight: 400; margin: 0; text-wrap: balance; }
.c0 { font-size: var(--counter-0); line-height: var(--counter-0-lh); letter-spacing: var(--counter-0-ls); font-weight: 300; }
.c1 { font-size: var(--counter-1); line-height: var(--counter-1-lh); letter-spacing: var(--counter-1-ls); font-weight: 300; }
.c2 { font-size: var(--counter-2); line-height: var(--counter-2-lh); letter-spacing: var(--counter-2-ls); }
.c3 { font-size: var(--counter-3); line-height: var(--counter-3-lh); letter-spacing: var(--counter-3-ls); }
.c4 { font-size: var(--counter-4); line-height: var(--counter-4-lh); letter-spacing: var(--counter-4-ls); }
@media (max-width: 899px) {
  .c0 { font-size: 40px; line-height: 42px; letter-spacing: -1.2px; }
  .c1 { font-size: 32px; line-height: 36px; letter-spacing: -0.8px; }
  .c2 { font-size: 26px; line-height: 30px; letter-spacing: -0.4px; }
  .c3 { font-size: 21px; line-height: 28px; letter-spacing: -0.2px; }
  .c4 { font-size: 19px; line-height: 26px; letter-spacing: -0.1px; }
}
p { margin: 0; }
.lg { font-size: var(--body-lg); line-height: var(--body-lg-lh); }
.sm { font-size: var(--small); line-height: var(--small-lh); }
.cap { font-size: var(--caption); line-height: var(--caption-lh); color: var(--ink-64); max-width: 62ch; }
.measure { max-width: 62ch; }
.measure-d { max-width: 38ch; }
.label { font-size: var(--label); line-height: var(--label-lh); letter-spacing: var(--label-ls); text-transform: uppercase; font-weight: 600; color: var(--ink-64); }
.slip .label { color: var(--gold-oxide); }
.on-dark .label { color: var(--gold-lit); }
.on-dark .cap { color: rgba(242, 234, 219, 0.7); }
.ta { font-family: var(--font-tamil); font-size: 1.06em; line-height: 1.35; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.mark { font-family: var(--font-mark); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }

/* layout */
.wrap { width: min(100% - 2 * var(--gutter), var(--content)); margin-inline: auto; }
@media (max-width: 899px) { :root { --gutter: 16px; } }
.band { position: relative; padding-block: var(--s32); }
@media (max-width: 899px) { .band { padding-block: var(--s16); } }
.band-glass::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); opacity: 0.9; transform-origin: left; }
.js .band-glass::after { transform: scaleX(0); }
.js .band-glass.lit::after { transform: scaleX(1); transition: transform 1100ms var(--ease-settle); }

/* grounds */
.ground-stone { background-color: var(--stone); background-image: var(--stone-plate); }
.ground-pearl { background-color: var(--pearl); background-image: var(--fibre-plate); }
.cloth { position: relative; isolation: isolate; }
.cloth::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ground-velvet { background-color: var(--green-velvet); color: var(--pearl); }
.ground-velvet::before { background-image: linear-gradient(112deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0) 38%, rgba(0,0,0,0.18) 100%), var(--pile-plate); }
.ground-jute { background-color: var(--stone); background-image: var(--stone-plate); }
.ground-jute::before { background-image: repeating-linear-gradient(0deg, rgba(60,40,15,0.05) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(60,40,15,0.06) 0 1px, transparent 1px 4px); }
.ground-peach { background-color: var(--pearl); }
.ground-peach::before { background-image: var(--fibre-plate); }
.ground-damask { background-color: var(--veil); color: var(--pearl); background-image: url("../assets/img/damask-standin.webp"); background-size: cover; background-position: center; }

/* cloth change: the incoming cloth wipes across once */
.js .cloth.pending::before { clip-path: polygon(-40% 0, -35% 0, -55% 100%, -60% 100%); }
.js .cloth.wipe::before { animation: cloth-wipe var(--dur-cloth) var(--ease-standard) forwards; }
@keyframes cloth-wipe { from { clip-path: polygon(-40% 0, -35% 0, -55% 100%, -60% 100%); } to { clip-path: polygon(-40% 0, 140% 0, 120% 100%, -60% 100%); } }

/* ---------- motion system ---------- */
/* reveals are applied by JS only to elements below the fold, so nothing is parked hidden without JS */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity var(--dur-reveal) var(--ease-settle), transform var(--dur-reveal) var(--ease-settle); transition-delay: calc(var(--i, 0) * 90ms); }
.js .reveal[data-reveal="wipe"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); }
.js .reveal[data-reveal="wipe"] img { transform: scale(1.06); }
.js .reveal[data-reveal="wipe"].in { clip-path: inset(0 0 0 0); transition: clip-path var(--dur-settle) var(--ease-settle); }
.js .reveal[data-reveal="wipe"].in img { transform: none; transition: transform 1400ms var(--ease-settle); }
.js .reveal[data-reveal="left"] { transform: translateX(-24px); }
.js .reveal[data-reveal="scale"] { transform: scale(0.96); }
.js .reveal[data-reveal="draw"] { opacity: 1; transform: none; }
.js .reveal[data-reveal="draw"] svg path, .js .reveal[data-reveal="draw"] svg circle { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .reveal[data-reveal="draw"].in svg path, .js .reveal[data-reveal="draw"].in svg circle { stroke-dashoffset: 0; transition: stroke-dashoffset 1300ms var(--ease-standard); transition-delay: calc(var(--i, 0) * 120ms); }
.js .hair { transform: scaleX(0); transform-origin: left; }
.js .hair.in { transform: scaleX(1); transition: transform 1000ms var(--ease-settle); }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal[data-reveal="wipe"], .js .reveal[data-reveal="wipe"] img, .js .hair { opacity: 1; transform: none; clip-path: none; transition: none; }
  .js .reveal[data-reveal="draw"] svg path, .js .reveal[data-reveal="draw"] svg circle { stroke-dashoffset: 0; }
  .js .cloth.pending::before, .js .cloth.wipe::before { clip-path: none; animation: none; }
  .js .band-glass::after { transform: none; }
}

/* plates: photographs sit flat with an attached contact shadow, square corners */
.plate { box-shadow: var(--shadow-contact); background: var(--stone-warm); overflow: hidden; }
.plate img { width: 100%; height: auto; }
.plate.hover { transition: box-shadow var(--dur-state) var(--ease-standard), transform var(--dur-state) var(--ease-standard); }
.plate.hover:hover { box-shadow: var(--shadow-raise); transform: translateY(-3px); }

/* actions */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; padding: 10px 22px; border-radius: 2px;
  border: 1.5px solid var(--gold); background: transparent; color: var(--ink);
  font-weight: 600; font-size: 17px; line-height: 24px; text-decoration: none; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(122, 90, 46, 0.55);
  transition: background-color var(--dur-ui) var(--ease-standard), color var(--dur-ui) var(--ease-standard), box-shadow var(--dur-ui) var(--ease-standard), transform var(--dur-ui) var(--ease-standard), border-color var(--dur-ui) var(--ease-standard);
}
.btn:hover, .btn:focus-visible { background: var(--gold); color: var(--ink); box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.solid { background: var(--ink); border-color: var(--ink); color: var(--pearl); box-shadow: none; }
.btn.solid:hover, .btn.solid:focus-visible { background: var(--gold-oxide); border-color: var(--gold-oxide); color: var(--pearl); box-shadow: var(--shadow-lift); }
.btn .rp { position: absolute; border-radius: 999px; background: rgba(255, 255, 255, 0.35); transform: scale(0); pointer-events: none; animation: ripple 600ms var(--ease-standard) forwards; z-index: -1; }
.btn.solid .rp { background: rgba(219, 180, 95, 0.35); }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }
.btn .chev { width: 16px; height: 16px; transition: transform var(--dur-ui) var(--ease-standard); }
.btn:hover .chev { transform: translateX(3px); }
.on-dark .btn { color: var(--pearl); border-color: var(--gold-lit); }
.on-dark .btn:hover, .on-dark .btn:focus-visible { background: var(--gold-lit); color: var(--ink); }
.link-q { font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); }
.wa { display: inline-flex; align-items: center; gap: 8px; }
.wa svg { width: 18px; height: 18px; flex: none; }
.chev-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.chev-link svg { width: 14px; height: 14px; transition: transform var(--dur-ui) var(--ease-standard); }
.chev-link:hover svg { transform: translateX(3px); }

/* ---------- the veil: logo animation on first arrival ---------- */
.veil { position: fixed; inset: 0; z-index: 100; background: var(--veil); color: var(--pearl); display: grid; place-items: center; overflow: hidden; }
.no-veil .veil, .veil.gone { display: none; }
.veil-ground { position: absolute; inset: -8%; background: url("../assets/img/damask-standin.webp") center / cover no-repeat; opacity: 0; animation: veil-ground 1400ms var(--ease-standard) 100ms forwards; }
.veil-ground::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 46%, rgba(120, 82, 30, 0.22), rgba(14, 8, 6, 0) 46%, rgba(14, 8, 6, 0.55) 100%); }
@keyframes veil-ground { to { opacity: 1; } }
.veil-lockup { position: relative; display: grid; justify-items: center; gap: 0; transform: translateY(2vh); }
.veil-mono { width: clamp(120px, 22vh, 190px); height: auto; overflow: visible; }
.veil-mono .mono-fill { opacity: 0; animation: mono-fill 700ms var(--ease-standard) 1250ms forwards; }
.veil-mono .mono-line { fill: none; stroke: var(--gold-lit); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; animation: mono-line 1300ms var(--ease-standard) 250ms forwards, mono-line-fade 500ms linear 1700ms forwards; }
.veil-mono .spark { fill: #FFF6D6; filter: drop-shadow(0 0 5px #F3CC6A) drop-shadow(0 0 14px rgba(243, 204, 106, 0.9)) drop-shadow(0 0 30px rgba(243, 204, 106, 0.6)); opacity: 0; animation: spark-in 200ms linear 250ms forwards, spark-out 300ms linear 1450ms forwards; }
.veil-mono .sheen { opacity: 0; animation: sheen-move 1200ms var(--ease-standard) 1500ms forwards; }
@keyframes mono-fill { to { opacity: 1; } }
@keyframes mono-line { to { stroke-dashoffset: 0; } }
@keyframes mono-line-fade { to { opacity: 0.35; } }
@keyframes spark-in { to { opacity: 1; } }
@keyframes spark-out { to { opacity: 0; } }
@keyframes sheen-move { 0% { opacity: 0; transform: translateX(-260px); } 20% { opacity: 0.9; } 100% { opacity: 0; transform: translateX(260px); } }
.veil-name { margin-top: 22px; font-family: var(--font-mark); font-weight: 600; font-size: clamp(22px, 4.2vw, 40px); letter-spacing: 0.34em; text-transform: uppercase; color: #E2BE72; text-indent: 0.34em; opacity: 0; animation: name-in 900ms var(--ease-settle) 1550ms forwards; }
.veil-sub { display: flex; align-items: center; gap: 14px; margin-top: 8px; font-family: var(--font-mark); font-weight: 500; font-size: clamp(11px, 1.6vw, 16px); letter-spacing: 0.32em; text-transform: uppercase; color: #C9A45F; text-indent: 0.32em; opacity: 0; animation: sub-in 800ms var(--ease-settle) 1850ms forwards; }
.veil-sub .rule { display: block; width: clamp(28px, 6vw, 64px); height: 1px; background: #C9A45F; transform: scaleX(0); animation: rule-in 700ms var(--ease-settle) 1950ms forwards; }
.veil-sub .rule:first-child { transform-origin: right; }
.veil-sub .rule:last-child { transform-origin: left; }
@keyframes name-in { from { opacity: 0; letter-spacing: 0.6em; transform: translateY(8px); } to { opacity: 1; letter-spacing: 0.34em; transform: none; } }
@keyframes sub-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes rule-in { to { transform: scaleX(1); } }
.veil-skip { position: absolute; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); background: transparent; border: 1px solid rgba(226, 190, 114, 0.5); color: #E2BE72; font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; padding: 8px 14px; border-radius: 2px; cursor: pointer; opacity: 0; animation: sub-in 400ms linear 900ms forwards; }
.veil.lift { animation: veil-lift 760ms var(--ease-settle) forwards; }
@keyframes veil-lift { to { transform: translateY(-100%); } }
@media (prefers-reduced-motion: reduce) { .veil { display: none; } }

/* ---------- counter edge (desktop) and the strip (mobile) ---------- */
.edge { position: sticky; top: 0; z-index: 20; height: var(--edge-h); display: none; align-items: center; background: rgba(233, 228, 218, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: var(--pencil); transition: box-shadow var(--dur-state) var(--ease-standard); }
.edge.scrolled { box-shadow: 0 6px 24px rgba(36, 22, 18, 0.08); }
@media (min-width: 900px) { .edge { display: flex; } }
.edge .wrap { display: flex; align-items: center; justify-content: space-between; }
.lockup { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.lockup .mono { width: 26px; height: auto; display: block; }
.lockup .mono path { fill: var(--gold); transition: fill var(--dur-ui) var(--ease-standard); }
.lockup:hover .mono path { fill: var(--gold-oxide); }
.lockup .name { font-family: var(--font-mark); font-weight: 600; font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1; }
.lockup .name small { display: block; font-family: var(--font-mark); font-weight: 500; font-size: 9px; letter-spacing: 0.26em; color: var(--gold-oxide); margin-top: 4px; }
.edge-actions { display: flex; gap: 22px; align-items: center; font-size: 15px; font-weight: 600; }
.edge-actions a { text-decoration: none; position: relative; padding: 4px 0; }
.edge-actions a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-ui) var(--ease-standard); }
.edge-actions a:not(.btn):hover::after { transform: scaleX(1); }
.edge-actions .btn { min-height: 38px; padding: 6px 16px; font-size: 15px; }
.edge-actions .state { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink-64); }
.dot { width: 9px; height: 9px; border-radius: 999px; background: var(--teal); display: inline-block; position: relative; }
.dot::after { content: ""; position: absolute; inset: -4px; border-radius: 999px; border: 1px solid var(--teal); opacity: 0; animation: pulse 2400ms ease-out infinite; }
.dot.closed { background: var(--ink-64); }
.dot.closed::after { display: none; }
@keyframes pulse { 0% { transform: scale(0.6); opacity: 0.8; } 70% { transform: scale(1.4); opacity: 0; } 100% { opacity: 0; } }

.strip { position: sticky; top: 0; z-index: 20; height: var(--strip-h); display: flex; align-items: center; background: rgba(233, 228, 218, 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: var(--pencil); }
@media (min-width: 900px) { .strip { display: none; } }
.strip .wrap { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.strip .lockup .mono { width: 22px; }
.strip .lockup .name { font-size: 12px; white-space: nowrap; }
.strip .lockup .name small { font-size: 8px; margin-top: 3px; }
.strip .side { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.strip .state { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-64); white-space: nowrap; }
.strip .state [data-state-text] { display: none; }
.strip .state [data-state-short] { font-weight: 600; }
.strip .state .dot { width: 8px; height: 8px; }

/* bottom rail (mobile) */
.rail { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: calc(var(--rail-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: stretch; background: var(--pearl); border-top: var(--hairline); box-shadow: 0 -8px 24px rgba(36, 22, 18, 0.08); }
.rail a { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 600; text-decoration: none; min-height: 48px; transition: background-color var(--dur-ui) var(--ease-standard); }
.rail a:active { background: var(--stone-warm); }
.rail a + a { border-left: var(--pencil); }
.rail svg { width: 18px; height: 18px; }
@media (min-width: 900px) { .rail { display: none; } }
.js .rail { transform: translateY(100%); }
.js .rail.up { transform: none; transition: transform 420ms var(--ease-settle); }
@media (prefers-reduced-motion: reduce) { .js .rail { transform: none; } }

/* preview notice: removed at launch */
.notice { background: var(--ink); color: var(--pearl); font-size: 13px; line-height: 18px; padding: 8px var(--gutter); text-align: center; }
.notice b { color: var(--gold-lit); font-weight: 600; }

/* ---------- 1. On the counter ---------- */
.hero { background-color: var(--stone); background-image: var(--stone-plate); padding-block: 0; min-height: min(92vh, 900px); display: grid; align-items: stretch; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1fr; gap: var(--s6); align-items: center; padding-block: var(--s6) var(--s12); }
.hero-copy { position: relative; z-index: 2; padding-top: var(--s8); }
.hero-copy .brand-line { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s4); }
.hero-copy .brand-line .mono { width: 20px; height: auto; }
.hero-copy .brand-line .mono path { fill: var(--gold); }
.hero-copy .brand-line span { font-family: var(--font-mark); font-weight: 600; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; }
.hero-copy h1 { margin-bottom: var(--s6); }
.hero-copy .sub { margin-bottom: var(--s6); }
.hero-plate { position: relative; }
.hero-plate .piece { width: 100%; height: auto; display: block; }
.js .hero-plate .piece { transform: scale(0.985); transform-origin: 60% 60%; }
.js .hero-plate .piece.settled { transform: none; transition: transform var(--dur-settle) var(--ease-settle); }
.hero-plate::after { content: none; }
.js .hero-plate.sweep::after { animation: sweep 1500ms var(--ease-standard) 300ms forwards; }
@keyframes sweep { 0% { opacity: 1; transform: translateX(-120%); } 100% { opacity: 1; transform: translateX(120%); } }
.js .hero-copy .rise { opacity: 0; transform: translateY(14px); }
.js .hero-copy .rise.in { opacity: 1; transform: none; transition: opacity 600ms var(--ease-settle), transform 600ms var(--ease-settle); transition-delay: calc(var(--i, 0) * 90ms + 80ms); }
@media (prefers-reduced-motion: reduce) { .js .hero-plate .piece { transform: none; } .js .hero-copy .rise { opacity: 1; transform: none; } .js .hero-plate.sweep::after { animation: none; } }
.hero-caption { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); align-items: center; margin-top: var(--s4); }
.state-chip { display: inline-flex; align-items: center; gap: 8px; font-size: var(--small); font-weight: 600; color: var(--emerald); }
.state-chip::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--emerald); }
@media (min-width: 900px) {
  .hero .wrap { grid-template-columns: minmax(360px, 5fr) 7fr; gap: var(--s12); padding-block: var(--s8) var(--s16); }
  .hero-copy { align-self: start; padding-top: var(--s24); }
  .hero-plate { margin-right: calc(-1 * (100vw - var(--content)) / 2 - var(--gutter)); }
  .hero-plate { align-self: stretch; }
  .hero-plate .piece { height: 100%; object-fit: cover; object-position: 52% 50%; }
}
@media (max-width: 899px) {
  .hero { min-height: 0; }
  .hero .wrap { padding-top: 0; gap: var(--s4); }
  .hero-plate { order: -1; margin-inline: calc(-1 * var(--gutter)); }
  .hero-plate .piece { height: min(56vh, 520px); object-fit: cover; object-position: 50% 45%; }
  .hero-copy { padding-top: 0; }
  .hero-copy .brand-line { margin-top: var(--s2); }
}

/* ---------- 2. Today's rate ---------- */
.rate-band .wrap { display: grid; gap: var(--s8); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .rate-band .wrap { grid-template-columns: 6fr 6fr; gap: var(--s12); } }
.slip { background: var(--pearl); background-image: var(--fibre-plate); padding: var(--s8); box-shadow: var(--shadow-contact); max-width: 560px; position: relative; }
.slip::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); }
.slip .figure { font-size: var(--rate); line-height: 1; font-weight: 500; letter-spacing: -1.2px; margin: var(--s3) 0 var(--s4); }
@media (max-width: 899px) { .slip .figure { font-size: 40px; } }
.slip .figure sup { font-size: 0.42em; vertical-align: 0.9em; font-weight: 500; letter-spacing: 0; margin-right: 2px; }
.slip .lines { display: grid; gap: 4px; font-size: var(--small); line-height: var(--small-lh); }
.slip .other { display: flex; flex-wrap: wrap; gap: var(--s6); margin-top: var(--s6); padding-top: var(--s4); border-top: var(--pencil); font-size: var(--small); }
.slip .other b { display: block; font-weight: 500; font-size: 20px; }
.slip .stale, .slip .loading { display: none; }
.slip.is-stale .live { display: none; }
.slip.is-stale .stale { display: block; }
.slip.is-loading .live { opacity: 0.35; }
.slip .actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.slip .src { margin-top: var(--s4); }
.calc { display: grid; gap: var(--s4); }
.calc h3 { margin-bottom: var(--s2); }
.calc .row { display: grid; grid-template-columns: 1fr auto; gap: var(--s4); align-items: center; padding: var(--s3) 0; border-bottom: var(--pencil); }
.calc .row:first-of-type { border-top: var(--pencil); }
.calc .row.total { font-weight: 600; }
.calc input[type="number"], .calc select { font: inherit; font-variant-numeric: tabular-nums; min-height: 44px; padding: 8px 10px; border: 1px solid var(--ink-14); background: var(--pearl); color: var(--ink); border-radius: 2px; font-size: 16px; transition: border-color var(--dur-ui) var(--ease-standard), box-shadow var(--dur-ui) var(--ease-standard); }
.calc input[type="number"] { width: 9ch; text-align: right; }
.calc input:focus, .calc select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176, 134, 64, 0.18); outline: none; }
.calc output { font-weight: 600; font-size: var(--counter-4); font-family: var(--font-text); transition: color var(--dur-state) var(--ease-standard); }
.calc output.tick { color: var(--gold-oxide); }
.calc .muted { color: var(--ink-64); font-size: var(--small); max-width: 62ch; }
.calc .sub-h { margin-top: var(--s4); }

/* ---------- 3. The whole set ---------- */
.set .wrap { display: grid; gap: var(--s8); grid-template-columns: 1fr; }
@media (min-width: 900px) { .set .wrap { grid-template-columns: 7fr 5fr; gap: var(--s12); align-items: start; } .set .copy { padding-top: var(--s24); } }
.facts { display: grid; gap: 6px; margin: var(--s6) 0; font-size: var(--small); }
.facts div { display: flex; justify-content: space-between; gap: var(--s4); padding: 8px 0; border-bottom: var(--pencil); }
.facts div:first-child { border-top: var(--pencil); }
.facts b { font-weight: 500; }

/* ---------- 4. Turn it over ---------- */
.turn { padding-block: var(--s40); }
@media (max-width: 899px) { .turn { padding-block: var(--s16); } }
.turn .wrap { display: grid; gap: var(--s8); grid-template-columns: 1fr; }
@media (min-width: 900px) { .turn .wrap { grid-template-columns: 7fr 5fr; gap: var(--s12); align-items: center; } }
.flip { position: relative; aspect-ratio: 7 / 8; max-width: 640px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); }
.flip .face { position: absolute; inset: 0; opacity: 1; transition: opacity 240ms linear; }
.flip .face.back { opacity: 0; }
.flip.show-back .face.front { opacity: 0; }
.flip.show-back .face.back { opacity: 1; }
.flip img { width: 100%; height: 100%; object-fit: cover; }
.flip .face.back { background: rgba(242, 234, 219, 0.06); border: 1px dashed rgba(219, 180, 95, 0.55); display: grid; place-items: center; padding: var(--s8); text-align: center; }
.seg { display: inline-flex; border: 1px solid rgba(242, 234, 219, 0.55); border-radius: 2px; overflow: hidden; margin-top: var(--s4); position: relative; }
.seg button { min-width: 88px; min-height: 44px; padding: 0 18px; background: transparent; border: 0; color: var(--pearl); font-weight: 600; font-size: 15px; cursor: pointer; position: relative; z-index: 1; transition: color var(--dur-state) var(--ease-standard); }
.seg button[aria-pressed="true"] { color: var(--ink); }
.seg::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 50%; background: var(--pearl); transition: transform var(--dur-state) var(--ease-state); }
.seg.back::before { transform: translateX(100%); }
.turn .copy p + p { margin-top: var(--s4); }

/* ---------- promises strip ---------- */
.promises-band { padding-block: var(--s16); }
.promises { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; gap: 0; grid-template-columns: 1fr; counter-reset: pr; border-top: var(--pencil); }
@media (min-width: 900px) { .promises { grid-template-columns: repeat(3, 1fr); column-gap: var(--s8); } }
.promises li { counter-increment: pr; display: grid; grid-template-columns: 2.5ch 1fr; gap: var(--s3); padding: var(--s4) 0; border-bottom: var(--pencil); font-size: var(--small); line-height: var(--small-lh); }
.promises li::before { content: counter(pr, decimal-leading-zero); font-weight: 600; color: var(--ink-64); }
.promises a { font-weight: 600; }

/* ---------- 5. Two hands ---------- */
.hands .wrap { display: grid; gap: var(--s8); grid-template-columns: 1fr; }
@media (min-width: 900px) { .hands .wrap { grid-template-columns: 7fr 5fr; gap: var(--s12); align-items: start; } }
.owners { display: grid; gap: var(--s6); }
.owners .name { font-family: var(--font-display); }
.quote { border-left: var(--hairline); padding-left: var(--s4); font-family: var(--font-display); font-style: italic; font-size: var(--counter-4); line-height: var(--counter-4-lh); margin: 0; }
.quote + .cap { margin-top: var(--s2); }
.pending-line { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border: 1px dashed var(--ink-14); font-size: var(--caption); color: var(--ink-64); }

/* ---------- 6. The case ---------- */
.motifs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin: var(--s6) 0 var(--s8); }
@media (min-width: 700px) { .motifs { grid-template-columns: repeat(6, 1fr); } }
.motif { display: grid; justify-items: center; gap: 6px; text-align: center; padding: var(--s3) 0; text-decoration: none; border-radius: 2px; transition: background-color var(--dur-ui) var(--ease-standard); }
.motif:hover { background: var(--stone-warm); }
.motif svg { width: 56px; height: 56px; stroke: var(--ink); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-state) var(--ease-standard), stroke var(--dur-state) var(--ease-standard); }
.motif:hover svg { transform: translateY(-3px); stroke: var(--gold-oxide); }
@media (min-width: 700px) { .motif svg { width: 72px; height: 72px; } }
.motif .ta { font-size: 15px; }
.motif .cap { font-size: 12px; }
.families { list-style: none; margin: 0; padding: 0; border-top: var(--pencil); }
.family { display: grid; grid-template-columns: 88px 1fr auto; gap: var(--s4); align-items: center; padding: var(--s4) var(--s3); border-bottom: var(--pencil); text-decoration: none; transition: background-color var(--dur-ground) var(--ease-standard); }
@media (min-width: 900px) { .family { grid-template-columns: 120px 1fr 1fr auto; padding: var(--s4) var(--s4); } }
.family:hover, .family:focus-within { background: var(--stone-warm); }
.family .thumb { width: 88px; height: 88px; overflow: hidden; box-shadow: var(--shadow-contact); transition: transform var(--dur-state) var(--ease-standard), box-shadow var(--dur-state) var(--ease-standard); }
@media (min-width: 900px) { .family .thumb { width: 120px; height: 120px; } }
.family:hover .thumb { transform: translateY(-4px); box-shadow: var(--shadow-raise); }
.family .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-settle); }
.family:hover .thumb img { transform: scale(1.06); }
.family .fname { font-family: var(--font-display); font-size: var(--counter-3); line-height: var(--counter-3-lh); letter-spacing: var(--counter-3-ls); transition: transform var(--dur-state) var(--ease-standard); }
.family:hover .fname { transform: translateX(4px); }
.family .fname .ta { display: block; font-size: 16px; color: var(--ink-64); letter-spacing: 0; margin-top: 2px; }
.family .desc { font-size: var(--small); color: var(--ink-64); display: none; }
@media (min-width: 900px) { .family .desc { display: block; } }
.family .go { display: inline-flex; align-items: center; gap: 6px; font-size: var(--small); font-weight: 600; white-space: nowrap; color: var(--gold-oxide); }
.family .go b { font-weight: 600; color: var(--ink); }
.family .go svg { width: 14px; height: 14px; transition: transform var(--dur-ui) var(--ease-standard); }
.family:hover .go svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .family .thumb, .family .fname, .family .thumb img { transition: none; } .family:hover .thumb, .family:hover .fname, .family:hover .thumb img { transform: none; } }

/* portfolio strip on the homepage and the catalogue grid */
.pieces { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
@media (min-width: 700px) { .pieces { grid-template-columns: repeat(3, 1fr); gap: var(--s8); } }
.piece-card { position: relative; display: block; text-decoration: none; background: var(--pearl); box-shadow: var(--shadow-contact); transition: transform var(--dur-state) var(--ease-standard), box-shadow var(--dur-state) var(--ease-standard); cursor: pointer; border: 0; padding: 0; text-align: left; width: 100%; color: inherit; font: inherit; }
.piece-card:hover, .piece-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-raise); }
.piece-card .ph { aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone-warm); }
.piece-card { border: 0; box-shadow: none; background: transparent; }
.piece-card:hover, .piece-card:focus-visible { transform: none; box-shadow: none; }
.piece-card .ph { box-shadow: var(--shadow-contact); transition: box-shadow var(--dur-state) var(--ease-standard), transform var(--dur-state) var(--ease-standard); }
.piece-card:hover .ph { box-shadow: var(--shadow-raise); transform: translateY(-4px); }
.piece-card .meta { padding: var(--s3) 0 0; }
.piece-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1100ms var(--ease-settle); }
.piece-card:hover img { transform: scale(1.05); }
.piece-card .meta { padding: var(--s3) var(--s4) var(--s4); display: grid; gap: 4px; }
.piece-card .meta .fam { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600; color: var(--gold-oxide); }
.piece-card .meta .what { font-family: var(--font-display); font-size: 18px; line-height: 24px; }
.piece-card .meta .ask { font-size: var(--caption); color: var(--ink-64); display: inline-flex; align-items: center; gap: 6px; }
.piece-card .meta .ask svg { width: 12px; height: 12px; transition: transform var(--dur-ui) var(--ease-standard); }
.piece-card:hover .meta .ask svg { transform: translateX(3px); }
.piece-card.hidden { display: none; }
.piece-card .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(255,250,235,0) 35%, rgba(255,250,235,0.28) 50%, rgba(255,250,235,0) 65%); transform: translateX(-130%); pointer-events: none; }
.piece-card .ph { position: relative; }
.piece-card:hover .ph::after { animation: sweep 900ms var(--ease-standard) forwards; }
.filters { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s6) 0 var(--s8); }
.filters .chip[aria-pressed="true"] { background: var(--ink); color: var(--pearl); border-color: var(--ink); }
.filters .chip b { font-weight: 500; opacity: 0.7; margin-left: 4px; }
.case-head { display: grid; gap: var(--s4); }
.count-line { font-size: var(--small); color: var(--ink-64); }

/* lightbox */
.lb { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1100px); width: 100%; }
.lb::backdrop { background: rgba(14, 8, 6, 0.86); backdrop-filter: blur(6px); }
.lb-inner { display: grid; grid-template-columns: 1fr; background: var(--pearl); background-image: var(--fibre-plate); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
@media (min-width: 900px) { .lb-inner { grid-template-columns: 3fr 2fr; } }
.lb-img { background: var(--ink); display: grid; place-items: center; }
.lb-img img { width: 100%; height: auto; max-height: 80vh; object-fit: contain; }
.lb-copy { padding: var(--s6); display: grid; gap: var(--s3); align-content: start; }
.lb-copy .fam { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600; color: var(--gold-oxide); }
.lb-copy h3 { font-size: var(--counter-3); line-height: var(--counter-3-lh); }
.lb-copy .facts { margin: var(--s3) 0; }
.lb-nav { display: flex; gap: var(--s2); margin-top: auto; }
.lb-close { position: absolute; right: 8px; top: 8px; width: 40px; height: 40px; border: 0; background: rgba(36, 22, 18, 0.6); color: var(--pearl); border-radius: 999px; cursor: pointer; font-size: 20px; display: grid; place-items: center; }
.lb[open] { animation: lb-in 260ms var(--ease-settle); }
@keyframes lb-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ---------- 7. Made to your specification ---------- */
.custom .wrap { display: grid; gap: var(--s8); grid-template-columns: 1fr; }
@media (min-width: 900px) { .custom .wrap { grid-template-columns: 5fr 7fr; gap: var(--s12); align-items: start; } }
.steps { list-style: none; counter-reset: step; margin: var(--s6) 0; padding: 0; border-top: 1px solid rgba(36,22,18,0.22); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.5ch 1fr; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid rgba(36,22,18,0.22); font-size: var(--small); line-height: var(--small-lh); }
.steps li::before { content: counter(step, decimal-leading-zero); font-weight: 600; color: var(--ink-64); }
.js .steps.armed li { opacity: 0; }
.js .steps li.step-in { animation: settle-in var(--dur-settle) var(--ease-settle) both; }
@keyframes settle-in { from { opacity: 0; transform: translateY(8px) scale(0.99); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .steps.armed li { opacity: 1; } .js .steps li.step-in { animation: none; } }
.custom .actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.register { margin-top: var(--s16); }
.register h3 { margin-bottom: var(--s2); }
.register-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); margin-top: var(--s6); }
@media (min-width: 900px) { .register-grid { grid-template-columns: repeat(4, 1fr); } }
.reg-plate { position: relative; text-decoration: none; display: block; }
.reg-plate .thumb { aspect-ratio: 4 / 5; overflow: hidden; box-shadow: var(--shadow-contact); transition: transform var(--dur-state) var(--ease-standard), box-shadow var(--dur-state) var(--ease-standard); }
.reg-plate:hover .thumb { transform: translateY(-4px); box-shadow: var(--shadow-raise); }
.reg-plate img { width: 100%; height: 100%; object-fit: cover; transition: transform 1100ms var(--ease-settle); }
.reg-plate:hover img { transform: scale(1.05); }
.reg-plate .stamp { display: block; margin-top: 8px; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 600; color: var(--ink-64); }
.reg-plate .cap { margin-top: 8px; }
.reg-plate .ask { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: var(--caption); font-weight: 600; color: var(--gold-oxide); }
.reg-plate .ask svg { width: 12px; height: 12px; }

/* ---------- 8. What 127 people said ---------- */
.reviews .wrap { max-width: 760px; }
.reviews .rating { display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s8); }
.reviews .rating .figure { font-size: var(--rate); line-height: 1; font-weight: 500; letter-spacing: -1.2px; }
@media (max-width: 899px) { .reviews .rating .figure { font-size: 40px; } }
.stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.stars svg { width: 15px; height: 15px; fill: var(--ink-64); }
.stars svg.half { opacity: 0.45; }
.reviews h2 { font-family: var(--font-text); font-weight: 500; font-size: var(--counter-4); line-height: var(--counter-4-lh); letter-spacing: 0; }
.review { padding: var(--s6) 0; border-top: var(--pencil); }
.review:last-of-type { border-bottom: var(--pencil); }
.review p { font-family: var(--font-display); font-size: var(--counter-4); line-height: var(--counter-4-lh); }
.review .cap { margin-top: var(--s2); }

/* ---------- 9. Gajapathy Street ---------- */
.street { padding-top: 0; }
.street .storefront { margin-inline: calc(-1 * var(--gutter)); }
@media (min-width: 900px) { .street .storefront { margin-inline: 0; max-width: 880px; } }
.street .storefront img { width: 100%; height: auto; }
.street .below { border-top: 1px solid var(--gold); margin-top: var(--s8); padding-top: var(--s6); display: grid; gap: var(--s8); grid-template-columns: 1fr; }
@media (min-width: 900px) { .street .below { grid-template-columns: 5fr 4fr 3fr; gap: var(--s12); } }
.state-line { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--body-lg); }
.addr { font-size: var(--body); line-height: var(--body-lh); }
.hours { list-style: none; margin: var(--s4) 0 0; padding: 0; font-size: var(--small); }
.hours li { display: flex; justify-content: space-between; gap: var(--s4); padding: 6px 0; border-bottom: var(--pencil); }
.hours li.closed { color: var(--ink-64); }
.hours li.today { font-weight: 600; }
.hours li.today span:first-child::after { content: " today"; font-weight: 500; color: var(--gold-oxide); }
.street .actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }

/* ---------- 10. Four ways to ask ---------- */
.ask .doors { display: grid; gap: var(--s6); grid-template-columns: minmax(0, 1fr); margin-top: var(--s8); }
@media (min-width: 900px) { .ask .doors { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
.door { min-width: 0; }
.door { background: var(--pearl); background-image: var(--fibre-plate); padding: var(--s6); box-shadow: var(--shadow-contact); transition: box-shadow var(--dur-state) var(--ease-standard); }
.door:hover { box-shadow: var(--shadow-lift); }
.door h3 { margin-bottom: var(--s2); }
.door .why { color: var(--ink-64); font-size: var(--small); margin-bottom: var(--s4); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0; }
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border: 1px solid var(--ink-14); border-radius: 2px; background: var(--stone); font-size: var(--small); font-weight: 500; text-decoration: none; cursor: pointer; color: var(--ink); transition: border-color var(--dur-ui) var(--ease-standard), background-color var(--dur-ui) var(--ease-standard), transform var(--dur-ui) var(--ease-standard), color var(--dur-ui) var(--ease-standard); }
.chip:hover, .chip:focus-visible { border-color: var(--gold); background: var(--stone-warm); transform: translateY(-1px); }
.chip[aria-pressed="true"], .chip.on { background: var(--ink); color: var(--pearl); border-color: var(--ink); }
.chip[disabled], .chip.off { opacity: 0.45; cursor: not-allowed; text-decoration: line-through; }
.chip small { display: block; font-size: 11px; opacity: 0.7; }
.chip.day { display: grid; gap: 0; text-align: center; line-height: 1.2; min-width: 58px; padding: 8px 10px; }
.chip.day b { font-weight: 600; font-size: 15px; }
.form { display: grid; gap: var(--s3); margin-top: var(--s4); }
.form label, .field { display: grid; gap: 4px; font-size: var(--label); letter-spacing: var(--label-ls); text-transform: uppercase; font-weight: 600; color: var(--gold-oxide); }
.form input, .form select, .form textarea, .field input, .field select, .field textarea { font: inherit; font-size: 16px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--ink-14); border-radius: 2px; background: var(--stone); color: var(--ink); text-transform: none; letter-spacing: 0; font-weight: 400; transition: border-color var(--dur-ui) var(--ease-standard), box-shadow var(--dur-ui) var(--ease-standard); }
.form input:focus, .form select:focus, .form textarea:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176, 134, 64, 0.18); outline: none; }
.form .consent { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: var(--caption); line-height: var(--caption-lh); text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-64); }
.form .consent input { width: 20px; height: 20px; min-height: 0; margin: 0; accent-color: var(--emerald); }
.form .ok { display: none; color: var(--emerald); font-weight: 600; }
.form.sent .ok { display: block; animation: settle-in 500ms var(--ease-settle); }
.form.sent .fields { display: none; }
.door.expandable .drawer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms var(--ease-settle); }
.door.expandable .drawer > div { overflow: hidden; }
.door.expandable.open .drawer { grid-template-rows: 1fr; }
.door.expandable.open .toggle { display: none; }
.book .slots, .book .days { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s2) 0 var(--s4); }
.book .days { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: none; max-width: 100%; }
.book .days::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .book .days { flex-wrap: wrap; } }
.book .grid2 { display: grid; gap: var(--s3); grid-template-columns: 1fr; margin-bottom: var(--s4); }
@media (min-width: 600px) { .book .grid2 { grid-template-columns: 1fr 1fr; } }
.book .summary { font-size: var(--small); padding: var(--s3) var(--s4); background: var(--stone); border-left: 3px solid var(--gold); margin-bottom: var(--s4); min-height: 44px; transition: background-color var(--dur-state) var(--ease-standard); }
.book .summary.ready { background: rgba(31, 156, 124, 0.10); border-left-color: var(--teal); }
.btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* ---------- 11. The visiting card ---------- */
.card-band { padding-top: 0; }
.vcard { background: var(--pearl); background-image: var(--fibre-plate); padding: var(--s8); display: grid; gap: var(--s8); grid-template-columns: 1fr; }
@media (min-width: 900px) { .vcard { grid-template-columns: 5fr 7fr; gap: var(--s12); padding: var(--s12); } }
.vcard .lockup-lg { display: grid; gap: var(--s3); justify-items: start; margin-bottom: var(--s4); }
.vcard .lockup-lg .mono { width: 44px; height: auto; }
.vcard .lockup-lg .mono path { fill: var(--gold); }
.vcard .brand { font-family: var(--font-mark); font-weight: 600; font-size: 22px; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.1; }
.vcard .brand small { display: block; font-size: 11px; letter-spacing: 0.3em; color: var(--gold-oxide); margin-top: 6px; font-weight: 500; }
.vcard .brand .ta { display: block; text-transform: none; letter-spacing: 0; font-size: 19px; color: var(--ink-64); margin-top: 8px; font-family: var(--font-tamil); font-weight: 400; }
.vcard .meta { margin-top: var(--s4); font-size: var(--small); line-height: var(--small-lh); }
.vcard .cols { display: grid; gap: var(--s6); grid-template-columns: 1fr 1fr; font-size: var(--small); line-height: var(--small-lh); border-top: var(--pencil); padding-top: var(--s6); }
@media (min-width: 900px) { .vcard .cols { border-top: 0; padding-top: 0; grid-template-columns: 1fr 1fr 1fr; } }
.vcard .cols ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.vcard .cols a { text-decoration: none; }
.vcard .cols a:hover { text-decoration: underline; }
.vcard .legal { grid-column: 1 / -1; border-top: var(--pencil); padding-top: var(--s4); font-size: var(--caption); line-height: var(--caption-lh); color: var(--ink-64); max-width: 82ch; }

/* ---------- inner pages ---------- */
.page-head { padding-block: var(--s12) var(--s8); }
@media (min-width: 900px) { .page-head { padding-block: var(--s24) var(--s12); } }
.crumb { font-size: var(--small); color: var(--ink-64); margin-bottom: var(--s4); }
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

/* the builder */
.builder { display: grid; gap: var(--s8); grid-template-columns: 1fr; }
@media (min-width: 1000px) { .builder { grid-template-columns: 7fr 5fr; gap: var(--s12); align-items: start; } .builder .spec { position: sticky; top: calc(var(--edge-h) + var(--s6)); } }
.qs { display: grid; gap: var(--s8); }
.q { display: grid; gap: var(--s3); padding: var(--s6) 0 0; margin: 0; border: 0; border-top: var(--pencil); min-width: 0; }
.q h3 { font-size: var(--counter-4); line-height: var(--counter-4-lh); }
.q .step { font-size: var(--label); letter-spacing: var(--label-ls); text-transform: uppercase; font-weight: 600; color: var(--gold-oxide); }
.q .opts { display: flex; flex-wrap: wrap; gap: var(--s2); }
.q .opts label { position: relative; }
.q .opts input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.q .opts input:checked + .chip { background: var(--ink); color: var(--pearl); border-color: var(--ink); }
.q .opts input:focus-visible + .chip { outline: 2px solid var(--emerald); outline-offset: 2px; }
.q textarea { min-height: 110px; resize: vertical; }
.spec { background: var(--pearl); background-image: var(--fibre-plate); padding: var(--s6); box-shadow: var(--shadow-contact); display: grid; gap: var(--s4); }
.spec .lines { display: grid; gap: 0; font-size: var(--small); border-top: var(--pencil); }
.spec .lines div { display: grid; grid-template-columns: 11ch 1fr; gap: var(--s3); padding: 8px 0; border-bottom: var(--pencil); }
.spec .lines div span:first-child { color: var(--ink-64); }
.spec .lines div span:last-child { transition: color var(--dur-state) var(--ease-standard); }
.spec .lines div span.flash { color: var(--gold-oxide); }
.spec .lines .empty span:last-child { color: var(--ink-14); }
.spec .actions { display: grid; gap: var(--s2); }
.spec .actions .btn { width: 100%; }
.spec-copy { font-family: var(--font-text); font-size: 13px; white-space: pre-wrap; background: var(--stone); padding: var(--s3); border: 1px dashed var(--ink-14); color: var(--ink-64); display: none; }
.toast { position: fixed; left: 50%; bottom: calc(var(--rail-h) + 16px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); background: var(--ink); color: var(--pearl); padding: 10px 16px; border-radius: 2px; font-size: var(--small); opacity: 0; pointer-events: none; transition: opacity var(--dur-state) var(--ease-standard), transform var(--dur-state) var(--ease-settle); z-index: 60; }
@media (min-width: 900px) { .toast { bottom: 24px; } }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* utilities */
.stack > * + * { margin-top: var(--s4); }
.mt2 { margin-top: var(--s2); } .mt4 { margin-top: var(--s4); } .mt6 { margin-top: var(--s6); } .mt8 { margin-top: var(--s8); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.row-actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.lb-inner { position: relative; }

/* static mode for screenshots and crawlers: everything at rest */
.static .veil { display: none; }
.static .reveal, .static .reveal[data-reveal="wipe"], .static .reveal[data-reveal="wipe"] img, .static .hair, .static .hero-copy .rise, .static .hero-plate .piece { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
.static .reveal[data-reveal="draw"] svg path, .static .reveal[data-reveal="draw"] svg circle { stroke-dashoffset: 0 !important; }
.static .cloth.pending::before { clip-path: none !important; }
.static .steps.armed li { opacity: 1 !important; }
.static .band-glass::after { transform: none !important; }
.static .rail { transform: none !important; }