/* ===================== THEME TOKENS (Obsidian = dark, Ink = light — true opposites) ===================== */
:root, [data-theme="obsidian"]{
  /* "Obsidian" — warm, moody: near-black stone bg, warm ivory ink */
  --bg:#18140E;         /* Warm Ink — primary background */
  --surface:#3C3626;    /* Umber — cards / secondary surfaces */
  --border:#2E2717;     /* Dark Umber — borders / subtle UI */
  --fg:#F6F2E9;         /* Warm Ivory — primary text / light blocks */
  --fg-muted:#DCD2B8;   /* Warm Tan — secondary text / muted elements */
  --shadow-soft: rgba(0,0,0,0.35);
  --shadow-strong: rgba(0,0,0,0.55);
  --font-display:'Fraunces', serif;
  --font-mono:'JetBrains Mono', monospace;
  --font-body:'Fraunces', serif;
}
[data-theme="ink"]{
  /* "Ink" — cool, minimal: bright white paper, flat black ink (opposite of Obsidian) */
  --bg:#FFFFFF;         /* Paper White — primary background */
  --surface:#F3F3F3;    /* Cloud — secondary surfaces */
  --border:#DADADA;     /* Slate Gray (light) — borders / UI elements */
  --fg:#101010;         /* Ink Black — primary text / contrast */
  --fg-muted:#333333;   /* Graphite — secondary backgrounds / muted */
  --shadow-soft: rgba(0,0,0,0.07);
  --shadow-strong: rgba(0,0,0,0.16);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{background:var(--bg); -webkit-text-size-adjust:100%; text-size-adjust:100%; max-width:100%; overflow-x:hidden;}
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--font-body); overflow-x:hidden; max-width:100%;
  transition:background .4s ease, color .4s ease;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-x:none;
}
a{color:inherit; text-decoration:none; touch-action:manipulation;}
button{touch-action:manipulation;}
img{display:block; max-width:100%;}
::selection{background:var(--fg); color:var(--bg);}
.eyebrow{font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-muted); opacity:.75;}

#grain{position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0.05; mix-blend-mode:multiply;}

/* ===================== NAV ===================== */
header.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:600;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  padding:16px 26px;
}
header.site-nav .row{ display:flex; align-items:center; justify-content:space-between; gap:20px; max-width:1400px; margin:0 auto;}
header.site-nav .mark{ font-family:var(--font-display); font-weight:600; font-size:16px; letter-spacing:.02em; white-space:nowrap; display:flex; align-items:center; gap:0; }
header.site-nav .mark span{ opacity:.55; font-weight:400; }

/* ---- MOBILE ONLY: nav logo icon — desktop keeps the text-only mark + hover-reveal watermark, mobile gets a small visible mark since there's no cursor to reveal it with ---- */
.nav-logo-icon{ display:none; }
@media (max-width:820px){
  .nav-logo-icon{
    display:block; width:26px; height:26px; object-fit:contain; flex-shrink:0; margin-right:9px;
  }
}
[data-theme="obsidian"] .nav-logo-icon{ filter:invert(1) sepia(.12) saturate(.6); }
[data-theme="ink"] .nav-logo-icon{ filter:none; }
header.site-nav nav.links{ display:flex; align-items:center; gap:26px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-muted); }header.site-nav nav.links a{ position:relative; padding-bottom:2px; opacity:.7; transition:opacity .25s ease; }
header.site-nav nav.links a::after{ content:''; position:absolute; left:0; right:100%; bottom:-2px; height:1px; background:var(--fg); transition:right .3s cubic-bezier(.2,.8,.2,1); }
header.site-nav nav.links a:hover{ opacity:1; }
header.site-nav nav.links a:hover::after{ right:0; }
header.site-nav nav.links a.current{ opacity:1; }
header.site-nav nav.links a.current::after{ right:0; background:var(--fg); }
header.site-nav .right{ display:flex; align-items:center; gap:18px; }

/* ---- mobile nav toggle + drawer ---- */
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:38px; height:38px; background:none; border:none; cursor:pointer; padding:0; flex-shrink:0;
}
.nav-toggle span{ width:20px; height:1.5px; background:var(--fg); transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease, width .25s ease; }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:590;
  background:var(--bg);
  display:flex; flex-direction:column;
  padding:96px 8vw 40px;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-8px);
  transition:opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s linear .35s;
}
.mobile-menu.is-open{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); transition:opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s linear 0s; }
.mobile-menu .mm-logo{ display:none; }
@media (max-width:820px){
  .mobile-menu .mm-logo{ display:block; width:min(34vw,150px); margin:0 auto 34px; opacity:.92; }
}
[data-theme="obsidian"] .mobile-menu .mm-logo{ filter:invert(1) sepia(.12) saturate(.6); }
[data-theme="ink"] .mobile-menu .mm-logo{ filter:none; }
.mobile-menu nav{ display:flex; flex-direction:column; gap:6px; }
.mobile-menu nav a{
  font-family:var(--font-display); font-weight:500; font-style:italic; font-size:clamp(28px,9vw,44px);
  padding:14px 0; border-bottom:1px solid var(--border); opacity:.82; transition:opacity .25s ease, transform .25s ease;
}
.mobile-menu nav a.current{ opacity:1; }
.mobile-menu nav a:active{ opacity:1; transform:translateX(4px); }
.mobile-menu .mobile-menu-foot{ margin-top:auto; display:flex; flex-direction:column; gap:14px; }
.mobile-menu .mobile-menu-foot .doorbell{ justify-content:center; width:100%; }
html.menu-open, html.menu-open body{ overflow:hidden; }

@media (max-width:820px){
  .nav-toggle{ display:flex; }
}
@media (min-width:821px){
  .mobile-menu{ display:none; }
}
@media (max-width:480px){
  header.site-nav{ padding:14px 5vw; }
  header.site-nav .mark{ font-size:14px; }
}
.cta-pill{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--border); padding:9px 16px; border-radius:100px; color:var(--fg);
  display:flex; align-items:center; gap:8px; white-space:nowrap; flex-shrink:0;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, background .3s ease, color .3s ease;
}
.cta-pill:hover{ transform:translateY(-2px); box-shadow:0 10px 24px var(--shadow-soft); background:var(--fg); color:var(--bg); }
.cta-pill:hover::before{ background:var(--bg); }
.cta-pill::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--fg); transition:background .3s ease, transform .3s ease; }
.cta-pill:hover::before{ transform:scale(1.3); }
@media (max-width:820px){
  /* the hamburger drawer now carries full site nav, so the inline nav bar (incl.
     the always-visible Contact link) steps aside to leave room for the CTA + toggle */
  header.site-nav nav.links{ display:none; }
}

/* theme toggle switch — monochrome, no accent color */
.theme-toggle{
  display:flex; align-items:center; gap:9px; background:none; border:none; cursor:pointer;
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-muted);
}
.theme-toggle .tt-track{
  width:40px; height:22px; border-radius:100px; background:var(--surface); border:1px solid var(--border);
  position:relative; transition:background .3s ease, border-color .3s ease;
}
.theme-toggle:hover .tt-track{ border-color:var(--fg); box-shadow:0 0 0 3px var(--shadow-soft); }
.theme-toggle .tt-thumb{
  position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--fg);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.theme-toggle.is-ink .tt-thumb{ transform:translateX(17px); }
.theme-toggle .tt-label{ opacity:.5; transition:opacity .3s ease; }
.theme-toggle .tt-label.a{ opacity:1; }
.theme-toggle.is-ink .tt-label.a{ opacity:.4; }
.theme-toggle.is-ink .tt-label.b{ opacity:1; }
@media (max-width:560px){ .theme-toggle .tt-label{ display:none; } }
@media (max-width:480px){
  header.site-nav .row{ gap:8px; }
  header.site-nav .right{ gap:8px; }
  header.site-nav .mark{ font-size:13px; }
  .cta-pill{ padding:8px 12px; font-size:9px; }
  .theme-toggle .tt-track{ width:34px; height:20px; }
  .theme-toggle .tt-thumb{ width:14px; height:14px; }
  .theme-toggle.is-ink .tt-thumb{ transform:translateX(14px); }
}
@media (max-width:400px){
  header.site-nav .mark{ font-size:11.5px; letter-spacing:0; }
  .cta-pill span{ display:none; }
  .cta-pill{ padding:9px; }
}

/* ===================== PAGE HERO (interior pages) ===================== */
.page-hero{ padding:170px 6vw 90px; background:var(--bg); }
@media (max-width:760px){ .page-hero{ padding:118px 6vw 60px; } }
.page-hero .eyebrow{ margin-bottom:16px; }
.page-hero h1{
  font-family:var(--font-display); font-weight:600; font-style:italic;
  font-size:clamp(34px,6vw,72px); line-height:1.05; max-width:900px; color:var(--fg);
}
.page-hero p.lead{ margin-top:22px; max-width:560px; font-size:16.5px; color:var(--fg-muted); line-height:1.6; opacity:.85; }
.breadcrumb{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-muted); opacity:.6; margin-bottom:20px; }
.breadcrumb a{ opacity:1; text-decoration:underline; text-underline-offset:3px; }

/* ===================== HERO / SHUTTER (home) ===================== */
#hero{ position:relative; height:100vh; height:100svh; width:100%; overflow:hidden; background:var(--bg); display:flex; align-items:center; justify-content:center; }
.drum{ position:absolute; top:0; left:0; right:0; height:64px; z-index:40; background:linear-gradient(180deg,var(--surface),var(--bg)); box-shadow:0 6px 18px var(--shadow-soft); }
#hero-content{ position:relative; z-index:10; text-align:center; padding:0 24px; width:100%; pointer-events:none; }
#hero-content.active{ pointer-events:auto; }
#hero-content .eyebrow{ margin-bottom:14px; display:block; }
#hero-content .gate-hint{ margin-top:2px; margin-bottom:16px; opacity:.55; }
#hero-title-mini{
  font-family:var(--font-display); font-weight:600; font-style:italic; color:var(--fg);
  font-size:clamp(26px, 4.4vw, 46px); line-height:1; margin-bottom:8px;
}
#hero-title-mini .amp{ font-style:normal; opacity:.55; }

/* ===================== ENTRY GATE ===================== */
.gate{
  display:grid; grid-template-columns:1fr 1fr; gap:2px;
  width:100%; max-width:1300px; margin:0 auto; height:min(52vh, 440px);
  border-radius:14px; overflow:hidden;
}
.gate-panel{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
  padding:30px; background:var(--bg); color:var(--fg); overflow:hidden; isolation:isolate;
  text-align:left; transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}
.gate-panel:hover{ transform:scale(1.018); box-shadow:0 18px 46px var(--shadow-strong); z-index:3; }
.gate-panel .gate-bg{ position:absolute; inset:0; z-index:0; transition:transform .5s ease; }
.gate-panel:hover .gate-bg{ transform:scale(1.06); }
.gate-panel .gate-label{ position:relative; z-index:2; font-family:var(--font-display); font-style:italic; font-weight:600; font-size:clamp(19px,2.4vw,29px); line-height:1.15; transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.gate-panel:hover .gate-label{ transform:translateY(-4px); }
.gate-panel .gate-sub{ position:relative; z-index:2; font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; opacity:.62; margin-top:10px; transition:opacity .35s ease; }
.gate-panel:hover .gate-sub{ opacity:.9; }
.gate-panel .gate-arrow{ position:absolute; top:24px; right:24px; z-index:2; font-family:var(--font-mono); font-size:14px; opacity:.7; transition:transform .4s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
.gate-panel:hover .gate-arrow{ transform:translate(4px,-4px) scale(1.15); opacity:1; }

/* fixed palette per panel — independent of the site-wide toggle, kept in step with the inverted tokens */
.gate-left{ --bg:#FFFFFF; --surface:#F3F3F3; --border:#DADADA; --fg:#101010; --fg-muted:#333333; }
.gate-right{ --bg:#F6F2E9; --surface:#ECE5D5; --border:#DCD2B8; --fg:#18140E; --fg-muted:#3C3626; }

/* left panel bg: minimal drifting technical grid (Ink + Paper) */
.gate-bg-grid{
  background-image:
    repeating-linear-gradient(0deg, var(--border) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, var(--border) 0 1px, transparent 1px 42px);
  opacity:.65; animation:gridDrift 16s linear infinite;
}
@keyframes gridDrift{ from{ background-position:0 0, 0 0; } to{ background-position:0 420px, 420px 0; } }

/* right panel bg: slow warm bokeh drift (Obsidian + Ivory) */
.gate-bg-bokeh{ overflow:hidden; }
.gate-bg-bokeh span{ position:absolute; border-radius:50%; filter:blur(46px); opacity:.16; background:var(--fg); }
.gate-bg-bokeh span:nth-child(1){ width:180px; height:180px; top:-40px; left:10%; animation:bokeh1 11s ease-in-out infinite; }
.gate-bg-bokeh span:nth-child(2){ width:130px; height:130px; bottom:-30px; right:15%; animation:bokeh2 13s ease-in-out infinite; }
.gate-bg-bokeh span:nth-child(3){ width:90px; height:90px; top:40%; right:35%; animation:bokeh3 9s ease-in-out infinite; }
@keyframes bokeh1{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(24px,30px); } }
@keyframes bokeh2{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-20px,-22px); } }
@keyframes bokeh3{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(16px,-18px); } }

@media (max-width:760px){
  .gate{ grid-template-columns:1fr; height:auto; gap:2px; }
  .gate-panel{ min-height:180px; }
  #hero{ height:auto; min-height:100vh; min-height:100svh; padding:96px 0 28px; }
  #hero-content{ padding:0 6vw; }
  .plaque{ display:none; }
  .open-sign{ top:auto; bottom:calc(100% - 84px); right:6vw; font-size:13px; padding:8px 14px; }
}
@media (max-width:420px){
  #hero-title-mini{ font-size:clamp(22px,8vw,30px); }
}
@media (prefers-reduced-motion: reduce){
  .gate-bg-grid, .gate-bg-bokeh span{ animation:none !important; }
}
.plaque{ position:absolute; z-index:10; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--fg-muted); opacity:.6; text-transform:uppercase; }
.plaque.bl{ bottom:34px; left:28px; } .plaque.br{ bottom:34px; right:28px; text-align:right; }
.open-sign{
  position:absolute; top:96px; right:8%; z-index:33;
  font-family:var(--font-mono); font-weight:700; font-size:16px; letter-spacing:.15em;
  color:var(--fg); background:var(--surface); border:1px solid var(--border);
  padding:10px 18px; border-radius:4px; transform:rotate(-3deg);
  box-shadow:0 0 22px color-mix(in srgb, var(--fg) 18%, transparent);
  opacity:0;
}
#shutter{
  position:absolute; inset:0; z-index:30; transform-origin:top center;
  background-image:
    repeating-linear-gradient(180deg, color-mix(in srgb, var(--surface) 100%, black 5%) 0 10px, var(--surface) 10px 12px),
    linear-gradient(180deg, var(--surface), var(--bg));
  box-shadow: inset 0 -50px 70px var(--shadow-strong);
}
#shutter::before{ content:''; position:absolute; inset:0; background-image: repeating-linear-gradient(90deg, rgba(0,0,0,0.035) 0 2px, transparent 2px 64px); }

/* ===================== LIGHT BREAK SECTION (inverted: fg becomes bg) ===================== */
.light-section{ background:var(--fg); color:var(--bg); position:relative; z-index:40; }
.light-section .muted{ color:var(--bg); opacity:.65; }

/* ===================== STATEMENT ===================== */
#statement{ padding:150px 8vw 90px; }
@media (max-width:760px){ #statement{ padding:90px 7vw 60px; } }
.statement-copy{ max-width:1000px; margin:0 auto; }
.statement-copy p{ font-family:var(--font-display); font-weight:500; font-style:italic; font-size:clamp(24px,4.2vw,52px); line-height:1.18; }
.statement-copy p + p{ margin-top:20px; }
.statement-copy .accent{ font-style:normal; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; }
.statement-note{ margin-top:42px; max-width:480px; font-size:15.5px; line-height:1.6; }
.decals{ margin-top:60px; display:flex; flex-wrap:wrap; gap:10px; }
.decal{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; border:1px solid currentColor; opacity:0.6; padding:8px 15px; border-radius:100px; transition:opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1), background .3s ease, color .3s ease; cursor:default; }
.decal:hover{ opacity:1; transform:translateY(-3px); background:var(--bg); color:var(--fg); }

/* ===================== CAPABILITY / MENU LIST ===================== */
.section-head{ padding:0 6vw 56px; max-width:1400px; margin:0 auto; }
.section-head h2{ font-family:var(--font-display); font-weight:600; font-style:italic; font-size:clamp(28px,4.4vw,48px); line-height:1.08; }
.section-head p{ margin-top:16px; max-width:440px; font-size:15px; color:var(--fg-muted); opacity:.85; }
.section-head p a{ text-decoration:underline; text-underline-offset:3px; opacity:1; color:var(--fg); }

#capability-list, #tag-wrap{ max-width:1400px; margin:0 auto; }
.cap-row{ border-top:1px solid var(--border); }
.cap-row:last-child{ border-bottom:1px solid var(--border); }
.cap-row{ transition:background .35s ease; }
.cap-row-head{ display:flex; align-items:baseline; gap:22px; padding:26px 6vw; cursor:pointer; transition:padding-left .35s cubic-bezier(.2,.8,.2,1); }
.cap-row-head:hover{ padding-left:calc(6vw + 10px); }
.cap-row:hover{ background:var(--surface); }
.cap-row-head .idx{ font-family:var(--font-mono); font-size:12px; color:var(--fg-muted); opacity:.6; min-width:60px; transition:opacity .3s ease, transform .3s ease; }
.cap-row-head:hover .idx{ opacity:1; transform:translateX(2px); }
.cap-row-head h3{ font-family:var(--font-display); font-weight:500; font-size:clamp(22px,3.6vw,38px); flex:1; opacity:.82; transition:opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
.cap-row-head:hover h3{ transform:translateX(4px); }
.cap-row-head .tag-label{ font-family:var(--font-mono); font-size:10.5px; color:var(--fg-muted); opacity:.55; letter-spacing:.1em; text-transform:uppercase; }
.cap-row-head .toggle{ font-family:var(--font-mono); font-size:18px; color:var(--fg-muted); opacity:.6; transition:transform .4s cubic-bezier(.34,1.56,.64,1); display:inline-block; }
.cap-row-head:hover .toggle{ transform:rotate(90deg); opacity:1; }
.cap-row.active .toggle{ transform:rotate(45deg); opacity:1; }
.cap-row.active .cap-row-head h3{ opacity:1; }
.cap-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s cubic-bezier(.2,.8,.2,1); }
.cap-row.active .cap-body{ grid-template-rows:1fr; }
.cap-body-inner{ overflow:hidden; }
.cap-detail{ padding:4px 6vw 34px; display:flex; gap:36px; flex-wrap:wrap; opacity:0; transform:translateY(-8px); transition:opacity .45s ease .08s, transform .45s cubic-bezier(.2,.8,.2,1) .08s; }
.cap-row.active .cap-detail{ opacity:1; transform:translateY(0); }
.cap-detail p{ flex:1; min-width:240px; font-size:15.5px; color:var(--fg-muted); opacity:.9; line-height:1.6; }
.cap-detail ul{ flex:1; min-width:220px; list-style:none; font-family:var(--font-mono); font-size:12px; color:var(--fg-muted); opacity:.8; display:grid; gap:8px; }
.cap-detail ul li{ transition:transform .3s ease, opacity .3s ease; }
.cap-detail ul li:hover{ transform:translateX(4px); opacity:1; }
.cap-detail ul li::before{ content:'— '; opacity:.6; }

@media (max-width:640px){
  .cap-row-head{ flex-wrap:wrap; row-gap:6px; padding:22px 6vw; }
  .cap-row-head:hover{ padding-left:6vw; }
  .cap-row-head .idx{ min-width:auto; order:1; }
  .cap-row-head .toggle{ order:2; margin-left:auto; }
  .cap-row-head h3{ order:3; flex-basis:100%; font-size:clamp(20px,7vw,26px); }
  .cap-row-head .tag-label{ order:4; flex-basis:100%; opacity:.5; }
  .cap-detail{ gap:22px; padding:0 6vw 28px; }
}

/* ===================== RECEIPT ===================== */
#receipt-section{ padding:130px 0 150px; display:flex; flex-direction:column; align-items:center; }
@media (max-width:760px){ #receipt-section{ padding:70px 0 90px; } }
.receipt-head{ text-align:center; margin-bottom:56px; padding:0 6vw; }
.receipt-head h2{ font-family:var(--font-display); font-weight:600; font-style:italic; font-size:clamp(26px,4vw,44px); }
.receipt-head p{ margin-top:12px; color:var(--fg-muted); opacity:.85; font-size:15px; }
#receipt{
  width:min(92vw, 420px); background:var(--fg); color:var(--bg);
  padding:38px 30px 44px; font-family:var(--font-mono); font-size:12.5px;
  box-shadow:0 22px 50px var(--shadow-strong);
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
  clip-path: polygon(
    0% 8px, 4% 0%, 8% 8px, 12% 0%, 16% 8px, 20% 0%, 24% 8px, 28% 0%, 32% 8px, 36% 0%, 40% 8px, 44% 0%, 48% 8px, 52% 0%, 56% 8px, 60% 0%, 64% 8px, 68% 0%, 72% 8px, 76% 0%, 80% 8px, 84% 0%, 88% 8px, 92% 0%, 96% 8px, 100% 0%,
    100% calc(100% - 8px), 96% 100%, 92% calc(100% - 8px), 88% 100%, 84% calc(100% - 8px), 80% 100%, 76% calc(100% - 8px), 72% 100%, 68% calc(100% - 8px), 64% 100%, 60% calc(100% - 8px), 56% 100%, 52% calc(100% - 8px), 48% 100%, 44% calc(100% - 8px), 40% 100%, 36% calc(100% - 8px), 32% 100%, 28% calc(100% - 8px), 24% 100%, 20% calc(100% - 8px), 16% 100%, 12% calc(100% - 8px), 8% 100%, 4% calc(100% - 8px), 0% 100%
  );
}
#receipt:hover{ transform:translateY(-4px); }
#receipt .rline{ text-align:center; color:var(--bg); opacity:.55; letter-spacing:.14em; text-transform:uppercase; font-size:10px; }
#receipt .rrule{ border-top:1px dashed var(--border); margin:16px 0; }
.rec-item{ margin-bottom:22px; opacity:0; transform:translateY(10px); transition:opacity .55s ease, transform .55s ease; }
.rec-item.printed{ opacity:1; transform:translateY(0); }
.rec-item .rhead{ display:flex; justify-content:space-between; letter-spacing:.06em; text-transform:uppercase; }
.rec-item .rhead .stage-name{ font-family:var(--font-display); font-weight:600; font-style:italic; font-size:15px; text-transform:none; }
.rec-item .rnum{ opacity:.5; }
.rec-item p{ margin-top:6px; font-size:12.5px; color:var(--bg); opacity:.6; line-height:1.5; }
#receipt .rtotal{ display:flex; justify-content:space-between; margin-top:24px; padding-top:14px; border-top:1px solid var(--bg); font-weight:700; letter-spacing:.08em; text-transform:uppercase; }

/* ===================== PRICE TAGS ===================== */
#pricing-section{ padding:130px 6vw 150px; }
.tags{ display:flex; flex-wrap:wrap; gap:46px; justify-content:center; perspective:1400px; }
.tag{ width:250px; height:310px; position:relative; cursor:pointer; transition:transform .4s cubic-bezier(.2,.8,.2,1); }
@media (max-width:760px){
  #pricing-section{ padding:70px 6vw 90px; }
  .tags{ gap:30px; }
  .tag{ width:min(84vw,280px); height:330px; }
}
.tag:hover{ transform:translateY(-6px) rotate(-1deg); }
.tag::before{ content:''; position:absolute; top:-30px; left:50%; width:1px; height:30px; background:var(--border); transition:height .4s ease; }
.tag:hover::before{ height:36px; }
.tag-inner{ position:relative; width:100%; height:100%; transition:transform .6s cubic-bezier(.2,.8,.2,1); transform-style:preserve-3d; }
.tag.flipped .tag-inner{ transform:rotateY(180deg); }
.tag-face{ position:absolute; inset:0; backface-visibility:hidden; border-radius:8px; padding:28px 22px; display:flex; flex-direction:column; box-shadow:0 16px 30px var(--shadow-soft); transition:box-shadow .4s ease; }
.tag:hover .tag-face{ box-shadow:0 24px 44px var(--shadow-strong); }
.tag-face .flip-hint{ transition:transform .3s ease; }
.tag:hover .flip-hint{ transform:translateX(4px); }
.tag-face::before{ content:''; position:absolute; top:14px; left:50%; transform:translateX(-50%); width:10px; height:10px; border-radius:50%; background:var(--bg); box-shadow:inset 0 0 0 2px var(--fg); }
.tag-face.front{ background:var(--fg); color:var(--bg); border:1px solid transparent; }
.tag.featured .tag-face.front{ border:2px solid var(--bg); transform:scale(1.03); }
.tag-face .badge{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; opacity:.6; margin-bottom:auto; }
.tag-face h3{ font-family:var(--font-display); font-weight:600; font-style:italic; font-size:21px; line-height:1.15; margin-top:30px; }
.tag-face .amt{ margin-top:14px; font-family:var(--font-mono); font-weight:700; font-size:15px; }
.tag-face .flip-hint{ margin-top:auto; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; opacity:.55; }
.tag-face.back{ transform:rotateY(180deg); background:var(--surface); color:var(--fg); border:1px solid var(--border); }
.tag-face.back::before{ background:var(--fg); box-shadow:inset 0 0 0 2px var(--surface); }
.tag-face.back ul{ list-style:none; font-family:var(--font-mono); font-size:10.5px; color:var(--fg-muted); opacity:.85; display:grid; gap:7px; margin-top:26px; }
.tag-face.back ul li::before{ content:'— '; opacity:.55; }
.tag-face.back a{ margin-top:auto; font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; text-decoration:underline; text-underline-offset:3px; align-self:flex-start; }
.price-note{ text-align:center; margin-top:56px; font-family:var(--font-mono); font-size:10.5px; color:var(--fg-muted); opacity:.6; max-width:600px; margin-left:auto; margin-right:auto; line-height:1.7; }

/* ===================== FREE STRIP (inverted block, no color) ===================== */
#free-strip{ background:var(--fg); color:var(--bg); position:relative; z-index:40; padding:70px 6vw; text-align:center; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
@media (max-width:760px){ #free-strip{ padding:52px 7vw; } }
#free-strip h2{ font-family:var(--font-display); font-weight:600; font-style:italic; font-size:clamp(24px,4vw,42px); max-width:820px; margin:0 auto; line-height:1.18; }
#free-strip .btn{ display:inline-block; margin-top:26px; font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; background:var(--bg); color:var(--fg); padding:15px 26px; border-radius:100px; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, letter-spacing .35s ease; }
#free-strip .btn:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 14px 30px var(--shadow-strong); letter-spacing:.16em; }

/* ===================== FINALE / CONTACT PANEL ===================== */
#finale{ background:var(--bg); position:relative; z-index:40; padding:140px 6vw 70px; text-align:center; }
@media (max-width:760px){ #finale{ padding:80px 7vw 56px; } }
@media (max-width:480px){ .doorbell{ width:100%; justify-content:center; } .doorbell-row{ flex-direction:column; } }
#finale-shutter{ width:min(70vw,320px); height:70px; margin:0 auto 44px; background-image: repeating-linear-gradient(180deg, var(--surface) 0 8px, var(--border) 8px 10px); border-radius:4px; position:relative; }
#finale-shutter::after{ content:'&'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-style:italic; font-weight:700; font-size:32px; color:var(--fg); opacity:.8; }
#finale h2{ font-family:var(--font-display); font-weight:600; font-style:italic; font-size:clamp(26px,4.4vw,50px); max-width:760px; margin:0 auto; line-height:1.18; }
#finale .doorbell-row{ display:flex; gap:16px; justify-content:center; margin-top:40px; flex-wrap:wrap; }
.doorbell{ display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; padding:16px 24px; border-radius:100px; border:1px solid var(--border); transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, background .35s ease, color .35s ease, border-color .35s ease; }
.doorbell::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--fg); transition:transform .4s cubic-bezier(.4,0,.2,1), background .35s ease; }
.doorbell:hover{ transform:translateY(-3px); box-shadow:0 14px 30px var(--shadow-soft); }
.doorbell:hover::before{ transform:scale(1.4); animation:ringPulse 1.1s ease-in-out infinite; }
.doorbell.primary{ background:var(--fg); color:var(--bg); border-color:var(--fg); }
.doorbell.primary::before{ background:var(--bg); }
.doorbell.primary:hover{ box-shadow:0 14px 34px var(--shadow-strong); }
.doorbell:not(.primary):hover{ background:var(--fg); color:var(--bg); }
.doorbell:not(.primary):hover::before{ background:var(--bg); }
@keyframes ringPulse{ 0%,100%{ box-shadow:0 0 0 0 var(--shadow-soft); } 50%{ box-shadow:0 0 0 5px var(--shadow-soft); } }

/* ===================== CONTACT PAGE ===================== */
.contact-grid{ max-width:1100px; margin:0 auto; padding:0 6vw 140px; display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; gap:24px; padding-bottom:80px; } }
.contact-card{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:38px; transition:box-shadow .4s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
@media (max-width:480px){ .contact-card, .categories-card{ padding:26px 24px; } }
.contact-card:hover{ box-shadow:0 20px 40px var(--shadow-soft); transform:translateY(-3px); }
.contact-card h3{ font-family:var(--font-display); font-weight:600; font-style:italic; font-size:22px; margin-bottom:20px; }
.contact-line{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:6px 14px; padding:16px 0; border-top:1px solid var(--border); font-family:var(--font-mono); font-size:12.5px; letter-spacing:.04em; transition:padding-left .3s ease; }
.contact-line:hover{ padding-left:6px; }
.contact-line:first-of-type{ border-top:none; }
.contact-line span.label{ color:var(--fg-muted); opacity:.6; text-transform:uppercase; letter-spacing:.12em; font-size:10.5px; }

/* ---- MOBILE ONLY: simplified contact list — mobile shows just Call + WhatsApp, desktop is untouched ---- */
.contact-card .cline-mobile{ display:none; }
@media (max-width:820px){
  .contact-card .cline-desktop{ display:none; }
  .contact-card .contact-line.cline-mobile{ display:flex; border-top:none; }
  .contact-card .doorbell.cline-mobile{ display:flex; }
}
.contact-line a{ text-decoration:underline; text-underline-offset:3px; display:inline-block; transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.contact-line a:hover{ transform:translateX(4px); }
.categories-card{ background:var(--fg); color:var(--bg); border-radius:10px; padding:38px; transition:box-shadow .4s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
.categories-card:hover{ box-shadow:0 20px 40px var(--shadow-strong); transform:translateY(-3px); }
.categories-card ul li{ transition:transform .3s ease; }
.categories-card ul li:hover{ transform:translateX(4px); }
.categories-card h3{ font-family:var(--font-display); font-weight:600; font-style:italic; font-size:20px; margin-bottom:18px; }
.categories-card ul{ list-style:none; font-family:var(--font-mono); font-size:12px; display:grid; gap:10px; }
.categories-card ul li::before{ content:'— '; opacity:.55; }
.categories-card p{ color:var(--bg); opacity:.65; }

/* ===================== FOOTER ===================== */
footer.site-footer{ border-top:1px solid var(--border); padding:32px 6vw; display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-family:var(--font-mono); font-size:10.5px; color:var(--fg-muted); opacity:.65; letter-spacing:.06em; background:var(--bg); position:relative; z-index:40; }
footer.site-footer a{ opacity:1; text-decoration:underline; text-underline-offset:3px; display:inline-block; transition:transform .3s cubic-bezier(.2,.8,.2,1), text-underline-offset .3s ease; }
footer.site-footer a:hover{ transform:translateY(-2px); text-underline-offset:5px; }

.reveal{ opacity:0; transform:translateY(24px); }

/* ===================== CUSTOM CURSOR ===================== */
html.has-custom-cursor, html.has-custom-cursor a, html.has-custom-cursor button,
html.has-custom-cursor .cap-row-head, html.has-custom-cursor .tag, html.has-custom-cursor .gate-panel{
  cursor:none;
}
.cursor-dot{
  position:fixed; top:0; left:0; width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  border-radius:50%; background:var(--fg); pointer-events:none; z-index:9999;
  will-change:transform; transition:width .25s cubic-bezier(.2,.8,.2,1), height .25s cubic-bezier(.2,.8,.2,1), background .3s ease;
}
.cursor-dot.is-active{ width:16px; height:16px; margin:-8px 0 0 -8px; background:transparent; box-shadow:inset 0 0 0 1.5px var(--fg); }
.cursor-aura{
  position:fixed; top:0; left:0; width:130px; height:130px; margin:-65px 0 0 -65px;
  pointer-events:none; z-index:9998; will-change:transform;
}
.cursor-aura-inner{
  width:100%; height:100%; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--fg) 22%, transparent) 0%, transparent 68%);
  filter:blur(14px); opacity:.18;
  animation:auraWobble 2.4s ease-in-out infinite;
}
@keyframes auraWobble{
  0%,100%{ transform:scale(1,1) rotate(0deg); }
  33%{ transform:scale(1.1,0.9) rotate(8deg); }
  66%{ transform:scale(0.92,1.08) rotate(-8deg); }
}
@media (hover:none), (pointer:coarse){
  .cursor-dot, .cursor-aura, .logo-watermark{ display:none !important; }
  html.has-custom-cursor, html.has-custom-cursor a, html.has-custom-cursor button{ cursor:auto; }
}
@media (prefers-reduced-motion: reduce){
  .cursor-aura-inner{ animation:none !important; }
}

/* ===================== HIDDEN LOGO WATERMARK ===================== */
.logo-watermark{
  position:fixed; inset:0; z-index:32; pointer-events:none;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  opacity:1; transition:opacity .5s ease;
  -webkit-mask-image: radial-gradient(circle 190px at var(--mx, -9999px) var(--my, -9999px), black 0%, transparent 78%);
  mask-image: radial-gradient(circle 190px at var(--mx, -9999px) var(--my, -9999px), black 0%, transparent 78%);
}
.logo-watermark img{
  width:min(42vw, 620px); max-width:none; opacity:.5;
  transition:opacity .4s ease, filter .4s ease;
}
/* Obsidian is dark now, so the mark inverts to read in warm ivory instead of vanishing into the black */
[data-theme="obsidian"] .logo-watermark img{ filter:invert(1) sepia(.12) saturate(.6); opacity:.28; }
[data-theme="ink"] .logo-watermark img{ filter:none; opacity:.5; }

/* while the shutter is down/rolling: mark is statically visible, no mouse hover needed */
html.watermark-static .logo-watermark{
  -webkit-mask-image:none; mask-image:none;
}

/* once the entry gate (choice page) is live, the mark disappears entirely */
html.watermark-hidden .logo-watermark{ opacity:0; }

@media (prefers-reduced-motion: reduce){
  #shutter{ transform:scaleY(0) !important; }
  .open-sign{ opacity:1 !important; }
}