/* PostPackClarity: page styles.
   The page IS the painted sunset from the brochure art (fixed behind every
   page). Brown arrives as floating rounded panels and chrome. Text on the
   sunset is brown; text in brown panels is cream. Engine CSS is untouched. */

:root {
  --brown: #2A1206; --brown-2: #3A1B0C; --brown-3: #4B2512;
  --cream: #FFF4E4; --cream-soft: #E6CBAE;
  --red: #8E200C; --amber: #F7A738; --yellow: #F7C948;
  --on-sun: #2A1206; --on-sun-soft: #4A1E0A;

  --sc-canvas: #E8672E;
  --sc-surface: var(--brown);
  --sc-ink: var(--on-sun);
  --sc-ink-soft: var(--on-sun-soft);
  --sc-accent: var(--brown);
  --sc-accent-ink: var(--cream);
  --sc-font-display: "Montserrat", system-ui, sans-serif;
  --sc-font-text: "Montserrat", system-ui, sans-serif;
  --num: "Bebas Neue", "Oswald", Impact, sans-serif;
  --sc-shadow-color: 12 80% 12%;
  --sc-hairline: hsl(20 80% 10% / 0.18); --sc-hairline-strong: hsl(20 80% 10% / 0.32);
  --r-panel: clamp(20px, 2.4vw, 32px);
  --inset: clamp(8px, 1.2vw, 16px);
  --bar-h: 76px;
}
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--sc-canvas); color: var(--on-sun); font-weight: 500; letter-spacing: -0.005em; }

/* the painted sunset, fixed behind everything (a layer, not background-attachment, so iOS keeps it) */
.bg { position: fixed; inset: 0; z-index: -1; background: #E8672E url("assets/sunset.jpg") center / cover no-repeat; }
.bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, hsl(32 100% 72% / 0.34) 0%, hsl(32 100% 70% / 0.12) 45%, transparent 70%); }
@media (max-width: 860px) { .bg { background-image: url("assets/sunset-m.jpg"); } }
main, .foot { position: relative; z-index: 1; }

/* type: Montserrat light/heavy for the voice, Bebas for numbers and prices */
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { text-wrap: pretty; }
.h { font-weight: 300; letter-spacing: -0.05em; line-height: 0.96; }
.h b, .h strong { font-weight: 800; letter-spacing: -0.055em; }
.h em { font-style: normal; font-weight: 800; color: var(--red); }
.h--xl { font-size: clamp(2.9rem, 1.4rem + 5vw, 6.4rem); }
.h--lg { font-size: clamp(2.3rem, 1.3rem + 3.2vw, 4.4rem); }
.h--md { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); }
.num { font-family: var(--num); font-weight: 400; letter-spacing: 0.01em; line-height: 0.9; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--sc-t-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--sc-4); }
.lede { font-size: var(--sc-t-lg); line-height: 1.5; max-width: 44ch; margin: 0; color: var(--sc-ink-soft); font-weight: 500; }
.body { max-width: 58ch; margin: 0; line-height: 1.65; color: var(--sc-ink-soft); }
.wrap { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }
.sec { padding-block: var(--sc-section); position: relative; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--brown); color: var(--cream); padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 12px; }
.icon { width: 1.1em; height: 1.1em; flex: none; display: inline-block; vertical-align: -0.16em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--brown); outline-offset: 3px; }

/* brown panels: the second colour, always a floating rounded object */
.panel { background: var(--brown); color: var(--cream); border-radius: var(--r-panel); margin-inline: var(--inset);
  --sc-ink: var(--cream); --sc-ink-soft: var(--cream-soft); --sc-accent: var(--amber); --sc-accent-ink: var(--brown);
  --sc-hairline: hsl(0 0% 100% / 0.12); --sc-hairline-strong: hsl(0 0% 100% / 0.24);
  box-shadow: 0 30px 60px -30px hsl(12 80% 12% / 0.55); }
.panel :focus-visible { outline-color: var(--amber); }
.panel .h em { color: var(--amber); }

/* ------------------------------------------------------------ buttons -- */
.btn { display: inline-flex; align-items: center; gap: 0.55em; min-height: 52px; padding: 0 1.5em; border-radius: 999px; border: 2px solid transparent;
  font-weight: 700; font-size: var(--sc-t-sm); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn--primary { background: var(--sc-accent); color: var(--sc-accent-ink); box-shadow: 0 10px 24px -12px hsl(12 80% 10% / 0.7); }
.btn--ghost { border-color: currentColor; color: var(--sc-ink); background: transparent; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: #4A2210; }
  .panel .btn--primary:hover, .bar .btn--primary:hover { background: var(--yellow); }
  .btn--ghost:hover { background: hsl(20 80% 10% / 0.08); }
  .panel .btn--ghost:hover { background: hsl(0 0% 100% / 0.1); }
}
.link-arrow { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 800; color: var(--sc-ink); text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; transition: gap 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .link-arrow:hover { gap: 0.65em; } }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: hsl(20 80% 10% / 0.1); font-size: var(--sc-t-sm); font-weight: 700; color: var(--on-sun); text-decoration: none; }
.pill .icon { color: var(--brown); }
.pill b { font-family: var(--num); font-weight: 400; font-size: 1.35em; line-height: 1; letter-spacing: 0.02em; }

/* ------------------------------------------------------------- the bar -- */
.bar { position: fixed; z-index: 60; top: 12px; left: 50%; translate: -50% 0; width: min(1180px, calc(100% - 24px)); height: 60px;
  display: flex; align-items: center; gap: var(--sc-4); padding: 0 8px 0 10px; border-radius: 999px;
  background: hsl(20 75% 8% / 0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--cream);
  box-shadow: 0 16px 40px -18px hsl(12 80% 8% / 0.8);
  --sc-ink: var(--cream); --sc-accent: var(--amber); --sc-accent-ink: var(--brown); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand img { width: 42px; height: 42px; border-radius: 50%; }
.brand span { font-weight: 800; letter-spacing: -0.03em; font-size: 1.02rem; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a { padding: 10px 14px; border-radius: 999px; text-decoration: none; font-size: var(--sc-t-sm); font-weight: 600; color: var(--cream-soft); transition: color 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out); }
.nav a[aria-current="page"] { color: var(--brown); background: var(--amber); }
@media (hover: hover) and (pointer: fine) { .nav a:hover { color: var(--cream); background: hsl(0 0% 100% / 0.08); } .nav a[aria-current="page"]:hover { color: var(--brown); background: var(--amber); } }
.bar .btn { min-height: 44px; }
.bar :focus-visible { outline-color: var(--amber); }
.menu-btn { display: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: hsl(0 0% 100% / 0.1); color: var(--cream); align-items: center; justify-content: center; cursor: pointer; }
.menu-btn .icon { width: 22px; height: 22px; }
@media (max-width: 960px) {
  .nav { position: fixed; top: 70px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px; border-radius: 24px; background: var(--brown);
    transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity 200ms var(--sc-ease-out), transform 200ms var(--sc-ease-out), visibility 0s linear 200ms; box-shadow: 0 20px 40px -20px hsl(12 80% 8% / 0.9); }
  .nav a { font-size: var(--sc-t-lg); padding: 14px 16px; color: var(--cream); }
  .bar.is-open .nav { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
  .menu-btn { display: inline-flex; }
  .bar > .btn { display: none; }
}
.fab { display: none; }
@media (max-width: 960px) { .fab { display: inline-flex; position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 55; background: var(--brown); color: var(--cream); box-shadow: 0 14px 30px -12px hsl(12 80% 8% / 0.9); } }

/* =================================================================== HERO */
/* layers: its own copy of the plate (slow), Psyduck (rises), a warm haze (fast). Copy rides at 1x. */
.hero [data-sc-stage] { overflow: clip; }
.hero__plate { position: absolute; inset: -10% 0; background: url("assets/sunset.jpg") center / cover no-repeat; transform: translate3d(0, calc(var(--sc-p, 0) * -60px), 0) scale(1.04); }
.hero__plate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, hsl(32 100% 72% / 0.34) 0%, hsl(32 100% 70% / 0.12) 45%, transparent 70%); }
@media (max-width: 860px) { .hero__plate { background-image: url("assets/sunset-m.jpg"); } }
.hero__duck { position: absolute; right: 7vw; bottom: 0; width: min(40vw, 70svh * 1.2); max-width: none; height: auto; transform-origin: 50% 100%;
  transform: translate3d(0, calc(8% - var(--sc-p, 0) * 14%), 0) scale(calc(1 + var(--sc-p, 0) * 0.05));
  filter: drop-shadow(0 30px 40px hsl(12 80% 20% / 0.35)); }
.hero__haze { position: absolute; inset: auto 0 0 0; height: 22%; background: linear-gradient(180deg, transparent, hsl(40 95% 65% / 0.45)); transform: translate3d(0, calc(var(--sc-p, 0) * -50px), 0); pointer-events: none; }
.hero__copy { position: absolute; z-index: 20; left: var(--sc-gutter); top: 50%; translate: 0 -44%; max-width: min(40rem, 50vw); }
.hero__copy h1 { font-size: clamp(2.8rem, 1rem + 5.2vw, 6.6rem); }
.hero__copy .lede { margin-top: var(--sc-5); color: var(--on-sun-soft); max-width: 34ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sc-3); margin-top: var(--sc-6); }
.hero__trust { margin-top: var(--sc-6); }
@media (max-width: 860px) {
  .hero__copy { top: calc(var(--bar-h) + 2svh); translate: none; right: var(--sc-gutter); max-width: none; }
  .hero__copy h1 { font-size: clamp(2.3rem, 10.5vw, 3.4rem); }
  .hero__copy .lede { font-size: var(--sc-t-base); margin-top: var(--sc-3); }
  .hero__actions { margin-top: var(--sc-4); }
  .hero__trust { margin-top: var(--sc-4); }
  .hero__duck { right: 50%; translate: 50% 0; width: min(86vw, 36svh * 1.2); }
}
@media (max-width: 860px) and (max-height: 740px) { .hero__trust, .hero__copy .lede { display: none; } }

/* ======================================================= what we fix ==== */
.fix__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--sc-5); }
.svc { list-style: none; margin: var(--sc-8) 0 0; padding: 0; border-top: 2px solid var(--brown); }
.svc li { display: grid; grid-template-columns: 1.4fr 1fr auto auto; gap: var(--sc-5); align-items: baseline; padding: var(--sc-5) 0; border-bottom: 1px solid var(--sc-hairline-strong); }
.svc h3 { font-weight: 300; letter-spacing: -0.045em; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.6rem); line-height: 1; }
.svc h3 b { font-weight: 800; }
.svc .det { color: var(--on-sun-soft); font-size: var(--sc-t-sm); font-weight: 600; }
.svc .est { font-size: var(--sc-t-sm); font-weight: 700; white-space: nowrap; }
.svc .from { font-family: var(--num); font-size: clamp(1.8rem, 1.4rem + 1vw, 2.6rem); line-height: 1; white-space: nowrap; text-align: right; min-width: 6ch; }
.games { margin-top: var(--sc-5); font-weight: 700; font-size: var(--sc-t-sm); color: var(--on-sun-soft); }
@media (max-width: 760px) { .svc li { grid-template-columns: 1fr auto; gap: 4px var(--sc-4); } .svc .det { grid-column: 1; } .svc .est { grid-column: 1; } .svc .from { grid-row: 1; grid-column: 2; } }

/* ============================================ restorations rail (pan) === */
.work [data-sc-stage] { display: flex; align-items: center; padding-block: calc(var(--bar-h) + 4px) 12px; }
.work .panel { position: absolute; inset: calc(var(--bar-h) + 4px) 0 12px 0; }
.rail { position: relative; gap: clamp(1rem, 2vw, 2rem); padding-inline: calc(var(--sc-gutter) + var(--inset)); align-items: center; color: var(--cream); --sc-ink: var(--cream); --sc-ink-soft: var(--cream-soft); --sc-accent: var(--amber); --sc-accent-ink: var(--brown); }
.rail :focus-visible { outline-color: var(--amber); }
.rail__lead { flex: 0 0 min(28rem, 80vw); }
.rail__lead .lede { margin-top: var(--sc-4); }
.rail__note { flex: 0 0 min(22rem, 76vw); }
.rail__note p { font-weight: 300; letter-spacing: -0.04em; font-size: var(--sc-t-xl); line-height: 1.1; margin: 0 0 var(--sc-5); }
.rail__note p b { font-weight: 800; }
.resto { flex: 0 0 clamp(230px, 21vw, 300px); margin: 0; }
.compare, .still { position: relative; aspect-ratio: 3/4; border-radius: 18px; overflow: hidden; background: var(--brown-3); box-shadow: 0 20px 40px -20px hsl(12 80% 4% / 0.8); }
.compare { --pos: 50%; touch-action: pan-y; }
.still img, .compare__layer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare__layer { position: absolute; inset: 0; }
.compare__after { clip-path: inset(0 0 0 var(--pos)); }
.compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.compare__handle::after { content: ""; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 42px; height: 42px; border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A1206' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center/22px no-repeat; box-shadow: var(--sc-e2); }
.compare input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.compare:has(input:focus-visible) { outline: 3px solid var(--amber); outline-offset: 3px; }
.tag { position: absolute; top: 10px; padding: 4px 10px; border-radius: 999px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; pointer-events: none; }
.tag--b { left: 10px; background: hsl(20 80% 6% / 0.8); color: #fff; }
.tag--a { right: 10px; background: var(--amber); color: var(--brown); }
.resto figcaption { margin-top: var(--sc-3); font-size: var(--sc-t-sm); color: var(--cream-soft); }
.resto figcaption b { color: var(--cream); display: block; font-size: var(--sc-t-base); font-weight: 700; }
.compare__loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--cream-soft); font-size: var(--sc-t-xs); }
.work .resto { transform-origin: 50% 50%; will-change: transform, opacity; }

/* =================================================== grading wins ====== */
.cases { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-5); margin-top: var(--sc-8); }
.case { background: var(--brown); color: var(--cream); border-radius: var(--r-panel); padding: clamp(1rem, 2vw, 1.5rem); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-5); align-items: stretch;
  --sc-ink: var(--cream); --sc-ink-soft: var(--cream-soft); box-shadow: 0 30px 60px -30px hsl(12 80% 12% / 0.55); }
.case :focus-visible { outline-color: var(--amber); }
.case__body { display: flex; flex-direction: column; justify-content: space-between; gap: var(--sc-4); padding: var(--sc-2) var(--sc-2) var(--sc-2) 0; }
.case h3 { font-weight: 800; letter-spacing: -0.05em; font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.8rem); line-height: 0.95; color: var(--amber); }
.case p { margin: var(--sc-3) 0 0; color: var(--cream-soft); font-size: var(--sc-t-sm); line-height: 1.55; }
.case dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0; font-size: var(--sc-t-xs); }
.case dt { font-weight: 800; color: var(--cream); } .case dd { margin: 0; color: var(--cream-soft); }
.case__slabs { display: flex; gap: 8px; }
.case__slabs figure { margin: 0; flex: 1; max-width: 110px; }
.case__slabs img { width: 100%; height: auto; border-radius: 8px; }
.case__slabs figcaption { font-family: var(--num); font-size: 1.3rem; text-align: center; margin-top: 4px; color: var(--amber); }
@media (max-width: 1000px) { .cases { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .case { grid-template-columns: 1fr; } }
.chats__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--sc-5); margin-top: var(--sc-10); }
.chats { columns: 4 210px; column-gap: var(--sc-4); margin-top: var(--sc-6); }
.chat { break-inside: avoid; margin: 0 0 var(--sc-4); border-radius: 18px; overflow: hidden; background: #111; box-shadow: 0 20px 40px -24px hsl(12 80% 10% / 0.8); cursor: zoom-in; display: block; width: 100%; padding: 0; border: 0; }
.chat img { width: 100%; height: auto; display: block; }
.chats .chat:nth-child(n+9) { display: none; }
.chats.is-all .chat { display: block; }
.chats__more { display: flex; justify-content: center; margin-top: var(--sc-4); }

/* ============================================================ quiet ==== */
.quiet { padding-block: calc(var(--sc-section) * 1.1) calc(var(--sc-section) * 0.9); text-align: center; }
.quiet .h { max-width: 16ch; margin-inline: auto; }

/* ===================================================== LOGBOOK (peak) == */
.logbook [data-sc-stage] { padding: calc(var(--bar-h) + 4px) 0 12px; }
.logbook .panel { height: 100%; display: grid; grid-template-columns: minmax(18rem, 30rem) 1fr; gap: var(--sc-7); align-items: center; padding: clamp(1.25rem, 3vw, 3rem); overflow: hidden; }
.tally__over { font-size: var(--sc-t-sm); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-soft); margin: 0; }
.tally__big { font-family: var(--num); font-size: clamp(5rem, 3rem + 7vw, 10rem); line-height: 0.82; color: var(--amber); font-variant-numeric: tabular-nums; margin: 6px 0 0; }
.tally__big small { font-size: 0.36em; color: var(--cream); margin-left: 0.2em; }
.logbook .lede { margin-top: var(--sc-4); font-size: var(--sc-t-base); }
.bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; align-items: end; height: 110px; margin-top: var(--sc-6); }
.bars div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.bars i { display: block; width: 100%; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--yellow), #F07A2C); height: calc(var(--h) * var(--grow, 1)); }
.bars span { font-size: 0.64rem; font-weight: 800; color: var(--cream-soft); text-transform: uppercase; letter-spacing: 0.06em; }
.bars b { font-size: 0.7rem; font-variant-numeric: tabular-nums; }
.logbook__cta { margin-top: var(--sc-6); }
.wall { position: relative; height: 100%; max-height: 720px; overflow: hidden; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); grid-auto-rows: min-content; gap: 8px; align-content: start;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent); mask-image: linear-gradient(180deg, #000 78%, transparent); }
.tile { position: relative; aspect-ratio: 3/4; border-radius: 10px; overflow: hidden; background: var(--brown-3);
  opacity: 0; transform: translate3d(0, -22px, 0) rotate(var(--r, 0deg)) scale(1.06); transition: opacity 260ms var(--sc-ease-out), transform 320ms var(--sc-ease-out); }
.tile.is-in { opacity: 1; transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)); }
.tile img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 300ms var(--sc-ease-out); }
.tile img.ok { opacity: 1; }
.tile span { position: absolute; left: 5px; bottom: 5px; padding: 1px 6px; border-radius: 5px; background: hsl(20 80% 6% / 0.8); color: var(--cream); font-size: 0.6rem; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .tile { opacity: 1; transform: rotate(var(--r, 0deg)); transition: none; } }
@media (max-width: 860px) {
  .logbook .panel { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: var(--sc-3); align-items: start; }
  .logbook .lede, .logbook .bars { display: none; }
  .tally__big { font-size: 5rem; }
  .logbook__cta { margin-top: var(--sc-3); }
  .wall { grid-template-columns: repeat(4, 1fr); gap: 6px; }
}

/* ========================================================== reviews ==== */
.reviews__grid { display: grid; grid-template-columns: minmax(15rem, 20rem) 1fr; gap: var(--sc-8); align-items: start; }
.score { position: sticky; top: calc(var(--bar-h) + 2rem); }
.score__num { font-family: var(--num); font-size: clamp(6rem, 4rem + 5vw, 9rem); line-height: 0.82; }
.stars { display: flex; gap: 4px; color: var(--brown); margin-top: var(--sc-2); }
.stars .icon { width: 24px; height: 24px; }
.score p { margin: var(--sc-3) 0 var(--sc-5); font-weight: 700; }
.quotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--sc-4); }
.quote { margin: 0; padding: var(--sc-5); border-radius: 20px; background: hsl(36 100% 94% / 0.92); box-shadow: 0 20px 40px -26px hsl(12 80% 12% / 0.6); display: flex; flex-direction: column; justify-content: space-between; gap: var(--sc-4); }
.quote blockquote { margin: 0; font-size: var(--sc-t-base); line-height: 1.5; font-weight: 500; color: var(--brown); }
.quote figcaption { font-size: var(--sc-t-sm); color: #5A2A10; font-weight: 800; }
@media (max-width: 860px) { .reviews__grid { grid-template-columns: 1fr; gap: var(--sc-6); } .score { position: static; } }

/* =============================================================== why ==== */
.why { padding: clamp(1.5rem, 4vw, 4rem); }
.why__grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--sc-5); margin-top: var(--sc-7); }
.why__col { padding: clamp(1.25rem, 2.5vw, 2.5rem); border-radius: 22px; }
.why__col h3 { font-weight: 800; letter-spacing: -0.04em; font-size: var(--sc-t-xl); margin-bottom: 4px; }
.why__col > p { margin: 0 0 var(--sc-5); font-weight: 600; font-size: var(--sc-t-sm); }
.why__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-4); }
.why__col li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; line-height: 1.45; font-size: var(--sc-t-sm); }
.why__col li .icon { width: 22px; height: 22px; margin-top: 1px; }
.why__col li b { display: block; font-size: var(--sc-t-base); }
.why__col--diy { background: var(--brown-2); color: var(--cream-soft); }
.why__col--diy h3 { color: var(--cream); }
.why__col--diy .icon { opacity: 0.6; }
.why__col--us { background: url("assets/sunset.jpg") center / cover; color: var(--brown); position: relative; isolation: isolate; }
.why__col--us::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: hsl(34 100% 74% / 0.55); z-index: -1; }
.why__col--us li span { color: #4A1E0A; }
@media (max-width: 860px) { .why__grid { grid-template-columns: 1fr; } }

/* ================================================= steps (pin, sun) ==== */
.steps [data-sc-stage] { display: grid; grid-template-columns: minmax(16rem, 28rem) 1fr; gap: var(--sc-8); align-items: center; padding: calc(var(--bar-h) + 1rem) var(--sc-gutter) 1rem; }
.zero { display: inline-flex; align-items: center; gap: var(--sc-4); background: var(--brown); color: var(--cream); border-radius: 22px; padding: var(--sc-4) var(--sc-5); margin-top: var(--sc-6); }
.zero .num { font-size: 4rem; color: var(--amber); }
.zero span { display: block; font-weight: 800; font-size: var(--sc-t-lg); }
.zero small { display: block; color: var(--cream-soft); font-size: var(--sc-t-sm); font-weight: 500; }
.route { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(0.6rem, 2.2svh, 1.6rem); }
.route li { display: grid; grid-template-columns: 4.6rem 1fr; gap: var(--sc-4); align-items: center; padding: var(--sc-4) var(--sc-5); border-radius: 22px; background: hsl(20 80% 10% / 0.08);
  opacity: 0.45; transform: translateX(-10px); transition: opacity 320ms var(--sc-ease-out), transform 320ms var(--sc-ease-out), background-color 320ms var(--sc-ease-out), color 320ms var(--sc-ease-out); }
.route li.is-on { opacity: 1; transform: none; }
.route li.is-now { background: var(--brown); color: var(--cream); }
.route .num { font-size: clamp(3rem, 2rem + 2.4vw, 4.4rem); color: var(--red); }
.route li.is-now .num { color: var(--amber); }
.route h3 { font-weight: 800; font-size: var(--sc-t-lg); letter-spacing: -0.03em; line-height: 1.15; }
.route p { margin: 2px 0 0; font-size: var(--sc-t-sm); opacity: 0.85; max-width: 48ch; }
@media (prefers-reduced-motion: reduce) { .route li { opacity: 1; transform: none; } }
@media (max-width: 860px) {
  .steps [data-sc-stage] { grid-template-columns: 1fr; gap: var(--sc-4); align-content: center; }
  .steps .zero { margin-top: var(--sc-3); padding: var(--sc-2) var(--sc-4); } .zero .num { font-size: 2.6rem; }
  .route li { grid-template-columns: 2.6rem 1fr; padding: var(--sc-3) var(--sc-4); } .route .num { font-size: 2.4rem; }
  .route h3 { font-size: var(--sc-t-base); } .route p { font-size: 0.78rem; }
}

/* ======================================================= photo first === */
.snap { padding: clamp(1.5rem, 4vw, 4rem); display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--sc-8); align-items: center; }
.snap ol { list-style: none; margin: var(--sc-6) 0 0; padding: 0; display: grid; gap: var(--sc-4); counter-reset: s; }
.snap li { counter-increment: s; display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; font-size: var(--sc-t-lg); line-height: 1.35; color: var(--cream-soft); }
.snap li::before { content: counter(s); width: 36px; height: 36px; border-radius: 50%; background: var(--amber); color: var(--brown); display: grid; place-items: center; font-weight: 800; font-size: 0.9rem; }
.snap li b { color: var(--cream); }
.qrs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-4); }
.qrs a { display: block; text-decoration: none; text-align: center; font-weight: 800; color: var(--cream); }
.qrs img { width: 100%; height: auto; border-radius: 20px; background: #fff; padding: 12px; margin-bottom: var(--sc-3); }
@media (max-width: 860px) { .snap { grid-template-columns: 1fr; gap: var(--sc-5); } .qrs img { display: none; } .qrs a { background: var(--amber); color: var(--brown); border-radius: 999px; padding: 14px; } }

/* ============================================================= visit === */
.visit__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--sc-8); align-items: stretch; }
.visit .lede { margin: var(--sc-5) 0 var(--sc-6); }
.facts { display: grid; gap: var(--sc-5); margin-top: var(--sc-7); }
.fact { display: grid; grid-template-columns: 26px 1fr; gap: 12px; }
.fact .icon { width: 22px; height: 22px; margin-top: 2px; }
.fact b { display: block; }
.fact a { color: var(--on-sun-soft); font-weight: 700; }
.hours { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 2px 20px; margin: 4px 0 0; font-size: var(--sc-t-sm); font-variant-numeric: tabular-nums; }
.hours dt, .hours dd { margin: 0; }
.hours .is-today { font-weight: 800; }
.map { border-radius: var(--r-panel); overflow: hidden; min-height: 440px; background: var(--brown); box-shadow: 0 30px 60px -30px hsl(12 80% 12% / 0.6); position: relative; border: 6px solid var(--brown); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 860px) { .visit__grid { grid-template-columns: 1fr; } .map { min-height: 300px; } }

/* ============================================================ footer === */
.foot { margin: var(--sc-8) var(--inset) var(--inset); padding: var(--sc-7) clamp(1.25rem, 3vw, 3rem) calc(var(--sc-6) + 70px); border-radius: var(--r-panel); background: var(--brown); color: var(--cream-soft); }
.foot a { color: var(--cream-soft); }
.next__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sc-3); }
.next__grid a { display: block; padding: var(--sc-5); border-radius: 18px; background: var(--brown-2); text-decoration: none; transition: background-color 160ms var(--sc-ease-out); }
.next__grid b { display: flex; align-items: center; justify-content: space-between; color: var(--cream); font-weight: 800; font-size: var(--sc-t-lg); letter-spacing: -0.03em; }
.next__grid span { display: block; margin-top: 4px; font-size: var(--sc-t-sm); }
.next__grid .icon { color: var(--amber); transition: transform 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .next__grid a:hover { background: var(--brown-3); } .next__grid a:hover .icon { transform: translateX(4px); } }
.foot__base { display: flex; flex-wrap: wrap; gap: var(--sc-3) var(--sc-6); justify-content: space-between; align-items: center; margin-top: var(--sc-7); padding-top: var(--sc-5); border-top: 1px solid hsl(0 0% 100% / 0.12); font-size: var(--sc-t-xs); }
.foot__links { display: flex; gap: var(--sc-5); flex-wrap: wrap; }
.foot :focus-visible { outline-color: var(--amber); }
@media (max-width: 860px) { .next__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 961px) { .foot { padding-bottom: var(--sc-6); } }

/* ======================================================= inner pages === */
.page-head { padding-block: calc(var(--bar-h) + clamp(3rem, 7vw, 6rem)) clamp(2rem, 5vw, 4rem); }
.page-head .lede { margin-top: var(--sc-5); }
.page-body { padding: clamp(1.5rem, 4vw, 4rem); }
.cta-band { margin-top: var(--sc-9); padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--r-panel); background: url("assets/sunset.jpg") center / cover; color: var(--brown); position: relative; isolation: isolate;
  --sc-ink: var(--brown); --sc-accent: var(--brown); --sc-accent-ink: var(--cream);
  display: flex; flex-wrap: wrap; gap: var(--sc-5); align-items: center; justify-content: space-between; }
.cta-band::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: hsl(34 100% 74% / 0.45); z-index: -1; }
.cta-band p { margin: 6px 0 0; font-weight: 600; color: #4A1E0A; }
.cta-band :focus-visible { outline-color: var(--brown); }

/* prices */
.turn { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sc-3); margin-bottom: var(--sc-9); }
.turn div { padding: var(--sc-4); border-radius: 18px; background: var(--brown-2); }
.turn b { display: block; font-family: var(--num); font-weight: 400; font-size: 2rem; line-height: 1; color: var(--amber); }
.turn span { font-weight: 700; font-size: var(--sc-t-sm); }
.pricegroups { display: grid; gap: var(--sc-8); }
.pricegroup h2 { font-weight: 800; letter-spacing: -0.04em; font-size: var(--sc-t-2xl); }
.pricegroup__note { margin: 6px 0 var(--sc-3); color: var(--amber); font-weight: 700; font-size: var(--sc-t-sm); }
.pricelist { width: 100%; border-collapse: collapse; }
.pricelist th, .pricelist td { text-align: left; padding: var(--sc-4) 0; border-bottom: 1px solid hsl(0 0% 100% / 0.12); vertical-align: middle; }
.pricelist th { font-weight: 700; width: 38%; }
.pricelist td { color: var(--cream-soft); font-size: var(--sc-t-sm); }
.pricelist td.price { text-align: right; color: var(--amber); font-family: var(--num); font-size: 2.1rem; line-height: 1; white-space: nowrap; }
.pricelist td.price.is-quote { font-family: inherit; font-size: var(--sc-t-sm); font-weight: 600; color: var(--cream-soft); }
.fine { margin-top: var(--sc-8); padding: var(--sc-5); border-radius: 18px; background: var(--brown-2); color: var(--cream-soft); font-size: var(--sc-t-sm); line-height: 1.6; }
.fine b { color: var(--cream); }
@media (max-width: 760px) { .turn { grid-template-columns: 1fr 1fr; } .pricelist th { width: auto; } .pricelist td.detail { display: none; } }

/* faq */
.faq { max-width: 56rem; }
.faq details { border-bottom: 1px solid hsl(0 0% 100% / 0.14); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--sc-4); padding: var(--sc-5) 0; font-weight: 800; font-size: var(--sc-t-lg); letter-spacing: -0.03em; border-radius: 6px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 1.8rem; color: var(--amber); transition: transform 200ms var(--sc-ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 var(--sc-5); color: var(--cream-soft); max-width: 64ch; line-height: 1.65; }

/* guide */
.dd { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-4); }
.dd__col { border-radius: 22px; padding: clamp(1.25rem, 3vw, 2.5rem); }
.dd__col--do { background: url("assets/sunset.jpg") center / cover; color: var(--brown); position: relative; isolation: isolate; }
.dd__col--do::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: hsl(34 100% 74% / 0.5); z-index: -1; }
.dd__col--dont { background: var(--brown-2); }
.dd__col h2 { margin: 0 0 var(--sc-5); display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: -0.04em; font-size: var(--sc-t-2xl); }
.dd__badge { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.dd__col--do .dd__badge { background: var(--brown); color: var(--cream); }
.dd__col--dont .dd__badge { background: var(--amber); color: var(--brown); }
.dd__badge .icon { width: 24px; height: 24px; }
.dd ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-5); counter-reset: dd; }
.dd li { counter-increment: dd; display: grid; grid-template-columns: 2.4rem 1fr; gap: 10px; }
.dd li::before { content: counter(dd); font-family: var(--num); font-size: 2.4rem; line-height: 0.85; }
.dd__col--dont li::before { color: var(--amber); }
.dd li b { display: block; font-weight: 800; }
.dd li span { display: block; margin-top: 2px; font-size: var(--sc-t-sm); opacity: 0.88; }
@media (max-width: 760px) { .dd { grid-template-columns: 1fr; } }
.layers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-8); align-items: center; margin-top: var(--sc-10); }
.layers svg { width: 100%; height: auto; }
.layers .body { margin-top: var(--sc-4); }
@media (max-width: 760px) { .layers { grid-template-columns: 1fr; gap: var(--sc-5); } }
.topics { margin-top: var(--sc-10); }
.topics__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-7) var(--sc-8); margin-top: var(--sc-6); }
.topics__grid h3 { font-weight: 800; font-size: var(--sc-t-lg); letter-spacing: -0.03em; }
.topics__grid p { margin: var(--sc-2) 0 0; color: var(--cream-soft); line-height: 1.65; }
@media (max-width: 760px) { .topics__grid { grid-template-columns: 1fr; } }

/* logbook page */
.lb-stats { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sc-8); margin-top: var(--sc-6); }
.lb-stats .tally__big { color: var(--brown); }
.lb-stats .tally__big small { color: var(--red); }
.lb-bars { flex: 1 1 22rem; max-width: 34rem; }
.lb-bars .bars { height: 130px; margin: 0; }
.lb-bars .bars i { background: var(--brown); }
.lb-bars .bars span, .lb-bars .bars b { color: var(--brown); }
.lb-note { margin-top: var(--sc-5); font-weight: 700; max-width: 62ch; font-size: var(--sc-t-sm); }
.lb-tools { display: flex; flex-wrap: wrap; gap: var(--sc-3); align-items: center; margin-bottom: var(--sc-4); }
.search { position: relative; flex: 1 1 16rem; max-width: 22rem; }
.search .icon { position: absolute; left: 14px; top: 50%; translate: 0 -50%; color: var(--cream-soft); }
.search input { width: 100%; min-height: 48px; padding: 0 14px 0 42px; border-radius: 999px; border: 1px solid hsl(0 0% 100% / 0.2); background: var(--brown-2); color: var(--cream); }
.search input::placeholder { color: var(--cream-soft); opacity: 0.8; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid hsl(0 0% 100% / 0.2); background: transparent; color: var(--cream); cursor: pointer; font-size: var(--sc-t-sm); font-weight: 700; transition: background-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out); }
.chip[aria-pressed="true"] { background: var(--amber); color: var(--brown); border-color: var(--amber); }
.toggle { display: inline-flex; align-items: center; gap: 8px; font-size: var(--sc-t-sm); font-weight: 700; cursor: pointer; }
.toggle input { width: 18px; height: 18px; accent-color: var(--amber); }
.lb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sc-4); }
.card { all: unset; box-sizing: border-box; display: block; cursor: zoom-in; border-radius: 14px; }
.card:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.card__img { display: block; position: relative; aspect-ratio: 3/4; border-radius: 14px; overflow: hidden; background: var(--brown-2); }
.card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 280ms var(--sc-ease-out); }
.card__img img.ok { opacity: 1; }
.card__img img.a.ok { opacity: 0; }
@media (hover: hover) and (pointer: fine) { .card:hover .card__img img.a.ok { opacity: 1; } }
.card__badge { position: absolute; right: 6px; top: 6px; padding: 2px 8px; border-radius: 999px; font-size: 0.64rem; font-weight: 800; background: var(--amber); color: var(--brown); }
.card__meta { display: flex; justify-content: space-between; gap: 6px; margin-top: 6px; font-size: var(--sc-t-xs); color: var(--cream-soft); font-weight: 600; }
.card__meta b { color: var(--cream); font-variant-numeric: tabular-nums; }
.lb-more { display: flex; justify-content: center; margin-top: var(--sc-7); }
.lb-status { padding: var(--sc-4) 0; color: var(--cream-soft); font-weight: 600; }

/* lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(1100px, 94vw); width: 100%; color: var(--cream); }
.lightbox::backdrop { background: hsl(20 70% 4% / 0.85); backdrop-filter: blur(4px); }
.lightbox__in { background: var(--brown); border-radius: 24px; padding: clamp(1rem, 2.5vw, 1.75rem); max-height: 90svh; overflow: auto; }
.lightbox__head { display: flex; justify-content: space-between; align-items: center; gap: var(--sc-4); margin-bottom: var(--sc-4); }
.lightbox__head h2 { font-weight: 800; letter-spacing: -0.04em; font-size: var(--sc-t-xl); }
.lightbox__close { width: 44px; height: 44px; border-radius: 50%; border: 0; background: hsl(0 0% 100% / 0.1); color: var(--cream); font-size: 1.4rem; cursor: pointer; flex: none; }
.lightbox__close:focus-visible { outline: 3px solid var(--amber); }
.lightbox__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-5); }
.lightbox__cols h3 { margin: 0 0 var(--sc-3); font-size: var(--sc-t-sm); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.lightbox__cols h3.b { color: var(--cream-soft); } .lightbox__cols h3.a { color: var(--amber); }
.lightbox__imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sc-3); }
.lightbox__imgs img { width: 100%; height: auto; border-radius: 12px; background: var(--brown-2); aspect-ratio: 3/4; object-fit: cover; }
.lightbox__imgs img[data-hi] { aspect-ratio: auto; }
.lightbox__imgs img:not([src]) { visibility: hidden; }
.lightbox__none { color: var(--cream-soft); font-size: var(--sc-t-sm); }
.lightbox--chat { max-width: min(560px, 94vw); }
.lightbox--chat .lightbox__in img { width: 100%; height: auto; border-radius: 14px; }
@media (max-width: 700px) { .lightbox__cols { grid-template-columns: 1fr; } }
section.panel { margin-block: calc(var(--sc-section) * 0.5); }
@media (max-width: 860px) { .case .compare { max-width: 320px; } }
.cases { grid-template-columns: 1fr; }
.case { grid-template-columns: minmax(200px, 300px) 1fr; gap: clamp(1rem, 3vw, 3rem); padding: clamp(1rem, 2.5vw, 2rem); }
.case h3 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem); }
.case p { font-size: var(--sc-t-base); max-width: 40ch; }
.case__slabs figure { max-width: 130px; }
@media (max-width: 640px) { .case { grid-template-columns: 1fr; } .case .compare { max-width: none; } }
.hero__copy .lede { color: var(--on-sun); }
@media (max-width: 860px) {
  .hero__plate::after, .bg::after { background: linear-gradient(180deg, hsl(34 100% 74% / 0.55) 0%, hsl(34 100% 72% / 0.3) 50%, transparent 75%); }
}
@media (max-width: 860px) { .chats:not(.is-all) .chat:nth-child(n+5) { display: none; } }
.card__img::before { content: attr(data-id); position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--num); font-size: 1.8rem; color: hsl(30 60% 80% / 0.35); }
.tile span:empty { display: none; }

/* logbook: how to check on a card */
.lb-track { display: grid; grid-template-columns: 1fr auto; gap: var(--sc-6); align-items: center; padding: clamp(1.25rem, 3vw, 2rem); margin-bottom: var(--sc-7); border-radius: 22px; background: var(--brown-2); }
.lb-track p { margin: var(--sc-3) 0 0; color: var(--cream-soft); max-width: 60ch; line-height: 1.6; }
.lb-track__actions { display: grid; gap: var(--sc-3); justify-items: start; }
.lb-sheets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--sc-t-sm); color: var(--cream-soft); font-weight: 700; }
.lb-sheets a { padding: 6px 12px; border-radius: 999px; border: 1px solid hsl(0 0% 100% / 0.22); color: var(--cream); text-decoration: none; }
.lb-sheets a:hover { background: var(--amber); color: var(--brown); border-color: var(--amber); }
.lb-grid .card { cursor: default; }
@media (max-width: 860px) { .lb-track { grid-template-columns: 1fr; } }

/* ============================== top restorations, picked by month ====== */
.top { padding: clamp(1.5rem, 4vw, 4rem) 0; overflow: hidden; }
.top__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--sc-5); padding-inline: clamp(1.5rem, 4vw, 4rem); }
.top__head .lede { margin-top: var(--sc-4); }
.top__stage { position: relative; margin-top: var(--sc-7); }
.top__rail { --h: clamp(300px, 58svh, 540px); display: flex; align-items: flex-start; gap: clamp(0.75rem, 2vw, 1.75rem); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 12px 50% 8px; -webkit-overflow-scrolling: touch; }
.top__rail::-webkit-scrollbar { display: none; }
.top__rail:focus-visible { outline: 3px solid var(--amber); outline-offset: -3px; border-radius: 18px; }
.pick { flex: none; margin: 0; scroll-snap-align: center; transform-origin: 50% 40%; will-change: transform, opacity; }
.pick button { all: unset; display: block; cursor: zoom-in; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 50px -24px hsl(12 80% 4% / 0.9); background: var(--brown-3); }
.pick button:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.pick img { display: block; height: var(--h); width: auto; max-width: 86vw; min-width: calc(var(--h) * 0.6); object-fit: cover; }
.pick figcaption { margin-top: var(--sc-3); text-align: center; font-size: var(--sc-t-sm); color: var(--cream-soft); }
.pick figcaption b { display: block; color: var(--cream); font-size: var(--sc-t-base); font-weight: 700; }
.top__nav { position: absolute; top: calc(12px + clamp(300px, 58svh, 540px) / 2); translate: 0 -50%; z-index: 2; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--amber); color: var(--brown); display: grid; place-items: center; cursor: pointer; box-shadow: 0 12px 24px -10px hsl(12 80% 4% / 0.9); transition: transform 120ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out); }
.top__nav .icon { width: 24px; height: 24px; }
.top__nav--prev { left: clamp(0.75rem, 3vw, 3rem); } .top__nav--prev .icon { transform: scaleX(-1); }
.top__nav--next { right: clamp(0.75rem, 3vw, 3rem); }
.top__nav:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .top__nav:hover { background: var(--yellow); } }
@media (max-width: 700px) { .top__nav { display: none; } .top__rail { --h: clamp(280px, 50svh, 420px); } }
.top__rail { position: relative; }

/* ======================= guide: the stack, per issue ==================== */
.stack { margin-top: var(--sc-10); }
.stack__head { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sc-8); align-items: center; }
.stack__main svg, .issue svg, .loss__diagram svg { width: 100%; height: auto; display: block; }
.stack__head .body { margin-top: var(--sc-4); font-size: var(--sc-t-lg); line-height: 1.5; }
.issues { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sc-4); margin-top: var(--sc-8); }
.issue { grid-column: span 2; --stack-bg: var(--brown-2); background: var(--brown-2); border-radius: 22px; padding: var(--sc-5); }
.issue:nth-child(4), .issue:nth-child(5) { grid-column: span 3; }
.issue svg { max-width: 420px; margin-inline: auto; }
.issue h3 { margin-top: var(--sc-4); font-weight: 800; font-size: var(--sc-t-lg); letter-spacing: -0.03em; }
.issue p { margin: var(--sc-2) 0 0; color: var(--cream-soft); font-size: var(--sc-t-sm); line-height: 1.6; }
@media (max-width: 1000px) { .issues { grid-template-columns: 1fr 1fr; } .issue, .issue:nth-child(4), .issue:nth-child(5) { grid-column: auto; } .issue:last-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .stack__head { grid-template-columns: 1fr; gap: var(--sc-5); } .issues { grid-template-columns: 1fr; } .issue:last-child { grid-column: auto; } }

/* ======================= guide: is a crease worth it ==================== */
.crease, .loss { margin-top: var(--sc-10); padding-top: var(--sc-9); border-top: 1px solid hsl(0 0% 100% / 0.12); }
.crease .body, .loss .body { margin-top: var(--sc-4); font-size: var(--sc-t-lg); line-height: 1.5; }
.factors { list-style: none; margin: var(--sc-7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sc-4); }
.factors li { display: grid; grid-template-columns: auto 1fr; gap: var(--sc-4); align-items: start; padding: var(--sc-5); border-radius: 22px; background: var(--brown-2); }
.factors .num { font-size: 3.2rem; color: var(--amber); }
.factors b { display: block; font-weight: 800; font-size: var(--sc-t-lg); letter-spacing: -0.03em; }
.factors span:not(.num) { display: block; margin-top: 4px; color: var(--cream-soft); font-size: var(--sc-t-sm); line-height: 1.55; }
.scale { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-4) var(--sc-5); margin-top: var(--sc-7); }
.scale__bar { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sc-4); font-size: var(--sc-t-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-soft); }
.scale__bar i { height: 14px; border-radius: 999px; background: linear-gradient(90deg, var(--yellow), var(--amber) 40%, #F07A2C 70%, #E0452B); }
.scale__end { padding: var(--sc-5); border-radius: 22px; }
.scale__end b { display: block; font-weight: 800; font-size: var(--sc-t-xl); letter-spacing: -0.04em; }
.scale__end p { margin: var(--sc-2) 0 0; font-size: var(--sc-t-sm); line-height: 1.6; }
.scale__end--a { background: url("assets/sunset.jpg") center / cover; color: var(--brown); position: relative; isolation: isolate; }
.scale__end--a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: hsl(40 100% 76% / 0.6); z-index: -1; }
.scale__end--b { background: var(--brown-2); box-shadow: inset 0 0 0 2px #E0452B; }
.scale__end--b p { color: var(--cream-soft); }
.scale__grade { display: inline-flex; align-items: center; gap: var(--sc-3); margin-top: var(--sc-4); padding: 8px 16px; border-radius: 999px; background: var(--brown); }
.scale__grade .num { font-size: 1.8rem; color: var(--cream-soft); }
.scale__grade .num:last-child { color: var(--amber); }
.scale__grade .icon { color: var(--cream-soft); }
.crease__note { margin: var(--sc-5) 0 0; font-size: var(--sc-t-sm); color: var(--cream-soft); font-weight: 600; }
@media (max-width: 860px) { .factors { grid-template-columns: 1fr; } .scale { grid-template-columns: 1fr; } .scale__bar { grid-row: auto; } }

/* ======================= guide: material loss =========================== */
.loss__head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-8); align-items: center; }
.loss__diagram { --stack-bg: var(--brown-2); background: var(--brown-2); border-radius: 22px; padding: var(--sc-5); }
.loss__places { list-style: none; margin: var(--sc-6) 0 0; padding: 0; display: grid; gap: var(--sc-3); }
.loss__places li { display: grid; grid-template-columns: 9.5rem 1fr; gap: var(--sc-4); padding-top: var(--sc-3); border-top: 1px solid hsl(0 0% 100% / 0.12); font-size: var(--sc-t-sm); line-height: 1.5; }
.loss__places b { font-weight: 800; }
.loss__places span { color: var(--cream-soft); }
.loss__points { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-4); margin-top: var(--sc-7); }
.loss__points div { padding: var(--sc-5); border-radius: 22px; background: var(--brown-2); border-top: 4px solid var(--amber); }
.loss__points h3 { font-weight: 800; font-size: var(--sc-t-lg); letter-spacing: -0.03em; }
.loss__points p { margin: var(--sc-2) 0 0; color: var(--cream-soft); line-height: 1.6; }
@media (max-width: 860px) { .loss__head, .loss__points { grid-template-columns: 1fr; } .loss__places li { grid-template-columns: 1fr; gap: 2px; } }
.stack__main { --stack-bg: var(--brown); }

.issue:nth-child(n+4) { grid-column: span 3; }
@media (max-width: 1000px) { .issue:nth-child(n+4) { grid-column: auto; } .issue:last-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .issue:last-child { grid-column: auto; } }

/* ===================== light panel (prices): cream card on the orange === */
.panel--light { background: #FFF8EE; color: var(--brown);
  --sc-ink: var(--brown); --sc-ink-soft: #5A2A10; --sc-accent: var(--brown); --sc-accent-ink: var(--cream);
  --sc-hairline: hsl(20 80% 10% / 0.14); --sc-hairline-strong: hsl(20 80% 10% / 0.26); }
.panel--light :focus-visible { outline-color: var(--brown); }
.panel--light .h em { color: var(--red); }
.panel--light .turn div { background: #FFE7C2; }
.panel--light .turn b { color: var(--red); }
.panel--light .pricegroup__note { color: #A63A10; }
.panel--light .pricelist th, .panel--light .pricelist td { border-bottom-color: hsl(20 80% 10% / 0.14); }
.panel--light .pricelist td { color: #5A2A10; }
.panel--light .pricelist td.price { color: var(--red); }
.panel--light .pricelist td.price.is-quote { color: #5A2A10; }
.panel--light .pricelist tr { transition: background-color 140ms var(--sc-ease-out); }
.panel--light .fine { background: #FFE7C2; color: #4A1E0A; }
.panel--light .fine b { color: var(--brown); }

/* ===================== FAQ: every question is its own card ============== */
.faq-wrap { padding-bottom: var(--sc-7); }
.faq { max-width: 58rem; display: grid; gap: var(--sc-3); }
.faq details { border: 0; border-radius: 22px; background: var(--brown); color: var(--cream); box-shadow: 0 18px 36px -24px hsl(12 80% 10% / 0.7);
  transition: transform 180ms var(--sc-ease-out), background-color 200ms var(--sc-ease-out), color 200ms var(--sc-ease-out), box-shadow 180ms var(--sc-ease-out); }
.faq summary { padding: clamp(1rem, 2vw, 1.4rem) clamp(1.1rem, 2.4vw, 1.75rem); gap: var(--sc-5); border-radius: 22px; font-size: var(--sc-t-lg); }
.faq summary::after { content: ""; flex: none; width: 44px; height: 44px; border-radius: 50%; font-size: 0;
  background: var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A1206' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 22px no-repeat;
  transition: transform 240ms var(--sc-ease-out), background-color 200ms var(--sc-ease-out); }
.faq summary:focus-visible { outline: 3px solid var(--brown); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .faq details:not([open]):hover { transform: translateY(-3px); background: var(--brown-3); box-shadow: 0 26px 44px -24px hsl(12 80% 10% / 0.8); }
  .faq details:not([open]):hover summary::after { transform: scale(1.12) rotate(90deg); background-color: var(--yellow); }
}
.faq details:active { transform: scale(0.995); }
.faq details[open] { background: #FFF8EE; color: var(--brown); }
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--brown);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF4E4' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.faq details p { margin: 0; padding: 0 clamp(1.1rem, 2.4vw, 1.75rem) clamp(1.1rem, 2vw, 1.5rem); color: #4A1E0A; max-width: 66ch; font-size: var(--sc-t-base); }
@media (prefers-reduced-motion: reduce) { .faq details, .faq summary::after { transition: none; } }

/* ---- hero: Psyduck stays planted; his cut-off bottom fades into the haze -- */
.hero__duck { transform: translate3d(0, calc((1 - var(--sc-p, 0)) * 7%), 0) scale(calc(1 + var(--sc-p, 0) * 0.04));
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 99%); mask-image: linear-gradient(180deg, #000 80%, transparent 99%); }
.hero__haze { height: 30%; background: linear-gradient(180deg, transparent, hsl(40 95% 66% / 0.6)); transform: none; }

/* ---- steps: slide in first, then brighten; the current one is the brown card */
.route li { opacity: 0.4; transform: translateX(-14px);
  transition: transform 420ms var(--sc-ease-out), opacity 380ms var(--sc-ease-out) 220ms, background-color 380ms var(--sc-ease-out) 220ms, color 380ms var(--sc-ease-out) 220ms; }
.route li.is-on { opacity: 0.72; transform: none; }
.route li.is-now { opacity: 1; }

/* ---- QR codes: say they can be clicked ---------------------------------- */
.qrs a { position: relative; padding-top: 14px; }
.qrs__tap { position: absolute; top: 0; left: 50%; translate: -50% 0; z-index: 1; padding: 6px 14px; border-radius: 999px; background: var(--amber); color: var(--brown); font-size: var(--sc-t-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 8px 16px -8px hsl(12 80% 4% / 0.9); transition: transform 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out); }
.qrs img { transition: transform 200ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .qrs a:hover .qrs__tap { background: var(--yellow); transform: translateY(-2px); } .qrs a:hover img { transform: scale(1.03); } }
@media (max-width: 860px) { .qrs a { padding-top: 14px; } .qrs__tap { position: static; translate: none; display: inline-block; margin-right: 8px; background: var(--brown); color: var(--cream); } }

/* ---- footer links: black, white, orange ---------------------------------- */
.foot { background: #0E0A08; color: #CFC6BE; }
.foot a { color: #CFC6BE; }
.next__grid a { background: #FFFFFF; color: #0E0A08; }
.next__grid b { color: #0E0A08; }
.next__grid span { color: #4A4038; }
.next__grid .icon { color: #FFFFFF; background: #F26B1D; border-radius: 50%; padding: 6px; width: 34px; height: 34px; box-sizing: border-box; }
@media (hover: hover) and (pointer: fine) {
  .next__grid a:hover { background: #F26B1D; }
  .next__grid a:hover span { color: #0E0A08; }
  .next__grid a:hover .icon { background: #0E0A08; transform: translateX(4px); }
}
.next__grid a:focus-visible { outline: 3px solid #F26B1D; outline-offset: 3px; }
.foot__base { border-top-color: hsl(0 0% 100% / 0.16); }

/* ---- top restorations + grading wins on cream instead of brown ---------- */
.panel--light .lede { color: #5A2A10; }
.panel--light .chip { border-color: hsl(20 80% 10% / 0.28); color: var(--brown); }
.panel--light .chip[aria-pressed="true"] { background: var(--brown); color: var(--cream); border-color: var(--brown); }
.panel--light .pick button { background: #F1E2CC; box-shadow: 0 24px 44px -26px hsl(12 80% 12% / 0.6); }
.panel--light .pick button:focus-visible, .panel--light .top__rail:focus-visible { outline-color: var(--brown); }
.panel--light .pick figcaption { color: #5A2A10; }
.panel--light .pick figcaption b { color: var(--brown); }
.panel--light .top__nav { background: var(--brown); color: var(--cream); }
@media (hover: hover) and (pointer: fine) { .panel--light .top__nav:hover { background: #4A2210; } }
.case { background: #FFF8EE; color: var(--brown); --sc-ink: var(--brown); --sc-ink-soft: #5A2A10; box-shadow: 0 30px 60px -34px hsl(12 80% 12% / 0.5); }
.case h3 { color: var(--red); }
.case p { color: #5A2A10; }
.case dt { color: var(--brown); } .case dd { color: #5A2A10; }
.case__slabs figcaption { color: var(--red); }
.case .compare { background: #F1E2CC; box-shadow: 0 20px 40px -24px hsl(12 80% 12% / 0.6); }
.case .compare:has(input:focus-visible), .case :focus-visible { outline-color: var(--brown); }
.case .compare { width: 100%; height: auto; align-self: start; }
.case__body { padding: var(--sc-2) 0; }

/* ---- top restorations: heading on the orange, picker in the cream box ---- */
.top-sec { padding-bottom: calc(var(--sc-section) * 0.5); }
.top-sec .panel.top { margin-top: var(--sc-7); padding: clamp(1.25rem, 3vw, 2.5rem) 0 clamp(1.5rem, 3vw, 3rem); }
.top__months { justify-content: center; padding-inline: clamp(1.25rem, 3vw, 2.5rem); }
.top-sec .top__stage { margin-top: var(--sc-5); }
.top-sec .top__months[hidden] + .top__stage { margin-top: 0; }
/* the deep red from Grading wins */
.panel--light .pick figcaption b { color: var(--red); }
.panel--light .chip[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: var(--cream); }
.panel--light .top__nav { background: var(--red); color: var(--cream); }
@media (hover: hover) and (pointer: fine) { .panel--light .top__nav:hover { background: #6E1808; } }
.fix { padding-top: calc(var(--sc-section) * 0.6); }
.chips[hidden] { display: none; }

/* ---- hard black replaces the deep red in Top restorations + Grading wins -- */
.panel--light .pick figcaption b { color: #000; }
.panel--light .chip[aria-pressed="true"] { background: #000; border-color: #000; color: #fff; }
.panel--light .top__nav { background: #000; color: #fff; }
@media (hover: hover) and (pointer: fine) { .panel--light .top__nav:hover { background: #2A2A2A; } }
.case h3 { color: #000; }
.case__slabs figcaption { color: #000; }

/* ---- cream surfaces: slightly see-through, so the orange glows through ---- */
.panel--light, .case {
  background: hsl(36 100% 97% / 0.8);
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 30px 60px -36px hsl(12 80% 12% / 0.45), inset 0 1px 0 hsl(0 0% 100% / 0.6);
}
.quote { background: hsl(36 100% 97% / 0.8); -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15); }

/* ---- the light surfaces become a soft translucent orange ----------------- */
.panel--light, .case, .quote {
  background: hsl(33 100% 62% / 0.62);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 30px 60px -36px hsl(12 80% 12% / 0.5), inset 0 1px 0 hsl(40 100% 85% / 0.7);
}
.panel--light .lede, .case p, .case dd, .panel--light .pick figcaption, .panel--light .pricelist td { color: #3A1808; }
.quote figcaption { color: #3A1808; }
.panel--light .pick button, .case .compare { background: hsl(30 90% 45% / 0.35); }
.panel--light .turn div, .panel--light .fine { background: hsl(40 100% 82% / 0.6); }
.panel--light .pricegroup__note { color: #6E1808; }
.panel--light .pricelist td.price, .panel--light .turn b { color: #000; }
.panel--light .pricelist td.price.is-quote { color: #3A1808; }

/* ---- floating boxes: a tight contact shadow plus a wide soft one, a thin
   light rim on top, and a small lift on hover ------------------------------ */
.top-sec .panel.top, .case {
  border: 1px solid hsl(40 100% 86% / 0.55);
  box-shadow:
    0 2px 4px hsl(14 85% 18% / 0.18),
    0 14px 28px -10px hsl(14 85% 16% / 0.38),
    0 44px 80px -28px hsl(14 85% 14% / 0.55),
    inset 0 1px 0 hsl(42 100% 90% / 0.85);
  transition: transform 260ms var(--sc-ease-out), box-shadow 260ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .case:hover {
    transform: translateY(-4px);
    box-shadow:
      0 2px 4px hsl(14 85% 18% / 0.18),
      0 20px 36px -10px hsl(14 85% 16% / 0.42),
      0 60px 100px -30px hsl(14 85% 14% / 0.6),
      inset 0 1px 0 hsl(42 100% 90% / 0.85);
  }
}

/* ---- hero to next section: no seam. The haze now rises and falls away
   before the hero's bottom edge, so the painting carries straight through. -- */
.hero__haze { height: 38%; background: linear-gradient(180deg, transparent 0%, hsl(40 95% 66% / 0.42) 48%, hsl(40 95% 66% / 0.18) 78%, transparent 100%); }
.hero__duck { -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 98%); mask-image: linear-gradient(180deg, #000 72%, transparent 98%); }

/* ---- Top restorations + Grading wins boxes: more see-through -------------- */
.top-sec .panel.top, .case { background: hsl(33 100% 62% / 0.38); }

/* ================== audit pass: cleaner, clearer ========================== */
/* How it works: every step readable; the current one is the dark card */
.route li { opacity: 1; background: hsl(38 100% 88% / 0.42); color: var(--brown); }
.route li h3 { opacity: 0.62; } .route li p { opacity: 0.6; } .route li .num { opacity: 0.55; }
.route li.is-on h3, .route li.is-on p { opacity: 0.9; } .route li.is-on .num { opacity: 0.9; }
.route li.is-on { opacity: 1; }
.route li.is-now { background: var(--brown); color: var(--cream); box-shadow: 0 20px 40px -22px hsl(12 80% 10% / 0.7); }
.route li.is-now h3, .route li.is-now p, .route li.is-now .num { opacity: 1; }
.route li h3, .route li p, .route li .num { transition: opacity 380ms var(--sc-ease-out) 220ms; }

/* Grading wins: two cases side by side on wide screens, no empty half */
@media (min-width: 1100px) {
  .cases { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .case { grid-template-columns: minmax(170px, 0.8fr) 1fr; gap: clamp(1rem, 2vw, 1.75rem); }
  .case h3 { font-size: clamp(1.7rem, 1rem + 1.5vw, 2.5rem); }
  .case p { font-size: var(--sc-t-sm); }
}

/* Why us: text never clips inside its column */
.why__col li { grid-template-columns: 26px minmax(0, 1fr); }
.why__col li > div { min-width: 0; }

/* Review cards: a touch more solid so long quotes read easily */
.quote { background: hsl(36 100% 78% / 0.72); }

/* ---- top restorations: month buttons + a note for months still to come ---- */
.top__months { gap: 8px; }
.panel--light .chip { min-height: 42px; padding: 0 18px; font-weight: 800; background: hsl(40 100% 90% / 0.5); }
.panel--light .chip.chip--soon { opacity: 0.7; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .panel--light .chip:not([aria-pressed="true"]):hover { background: hsl(40 100% 92% / 0.9); } }
.top__rail.is-empty { display: grid; place-items: center; padding: 12px var(--sc-gutter) 8px; min-height: clamp(220px, 34svh, 320px); scroll-snap-type: none; overflow: hidden; }
.top__soon { margin: 0; text-align: center; font-weight: 600; color: #3A1808; max-width: 30ch; }
.top__soon b { display: block; font-family: var(--num); font-weight: 400; font-size: clamp(2.6rem, 2rem + 2.4vw, 4rem); line-height: 1; color: #000; margin-bottom: 8px; }
.top__nav[hidden] { display: none; }
@media (max-width: 700px) { .top__months { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; } .top__months::-webkit-scrollbar { display: none; } .top__months .chip { flex: none; } }

/* ---- footer: back to the brown scheme ------------------------------------ */
.foot { background: var(--brown); color: var(--cream-soft); }
.foot a { color: var(--cream-soft); }
.next__grid a { background: var(--brown-2); color: var(--cream-soft); }
.next__grid b { color: var(--cream); }
.next__grid span { color: var(--cream-soft); }
.next__grid .icon { color: var(--amber); background: none; border-radius: 0; padding: 0; width: 1.1em; height: 1.1em; }
@media (hover: hover) and (pointer: fine) {
  .next__grid a:hover { background: var(--brown-3); }
  .next__grid a:hover span { color: var(--cream-soft); }
  .next__grid a:hover .icon { background: none; transform: translateX(4px); }
}
.next__grid a:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.foot__base { border-top-color: hsl(0 0% 100% / 0.12); }

/* ---- homepage: main headers in white. A soft dark shadow sits behind the
   letters so they hold up against the orange painting. --------------------- */
.home main .h { color: #fff; text-shadow: 0 2px 4px hsl(14 85% 20% / 0.45), 0 6px 28px hsl(14 85% 22% / 0.55); }
.home main .panel .h { text-shadow: none; }
.home main .panel .h em { color: var(--amber); }

/* ---- price list text in white (homepage section + Prices page) ----------- */
.fix, .fix .lede, .fix .games, .fix .link-arrow, .svc h3, .svc h3 b, .svc .det, .svc .est, .svc .from {
  color: #fff; text-shadow: 0 1px 3px hsl(14 85% 18% / 0.55), 0 4px 18px hsl(14 85% 20% / 0.45); }
.svc { border-top-color: hsl(0 0% 100% / 0.85); }
.svc li { border-bottom-color: hsl(0 0% 100% / 0.4); }
.fix .link-arrow { border-bottom-color: #fff; }

.page-prices .page-head .h, .page-prices .page-head .lede,
.page-prices .panel--light, .page-prices .panel--light .h, .page-prices .panel--light .pricegroup h2,
.page-prices .panel--light .pricelist th, .page-prices .panel--light .pricelist td,
.page-prices .panel--light .pricelist td.price, .page-prices .panel--light .pricegroup__note {
  color: #fff; text-shadow: 0 1px 3px hsl(14 85% 18% / 0.55), 0 4px 18px hsl(14 85% 20% / 0.4); }
.page-prices .panel--light .pricelist th, .page-prices .panel--light .pricelist td { border-bottom-color: hsl(0 0% 100% / 0.4); }
.page-prices .panel--light .turn div, .page-prices .panel--light .fine { background: hsl(20 75% 10% / 0.78); color: var(--cream); text-shadow: none; }
.page-prices .panel--light .turn b { color: var(--amber); text-shadow: none; }
.page-prices .panel--light .turn span { color: var(--cream); text-shadow: none; }
.page-prices .panel--light .fine b { color: #fff; }

/* ---- Top restorations + Grading wins boxes: white at 30%, shadow below ---- */
.top-sec .panel.top, .case {
  background: hsl(0 0% 100% / 0.3);
  border: 1px solid hsl(0 0% 100% / 0.45);
  box-shadow:
    0 14px 26px -12px hsl(14 85% 16% / 0.42),
    0 46px 80px -30px hsl(14 85% 14% / 0.6),
    inset 0 1px 0 hsl(0 0% 100% / 0.7);
}

/* ---- glass: Top restorations box + Grading wins cards --------------------
   Thin and clear in the middle, brighter where light would catch the edges,
   a strong blur of whatever is behind, and a soft shadow underneath. */
.top-sec .panel.top, .case {
  background:
    linear-gradient(135deg, hsl(0 0% 100% / 0.42) 0%, hsl(0 0% 100% / 0.16) 30%, hsl(0 0% 100% / 0.08) 58%, hsl(0 0% 100% / 0.22) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(1.5) brightness(1.06);
          backdrop-filter: blur(22px) saturate(1.5) brightness(1.06);
  border: 1px solid hsl(0 0% 100% / 0.55);
  box-shadow:
    0 12px 24px -12px hsl(14 85% 16% / 0.4),
    0 44px 80px -30px hsl(14 85% 14% / 0.58),
    inset 0 1.5px 0 hsl(0 0% 100% / 0.95),
    inset 1.5px 0 0 hsl(0 0% 100% / 0.4),
    inset 0 -1px 0 hsl(0 0% 100% / 0.18),
    inset 0 0 36px hsl(0 0% 100% / 0.1);
}
/* controls inside the glass pick up the same material */
.panel--light .chip:not([aria-pressed="true"]) { background: hsl(0 0% 100% / 0.28); border-color: hsl(0 0% 100% / 0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.case .compare, .panel--light .pick button { box-shadow: 0 18px 36px -18px hsl(14 85% 12% / 0.7); }

/* ---- glass, slightly more transparent ------------------------------------ */
.top-sec .panel.top, .case {
  background: linear-gradient(135deg, hsl(0 0% 100% / 0.3) 0%, hsl(0 0% 100% / 0.1) 30%, hsl(0 0% 100% / 0.04) 58%, hsl(0 0% 100% / 0.14) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(1.45) brightness(1.04);
          backdrop-filter: blur(18px) saturate(1.45) brightness(1.04);
}

/* ---- logbook section: normal scroll, wall always full -------------------- */
.sec--log { padding-block: calc(var(--sc-section) * 0.5); }
.log-stage { height: min(88svh, 820px); min-height: 560px; }
.logbook .log-stage .panel { height: 100%; }
.wall { height: 100%; max-height: none; -webkit-mask-image: none; mask-image: none; align-content: center; overflow: hidden; }
@media (max-width: 860px) {
  .log-stage { height: auto; min-height: 0; }
  .logbook .log-stage .panel { height: auto; }
  .wall { height: 60svh; }
}

/* ---- slab carousel under Grading wins: about half the height of a case ---- */
.slabs { margin-top: var(--sc-7); }
.slabs__head { display: flex; justify-content: space-between; align-items: end; gap: var(--sc-4); }
.slabs__head h3 { font-weight: 300; letter-spacing: -0.04em; font-size: var(--sc-t-xl); color: #fff; text-shadow: 0 2px 4px hsl(14 85% 20% / 0.45), 0 6px 22px hsl(14 85% 22% / 0.5); }
.slabs__head h3 b { font-weight: 800; }
.slabs__nav { display: flex; gap: 8px; }
.slabs__nav .top__nav { position: static; translate: none; width: 44px; height: 44px; background: #000; color: #fff; }
.slabs__rail { --sh: clamp(190px, 22vw, 270px); display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: var(--sc-4) 4px var(--sc-3); margin-top: var(--sc-2); -webkit-overflow-scrolling: touch; }
.slabs__rail::-webkit-scrollbar { display: none; }
.slabs__rail:focus-visible { outline: 3px solid #000; outline-offset: 2px; border-radius: 16px; }
.slab-tile { flex: none; margin: 0; scroll-snap-align: start; width: calc(var(--sh) * 0.86); }
.slab-tile button { all: unset; display: block; cursor: zoom-in; width: 100%; height: var(--sh); border-radius: 16px; overflow: hidden;
  background: linear-gradient(135deg, hsl(0 0% 100% / 0.3), hsl(0 0% 100% / 0.08)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid hsl(0 0% 100% / 0.5); box-shadow: 0 16px 30px -16px hsl(14 85% 14% / 0.6), inset 0 1px 0 hsl(0 0% 100% / 0.8);
  transition: transform 200ms var(--sc-ease-out); }
.slab-tile button:focus-visible { outline: 3px solid #000; outline-offset: 3px; }
.slab-tile img { width: 100%; height: 100%; object-fit: contain; padding: 8px; box-sizing: border-box; }
@media (hover: hover) and (pointer: fine) { .slab-tile button:hover { transform: translateY(-4px); } }
.slab-tile figcaption { margin-top: 8px; font-size: var(--sc-t-xs); color: #fff; font-weight: 600; line-height: 1.35; text-shadow: 0 1px 3px hsl(14 85% 18% / 0.6); }
.slab-tile figcaption b { display: block; font-family: var(--num); font-weight: 400; font-size: 1.35rem; letter-spacing: 0.02em; color: #000; text-shadow: none; }
@media (max-width: 700px) { .slabs__nav { display: none; } .slabs__rail { --sh: 220px; } }
.slab-tile { width: auto; max-width: 82vw; }
.slab-tile button { width: auto; }
.slab-tile img { width: auto; height: 100%; max-width: 82vw; object-fit: contain; display: block; }
.slab-tile figcaption { max-width: calc(var(--sh) * 1.2); }

/* an odd last grading win spans the full row on wide screens */
@media (min-width: 1100px) {
  .cases > .case:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); }
}
.slab-tile figcaption { display: none; }

.top__note { margin: var(--sc-4) auto 0; max-width: 46ch; text-align: center; font-weight: 700; color: #000; font-size: var(--sc-t-sm); line-height: 1.5; padding: 10px 18px; border-radius: 999px; background: hsl(0 0% 100% / 0.35); }
.top__note[hidden] { display: none; }
@media (max-width: 700px) { .top__note { border-radius: 16px; margin-inline: var(--sc-4); } }
.pick figcaption { display: none; }

/* swipe, not buttons: drag with the mouse, swipe on touch */
.top__nav[hidden] { display: none !important; }
.top__rail, .slabs__rail { cursor: grab; }
.top__rail.is-dragging, .slabs__rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.top__rail.is-dragging .pick, .slabs__rail.is-dragging .slab-tile { pointer-events: none; }
.top__rail img, .slabs__rail img { -webkit-user-drag: none; user-select: none; }
.top__rail.is-empty { cursor: default; }
/* arrows back on the sides of both carousels, swiping still works */
.top__nav { display: grid; }
.slabs__stage { position: relative; }
.slabs__nav { display: contents !important; }
.slabs__stage .top__nav { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; width: 48px; height: 48px; }
.slabs__stage #slab-prev { left: -12px; } .slabs__stage #slab-next { right: -12px; }
@media (max-width: 700px) { .top__nav { display: grid; width: 42px; height: 42px; } .top__nav--prev { left: 6px; } .top__nav--next { right: 6px; } .slabs__stage #slab-prev { left: 2px; } .slabs__stage #slab-next { right: 2px; } }

/* whitening tab: a message and a button instead of photos */
.top__soon p { margin: 0 auto var(--sc-5); max-width: 36ch; font-size: var(--sc-t-lg); font-weight: 700; color: #000; line-height: 1.45; }
.top__soon .btn { background: #000; color: #fff; }
/* whitening line in the homepage services list: smaller, quieter, last */
.svc li.svc--quiet { padding-block: var(--sc-3); }
.svc li.svc--quiet h3 { font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.5rem); }
.svc li.svc--quiet .from { font-size: clamp(1.2rem, 1rem + 0.5vw, 1.6rem); }
.svc li.svc--quiet .det, .svc li.svc--quiet .est { font-size: var(--sc-t-xs); }
.svc li.svc--quiet { opacity: 0.85; }

/* ===================== design pass (Oct 5) ================================ */
/* 7. light words a touch heavier (bold words unchanged) */
.h, .svc h3, .slabs__head h3, .rail__note p { font-weight: 450; }

/* 2. chat wall: everything is there, the lower rows fade out until opened */
.chats .chat, .chats:not(.is-all) .chat:nth-child(n) { display: block; }
.chats__clip { position: relative; max-height: 760px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 100%); mask-image: linear-gradient(180deg, #000 52%, transparent 100%); }
.chats__clip:has(.chats.is-all) { max-height: none; -webkit-mask-image: none; mask-image: none; }
.chats__more { margin-top: calc(var(--sc-6) * -1); position: relative; z-index: 2; }
.chats__more .btn .icon { transition: transform 200ms var(--sc-ease-out); }
@media (max-width: 860px) { .chats__clip { max-height: 620px; } }

/* 3. price details: darker and heavier, no glass */
.svc .det, .svc .est, .fix .games { color: var(--brown); text-shadow: none; font-weight: 700; }
.svc li.svc--quiet .det, .svc li.svc--quiet .est { font-weight: 600; }

/* 4. floating WhatsApp: a round icon on phones, out of the way when not needed */
@media (max-width: 960px) {
  .fab { width: 58px; height: 58px; min-height: 0; padding: 0; border-radius: 50%; justify-content: center; font-size: 0; gap: 0;
    transition: opacity 220ms var(--sc-ease-out), transform 220ms var(--sc-ease-out); }
  .fab .icon { width: 28px; height: 28px; }
  body.wa-in-view .fab { opacity: 0; transform: translateY(16px) scale(0.9); pointer-events: none; }
}

/* 5a. How it works: one centred column, heading and the $0 box share a row */
.steps [data-sc-stage] { grid-template-columns: 1fr; gap: var(--sc-6); align-content: center;
  padding-inline: max(var(--sc-gutter), calc((100% - 900px) / 2)); }
.steps__side { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sc-4); }
.steps .zero { margin-top: 0; }
/* 8. steps no longer slide sideways, so nothing ever sits out of line */
.route li, .route li.is-on { transform: none; }
@media (max-width: 860px) { .steps [data-sc-stage] { gap: var(--sc-4); } }

/* 5b. less empty orange between "Send photos" and "Come see us" */
section.panel.snap { margin-bottom: calc(var(--sc-section) * 0.25); }
.sec.visit { padding-top: calc(var(--sc-section) * 0.45); }

/* 5c. Grading wins: three across on wide screens, photo above text */
@media (min-width: 1100px) {
  .cases { grid-template-columns: repeat(3, 1fr); }
  .case, .cases > .case:last-child:nth-child(odd) { grid-column: auto; grid-template-columns: 1fr; gap: var(--sc-4); }
  .case .compare { aspect-ratio: 4 / 5; }
  .case h3 { font-size: clamp(1.6rem, 1rem + 1.1vw, 2.2rem); }
}

/* 8. hero on phones: Psyduck smaller and lower, clear of the badges */
@media (max-width: 860px) { .hero__duck { width: min(68vw, 30svh * 1.2); } }

/* 8. map: muted, warm, inside the brown frame */
.map iframe { filter: sepia(0.35) saturate(0.8) hue-rotate(-12deg) contrast(1.02); }

/* bar chart: shown at every size, not only on wide screens */
@media (max-width: 860px) {
  .logbook .bars { display: grid; height: 64px; margin-top: var(--sc-3); }
  .logbook .bars b { font-size: 0.6rem; }
  .logbook .bars span { font-size: 0.56rem; }
}

/* bar chart: bars scale against a fixed track, so the labels can never
   squash them to the same height */
.bars { --bar-max: 62px; height: auto; }
.bars div { height: auto; }
.bars i { flex: none; height: calc(var(--h) * var(--grow, 1) * var(--bar-max)); min-height: 2px; }
.lb-bars .bars { --bar-max: 84px; }
@media (max-width: 860px) { .logbook .bars { --bar-max: 34px; height: auto; } }

/* How it works: normal scroll, no pin */
.sec--steps { padding-block: calc(var(--sc-section) * 0.6); }
.steps-stage { display: grid; grid-template-columns: 1fr; gap: var(--sc-6); align-content: center;
  padding-inline: max(var(--sc-gutter), calc((100% - 900px) / 2)); }
@media (max-width: 860px) { .steps-stage { gap: var(--sc-4); } }

/* phones: the four fix types become a 2 × 2 grid of large, easy-to-tap buttons */
@media (max-width: 700px) {
  .top__months { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow: visible; padding-inline: var(--sc-4); flex-wrap: initial; }
  .top__months .chip { width: 100%; min-height: 52px; padding: 6px 10px; font-size: 0.86rem; line-height: 1.2; white-space: normal; text-align: center; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .top__months .chip:active { transform: scale(0.97); }
}

/* ===================== phone-only tweaks (Oct 5) ========================== */
@media (max-width: 700px) {
  /* hero: Psyduck smaller and closer, tucked bottom-right under the badges */
  .hero__duck { left: auto; right: 4vw; translate: none; bottom: 4svh; width: min(52vw, 24svh * 1.2); }

  /* customer chats: two columns, so several show at once */
  .chats { columns: 2; column-gap: 8px; }
  .chat { margin-bottom: 8px; border-radius: 12px; }

  /* send photos: plain branded buttons, no "click here" tags */
  .qrs__tap { display: none !important; }
  .qrs a { padding: 15px 14px; border-radius: 999px; font-weight: 800; letter-spacing: 0.01em; }
  .qrs a[data-wa] { background: #25D366; color: #062B14; }
  .qrs a[data-tg] { background: #1E88C7; color: #fff; }
  .qrs a:active { transform: scale(0.97); }

  /* logbook page: four small cards across */
  .lb-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .lb-grid .card__img { border-radius: 8px; }
  .lb-grid .card__meta { margin-top: 3px; font-size: 0.62rem; }
  .lb-grid .card__meta span { display: none; }
  .card__img::before { font-size: 1rem; }
}
@media (max-width: 700px) {
  .hero__duck { bottom: auto; top: calc(var(--bar-h) + 54svh); right: 6vw; width: min(50vw, 22svh * 1.2);
    transform: translate3d(0, calc((1 - var(--sc-p, 0)) * 4%), 0); }
}
@media (max-width: 700px) and (max-height: 700px) { .hero__duck { top: calc(var(--bar-h) + 50svh); width: min(40vw, 20svh * 1.2); } }
@media (max-width: 700px) { .hero__duck { filter: none; } }

/* More slabs: equal tiles, always at least 3 in view (5 on wide screens) */
.slabs__rail { --gap: 16px; gap: var(--gap); }
.slab-tile { flex: 0 0 calc((100% - var(--gap) * 4) / 5); width: auto; max-width: none; }
.slab-tile button { width: 100%; height: auto; aspect-ratio: 3 / 4; }
.slab-tile img { width: 100%; height: 100%; max-width: none; object-fit: contain; padding: 6px; }
@media (max-width: 1100px) { .slab-tile { flex-basis: calc((100% - var(--gap) * 3) / 4); } }
@media (max-width: 700px) { .slabs__rail { --gap: 8px; } .slab-tile { flex-basis: calc((100% - var(--gap) * 2) / 3); } .slab-tile img { padding: 4px; } }

/* ---- phones: swipe only, with an indicator under each carousel ---------- */
.swipe { display: none; }
@media (max-width: 700px) {
  .top__nav, .slabs__stage .top__nav { display: none !important; }
  .swipe { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: var(--sc-3); }
  .swipe[hidden] { display: none; }
  .swipe__txt { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #000;
    transition: opacity 300ms var(--sc-ease-out); }
  .swipe__txt .icon { width: 16px; height: 16px; animation: swipe-nudge 1.6s var(--sc-ease-out) infinite; }
  .swipe.is-used .swipe__txt { opacity: 0; }
  .swipe__bar { position: relative; width: 120px; height: 4px; border-radius: 4px; background: hsl(0 0% 0% / 0.15); overflow: hidden; }
  .swipe__bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: #000; }
  .slabs .swipe__txt { color: #fff; text-shadow: 0 1px 3px hsl(14 85% 18% / 0.6); }
  .slabs .swipe__bar { background: hsl(0 0% 100% / 0.35); }
  .slabs .swipe__bar i { background: #fff; }
  /* every photo in the row can be tapped open, not only the centred one */
  .top__rail .pick, .top__rail .pick button { pointer-events: auto; }
}
@keyframes swipe-nudge { 0%, 100% { transform: translateX(0); } 40% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .swipe__txt .icon { animation: none; } }

/* phones: Google reviews two across, slightly smaller type to fit */
@media (max-width: 700px) {
  .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .quote { padding: 12px; border-radius: 14px; gap: 10px; }
  .quote blockquote { font-size: 0.8rem; line-height: 1.45; }
  .quote figcaption { font-size: 0.7rem; }
  .wall { gap: 5px; }
  .tile { border-radius: 6px; }
}

/* phones: every tappable link at least ~44px tall */
@media (max-width: 700px) {
  .link-arrow { min-height: 44px; align-items: center; padding-block: 8px 6px; box-sizing: border-box; }
  .pill { min-height: 40px; }
  .fact a { display: inline-flex; align-items: center; min-height: 44px; }
  .lb-sheets a { min-height: 40px; display: inline-flex; align-items: center; padding: 6px 14px; }
}