/* ============================================================
   TaylaaMade Tattoos — SOFT layout, portfolio-first pacing.
   Arches, large-radius cards, region accordions, phone action bar.
   Type is fixed in every theme: Playfair Display (headlines +
   body), Cinzel (tracked caps, nav, labels), Italianno (signature).

   THEME SYSTEM — colour only, never type.
     <html data-theme="oxblood|gold|clay|satin" data-mode="light|dark">
   Layer 1  :root                    geometry, type, alpha-derived roles
   Layer 2  :root[data-mode=…]       shadows, scrims, glows, tier ramp
   Layer 3  :root[data-theme][data-mode]  the eight raw palettes
   Component rules below carry NO colour literals — every one reads a
   role token, which is what makes the live swap total.
   ============================================================ */

/* ---------- layer 1: geometry, type, derived colour roles ---------- */
:root{
  --r-xl: 40px;
  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 14px;
  --pill: 999px;

  --ff-d: "Playfair Display", Georgia, "Times New Roman", serif;
  --ff-s: "Playfair Display", Georgia, "Times New Roman", serif;
  --ff-c: "Cinzel", Georgia, serif;
  --ff-sig: "Italianno", "Playfair Display", cursive;

  --wrap: 76rem;
  --pad: 1.25rem;
  --dock: 4.75rem;

  /* hairlines and tints are alpha over the mode's tint source, so one
     palette change re-tunes every rule, chip fill and zebra stripe. */
  --rule-soft:   rgb(var(--t-line) / .14);
  --rule:        rgb(var(--t-line) / .26);
  --rule-mid:    rgb(var(--t-line) / .16);
  --rule-dash:   rgb(var(--t-line) / .55);
  --zebra:       rgb(var(--t-line) / .045);
  --tint-1:      rgb(var(--t-line) / .05);
  --tint-2:      rgb(var(--t-line) / .07);
  --tint-3:      rgb(var(--t-line) / .09);
  --tint-edge:   rgb(var(--t-line) / .22);
  --tint-strong: rgb(var(--t-line) / .24);
  --tint-firm:   rgb(var(--t-line) / .28);

  --accent-halo: rgb(var(--t-accent) / .20);
  --accent-veil: rgb(var(--t-accent) / .24);
  --accent-edge: rgb(var(--t-accent) / .38);
  --sel-fill:    rgb(var(--t-accent) / .14);

  --on-accent-edge: rgb(var(--t-onacc) / .50);
  --fill-tint:      rgb(var(--t-ground) / .12);
  --hdr-bg:         rgb(var(--t-ground) / .90);
  --dock-bg:        rgb(var(--t-ground) / .94);
}

/* ---------- layer 2: per-mode depth, scrims and ramps ---------- */
/* bare :root doubles as the no-JS default (gold · dark) */
:root,
:root[data-mode="dark"]{
  --sh-1: 0 1px 2px rgb(var(--t-shadow) / .50), 0 6px 14px -8px rgb(var(--t-shadow) / .70);
  --sh-2: 0 2px 4px rgb(var(--t-shadow) / .55), 0 18px 34px -18px rgb(var(--t-shadow) / .80);
  --sh-3: 0 3px 6px rgb(var(--t-shadow) / .60), 0 34px 60px -26px rgb(var(--t-shadow) / .88);
  --backdrop: rgb(var(--t-shadow) / .86);
  --arch-scrim:  linear-gradient(180deg, rgb(var(--t-glow) / .10), rgb(var(--t-shadow) / .42));
  --tile-scrim:  linear-gradient(180deg, rgb(var(--t-glow) / .08), rgb(var(--t-shadow) / .28));
  --photo-scrim: linear-gradient(180deg, rgb(var(--t-glow) / .22), rgb(var(--t-shadow) / .62));
  --hero-glow:
    radial-gradient(70% 75% at 12% 45%, rgb(var(--t-glow) / .30), transparent 70%),
    radial-gradient(65% 62% at 88% 20%, rgb(var(--t-accent) / .13), transparent 72%);
  --band-glow: radial-gradient(80% 50% at 12% 0%, rgb(var(--t-glow) / .28), transparent 65%);
  /* Difficulty ramp is opaque, not alpha: a translucent chip would darken
     again over the zebra stripe and over a checked option card, and the
     six steps would stop clearing 4.5:1. Six mixes, one predictable base. */
  --tier-1:color-mix(in srgb, var(--ink-soft)  5%, var(--surface));
  --tier-2:color-mix(in srgb, var(--ink-soft) 10%, var(--surface));
  --tier-3:color-mix(in srgb, var(--ink-soft) 16%, var(--surface));
  --tier-4:color-mix(in srgb, var(--ink-soft) 21%, var(--surface));
  --tier-5:color-mix(in srgb, var(--ink-soft) 26%, var(--surface));
  --tier-6:color-mix(in srgb, var(--ink-soft) 31%, var(--surface));
  --sw-oxblood-a:#B74C59; --sw-oxblood-b:#09090B;
  --sw-gold-a:#d6ad55; --sw-gold-b:#060505;
  --sw-clay-a:#C9663F; --sw-clay-b:#1A120E;
  --sw-satin-a:#b99196; --sw-satin-b:#080708;
}

/* Light is not the dark scrim at lower alpha: a dark wash over a pale
   ground reads as mud, so the photo veils flip to the paper colour. */
:root[data-mode="light"]{
  --sh-1: 0 1px 2px rgb(var(--t-shadow) / .09), 0 7px 16px -8px rgb(var(--t-shadow) / .20);
  --sh-2: 0 2px 4px rgb(var(--t-shadow) / .10), 0 18px 34px -18px rgb(var(--t-shadow) / .24);
  --sh-3: 0 3px 6px rgb(var(--t-shadow) / .11), 0 34px 60px -26px rgb(var(--t-shadow) / .28);
  --backdrop: rgb(var(--t-shadow) / .72);
  --arch-scrim:  linear-gradient(180deg, rgb(var(--t-onacc) / .07), rgb(var(--t-shadow) / .04));
  --tile-scrim:  linear-gradient(180deg, transparent, rgb(var(--t-shadow) / .03));
  --photo-scrim: linear-gradient(180deg, rgb(var(--t-onacc) / .08), rgb(var(--t-shadow) / .04));
  --hero-glow:
    radial-gradient(70% 75% at 12% 45%, rgb(var(--t-glow) / .12), transparent 70%),
    radial-gradient(65% 62% at 88% 20%, rgb(var(--t-accent) / .07), transparent 72%);
  --band-glow: radial-gradient(80% 50% at 12% 0%, rgb(var(--t-glow) / .10), transparent 65%);
  --rule-soft:   rgb(var(--t-line) / .24);
  --rule:        rgb(var(--t-line) / .34);
  --rule-mid:    rgb(var(--t-line) / .30);
  --zebra:       rgb(var(--t-line) / .075);
  --tint-1:      rgb(var(--t-line) / .07);
  --tint-2:      rgb(var(--t-line) / .11);
  --tint-3:      rgb(var(--t-line) / .14);
  --tint-edge:   rgb(var(--t-line) / .30);
  --tint-strong: rgb(var(--t-line) / .32);
  --tint-firm:   rgb(var(--t-line) / .38);
  --tier-1:color-mix(in srgb, var(--ink)  4%, var(--surface));
  --tier-2:color-mix(in srgb, var(--ink)  7%, var(--surface));
  --tier-3:color-mix(in srgb, var(--ink) 11%, var(--surface));
  --tier-4:color-mix(in srgb, var(--ink) 15%, var(--surface));
  --tier-5:color-mix(in srgb, var(--ink) 18%, var(--surface));
  --tier-6:color-mix(in srgb, var(--ink) 22%, var(--surface));
  --sw-oxblood-a:#7D1F2A; --sw-oxblood-b:#F4F0E9;
  --sw-gold-a:#7E5A11; --sw-gold-b:#F6F1E7;
  --sw-clay-a:#9E4229; --sw-clay-b:#F7F1E8;
  --sw-satin-a:#8A3E4A; --sw-satin-b:#F4F0EA;
}

/* ---------- layer 3: the eight palettes ---------- */
/* Ink & Oxblood · dark */
:root[data-theme="oxblood"][data-mode="dark"]{
  --ground:#09090B;       --band:#111116;
  --surface:#1B1A20;     --surface-2:#26242D;   --surface-3:#302D38;
  --ink:#F4F0E9;             --ink-soft:#E4C9C6;    --ink-muted:#C4BFC7;
  --rule-strong:#736D7D;
  --accent:#7D1F2A;       --accent-strong:#9C2A37;
  --accent-ink:#D67D86;   --accent-line:#B74C59;
  --on-accent:#F4F0E9; --focus:#E09AA1;
  --t-line:228 201 198;         --t-accent:183 76 89;
  --t-glow:125 31 42;   --t-ground:9 9 11;
  --t-onacc:244 240 233;   --t-shadow:2 2 4;
}

/* Ink & Oxblood · light */
:root[data-theme="oxblood"][data-mode="light"]{
  --ground:#F4F0E9;       --band:#E8E0D5;
  --surface:#FFFDF8;     --surface-2:#EDE5D9;   --surface-3:#E1D7C9;
  --ink:#09090B;             --ink-soft:#7D1F2A;    --ink-muted:#55504A;
  --rule-strong:#897D71;
  --accent:#7D1F2A;       --accent-strong:#611119;
  --accent-ink:#7D1F2A;   --accent-line:#7D1F2A;
  --on-accent:#F4F0E9; --focus:#7D1F2A;
  --t-line:9 9 11;         --t-accent:125 31 42;
  --t-glow:125 31 42;   --t-ground:244 240 233;
  --t-onacc:244 240 233;   --t-shadow:9 9 11;
}

/* Champagne & Gold · dark */
:root,
:root[data-theme="gold"][data-mode="dark"]{
  --ground:#060505;       --band:#0e0a08;
  --surface:#17100d;     --surface-2:#241812;   --surface-3:#32231b;
  --ink:#f4eee5;             --ink-soft:#e7d4ad;    --ink-muted:#c7baab;
  --rule-strong:#836046;
  --accent:#d6ad55;       --accent-strong:#f0d596;
  --accent-ink:#d6ad55;   --accent-line:#d6ad55;
  --on-accent:#060505; --focus:#f0d596;
  --t-line:231 212 173;         --t-accent:214 173 85;
  --t-glow:214 173 85;   --t-ground:6 5 5;
  --t-onacc:6 5 5;   --t-shadow:3 2 2;
}

/* Champagne & Gold · light */
:root[data-theme="gold"][data-mode="light"]{
  --ground:#F6F1E7;       --band:#EDE3D0;
  --surface:#FFFCF6;     --surface-2:#F1E7D5;   --surface-3:#E5D8BF;
  --ink:#17100d;             --ink-soft:#6B4E14;    --ink-muted:#57503F;
  --rule-strong:#87735A;
  --accent:#7E5A11;       --accent-strong:#5E4109;
  --accent-ink:#71500F;   --accent-line:#7E5A11;
  --on-accent:#FFFCF6; --focus:#7E5A11;
  --t-line:23 16 13;         --t-accent:126 90 17;
  --t-glow:126 90 17;   --t-ground:246 241 231;
  --t-onacc:255 252 246;   --t-shadow:23 16 13;
}

/* Clay & Terracotta · dark */
:root[data-theme="clay"][data-mode="dark"]{
  --ground:#1A120E;       --band:#241A15;
  --surface:#2C201A;     --surface-2:#3A2A20;   --surface-3:#4A3325;
  --ink:#F6ECE0;             --ink-soft:#E8CFB6;    --ink-muted:#CDB6A2;
  --rule-strong:#986E52;
  --accent:#9E4229;       --accent-strong:#B44C2C;
  --accent-ink:#E88A63;   --accent-line:#C9663F;
  --on-accent:#FFF3EA; --focus:#F0A382;
  --t-line:232 207 182;         --t-accent:201 102 63;
  --t-glow:158 66 41;   --t-ground:26 18 14;
  --t-onacc:255 243 234;   --t-shadow:10 6 4;
}

/* Clay & Terracotta · light */
:root[data-theme="clay"][data-mode="light"]{
  --ground:#F7F1E8;       --band:#EFE2D2;
  --surface:#FFFCF7;     --surface-2:#E9DCC9;   --surface-3:#E3CDB6;
  --ink:#2E211B;             --ink-soft:#86351F;    --ink-muted:#5E4B3E;
  --rule-strong:#8B7160;
  --accent:#9E4229;       --accent-strong:#7C3018;
  --accent-ink:#86351F;   --accent-line:#9E4229;
  --on-accent:#FFF8F0; --focus:#9E4229;
  --t-line:46 33 27;         --t-accent:158 66 41;
  --t-glow:158 66 41;   --t-ground:247 241 232;
  --t-onacc:255 248 240;   --t-shadow:46 33 27;
}

/* Satin & Pearl · dark */
:root[data-theme="satin"][data-mode="dark"]{
  --ground:#080708;       --band:#151015;
  --surface:#171317;     --surface-2:#221C22;   --surface-3:#2E262E;
  --ink:#f2ece2;             --ink-soft:#ded5ca;    --ink-muted:#bdb3b5;
  --rule-strong:#766573;
  --accent:#b99196;       --accent-strong:#d2adb2;
  --accent-ink:#c69ba0;   --accent-line:#b99196;
  --on-accent:#080708; --focus:#d2adb2;
  --t-line:222 213 202;         --t-accent:185 145 150;
  --t-glow:185 145 150;   --t-ground:8 7 8;
  --t-onacc:8 7 8;   --t-shadow:4 3 4;
}

/* Satin & Pearl · light */
:root[data-theme="satin"][data-mode="light"]{
  --ground:#F4F0EA;       --band:#E8E1D7;
  --surface:#FFFDF9;     --surface-2:#EEE7DD;   --surface-3:#E2D9CF;
  --ink:#171317;             --ink-soft:#7B3B45;    --ink-muted:#544C50;
  --rule-strong:#83777D;
  --accent:#8A3E4A;       --accent-strong:#6B2B36;
  --accent-ink:#7B3B45;   --accent-line:#8A3E4A;
  --on-accent:#FFFDF9; --focus:#8A3E4A;
  --t-line:23 19 23;         --t-accent:138 62 74;
  --t-glow:138 62 74;   --t-ground:244 240 234;
  --t-onacc:255 253 249;   --t-shadow:23 19 23;
}

/* Light themes need visible paper layers, not white cards dissolving into pale ground. */
:root[data-mode="light"] .pricing,
:root[data-mode="light"] .policies{
  background:color-mix(in srgb,var(--band) 58%,var(--ground));
}
:root[data-mode="light"] .booker,
:root[data-mode="light"] .price-table,
:root[data-mode="light"] .price-table tbody tr,
:root[data-mode="light"] .about__facts li,
:root[data-mode="light"] .visit__card{
  border-color:var(--rule-strong);
}
:root[data-mode="light"] .svcgrp[open],
:root[data-mode="light"] .acc details[open]{
  border-color:var(--accent-line);
  box-shadow:var(--sh-2);
}
:root[data-mode="light"] .svcgrp[open] > .svcgrp__sum,
:root[data-mode="light"] .acc details[open] > summary{
  background:color-mix(in srgb,var(--surface-2) 68%,var(--surface));
}
:root[data-mode="light"] .acc details[open] .acc__b{
  padding-top:1rem;
  border-top:1px solid var(--rule);
}


*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--ff-s);
  font-size:1.0625rem;
  line-height:1.7;
  font-weight:400;
  overflow-x:clip;
  padding-bottom:calc(var(--dock) + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; height:auto; }

h1,h2,h3,h4{
  font-family:var(--ff-d);
  font-weight:600;
  line-height:1.16;
  letter-spacing:-.004em;
  margin:0 0 .6rem;
  color:var(--ink);
  text-wrap:balance;
}
p{ margin:0 0 1rem; }
a{ color:var(--accent-ink); }

/* was `::focus-visible` — a pseudo-element, so the whole rule was dropped and
   the page had no visible focus ring at all. */
:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
  border-radius:6px;
}

.u-sr{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:50%; top:.5rem; transform:translate(-50%,-250%);
  background:var(--accent); color:var(--on-accent); padding:.7rem 1.2rem;
  border-radius:var(--pill); z-index:90; font-weight:600; text-decoration:none;
}
.skip:focus{ transform:translate(-50%,0); }

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

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:3.25rem; padding:.85rem 1.5rem;
  font-family:var(--ff-c); font-size:1rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  border-radius:var(--pill); border:2px solid transparent;
  text-decoration:none; cursor:pointer; text-align:center;
  transition:transform .18s ease, background-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.btn--primary{ background:var(--accent); color:var(--on-accent); border-color:var(--accent-line); box-shadow:var(--sh-2); }
.btn--primary:hover{ background:var(--accent-strong); border-color:var(--accent-strong); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--rule-strong); }
.btn--ghost:hover{ background:var(--surface-2); border-color:var(--accent-line); }
.btn--quiet{ background:var(--surface); color:var(--ink); border-color:var(--rule-strong); box-shadow:var(--sh-1); }
.btn--quiet:hover{ background:var(--surface-2); }
.btn--sm{ min-height:2.75rem; padding:.5rem 1.1rem; font-size:.9375rem; }
.btn--block{ display:flex; width:100%; }
.btn.is-locked{
  background:var(--surface-3); color:var(--ink-muted); box-shadow:none; cursor:not-allowed;
  border-color:transparent;
}
.btn.is-locked:hover{ transform:none; }

.cta-row{ display:flex; flex-wrap:wrap; gap:.75rem; margin:0 0 1rem; }
.cta-row .btn{ flex:1 1 100%; }
@media (min-width:26em){ .cta-row .btn{ flex:0 1 auto; } }

/* ---------- pills / eyebrows / stickers ---------- */
.pill{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--pill); padding:.4rem .9rem;
  font-family:var(--ff-c); font-size:.8125rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-muted); box-shadow:var(--sh-1); margin:0 0 1.1rem;
}
.dot{
  width:.5rem; height:.5rem; border-radius:50%; background:var(--accent-ink);
  box-shadow:0 0 0 4px var(--accent-halo); flex:none;
}
.eyebrow{
  font-family:var(--ff-c); font-size:.78125rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 .55rem;
}
.eyebrow--light{ color:var(--ink-soft); }

.sticker{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:6.25rem; height:6.25rem; border-radius:50%;
  background:var(--surface-2); color:var(--ink-soft);
  border:1px dashed var(--rule-dash);
  box-shadow:var(--sh-2); text-align:center; margin:0;
  font-family:var(--ff-s); line-height:1.1; padding:.4rem;
}
.sticker__top,.sticker__bot{
  font-family:var(--ff-c); font-size:.5625rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.sticker__big{
  font-family:var(--ff-d); font-size:1.5rem; font-weight:700; line-height:1;
}
.sticker--flat{ box-shadow:none; margin:0 0 1rem; }

/* ---------- header ---------- */
.hdr{
  position:sticky; top:0; z-index:60;
  background:var(--hdr-bg);
  backdrop-filter:saturate(1.3) blur(12px);
  border-bottom:1px solid var(--rule-soft);
}
.hdr__in{
  width:100%; max-width:var(--wrap); margin:0 auto; padding:.6rem var(--pad);
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
}
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink); margin-right:auto; }
/* inlined monogram: inherits currentColor, so it is correct in every mode
   with no src swap and no flash */
.brand__mark{ display:block; flex:none; width:1.9rem; height:1.9rem; color:var(--ink); }
.brand__txt{ display:flex; flex-direction:column; }
.brand__name{
  font-family:var(--ff-sig); font-size:1.75rem; font-weight:400; line-height:.9;
  letter-spacing:.01em; color:var(--ink);
}
/* The strapline is redundant next to the hero on a phone. */
.brand__sub{ display:none; font-family:var(--ff-c); font-size:.625rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-muted); }

.menu-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  min-height:2.6rem; padding:.4rem .75rem;
  background:var(--surface); border:1px solid var(--rule-strong); border-radius:var(--pill);
  font-family:var(--ff-c); font-size:.8125rem; font-weight:700; letter-spacing:.08em; color:var(--ink);
  cursor:pointer; flex:none;
}
.menu-btn__bars{ display:flex; flex-direction:column; gap:3px; }
.menu-btn__bars span{
  display:block; width:14px; height:2px; background:var(--ink); border-radius:2px;
  transform-origin:center; transition:transform .22s ease;
}
.hdr.is-open .menu-btn__bars span:first-child{ transform:translateY(2.5px) rotate(45deg); }
.hdr.is-open .menu-btn__bars span:last-child{ transform:translateY(-2.5px) rotate(-45deg); }

.nav{ display:none; flex-basis:100%; }
.hdr.is-open .nav{ display:block; }
.nav ul{
  list-style:none; margin:.6rem 0 .35rem; padding:.4rem;
  display:grid; grid-template-columns:1fr 1fr; gap:.25rem;
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-md);
  box-shadow:var(--sh-1);
}
.nav a{
  display:block; padding:.7rem .8rem; border-radius:var(--r-sm);
  color:var(--ink); text-decoration:none; font-family:var(--ff-c);
  font-weight:600; font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase;
}
.nav a:hover,.nav a[aria-current="location"]{
  background:var(--surface-2); color:var(--accent-ink);
}
.hdr__cta{ padding:.5rem .95rem; }
.hdr__cta-long{ display:none; }
.hdr__cta-short{ display:inline; }
@media (max-width:59.99em){
  .brand{ order:1; }
  .menu-btn{ order:2; }
  .hdr__cta{ order:3; }
  .nav{ order:4; }
}
@media (max-width:22rem){
  :root{ --pad:.75rem; --dock:6rem; }
  .hdr__in{ gap:.4rem; padding:.5rem var(--pad); flex-wrap:nowrap; }
  .brand{ gap:.35rem; }
  .brand__mark{ width:1.7rem; height:1.7rem; }
  .brand__name{ font-size:1.45rem; }
  .menu-btn{
    gap:.3rem; min-height:2.5rem; padding:.35rem .55rem;
    font-size:.72rem;
  }
  .hdr__cta{ padding:.45rem .65rem; font-size:.72rem; }
}
@media (max-width:22rem){
  .hdr.is-open .hdr__in{ flex-wrap:wrap; }
}

@media (min-width:60em){
  .hdr__in{ padding:.75rem var(--pad); flex-wrap:nowrap; }
  .brand__name{ font-size:2rem; }
  .brand__sub{ display:block; }
  .menu-btn{ display:none; }
  .nav{ display:block; flex-basis:auto; }
  .nav ul{
    margin:0; padding:0; background:none; border:0; box-shadow:none;
    display:flex; gap:.15rem;
  }
  .nav a{ padding:.5rem .7rem; font-size:.75rem; }
  .hdr__cta{ padding:.5rem 1.1rem; }
  .hdr__cta-long{ display:inline; }
  .hdr__cta-short{ display:none; }
}

/* ---------- arch device ---------- */
.arch{
  position:relative; overflow:hidden;
  border-radius:var(--pill) var(--pill) var(--r-lg) var(--r-lg);
  background:var(--surface-3);
  box-shadow:var(--sh-3);
  border:1px solid var(--rule-mid);
}
.arch img{ width:100%; height:100%; object-fit:cover; }
.arch::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--arch-scrim);
}
.arch--hero{ aspect-ratio:4/5; }
.arch--md{ aspect-ratio:1/1; }
.arch--sm{ aspect-ratio:3/4; }

/* ---------- hero ---------- */
section[id],#top{ scroll-margin-top:5.5rem; }
.hero{ position:relative; padding:2.25rem 0 2.5rem; overflow:hidden; }
.hero__glow{
  position:absolute; inset:-30% 0 auto 0; height:70%;
  background:var(--hero-glow);
  filter:blur(6px);
}
.hero__in{ position:relative; }
.h1__kicker{
  display:block; font-family:var(--ff-c); font-size:.78125rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:.5rem;
}
h1{ margin:0 0 .9rem; }
.h1__big{
  display:block; font-size:clamp(2.9rem,14.5vw,6.6rem); line-height:.98; font-weight:600;
}
.h1__big em{ font-style:italic; color:var(--accent-ink); }
.h1__small{
  display:block; font-size:clamp(1.35rem,6vw,2.5rem); line-height:1;
  letter-spacing:.24em; text-transform:uppercase; font-weight:400;
  font-family:var(--ff-c); color:var(--ink-muted); margin-top:.6rem;
}
.lede{
  font-family:var(--ff-d); font-size:clamp(1.25rem,4.6vw,1.75rem); line-height:1.3; font-weight:400; font-style:italic;
  color:var(--ink); margin:0 0 1rem; max-width:22ch;
}
.hero__note{ color:var(--ink-muted); max-width:34ch; }
.hero__note strong{ color:var(--ink-soft); }
.hero__fine{ font-size:.875rem; color:var(--ink-muted); margin:0; }

.hero__art{ position:relative; margin:2rem auto 0; max-width:22rem; }
.sticker--hero{ position:absolute; right:-.35rem; top:-1.1rem; transform:rotate(9deg); }
.sticker--price{
  position:absolute; left:-.5rem; top:-1rem; z-index:2; transform:rotate(-10deg);
  background:var(--accent); color:var(--on-accent); border-color:var(--on-accent-edge);
}
.hero__chip{
  position:absolute; left:-.5rem; bottom:-1.25rem;
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-md);
  padding:.7rem .9rem; box-shadow:var(--sh-2); max-width:15rem;
}
.hero__chip-k{ display:block; font-family:var(--ff-d); font-weight:700; font-size:1.05rem; line-height:1.2; color:var(--ink); }
.hero__chip-v{ display:block; font-size:.8125rem; color:var(--ink-muted); }

@media (min-width:60em){
  .hero{ padding:4rem 0 5rem; }
  .hero__in{ display:grid; grid-template-columns:1.05fr .95fr; gap:3.5rem; align-items:center; }
  .hero__art{ margin:0; max-width:none; }
  .sticker--hero{ width:8rem; height:8rem; right:-1.5rem; top:-1.5rem; }
  .sticker--hero .sticker__big{ font-size:1.9rem; }
  .hero__chip{ left:-2rem; bottom:2rem; }
}

/* ---------- fine line feature ---------- */
.fineline{ padding:1.5rem 0 2.5rem; }
.fl-card{
  background:linear-gradient(160deg, var(--surface-2), var(--surface-3));
  border:1px solid var(--rule-mid);
  border-radius:var(--r-xl); padding:1.5rem 1.25rem 1.75rem;
  box-shadow:var(--sh-2); position:relative; overflow:hidden;
}
.fl-card::before{
  content:""; position:absolute; width:16rem; height:16rem; right:-6rem; top:-7rem;
  border-radius:50%; border:1px dashed var(--tint-strong);
}
.fl-card__copy{ position:relative; }
.fl-card h2{
  font-size:clamp(1.95rem,8.4vw,3.3rem); line-height:1.04; margin:0 0 .5rem;
}
.fl-card h2 em{ font-style:italic; color:var(--accent-ink); }
.fl-card .eyebrow{ color:var(--ink-soft); }
.fl-card__tag{
  font-family:var(--ff-d); font-style:italic; font-size:1.25rem; color:var(--ink-soft);
  margin:0 0 .9rem; letter-spacing:.01em;
}
.fl-card__body{ color:var(--ink-muted); max-width:44ch; }
.fl-list{
  list-style:none; margin:0 0 1.25rem; padding:0;
  display:flex; flex-wrap:wrap; gap:.4rem;
}
.fl-list li{
  display:inline-flex; align-items:center; gap:.35rem;
  background:var(--tint-2); border:1px solid var(--tint-edge);
  border-radius:var(--pill); padding:.35rem .8rem;
  font-size:.875rem; font-weight:600; color:var(--ink);
}
.fl-list span{ color:var(--accent-ink); }
.fl-card__art{ position:relative; display:flex; gap:.75rem; margin-top:1.5rem; }
.fl-card__art .arch{ flex:1 1 0; }
.arch--offset{ margin-top:1.75rem; }

@media (min-width:60em){
  .fineline{ padding:2rem 0 4rem; }
  .fl-card{ display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center; padding:3rem; }
  .fl-card__art{ margin-top:0; }
}

/* ---------- section heads ---------- */
.sec-head{ margin:0 0 1.5rem; max-width:38rem; }
.sec-head h2{ font-size:clamp(1.85rem,7.5vw,3rem); margin:0 0 .6rem; }
.sec-head__sub{ color:var(--ink-muted); margin:0; }
.sec-head--center{ margin-inline:auto; text-align:center; }
.sec-head__sub--light{ color:var(--ink-muted); }
.sec-head--center h2{ color:var(--ink); }

/* ---------- gallery ---------- */
.work{ padding:2rem 0 2.5rem; }
.filters{
  display:flex; gap:.5rem; overflow-x:auto; padding:.25rem .25rem .75rem;
  margin:0 calc(var(--pad) * -1) .25rem; padding-inline:var(--pad);
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.filters::-webkit-scrollbar{ display:none; }
.chip{
  flex:none; display:inline-flex; align-items:center; gap:.45rem;
  min-height:2.75rem; padding:.5rem 1rem;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--rule); border-radius:var(--pill);
  font-family:var(--ff-c); font-size:.8125rem; font-weight:700; letter-spacing:.06em; white-space:nowrap;
  cursor:pointer; box-shadow:var(--sh-1);
  transition:background-color .15s ease, color .15s ease, transform .15s ease;
}
.chip:hover{ background:var(--surface-2); }
.chip__n{
  font-size:.6875rem; font-weight:800; padding:.1rem .4rem; border-radius:var(--pill);
  background:var(--surface-2); color:var(--ink-muted);
}
.chip.is-on{ background:var(--ink-soft); color:var(--ground); border-color:var(--accent-line); }
.chip.is-on .chip__n{ background:var(--fill-tint); color:var(--ground); }
.filter-status{ font-size:.875rem; color:var(--ink-muted); margin:0 0 1rem; }

.grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem;
  grid-auto-flow:dense; grid-auto-rows:1fr;
}
.tile{ margin:0; position:relative; min-height:0; }
.tile[hidden]{ display:none; }
.tile__btn{
  display:block; width:100%; padding:0; border:0; cursor:pointer;
  background:var(--surface-3); border-radius:var(--r-md); overflow:hidden;
  position:relative; box-shadow:var(--sh-1); aspect-ratio:4/5;
  transition:transform .2s ease, box-shadow .2s ease;
}
.tile__btn img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .45s cubic-bezier(.16,1,.3,1),filter .3s ease;
}
.tile__btn::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,transparent 48%,rgb(var(--t-shadow) / .82));
  opacity:0; transition:opacity .3s ease;
}
.tile__btn::before{
  content:attr(data-cat-label) " · " attr(data-caption);
  position:absolute; z-index:2; left:1rem; right:1rem; bottom:.9rem;
  color:#fff; font-family:var(--ff-c); font-size:.6875rem; font-weight:700;
  line-height:1.45; letter-spacing:.08em; text-align:left; text-transform:uppercase;
  opacity:0; transform:translateY(.55rem);
  transition:opacity .3s ease,transform .3s cubic-bezier(.16,1,.3,1);
}
.tile__btn:hover,.tile__btn:focus-visible{ transform:translateY(-3px); box-shadow:var(--sh-2); }
.tile__btn:hover img,.tile__btn:focus-visible img{ transform:scale(1.025); }
.tile__btn:hover::after,.tile__btn:focus-visible::after{ opacity:1; }
.tile__btn:hover::before,.tile__btn:focus-visible::before{ opacity:1; transform:none; }

/* Feature plates fill their whole span exactly: absolute so they never
   contribute to row sizing, which keeps every row the same height. */
.tile--feat{ grid-column:span 2; grid-row:span 2; }
.tile--feat.tile--wide{ grid-row:span 1; }
.tile--feat .tile__btn{
  position:absolute; inset:0; aspect-ratio:auto;
  border-radius:var(--r-lg); box-shadow:var(--sh-2);
}
.tile--feat .tile__btn:hover{ transform:none; }
.tile--feat .tile__btn img{ transition:transform .3s ease; }
.tile--feat .tile__btn:hover img{ transform:scale(1.03); }

@media (min-width:48em){
  .grid{ grid-template-columns:repeat(4,1fr); gap:.85rem; }
  .work{ padding:3rem 0 4rem; }
}
@media (min-width:60em){
  .grid{ gap:1rem; }
}
@media (min-width:60em){
  .filters{
    flex-wrap:wrap; overflow:visible;
    margin:0 0 .25rem; padding:.25rem 0 .75rem;
  }
}

/* ---------- lightbox ---------- */
.lb{
  border:0; padding:0; width:min(94vw,62rem); max-width:94vw;
  background:var(--surface); color:var(--ink);
  border-radius:var(--r-lg); box-shadow:var(--sh-3); overflow:hidden;
}
.lb::backdrop{ background:var(--backdrop); backdrop-filter:blur(3px); }
.lb__bar{ display:flex; align-items:center; gap:1rem; padding:.85rem 1rem; border-bottom:1px solid var(--rule-soft); }
.lb__cat{ margin:0; font-family:var(--ff-c); font-size:.75rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
.lb__x{
  margin-left:auto; width:2.5rem; height:2.5rem; border-radius:50%;
  border:1px solid var(--rule-strong); background:var(--ground); color:var(--ink);
  font-size:1rem; cursor:pointer; flex:none;
}
.lb__x:hover{ background:var(--surface-2); }
.lb__fig{ margin:0; }
.lb__fig img{
  width:100%; max-height:64vh; object-fit:contain; background:var(--surface-2);
}
.lb__fig figcaption{ padding:.9rem 1rem; font-size:.9375rem; color:var(--ink-muted); }
.lb__nav{ display:flex; align-items:center; gap:.5rem; padding:0 1rem 1rem; }
.lb__arrow{
  min-height:2.75rem; padding:.5rem 1rem; border-radius:var(--pill);
  border:1px solid var(--rule-strong); background:var(--ground); color:var(--ink);
  font-family:var(--ff-c); font-weight:700; font-size:.8125rem; letter-spacing:.06em; cursor:pointer;
}
.lb__arrow:hover{ background:var(--surface-2); }
.lb__count{ margin:0 auto; font-size:.8125rem; color:var(--ink-muted); }

/* ---------- booking ---------- */
.book{
  background:var(--band-glow), var(--band);
  color:var(--ink);
  padding:2.5rem 0 3rem;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  margin-top:1rem;
}
.book .eyebrow--light{ color:var(--ink-soft); }

.booker{
  background:var(--surface); color:var(--ink);
  border-radius:var(--r-lg); box-shadow:var(--sh-3);
  padding:1.25rem 1rem 1.5rem; margin-top:1.5rem;
}
.steps{
  list-style:none; display:flex; gap:.35rem; margin:0 0 1.1rem; padding:0 0 .9rem;
  border-bottom:1px solid var(--rule-soft);
}
.steps li{ flex:1 1 0; min-width:0; }
.step{
  width:100%; display:flex; flex-direction:column; align-items:center; gap:.3rem;
  padding:.6rem .25rem; border:0; background:transparent; cursor:pointer;
  font-family:var(--ff-c); color:var(--ink-muted); border-radius:var(--r-sm);
}
.step__n{
  display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%;
  background:var(--surface-2); color:var(--ink-muted);
  font-family:var(--ff-d); font-weight:700; font-size:.9375rem;
  transition:background-color .18s ease, color .18s ease, transform .18s ease;
}
.step__t{ font-size:.6875rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; text-align:center; }
.step[aria-current="step"]{ color:var(--ink); }
.step[aria-current="step"] .step__n{ background:var(--accent); color:var(--on-accent); transform:scale(1.08); }
.step.is-done .step__n{ background:var(--surface-3); color:var(--ink-soft); }
.step:disabled{ cursor:default; opacity:.65; }
.booker__live{
  margin:0 0 .75rem; font-size:.875rem; font-weight:700; color:var(--ink-soft);
  min-height:1.2rem;
}
.booker__live:empty{ display:none; }

.panel__h{ font-size:clamp(1.4rem,5.5vw,2rem); margin:0 0 .35rem; }
.panel__sub{ color:var(--ink-muted); font-size:.9375rem; margin:0 0 1.1rem; }
.panel__foot{
  margin:1.1rem 0 0; padding-top:1rem; border-top:1px solid var(--rule-soft);
  font-size:.8125rem; color:var(--ink-muted);
}
/* non-interactive note closing the placement list — a statement, not an option */
.quote-note{
  display:flex; gap:.6rem; margin:.75rem 0 0;
  padding:.8rem .95rem; border-radius:var(--r-md);
  background:var(--tint-1); border:1px dotted var(--rule-strong);
  font-size:.8125rem; color:var(--ink-muted);
}
.quote-note__i{ flex:none; color:var(--accent-ink); line-height:1.5; }
.quote-note a{ color:var(--accent-ink); font-weight:700; }
.back{
  display:inline-flex; align-items:center; gap:.4rem; margin:0 0 .85rem;
  padding:.4rem .8rem .4rem .6rem; border-radius:var(--pill);
  border:1px solid var(--rule-strong); background:var(--ground); color:var(--ink);
  font-family:var(--ff-c); font-weight:700; font-size:.75rem; letter-spacing:.08em; cursor:pointer;
}
.back:hover{ background:var(--surface-2); }

.svc-set{ border:0; margin:0; padding:0; }
.svc-grid{ display:grid; gap:.5rem; }

/* placement groups — collapsible by body region, phone-first */
.svcgrp{
  background:var(--surface); border:1px solid var(--rule-strong); border-radius:var(--r-sm);
  box-shadow:none; overflow:hidden;
}
.svcgrp__sum{
  display:flex; align-items:center; gap:.6rem; cursor:pointer;
  padding:.85rem 1rem; list-style:none; min-height:3.25rem;
}
.svcgrp__sum::-webkit-details-marker{ display:none; }
.svcgrp__sum:hover{ background:var(--surface-2); }
.svcgrp__sum:focus-visible{ outline:3px solid var(--focus); outline-offset:-3px; }
.svcgrp__t{
  font-family:var(--ff-d); font-size:1.0625rem; font-weight:700; line-height:1.2;
}
.svcgrp__n{
  font-family:var(--ff-c); font-size:.6875rem; font-weight:700; padding:.1rem .45rem; border-radius:var(--pill);
  background:var(--surface-2); color:var(--ink-soft);
}
.svcgrp__i{
  margin-left:auto; flex:none; position:relative;
  width:1.75rem; height:1.75rem; border-radius:50%; background:var(--surface-2);
}
.svcgrp__i::before,.svcgrp__i::after{
  content:""; position:absolute; left:50%; top:50%; width:.7rem; height:2px;
  background:var(--accent-ink); transform:translate(-50%,-50%); border-radius:2px;
}
.svcgrp__i::after{ transform:translate(-50%,-50%) rotate(90deg); transition:transform .2s ease; }
.svcgrp[open] .svcgrp__i::after{ transform:translate(-50%,-50%) rotate(0deg); }
.svcgrp[open] .svcgrp__i{ background:var(--accent-veil); }
.svcgrp[open] .svcgrp__sum{ border-bottom:1px solid var(--rule-soft); }
.svcgrp__b{ display:grid; gap:.5rem; padding:.75rem; }
@media (min-width:40em){ .svcgrp__b{ grid-template-columns:1fr 1fr; } }

.svc{ position:relative; display:block; }
.svc input{
  position:absolute; opacity:0; width:1.25rem; height:1.25rem; top:1.2rem; left:1rem; margin:0;
}
.svc__box{
  display:flex; align-items:center; gap:.85rem;
  min-height:4.5rem; padding:.9rem 1rem;
  background:var(--ground); border:2px solid var(--rule-strong); border-radius:var(--r-sm);
  cursor:pointer; transition:background-color .15s ease,border-color .15s ease,transform .15s ease;
}
.svc__box:hover{ background:var(--surface-2); }
.svc input:focus-visible + .svc__box{ outline:3px solid var(--focus); outline-offset:2px; }
.svc input:checked + .svc__box{ border-color:var(--accent-line); background:var(--sel-fill); }
.svc__tick{
  flex:none; width:1.5rem; height:1.5rem; border-radius:50%;
  border:2px solid var(--rule-strong); background:var(--surface);
  display:grid; place-items:center; font-size:.75rem; color:transparent; font-weight:900;
}
.svc input:checked + .svc__box .svc__tick{ background:var(--accent); border-color:var(--accent-line); color:var(--on-accent); }
.svc__body{ min-width:0; flex:1 1 auto; }
.svc__name{
  display:block; font-family:var(--ff-d); font-size:1.0625rem; font-weight:700; line-height:1.2;
}
.svc__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .5rem;
  margin-top:.25rem; font-size:.8125rem; color:var(--ink-muted);
}
.svc__size{ font-weight:700; color:var(--ink-soft); white-space:nowrap; }
.svc__price{
  flex:none; font-family:var(--ff-d); font-size:1.0625rem; font-weight:700;
  white-space:nowrap; align-self:center;
}
.svc__price,.price-table__amt,.date,.slot,.summary dd{ font-variant-numeric:tabular-nums; }

.dates{
  display:flex; gap:.5rem; overflow-x:auto; padding:.25rem .25rem 1rem;
  margin:0 -1rem 0; padding-inline:1rem;
  scrollbar-width:none;
}
.dates::-webkit-scrollbar{ display:none; }
.date{
  flex:none; width:4.5rem; min-height:5.5rem; padding:.6rem .3rem;
  display:flex; flex-direction:column; align-items:center; gap:.15rem;
  background:var(--ground); border:2px solid var(--rule-strong); border-radius:var(--r-md);
  font-family:var(--ff-c); color:var(--ink); cursor:pointer;
  transition:border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.date:hover:not(:disabled){ background:var(--surface-2); transform:translateY(-2px); }
.date__dow{ font-size:.6875rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted); }
.date__d{
  font-family:var(--ff-d); font-size:1.5rem; font-weight:700; line-height:1;
}
.date__mo{ font-size:.625rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); }
.date__n{
  margin-top:.15rem; font-size:.625rem; font-weight:700; color:var(--ink-soft);
}
.date.is-on{ background:var(--sel-fill); border-color:var(--accent-line); color:var(--ink); }
.date.is-on .date__dow,.date.is-on .date__mo{ color:var(--ink-soft); }
.date.is-on .date__n{ color:var(--accent-ink); }
.date:disabled{ cursor:not-allowed; background:var(--surface-2); border-color:var(--surface-2); color:var(--ink-muted); }
.date:disabled .date__n{ color:var(--ink-muted); }

.slots-head{ display:flex; align-items:baseline; gap:.75rem; margin:.35rem 0 .75rem; }
.slots-head__t{ font-size:1.125rem; margin:0; }
.slots-head__n{ margin:0; font-size:.8125rem; color:var(--ink-muted); margin-left:auto; }
.slots{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
@media (min-width:34em){ .slots{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:56em){ .slots{ grid-template-columns:repeat(4,1fr); } }
.slot{
  min-height:3.25rem; padding:.7rem .5rem; border-radius:var(--r-md);
  background:var(--ground); border:2px solid var(--rule-strong); color:var(--ink);
  font-family:var(--ff-c); font-size:.9375rem; font-weight:700; cursor:pointer;
  transition:border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.slot:hover:not(:disabled){ background:var(--tint-3); border-color:var(--accent-line); transform:translateY(-2px); }
.slot:disabled{
  cursor:not-allowed; background:var(--surface-2); border-color:var(--surface-2);
  color:var(--ink-muted); text-decoration:line-through; font-weight:600;
}
.slot.is-on{ background:var(--accent); border-color:var(--accent-line); color:var(--on-accent); }
.slots-empty{
  grid-column:1/-1; margin:0; padding:1.25rem; text-align:center;
  background:var(--surface-2); border-radius:var(--r-md); color:var(--ink-muted); font-size:.9375rem;
}

.confirm{ display:grid; gap:1rem; }
.summary{
  margin:0; padding:1rem; background:var(--ground);
  border:1px solid var(--rule-soft); border-radius:var(--r-md);
}
.summary div{
  display:flex; align-items:baseline; gap:1rem; padding:.5rem 0;
  border-bottom:1px dashed var(--rule);
}
.summary div:last-child{ border-bottom:0; padding-bottom:0; }
.summary dt{
  font-family:var(--ff-c); font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-muted); flex:none; min-width:6.5rem;
}
.summary dd{ margin:0 0 0 auto; text-align:right; font-weight:700; }
.summary dd.is-big{
  font-family:var(--ff-d); font-size:1.125rem;
}

.deposit{
  background:linear-gradient(160deg,var(--surface-2),var(--surface));
  border:1px solid var(--accent-edge); border-radius:var(--r-md); padding:1rem 1.1rem;
}
.deposit__line{
  font-family:var(--ff-d); font-size:1.25rem; font-weight:700; margin:0 0 .3rem;
  color:var(--ink);
}
.tbd{
  border-bottom:2px dotted var(--accent-line); color:var(--ink-soft);
  padding-bottom:1px; font-style:italic;
}
.tbd::after{
  content:"?"; font-size:.6em; vertical-align:super; margin-left:.1em; font-style:normal;
}
.deposit__note{ margin:0 0 .4rem; font-size:.8125rem; font-weight:700; color:var(--ink-soft); }
.deposit__why{ margin:0; font-size:.875rem; color:var(--ink-muted); }

.pay-why{ margin:-.4rem 0 0; font-size:.8125rem; color:var(--ink-muted); text-align:center; }
.confirm__rules{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.confirm__rules li{ display:flex; gap:.6rem; font-size:.9375rem; color:var(--ink); }
.confirm__rules span{ color:var(--accent-ink); font-weight:700; }
.confirm__alt{
  background:var(--band); color:var(--ink); border-radius:var(--r-md);
  padding:1rem; text-align:center;
}
.confirm__alt p{ margin:0 0 .6rem; font-weight:700; }
.reset{
  justify-self:center; background:none; border:0; color:var(--ink-muted); cursor:pointer;
  font-family:var(--ff-c); font-size:.8125rem; font-weight:700; text-decoration:underline;
  text-decoration-style:dotted; padding:.5rem;
}
.reset:hover{ color:var(--ink-soft); }

@media (min-width:60em){
  .book{ padding:4.5rem 0 5rem; }
  .booker{ padding:2rem 2.25rem 2.5rem; max-width:60rem; margin-inline:auto; }
  .steps{ gap:1rem; }
  .step{ flex-direction:row; gap:.6rem; padding:.55rem .9rem; }
  .step__t{ font-size:.9375rem; }
  .confirm{ grid-template-columns:1.1fr .9fr; align-items:start; }
  .summary{ grid-row:span 2; }
  .confirm__rules,.confirm__alt,.reset{ grid-column:1/-1; }
}

/* ---------- pricing ---------- */
.pricing{ padding:2.5rem 0; }
.price-wrap{ display:grid; gap:1.25rem; }
.price-main{ min-width:0; }
.price-table{
  width:100%; border-collapse:collapse; background:var(--surface);
  border:1px solid var(--rule-soft); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--sh-1); font-size:.9375rem;
}
.price-table thead th{
  text-align:left; padding:.75rem .9rem; background:var(--surface-2); color:var(--ink-muted);
  font-family:var(--ff-c); font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.price-table thead th:last-child,.price-table td:last-child{ text-align:right; }
.price-table tbody th{
  text-align:left; font-family:var(--ff-d); font-weight:700; padding:.8rem .9rem; line-height:1.35; color:var(--ink);
}
.price-table tbody th em{ font-weight:400; font-style:italic; color:var(--ink-muted); }
.price-table td{ padding:.7rem .5rem; color:var(--ink-muted); white-space:nowrap; vertical-align:middle; }
.price-table__amt{
  padding-right:.9rem; color:var(--ink);
  font-family:var(--ff-d); font-weight:700; font-size:1.0625rem;
}
.price-table tbody tr + tr{ border-top:1px solid var(--rule-soft); }
.price-table tbody tr:nth-child(odd){ background:var(--zebra); }

/* difficulty tiers — warm tonal ramp plus a fill bar, so it never reads by colour alone */
.tier{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.26rem .55rem; border-radius:var(--pill);
  background:var(--tier-bg,var(--tier-1)); color:var(--ink-soft);
  border:1px solid var(--tint-strong);
  font-family:var(--ff-c); font-size:.6875rem; font-weight:700; letter-spacing:.04em; line-height:1.15;
  white-space:nowrap;
}
.tier__lv{
  flex:none; position:relative; width:1.6rem; height:.3rem;
  border-radius:var(--pill); background:var(--tint-edge);
}
.tier__lv::after{
  content:""; position:absolute; left:0; top:0; bottom:0;
  border-radius:inherit; background:currentColor;
  width:calc(var(--tier-lv,1) / 6 * 100%);
}
.tier--lv1{ --tier-lv:1; --tier-bg:var(--tier-1); }
.tier--lv2{ --tier-lv:2; --tier-bg:var(--tier-2); }
.tier--lv3{ --tier-lv:3; --tier-bg:var(--tier-3); }
.tier--lv4{ --tier-lv:4; --tier-bg:var(--tier-4); }
.tier--lv5{ --tier-lv:5; --tier-bg:var(--tier-5); }
.tier--lv6{ --tier-lv:6; --tier-bg:var(--tier-6); }

.price-legend{
  display:flex; flex-wrap:wrap; align-items:center; gap:.35rem;
  margin:1rem 0 .35rem; font-size:.8125rem; color:var(--ink-muted);
}

/* Phone: compact reference rows preserve every price without a wall of cards. */
@media (max-width:39.99em){
  .price-table{
    display:block; background:var(--surface); border:1px solid var(--rule-soft);
    border-radius:var(--r-lg); box-shadow:var(--sh-1); overflow:hidden; font-size:.9375rem;
  }
  .price-table thead{
    position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
  }
  .price-table tbody{ display:block; }
  .price-table tbody tr,
  .price-table tbody tr:nth-child(odd){
    display:grid; grid-template-columns:auto 1fr auto; gap:.15rem .5rem; align-items:center;
    padding:.6rem .8rem; background:var(--surface);
    border:0; border-radius:0; box-shadow:none;
  }
  .price-table tbody tr:nth-child(odd){ background:var(--zebra); }
  .price-table tbody tr + tr{ border-top:1px solid var(--rule-soft); }
  .price-table tbody th{
    grid-column:1/span 2; grid-row:1; padding:0;
    font-family:var(--ff-d); font-size:1rem; line-height:1.2;
  }
  .price-table td{ padding:0; }
  .price-table td:nth-of-type(1){ grid-column:1; grid-row:2; }
  .price-table td:nth-of-type(2){ grid-column:2; grid-row:2; }
  .price-table td:nth-of-type(2)::before{
    content:attr(data-label); margin-right:.35rem;
    font-size:.625rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  }
  .price-table__amt{
    grid-column:3; grid-row:1/span 2; justify-self:end; text-align:right; padding:0;
    font-size:1.0625rem;
  }
}
@media (max-width:22rem){
  .price-table tbody tr,
  .price-table tbody tr:nth-child(odd){
    grid-template-columns:auto 1fr auto; column-gap:.25rem;
    padding-inline:.65rem;
  }
  .price-table td:nth-of-type(2)::before{ display:none; }
  .price-table__amt{ font-size:.9375rem; }
}

.price-aside{
  background:linear-gradient(160deg,var(--surface-2),var(--surface-3));
  border:1px solid var(--rule-mid); border-radius:var(--r-lg);
  padding:1.5rem 1.25rem; box-shadow:var(--sh-2); align-self:start;
}
.price-aside h3{ font-size:1.5rem; margin:0 0 .4rem; }
.price-aside p{ color:var(--ink-muted); }
.price-aside__fine{ font-size:.8125rem; margin:.75rem 0 0; text-align:center; }
.price-aside .sticker--flat{ background:var(--surface); border-style:solid; border-color:var(--tint-firm); }

@media (min-width:56em){
  .pricing{ padding:4rem 0; }
  .price-wrap{ grid-template-columns:1.6fr .9fr; gap:2rem; }
  .price-table{ font-size:1rem; }
}

/* ---------- about ---------- */
.about{ padding:1.5rem 0 2.5rem; }
.about__in{ display:grid; gap:1.75rem; }
.about__art{ position:relative; max-width:24rem; }
.sticker--about{
  position:absolute; right:-.5rem; bottom:-1rem; transform:rotate(-8deg);
  background:var(--surface); border-style:solid; border-color:var(--rule);
}
.sticker--about .sticker__big{ color:var(--accent-ink); font-size:1.9rem; }
.about__lead{
  font-family:var(--ff-d); font-style:italic; font-size:1.25rem; line-height:1.35;
  color:var(--ink-soft); max-width:26ch;
}
.about__copy h2{ font-size:clamp(1.85rem,7.5vw,3rem); }
.about__copy p{ color:var(--ink-muted); }
.about__facts{ list-style:none; margin:1.25rem 0 0; padding:0; display:grid; gap:.5rem; }
.about__facts li{
  display:flex; flex-wrap:wrap; gap:.15rem .75rem; align-items:baseline;
  background:var(--surface); border:1px solid var(--rule-soft); border-radius:var(--r-md);
  padding:.7rem .9rem;
}
.about__facts strong{
  font-family:var(--ff-c); font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); flex:none; min-width:6rem;
}
.about__facts span{ font-weight:600; font-size:.9375rem; }

.studio{
  margin-top:2rem; background:var(--band); color:var(--ink);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-2);
  display:grid;
}
.studio__img{ position:relative; }
.studio__img img{ width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center 30%; }
.studio__img::after{
  content:""; position:absolute; inset:0;
  background:var(--photo-scrim);
}
.studio__copy{ padding:1.25rem 1.25rem 1.5rem; }
.studio__copy h3{ color:var(--ink); font-size:1.4rem; }
.studio__copy p{ color:var(--ink-muted); margin:0; }
.studio__copy .eyebrow{ color:var(--ink-soft); }

@media (min-width:56em){
  .about{ padding:2rem 0 4rem; }
  .about__in{ grid-template-columns:.85fr 1.15fr; gap:3rem; align-items:center; }
  .about__art{ max-width:none; }
  .about__facts{ grid-template-columns:1fr 1fr; }
  .studio{ grid-template-columns:.8fr 1.2fr; align-items:center; }
  .studio__img img{ aspect-ratio:1/1; height:100%; }
  .studio__copy{ padding:2.25rem; }
}

/* ---------- policies ---------- */
.policies{ padding:2rem 0 2.5rem; }
.acc{ display:grid; gap:.6rem; max-width:52rem; }
.acc details{
  background:var(--surface); border:1px solid var(--rule-strong); border-radius:var(--r-sm);
  box-shadow:none; overflow:hidden;
}
.acc summary{
  display:flex; align-items:center; gap:1rem; cursor:pointer;
  padding:1rem 1.1rem; list-style:none; min-height:3.5rem;
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary:hover{ background:var(--surface-2); }
.acc__t{
  font-family:var(--ff-d); font-size:1.0625rem; font-weight:700; line-height:1.25;
}
.acc__i{
  margin-left:auto; flex:none; position:relative;
  width:1.75rem; height:1.75rem; border-radius:50%; background:var(--surface-2);
}
.acc__i::before,.acc__i::after{
  content:""; position:absolute; left:50%; top:50%; width:.7rem; height:2px;
  background:var(--accent-ink); transform:translate(-50%,-50%); border-radius:2px;
}
.acc__i::after{ transform:translate(-50%,-50%) rotate(90deg); transition:transform .2s ease; }
.acc details[open] .acc__i::after{ transform:translate(-50%,-50%) rotate(0deg); }
.acc details[open] .acc__i{ background:var(--accent-veil); }
.acc__b{ padding:0 1.1rem 1.1rem; }
.acc__b p{ margin:0; color:var(--ink-muted); font-size:.9375rem; }
@media (min-width:56em){
  .policies{ padding:4rem 0; }
  .policies > .wrap{
    display:grid; grid-template-columns:minmax(16rem,.7fr) minmax(0,1.3fr);
    gap:clamp(3rem,7vw,7rem); align-items:start;
  }
  .policies .sec-head{ position:sticky; top:6rem; max-width:24rem; margin:0; }
  .acc{ gap:.75rem; max-width:none; }
}

/* ---------- visit ---------- */
.visit{ padding:0 0 3rem; }
.warn{
  display:flex; flex-wrap:wrap; gap:.35rem;
  background:var(--surface-2); color:var(--ink);
  border:1px solid var(--accent-line);
  border-radius:var(--r-md); padding:1rem 1.1rem; margin:0 0 1.5rem;
  font-size:.9375rem; box-shadow:var(--sh-2);
}
.warn strong{ font-family:var(--ff-d); font-size:1.0625rem; color:var(--ink-soft); }
.visit__grid{ display:grid; gap:1rem; }
.visit__card{
  background:var(--surface); border:1px solid var(--rule-soft); border-radius:var(--r-lg);
  padding:1.5rem 1.25rem; box-shadow:var(--sh-1);
}
.visit__card h2{ font-size:clamp(1.6rem,6.5vw,2.25rem); }
.nap{
  font-style:normal; font-size:1.0625rem; line-height:1.6; margin:0 0 .75rem;
  padding-left:.9rem; border-left:3px solid var(--accent-line); font-weight:600;
}
.nap__biz{ display:block; font-family:var(--ff-d); font-size:1.125rem; font-weight:700; }
.visit__note{ color:var(--ink-muted); font-size:.9375rem; }
.visit__hours{ font-size:.9375rem; }
.visit__areas{
  background:linear-gradient(160deg,var(--surface-2),var(--surface-3));
  border:1px solid var(--rule-mid); border-radius:var(--r-lg); padding:1.5rem 1.25rem;
}
.visit__areas h3{ font-size:1.25rem; }
/* Uniform bubbles: fixed grid rather than content-width flex pills, so twelve towns
   share one width and no row is left with an orphan. */
.areas{
  list-style:none; margin:.75rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.45rem;
  /* 1fr rows so the wrapping "Providence Village" pill does not end up taller. */
  grid-auto-rows:1fr;
}
.areas li{
  display:flex; align-items:center; justify-content:center;
  min-height:2.375rem; padding:.35rem .6rem;
  background:var(--tint-2); border:1px solid var(--tint-edge);
  border-radius:var(--pill);
  font-size:.875rem; font-weight:600; color:var(--ink);
  text-align:center; line-height:1.2;
}
@media (min-width:40em){
  .areas{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:56em){
  .visit__grid{ grid-template-columns:1.15fr .85fr; gap:1.5rem; }
  .visit__card,.visit__areas{ padding:2.25rem; }
}

/* ---------- footer ---------- */
.ftr{
  background:var(--band); color:var(--ink);
  border-radius:var(--r-xl) var(--r-xl) 0 0; padding:2.5rem 0 1rem;
}
.ftr__in{ display:grid; gap:1.75rem; }
.ftr__mark{ display:block; width:2.5rem; height:2.5rem; margin-bottom:.6rem; color:var(--ink); }
.ftr__name{ font-family:var(--ff-sig); font-size:2.6rem; font-weight:400; line-height:1; margin:0; color:var(--ink); }
.ftr__tag{ font-family:var(--ff-d); font-style:italic; color:var(--ink-soft); margin:0; }
.ftr__col h2{
  font-family:var(--ff-c); font-size:.6875rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft); margin:0 0 .7rem;
}
.ftr__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.ftr__col li{ color:var(--ink-muted); font-size:.9375rem; }
.ftr__col a{ color:var(--ink); text-decoration:none; font-weight:600; }
.ftr__col a:hover{ color:var(--accent-ink); text-decoration:underline; }
.ftr__areas{ color:var(--ink-muted); font-size:.875rem; line-height:1.7; margin:0 0 .6rem; }
.ftr__addr{ color:var(--ink-muted); font-size:.875rem; margin:0; }
.ftr__base{
  max-width:var(--wrap); margin:2rem auto 0; padding:1rem var(--pad) 0;
  border-top:1px solid var(--rule-mid);
  font-size:.8125rem; color:var(--ink-muted);
}
@media (min-width:56em){
  .ftr{ padding:3.5rem 0 1rem; }
  .ftr__in{ grid-template-columns:1.2fr .8fr .8fr 1.4fr; gap:2rem; }
}

/* ---------- mobile dock ---------- */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:flex; gap:.6rem; align-items:center;
  padding:.6rem var(--pad) calc(.6rem + env(safe-area-inset-bottom));
  background:var(--dock-bg); backdrop-filter:blur(12px) saturate(1.3);
  border-top:1px solid var(--rule);
  opacity:0; pointer-events:none; transform:translateY(110%);
}
.dock.is-visible{ opacity:1; pointer-events:auto; transform:none; }
.dock__b{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:3.25rem; padding:.75rem 1rem; border-radius:var(--pill);
  font-family:var(--ff-c); font-weight:700; font-size:.875rem; letter-spacing:.06em; text-decoration:none;
  background:var(--surface); color:var(--ink); border:1px solid var(--rule-strong);
  flex:0 0 auto;
}
.dock__b--primary{ flex:1 1 auto; background:var(--accent); color:var(--on-accent); border-color:var(--accent-line); box-shadow:var(--sh-2); }
.dock__b--primary:hover{ background:var(--accent-strong); }
@media (min-width:60em){
  .dock{ display:none; }
  body{ padding-bottom:0; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .btn:hover,.tile__btn:hover,.date:hover:not(:disabled),
  .slot:hover:not(:disabled),.tile--feat .tile__btn:hover img{ transform:none; }
}

/* ---------- theme preview switcher (review tool, not customer UI) ---------- */
/* A labeled palette lab rather than anonymous dots: the capability stays obvious. */
.tsw{
  display:none;
  position:fixed; right:.75rem; z-index:80;
  bottom:calc(.75rem + env(safe-area-inset-bottom));
  width:min(22.5rem,calc(100vw - 1.5rem));
  padding:.75rem;
  background:var(--surface); border:1px solid var(--rule-strong);
  border-radius:var(--r-md); box-shadow:var(--sh-3);
}
.tsw__head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.tsw__cap,.tsw__current,.tsw__label{ margin:0; }
.tsw__cap{
  font-family:var(--ff-c); font-size:.625rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-muted);
}
.tsw__current{
  margin-top:.1rem; font-family:var(--ff-d); font-size:1rem; font-weight:700;
  line-height:1.2; color:var(--ink);
}
.tsw__toggle{
  flex:none; min-height:2.75rem; padding:.35rem .7rem; cursor:pointer;
  border:1px solid var(--rule-strong); border-radius:var(--pill);
  background:var(--ground); color:var(--ink);
  font-family:var(--ff-c); font-size:.5625rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
}
.tsw__toggle:hover{ background:var(--surface-2); }
.tsw__panel{
  display:grid; gap:.55rem; margin-top:.7rem; padding-top:.65rem;
  border-top:1px solid var(--rule);
}
.tsw__panel[hidden]{ display:none; }
.tsw__label{
  font-family:var(--ff-c); font-size:.5625rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted);
}
.tsw__palettes{
  display:grid; grid-template-columns:1fr 1fr; gap:.4rem;
}
.tsw__option{
  position:relative; display:flex; align-items:center; gap:.5rem;
  min-width:0; min-height:3rem; padding:.4rem .45rem; cursor:pointer;
  border:1px solid var(--rule); border-radius:var(--r-sm);
  background:var(--ground); color:var(--ink); text-align:left;
}
.tsw__option:hover{ background:var(--surface-2); border-color:var(--rule-strong); }
.tsw__option[aria-pressed="true"]{
  background:var(--surface-2); border-color:var(--accent-line);
  box-shadow:inset 0 0 0 1px var(--accent-line);
}
.tsw__option[aria-pressed="true"]::after{
  content:"✓"; position:absolute; right:.35rem; top:.2rem;
  color:var(--accent-ink); font-size:.7rem; font-weight:900;
}
.tsw__option strong,.tsw__option small{ display:block; }
.tsw__option strong{
  overflow:hidden; text-overflow:ellipsis;
  font-family:var(--ff-d); font-size:.8125rem; line-height:1.1; white-space:nowrap;
}
.tsw__option small{
  margin-top:.15rem; overflow:hidden; text-overflow:ellipsis;
  font-size:.625rem; line-height:1.1; color:var(--ink-muted); white-space:nowrap;
}
.tsw__swatch{
  width:1.6rem; height:1.6rem; padding:0; flex:none;
  border-radius:50%; border:2px solid var(--rule-strong);
}
.tsw__swatch--oxblood{ background:linear-gradient(135deg,var(--sw-oxblood-b) 0 48%,var(--sw-oxblood-a) 48% 100%); }
.tsw__swatch--gold{ background:linear-gradient(135deg,var(--sw-gold-b) 0 48%,var(--sw-gold-a) 48% 100%); }
.tsw__swatch--clay{ background:linear-gradient(135deg,var(--sw-clay-b) 0 48%,var(--sw-clay-a) 48% 100%); }
.tsw__swatch--satin{ background:linear-gradient(135deg,var(--sw-satin-b) 0 48%,var(--sw-satin-a) 48% 100%); }
.tsw__mode{
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:.75rem;
}
.tsw__modes{ display:flex; gap:.35rem; }
.tsw__m{
  flex:1 1 0; min-height:2.75rem; padding:.3rem .55rem; cursor:pointer;
  border-radius:var(--pill); border:1px solid var(--rule-strong);
  background:var(--ground); color:var(--ink);
  font-family:var(--ff-c); font-size:.625rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
}
.tsw__m:hover{ background:var(--surface-2); }
.tsw__m[aria-pressed="true"]{
  background:var(--accent); color:var(--on-accent); border-color:var(--accent-line);
}
.dock-visible .tsw{
  bottom:calc(var(--dock) + .65rem + env(safe-area-inset-bottom));
}
@media (max-width:59.99em){
  .tsw:not(.is-open){ width:auto; padding:.35rem; border-radius:var(--pill); }
  .tsw:not(.is-open) .tsw__head > div{ display:none; }
  .tsw:not(.is-open) .tsw__toggle{
    min-height:2.5rem; padding:.3rem .65rem; font-size:0;
  }
  .tsw:not(.is-open) .tsw__toggle::after{
    content:"Theme"; font-size:.5625rem;
  }
  .dock-visible .tsw:not(.is-open){
    opacity:0; pointer-events:none; transform:translateY(.5rem);
  }
}
@media (max-width:22rem){
  .dock-visible .tsw{
    bottom:calc(6.65rem + env(safe-area-inset-bottom));
  }
}
:root[data-palette-lab] .tsw{ display:block; }
:root[data-embed] .dock{ display:none; }
:root[data-embed] body{ padding-bottom:0; }
@media (min-width:60em){
  .tsw{ right:1rem; bottom:1rem; }
}

/* ---------- theme swap transition ---------- */
/* .tm-ready is added after first paint, so the initial render never animates. */
.tm-ready body,.tm-ready .hdr,.tm-ready .book,.tm-ready .booker,.tm-ready .ftr,
.tm-ready .dock,.tm-ready .tsw,.tm-ready .svcgrp,.tm-ready .acc details,
.tm-ready .visit__card,.tm-ready .price-table tbody tr,.tm-ready .studio{
  transition:background-color .28s ease, color .28s ease, border-color .28s ease;
}
.tm-ready .dock{
  transition:
    transform .28s ease,
    opacity .28s ease,
    background-color .28s ease,
    color .28s ease,
    border-color .28s ease;
}
.tm-ready .tsw{
  transition-property:bottom,transform,opacity,background-color,color,border-color;
}

/* ---------- selected direction refinement ---------- */
:root[data-theme="oxblood"][data-mode="light"] .hero{
  background:
    radial-gradient(36rem 30rem at 78% 24%,rgb(var(--t-accent) / .08),transparent 70%),
    linear-gradient(180deg,var(--ground),color-mix(in srgb,var(--band) 22%,var(--ground)));
}
.hero__art{ isolation:isolate; }
.hero__art::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset:-.8rem .8rem .8rem -.8rem;
  border:1px solid var(--accent-edge);
  border-radius:var(--pill) var(--pill) var(--r-lg) var(--r-lg);
}

/* Portfolio-first pacing: the work follows the hero directly. */
main{
  display:flex;
  flex-direction:column;
}
.hero{ order:1; }
.work{ order:2; }
.fineline{ order:3; }
.book{ order:4; }
.pricing{ order:5; }
.about{ order:6; }
.policies{ order:7; }
.visit{ order:8; }

@media (max-width:59.99em){
  .hero{ padding-bottom:1.25rem; }
  .hero__art{ display:none; }
}
@media (min-width:60em){
  .hero__in{ grid-template-columns:1.2fr .8fr; }
  .hero__art{ max-width:31rem; justify-self:end; }
  .arch--hero{ aspect-ratio:1/1; }
}

/* Restrained movement: the hero arrives once, sections reveal once, and the
   sticky header gains depth only after content begins moving underneath it. */
.hdr{
  transition:background-color .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.hdr.is-scrolled{ box-shadow:0 8px 24px -18px rgb(var(--t-shadow) / .55); }
@media (prefers-reduced-motion:no-preference){
  .hero__copy > *{
    animation:soft-rise .72s cubic-bezier(.16,1,.3,1) both;
  }
  .hero__copy > :nth-child(2){ animation-delay:.07s; }
  .hero__copy > :nth-child(3){ animation-delay:.14s; }
  .hero__copy > :nth-child(4){ animation-delay:.21s; }
  .hero__copy > :nth-child(5){ animation-delay:.28s; }
  .hero__copy > :nth-child(6){ animation-delay:.35s; }
  .hero__art{ animation:soft-art-in .9s .18s cubic-bezier(.16,1,.3,1) both; }
  .reveal-ready{
    opacity:0;
    transform:translateY(2rem);
    transition:opacity .72s cubic-bezier(.16,1,.3,1),transform .72s cubic-bezier(.16,1,.3,1);
  }
  .reveal-ready.is-revealed{ opacity:1; transform:none; }
  @keyframes soft-rise{
    from{ opacity:0; transform:translateY(1.25rem); }
    to{ opacity:1; transform:none; }
  }
  @keyframes soft-art-in{
    from{ opacity:0; transform:translateY(1.75rem) scale(.975); }
    to{ opacity:1; transform:none; }
  }
}

/* ---------- managed studio special ---------- */
.special-banner{
  position:relative; z-index:24;
  background:var(--accent); color:var(--on-accent);
  border-bottom:1px solid var(--accent-line);
}
.special-banner[data-banner-theme="ink"]{ background:var(--ink); color:var(--ground); }
.special-banner[data-banner-theme="paper"]{
  background:var(--surface); color:var(--ink);
  border-block:1px solid var(--rule-strong);
}
.special-banner__in{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding-block:1rem;
}
.special-banner__eyebrow{
  margin:0 0 .25rem; font-family:var(--ff-c); font-size:.6875rem;
  font-weight:700; letter-spacing:.14em; text-transform:uppercase; opacity:.78;
}
.special-banner h2{ margin:0; font-size:clamp(1.25rem,4vw,1.75rem); color:inherit; }
.special-banner p{ margin:.25rem 0 0; max-width:50rem; }
.special-banner strong{ display:block; margin-top:.35rem; }
.special-banner__cta{ flex:none; border-color:currentColor; color:inherit; background:transparent; }
.special-banner__cta:hover{ background:rgb(var(--t-ground) / .14); }
@media(max-width:40em){
  .special-banner__in{ align-items:flex-start; flex-direction:column; gap:.85rem; }
  .special-banner__cta{ width:100%; }
}