/* Strüb Creative — "Plan" identity
   Familjen Grotesk (wordmark, headlines, body) · JetBrains Mono (labels, specs)
   Blueprint navy, vellum, signal orange, line blue.
   The umlaut is two signal-orange points, each ringed like a plotted point on a drawing. */

:root {
  --blueprint: #13233a;
  --blueprint-2: #1a2d48;
  --vellum: #e9eef3;
  --paper: #ffffff;
  --signal: #e8743b;
  --signal-deep: #b9531f;
  --line: #5c7899;
  --line-soft: #c2cdd9;
  --ink: #13233a;
  --ink-soft: #2a3a50;
  --muted: #4a5b70;
  --on-dark: #e9eef3;
  --on-dark-soft: #c7d4e3;
  --on-dark-muted: #8fa8c6;
  --grid-line: rgba(140, 170, 205, 0.14);

  --sans: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --max: 1200px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--vellum);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

.mono { font-family: var(--mono); }
.small { font-size: 0.8rem; }
.label {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip {
  position: absolute; left: -999px; top: 8px; z-index: 100;
  background: var(--signal); color: var(--blueprint); padding: 8px 14px;
}
.skip:focus { left: 8px; }

/* Blueprint ground: navy with a fine drafting grid */
.blueprint {
  background-color: var(--blueprint);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--on-dark);
}
.blueprint .label { color: var(--on-dark-muted); }
.grid-bg {
  background-color: var(--blueprint);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* ---------- Wordmark: Str + u (two ringed points) + b ---------- */
.wordmark {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.86;
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}
.wordmark .u { position: relative; display: inline-block; }
.wordmark .dots {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; gap: 0.11em; top: -0.07em;
}
.wordmark .dots i {
  display: block; width: 0.11em; height: 0.11em; border-radius: 50%;
  background: var(--signal);
}
.wordmark--sm { font-size: 1.7rem; }
.wordmark--sm .dots { top: -0.02em; gap: 0.08em; }
.wordmark--sm .dots i { width: 0.13em; height: 0.13em; }
.wordmark--xl { font-size: clamp(5.5rem, 17vw, 12rem); }
.wordmark--xl .dots i { box-shadow: 0 0 0 0.04em var(--blueprint), 0 0 0 0.05em var(--signal); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: var(--blueprint);
  color: var(--on-dark);
  border-bottom: 1px solid var(--line);
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 21; background: var(--blueprint);
}
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 14px; }
.brand { display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none; color: inherit; }
.brand-sub { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--on-dark-soft); }
.site-nav { display: flex; align-items: center; gap: 26px; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }
.site-nav a { text-decoration: none; padding-block: 6px; color: var(--on-dark-soft); }
.site-nav a span { color: var(--signal); margin-right: 4px; }
.site-nav a:hover { color: var(--paper); }
.nav-cta { border: 1px solid var(--signal); color: var(--paper) !important; padding: 8px 14px !important; }
.nav-cta:hover { background: var(--signal); color: var(--blueprint) !important; }
.menu-btn {
  display: none; background: none; border: 1px solid var(--line); color: var(--on-dark);
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 10px 14px; min-height: 44px; cursor: pointer;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 22px;
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; border: 1px solid transparent; border-radius: 3px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn--signal, .btn--solid { background: var(--signal); color: var(--blueprint); border-color: var(--signal); font-weight: 500; }
.btn--signal:hover, .btn--solid:hover { background: #f08a55; border-color: #f08a55; }
.btn--ghost { background: transparent; color: var(--on-dark); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--on-dark); }
.btn--line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--paper); }
.btn-text {
  background: none; border: 0; padding: 8px 0; min-height: 44px; cursor: pointer;
  color: var(--signal); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.btn-text:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Hero ---------- */
.hero { padding-block: 72px 88px; border-bottom: 1px solid var(--line); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 56px; align-items: end; }
.hero-main { display: grid; gap: 22px; }
.hero-sheet { margin: 0; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-muted); }
.hero-mark { margin: 0; padding-top: 0.12em; font-weight: 700; color: var(--on-dark); }
.dimension { display: flex; align-items: center; gap: 12px; max-width: 560px; }
.dimension .tick { width: 1px; height: 14px; background: var(--on-dark-muted); }
.dimension .line { flex: 1 1 0; height: 1px; background: var(--on-dark-muted); }
.dim-label { font-size: 0.85rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--on-dark-soft); }
.hero-tag { margin: 0; font-size: 1.25rem; color: var(--on-dark-soft); max-width: 30ch; }
.hero-intro { display: grid; gap: 18px; padding: 28px; border: 1px solid var(--line); background: rgba(19, 35, 58, 0.72); }
.hero-intro p { margin: 0; color: var(--on-dark-soft); }
.lede { font-size: clamp(1.5rem, 2.3vw, 1.9rem); line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; color: var(--on-dark) !important; text-wrap: balance; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }

/* ---------- Statement ---------- */
.statement { padding-block: 72px; background: var(--paper); border-bottom: 1px solid var(--line-soft); }
.statement-text {
  margin: 0; max-width: 28ch;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance;
}
.statement-text em { font-style: normal; color: var(--signal-deep); }

/* ---------- Sections ---------- */
.section { padding-block: 96px; }
.section--linen { background: var(--vellum); }
.section-head { display: grid; gap: 14px; margin-bottom: 52px; max-width: 760px; }
h2 {
  margin: 0; font-weight: 700;
  font-size: clamp(2.3rem, 4.8vw, 3.6rem); line-height: 1.02; letter-spacing: -0.025em; text-wrap: balance;
}
h3 { margin: 0; font-weight: 700; font-size: 1.4rem; line-height: 1.15; letter-spacing: -0.01em; }
.section-lede { margin: 0; color: var(--muted); font-size: 1.1rem; max-width: 56ch; }
#work { background: var(--paper); }
#process, #who { background: var(--paper); }

/* ---------- Case study ---------- */
.case { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.case-card { padding: 40px; border-radius: 3px; }
.case-browser { background: var(--paper); border: 1px solid var(--line); border-radius: 3px; box-shadow: 0 0 0 6px rgba(232, 116, 59, 0.0), 12px 12px 0 var(--signal); }
.case-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); font-size: 0.72rem; color: var(--muted); }
.case-bar .sq { width: 9px; height: 9px; border-radius: 50%; background: var(--signal); }
.case-bar span:last-child { margin-left: 10px; }
.case-screen { padding: 26px 30px 30px; display: grid; gap: 2px; }
.case-screen-title { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; }
.case-row { display: flex; justify-content: space-between; gap: 16px; padding-block: 10px; border-top: 1px solid var(--line-soft); }
.case-caption { margin: 18px 0 0; font-size: 0.72rem; color: var(--on-dark-muted); }
.facts { margin: 0; display: grid; border-top: 2px solid var(--ink); }
.facts div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; padding-block: 18px; border-bottom: 1px solid var(--line-soft); }
.facts dt { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal-deep); padding-top: 3px; }
.facts dd { margin: 0; color: var(--ink-soft); }

/* ---------- Packages ---------- */
.packages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line-soft); border-radius: 3px; background: var(--paper); overflow: hidden; }
.package { padding: 34px 30px 36px; display: flex; flex-direction: column; gap: 26px; }
.package + .package { border-left: 1px solid var(--line-soft); }
.package--feature { background: var(--blueprint); color: var(--on-dark); border-left-color: var(--blueprint) !important; }
.package--feature .package-top p { color: var(--on-dark-soft); }
.package-top { display: grid; gap: 10px; }
.package-top p { margin: 0; color: var(--muted); }
.num { font-size: 0.78rem; color: var(--signal-deep); letter-spacing: 0.1em; }
.package--feature .num { color: var(--signal); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; }
.ticks li { position: relative; padding: 11px 0 11px 22px; border-top: 1px solid var(--line-soft); font-size: 0.97rem; }
.package--feature .ticks li { border-top-color: #2b4161; }
.ticks li::before {
  content: ""; position: absolute; left: 1px; top: 1.05em; width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--signal);
}
.package--feature .ticks li::before { box-shadow: 0 0 0 2px var(--blueprint), 0 0 0 3px var(--signal); }

.extras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 56px; }
.extras > div { display: grid; gap: 8px; align-content: start; border-top: 2px solid var(--ink); padding-top: 18px; }
.extras p { margin: 0; color: var(--ink-soft); }

/* ---------- Process ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.steps li { padding: 24px 24px 8px 0; display: grid; gap: 10px; align-content: start; }
.steps li + li { padding-left: 24px; border-left: 1px solid var(--line-soft); }
.step-num { font-size: 0.78rem; color: var(--signal-deep); }
.steps p { margin: 0; color: var(--ink-soft); }

/* ---------- About ---------- */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 64px; }
.about-head { display: grid; gap: 14px; align-content: start; }
.about-role { margin: 0; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal); }
.about-body p { margin: 0 0 1.1em; color: var(--on-dark-soft); max-width: 60ch; font-size: 1.1rem; }
.about-body p:last-child { font-size: 1.45rem; line-height: 1.3; font-weight: 600; color: var(--on-dark); letter-spacing: -0.01em; }

/* ---------- Who ---------- */
.who { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
.who li { border-top: 2px solid var(--ink); padding-top: 16px; display: grid; gap: 8px; align-content: start; }
.who h3 { font-size: 1.2rem; }
.who p { margin: 0; color: var(--muted); font-size: 0.97rem; }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 64px; }
.contact-head { display: grid; gap: 16px; align-content: start; }
.contact-head > p { margin: 0; color: var(--on-dark-soft); max-width: 40ch; }
.contact-direct { margin-top: 18px; display: grid; gap: 4px; }
.copy-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.email { font-size: 1.5rem; font-weight: 600; user-select: all; word-break: break-all; color: var(--on-dark); }
#copy-status { margin: 0; min-height: 1.2em; color: var(--on-dark-muted); }

.form {
  background: var(--paper); color: var(--ink); border-radius: 3px; padding: 32px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 22px;
}
.field { display: grid; gap: 6px; margin: 0; min-width: 0; }
.field--full { grid-column: 1 / -1; }
fieldset.field { border: 0; padding: 0; }
.field label, .field legend { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 0; }
input[type="text"], input[type="email"], select, textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--paper);
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 10px 2px; min-height: 44px;
}
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 14px) 52%, calc(100% - 9px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
textarea { border: 1px solid var(--line); border-radius: 3px; padding: 12px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--signal); box-shadow: 0 1px 0 var(--signal); }
.checks { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 4px; }
.checks label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.97rem; text-transform: none; letter-spacing: 0; color: var(--ink); font-family: var(--sans); min-height: 36px; cursor: pointer; }
.checks input { width: 16px; height: 16px; accent-color: var(--signal-deep); }
.form-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form-status { margin: 0; color: var(--muted); }
.form-status.is-error { color: #a12a1a; }
.is-invalid { border-color: #a12a1a !important; }

/* ---------- Footer ---------- */
.site-footer { background: var(--blueprint); color: var(--on-dark); border-top: 1px solid var(--line); }
.footer-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-block: 28px 36px; }
.footer-row p { margin: 0; color: var(--on-dark-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-grid, .case, .about, .contact { grid-template-columns: 1fr; gap: 36px; }
  .packages { grid-template-columns: 1fr; }
  .package + .package { border-left: 0; border-top: 1px solid var(--line-soft); }
  .extras { grid-template-columns: 1fr; gap: 28px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps li:nth-child(3) { padding-left: 0; border-left: 0; }
  .who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section { padding-block: 72px; }
}
@media (max-width: 760px) {
  .menu-btn { display: inline-flex; align-items: center; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--blueprint); border-bottom: 1px solid var(--line);
    padding: 8px max(20px, env(safe-area-inset-right, 0px)) 18px max(20px, env(safe-area-inset-left, 0px));
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding-block: 14px; border-bottom: 1px solid #2b4161; }
  .nav-cta { margin-top: 12px; text-align: center; }
  .header-row { position: relative; }
}
@media (max-width: 560px) {
  .hero { padding-block: 44px 56px; }
  .hero-intro { padding: 20px; }
  .steps, .who { grid-template-columns: 1fr; }
  .steps li, .steps li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-soft); }
  .facts div { grid-template-columns: 1fr; gap: 4px; }
  .case-card { padding: 18px; }
  .case-browser { box-shadow: 8px 8px 0 var(--signal); }
  .form { grid-template-columns: 1fr; padding: 22px; }
  .brand-sub { display: none; }
}

/* =========================================================
   Motion: parallax layers, floor plan, reveals, progress
   Everything here is transform/opacity only, and switches off
   for visitors who prefer reduced motion.
   ========================================================= */

/* Header progress: a dimension line with a plotted point */
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.progress-bar { position: absolute; inset: 0; background: var(--signal); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.progress-pt {
  position: absolute; top: 50%; left: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: var(--signal); box-shadow: 0 0 0 3px var(--blueprint), 0 0 0 4px var(--signal);
  transform: translateX(calc(var(--p, 0) * 100vw));
}

/* Hero layers */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero-grid { position: relative; z-index: 2; }
.hero-layers { position: absolute; inset: -25% 0; z-index: 0; pointer-events: none; }
.layer { position: absolute; inset: 0; will-change: transform; }
.grid-major {
  background-image:
    linear-gradient(rgba(143, 168, 198, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 168, 198, 0.16) 1px, transparent 1px);
  background-size: 120px 120px;
  background-position: -1px -1px;
}
.floorplan { width: 100%; height: 100%; opacity: 0.4; }
.fp-lines * { stroke: #5c7899; stroke-dasharray: 1; stroke-dashoffset: 0; }
.fp-points circle { fill: var(--signal); opacity: 0.85; }
.fp-text text { font-family: var(--mono); font-size: 13px; letter-spacing: 0.18em; fill: #8fa8c6; }

html.motion .fp-lines * { stroke-dashoffset: 1; animation: draw 2.6s cubic-bezier(.6,.1,.2,1) forwards; }
html.motion .fp-lines *:nth-child(2) { animation-delay: .15s; }
html.motion .fp-lines *:nth-child(3) { animation-delay: .3s; }
html.motion .fp-lines *:nth-child(4) { animation-delay: .45s; }
html.motion .fp-lines *:nth-child(5) { animation-delay: .6s; }
html.motion .fp-lines *:nth-child(n+6) { animation-delay: .75s; }
html.motion .fp-text, html.motion .fp-points { opacity: 0; animation: fade 1s ease 1.6s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }

/* Wordmark dots float a little with the pointer */
.wordmark--xl .dots { transition: transform .4s cubic-bezier(.2,.8,.2,1); transform: translateX(-50%) translate(var(--dx, 0px), var(--dy, 0px)); }

/* Statement: words light up as you read down */
[data-words] .w { transition: color .25s linear; }
html.motion [data-words] .w { color: #a9b6c5; }
html.motion [data-words] .w.on { color: var(--ink); }
html.motion [data-words] em .w.on { color: var(--signal-deep); }

/* Reveals (only hidden once JS has confirmed it can show them) */
html.motion [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
html.motion [data-reveal].in { opacity: 1; transform: none; }
html.motion .packages [data-reveal]:nth-child(2) { transition-delay: .1s; }
html.motion .packages [data-reveal]:nth-child(3) { transition-delay: .2s; }

/* Case study: the orange offset shadow slides as the card moves */
.case-browser { will-change: transform; box-shadow: calc(12px + var(--sx, 0px)) calc(12px + var(--sy, 0px)) 0 var(--signal); }

/* Big outlined sheet numbers drifting behind About and Contact */
.has-sheet { position: relative; overflow: hidden; isolation: isolate; }
.has-sheet > .wrap { position: relative; z-index: 1; }
.sheet-num {
  position: absolute; z-index: 0; left: -2vw; bottom: -0.18em; pointer-events: none;
  font-family: var(--sans); font-weight: 700; font-size: clamp(9rem, 26vw, 22rem); line-height: 1; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1px rgba(143, 168, 198, 0.28);
  will-change: transform;
}
.sheet-num--right { left: auto; right: -2vw; }

[data-parallax] { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html.motion .fp-lines *, html.motion .fp-text, html.motion .fp-points { animation: none; stroke-dashoffset: 0; opacity: 1; }
  html.motion [data-reveal] { opacity: 1; transform: none; transition: none; }
  html.motion [data-words] .w { color: inherit; }
  html.motion [data-words] em .w { color: var(--signal-deep); }
  [data-parallax], .layer, .sheet-num { transform: none !important; }
  .wordmark--xl .dots { transition: none; }
}
@media (max-width: 760px) {
  .floorplan { opacity: 0.35; }
  .fp-text { display: none; }
}

/* =========================================================
   Pinned scenes (Apple-style): a tall section with a sticky
   screen inside. Scroll position drives the animation.
   ========================================================= */
.scene { position: relative; }
.sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.scene--hero { height: 170vh; background: var(--blueprint); }
.scene--statement { height: 210vh; background: var(--paper); }
.scene--tour { height: 560vh; }

/* Hero inside its scene */
.scene--hero .hero { display: flex; align-items: center; padding-block: 64px 40px; border-bottom: 0; }
.scene--hero .hero-grid { width: 100%; }
.hero-mark, .hero-intro, .floorplan, .grid-major, [data-hero-fade], .dimension, .hero-tag { will-change: transform, opacity; }

/* Statement inside its scene */
.scene--statement .statement { display: flex; align-items: center; padding-block: 0; border-bottom: 0; background: var(--paper); }
.scene--statement .statement-text { max-width: 24ch; font-size: clamp(2rem, 4.6vw, 3.8rem); }

/* ---------- Tour ---------- */
.tour { display: flex; align-items: center; color: var(--on-dark); }
.tour-grid { width: 100%; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 56px; align-items: center; }
.tour-copy { display: grid; gap: 22px; align-content: center; }
.tour-copy h2 { color: var(--on-dark); font-size: clamp(2rem, 3.6vw, 3rem); }
.tour-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tour-steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 10px 0; opacity: 0.38; transition: opacity .35s ease; }
.tour-steps li.is-active { opacity: 1; }
.tour-steps h3 { font-size: 1.15rem; color: var(--on-dark); }
.tour-steps p { margin: 4px 0 0; color: var(--on-dark-soft); font-size: 0.95rem; max-height: 0; overflow: hidden; transition: max-height .45s ease; }
.tour-steps li.is-active p { max-height: 6em; }
.tour-steps .pt { width: 10px; height: 10px; margin: 6px 0 0 3px; border-radius: 50%; border: 1px solid var(--on-dark-muted); transition: all .3s ease; }
.tour-steps li.is-active .pt { background: var(--signal); border-color: var(--signal); box-shadow: 0 0 0 3px var(--blueprint), 0 0 0 4px var(--signal); }

.tour-stage { display: grid; gap: 14px; justify-items: center; }
.tour-note { margin: 0; font-size: 0.7rem; color: var(--on-dark-muted); letter-spacing: 0.04em; }

/* iPad */
.ipad {
  width: 100%; max-width: 720px; aspect-ratio: 4 / 3;
  background: #0b1626; border-radius: 34px; padding: 18px;
  box-shadow: 0 0 0 1px #2b4161, 0 40px 80px -30px rgba(0,0,0,.6);
  transform-origin: 50% 50%; will-change: transform;
}
.ipad-screen { position: relative; height: 100%; border-radius: 18px; overflow: hidden; background: var(--paper); color: var(--ink); display: grid; grid-template-columns: 130px minmax(0, 1fr); font-size: 13px; }
.app-side { background: var(--blueprint); color: var(--on-dark-soft); display: flex; flex-direction: column; gap: 2px; padding: 18px 10px; }
.app-logo { font-family: var(--sans); font-weight: 700; font-size: 20px; color: var(--on-dark); letter-spacing: -0.03em; margin: 0 6px 16px; display: inline-flex; align-items: baseline; }
.app-logo .u { position: relative; display: inline-block; }
.app-logo .d { position: absolute; left: 50%; top: -1px; transform: translateX(-50%); display: flex; gap: 2px; }
.app-logo .d i { width: 3px; height: 3px; border-radius: 50%; background: var(--signal); }
.app-nav { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; padding: 8px 8px; border-radius: 4px; transition: background .3s, color .3s; }
.app-nav.is-on { background: rgba(232,116,59,.16); color: var(--paper); box-shadow: inset 2px 0 0 var(--signal); }
.app-main { position: relative; }
.screen { position: absolute; inset: 0; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.screen.is-on { opacity: 1; transform: none; }
.scr-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.scr-head b { font-size: 17px; letter-spacing: -0.01em; }
.chip { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px; border-radius: 99px; background: var(--vellum); color: var(--muted); white-space: nowrap; }
.chip--ok { background: rgba(232,116,59,.14); color: var(--signal-deep); }
.rows { display: grid; }
.row { display: flex; justify-content: space-between; padding: 9px 2px; border-bottom: 1px solid var(--line-soft); }
.row--edit { background: rgba(232,116,59,.08); margin-inline: -8px; padding-inline: 10px; border-radius: 4px; border-bottom-color: transparent; }
.row--edit .price { color: var(--signal-deep); font-weight: 500; }
.toast { margin-top: auto; align-self: flex-start; font-size: 10.5px; background: var(--blueprint); color: var(--on-dark); padding: 7px 11px; border-radius: 4px; }
.sched { display: grid; grid-template-columns: 76px repeat(5, minmax(0, 1fr)); gap: 5px; align-items: center; }
.sched > span.mono { font-size: 10px; color: var(--muted); text-transform: uppercase; text-align: center; }
.sched .who { font-size: 11.5px; }
.sched i { height: 26px; border-radius: 3px; background: var(--vellum); font-style: normal; font-family: var(--mono); font-size: 9.5px; display: flex; align-items: center; justify-content: center; }
.sched .s--a { background: #dfe7f0; color: var(--ink); box-shadow: inset 2px 0 0 var(--line); }
.sched .s--b { background: rgba(232,116,59,.16); color: var(--signal-deep); box-shadow: inset 2px 0 0 var(--signal); }
.sched .s--c { background: var(--blueprint); color: var(--on-dark); }
.bar { height: 6px; border-radius: 3px; background: var(--vellum); overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--signal); }
.prep { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.prep h4 { margin: 0 0 6px; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.ck { margin: 0; padding: 6px 0 6px 20px; position: relative; border-bottom: 1px solid var(--line-soft); font-size: 12px; }
.ck::before { content: ""; position: absolute; left: 0; top: 8px; width: 11px; height: 11px; border: 1px solid var(--line); border-radius: 2px; }
.ck.on { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line); }
.ck.on::before { background: var(--signal); border-color: var(--signal); }
.inv { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
.inv span { padding: 8px 2px; border-bottom: 1px solid var(--line-soft); }
.inv .h { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.inv .o { color: var(--signal-deep); font-weight: 500; }
.kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kanban > div { background: var(--vellum); border-radius: 6px; padding: 10px; display: grid; gap: 8px; align-content: start; min-height: 150px; }
.kanban h4 { margin: 0; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.card { margin: 0; background: var(--paper); border-radius: 4px; padding: 9px 10px; font-size: 12px; line-height: 1.35; box-shadow: 0 1px 0 var(--line-soft); }
.card small { color: var(--muted); font-size: 10.5px; }
.card--hot { box-shadow: inset 3px 0 0 var(--signal), 0 1px 0 var(--line-soft); }

@media (max-width: 980px) {
  .scene--tour { height: 520vh; }
  .tour-grid { grid-template-columns: 1fr; gap: 18px; }
  .tour-copy { gap: 10px; }
  .tour-copy h2 { font-size: 1.8rem; }
  .tour-steps { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
  .tour-steps li { grid-template-columns: 1fr; gap: 4px; padding: 0; }
  .tour-steps li div p { display: none; }
  .tour-steps h3 { font-size: 0.8rem; font-family: var(--mono); letter-spacing: .04em; text-transform: uppercase; }
  .tour-steps .pt { margin: 0; }
  .ipad { border-radius: 22px; padding: 10px; max-width: 560px; }
  .ipad-screen { grid-template-columns: 1fr; border-radius: 12px; font-size: 11.5px; }
  .app-side { display: none; }
  .screen { padding: 14px; gap: 10px; }
  .scene--hero { height: 150vh; }
}
@media (max-width: 560px) {
  .ipad { aspect-ratio: 3 / 4; }
  .prep, .kanban { grid-template-columns: 1fr; gap: 8px; }
  .prep > div:nth-child(3), .kanban > div:nth-child(3) .card:nth-child(3) { display: none; }
  .kanban > div { min-height: 0; }
  .sched { grid-template-columns: 60px repeat(5, minmax(0, 1fr)); }
  .scene--hero .hero { align-items: flex-start; padding-top: 32px; }
}
@media (max-height: 700px) and (min-width: 981px) {
  .ipad { max-width: 560px; }
}

/* Reduced motion: no pinning, everything shown in place */
@media (prefers-reduced-motion: reduce) {
  .scene--hero, .scene--statement, .scene--tour { height: auto; }
  .sticky { position: relative; height: auto; overflow: visible; }
  .scene--statement .statement { padding-block: 72px; }
  .tour { padding-block: 72px; }
  .tour-steps li { opacity: 1; }
  .tour-steps p { max-height: none; }
  .screen { transition: none; }
}

/* Without the motion script, scenes are ordinary sections */
html:not(.motion) .scene { height: auto; }
html:not(.motion) .sticky { position: relative; height: auto; overflow: visible; }
html:not(.motion) .scene--hero .hero { padding-block: 72px 88px; }
html:not(.motion) .scene--statement .statement, html:not(.motion) .tour { padding-block: 72px; }
html:not(.motion) .tour-steps li { opacity: 1; }
html:not(.motion) .tour-steps p { max-height: none; }
@media (max-width: 560px) {
  .tour-steps h3 { font-size: 0.62rem; letter-spacing: 0.02em; overflow-wrap: anywhere; }
  .tour-steps { gap: 4px; }
  .scene--hero .hero-intro { padding: 16px; gap: 12px; }
  .scene--hero .hero-intro p:not(.lede) { font-size: 0.95rem; }
}

/* =========================================================
   WHITE SPACE THEME (current)
   Instrument Serif (wordmark, headlines) · Instrument Sans (body) · IBM Plex Mono (labels)
   Paper #FFFFFF · Ink #161514 · Ember #C8501E · Fog #DEDCD7
   Small lowercase type, lots of room, and the umlaut as two ember squares
   that can sit far apart. In the hero they slide together as you scroll.
   Overrides the theme blocks above.
   ========================================================= */
:root {
  --paper: #ffffff;
  --fog: #dedcd7;
  --fog-2: #f2f1ee;
  --ink: #161514;
  --ink-soft: #3b3936;
  --muted: #6a6762;
  --signal: #c8501e;
  --signal-deep: #a63f12;
  --oxblood: #161514;
  --blueprint: #161514;
  --vellum: #f2f1ee;
  --line: #c9c6c0;
  --line-soft: #e6e4df;
  --on-dark: #161514;
  --on-dark-soft: #3b3936;
  --on-dark-muted: #6a6762;
  --grid-line: transparent;

  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --stencil: "Instrument Serif", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
body { background: var(--paper); font-family: var(--sans); font-size: 1.0625rem; color: var(--ink); }

/* Everything is white unless it needs to be dark */
.blueprint, .scene--hero .hero, .scene--tour.blueprint, #contact.blueprint, .section--linen, #work, #process, #who,
.scene--statement, .scene--statement .statement {
  background: var(--paper); background-image: none; color: var(--ink);
  --on-dark: #161514; --on-dark-soft: #3b3936; --on-dark-muted: #6a6762;
}
.scene--hero, .scene--tour { background: var(--paper); --on-dark: #161514; --on-dark-soft: #3b3936; --on-dark-muted: #6a6762; }
.section + .section, .scene + .section, #work, #services, #process, #who, #contact { border-top: 1px solid var(--fog); }
.grid-bg { background: var(--fog-2); background-image: none; border: 0; }
.dark { background: var(--fog-2); color: var(--ink); --on-dark: #161514; --on-dark-soft: #3b3936; --on-dark-muted: #6a6762; }
.app-side, .toast, .sched .s--c, .site-footer-dark { --on-dark: #f2f1ee; --on-dark-soft: #dedcd7; --on-dark-muted: #a8a5a0; }
.package--feature { --on-dark: #161514; --on-dark-soft: #3b3936; --on-dark-muted: #6a6762; }

/* Type: one serif, set large but light; no bold anywhere it isn't needed */
h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; line-height: 1.02; font-size: clamp(2.6rem, 5.4vw, 4.2rem); }
h2 em { font-style: italic; color: var(--muted); font-weight: 400; }
.dark h2 em, .scene--tour h2 em { color: var(--muted); }
h3 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; }
.lede, .statement-text, .case-screen-title, .email, .about-body p:last-child { font-family: var(--serif); font-weight: 400; }
.statement-text em { font-style: italic; color: var(--signal); }
.section-lede, .package-top p, .steps p, .who p, .facts dd, .extras p, .about-body p { color: var(--ink-soft); }
.label { font-weight: 400; color: var(--muted); letter-spacing: 0.1em; }
.section { padding-block: 120px; }

/* Wordmark: small lowercase serif, square ember dots */
.wordmark { font-family: var(--serif); font-weight: 400; text-transform: none; letter-spacing: -0.01em; line-height: 0.85; }
.wordmark .dots { top: 0.02em; gap: 0.1em; }
.wordmark .dots i { width: 0.1em; height: 0.1em; background: var(--signal) !important; border-radius: 0; box-shadow: none !important; }
.wordmark--sm { font-size: 1.6rem; }
.wordmark--sm .dots { top: 0.06em; }
.wordmark--xl { font-size: clamp(4.5rem, 12vw, 9.5rem); }
.brand-sub { font-family: var(--serif); font-size: 1.6rem; font-weight: 400; letter-spacing: -0.01em; text-transform: none; color: var(--ink); }

/* Header: white, one hairline */
.site-header { background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid var(--fog); color: var(--ink);
  --on-dark: #161514; --on-dark-soft: #3b3936; --on-dark-muted: #6a6762; }
body::before { background: #fff; }
.site-nav { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 0.92rem; gap: 30px; }
.site-nav a { color: var(--ink-soft); }
.site-nav a span { display: none; }
.site-nav a:hover { color: var(--ink); }
.nav-cta { border: 0; padding: 6px 0 !important; color: var(--ink) !important; border-bottom: 1px solid var(--ink) !important; }
.nav-cta:hover { background: none; color: var(--signal) !important; border-bottom-color: var(--signal) !important; }
.menu-btn { border-color: var(--fog); color: var(--ink); font-family: var(--sans); text-transform: none; letter-spacing: 0; }
.progress-bar { background: var(--signal); height: 1px; }
.progress-pt { background: var(--signal); width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 0; box-shadow: none; }
@media (max-width: 760px) { .site-nav { background: #fff; border-bottom: 1px solid var(--fog); } .site-nav a { border-bottom-color: var(--fog); } }

/* Buttons: quiet */
.btn { border-radius: 0; font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 0.95rem; font-weight: 500; }
.btn--signal, .btn--solid { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--signal:hover, .btn--solid:hover { background: var(--signal); border-color: var(--signal); color: #fff; }
.btn--ghost, .btn--line { background: transparent; color: var(--ink); border-color: var(--fog); }
.btn--ghost:hover, .btn--line:hover { border-color: var(--ink); background: transparent; color: var(--ink); }
.btn-text { color: var(--signal); font-family: var(--sans); text-transform: none; letter-spacing: 0; }

/* Hero: white page, coordinates in the corners, dots far apart */
.scene--hero .hero { align-items: flex-end; padding-block: 56px 64px; }
.hero-layers { display: none; }
.hero-grid { align-items: end; }
.hero-sheet { position: absolute; top: 28px; left: max(20px, env(safe-area-inset-left, 0px)); right: max(20px, env(safe-area-inset-right, 0px)); max-width: none; display: flex; justify-content: space-between; font-size: 0.72rem; letter-spacing: 0.1em; color: var(--muted); }
.scene--hero .hero-grid { position: static; }
.scene--hero .hero { position: sticky; }
.hero-main { position: relative; z-index: 2; }
.hero-mark { color: var(--ink); }
.hero-rule { display: grid; gap: 10px; border: 0; padding: 0; max-width: 640px; }
.hero-sub { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1; margin-top: -0.1em; }
.tagline { margin: 6px 0 0; font-family: var(--sans); font-style: normal; font-size: 1.05rem; color: var(--muted); }
.tagline em { font-style: normal; color: var(--ink); }
.hero-intro { background: transparent; border: 0; border-top: 1px solid var(--fog); padding: 20px 0 0; }
.hero-intro p { color: var(--ink-soft); }
.lede { font-size: clamp(1.5rem, 2.2vw, 1.9rem); color: var(--ink) !important; }

.float-dots { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.fd { position: absolute; left: 0; top: 0; width: 26px; height: 26px; background: var(--signal); will-change: transform; }
.fd-a { transform: translate(30vw, 26vh); }
.fd-b { transform: translate(66vw, 26vh); }
html.motion .scene--hero .wordmark--xl .dots i { opacity: 0; }
html.motion.dots-landed .scene--hero .wordmark--xl .dots i { opacity: 1; }
html:not(.motion) .float-dots { display: none; }

/* Statement */
html.motion [data-words] .w { color: #d9d7d2; }
html.motion [data-words] .w.on { color: var(--ink); }
html.motion [data-words] em .w.on { color: var(--signal); }

/* Tour */
.tour-copy h2, .tour-steps h3 { color: var(--ink); }
.tour-steps h3 { font-family: var(--serif); font-size: 1.4rem; }
.tour-steps p { color: var(--ink-soft); }
.tour-steps .pt { border-color: var(--fog); border-radius: 0; }
.tour-steps li.is-active .pt { background: var(--signal); border-color: var(--signal); box-shadow: none; }
.tour-note { color: var(--muted); }
.ipad { background: var(--ink); box-shadow: 0 50px 90px -50px rgba(22, 21, 20, 0.45); }
.ipad-screen { background: #fff; }
.app-side { background: #161514; }
.app-logo { font-family: var(--serif); font-weight: 400; text-transform: none; font-size: 22px; letter-spacing: 0; }
.app-logo .d { top: 1px; }
.app-logo .d i { background: var(--signal); border-radius: 0; }
.app-nav { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 12px; }
.app-nav.is-on { background: rgba(255, 255, 255, 0.08); box-shadow: inset 2px 0 0 var(--signal); }
.scr-head b { font-family: var(--serif); font-weight: 400; font-size: 21px; }
.chip { background: var(--fog-2); color: var(--muted); }
.chip--ok { background: rgba(200, 80, 30, 0.1); color: var(--signal-deep); }
.row--edit { background: rgba(200, 80, 30, 0.06); }
.row--edit .price, .inv .o { color: var(--signal-deep); }
.bar span { background: var(--signal); }
.ck.on::before { background: var(--signal); border-color: var(--signal); }
.sched .s--a { background: var(--fog-2); box-shadow: inset 2px 0 0 var(--fog); }
.sched .s--b { background: rgba(200, 80, 30, 0.1); color: var(--signal-deep); box-shadow: inset 2px 0 0 var(--signal); }
.sched .s--c { background: var(--ink); }
.kanban > div { background: var(--fog-2); }
.card { background: #fff; }
.card--hot { box-shadow: inset 3px 0 0 var(--signal), 0 1px 0 var(--line-soft); }

/* Work, packages, lists */
.case-card { background: var(--fog-2); }
.case-browser { border: 1px solid var(--fog); box-shadow: 0 30px 60px -40px rgba(22, 21, 20, 0.35); }
.case-bar .sq { background: var(--signal); }
.case-screen-title { font-size: 2.2rem; }
.case-caption { color: var(--muted); }
.facts { border-top: 1px solid var(--ink); }
.facts dt { color: var(--signal-deep); }
.facts div { border-bottom-color: var(--fog); }
.extras > div, .who li, .steps { border-top: 1px solid var(--ink); }
.packages { border: 1px solid var(--fog); background: #fff; }
.package + .package { border-left: 1px solid var(--fog); }
.package--feature { background: var(--fog-2); color: var(--ink); }
.package--feature .package-top p { color: var(--ink-soft); }
.package--feature .ticks li { border-top-color: var(--fog); }
.ticks li { border-top-color: var(--fog); }
.ticks li::before { background: var(--signal); width: 6px; height: 6px; }
.package--feature .ticks li::before { background: var(--signal); }
.num, .step-num, .package--feature .num { color: var(--signal-deep); }

/* About: fog panel; big numbers barely there */
.about-role { color: var(--signal-deep); }
.dark .about-body p { color: var(--ink-soft); }
.dark .about-body p:last-child { color: var(--ink); font-size: 1.9rem; line-height: 1.2; }
.sheet-num { font-family: var(--serif); font-weight: 400; -webkit-text-stroke: 1px rgba(22, 21, 20, 0.08); }
.dark .sheet-num { -webkit-text-stroke: 1px rgba(22, 21, 20, 0.08); }

/* Contact */
.contact-head > p { color: var(--ink-soft); }
.form { background: #fff; border: 1px solid var(--fog); }
input[type="text"], input[type="email"], select { background: transparent; border-bottom-color: var(--fog); }
input:focus, select:focus, textarea:focus { border-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
textarea { background: #fff; border-color: var(--fog); }
.field label, .field legend { font-family: var(--mono); }
.checks input { accent-color: var(--signal); }
.email { color: var(--ink); font-size: 1.8rem; }

/* Footer: white */
.site-footer { background: #fff; color: var(--ink); border-top: 1px solid var(--fog); }
.site-footer .brand, .site-footer .brand-sub { color: var(--ink); }
.site-footer .wordmark .dots i { background: var(--signal); }
.footer-row p { color: var(--muted); }

@media (max-width: 760px) {
  .hero-sheet { top: 18px; font-size: 0.62rem; }
}
.scene--hero .hero.blueprint { color: var(--ink); --on-dark: #161514; --on-dark-soft: #3b3936; --on-dark-muted: #6a6762; }
.scene--hero .hero-sheet { color: var(--muted); font-weight: 400; }
.scene--hero .hero-main { position: static; }
.scene--hero .hero-mark, .scene--hero .hero-rule, .scene--hero .hero-intro { position: relative; z-index: 2; }
.hero-sub { color: var(--ink); }
.scene--hero .hero-sheet { left: max(20px, calc((100% - 1200px) / 2 + 20px)); right: max(20px, calc((100% - 1200px) / 2 + 20px)); top: 32px; }


/* ---------- White Space hero: the assembly ----------
   Loose pieces (letters, dots, labels, scraps of the real staff screens) start scattered and
   rotated, and fly into place as you scroll. Scraps (.bit) pour into the umlaut and vanish. */
.scene--hero { height: 240vh; }
.wl { display: inline-block; will-change: transform; transform-origin: 50% 50%; }
.wordmark--xl .wl { line-height: inherit; }
html.motion .scene--hero .wordmark--xl .dots i { opacity: 1; }
.mess { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
html:not(.motion) .mess, html:not(.motion) .hero-hint { display: none; }
.bit { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.bit--price { font-family: var(--serif); font-size: 56px; line-height: 1; color: var(--ink); }
.bit--86 { font-family: var(--serif); font-style: italic; font-size: 140px; line-height: 0.9; color: var(--signal); }
.bit--label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; white-space: nowrap; padding: 6px 10px; background: #fff; border: 1px solid var(--ink); color: var(--ink); }
.bit--plate { width: 132px; height: 132px; border-radius: 50%; border: 1px solid var(--ink); box-shadow: inset 0 0 0 18px #fff, inset 0 0 0 19px var(--fog); }
.bit--ring { width: 56px; height: 56px; border-radius: 50%; border: 6px solid var(--signal); }
.bit--line { width: 240px; height: 1px; background: var(--ink); }
.bit--ticket { width: 84px; height: 124px; background: #fff; border: 1px solid var(--ink); display: grid; align-content: start; gap: 9px; padding: 16px 12px; box-sizing: border-box; }
.bit--ticket i { display: block; height: 2px; background: var(--fog); }
.bit--ticket i:first-child { background: var(--ink); width: 60%; }
.bit--shot { width: 230px; height: auto; aspect-ratio: 1600 / 1112; object-fit: cover; object-position: 30% 0; border: 1px solid var(--fog); box-shadow: 0 20px 40px -24px rgba(22, 21, 20, 0.45); max-width: none; }
.bit--shot2 { width: 190px; object-position: 70% 30%; }
.bit--sq { width: 34px; height: 34px; background: var(--signal); }

.hero-index { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.hero-index li { display: inline-flex; gap: 6px; }
.hero-index b { font-weight: 500; color: var(--signal); }
.hero-hint { position: absolute; left: 0; right: 0; bottom: 22px; margin: 0; text-align: center; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); z-index: 3; }
.scene--hero .hero-main, .scene--hero .hero-intro { position: relative; z-index: 2; }
.scene--hero .hero-intro { background: rgba(255, 255, 255, 0.92); }

@media (max-width: 760px) {
  .bit--86 { font-size: 90px; }
  .bit--price { font-size: 38px; }
  .bit--plate { width: 90px; height: 90px; }
  .bit--shot { width: 150px; }
  .bit--shot2 { width: 120px; }
  .bit--line { width: 140px; }
  .bit--ticket { width: 60px; height: 90px; padding: 10px 8px; gap: 6px; }
  .bit--label { font-size: 10px; padding: 4px 7px; }
  .hero-index { font-size: 0.68rem; gap: 8px 14px; }
}

/* ---------- Tour: real screenshots in the iPad ---------- */
.ipad { aspect-ratio: 1180 / 820; max-width: 760px; padding: 14px; border-radius: 28px; background: var(--ink); box-shadow: 0 50px 90px -50px rgba(22, 21, 20, 0.5); }
.ipad-screen--shots { display: block; position: relative; background: #0f1214; border-radius: 14px; overflow: hidden; }
.ipad-screen--shots .screen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; padding: 0; opacity: 0; transform: scale(.985); transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.ipad-screen--shots .screen.is-on { opacity: 1; transform: none; }
@media (max-width: 980px) {
  .ipad { padding: 8px; border-radius: 18px; max-width: 620px; aspect-ratio: 1180 / 820; }
  .ipad-screen--shots { border-radius: 10px; }
  .tour-steps h3 { font-family: var(--mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
}
@media (max-width: 560px) {
  .ipad { aspect-ratio: 1180 / 820; padding: 6px; border-radius: 14px; }
  .tour-steps h3 { font-size: 0.56rem; letter-spacing: 0; }
  .scene--tour { height: 460vh; }
}
.scene--hero .hero-intro { z-index: 3; background: #fff; }
.scene--hero .wordmark--xl { font-size: clamp(5rem, 14vw, 11rem); }

/* Case study: real menu editor screenshot in the browser frame */
.case-shot { display: block; width: 100%; height: auto; aspect-ratio: 1400 / 1238; object-fit: cover; object-position: left top; max-height: 460px; }
.case-bar span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* =========================================================
   PULL AND CALM
   The hero ends with a reason to keep going (the stations light up, a dot drops toward the next
   chapter), a chapter rail shows what's ahead, and each section below is quieter than the last:
   more space, lighter rules, gentler reveals.
   ========================================================= */
.scene--hero .hero { align-items: center; }

/* Index: dim until the brand has assembled, then lights up station by station */
html.motion .hero-index li { color: #b9b6b0; transition: color .35s ease; }
html.motion .hero-index li b { color: #d6d3cd; transition: color .35s ease; }
html.motion .hero-index li.on { color: var(--ink); }
html.motion .hero-index li.on b { color: var(--signal); }

/* Scroll cue: a hairline with an ember square dropping down it */
.hero-cue { display: inline-flex; align-items: center; gap: 14px; margin-top: 34px; text-decoration: none; color: var(--muted); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; }
html.motion .hero-cue { opacity: 0; }
.hero-cue .cue-more { color: var(--ink); border-bottom: 1px solid var(--fog); padding-bottom: 2px; transition: border-color .3s; }
.hero-cue:hover .cue-more { border-color: var(--signal); }
.hero-cue .drop { position: relative; width: 1px; height: 54px; background: var(--fog); overflow: visible; flex-shrink: 0; }
.hero-cue .drop::after { content: ""; position: absolute; left: -3.5px; top: 0; width: 8px; height: 8px; background: var(--signal); }
.hero-cue.is-ready .drop::after { animation: dropdot 1.9s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes dropdot { 0% { transform: translateY(-4px); opacity: 0; } 18% { opacity: 1; } 78% { opacity: 1; } 100% { transform: translateY(50px); opacity: 0; } }

/* Chapter rail (wide screens) */
.rail { position: fixed; z-index: 18; top: 50%; right: max(18px, env(safe-area-inset-right, 0px)); transform: translateY(-50%); }
.rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; justify-items: end; }
.rail a { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 2px 0; }
.rail span { opacity: 0; transform: translateX(6px); transition: opacity .3s ease, transform .3s ease; }
.rail i { display: block; width: 6px; height: 6px; background: var(--fog); transition: background .3s ease, transform .3s ease; }
.rail:hover span, .rail a:focus-visible span, .rail a.is-on span { opacity: 1; transform: none; }
.rail a.is-on { color: var(--ink); }
.rail a.is-on i { background: var(--signal); transform: scale(1.35); }
.rail a:hover i { background: var(--ink); }
@media (max-width: 1180px) { .rail { display: none; } }

/* Progressively calmer: more room, lighter rules, smaller and slower reveals */
.sheet-num { display: none; }
html.motion [data-reveal] { transform: translateY(var(--rise, 28px)); transition-duration: var(--rdur, .7s), var(--rdur2, .9s); }
html.motion [data-reveal].in { transform: none; }
#work { --rise: 26px; }
#services { --rise: 20px; --rdur: .8s; --rdur2: 1s; }
#process { --rise: 14px; --rdur: .9s; --rdur2: 1.1s; }
#about { --rise: 10px; --rdur: 1s; --rdur2: 1.2s; }
#who { --rise: 8px; --rdur: 1.1s; --rdur2: 1.3s; }
#contact { --rise: 6px; --rdur: 1.2s; --rdur2: 1.4s; }
@media (min-width: 981px) {
  #work { padding-block: 120px; }
  #services { padding-block: 136px; }
  #process { padding-block: 152px; }
  #about { padding-block: 168px; }
  #who { padding-block: 176px; }
  #contact { padding-block: 200px; }
}
#process .steps, #who .who li, #about .about-body { border-color: var(--fog); }
#process .steps { border-top: 1px solid var(--fog); }
#process .steps li + li { border-left-color: var(--fog); }
#who .who li { border-top: 1px solid var(--fog); }
#process h2, #who h2, #about h2, #contact h2 { font-size: clamp(2.2rem, 4.2vw, 3.3rem); }
#about.dark { background: #fff; }
#about .about-body p:last-child { font-size: 1.6rem; }
#contact.blueprint { background: #fff; }
#contact .form { border-color: var(--fog); box-shadow: none; }
#contact .label { color: var(--muted); }
.site-footer { border-top: 1px solid var(--fog); }

@media (prefers-reduced-motion: reduce) {
  .hero-cue { opacity: 1 !important; }
  .hero-cue .drop::after { animation: none; }
}
html:not(.motion) .hero-cue { opacity: 1; }
.rail a { flex-direction: row-reverse; }

/* Phones: the pinned hero sits below the header instead of sliding under it, and its content
   starts at the top so the assembled wordmark is never hidden behind the logo bar. */
@media (max-width: 760px) {
  .scene--hero .hero-hint { bottom: 0; padding: 10px 0 14px; background: #fff; z-index: 4; pointer-events: none; }
  .scene--hero .hero-grid { gap: 24px; }
  .scene--hero .hero-cue { margin-top: 12px; }
  html.motion .scene--hero .hero.sticky { top: var(--hdr, 73px); height: calc(100vh - var(--hdr, 73px)); height: calc(100svh - var(--hdr, 73px)); align-items: flex-start; padding-top: 20px; }
}

/* =========================================================
   MENU — messy to clean
   Phones: the menu is a full white sheet under the header. When it opens, the links arrive
   scattered and tilted and snap into a clean list, while kitchen scraps pour into the
   station numbers and vanish, the same idea as the hero. The button's two ember squares
   (the umlaut) turn into a close mark.
   ========================================================= */
.menu-dots, .nav-mess, .nav-foot { display: none; }
@media (max-width: 760px) {
  .menu-btn { gap: 10px; }
  .menu-dots { display: inline-flex; gap: 4px; position: relative; width: 16px; height: 6px; }
  .menu-dots i { width: 6px; height: 6px; background: var(--signal); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
  .menu-btn[aria-expanded="true"] .menu-dots i:first-child { transform: translateX(5px) rotate(45deg) scaleX(2.2) scaleY(.3); }
  .menu-btn[aria-expanded="true"] .menu-dots i:last-child { transform: translateX(-5px) rotate(-45deg) scaleX(2.2) scaleY(.3); }

  .site-nav {
    display: flex; position: fixed; left: 0; right: 0; top: calc(var(--hdr, 73px) + env(safe-area-inset-top, 0px)); bottom: 0;
    flex-direction: column; justify-content: flex-start; gap: 0; overflow: hidden auto;
    padding: 28px max(24px, env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px));
    background: #fff; border: 0;
    visibility: hidden; opacity: 0; pointer-events: none;
    transition: opacity .3s ease, visibility 0s linear .35s;
  }
  .site-nav.is-open { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .2s ease; }
  .site-nav { overscroll-behavior: contain; }

  .site-nav a {
    position: relative; z-index: 1; display: flex; align-items: baseline; gap: 14px;
    padding: 14px 0; border-bottom: 1px solid var(--fog);
    font-family: var(--serif); font-size: clamp(2.4rem, 11vw, 3.2rem); line-height: 1; letter-spacing: -0.01em; color: var(--ink);
    transform: translate(var(--sx), var(--sy)) rotate(var(--sr)); opacity: 0;
    transition: transform .2s ease, opacity .15s ease;
  }
  .site-nav a span { display: inline; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--signal); margin: 0; transform: translateY(-1.4em); }
  .site-nav.is-open a, .site-nav.is-open .nav-foot {
    transform: none; opacity: 1;
    transition: transform .75s cubic-bezier(.16,.9,.2,1) calc(80ms + var(--i) * 70ms), opacity .35s ease calc(80ms + var(--i) * 70ms);
  }
  .site-nav a:active { color: var(--signal); }
  .site-nav .nav-cta {
    margin-top: 28px; align-self: flex-start; padding: 0 0 6px !important; border-bottom: 1px solid var(--ink) !important;
    font-family: var(--sans); font-size: 1.05rem; font-weight: 500; text-align: left;
  }
  .site-nav .nav-cta::after { content: "→"; margin-left: 10px; color: var(--signal); }

  .nav-foot {
    display: flex; flex-direction: column; gap: 6px; margin: auto 0 0; padding-top: 32px;
    font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
    opacity: 0; transform: translateY(12px); transition: opacity .15s ease;
  }
  .nav-foot span:first-child { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 0.95rem; color: var(--ink-soft); }

  /* Scraps: scattered for a beat, then they pour toward the numbers and vanish */
  .nav-mess { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
  .nav-bit {
    position: absolute; left: var(--x); top: var(--y); opacity: 0;
    font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.1em; color: var(--ink);
    border: 1px solid var(--ink); padding: 4px 8px; background: #fff; white-space: nowrap;
    transform: rotate(var(--r));
  }
  .nav-bit--sq { width: 22px; height: 22px; padding: 0; border: 0; background: var(--signal); }
  .nav-bit--ring { width: 64px; height: 64px; padding: 0; border: 7px solid var(--signal); border-radius: 50%; background: none; }
  .site-nav.is-open .nav-bit { animation: navbit 1s cubic-bezier(.5,0,.2,1) forwards; }
  .site-nav.is-open .nav-bit:nth-child(2n) { animation-delay: 60ms; }
  .site-nav.is-open .nav-bit:nth-child(3n) { animation-delay: 120ms; }
  @keyframes navbit {
    0%   { opacity: 0; transform: translate(0, 10px) rotate(var(--r)) scale(.9); }
    18%  { opacity: 1; transform: translate(0, 0) rotate(var(--r)) scale(1); }
    45%  { opacity: 1; transform: translate(0, 0) rotate(var(--r)) scale(1); }
    100% { opacity: 0; left: 24px; top: 40px; transform: translate(0, 0) rotate(0deg) scale(0); }
  }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .site-nav a, .site-nav .nav-foot { transform: none !important; transition: none !important; }
  .site-nav.is-open a, .site-nav.is-open .nav-foot { opacity: 1; }
  .nav-mess { display: none; }
}

/* Phones: the statement sits near the top of its pinned screen, so it shows up as soon as
   the hero scrolls away instead of half a screen later, and its scene is shorter. */
@media (max-width: 760px) {
  html.motion .scene--statement { height: 170vh; }
  html.motion .scene--statement .statement.sticky { top: var(--hdr, 73px); height: calc(100vh - var(--hdr, 73px)); height: calc(100svh - var(--hdr, 73px)); align-items: flex-start; padding-top: 14vh; }
}

/* About: headshot and qualifications */
.about-photo { margin: 18px 0 0; max-width: 420px; }
.about-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 1492; object-fit: cover; background: #1a1714; }
.about-photo figcaption { margin-top: 10px; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.about-facts { margin: 8px 0 32px; border-top: 1px solid var(--fog); }
.about-facts div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--fog); }
.about-facts dt { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal-deep, var(--signal)); padding-top: 3px; }
.about-facts dd { margin: 0; color: var(--ink); }
@media (max-width: 980px) { .about-photo { max-width: 360px; } }
@media (max-width: 560px) {
  .about-photo { max-width: none; margin-inline: calc(-1 * max(20px, env(safe-area-inset-left, 0px))); }
  .about-photo figcaption { padding-inline: 20px; }
  .about-facts div { grid-template-columns: 1fr; gap: 2px; }
}
.about-facts .award { display: block; }
.about-facts .award + .award { margin-top: 4px; }

/* =========================================================
   À LA CARTE
   Services read like a menu: the Foundation up top, then three courses of features.
   Each feature is a toggle; chosen ones fill their ember square and go into the order.
   ========================================================= */
.foundation { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 28px; align-items: baseline; padding: 22px 30px; margin-bottom: -1px; border: 1px solid var(--fog); background: #fff; }
.foundation .label { grid-column: 1 / -1; }
.foundation h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.7rem; }
.foundation p { margin: 0; color: var(--ink-soft); max-width: 62ch; }
.carte .package-top h3 { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; }
.dishes { list-style: none; margin: 0; padding: 0; display: grid; }
.dish {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
  display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 2px 14px; align-items: baseline;
  padding: 12px 0; border-top: 1px solid var(--fog); -webkit-tap-highlight-color: transparent;
}
.dish-box { grid-row: 1 / 3; width: 10px; height: 10px; border: 1px solid var(--signal); transform: translateY(1px); transition: background .2s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
.dish-name { font-size: 0.98rem; font-weight: 500; color: var(--ink); }
.dish-desc { font-size: 0.86rem; color: var(--muted); }
.dish:hover .dish-name { color: var(--signal); }
.dish:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
.dish[aria-pressed="true"] .dish-box { background: var(--signal); transform: translateY(1px) rotate(45deg); }
.dish[aria-pressed="true"] .dish-name { color: var(--ink); }
.order-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; padding: 18px 0; border-top: 1px solid var(--fog); border-bottom: 1px solid var(--fog); }
.order-count { margin: 0; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.order-n { display: inline-block; min-width: 1.4em; color: var(--signal); font-weight: 600; }
.order-hint { margin: 0; flex: 1 1 260px; color: var(--ink-soft); font-size: 0.95rem; }
.order-bar:not(.has-order) .order-go { opacity: .55; }
@media (max-width: 760px) {
  .foundation { grid-template-columns: 1fr; padding: 20px; }
  .carte .package + .package { border-left: 0; border-top: 1px solid var(--fog); }
}

/* Scroll cue, scroll-driven: the square travels the line as you scroll (--drop 0 → 1),
   lands at the bottom, and the hero holds until it has landed */
html.motion .hero-cue.is-ready .drop::after { animation: none; }
html.motion .hero-cue .drop::after { transform: translateY(calc(var(--drop, 0) * 46px)); opacity: 1; }
html.motion .hero-cue .drop { background: linear-gradient(var(--signal), var(--signal)) top / 1px calc(var(--drop, 0) * 100%) no-repeat, var(--fog); }
html.motion .scene--hero { height: 270vh; }

/* =========================================================
   NEW AT EDEN — permanent beta
   A real screen beside a dated changelog of what shipped lately.
   ========================================================= */
#new { --rise: 14px; }
.new-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.new-shot { margin: 0; display: grid; gap: 14px; }
.new-shot img { display: block; width: 100%; height: auto; }
.new-shot figcaption { font-size: 0.72rem; letter-spacing: 0.04em; color: var(--muted); line-height: 1.6; }
.changelog { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.changelog li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--fog); }
.changelog time { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); padding-top: 4px; }
.changelog h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.35rem; line-height: 1.15; }
.changelog p { margin: 4px 0 0; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.5; }
@media (max-width: 980px) { .new-grid { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 560px) { .changelog li { grid-template-columns: 1fr; gap: 4px; } }

/* Tour: seven stations now (Temps and Financials added) */
html.motion .scene--tour { height: 720vh; }
@media (max-width: 760px) {
  html.motion .scene--tour { height: 600vh; }
  .tour-steps { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 8px; }
}

/* =========================================================
   ROP PLAN — what the HACCP plan asks for, and what the system does on its own
   ========================================================= */
#rop { background: var(--fog-2, #F2F1EE); }
.rop-table { border-top: 1px solid var(--ink); margin-bottom: 56px; }
.rop-row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 32px; padding: 20px 0; border-bottom: 1px solid var(--fog); align-items: baseline; }
.rop-row h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.45rem; line-height: 1.15; }
.rop-row p { margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.55; max-width: 62ch; }
.rop-row--head { padding: 12px 0; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.rop-shots { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "main hub" "main val" "log log"; gap: 24px; align-items: start; }
.rop-shot { margin: 0; display: grid; gap: 10px; }
.rop-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--fog); background: #fff; box-shadow: 0 30px 60px -44px rgba(22, 21, 20, 0.45); }
.rop-shot figcaption { font-size: 0.7rem; letter-spacing: 0.06em; color: var(--muted); }
.rop-shot--main { grid-area: main; }
.rop-shots .rop-shot:nth-child(2) { grid-area: hub; }
.rop-shots .rop-shot:nth-child(3) { grid-area: val; }
.rop-shot--log { grid-area: log; max-width: 820px; justify-self: end; width: 100%; }
.rop-note { margin-top: 20px; }
#new .changelog a { color: var(--signal); }
@media (max-width: 980px) {
  .rop-row { grid-template-columns: 1fr; gap: 6px; }
  .rop-row--head { display: none; }
  .rop-shots { grid-template-columns: 1fr; grid-template-areas: "main" "hub" "val" "log"; }
  .rop-shot--log { max-width: none; }
}
.rop-shot--log img { max-height: 460px; object-fit: cover; object-position: top; }
.rop-shots { align-items: start; grid-auto-rows: auto; }

/* =========================================================
   LIVING BRAND · ONE HOUSE, THREE BRANCHES
   The two squares are the brand's DNA. Each branch expresses them differently:
     Design       the squares turn on point (diamonds), a composition
     Hospitality  two round seats at one table, leaning in
     Technology   two pixels taking turns, a signal
   The header mark follows the branch you are reading (html[data-branch]) and Eden's live service
   hours (html[data-live]: rest = apart, prep = leaning in, service = together).
   ========================================================= */
.site-header .wordmark--sm .dots i { transition: transform .6s cubic-bezier(.2,.8,.2,1), border-radius .5s ease, opacity .3s ease; }
html[data-live="rest"] .site-header .wordmark--sm .dots i:first-child { transform: translateX(-0.03em); }
html[data-live="rest"] .site-header .wordmark--sm .dots i:last-child { transform: translateX(0.03em); }
html[data-live="prep"] .site-header .wordmark--sm .dots i:first-child { transform: translateX(0.015em); }
html[data-live="prep"] .site-header .wordmark--sm .dots i:last-child { transform: translateX(-0.015em); }
html[data-live="service"] .site-header .wordmark--sm .dots i:first-child { transform: translateX(0.045em); }
html[data-live="service"] .site-header .wordmark--sm .dots i:last-child { transform: translateX(-0.045em); }
html[data-branch="design"] .site-header .wordmark--sm .dots i { transform: rotate(45deg) scale(0.92) !important; }
html[data-branch="hospitality"] .site-header .wordmark--sm .dots i { border-radius: 50% !important; }
html[data-branch="hospitality"] .site-header .wordmark--sm .dots i:first-child { transform: translateX(0.03em) !important; }
html[data-branch="hospitality"] .site-header .wordmark--sm .dots i:last-child { transform: translateX(-0.03em) !important; }
html[data-branch="technology"] .site-header .wordmark--sm .dots i { transform: none !important; animation: pixel 1.6s steps(1) infinite; }
html[data-branch="technology"] .site-header .wordmark--sm .dots i:last-child { animation-delay: .8s; }
@keyframes pixel { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.site-nav a.is-here { color: var(--ink); }
.site-nav a.is-here::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; background: var(--signal); vertical-align: middle; }
@media (max-width: 760px) { .site-nav a.is-here::before { display: none; } }

/* Branch marks (the same two squares, three expressions) */
.bmark { position: relative; display: inline-flex; gap: 12px; align-items: center; height: 26px; }
.bmark i { display: block; width: 22px; height: 22px; background: var(--signal); transition: transform .6s cubic-bezier(.2,.8,.2,1), border-radius .5s ease; }
.bmark--design i { transform: rotate(45deg) scale(0.9); }
.bmark--hospitality { gap: 6px; }
.bmark--hospitality i { border-radius: 50%; }
.bmark--technology i { animation: pixel 1.6s steps(1) infinite; }
.bmark--technology i:last-child { animation-delay: .8s; }
.bmark--sm { gap: 5px; height: 10px; margin-right: 8px; vertical-align: -1px; }
.bmark--sm i { width: 8px; height: 8px; }
.bmark--sm.bmark--hospitality { gap: 3px; }
@media (hover: hover) {
  .branch:hover .bmark--design i:first-child { transform: rotate(135deg) translate(-4px, 4px); }
  .branch:hover .bmark--design i:last-child { transform: rotate(-45deg) translate(4px, -4px); }
  .branch:hover .bmark--hospitality { gap: 0; }
}

/* Three branches */
.branch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--fog); background: #fff; }
.branch { display: flex; flex-direction: column; gap: 14px; padding: 34px 30px 30px; text-decoration: none; color: var(--ink); transition: background .3s ease; }
.branch + .branch { border-left: 1px solid var(--fog); }
.branch:hover { background: var(--fog-2); }
.branch .bmark { margin-bottom: 18px; }
.branch-num { font-size: 0.72rem; letter-spacing: 0.12em; color: var(--signal); }
.branch h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 3vw, 2.6rem); line-height: 1; }
.branch p { margin: 0; color: var(--ink-soft); }
.branch ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; }
.branch ul li { padding: 9px 0; border-top: 1px solid var(--fog); }
.branch-go { margin-top: auto; padding-top: 14px; font-weight: 500; }
.branch-go span { color: var(--signal); transition: margin-left .25s ease; }
.branch:hover .branch-go span { margin-left: 6px; }
.live-strip { display: grid; grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px 24px; align-items: baseline; margin-top: 28px; padding: 18px 0; border-top: 1px solid var(--fog); border-bottom: 1px solid var(--fog); }
.live-now { margin: 0; font-size: 0.74rem; letter-spacing: 0.06em; color: var(--ink); line-height: 1.6; }
.live-why { margin: 0; font-size: 0.92rem; color: var(--ink-soft); }
.live-dot { display: inline-block; width: 8px; height: 8px; background: var(--signal); animation: pixel 2s steps(1) infinite; }
html[data-live="service"] .live-dot { animation-duration: .9s; }
.footer-live { display: flex; align-items: center; gap: 8px; }
@media (max-width: 980px) {
  .branch-grid { grid-template-columns: 1fr; }
  .branch + .branch { border-left: 0; border-top: 1px solid var(--fog); }
  .live-strip { grid-template-columns: auto minmax(0, 1fr); }
  .live-why { grid-column: 1 / -1; }
}

/* Branch sections */
.branch-sec .section-head .label { display: inline-flex; align-items: center; }
#design { background: #fff; }
#hospitality { background: var(--fog-2); }
.branch-sec--tech { padding-bottom: 24px; }
.design-show { display: grid; grid-template-columns: minmax(0, 1fr) 210px; grid-template-areas: "main phone" "menu menu"; gap: 32px 40px; margin-bottom: 56px; }
.design-main { grid-area: main; margin: 0; display: grid; gap: 12px; }
.design-phone { grid-area: phone; margin: 0; align-self: end; }
.design-phone img { display: block; width: 100%; height: auto; border-radius: 24px; border: 6px solid #161514; box-shadow: 0 30px 60px -36px rgba(22, 21, 20, 0.5); }
.design-menu { grid-area: menu; margin: 0; display: grid; gap: 12px; width: 78%; justify-self: end; }
.design-show img { display: block; width: 100%; height: auto; }
.design-show figcaption { font-size: 0.72rem; letter-spacing: 0.04em; color: var(--muted); line-height: 1.6; }
.offer-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); border-top: 1px solid var(--ink); }
.offer-list li { padding: 20px 22px 22px 0; border-bottom: 1px solid var(--fog); }
.offer-list h3 { margin: 0 0 6px; font-family: var(--serif); font-weight: 400; font-size: 1.4rem; line-height: 1.1; }
.offer-list p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.5; }
.offer-list a { color: var(--signal); }
.offer-list--col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.hosp-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.hosp-proof { background: #fff; border: 1px solid var(--fog); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.hosp-proof ol { list-style: none; margin: 0; padding: 0; display: grid; font-size: 0.78rem; letter-spacing: 0.04em; }
.hosp-proof li { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--fog); }
.hosp-proof li b { color: var(--signal); font-weight: 500; }
.hosp-proof p { margin: 0; color: var(--ink-soft); }
.hosp-proof .btn { align-self: flex-start; }
.tech-jump { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; }
.tech-jump a { text-decoration: none; color: var(--ink); border: 1px solid var(--fog); padding: 10px 14px; background: #fff; }
.tech-jump a:hover { border-color: var(--signal); color: var(--signal); }
.extras a { color: var(--signal); }
@media (max-width: 980px) {
  .design-show { grid-template-columns: minmax(0, 1fr) 150px; }
  .hosp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .design-show { grid-template-columns: 1fr; grid-template-areas: "main" "menu" "phone"; }
  .design-phone { width: 62%; justify-self: center; }
  .design-menu { width: 100%; }
  .offer-list--col { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .bmark--technology i, html[data-branch="technology"] .site-header .wordmark--sm .dots i, .live-dot { animation: none; }
}
/* the header squares a touch larger so their branch shapes read; the progress marker follows the branch too */
.site-header .wordmark--sm .dots i { width: 0.13em; height: 0.13em; }
.site-header .wordmark--sm .dots { gap: 0.07em; top: 0.03em; }
.progress-pt { transition: transform .5s cubic-bezier(.2,.8,.2,1), border-radius .4s ease; width: 7px !important; height: 7px !important; margin: -3.5px 0 0 -3.5px !important; }
html[data-branch="design"] .progress-pt { transform: rotate(45deg); }
html[data-branch="hospitality"] .progress-pt { border-radius: 50% !important; }
html[data-branch="technology"] .progress-pt { animation: pixel 1.6s steps(1) infinite; }

/* =========================================================
   BRAND v2.0 ON THE SITE — lockups, the mark lab, branch shapes on any wordmark
   ========================================================= */
.wm-design .dots i { transform: rotate(45deg) scale(0.9); }
.wm-hospitality .dots { gap: 0.04em !important; }
.wm-hospitality .dots i { border-radius: 50% !important; }
.wm-technology .dots i { animation: pixel 1.6s steps(1) infinite; }
.wm-technology .dots i:last-child { animation-delay: .8s; }
.lockup { font-family: var(--serif); font-weight: 400; display: inline-flex; align-items: baseline; gap: 0.28em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.lockup .wordmark { font-size: 1em; }
.lockup em { font-style: italic; color: var(--muted); }
.branch h3.lockup { font-size: clamp(1.9rem, 2.8vw, 2.4rem); line-height: 1; }
.lockup--lg { margin: 0 0 6px; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1; }
.lockup-n { align-self: center; margin-left: 0.4em; font-family: var(--mono); font-style: normal; font-size: 0.7rem; letter-spacing: 0.12em; color: var(--signal); }
.brand-branch { font-family: var(--serif); font-style: italic; font-size: 1.6rem; color: var(--muted); opacity: 0; transform: translateY(4px); transition: opacity .4s ease, transform .4s ease; }
.brand-branch.is-on { opacity: 1; transform: none; }
@media (max-width: 760px) { .brand-branch { display: none; } }

/* The mark, live */
.mark-lab { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 20px; }
.mark-stage, .mark-ctl { background: #fff; border: 1px solid var(--fog); }
.mark-stage { padding: 26px 34px 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 330px; box-sizing: border-box; }
.mark-cap { margin: 0; display: flex; justify-content: space-between; gap: 12px; font-size: 0.66rem; letter-spacing: 0.12em; color: var(--muted); }
.mark-big { display: flex; align-items: flex-end; gap: 0.6rem; flex-wrap: wrap; }
.wm-lab { font-size: clamp(5rem, 11vw, 10.5rem); line-height: 0.82; }
.wm-lab .dots { transition: gap .6s cubic-bezier(.2,.8,.2,1); }
.wm-lab .dots i { width: 0.13em !important; height: 0.13em !important; transition: transform .6s cubic-bezier(.2,.8,.2,1), border-radius .5s ease; }
.mark-words { display: flex; flex-direction: column; gap: 4px; padding-bottom: 0.6rem; font-family: var(--serif); }
.mark-creative { font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1; }
.mark-words em { font-size: clamp(1.3rem, 2vw, 1.9rem); line-height: 1; color: var(--muted); }
.mark-tag { margin: 0; color: var(--ink-soft); }
.mark-tag span { color: var(--ink); }
.mark-lab[data-l="rest"] .wm-lab .dots { gap: 0.17em; }
.mark-lab[data-l="prep"] .wm-lab .dots { gap: 0.08em; }
.mark-lab[data-l="service"] .wm-lab .dots { gap: 0.02em; }
.mark-lab[data-b="design"] .wm-lab .dots i { transform: rotate(45deg) scale(0.9); }
.mark-lab[data-b="hospitality"] .wm-lab .dots i { border-radius: 50% !important; }
.mark-lab[data-b="hospitality"][data-l="rest"] .wm-lab .dots { gap: 0.06em; }
.mark-lab[data-b="technology"] .wm-lab .dots i { animation: pixel 1.6s steps(1) infinite; }
.mark-lab[data-b="technology"] .wm-lab .dots i:last-child { animation-delay: .8s; }
.mark-ctl { padding: 24px 26px; display: flex; flex-direction: column; gap: 18px; }
.mark-group { display: flex; flex-direction: column; gap: 8px; }
.mark-group > .mono { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.mark-btns { display: grid; gap: 6px; }
.mark-btns--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mark-btns--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mark-btns button { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; min-height: 44px; border: 1px solid var(--fog); background: #fff; color: var(--ink); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.mark-btns button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.mark-btns button:hover { border-color: var(--ink); }
.mark-rule { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--fog); color: var(--ink-soft); font-size: 0.95rem; line-height: 1.5; }
.mark-ctl .live-now { display: flex; gap: 10px; align-items: baseline; }
.mark-legend { grid-column: 1 / -1; list-style: none; margin: 0; padding: 14px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; border-top: 1px solid var(--fog); border-bottom: 1px solid var(--fog); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--ink-soft); }
.mark-legend li { display: flex; align-items: center; gap: 12px; }
.mark-legend b { color: var(--ink); font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; }
.lg-sq { display: inline-flex; }
.lg-sq i { display: block; width: 10px; height: 10px; background: var(--signal); }
.lg-rest { gap: 14px; } .lg-prep { gap: 7px; } .lg-service { gap: 2px; }

/* Footer lockups */
.footer-branches { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 1.35rem; }
.footer-branches .lockup:hover em { color: var(--signal); }
.footer-row { flex-wrap: wrap; gap: 18px 32px; }
@media (max-width: 980px) {
  .mark-lab { grid-template-columns: 1fr; }
  .mark-legend { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .mark-stage { padding: 20px; min-height: 0; }
  .mark-cap span:last-child { display: none; }
  .footer-branches { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .wm-technology .dots i, .mark-lab[data-b="technology"] .wm-lab .dots i { animation: none; }
}

/* =========================================================
   TECHNOLOGY, CONNECTED (replaces the blinking squares)
   The two squares stay still and square, joined by a fine signal line:
   two nodes of one connected system.
   ========================================================= */
.wm-technology .dots i,
.bmark--technology i,
html[data-branch="technology"] .site-header .wordmark--sm .dots i,
.mark-lab[data-b="technology"] .wm-lab .dots i,
html[data-branch="technology"] .progress-pt { animation: none !important; opacity: 1 !important; }
.wm-technology .dots::before,
html[data-branch="technology"] .site-header .wordmark--sm .dots::before,
.mark-lab[data-b="technology"] .wm-lab .dots::before,
.bmark--technology::before {
  content: ""; position: absolute; left: 0.05em; right: 0.05em; top: 50%; height: max(1px, 0.022em); margin-top: max(-0.5px, -0.011em); background: var(--signal);
}
.bmark--technology::before { left: 6px; right: 6px; height: 2px; margin-top: -1px; }
.bmark--sm.bmark--technology::before { left: 3px; right: 3px; height: 1px; margin-top: 0; }
.wm-technology .dots, .mark-lab .wm-lab .dots, .site-header .wordmark--sm .dots { overflow: visible; }
.mark-lab[data-b="technology"] .wm-lab .dots::before { transition: opacity .4s ease; }
.mark-lab:not([data-b="technology"]) .wm-lab .dots::before { content: none; }
html[data-branch="technology"] .progress-pt { background: transparent !important; border: 1.5px solid var(--signal); box-sizing: border-box; }
.branch .bmark { align-self: flex-start; }

/* =========================================================
   TECHNOLOGY, PIXEL (option C; replaces the connected line)
   Each square is cut into a 2 x 2 grid of smaller squares. A mask makes the gaps truly
   transparent, so it works on any background.
   ========================================================= */
.wm-technology .dots::before,
html[data-branch="technology"] .site-header .wordmark--sm .dots::before,
.mark-lab[data-b="technology"] .wm-lab .dots::before,
.bmark--technology::before { content: none !important; }
.wm-technology .dots i,
.bmark--technology i,
html[data-branch="technology"] .site-header .wordmark--sm .dots i,
.mark-lab[data-b="technology"] .wm-lab .dots i,
html[data-branch="technology"] .progress-pt {
  -webkit-mask-image: linear-gradient(90deg, #000 42%, transparent 42%, transparent 58%, #000 58%), linear-gradient(180deg, #000 42%, transparent 42%, transparent 58%, #000 58%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, #000 42%, transparent 42%, transparent 58%, #000 58%), linear-gradient(180deg, #000 42%, transparent 42%, transparent 58%, #000 58%);
  mask-composite: intersect;
}
html[data-branch="technology"] .progress-pt { background: var(--signal) !important; border: 0 !important; width: 9px !important; height: 9px !important; margin: -4.5px 0 0 -4.5px !important; }
/* at header size the cut needs a little more room to read */
html[data-branch="technology"] .site-header .wordmark--sm .dots i { width: 0.16em !important; height: 0.16em !important; }

/* =========================================================
   CUSTOM SYSTEMS + RESPONSIVE IDENTITY (concept)
   ========================================================= */
.custom-steps { list-style: none; margin: 8px 0 40px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.custom-steps li { padding: 18px 20px 20px 0; display: flex; flex-direction: column; gap: 8px; }
.custom-steps li + li { padding-left: 20px; border-left: 1px solid var(--fog); }
.custom-steps .mono { font-size: 0.7rem; letter-spacing: 0.12em; color: var(--signal); }
.custom-steps h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.35rem; line-height: 1.1; }
.custom-steps p { margin: 0; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.5; }
.custom-eden { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 10px 32px; padding: 24px 28px; background: var(--fog-2); border: 1px solid var(--fog); margin-bottom: 36px; }
.custom-eden .label { padding-top: 4px; }
.custom-eden ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; }
.custom-eden li { position: relative; padding-left: 18px; color: var(--ink); }
.custom-eden li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; background: var(--signal); }
.custom-eden p { grid-column: 2; margin: 6px 0 0; font-family: var(--serif); font-size: 1.3rem; color: var(--ink); }
.concept { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 20px 56px; padding: 40px 0 44px; margin-bottom: 40px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--fog); }
.concept-head h3 { margin: 8px 0 12px; font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1; }
.concept-head p { margin: 0; color: var(--ink-soft); line-height: 1.6; }
.concept-rules { list-style: none; margin: 0; padding: 0; counter-reset: rule; display: grid; gap: 0; }
.concept-rules li { counter-increment: rule; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); padding: 14px 0; border-bottom: 1px solid var(--fog); color: var(--ink-soft); line-height: 1.5; }
.concept-rules li::before { content: "0" counter(rule); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--signal); padding-top: 4px; }
.concept-rules b { color: var(--ink); font-weight: 600; }
.concept-ex { grid-column: 1 / -1; margin: 0; font-family: var(--serif); font-size: 1.35rem; line-height: 1.35; max-width: 60ch; }
.concept-ex a { color: var(--signal); }
.lab-intro { margin: 28px 0 0; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.lab-intro + .mark-lab { margin-top: 12px; }
@media (max-width: 1100px) { .custom-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .custom-steps li + li { border-left: 0; padding-left: 0; } .custom-steps li { border-bottom: 1px solid var(--fog); padding-right: 20px; } }
@media (max-width: 860px) {
  .concept { grid-template-columns: 1fr; }
  .custom-eden { grid-template-columns: 1fr; }
  .custom-eden ul { grid-template-columns: 1fr; }
  .custom-eden p { grid-column: 1; }
}
@media (max-width: 560px) { .custom-steps { grid-template-columns: 1fr; } }
/* service states removed: the lab mark keeps the standard spacing */
.mark-lab .wm-lab .dots { gap: 0.1em; }
.mark-lab[data-b="hospitality"] .wm-lab .dots { gap: 0.05em; }

/* ---------- Client portal link (header) ---------- */
.site-nav a.nav-portal .nav-ext { display: inline; color: var(--signal); margin: 0 0 0 4px; }
@media (min-width: 761px) {
  .site-nav a.nav-portal { padding-left: 18px; border-left: 1px solid var(--fog); }
}
@media (max-width: 760px) {
  /* in the open menu: a small mono link under "Start a project" */
  .site-nav .nav-cta { order: 1; }
  .site-nav a.nav-portal {
    order: 2; align-self: flex-start; gap: 6px; margin-top: 18px; padding: 0; border-bottom: 0;
    font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft);
  }
  .site-nav a.nav-portal .nav-ext { transform: none; font-size: 1em; }
  .site-nav .nav-foot { order: 3; }
}

/* =====================================================================
   G2 CURVES
   Every rounded corner is a squircle (superellipse, n = 4): curvature eases to zero where
   the corner meets the straight edge, so edges flow without the "kink" of a circular corner.
   Chrome/Edge draw it with corner-shape; js/g2.js draws the same curve in Safari and Firefox.
   The brand's squares (the ü dots, branch marks, rail and progress markers, bullets) stay square,
   and circles stay circles.
   ===================================================================== */
@property --g2 { syntax: '<integer>'; inherits: false; initial-value: 0; }
:root { --g2-xs: 5px; --g2-sm: 12px; --g2-md: 20px; --g2-lg: 28px; --g2-xl: 40px; }

:is(
  .btn, .menu-btn, .tech-jump a, .mark-btns button, textarea,
  .bit--label, .bit--ticket, .bit--shot, .nav-bit:not(.nav-bit--sq):not(.nav-bit--ring), .dish-box,
  .form, .hosp-proof, .custom-eden, .foundation, .packages, .branch-grid,
  .mark-stage, .mark-ctl, .case-card, .case-browser, .design-phone img, .rop-shot img,
  .about-photo img, .ipad, .ipad-screen, .ipad-screen--shots, .order-go
) {
  --g2: 1;
  border-radius: var(--g2-r);
  corner-shape: squircle;
}
:where(
  .btn, .menu-btn, .tech-jump a, .mark-btns button, textarea,
  .bit--label, .bit--ticket, .bit--shot, .nav-bit:not(.nav-bit--sq):not(.nav-bit--ring), .dish-box,
  .form, .hosp-proof, .custom-eden, .foundation, .packages, .branch-grid,
  .mark-stage, .mark-ctl, .case-card, .case-browser, .design-phone img, .rop-shot img,
  .about-photo img, .ipad, .ipad-screen, .ipad-screen--shots, .order-go
) { --g2-r: var(--g2-sm); }   /* each one sets its own radius; nothing inherits a parent's */


.btn, .menu-btn, .tech-jump a, .mark-btns button, .order-go { --g2-r: var(--g2-sm); }
textarea { --g2-r: var(--g2-sm); }
.dish-box { --g2-r: 3px; }
.bit--label, .nav-bit { --g2-r: 8px; }
.bit--ticket { --g2-r: var(--g2-sm); }
.bit--shot { --g2-r: var(--g2-sm); }
.form, .hosp-proof, .custom-eden, .mark-stage, .mark-ctl { --g2-r: var(--g2-md); }
.branch-grid, .packages { --g2-r: var(--g2-md); overflow: hidden; }
.foundation { --g2-r: var(--g2-md) var(--g2-md) 0 0; }
.foundation + .packages { --g2-r: 0 0 var(--g2-md) var(--g2-md); }
.case-card { --g2-r: var(--g2-lg); }
.case-browser { --g2-r: var(--g2-md); overflow: hidden; }
.rop-shot img, .about-photo img { --g2-r: var(--g2-md); }
.design-phone img { --g2-r: 40px; }
.ipad { --g2-r: var(--g2-xl); }
.ipad-screen, .ipad-screen--shots { --g2-r: 26px; overflow: hidden; }   /* concentric: outer radius minus the 14px bezel */
@media (max-width: 980px) {
  .ipad { --g2-r: 26px; }
  .ipad-screen, .ipad-screen--shots { --g2-r: 18px; }
}
@media (max-width: 560px) {
  .ipad { --g2-r: 18px; }
  .ipad-screen, .ipad-screen--shots { --g2-r: 12px; }
  .about-photo img { --g2-r: 0; }
}
/* the shadow wrapper the Safari fallback adds keeps the layout of what it wraps */
.g2-shadow { max-width: 100%; }