/* Samantic Lab — v13
   Three fonts, one job each. White ground, black type, purple blocks,
   green only where a tap happens. One radius (4px), one border (2px),
   one "shadow": the solid offset block behind a button.
   Read samanticlab-direction.md before changing any of this. */

@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/unbounded-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/archivo-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/golos-text-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/golos-text-latin-600-normal.woff2") format("woff2"); }

:root {
  --paper: #ffffff;
  --ink: #0b0b0f;
  --purple: #6d2ee6;      /* blocks, heavy sections, the block behind a button */
  --green: #c6ff3d;       /* only where a tap happens */
  --mute: #4a3f6b;        /* second text on white: ink tinted toward purple */
  --mute-on-purple: #e6dcff;
  --mute-on-ink: #c9c2d6;
  --line: #0b0b0f;
  --sig: "Unbounded", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --sub: "Archivo", "Arial Narrow", Arial, sans-serif;
  --text: "Golos Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --r: 4px;
  --bw: 2px;
  --off: 6px;             /* the block offset */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px; --s16: 64px; --s24: 96px;
  --wrap: 1280px;
  --gutter: 20px;
  --nav-h: 64px;
  color-scheme: light;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--text); font-size: 17px; line-height: 1.6;
  font-feature-settings: "tnum" 1; overflow-x: hidden; }
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: .18em; text-decoration-color: var(--purple); }
a:hover { text-decoration-color: var(--green); }
button { font: inherit; color: inherit; }
::selection { background: var(--green); color: var(--ink); }
html { caret-color: var(--purple); scrollbar-color: var(--purple) #efeaff; }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; border-radius: var(--r); }
.skip { position: absolute; left: var(--s4); top: -100px; z-index: 1000; background: var(--green); color: var(--ink); padding: var(--s3) var(--s4); border: var(--bw) solid var(--ink); border-radius: var(--r); font-family: var(--sub); }
.skip:focus { top: var(--s4); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }

/* ---------- type ---------- */
h1, h2, h3, .sig { font-family: var(--sig); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.2rem + 5.4vw, 5.25rem); }
h2 { font-size: clamp(1.6rem, 1rem + 3.2vw, 3.25rem); }
h3 { font-size: clamp(1.15rem, 1rem + 1vw, 1.6rem); line-height: 1.15; }
h1 em, h2 em { font-style: normal; color: var(--purple); }
.lead { font-family: var(--sub); font-weight: 700; font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem); line-height: 1.35; letter-spacing: -0.01em; margin: 0; text-wrap: pretty; }
p { margin: 0; max-width: 62ch; text-wrap: pretty; }
p + p { margin-top: var(--s4); }
.mute { color: var(--mute); }
.on-purple .mute { color: var(--mute-on-purple); }
.on-ink .mute { color: var(--mute-on-ink); }
.sub { font-family: var(--sub); font-weight: 700; }
strong, b { font-weight: 600; }
.sub strong, .lead strong { font-weight: 700; }
.price { font-family: var(--sig); font-size: clamp(1.25rem, 1rem + 1.4vw, 2rem); letter-spacing: -0.02em; white-space: nowrap; }

/* ---------- layout ---------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.band { padding-block: var(--s16); }
.band.tight { padding-block: var(--s12); }
.band.roomy { padding-block: var(--s24); }
.on-purple { background: var(--purple); color: #fff; --line: #fff; }
.on-ink { background: var(--ink); color: #fff; --line: #fff; }
.on-purple a, .on-ink a { text-decoration-color: var(--green); }
.on-purple a:hover, .on-ink a:hover { text-decoration-color: #fff; }
.on-purple ::selection, .on-ink ::selection { background: var(--green); color: var(--ink); }
.on-purple :focus-visible, .on-ink :focus-visible { outline-color: var(--green); }
.on-purple h1 em, .on-purple h2 em, .on-ink h1 em, .on-ink h2 em { color: var(--green); }
.grid { display: grid; gap: var(--s8); }
.split { display: grid; gap: var(--s8); align-items: start; }
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(12, 1fr); gap: var(--s8) var(--s12); }
  .split.w7 > :first-child { grid-column: 1 / span 7; } .split.w7 > :last-child { grid-column: 8 / span 5; }
  .split.w5 > :first-child { grid-column: 1 / span 5; } .split.w5 > :last-child { grid-column: 6 / span 7; }
  .split.w6 > :first-child { grid-column: 1 / span 6; } .split.w6 > :last-child { grid-column: 7 / span 6; }
  .split.w4 > :first-child { grid-column: 1 / span 4; } .split.w4 > :last-child { grid-column: 5 / span 8; }
  .split.w8 > :first-child { grid-column: 1 / span 8; } .split.w8 > :last-child { grid-column: 9 / span 4; }
  .split > .sticky { position: sticky; top: calc(var(--nav-h) + 24px); }
}
.hair { border-top: var(--bw) solid var(--line); }
.hairs > * { border-top: var(--bw) solid var(--line); padding-block: var(--s6); }
.hairs > :last-child { border-bottom: var(--bw) solid var(--line); }

/* ---------- images ---------- */
.ph { position: relative; border-radius: var(--r); overflow: hidden; background: #efeaff; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph.r43 { aspect-ratio: 4 / 3; } .ph.r32 { aspect-ratio: 3 / 2; } .ph.r11 { aspect-ratio: 1; } .ph.r45 { aspect-ratio: 4 / 5; } .ph.r169 { aspect-ratio: 16 / 9; }
.ph.tall { aspect-ratio: 3 / 4; }
@media (min-width: 900px) { .ph.tall { aspect-ratio: 4 / 5; } }
.ph.bordered { border: var(--bw) solid var(--ink); }

/* ---------- buttons — square corners, sub-heading font, words only ----------
   The solid block behind the button is the one "shadow" on the site. It is
   Sam's pick, kept on purpose against the default rule. */
.btn { position: relative; display: inline-flex; align-items: center; gap: var(--s2); min-height: 52px; padding: 14px 22px;
  font-family: var(--sub); font-weight: 700; font-size: 1.05rem; line-height: 1.1; letter-spacing: -0.005em; text-decoration: none;
  border: var(--bw) solid var(--ink); border-radius: var(--r); background: var(--ink); color: #fff; cursor: pointer;
  --block: var(--purple); box-shadow: var(--off) var(--off) 0 0 var(--block);
  transition: transform 120ms var(--ease), box-shadow 120ms var(--ease), background-color 120ms var(--ease), color 120ms var(--ease); }
.btn:hover { transform: translate(2px, 2px); box-shadow: calc(var(--off) - 2px) calc(var(--off) - 2px) 0 0 var(--block); }
.btn:active { transform: translate(var(--off), var(--off)); box-shadow: 0 0 0 0 var(--block); }
.btn.go { background: var(--green); color: var(--ink); --block: var(--ink); }   /* the thing you tap */
.btn.paper { background: var(--paper); color: var(--ink); --block: var(--purple); }
.btn.wa { --block: var(--ink); }
.on-purple .btn { --block: var(--green); }
.on-purple .btn.go { --block: var(--ink); }
.on-ink .btn { --block: var(--purple); }
.on-ink .btn.go { --block: var(--purple); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .5; pointer-events: none; }
.btn.is-busy { pointer-events: none; }
.btn.is-busy::before { content: "…"; }
.btn-row { display: flex; flex-wrap: wrap; gap: calc(var(--s4) + var(--off)) var(--s6); align-items: center; }
.link { font-family: var(--sub); font-weight: 700; text-decoration-thickness: 3px; }
.link svg { width: 18px; height: 18px; display: inline-block; vertical-align: -3px; margin-left: 4px; }

/* ---------- nav ---------- */
.site-nav { position: sticky; top: 0; z-index: 100; background: var(--paper); border-bottom: var(--bw) solid var(--ink); }
.site-nav .wrap { display: flex; align-items: center; justify-content: space-between; min-height: var(--nav-h); gap: var(--s4); }
.wordmark { font-family: var(--sig); font-size: 1.05rem; letter-spacing: -0.02em; text-decoration: none; display: inline-flex; align-items: center; gap: var(--s2); white-space: nowrap; }
.wordmark img { display: block; height: 34px; width: auto; }
.site-foot .wordmark img { height: 26px; }
.nav-links { display: none; list-style: none; margin: 0; padding: 0; gap: var(--s6); align-items: center; }
.nav-links a { font-family: var(--sub); font-weight: 700; font-size: .95rem; text-decoration: none; padding: var(--s2) 0; border-bottom: 3px solid transparent; }
.nav-links a:hover { border-bottom-color: var(--purple); }
.nav-links a[aria-current="page"] { border-bottom-color: var(--green); }
.nav-links .cta a { border: var(--bw) solid var(--ink); border-radius: var(--r); padding: 10px 14px; background: var(--green); }
.nav-links .cta a:hover { background: var(--ink); color: #fff; }
.menu-btn { display: inline-flex; align-items: center; gap: var(--s2); background: none; border: var(--bw) solid var(--ink); border-radius: var(--r); padding: 8px 12px; font-family: var(--sub); font-weight: 700; cursor: pointer; }
.menu-btn svg { width: 22px; height: 22px; }
.menu-btn .close { display: none; }
body.nav-open .menu-btn .open { display: none; } body.nav-open .menu-btn .close { display: block; }
.menu { display: none; position: fixed; inset: var(--nav-h) 0 0 0; z-index: 100; background: var(--purple); color: #fff; overflow: auto; padding: var(--s8) var(--gutter) var(--s16); }
body.nav-open .menu { display: block; }
body.nav-open { overflow: hidden; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu li { border-top: var(--bw) solid #fff; }
.menu li:last-child { border-bottom: var(--bw) solid #fff; }
.menu ul a { display: block; padding: var(--s4) 0; font-family: var(--sig); font-size: clamp(1.5rem, 6vw, 2.4rem); text-decoration: none; color: #fff; }
.menu ul a[aria-current="page"] { color: var(--green); }
/* the foot of the menu: a quiet contact block, the button its normal size */
.menu-foot { margin-top: var(--s8); display: grid; gap: var(--s3); justify-items: start; }
.menu-say { font-family: var(--sub); font-weight: 700; color: #e6dcff; margin: 0; }
.menu-foot .btn { font-size: 1rem; padding: 12px 16px; }
.menu-mail { color: #fff; font-family: var(--text); text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 4px; padding: 6px 0; }
@media (max-width: 899px) { .menu { inset: 52px 0 0 0; padding-top: var(--s6); } }
.menu .menu-foot { margin-top: var(--s8); }
@media (min-width: 900px) { .nav-links { display: flex; } .menu-btn, .menu { display: none !important; } }
/* the phone header: slim, quiet, the logo small, the menu just a word */
@media (max-width: 899px) {
  .site-nav { border-bottom-width: 1px; }
  .site-nav .wrap { min-height: 52px; }
  .wordmark img { height: 22px; }
  .menu-btn { border: 0; padding: 8px 0 8px 12px; gap: 6px; font-size: 1rem; }
  .menu-btn svg { width: 20px; height: 20px; }
  .wa-fab { display: none; }   /* on a phone the WhatsApp buttons in the page and the menu do the job */
}

/* ---------- hero ---------- */
.hero { padding-block: var(--s12) var(--s16); overflow: hidden; }
.hero h1 { font-size: clamp(2.3rem, 1rem + 6vw, 5rem); }
.hero .lines > span { display: block; }
.hero .stage { display: grid; gap: var(--s8); }
.hero .stage.solo h1 { max-width: 16ch; }
.hero .stage.solo .lead { max-width: 60ch; }
@media (min-width: 900px) {
  .hero { padding-block: var(--s16) var(--s24); }
  .hero .stage { grid-template-columns: 7fr 5fr; gap: var(--s12); align-items: end; }
  .hero .stage.solo { grid-template-columns: 1fr; }
}
.hero .ph { margin-top: var(--s4); }
/* the one authored motion moment: the headline lines and the button arrive once */
.rise { opacity: 0; transform: translateY(24px); animation: rise 700ms var(--ease) forwards; }
.rise.d1 { animation-delay: 40ms; } .rise.d2 { animation-delay: 80ms; } .rise.d3 { animation-delay: 120ms; } .rise.d4 { animation-delay: 200ms; } .rise.d5 { animation-delay: 280ms; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; animation: none; } }
html.framed .rise { opacity: 1; transform: none; animation: none; }

/* ---------- the live screen ---------- */
.screen { border: var(--bw) solid var(--ink); border-radius: var(--r); background: var(--ink); padding: var(--s2); position: relative; }
.screen-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); color: #fff; padding: var(--s2) var(--s3) var(--s3); font-family: var(--sub); font-weight: 700; font-size: .9rem; }
.screen-bar .addr { flex: 1; min-width: 0; background: #23202e; color: var(--mute-on-ink); border-radius: var(--r); padding: 6px 10px; font-family: var(--text); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen-bar .addr b { color: #fff; font-weight: 600; }
.screen .glass { position: relative; aspect-ratio: 16 / 10; background: #fff; border-radius: var(--r); overflow: hidden; }
.screen .glass iframe { width: 100%; height: 100%; border: 0; }
.screen .start { position: absolute; inset: 0; display: grid; place-items: center; background: #f2eefc; text-align: center; padding: var(--s6); }
.screen.live-on .start { display: none; }
.screen .start p { margin-top: var(--s4); }
@media (max-width: 899px) { .screen .glass { aspect-ratio: 9 / 14; } }
.screen-foot { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); align-items: baseline; }

/* ---------- lists that replace cards ---------- */
.roll { list-style: none; margin: 0; padding: 0; }
.roll li { border-top: var(--bw) solid var(--line); padding: var(--s6) 0; display: grid; gap: var(--s2) var(--s8); }
.roll li:last-child { border-bottom: var(--bw) solid var(--line); }
.roll .name { font-family: var(--sig); font-size: clamp(1.2rem, 1rem + 1.4vw, 2rem); letter-spacing: -0.02em; line-height: 1.1; }
.roll .name a { text-decoration: none; }
.roll .name a:hover { color: var(--purple); }
.on-purple .roll .name a:hover, .on-ink .roll .name a:hover { color: var(--green); }
.roll p { max-width: 58ch; }
.roll .tail { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; justify-content: space-between; }
@media (min-width: 900px) {
  .roll li { grid-template-columns: 5fr 5fr 2fr; align-items: center; }
  .roll li.wide { grid-template-columns: 7fr 5fr; }
  .roll .tail { justify-content: flex-end; }
}
.roll.num li { grid-template-columns: auto 1fr; }
@media (min-width: 900px) { .roll.num li { grid-template-columns: 3fr 4fr 5fr; } }

/* a shop row: image, words, price. Rows alternate wide and narrow on desktop. */
.room { display: grid; gap: var(--s6); padding-block: var(--s8); border-top: var(--bw) solid var(--line); }
.room:last-of-type { border-bottom: var(--bw) solid var(--line); }
.room .ph { aspect-ratio: 3 / 2; }
.room .body { display: grid; gap: var(--s4); align-content: start; }
.room .meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); flex-wrap: wrap; }
.room h3 { font-size: clamp(1.4rem, 1rem + 2vw, 2.4rem); }
.room h3 a { text-decoration: none; } .room h3 a:hover { color: var(--purple); }
.room ul { margin: 0; padding-left: 1.1em; max-width: 56ch; }
.room ul li + li { margin-top: var(--s1); }
@media (min-width: 900px) {
  .room { grid-template-columns: 7fr 5fr; gap: var(--s12); align-items: center; }
  .room:nth-child(even) { grid-template-columns: 5fr 7fr; }
  .room:nth-child(even) .ph { order: 2; }
  .room:nth-child(even) .ph { aspect-ratio: 1; }
}

/* ---------- steps, in words ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.steps li { border-top: var(--bw) solid var(--line); padding: var(--s6) 0; display: grid; gap: var(--s2); }
.steps li:last-child { border-bottom: var(--bw) solid var(--line); }
.steps .when { font-family: var(--sig); font-size: clamp(1.1rem, 1rem + .8vw, 1.5rem); color: var(--purple); }
.on-purple .steps .when, .on-ink .steps .when { color: #fff; }
@media (min-width: 900px) { .steps li { grid-template-columns: 2fr 3fr 7fr; gap: var(--s8); align-items: baseline; } }

/* ---------- faq ---------- */
.faq details { border-top: var(--bw) solid var(--line); }
.faq details:last-child { border-bottom: var(--bw) solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: var(--s4) 0; font-family: var(--sub); font-weight: 700; font-size: 1.1rem; display: flex; justify-content: space-between; gap: var(--s4); align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 22px; height: 22px; flex: none; transition: transform 150ms var(--ease); }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details p { padding-bottom: var(--s4); max-width: 60ch; }

/* ---------- picker ---------- */
.picker { border: var(--bw) solid var(--ink); border-radius: var(--r); padding: var(--s6); background: var(--paper); color: var(--ink); }
.picker fieldset { border: 0; margin: 0; padding: 0; }
.picker fieldset + fieldset { margin-top: var(--s6); }
.picker legend { font-family: var(--sub); font-weight: 700; font-size: 1.1rem; margin-bottom: var(--s3); padding: 0; }
.picker .opts { display: flex; flex-wrap: wrap; gap: var(--s2); }
.picker label { display: inline-flex; align-items: center; gap: var(--s2); border: var(--bw) solid var(--ink); border-radius: var(--r); padding: 10px 14px; cursor: pointer; font-family: var(--sub); font-weight: 700; font-size: .95rem; background: var(--paper); }
.picker label:hover { background: #efeaff; }
.picker label:has(input:checked) { background: var(--green); }
.picker label:has(input:focus-visible) { outline: 3px solid var(--purple); outline-offset: 2px; }
.picker input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.picker .answer { margin-top: var(--s6); border-top: var(--bw) solid var(--ink); padding-top: var(--s6); display: none; }
.picker .answer.show { display: block; }
.picker .answer .name { font-family: var(--sig); font-size: clamp(1.4rem, 1rem + 2vw, 2.2rem); }

/* ---------- forms ---------- */
.form { display: grid; gap: var(--s4); max-width: 640px; }
.form label { font-family: var(--sub); font-weight: 700; display: grid; gap: var(--s1); }
.form input, .form textarea { font: inherit; font-size: 16px; padding: 12px 14px; border: var(--bw) solid var(--ink); border-radius: var(--r); background: var(--paper); color: var(--ink); width: 100%; }
.form input:hover, .form textarea:hover { background: #faf8ff; }
.form input:focus, .form textarea:focus { outline: 3px solid var(--purple); outline-offset: 2px; }
.form input[aria-invalid="true"], .form textarea[aria-invalid="true"] { border-color: #c2185b; }
.form .err { color: #a3124b; font-family: var(--sub); font-weight: 700; display: none; }
.form .err.show { display: block; }
.form .hint { font-size: .95rem; }

/* ---------- footer / close ---------- */
.close-band h2 { font-size: clamp(2rem, 1rem + 5vw, 4.5rem); }
.site-foot { border-top: var(--bw) solid var(--ink); padding-block: var(--s8); font-size: .95rem; }
.site-foot .row { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); justify-content: space-between; align-items: baseline; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); }
.site-foot a { text-decoration: none; font-family: var(--sub); font-weight: 700; display: inline-block; padding: 6px 0; }
@media (max-width: 899px) { a:not(.btn):not(.chip):not(.rc):not(.pic):not(.wordmark):not(.tile):not(.tag):not(.site-foot a) { padding-block: 10px; } }
.site-foot a:hover { text-decoration: underline; }
.site-foot .small { margin-top: var(--s6); color: var(--mute); }
.site-foot .small p { margin: 0; }
.site-foot .foot-contact { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); margin-top: var(--s2); }
.site-foot .foot-copy { margin-top: var(--s4); }
/* the phone footer: a clean stack. Logo, the links in two tidy columns, a rule, then the contact lines each on its own line */
@media (max-width: 899px) {
  .site-foot { padding-block: var(--s8) calc(var(--s8) + 72px); }   /* room under the round WhatsApp button */
  .site-foot .row { display: grid; grid-template-columns: 1fr; gap: var(--s6); }
  .site-foot .row > * { width: 100%; min-width: 0; }
  .site-foot .wordmark { width: auto; justify-self: start; }
  .site-foot ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s6); border-top: 1px solid var(--ink); }
  .site-foot ul li { border-bottom: 1px solid #e3ddf0; }
  .site-foot ul a { display: block; padding: 12px 0; width: 100%; }
  .site-foot .small { margin-top: var(--s8); line-height: 1.5; }
  .site-foot .foot-contact { flex-direction: column; gap: 0; margin-top: var(--s3); }
  .site-foot .foot-contact a { display: block; padding: 8px 0; }
  .site-foot .foot-copy { margin-top: var(--s6); font-size: .85rem; }
}

/* ---------- WhatsApp — the one brand mark on a button ---------- */
.wa-fab { position: fixed; right: var(--s4); bottom: max(var(--s4), env(safe-area-inset-bottom)); z-index: 40; }
.wa-fab .btn { padding: 12px 16px; }
body.nav-open .wa-fab { display: none; }

/* ---------- misc ---------- */
.crumb { font-family: var(--sub); font-weight: 700; font-size: .95rem; display: flex; gap: var(--s2); flex-wrap: wrap; list-style: none; margin: 0 0 var(--s6); padding: 0; }
.crumb a { text-decoration: none; } .crumb a:hover { text-decoration: underline; }
.crumb li + li::before { content: "/"; margin-right: var(--s2); color: var(--mute); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; margin: 0; padding: 0; }
.chips li { border: var(--bw) solid var(--line); border-radius: var(--r); padding: 6px 10px; font-family: var(--sub); font-weight: 700; font-size: .9rem; }
.note { border: var(--bw) solid var(--ink); border-radius: var(--r); padding: var(--s4) var(--s6); max-width: 70ch; }
.note p { max-width: none; }
.legal h2 { font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem); margin-top: var(--s8); }
.legal p { max-width: 70ch; margin-top: var(--s3); }
.legal ul { max-width: 70ch; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tab-block { display: inline-block; background: var(--green); border: var(--bw) solid var(--ink); border-radius: var(--r); padding: 0 .18em; color: var(--ink); }
html.framed .site-nav, html.framed .wa-fab { display: none; }

/* stacks last, so their spacing wins over a list's own margin:0 */
.stack > * + * { margin-top: var(--s6); }
.stack-lg > * + * { margin-top: var(--s8); }
.stack-lg > .split + * { margin-top: var(--s12); }
.roll.plain li, .roll.plain li.wide { grid-template-columns: 1fr; }
.roll .name { overflow-wrap: anywhere; }
.roll.plain .name { font-size: clamp(1.1rem, 1rem + .9vw, 1.5rem); }

/* ============================================================ v13: movement
   Everything below moves only transform and opacity, once, with one easing. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 180ms ease-in both vt-out; }
::view-transition-new(root) { animation: 260ms var(--ease) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }

/* reveal once, then stay */
.rv { opacity: 0; transform: translateY(32px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); transition-delay: calc(var(--i, 0) * 45ms); }
.rv.in { opacity: 1; transform: none; }
html.no-js .rv, html.framed .rv { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* images settle */
.ph img { opacity: 0; transform: scale(1.03); transition: opacity 500ms var(--ease), transform 900ms var(--ease); }
.ph img.ok, html.no-js .ph img { opacity: 1; transform: none; }
@media (hover: hover) {
  .room .ph img.ok, a.ph img.ok { transition: transform 700ms var(--ease); }
  .room:hover .ph img.ok, a.ph:hover img.ok { transform: scale(1.04); }
}

/* rows answer */
.roll .name a, .steps .when, .roll .name { position: relative; display: inline-block; }
.roll .name a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform 200ms var(--ease); }
@media (hover: hover) {
  .roll li { transition: transform 200ms var(--ease); }
  .roll li:hover { transform: translateX(6px); }
  .roll li:hover .name a::after { transform: scaleX(1); }
  .roll li:hover .link svg { transform: translateX(4px); }
}
.link svg { transition: transform 150ms var(--ease); }
.link:hover svg { transform: translateX(4px); }

/* the fan: the six rooms as turned screens, front one sharp, swipe or arrows to turn it */
.fan-wrap { position: relative; }
.fan { position: relative; height: clamp(300px, 46vw, 440px); perspective: 1400px; perspective-origin: 50% 40%; touch-action: pan-y; user-select: none; }
.fan .slide { position: absolute; left: 50%; top: 0; width: min(72%, 300px); margin-left: calc(min(72%, 300px) / -2); border: var(--bw) solid var(--ink); border-radius: var(--r); background: var(--paper); overflow: hidden;
  transition: transform 600ms var(--ease), opacity 600ms var(--ease), filter 600ms var(--ease); will-change: transform; cursor: pointer; text-decoration: none; color: var(--ink); display: block; }
.fan .slide .ph { aspect-ratio: 4 / 3; border-radius: 0; }
.fan .slide .cap { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); padding: var(--s3) var(--s4); border-top: var(--bw) solid var(--ink); font-family: var(--sub); font-weight: 700; }
.fan .slide .cap .price { font-size: 1.1rem; }
.fan .slide.is-front { box-shadow: var(--off) var(--off) 0 0 var(--purple); cursor: pointer; }
.fan .slide.is-front .cap { background: var(--green); }
@media (min-width: 900px) { .fan { height: 460px; } .fan .slide { width: 320px; margin-left: -160px; } }
.fan-nav { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s4); }
.fan-nav .dots { display: flex; gap: 6px; margin-left: auto; }
.fan-nav .dots button { width: 14px; height: 14px; border: var(--bw) solid var(--ink); border-radius: var(--r); background: var(--paper); padding: 0; cursor: pointer; }
.fan-nav .dots button[aria-current="true"] { background: var(--green); }
.fan-nav .arrow { width: 44px; height: 44px; display: grid; place-items: center; border: var(--bw) solid var(--ink); border-radius: var(--r); background: var(--paper); cursor: pointer; padding: 0; box-shadow: 4px 4px 0 0 var(--purple); transition: transform 120ms var(--ease), box-shadow 120ms var(--ease); }
.fan-nav .arrow:hover { transform: translate(1px, 1px); box-shadow: 3px 3px 0 0 var(--purple); }
.fan-nav .arrow:active { transform: translate(4px, 4px); box-shadow: none; }
.fan-nav .arrow svg { width: 22px; height: 22px; }
.fan-nav .arrow.flip svg { transform: rotate(180deg); }
.fan-nav .what { font-family: var(--sub); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .fan .slide { transition: none; } }

/* the green tile with an arrow, the one signature icon on the site */
.tile { display: inline-grid; place-items: center; width: 64px; height: 64px; background: var(--green); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--off) var(--off) 0 0 var(--ink); transform: rotate(-6deg); transition: transform 150ms var(--ease), box-shadow 150ms var(--ease); vertical-align: middle; }
.tile svg { width: 30px; height: 30px; }
.tile:hover { transform: rotate(0deg) translate(2px, 2px); box-shadow: calc(var(--off) - 2px) calc(var(--off) - 2px) 0 0 var(--ink); }
.hero h1 .tile { margin-left: .15em; width: .9em; height: .9em; }
.hero h1 .tile svg { width: 50%; height: 50%; }

/* the statement that lights up as you scroll */
.lit-band { padding-block: var(--s24); }
.lit { font-family: var(--sig); font-size: clamp(1.5rem, 1rem + 3.4vw, 3.6rem); line-height: 1.12; letter-spacing: -0.02em; max-width: 24ch; }
.lit .w { color: var(--mute-on-ink); opacity: .62; transition: opacity 250ms var(--ease), color 250ms var(--ease); }
.lit .w.on { opacity: 1; color: #fff; }
.lit .w.key.on { color: var(--green); }
html.no-js .lit .w { opacity: 1; color: #fff; }

/* the live screen, capped so it never eats the whole page */
.screen .glass { aspect-ratio: 16 / 10; max-height: 56vh; }
@media (max-width: 899px) { .screen .glass { aspect-ratio: 9 / 14; max-height: 62vh; } }
.screen { transition: transform 600ms var(--ease); }

/* nav reacts to scroll: a hairline of purple grows as you read */
.progress { position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%; background: var(--green); transform-origin: left; transform: scaleX(0); }
html { overflow-x: clip; }
.fan { overflow: clip; overflow-clip-margin: 40px; }
@media (max-width: 899px) { .fan .slide { width: 66%; margin-left: -33%; } }
.fan-nav .what { white-space: nowrap; font-size: .95rem; }

/* ============================================================ the laptop
   A photograph of a laptop with a real website running inside its glass.
   The stage is drawn at the render's own size (1672 x 941) and scaled to fit. */
.machine { position: relative; width: 100%; aspect-ratio: 1672 / 941; overflow: hidden; border-radius: var(--r); background: #b9c6df; }
.machine .stage { position: absolute; left: 0; top: 0; width: 1672px; height: 941px; transform-origin: 0 0; }
.machine .frame { position: absolute; inset: 0; width: 1672px; height: 941px; pointer-events: none; z-index: 2; opacity: 1; transform: none; }
.machine .glass { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; transform-origin: 0 0; background: #fff; z-index: 1; overflow: hidden; will-change: transform; contain: strict; }
.machine .glass iframe { width: 1440px; height: 900px; border: 0; display: block; }
.machine .start { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; transform-origin: 0 0; z-index: 3; display: grid; place-items: center; background: #f2eefc; text-align: center; padding: 64px; font-size: 26px; }
.machine .start p { max-width: 30ch; }
.machine .start .btn { font-size: 26px; min-height: 80px; padding: 20px 34px; --off: 10px; }
.machine.live-on .start { display: none; }
/* the note sits under the laptop as its own block, never on the picture */
.machine-note { margin: var(--s3) 0 0; background: var(--ink); color: #fff; font-family: var(--sub); font-weight: 700; font-size: .95rem; padding: 12px 16px; border-radius: var(--r); }
.machine-note b { color: var(--green); font-weight: 700; }
/* on a phone a finger on the glass drives the site inside; the pad catches the touch before the iframe swallows it */
.machine .touchpad { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; transform-origin: 0 0; z-index: 2; display: none; touch-action: pan-x; }
@media (hover: none) and (pointer: coarse) { .machine .touchpad { display: block; } }
.fan-nav .what { white-space: normal; }
.fan .slide .cap { display: grid; gap: 2px; }
.fan .slide .cap small { font-family: var(--text); font-weight: 400; font-size: .9rem; line-height: 1.35; color: var(--mute); }
.fan .slide.is-front .cap small { color: var(--ink); }
.room .machine { border: var(--bw) solid var(--ink); }
@media (min-width: 900px) { .room:nth-child(even) .machine { order: 2; } }

/* ============================================================ the hero, v22
   Letters arrive one by one, lines stepped to the right; the six rooms slide
   in as a strip you drag sideways; a thin arc at the bottom says scroll. */
.hero-g { padding-block: var(--s8) 0; position: relative; overflow: hidden; }
.hero-g .wrap { position: relative; }
.g-top { display: grid; gap: var(--s6); }
@media (min-width: 900px) { .g-top { grid-template-columns: 7fr 5fr; gap: var(--s12); align-items: end; } }
.steps-h1 { font-size: clamp(2.3rem, 1rem + 6vw, 5rem); line-height: 1; }
.steps-h1 > span { display: block; white-space: nowrap; }
@media (min-width: 900px) {
  .steps-h1 > span:nth-child(2) { padding-left: .8em; }
  .steps-h1 > span:nth-child(3) { padding-left: 1.6em; }
  .steps-h1 > span:nth-child(4) { padding-left: 2.4em; }
}
.steps-h1 i { font-style: normal; display: inline-block; opacity: 0; transform: translateY(.5em) rotate(4deg); animation: letter 600ms var(--ease) forwards; animation-delay: calc(var(--i) * 28ms); }
@keyframes letter { to { opacity: 1; transform: none; } }
.steps-h1 .tile { opacity: 0; animation: rise 600ms var(--ease) 1100ms forwards; }
@media (prefers-reduced-motion: reduce) { .steps-h1 i, .steps-h1 .tile { opacity: 1; transform: none; animation: none; } }
html.no-js .steps-h1 i { opacity: 1; transform: none; animation: none; }
.g-side .lead { max-width: 40ch; }

.strip-wrap { margin-top: var(--s12); }
.strip { display: flex; gap: var(--s4); overflow-x: auto; scroll-snap-type: x mandatory; padding: var(--s2) 0 var(--s4); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; cursor: grab; }
.strip::-webkit-scrollbar { display: none; }
.strip.dragging { cursor: grabbing; scroll-snap-type: none; }
.strip .card { flex: 0 0 min(78vw, 300px); scroll-snap-align: start; border: var(--bw) solid var(--ink); border-radius: var(--r); background: var(--paper); text-decoration: none; color: var(--ink); display: block; overflow: hidden;
  opacity: 0; transform: translateX(120px); animation: card-in 700ms var(--ease) forwards; animation-delay: calc(600ms + var(--i) * 70ms);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease); }
@keyframes card-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .strip .card { opacity: 1; transform: none; animation: none; } }
html.no-js .strip .card { opacity: 1; transform: none; animation: none; }
.strip .card .ph { border-radius: 0; }
.strip .card .cap { display: grid; gap: 2px; padding: var(--s3) var(--s4); border-top: var(--bw) solid var(--ink); }
.strip .card .name { font-family: var(--sig); font-size: 1.1rem; letter-spacing: -0.02em; }
.strip .card small { font-family: var(--text); font-size: .9rem; line-height: 1.35; color: var(--mute); }
@media (hover: hover) {
  .strip .card:hover { transform: translate(-2px, -2px); box-shadow: var(--off) var(--off) 0 0 var(--purple); }
  .strip .card:hover .cap { background: var(--green); }
  .strip .card:hover small { color: var(--ink); }
}
@media (min-width: 900px) { .strip .card { flex-basis: 320px; } .strip { margin-inline: 0; padding-inline: 0; } }
.strip-nav { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s2); }
.strip-nav .arrow { width: 44px; height: 44px; display: grid; place-items: center; border: var(--bw) solid var(--ink); border-radius: var(--r); background: var(--paper); cursor: pointer; padding: 0; box-shadow: 4px 4px 0 0 var(--purple); transition: transform 120ms var(--ease), box-shadow 120ms var(--ease); }
.strip-nav .arrow:hover { transform: translate(1px, 1px); box-shadow: 3px 3px 0 0 var(--purple); }
.strip-nav .arrow:active { transform: translate(4px, 4px); box-shadow: none; }
.strip-nav .arrow svg { width: 22px; height: 22px; }
.strip-nav .arrow.flip svg { transform: rotate(180deg); }
.strip-nav .what { font-family: var(--sub); font-weight: 700; font-size: .95rem; color: var(--mute); }

.arc { display: block; position: relative; height: 72px; margin-top: var(--s8); overflow: hidden; text-decoration: none; color: var(--ink); }
.arc::before { content: ""; position: absolute; left: 50%; top: 14px; width: min(90vw, 900px); height: min(90vw, 900px); transform: translateX(-50%); border: var(--bw) solid var(--purple); border-radius: 50%; }
.arc span { position: absolute; left: 50%; top: 30px; transform: translateX(-50%); font-family: var(--sub); font-weight: 700; font-size: .85rem; background: var(--paper); padding: 0 var(--s3); }
.arc:hover span { color: var(--purple); }
@media (max-width: 899px) { .strip { margin-inline: 0; padding-inline: 0; } .strip .card { flex-basis: 78vw; } }
.strip .card .cap { padding-right: var(--s6); }

/* ============================================================ the room hero, v29
   Sam's own render is the first screen, untouched. The six rooms are real cards
   laid onto the picture panels in it with a matrix from four measured corners
   (the laptop trick). They ride a belt: in on the left wall, across to the big
   panel on the front of the cube, round to the side, out, and back to the start.
   The JS sets each card's size and matrix; this file only draws the card. */
.showroom { position: relative; overflow: hidden; background: #fff; display: grid; justify-items: center; isolation: isolate; }
/* on a screen wider than the picture, the room carries on softly into the sides instead of stopping at a white edge */
.showroom::before { content: ""; position: absolute; inset: -4%; background: url(../images/hero-room.webp) center / cover no-repeat; filter: blur(28px); opacity: .9; z-index: -1; }
@media (max-width: 899px) { .showroom::before { display: none; } }
/* the picture arrives as one thing: hidden until it has fully loaded, then shown */
.showroom-bg { opacity: 0; transition: opacity 300ms var(--ease); }
.showroom-bg.ok, html.no-js .showroom-bg { opacity: 1; }
/* the picture fits the first screen whole: as wide as the screen, or as tall as what is left under the nav, whichever is smaller */
.showroom-stage { position: relative; width: min(100%, calc((100vh - var(--navh, 66px)) * 1862 / 845)); aspect-ratio: 1862 / 845; }
.showroom-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.belt { position: absolute; inset: 0; }
.rc { position: absolute; left: 0; top: 0; transform-origin: 0 0; display: block; overflow: hidden; text-decoration: none; color: var(--ink); background: #0b0b0f;
  box-shadow: 0 8px 24px rgba(0,0,0,.35); opacity: 0; transition: opacity 500ms var(--ease); }
.rc.on { opacity: 1; }
.rc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc .tag { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: .5em; padding: .35em .6em; background: var(--green); color: var(--ink); font-family: var(--sub); font-weight: 700; font-size: 1em; line-height: 1.1; white-space: nowrap; }
.rc .tag .go { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; opacity: 0; transition: opacity 300ms var(--ease); }
.rc .tag .go svg { width: 1em; height: 1em; }
.rc.side .tag { display: none; }
.rc.front .tag .go { opacity: 1; }
.rc:hover .tag .go svg { transform: translateX(4px); }
.rc:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.hero.after-room { padding-block: var(--s16) var(--s24); }
.hero.after-room .stage { display: grid; gap: var(--s16); align-items: start; }
.hero.after-room .stage h1 { max-width: 14ch; }
.legend { display: grid; gap: 0; border-top: var(--bw) solid var(--ink); }
.legend a { display: grid; grid-template-columns: 3ch minmax(0, 1fr) 24px; grid-template-rows: auto auto; align-items: baseline; column-gap: var(--s4); row-gap: 4px; padding: var(--s4) 0; border-bottom: var(--bw) solid var(--ink); color: var(--ink); text-decoration: none; transition: transform 250ms var(--ease); }
.legend a:hover { transform: translateX(6px); }
.legend .n { grid-column: 1; grid-row: 1; align-self: start; padding-top: .45em; font-family: var(--sub); font-weight: 700; font-size: .8rem; color: var(--mute); }
.legend .name { grid-column: 2; grid-row: 1; font-family: var(--sig); font-size: clamp(1.05rem, .9rem + .6vw, 1.3rem); letter-spacing: -0.01em; }
.legend small { grid-column: 2; grid-row: 2; font-size: .95rem; color: var(--mute); line-height: 1.4; }
.legend svg { width: 20px; height: 20px; grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.legend a:hover svg { transform: translateX(4px); }
.legend-h { font-family: var(--sub); font-weight: 700; margin-bottom: var(--s4); }
@media (min-width: 900px) { .hero.after-room .stage { grid-template-columns: 7fr 5fr; gap: var(--s12); } }
@media (max-width: 899px) { .hero.after-room { padding-block: var(--s12) var(--s16); } .legend-h { margin-top: var(--s4); } }
html.no-js .rc { opacity: 1; }
@media (max-width: 899px) { .showroom-stage { width: 100%; } .rc .tag { display: none; } .rc.front .tag { display: flex; font-size: 7px; padding: 2px 4px; } .rc.front .tag .go { display: none; } .rc { box-shadow: 0 3px 8px rgba(0,0,0,.35); } }

/* ============================================================ the phone home, v42 (Sam's mock; phones only, laptops untouched)
   Under the picture: the headline, a short line, one full-width green button, a text link,
   and the six services as a grid of two-up chips with Lucide icons. A round green WhatsApp button
   floats bottom right. Every bit of this is off above 900px. */
.phone-home { display: none; }
@media (max-width: 899px) {
  .hero.after-room { padding-block: var(--s8) 0; }
  .hero.after-room .lead, .hero.after-room .btn-row, .hero.after-room .legend-wrap, .hero.after-room h1 .tile { display: none; }
  .hero.after-room .stage h1 { max-width: none; font-size: clamp(2.2rem, 1.2rem + 5.5vw, 2.9rem); }
  .phone-home { display: block; padding-block: var(--s4) var(--s12); }
  .phone-home .wrap { display: grid; gap: var(--s4); }
  .phone-home .lead { font-family: var(--text); font-weight: 400; font-size: 1.1rem; line-height: 1.45; margin-bottom: var(--s2); }
  .btn.wide { display: flex; justify-content: center; width: 100%; padding: 16px; font-size: 1.15rem; gap: 8px; }
  .btn.wide svg { width: 22px; height: 22px; }
  .phone-home .link { justify-self: start; font-family: var(--sub); font-weight: 700; font-size: 1.05rem; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
  .phone-home .link svg { width: 20px; height: 20px; }
  .ph-h { font-family: var(--sig); font-size: 1.35rem; margin-top: var(--s6); }
  .chips { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
  .chip { display: flex; align-items: center; gap: var(--s3); padding: 14px 14px; border: var(--bw) solid var(--ink); border-radius: var(--r); color: var(--ink); text-decoration: none; font-family: var(--sub); font-weight: 700; font-size: 1rem; background: var(--paper); }
  .chip svg { width: 24px; height: 24px; flex: none; }
  .chip:active { background: var(--green); }
  /* the round WhatsApp button, phones only */
  .wa-fab { display: block; right: var(--s4); bottom: max(var(--s4), env(safe-area-inset-bottom)); }
  .wa-fab .btn { width: 60px; height: 60px; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: none; border-width: 0; }
  .wa-fab .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .wa-fab .btn svg { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) { .lit .w { opacity: 1; color: #fff; } .lit .w.key { color: var(--green); } }
/* phones: sections sit closer together; the hero's bottom cushion and the next section's top were adding up to a hole */
@media (max-width: 899px) { .hero { padding-block: var(--s8) var(--s8); } .band { padding-block: var(--s12); } .band.roomy { padding-block: var(--s16); } .hero + .band { padding-top: var(--s6); } }