/* Klyvare Studio — v3. Mobile first; breakpoints 48em (768px), 64em (1024px), 80em (1280px). */

/* Palette "Midnight & Ultramarine" (2026-10-13b). Contrast, measured (WCAG 2.x):
     ink on paper 16.9 · muted on paper 6.0 / paper-2 5.5 · signal-text on paper 6.8
     paper on signal 5.6 (buttons, contact, services card) · muted-dark on ink 8.1 · signal-light on ink 8.8
   Old palette "Paper & Signal orange", to restore swap these values back into :root (README has the full list):
     --paper #f3eee5  --paper-2 #ebe4d8  --ink #15120e  --ink-2 #26211b  --muted #5e564c  --muted-dark #a39a8d
     --line #d6cdbf  --signal #ff5a1f  --signal-text #b23a0e  (text on signal was ink, not paper).
   The backup in work/studio-v3-backup-2026-10-13b/ has the old site exactly as it was. */

@font-face {
  font-family: "Instrument Serif";
  src: url("assets/fonts/instrument-serif-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("assets/fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("assets/fonts/bricolage-grotesque-var.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}

:root {
  --paper: #f2f0eb;
  --paper-2: #e8e5de;
  --ink: #0c0e1a;
  --ink-2: #181b2c;
  --muted: #545a6e;
  --muted-dark: #a3a8bd;
  --line: #d6d3cb;
  --signal: #3d3dff;          /* ultramarine: decoration + backgrounds with paper text (5.6:1) */
  --signal-text: #3434e0;     /* accent text on paper (6.8:1) */
  --signal-light: #a3a8ff;    /* accent text and lines on ink (8.8:1) */
  --on-signal: var(--paper);
  --glow: #7d6bff;            /* second stop in gradients */
  --todo-bg: #fff1a8;
  --todo-line: #8a6d00;

  --serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --gutter: clamp(1.25rem, 5vw, 3rem);
  --max: 82rem;
  --radius: 1.25rem;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --header-h: 4.25rem;
  --intro: 0s;                /* extra delay for the hero entrance while the intro curtain plays */
}
.js:not(.intro-seen) { --intro: .55s; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-optical-sizing: auto;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--signal); color: var(--on-signal); }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 1rem; top: -4rem; z-index: 250;
  background: var(--ink); color: var(--paper); padding: .75rem 1rem; border-radius: .5rem;
}
.skip:focus { top: 1rem; }

/* Placeholders Simon must fill in — loud on purpose. */
.todo {
  display: inline;
  font-family: var(--mono);
  font-size: .78em;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--ink);
  background: var(--todo-bg);
  outline: 1.5px dashed var(--todo-line);
  outline-offset: 1px;
  padding: .1em .4em;
  border-radius: .25em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- Type ---------- */
.display, .h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: .98;
  text-wrap: balance;
}
.display em, .h2 em { font-style: italic; color: var(--signal-text); }
.h2 { font-size: clamp(2.5rem, 8.4vw, 5.25rem); max-width: 18ch; }
.label {
  display: flex; align-items: center; gap: .75rem;
  font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.5rem;
}
.label span {
  display: inline-grid; place-items: center;
  min-width: 2.25rem; height: 1.6rem; padding-inline: .5rem;
  border: 1.5px solid currentColor; border-radius: 99px;
  font-size: .75rem; letter-spacing: .04em;
}
.label--light { color: var(--muted-dark); }
.label--ink { color: #e6e7ff; }   /* on the ultramarine contact sheet (5.2:1) */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .875rem; font-weight: 500; color: var(--muted);
  margin-bottom: 1.5rem;
}
.dot {
  width: .55rem; height: .55rem; border-radius: 50%; background: var(--signal);
  box-shadow: 0 0 0 0 rgb(61 61 255 / .5);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse { 70% { box-shadow: 0 0 0 .6rem rgb(61 61 255 / 0); } 100% { box-shadow: 0 0 0 0 rgb(61 61 255 / 0); } }

/* ---------- Buttons ---------- */
/* Hover: a fill sweeps up from where the pointer entered (--bx/--by, set in main.js) and the arrow loops. */
.btn {
  --bg: transparent; --fg: var(--ink); --bd: var(--ink); --hbg: var(--ink); --hfg: var(--paper); --hbd: var(--hbg);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3.25rem; padding: .85rem 1.5rem;
  background: var(--bg); color: var(--fg); border: 1.5px solid var(--bd);
  border-radius: 99px;
  font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none;
  cursor: pointer;
  transition: transform .35s var(--ease), translate .6s var(--ease), color .3s .05s, border-color .3s, box-shadow .35s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: -1.5px; z-index: -1; border-radius: inherit;
  background: var(--hbg);
  clip-path: circle(0% at var(--bx, 50%) var(--by, 100%));
  transition: clip-path .6s var(--ease);
}
.btn:hover { color: var(--hfg); border-color: var(--hbd); }
.btn:hover::before { clip-path: circle(150% at var(--bx, 50%) var(--by, 100%)); }
.btn .arr { --ax: .55em; --ay: 0em; display: inline-block; transition: translate .6s var(--ease); translate: var(--mx, 0px) 0; }
.btn:hover .arr { animation: arr-loop .55s var(--ease); }
a[target] .arr, .btn--lime .arr { --ay: -.55em; }
@keyframes arr-loop {
  45% { transform: translate(var(--ax), var(--ay)); opacity: 0; }
  46% { transform: translate(calc(var(--ax) * -1), calc(var(--ay) * -1)); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
.btn--primary { --bg: var(--ink); --fg: var(--paper); --hbg: var(--signal); --hfg: var(--on-signal); }
.btn--primary:hover { box-shadow: 0 .9rem 2rem -1rem rgb(61 61 255 / .9); }
.btn--ink { --bg: var(--ink); --fg: var(--paper); --hbg: var(--signal); --hfg: var(--on-signal); }
.btn--sm { min-height: 2.75rem; padding: .6rem 1.15rem; font-size: .9375rem; }
.btn--block { width: 100%; }
.btn:active { transform: scale(.98); }

/* ---------- Header ---------- */
.top {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
}
.top::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgb(242 240 235 / .94);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.top.is-scrolled::before { border-bottom-color: var(--line); }
.top__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; position: relative; z-index: 2; }
.logo__mark { width: 1.9rem; height: 1.9rem; fill: var(--ink); transition: transform .6s var(--ease); }
.logo__half { fill: var(--signal); transition: transform .6s var(--ease); }
.logo__mark path:first-child { transition: transform .6s var(--ease); }
.logo:hover .logo__half { transform: translateX(2.5px) rotate(4deg); transform-origin: 17px 16px; }
.logo:hover .logo__mark path:first-child { transform: translateX(-1.5px); }
.logo__word { font-family: var(--serif); font-size: 1.6rem; line-height: 1; letter-spacing: -.01em; }
.logo__word span { font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; vertical-align: .55em; margin-left: .15rem; }

.menu-btn {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 2.75rem; padding: .5rem .5rem .5rem 1rem;
  background: none; border: 1.5px solid var(--ink); border-radius: 99px; cursor: pointer;
  font-weight: 600; font-size: .9375rem;
}
.menu-btn__icon { position: relative; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--ink); }
.menu-btn__icon::before, .menu-btn__icon::after {
  content: ""; position: absolute; left: .5rem; right: .5rem; height: 1.5px; background: var(--paper);
  transition: transform .35s var(--ease);
}
.menu-btn__icon::before { top: calc(50% - 3px); }
.menu-btn__icon::after { top: calc(50% + 2px); }
.menu-btn[aria-expanded="true"] .menu-btn__icon::before { transform: translateY(2.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__icon::after { transform: translateY(-2.5px) rotate(-45deg); }
html:not(.js) .menu-btn { display: none; }

/* Mobile nav: full-screen sheet (JS) / simple row (no JS) */
.nav ul { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.nav a:not(.btn) { text-decoration: none; }
html:not(.js) .top { height: auto; position: relative; }
html:not(.js) .top__inner { flex-wrap: wrap; padding-block: 1rem; }
html:not(.js) .nav { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.js .nav {
  position: fixed; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--header-h) + 2rem) var(--gutter) calc(2rem + env(safe-area-inset-bottom));
  background: var(--paper);
  visibility: hidden; opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .55s var(--ease), opacity .3s, visibility 0s .55s;
}
.js .nav.is-open { visibility: visible; opacity: 1; clip-path: inset(0 0 0 0); transition: clip-path .55s var(--ease), opacity .2s; }
.js .nav ul { flex-direction: column; gap: 0; }
.js .nav li { border-bottom: 1px solid var(--line); }
.js .nav li a {
  display: block; padding: .7rem 0;
  font-family: var(--serif); font-size: clamp(2.25rem, 10vw, 3.25rem); line-height: 1.1; letter-spacing: -.01em;
}
.js .nav li a:hover { font-style: italic; color: var(--signal-text); }
.nav__cta { align-self: stretch; }
body.menu-open { overflow: hidden; }

@media (min-width: 64em) {
  .js .menu-btn { display: none; }
  .js .nav, html:not(.js) .nav {
    position: static; visibility: visible; opacity: 1; clip-path: none; padding: 0; background: none;
    flex-direction: row; align-items: center; gap: 2rem; transition: none;
  }
  .js .nav ul { flex-direction: row; gap: 1.75rem; }
  .js .nav li { border: 0; }
  .js .nav li a {
    padding: .25rem 0; font-family: var(--sans); font-size: .9375rem; font-weight: 500; letter-spacing: 0;
    background: linear-gradient(var(--ink), var(--ink)) left bottom / 0 1.5px no-repeat;
    transition: background-size .35s var(--ease);
  }
  .js .nav li a:hover { font-style: normal; color: var(--ink); background-size: 100% 1.5px; }
  .nav__cta { align-self: auto; }
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(2rem, 6vw, 4.5rem) clamp(3.5rem, 8vw, 6rem); overflow-x: clip; }
.hero__grid { display: grid; gap: 3.5rem; align-items: center; }
.hero__title { font-size: clamp(3rem, 13.2vw, 7.25rem); max-width: none; margin-bottom: 1.5rem; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.hero__title .line > span { display: inline-block; }
.js .hero__title .line > span { transform: translateY(105%); animation: rise 1.1s var(--ease) var(--intro) forwards; }
.js .hero__title .line:nth-child(2) > span { animation-delay: calc(var(--intro) + .12s); }
.js .hero__title .line:nth-child(3) > span { animation-delay: calc(var(--intro) + .24s); }
@keyframes rise { to { transform: none; } }
.js .hero__text > :not(h1), .js .hero__visual { opacity: 0; animation: fadeup 1s var(--ease) calc(var(--intro) + .45s) forwards; }
.js .hero__visual { animation-delay: calc(var(--intro) + .6s); }
@keyframes fadeup { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } }

.hero__for {
  font-family: var(--serif); font-size: clamp(1.6rem, 6vw, 2.4rem); line-height: 1.1;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .35em;
  margin-bottom: 1.5rem;
}
.rotator { display: inline-grid; font-style: italic; color: var(--signal-text); position: relative; }
.rotator::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.05em; height: 2px; background: var(--signal);
  transform-origin: left; animation: underline 3s var(--ease) infinite;
}
@keyframes underline { 0% { transform: scaleX(0); } 20%, 85% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
.rotator > span {
  grid-area: 1 / 1;
  opacity: 0; transform: translateY(.45em);
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.rotator > span.is-on { opacity: 1; transform: none; }
.rotator > span.is-off { opacity: 0; transform: translateY(-.45em); }
html:not(.js) .rotator > span:not(:first-child) { display: none; }

.lead { font-size: clamp(1.0625rem, 2.6vw, 1.25rem); color: var(--muted); max-width: 34rem; margin-bottom: 2rem; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2rem; }
.actions .btn { flex: 1 1 13rem; }
.ticks { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .9375rem; font-weight: 500; }
.ticks li { display: inline-flex; align-items: center; gap: .5rem; }
.ticks li::before {
  content: ""; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23f2f0eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 75% no-repeat;
}

/* Phone mockup */
.hero__visual { position: relative; display: grid; justify-items: center; gap: 1rem; }
.hero__visual::before {
  content: ""; position: absolute; z-index: -1;
  width: min(88vw, 30rem); aspect-ratio: 1; top: 50%; left: 50%; translate: -50% -54%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #c9c6ff 0%, var(--glow) 22%, var(--signal) 52%, #2121b8 100%);
  clip-path: polygon(0 0, 100% 0, 100% 46%, 0 58%);
  opacity: .95;
}
.hero__visual::after {
  content: ""; position: absolute; z-index: -1;
  width: min(88vw, 30rem); aspect-ratio: 1; top: 50%; left: 50%; translate: -50% -50%;
  border-radius: 50%;
  background: var(--ink);
  clip-path: polygon(0 61%, 100% 49%, 100% 100%, 0 100%);
}
.hero__caption { font-size: .8125rem; color: var(--muted); text-align: center; }

.phone {
  --scr-bg: #f6e7e1; --scr-ink: #3a1c22; --scr-acc: #7a2e3a; --scr-soft: #ecd3ca;
  position: relative;
  width: min(68vw, 17.5rem);
  aspect-ratio: 9 / 19;
  padding: .55rem;
  border-radius: 2.6rem;
  background: linear-gradient(160deg, #23273a, #07080f);
  box-shadow: 0 0 0 1.5px #262a40 inset, 0 2.5rem 4rem -1.5rem rgb(12 14 26 / .55), 0 .75rem 1.5rem -.75rem rgb(12 14 26 / .4);
}
.phone__notch {
  position: absolute; z-index: 3; top: 1.05rem; left: 50%; translate: -50% 0;
  width: 32%; height: 1.35rem; border-radius: 99px; background: #07080f;
}
.phone__screen {
  position: relative; height: 100%; overflow: hidden;
  border-radius: 2.1rem;
  background: var(--scr-bg); color: var(--scr-ink);
  transition: background-color .7s var(--ease), color .7s var(--ease);
}
.phone[data-theme="1"] { --scr-bg: #efe6d2; --scr-ink: #1e2b22; --scr-acc: #2f4a3a; --scr-soft: #ddd0b4; }
.phone[data-theme="2"] { --scr-bg: #1e2328; --scr-ink: #f2efe9; --scr-acc: #f2c14e; --scr-soft: #2e353c; }
.phone[data-theme="3"] { --scr-bg: #e3eef2; --scr-ink: #12313d; --scr-acc: #1f5f7a; --scr-soft: #c9dde5; }
.phone[data-theme="4"] { --scr-bg: #eef0f7; --scr-ink: #0c0e1a; --scr-acc: #3434e0; --scr-soft: #dde0f0; }

.app { padding: .95rem 1rem 1rem; display: grid; gap: .6rem; font-size: .75rem; }
.app__status { display: flex; justify-content: space-between; align-items: center; padding-inline: .6rem; font-size: .6875rem; font-weight: 600; }
.app__sig { display: flex; align-items: flex-end; gap: 2px; height: .6rem; }
.app__sig i { width: 3px; background: currentColor; border-radius: 1px; }
.app__sig i:nth-child(1) { height: 40%; } .app__sig i:nth-child(2) { height: 70%; } .app__sig i:nth-child(3) { height: 100%; }
.app__sig b { width: 1.1rem; height: .55rem; margin-left: 4px; border: 1.5px solid currentColor; border-radius: 3px; box-shadow: inset -.35rem 0 0 currentColor; }
.app__bar { display: flex; justify-content: space-between; align-items: center; margin: 1.9rem 0 .35rem; }
.app__brand { font-family: var(--serif); font-size: 1.15rem; }
.app__burger { width: 1.1rem; height: .55rem; border-block: 1.5px solid currentColor; }
.app__hero {
  display: grid; gap: .5rem; padding: 1.1rem .9rem 1rem;
  border-radius: 1rem; background: var(--scr-soft);
  transition: background-color .7s var(--ease);
}
.app__kicker { font-size: .625rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.app__title { font-family: var(--serif); font-size: 1.6rem; line-height: 1.02; }
.app__btn {
  justify-self: start; margin-top: .3rem; padding: .5rem .9rem; border-radius: 99px;
  background: var(--scr-acc); color: var(--scr-bg); font-weight: 600;
  transition: background-color .7s var(--ease), color .7s var(--ease);
}
.app__row {
  display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; border-radius: .8rem;
  border: 1px solid color-mix(in srgb, var(--scr-ink) 14%, transparent); font-weight: 500;
}
.app__ico { width: .9rem; height: .9rem; border-radius: 50%; border: 2px solid var(--scr-acc); flex: none; }
.app__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; margin-top: .1rem; }
.app__tiles span { aspect-ratio: 1; border-radius: .7rem; background: var(--scr-soft); transition: background-color .7s var(--ease); }
.app__tiles span:nth-child(2) { background: color-mix(in srgb, var(--scr-acc) 40%, var(--scr-soft)); }
[data-swap] { transition: opacity .3s; }
.is-swapping [data-app-brand], .is-swapping [data-app-kicker], .is-swapping [data-app-title],
.is-swapping [data-app-btn], .is-swapping [data-app-row1], .is-swapping [data-app-row2] { opacity: 0; }
[data-app-brand], [data-app-kicker], [data-app-title], [data-app-btn], [data-app-row1], [data-app-row2] { transition: opacity .3s, background-color .7s var(--ease), color .7s var(--ease); }

/* A soft sheen glides across the hero phone's glass now and then (no notifications). */
.hero .phone__screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 38%, rgb(255 255 255 / .28) 48%, transparent 58%) 160% 0 / 260% 100% no-repeat;
}
.js .hero .phone__screen::after { animation: glass 7.6s var(--ease) calc(var(--intro) + 1.4s) infinite; }
@keyframes glass { 0% { background-position: 160% 0; } 22%, 100% { background-position: -60% 0; } }

@media (min-width: 48em) {
  .actions .btn { flex: 0 0 auto; }
  .phone { width: 18.5rem; }
}
@media (min-width: 64em) {
  .hero { padding-top: clamp(3rem, 6vw, 5rem); }
  .hero__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr); gap: 3rem; }
  .hero__title { font-size: clamp(4.5rem, 7.4vw, 7.5rem); }
  .phone { width: 19.5rem; }
}

/* ---------- Marquee ---------- */
.marquee {
  position: relative; z-index: 1;   /* sits above the hero canvas when the form drifts down */
  overflow: hidden; border-block: 1.5px solid var(--ink);
  background: var(--ink); color: var(--paper);
  padding-block: 1rem;
}
.marquee__track {
  display: flex; align-items: center; gap: 1.5rem; width: max-content;
  font-family: var(--serif); font-size: clamp(1.6rem, 5vw, 2.6rem); line-height: 1; white-space: nowrap;
  animation: marquee 38s linear infinite;
}
.marquee__track i { font-style: normal; color: var(--signal-light); font-size: .6em; }
.marquee__track span:nth-of-type(even) { font-style: italic; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.section { padding-block: clamp(4.5rem, 12vw, 9rem); }
.section .h2 { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }

/* Pains */
.pains__list { border-top: 1.5px solid var(--ink); margin-bottom: 2.5rem; }
.pains__list li { border-bottom: 1px solid var(--line); padding-block: 1.25rem; }
.pain {
  position: relative; display: inline;
  font-family: var(--serif); font-size: clamp(1.6rem, 5.6vw, 3rem); line-height: 1.12; letter-spacing: -.01em;
  background: linear-gradient(var(--signal), var(--signal)) left 58% / 0 .09em no-repeat;
  transition: background-size 1.1s var(--ease) .35s, color .6s .5s;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.pains__list li.is-in .pain, html:not(.js) .pain { background-size: 100% .09em; color: var(--muted); }
.pains__answer { font-size: clamp(1.125rem, 2.6vw, 1.5rem); line-height: 1.5; max-width: 40rem; }
@media (min-width: 64em) {
  .pains__grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 5rem; align-items: start; }
  .pains__head { position: sticky; top: calc(var(--header-h) + 2rem); }
  .pains .h2 { font-size: clamp(2.75rem, 4.6vw, 4.5rem); margin-bottom: 0; }
  .pain { font-size: clamp(1.75rem, 2.6vw, 2.5rem); }
}

/* Values */
.values { background: var(--paper-2); }
.values__grid { display: grid; border-top: 1.5px solid var(--ink); }
.value { padding: 2rem 0 2.25rem; border-bottom: 1px solid var(--line); }
.value__n { display: block; font-family: var(--serif); font-style: italic; font-size: 3.25rem; line-height: 1; color: var(--signal-text); margin-bottom: 1.25rem; }
.value h3 { font-size: 1.375rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: .6rem; }
.value p { color: var(--muted); }
@media (min-width: 48em) {
  .values__grid { grid-template-columns: repeat(2, 1fr); }
  .value { padding: 2.25rem 2rem 2.5rem 0; }
  .value:nth-child(even) { padding-left: 2rem; border-left: 1px solid var(--line); }
}
@media (min-width: 80em) {
  .values__grid { grid-template-columns: repeat(4, 1fr); }
  .value, .value:nth-child(even) { padding: 2.5rem 1.75rem 3rem; border-bottom: 0; }
  .value + .value { border-left: 1px solid var(--line); }
  .value:first-child { padding-left: 0; }
}

/* Case */
.case__head { display: grid; gap: 1rem; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.case__head .h2 { margin-bottom: 0; max-width: none; }
.case__head .h2 em { display: block; font-size: .55em; margin-top: .25em; }
.case__sub { color: var(--muted); font-size: 1.125rem; max-width: 32rem; }
.case__stage { margin-bottom: clamp(5rem, 12vw, 7rem); }
.stage { position: relative; padding-right: 12%; }
.browser {
  border-radius: .9rem; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1.5px var(--ink), 0 2rem 4rem -2rem rgb(12 14 26 / .45);
}
.browser__bar {
  display: flex; align-items: center; gap: .35rem; padding: .55rem .8rem;
  background: var(--ink); color: var(--muted-dark); font-size: .75rem;
}
.browser__bar i { width: .55rem; height: .55rem; border-radius: 50%; background: #353a55; }
.browser__bar i:first-child { background: var(--signal); }
.browser__bar span { margin-left: auto; margin-right: auto; padding: .15rem 1.25rem; border-radius: 99px; background: #1f2337; }
.browser img { width: 100%; }
.phone--case {
  position: absolute; right: 0; bottom: -18%;
  width: min(34%, 15rem);
  padding: .35rem; border-radius: 1.6rem;
}
.phone--case .phone__notch { top: .6rem; height: .7rem; }
.phone--case .phone__screen { border-radius: 1.3rem; background: #fff; }
.phone--case img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (min-width: 48em) {
  .phone--case { padding: .5rem; border-radius: 2.2rem; }
  .phone--case .phone__screen { border-radius: 1.8rem; }
  .phone--case .phone__notch { top: .9rem; height: 1rem; }
}

.case__facts { display: grid; gap: 0; border-top: 1.5px solid var(--ink); margin-bottom: 2.5rem; }
.case__facts > div { padding-block: 1.5rem; border-bottom: 1px solid var(--line); }
.case__facts dt { font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; }
.case__facts dd { font-size: 1.125rem; }
.case__facts q { font-style: italic; }
@media (min-width: 64em) {
  .case__head { grid-template-columns: 1.4fr 1fr; align-items: end; }
  .case__facts { grid-template-columns: repeat(3, 1fr); }
  .case__facts > div { padding: 2rem 2rem 2rem 0; border-bottom: 0; }
  .case__facts > div + div { padding-left: 2rem; border-left: 1px solid var(--line); }
}

.case__proof { display: grid; gap: 1rem; margin-bottom: 2.5rem; }
.quote, .result { border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.5rem); }
.quote { position: relative; background: var(--ink); color: var(--paper); }
.quote::before {
  content: "”"; position: absolute; top: -.1em; right: .15em;
  font-family: var(--serif); font-size: 9rem; line-height: 1; color: var(--signal-light);
}
.quote blockquote { font-family: var(--serif); font-size: clamp(1.5rem, 4vw, 2.25rem); line-height: 1.2; margin-bottom: 1.25rem; padding-right: 3rem; }
.quote blockquote .todo { font-size: .55em; }
.quote figcaption { color: var(--muted-dark); font-size: .9375rem; }
.result { border: 1.5px solid var(--ink); display: grid; align-content: space-between; gap: 1.5rem; }
.result__k { font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.result__v { font-family: var(--serif); font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.2; }
.result__v .todo { font-size: .55em; }
@media (min-width: 64em) { .case__proof { grid-template-columns: 1.6fr 1fr; } }
/* Only a quote and no result box: the quote takes the full row instead of leaving an empty column. */
.case__proof > :only-child { grid-column: 1 / -1; }

/* Work list: intro + one article per case */
.case__intro { display: grid; gap: 1.25rem; margin-bottom: clamp(3rem, 8vw, 5rem); }
.case .case__intro .h2 { margin-bottom: 0; }
@media (min-width: 64em) { .case__intro { grid-template-columns: 1.4fr 1fr; align-items: end; } }
.work + .work { margin-top: clamp(4.5rem, 11vw, 8rem); }
.work__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.case .case__name { font-size: clamp(2.5rem, 8vw, 4.75rem); margin-bottom: 0; }
.case__head .work__meta { grid-column: 1 / -1; }
.live {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .75rem .3rem .6rem; border-radius: 99px;
  background: var(--ink); color: var(--paper); letter-spacing: .12em;
}
.live__dot {
  width: .5rem; height: .5rem; border-radius: 50%; background: #3ddc84;
  box-shadow: 0 0 0 0 rgb(61 220 132 / .6); animation: pulse-live 2s var(--ease) infinite;
}
@keyframes pulse-live { 70% { box-shadow: 0 0 0 .5rem rgb(61 220 132 / 0); } 100% { box-shadow: 0 0 0 0 rgb(61 220 132 / 0); } }
.live--lime { background: #d8ff77; color: #14160f; }
.live--lime .live__dot { background: #14160f; box-shadow: none; animation: none; }

/* The Beach — shown in the client's own palette (black / lime / cream) */
.beach {
  /* The sheet uses the studio's midnight; lime and cream stay The Beach's own colours. */
  --b-black: #14160f; --b-sheet: #10132a; --b-panel: #181c38; --b-lime: #d8ff77; --b-cream: #f8f7ec; --b-line: #2b3052;
  position: relative; isolation: isolate;
  display: grid; gap: clamp(2.5rem, 6vw, 4rem);
  background: radial-gradient(70% 60% at 100% 0%, rgb(61 61 255 / .35), transparent 70%), var(--b-sheet); color: var(--b-cream);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 5vw, 4rem);
  overflow: hidden;
}
.beach .work__meta { color: rgb(248 247 236 / .6); margin-bottom: 1.25rem; }
.beach .case__name { margin-bottom: 1rem; }
.beach .h2 em { color: var(--b-lime); display: block; font-size: .5em; margin-top: .3em; }
.beach__sub { color: rgb(248 247 236 / .72); font-size: 1.125rem; max-width: 32rem; margin-bottom: 1rem; }
.beach__facts { border-top: 1.5px solid var(--b-cream); margin-bottom: 2rem; }
.beach__facts > div { padding-block: 1.25rem; border-bottom: 1px solid var(--b-line); }
.beach__facts dt { font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--b-lime); margin-bottom: .4rem; }
.beach__facts dd { font-size: 1.0625rem; color: rgb(248 247 236 / .88); }
.beach .todo { line-height: 1.9; }
/* The Beach quote: the same block as Bosell's, in the club's colours on the dark sheet. */
.beach .quote { background: var(--b-panel); color: var(--b-cream); box-shadow: inset 0 0 0 1.5px var(--b-line); }
.beach .quote::before { color: var(--b-lime); }
.beach .quote figcaption { color: rgb(248 247 236 / .6); }
.btn--lime { --bg: var(--b-lime); --fg: var(--b-black); --bd: var(--b-lime); --hbg: var(--b-cream); --hfg: var(--b-black); border-radius: .2rem; }

.beach__visual .stage { margin-bottom: 12%; }
.browser--dark { background: var(--b-black); box-shadow: 0 0 0 1.5px var(--b-line), 0 2rem 4rem -1.5rem rgb(0 0 0 / .7); }
.browser--dark .browser__bar { background: var(--b-panel); }
.browser--dark .browser__bar i:first-child { background: var(--b-lime); }
.browser--dark .browser__bar span { background: var(--b-black); }
.beach .phone--case { box-shadow: 0 0 0 1.5px var(--b-line) inset, 0 2rem 3rem -1rem rgb(0 0 0 / .65); }
.beach .phone--case .phone__screen { background: var(--b-black); }
@media (min-width: 64em) {
  .beach { grid-template-columns: 1fr 1.05fr; grid-template-areas: "head visual" "more visual"; align-items: center; row-gap: 0; }
  .beach__head { grid-area: head; align-self: end; }
  .beach__more { grid-area: more; align-self: start; }
  .beach__visual { grid-area: visual; }
  .beach__quote { grid-column: 1 / -1; margin-top: 2rem; }
}

/* Process */
.process { background: var(--ink); color: var(--paper); }
.process .h2 em { color: var(--signal-light); }
.steps { display: grid; gap: 0; counter-reset: s; margin-bottom: 2.5rem; }
.step { position: relative; padding: 0 0 2.5rem 3.75rem; }
.step::before {
  content: ""; position: absolute; left: 1.05rem; top: .5rem; bottom: 0; width: 1.5px; background: #262a40;
}
.step:last-child::before { display: none; }
.step::after {
  content: ""; position: absolute; left: .55rem; top: .35rem; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  border: 1.5px solid var(--signal-light); background: var(--ink);
  transition: background-color .5s var(--ease) .4s;
}
.step.is-in::after, html:not(.js) .step::after { background: var(--signal-light); }
.step__n { display: block; font-family: var(--serif); font-style: italic; font-size: 1.125rem; color: var(--signal-light); margin-bottom: .25rem; }
.step h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.25rem, 7vw, 3rem); line-height: 1; letter-spacing: -.01em; margin-bottom: .75rem; }
.step p { color: var(--muted-dark); max-width: 30rem; }
.process__note { color: var(--muted-dark); padding-top: 1.5rem; border-top: 1px solid #262a40; }
@media (min-width: 64em) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .step { padding: 3rem 0 0; }
  .step::before { left: 0; right: -2rem; top: .5rem; bottom: auto; width: auto; height: 1.5px; display: block; }
  .step:last-child::before { right: 0; display: block; }
  .step::after { left: 0; top: 0; }
}

/* Services */
.services__grid { display: grid; gap: 1rem; margin-bottom: 2rem; }
.card { border-radius: var(--radius); padding: clamp(1.75rem, 4.5vw, 3rem); display: grid; align-content: start; gap: 1rem; }
.card--main {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--signal); color: var(--on-signal);
}
/* A slow sheen of light across the card; motion.js moves it with the scroll (--sx). */
.card--main::after {
  content: ""; position: absolute; inset: -40%; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 35% at calc(30% + var(--sx, 0) * 40%) 30%, rgb(125 107 255 / .85), transparent 70%),
              radial-gradient(35% 30% at 85% 90%, rgb(20 20 150 / .55), transparent 70%);
}
.card--main .list { border-top-color: var(--on-signal); }
.card--main .list li { border-bottom-color: rgb(242 240 235 / .3); }
.card--soon { border: 1.5px dashed var(--ink); }
.card h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.75rem, 9vw, 4.25rem); line-height: .95; letter-spacing: -.02em; }
.card__tag {
  justify-self: start; padding: .3rem .8rem; border-radius: 99px;
  background: var(--ink); color: var(--paper); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.card__tag--soon { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.list { display: grid; gap: .1rem; margin-top: .5rem; border-top: 1.5px solid var(--ink); }
.list li { display: flex; gap: .75rem; padding-block: .7rem; border-bottom: 1px solid rgb(12 14 26 / .25); font-weight: 500; }
.list li::before { content: "→"; flex: none; }
.price-note { max-width: 44rem; font-size: 1.125rem; padding: 1.25rem 0 0; }
@media (min-width: 64em) { .services__grid { grid-template-columns: 1.35fr 1fr; } }

/* About */
.about { background: var(--paper-2); }
.about__grid { display: grid; gap: 2.5rem; align-items: center; }
.about__text p:not(.label) { font-size: 1.125rem; max-width: 36rem; margin-bottom: 1rem; }
.about__text .h2 { margin-bottom: 2rem; }
.portrait__frame {
  aspect-ratio: 4 / 5; width: min(100%, 17rem); border-radius: var(--radius); overflow: hidden;
  background: var(--ink-2);
  box-shadow: 0 0 0 1.5px var(--ink), 0 2rem 4rem -2rem rgb(12 14 26 / .45);
}
/* Cover the 4:5 frame; anchor high so the head keeps its space above. */
.portrait__frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.textlink { font-weight: 600; }
@media (min-width: 64em) { .about__grid { grid-template-columns: .8fr 1fr; gap: 5rem; } .portrait__frame { width: min(100%, 28rem); } }

/* FAQ */
.faq__grid { display: grid; gap: 1rem; }
.faq__list { border-top: 1.5px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding-block: 1.25rem; min-height: 3rem;
  font-size: clamp(1.125rem, 3vw, 1.375rem); font-weight: 600; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 2rem; height: 2rem; border-radius: 50%; border: 1.5px solid var(--ink);
  background:
    linear-gradient(var(--ink), var(--ink)) center / .8rem 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1.5px .8rem no-repeat;
  transition: transform .35s var(--ease), background-color .25s;
}
.faq details[open] summary::after {
  transform: rotate(45deg); background-color: var(--signal); border-color: var(--signal);
  background-image: linear-gradient(var(--paper), var(--paper)), linear-gradient(var(--paper), var(--paper));
}
.faq summary:hover::after { transform: rotate(90deg); }
.faq details[open] summary:hover::after { transform: rotate(135deg); }
.faq details p { color: var(--muted); padding-bottom: 1.5rem; max-width: 40rem; }
@media (min-width: 64em) { .faq__grid { grid-template-columns: 1fr 1.4fr; gap: 4rem; } }

/* Contact */
.contact {
  background: radial-gradient(90% 70% at var(--cx, 80%) var(--cy, 10%), var(--glow), transparent 70%), var(--signal);
  color: var(--on-signal); padding-block: clamp(4.5rem, 12vw, 8rem);
}
.contact__intro :focus-visible { outline-color: var(--paper); }
.contact__grid { display: grid; gap: 3rem; }
.contact__title { font-size: clamp(3.25rem, 13vw, 7rem); margin-bottom: 1.5rem; }
.contact__title em { color: var(--paper); }
.contact__lead { font-size: 1.1875rem; max-width: 30rem; margin-bottom: 2rem; }
.contact__direct { border-top: 1.5px solid var(--on-signal); }
.contact__direct li { display: grid; gap: .15rem; padding-block: 1rem; border-bottom: 1px solid rgb(242 240 235 / .35); font-weight: 500; }
.contact__direct li > span:first-child { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.contact__direct a { text-decoration: none; }

.form {
  background: var(--paper); color: var(--ink); border-radius: var(--radius);
  padding: clamp(1.25rem, 4vw, 2.5rem);
  display: grid; gap: 1.1rem;
  box-shadow: 0 2rem 4rem -2rem rgb(12 14 26 / .5);
}
.chips { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips legend { font-weight: 600; margin-bottom: .6rem; padding: 0; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: .5rem 1rem;
  border: 1.5px solid var(--ink); border-radius: 99px; font-size: .9375rem; font-weight: 500;
  transition: background-color .2s, color .2s;
}
.chips input:checked + span { background: var(--ink); color: var(--paper); }
.chips input:focus-visible + span { outline: 3px solid var(--signal); outline-offset: 2px; }
.field { display: grid; gap: .4rem; }
.field label { font-weight: 600; font-size: .9375rem; }
.field small { font-weight: 400; color: var(--muted); }
.field input, .field textarea {
  width: 100%; min-height: 3.1rem; padding: .75rem 1rem;
  background: #fbfaf7; border: 1.5px solid #80859a; border-radius: .75rem;
  font-size: 1rem; /* ≥16px stops iOS zoom */
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgb(61 61 255 / .45); }
.field input[aria-invalid="true"] { border-color: #a3200b; }
/* The send button's own transform transition fought the form's GSAP entrance and left the button
   28px low, on top of the note below it (all widths). Without it the entrance ends where it should;
   the magnetic lean (translate) keeps its easing. */
.form .btn { transition: translate .6s var(--ease), color .3s .05s, border-color .3s, box-shadow .35s var(--ease); }
.form__note { font-size: .875rem; color: var(--muted); }
.form__note.is-error { color: #a3200b; font-weight: 600; }
@media (min-width: 64em) { .contact__grid { grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; } }

/* Footer */
.foot { background: var(--ink); color: var(--paper); padding: clamp(3rem, 8vw, 5rem) 0 calc(6rem + env(safe-area-inset-bottom)); overflow: hidden; }
.foot__big {
  font-family: var(--serif); font-size: clamp(3.5rem, 17.5vw, 16rem); line-height: .85; letter-spacing: -.04em;
  margin-bottom: 2.5rem; white-space: nowrap;
}
.foot__big em { color: var(--signal-light); margin-left: .05em; }
.foot__row { display: grid; gap: .75rem; font-size: .875rem; color: var(--muted-dark); border-top: 1px solid #262a40; padding-top: 1.5rem; }
.foot__row a { text-decoration: none; color: var(--paper); }
@media (min-width: 64em) {
  .foot { padding-bottom: 3rem; }
  .foot__row { grid-template-columns: 2fr 1fr auto; }
}

/* Mobile dock CTA */
.dock {
  position: fixed; z-index: 40; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom));
  translate: -50% 0;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.6rem; border-radius: 99px;
  background: var(--signal); color: var(--on-signal); text-decoration: none; font-weight: 600; white-space: nowrap;
  box-shadow: 0 1rem 2rem -.75rem rgb(12 14 26 / .6), 0 0 0 1px rgb(255 255 255 / .18) inset;
  transform: translateY(160%);
  transition: transform .5s var(--ease);
}
.dock.is-on { transform: none; }
html:not(.js) .dock { display: none; }
@media (min-width: 64em) { .dock { display: none; } }

/* =====================================================================
   Advanced layer (2026-10-13): intro, three.js hero, scroll motion,
   magnetic buttons, tilt, horizontal case track (custom cursor removed 2026-10-13b).
   Everything here is an enhancement; the page above is complete without it.
   ===================================================================== */

/* ---------- Lenis smooth scroll (from lenis.css) ---------- */
html.lenis, html.lenis body { height: auto; }
html.lenis, html.lenis-smooth { scroll-behavior: auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- Intro: the logo splits and the page opens along the seam ---------- */
.intro { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js:not(.intro-seen) .intro {
    display: block; position: fixed; inset: 0; z-index: 200; pointer-events: none; overflow: hidden;
    animation: intro-off 0s linear 1.35s forwards;
  }
}
.intro__half { position: absolute; inset: 0; background: var(--ink); display: grid; place-items: center; will-change: transform; }
.intro__half--a { clip-path: polygon(0 0, 52% 0, 48% 100%, 0 100%); animation: intro-a .85s cubic-bezier(.76, 0, .24, 1) .5s forwards; }
.intro__half--b { background: var(--ink-2); clip-path: polygon(52% 0, 100% 0, 100% 100%, 48% 100%); animation: intro-b .85s cubic-bezier(.76, 0, .24, 1) .5s forwards; }
.intro__half svg { width: 4rem; height: 4rem; }
.intro__half--a svg { fill: var(--paper); }
.intro__half--b svg { fill: var(--signal-light); }
.intro__seam { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro__seam line {
  stroke: var(--signal-light); stroke-width: 2; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: intro-seam .4s cubic-bezier(.65, 0, .35, 1) .08s forwards, intro-fade .3s linear .55s forwards;
}
@keyframes intro-seam { to { stroke-dashoffset: 0; } }
@keyframes intro-fade { to { opacity: 0; } }
@keyframes intro-a { to { transform: translate3d(-58%, -4%, 0); } }
@keyframes intro-b { to { transform: translate3d(58%, 4%, 0); } }
@keyframes intro-off { to { visibility: hidden; } }

/* ---------- Header reading progress ---------- */
.top__progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; z-index: 1;
  background: linear-gradient(90deg, var(--signal), var(--glow), var(--signal-light)); transform-origin: left; transform: scaleX(0);
}

/* ---------- Hero: three.js canvas over the CSS disc ---------- */
.hero__gl {
  position: absolute; z-index: -1; top: 50%; left: 50%;
  width: min(150vw, 36rem); aspect-ratio: 1; translate: -50% -58%;
  pointer-events: none;
}
.hero__gl canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s var(--ease); }
.hero__visual.has-gl .hero__gl canvas { opacity: 1; }
.hero__visual::before, .hero__visual::after { transition: opacity .9s var(--ease), scale .9s var(--ease); }
.hero__visual.has-gl::before, .hero__visual.has-gl::after { opacity: 0; scale: .9; }
.hero .phone { transform: perspective(1400px) translate3d(0, var(--py, 0px), 0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.hero__caption { translate: 0 var(--py, 0px); }
@media (min-width: 48em) { .hero__gl { width: 46rem; } }
@media (min-width: 64em) { .hero__gl { width: min(64vw, 58rem); translate: -50% -51%; } }

/* ---------- Split headings: words rise out of a mask ---------- */
.split .w {
  display: inline-block; vertical-align: top; overflow: hidden;
  padding: .12em .06em .14em; margin: -.12em -.06em -.14em;  /* room for å/ä/ö, descenders and italic overhang */
}
.split .w__i {
  display: inline-block; transform: translate3d(0, 110%, 0);
  transition: transform 1.05s var(--ease); transition-delay: calc(min(var(--i), 14) * 45ms);
}
.split.is-in .w__i { transform: none; }
[data-chars] .ch { display: inline-block; transform: translate3d(0, 100%, 0); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i) * 35ms); }
[data-chars].is-in .ch { transform: none; }
.foot__big[data-chars] { overflow: hidden; padding: .06em 0 .2em; margin-top: -.06em; margin-bottom: calc(2.5rem - .2em); }

/* ---------- Tilt + glare on case visuals ---------- */
.stage {
  transform: perspective(1300px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform .7s var(--ease);
}
.stage.is-tilting { transition-duration: .18s; }
.stage .browser { position: relative; }
.stage .browser::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgb(255 255 255 / .28), transparent 50%);
  transition: opacity .5s;
}
.stage.is-tilting .browser::after { opacity: 1; }
.stage .phone--case { transform: translateZ(40px); }
.stage .browser img { transition: scale 1.6s var(--ease); }
.js .case__stage:not(.is-in) .browser img, .js .beach__visual:not(.is-in) .browser img { scale: 1.08; }

/* ---------- Case section: shared pieces ---------- */
.case { overflow-x: clip; }
.case__pin { position: relative; }
.case__track { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; position: relative; }
.case__side .case__proof { margin-bottom: 2.5rem; }
.case__hud { display: none; }

/* ---------- Case section: horizontal track (desktop, set by motion.js) ---------- */
.case.is-h { padding-bottom: 0; }
.case.is-h .case__pin { height: calc(100vh - var(--header-h)); overflow: clip; background: var(--paper); }
.case.is-h .case__track {
  display: flex; align-items: stretch; width: max-content; height: 100%; margin: 0;
  padding-left: max(var(--gutter), (100vw - var(--max)) / 2);
  will-change: transform;
}
.case.is-h .work { display: flex; align-items: center; gap: clamp(3rem, 5vw, 6rem); flex: none; height: 100%; padding: 0 clamp(4rem, 8vw, 9rem) 3.5rem 0; }
.case.is-h .work + .work { margin-top: 0; }
.case.is-h [data-col] { flex: none; margin: 0; }
.case.is-h .case__head { width: 27rem; grid-template-columns: none; align-items: start; }
.case.is-h .case__head .case__name { font-size: clamp(3rem, 4.6vw, 4.5rem); }
.case.is-h .case__stage { width: min(48vw, 54rem); padding-bottom: 6%; }
.case.is-h .case__facts { width: 23rem; grid-template-columns: none; }
.case.is-h .case__facts > div, .case.is-h .case__facts > div + div { padding: 1.25rem 0; border-left: 0; border-bottom: 1px solid var(--line); }
.case.is-h .case__side { width: 25rem; }
.case.is-h .case__side .case__proof { grid-template-columns: none; margin-bottom: 1.5rem; }
.case.is-h .quote, .case.is-h .result { padding: 1.5rem 1.75rem; }
.case.is-h .quote blockquote { font-size: 1.6rem; margin-bottom: .75rem; }
.case.is-h .quote::before { font-size: 6rem; }
.case.is-h .result { gap: .75rem; }
.case.is-h .case__facts dd { font-size: 1.0625rem; }
.case.is-h .work--beach { padding: 0; }
.case.is-h .beach {
  display: flex; align-items: center; gap: clamp(3rem, 5vw, 6rem); height: 100%;
  padding: 2rem max(var(--gutter), (100vw - var(--max)) / 2) 3.5rem clamp(3rem, 5vw, 5rem);
  border-radius: 28px 0 0 0; transform-origin: left center;
}
.case.is-h .beach__head { width: 26rem; }
.case.is-h .beach__visual { width: min(46vw, 52rem); }
.case.is-h .beach__more { width: 24rem; }
.case.is-h .beach__quote { width: 24rem; margin-top: 0; }
.case.is-h .beach .case__name { font-size: clamp(3rem, 4.6vw, 4.5rem); }
.case.is-h .case__hud {
  position: absolute; z-index: 2; left: max(var(--gutter), (100vw - var(--max)) / 2); bottom: 1.25rem;
  display: flex; align-items: center; gap: 1rem;
  padding: .45rem 1rem; border-radius: 99px; background: var(--ink); color: var(--paper); box-shadow: 0 0 0 1px #262a40;
  font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.case__count b { color: var(--signal-light); font-weight: 600; }
.case__bar { position: relative; width: 6rem; height: 2px; background: #353a55; overflow: hidden; }
.case__bar i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--signal), var(--signal-light)); transform-origin: left; transform: scaleX(0); }

/* ---------- Process: line draws with scroll (motion.js sets --p) ---------- */
.step::before { transform-origin: top; transform: scaleY(var(--p, 1)); }
@media (min-width: 64em) { .step::before { transform-origin: left; transform: scaleX(var(--p, 1)); } }

/* ---------- Section edges ---------- */
/* "Så går det till" starts with a straight, full-width edge (no rounded top), so it meets the section
   above cleanly on every screen. Only the contact sheet keeps its rounded top. */
.process { position: relative; border-radius: 0; border-top: 1px solid rgb(163 168 255 / .14); }
.contact { border-radius: clamp(1.5rem, 5vw, 2.5rem) clamp(1.5rem, 5vw, 2.5rem) 0 0; position: relative; }
.foot { margin-top: -1px; }

/* ---------- Footer: how it's built ---------- */
.foot__built { margin-top: 1.25rem; max-width: 46rem; font-size: .8125rem; line-height: 1.55; color: var(--muted-dark); }

/* =====================================================================
   Scroll layer 2 (2026-10-13b). motion.js adds .has-motion to <html> when GSAP runs;
   without it (no JS, reduced motion, GSAP missing) everything below rests in its final state.
   ===================================================================== */
@property --strike { syntax: "<number>"; inherits: true; initial-value: 0; }

/* Pains: the line through each sentence follows the scroll. */
html.has-motion .pains__list li .pain {
  transition: none;
  background-size: calc(var(--strike) * 100%) .09em;
  color: color-mix(in srgb, var(--muted) calc(var(--strike) * 100%), var(--ink));
}

/* Rules that draw themselves (motion.js scrubs --draw from 0 to 1). */
.rule { position: relative; border-top-color: transparent !important; }
.rule::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1.5px; height: 1.5px;
  background: currentColor; transform-origin: left; transform: scaleX(var(--draw, 1));
}

/* Big outlined case numbers behind each case, moving at their own speed. */
.work { position: relative; isolation: isolate; }
.work__no {
  position: absolute; z-index: -1; top: -.12em; right: -.04em;
  font-family: var(--serif); font-style: italic; font-size: clamp(8rem, 40vw, 24rem); line-height: .8; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.5px rgb(61 61 255 / .22);
  pointer-events: none; user-select: none;
}
.beach .work__no { z-index: -1; top: .1em; right: .1em; -webkit-text-stroke-color: rgb(216 255 119 / .14); }
.case.is-h .work--bosell .work__no { top: auto; bottom: 9%; right: auto; left: 22rem; font-size: 30rem; }
.case.is-h .beach .work__no { top: auto; bottom: 4%; right: auto; left: 21rem; font-size: 30rem; }

/* Process: on desktop the section pins while the steps light up one after another. */
@media (min-width: 64em) {
  .process.is-pinned { min-height: calc(100vh - var(--header-h)); display: grid; align-content: center; padding-block: 4rem; }
  .process.is-pinned .h2 { margin-bottom: 3.5rem; }
}
.step h3, .step__n { transition: color .5s var(--ease); }
html.has-motion .step h3 { color: var(--muted-dark); }
html.has-motion .step.is-active h3, html.has-motion .step.is-done h3 { color: var(--paper); }
html.has-motion .step::after { background: var(--ink); transition: background-color .4s var(--ease), box-shadow .5s var(--ease), scale .5s var(--ease); }
html.has-motion .step.is-done::after { background: var(--signal-light); }
html.has-motion .step.is-active::after {
  background: var(--signal-light); scale: 1.25;
  box-shadow: 0 0 0 .4rem rgb(163 168 255 / .16), 0 0 1.5rem rgb(125 107 255 / .8);
}
.process__count {
  display: none;
}
@media (min-width: 64em) {
  .process.is-pinned .process__count {
    display: block; position: absolute; right: max(var(--gutter), (100vw - var(--max)) / 2); top: clamp(1.5rem, 6vh, 4rem);
    font-family: var(--serif); font-style: italic; font-size: clamp(9rem, 15vw, 14rem); line-height: 1;
    color: transparent; -webkit-text-stroke: 1.5px rgb(163 168 255 / .2); pointer-events: none;
  }
}

/* FAQ: answers open smoothly where the browser supports animating to auto height. */
@supports selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    .faq { interpolate-size: allow-keywords; }
    .faq details::details-content { block-size: 0; overflow-y: clip; transition: block-size .5s var(--ease), content-visibility .5s allow-discrete; }
    .faq details[open]::details-content { block-size: auto; }
  }
}
.faq summary { transition: color .25s; }
.faq summary:hover { color: var(--signal-text); }

/* Small touches */
.chips span { transition: background-color .2s, color .2s, transform .25s var(--ease), border-color .2s; }
.chips label:hover span { border-color: var(--signal-text); }
.chips label:active span { transform: scale(.95); }
.value { transition: background-color .5s var(--ease); }
.value h3 { transition: color .3s; }
@media (hover: hover) { .value:hover h3 { color: var(--signal-text); } }
.label span { font-variant-numeric: tabular-nums; }
.case__head, .beach__head { position: relative; }

/* ---------- Reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(1.75rem); transition: opacity .9s var(--ease), transform 1s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .reveal, .js .hero__text > :not(h1), .js .hero__visual, .js .hero__title .line > span { opacity: 1; transform: none; }
  .marquee__track { flex-wrap: wrap; width: auto; white-space: normal; justify-content: center; row-gap: .5rem; }
  .marquee__track > :nth-child(n + 15) { display: none; }
  .pain { background-size: 100% .09em; color: var(--muted); }
  .step::after { background: var(--signal-light); }
  .intro { display: none !important; }
  .split .w__i, [data-chars] .ch { transform: none; }
  .js .case__stage .browser img, .js .beach__visual .browser img { scale: 1; }
  .stage { transform: none; }
}

/* =====================================================================
   Mobile and tablet pass (2026-10-14). Every rule below sits inside a max-width query
   (below 64em / 1024px) or (hover: none), so the desktop layout is untouched.
   Backup of the version before: work/backups/2026-10-14-studio-v3-before-mobile/.
   ===================================================================== */
@media (max-width: 63.99em) {
  /* Landscape phones with a notch: keep text clear of it. */
  :root { --gutter: max(clamp(1.25rem, 5vw, 3rem), env(safe-area-inset-left), env(safe-area-inset-right)); }

  /* Tap targets of at least 44px. */
  .logo { min-height: 2.75rem; }
  .nav__cta { min-height: 3.25rem; font-size: 1rem; }
  .about__links .textlink, .contact__direct a, .foot__row a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .foot__row { gap: .5rem; }

  /* The menu sheet scrolls if it is taller than the screen (landscape), and never scrolls the page behind. */
  .js .nav { overflow-y: auto; overscroll-behavior: contain; }
  .js .nav ul { flex: none; }
  .nav__cta { flex: none; margin-top: 2rem; }

  /* Small labels a touch larger. */
  .card__tag, .contact__direct li > span:first-child { font-size: .8125rem; }

  /* Mobile CTA: tucks away while reading downwards (main.js sets .is-tucked), returns on the way up. */
  .dock { min-height: 3.25rem; justify-content: center; }
  .dock.is-on.is-tucked { transform: translateY(160%); }

  /* About on tablets: portrait beside the text instead of a small picture above a wide column. */
  @media (min-width: 48em) {
    .about__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 3rem; }
    .portrait__frame { width: 100%; }
  }

  /* Landscape phones: the biggest headings would fill the whole screen. */
  @media (max-height: 30em) and (orientation: landscape) {
    .hero__title { font-size: clamp(3rem, 8vw, 4.75rem); }
    .contact__title { font-size: clamp(3rem, 8vw, 4.75rem); }
    .js .nav { padding-top: calc(var(--header-h) + .75rem); }
    .js .nav li a { font-size: 2rem; padding-block: .4rem; }
  }
}

@media (max-width: 47.99em) {
  /* Hero: less air above, a tidy list of ticks. */
  .hero { padding-top: 1.5rem; }
  .hero__grid { gap: 2.75rem; }
  .ticks { flex-direction: column; gap: .55rem; }

  /* Values: smaller numerals, tighter rows. */
  .value { padding: 1.75rem 0 2rem; }
  .value__n { font-size: 2.75rem; margin-bottom: .9rem; }

  /* Case buttons span the column, like the hero buttons. */
  .case__link .btn, .beach__more .btn { width: 100%; }

  /* About: a larger portrait. */
  .portrait__frame { width: min(100%, 21rem); }
}

/* Phones and tablets (2026-10-14): the portrait is never clipped away, whatever state the scroll motion left
   behind. motion.js only runs the blind reveal at 1024 px and up. */
@media (max-width: 63.99em) {
  .portrait__frame { clip-path: none !important; }
}

/* Touch screens: a tap must not leave a button stuck in its hover state; the fill shows while pressed. */
@media (hover: none) {
  .btn:hover { color: var(--fg); border-color: var(--bd); }
  .btn:hover::before { clip-path: circle(0% at var(--bx, 50%) var(--by, 100%)); }
  .btn:hover .arr { animation: none; }
  .btn--primary:hover { box-shadow: none; }
  .btn:active { color: var(--hfg); border-color: var(--hbd); }
  .btn:active::before { clip-path: circle(150% at 50% 50%); transition-duration: .3s; }
  .faq summary:hover { color: inherit; }
  .faq summary:hover::after { transform: none; }
  .faq details[open] summary:hover::after { transform: rotate(45deg); }
  .chips label:hover span { border-color: var(--ink); }
  .js .nav li a:hover { font-style: normal; color: inherit; }
  .js .nav li a:active { font-style: italic; color: var(--signal-text); }
}

/* ---------- Contact form: spam trap + sent state (kontakt.php, 2026-10-14) ---------- */
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form { position: relative; }
.form__note.is-ok { color: var(--ink); font-weight: 600; }
.form .btn[disabled] { opacity: .7; cursor: progress; }

/* ---------- Package page, paket.html (2026-10-14) ---------- */
.js .nav li a[aria-current="page"] { font-style: italic; color: var(--signal-text); }
@media (min-width: 64em) { .js .nav li a[aria-current="page"] { font-style: normal; background-size: 100% 1.5px; } }

.page-hero { padding-block: clamp(2.5rem, 8vw, 6rem) clamp(1rem, 4vw, 2rem); }
.page-hero__title { font-size: clamp(3rem, 12vw, 7rem); max-width: 13ch; margin-bottom: 1.5rem; }

.plans { padding-top: clamp(3rem, 8vw, 6rem); }
.plans__grid { display: grid; gap: 1rem; align-items: stretch; }
.plan { gap: 1.1rem; }
.plan .list { flex: 1; }
.card--line { border: 1.5px solid var(--ink); }
.card__tag--paper { background: var(--paper); color: var(--ink); }
.plan__price { display: flex; align-items: flex-end; gap: .6rem; }
.plan__sum { font-family: var(--serif); font-size: clamp(4rem, 13vw, 6rem); line-height: .8; letter-spacing: -.03em; font-variant-numeric: lining-nums; }
.plan__per { font-size: .875rem; font-weight: 600; line-height: 1.3; letter-spacing: .02em; padding-bottom: .2rem; }
.plan__pitch { font-size: 1.125rem; max-width: 30rem; }
.plan__extra { font-size: .9375rem; color: var(--muted); }
.card--main .plan__extra { color: rgb(242 240 235 / .85); }
.plan__btn { justify-self: start; margin-top: .5rem; }
.btn--paper { --bg: var(--paper); --fg: var(--ink); --bd: var(--paper); --hbg: var(--ink); --hfg: var(--paper); --hbd: var(--ink); }
.card--main :focus-visible { outline-color: var(--paper); }
.plans__note { max-width: 44rem; color: var(--muted); padding-top: 1.5rem; }
@media (min-width: 64em) { .plans__grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }

.scope { background: var(--paper-2); }
.scope__grid { display: grid; gap: 2.5rem; }
.scope__head { font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .75rem; }
.list--muted li { color: var(--muted); }
.list--muted li::before { content: "+"; }
.scope__note { margin-top: 1.25rem; max-width: 30rem; font-weight: 500; }
@media (min-width: 64em) { .scope__grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }

.terms__grid { display: grid; gap: 1rem; }
.terms__list { border-top: 1.5px solid var(--ink); }
.terms__list > div { display: grid; gap: .35rem; padding-block: 1.25rem; border-bottom: 1px solid var(--line); }
.terms__list dt { font-size: clamp(1.125rem, 3vw, 1.3rem); font-weight: 600; letter-spacing: -.01em; }
.terms__list dd { margin: 0; color: var(--muted); max-width: 40rem; }
@media (min-width: 48em) { .terms__list > div { grid-template-columns: 13rem 1fr; gap: 2rem; } }
@media (min-width: 64em) { .terms__grid { grid-template-columns: 1fr 1.6fr; gap: 4rem; } }

.contact--short .contact__lead { margin-bottom: 2rem; }
.contact--short .contact__direct { align-self: end; }

/* ---------- Monthly packages on the front page, inside Tjänster (2026-10-14) ---------- */
.home-plans { margin-top: clamp(3.5rem, 9vw, 6rem); padding-top: clamp(2rem, 5vw, 3rem); border-top: 1.5px solid var(--ink); }
.home-plans__head { display: grid; gap: 1rem; margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.home-plans__title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.25rem, 6.5vw, 3.75rem); line-height: 1; letter-spacing: -.02em; max-width: 16ch; text-wrap: balance; }
.home-plans__title em { font-style: italic; color: var(--signal-text); }
.home-plans__lead { font-size: 1.125rem; max-width: 34rem; }
.plan__name { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(2.5rem, 7vw, 3.5rem); line-height: .95; letter-spacing: -.02em; }
.plan--compact .plan__sum { font-size: clamp(3.25rem, 10vw, 4.5rem); }
.home-plans__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding-top: 1.75rem; }
.home-plans__foot p { color: var(--muted); font-size: .9375rem; }
@media (min-width: 64em) { .home-plans__head { grid-template-columns: 1fr 1fr; align-items: end; gap: 3rem; } }

/* ---------- Edit mode showcase, #redigera (2026-10-14). A miniature of work/redigeringslage. ---------- */
.editdemo { background: var(--ink); color: var(--paper); overflow: hidden; position: relative; isolation: isolate; }
.editdemo::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(45% 55% at 85% 40%, rgb(61 61 255 / .35), transparent 70%), radial-gradient(35% 40% at 10% 100%, rgb(125 107 255 / .18), transparent 70%); }
.editdemo .h2 em { color: var(--signal-light); }
.editdemo :focus-visible { outline-color: var(--signal-light); }
.editdemo__grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; }
.editdemo .h2 { margin-bottom: 1.5rem; }
.editdemo__lead { font-size: 1.1875rem; max-width: 32rem; margin-bottom: 1.5rem; }
.editdemo__points { display: grid; gap: .1rem; max-width: 32rem; border-top: 1.5px solid var(--paper); margin-bottom: 1.75rem; }
.editdemo__points li { display: flex; gap: .75rem; padding-block: .75rem; border-bottom: 1px solid rgb(242 240 235 / .2); }
.editdemo__points li::before { content: "→"; flex: none; }
.editdemo__points b { font-weight: 600; }
.editdemo__actions { display: grid; justify-items: start; gap: .9rem; }
.editdemo__note { color: var(--muted-dark); max-width: 30rem; }
@media (min-width: 64em) { .editdemo__grid { grid-template-columns: .9fr 1.1fr; gap: 4.5rem; } }

.ed {
  --ed-cream: #fbf4ea; --ed-brown: #3a2418; --ed-rust: #c4572e; --ed-amber: #e5a400;
  position: relative; border-radius: var(--radius); overflow: hidden; background: var(--ed-cream);
  box-shadow: 0 0 0 1.5px var(--ink), 0 2.5rem 5rem -2.5rem rgb(12 14 26 / .55);
}
.ed__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
  padding: .7rem .8rem .7rem 1rem; background: var(--ink); color: var(--paper); font-size: .8125rem;
}
.ed__mode { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .6875rem; color: var(--signal-light); }
.ed__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--signal-light); }
.ed__status { flex: 1 1 10rem; min-width: 0; color: var(--muted-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed__status.is-dirty { color: #ffd166; font-weight: 600; }
.ed__status.is-ok { color: #7ee2a8; font-weight: 600; }
.ed__actions { display: flex; gap: .4rem; margin-left: auto; }
.ed__btn {
  min-height: 2.25rem; padding: .4rem .95rem; border-radius: 99px; border: 1.5px solid var(--signal);
  background: var(--signal); color: #fff; font-weight: 600; font-size: .8125rem; cursor: pointer;
  transition: opacity .2s, background-color .2s, transform .15s var(--ease);
}
.ed__btn--ghost { background: transparent; border-color: #3a3f58; color: var(--paper); }
.ed__btn:disabled { opacity: .4; cursor: default; }
.ed__btn:not(:disabled):active { transform: scale(.96); }
.ed__btn:focus-visible { outline-color: var(--paper); }

.ed__page { padding: clamp(1.1rem, 3vw, 1.75rem); color: var(--ed-brown); }
.ed__nav { display: flex; justify-content: space-between; align-items: center; padding-bottom: .9rem; margin-bottom: 1.25rem; border-bottom: 1px solid rgb(58 36 24 / .18); font-size: .8125rem; }
.ed__logo { font-family: var(--serif); font-size: 1.35rem; }
.ed__links { display: flex; gap: 1rem; opacity: .7; }
.ed__links i { font-style: normal; }
.ed__hero { display: grid; gap: 1.25rem; margin-bottom: 1.25rem; }
.ed__kicker { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ed-rust); margin-bottom: .5rem; }
.ed__title { font-family: var(--serif); font-size: clamp(1.75rem, 5vw, 2.4rem); line-height: 1.02; letter-spacing: -.01em; margin-bottom: .9rem; }
.ed__hours { display: inline-flex; gap: .5rem; align-items: baseline; padding: .45rem .8rem; border-radius: 99px; background: rgb(58 36 24 / .07); font-size: .875rem; }
.ed__hours b { font-weight: 700; }
.ed__img {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: .9rem; overflow: hidden;
  cursor: pointer; background: #e9b77f; outline: 2px dashed rgb(61 61 255 / .55); outline-offset: 3px;
  transition: outline-color .2s;
}
.ed__img:hover { outline-color: var(--signal); }
.ed__img-art { position: absolute; inset: 0; transition: opacity .35s var(--ease), transform .5s var(--ease); }
.ed__img-art i { position: absolute; border-radius: 50%; }
/* Three "photos", drawn in CSS: buns on a tray, a cup of coffee, a lunch bowl. */
.ed__img[data-variant="0"] { background: linear-gradient(160deg, #f0c98f, #c98a4b); }
.ed__img[data-variant="0"] .ed__img-art i { width: 34%; aspect-ratio: 1; background: radial-gradient(circle, transparent 0 62%, #a8642e 63% 70%, transparent 71%), conic-gradient(from 20deg, rgb(110 55 22 / .55), transparent 22%, rgb(110 55 22 / .45) 45%, transparent 68%, rgb(110 55 22 / .5) 90%, transparent), repeating-radial-gradient(circle, #e2a463 0 7%, #9a5626 8% 10.5%, #d9934f 11.5% 16%); box-shadow: 0 .6rem 1rem -.4rem rgb(58 36 24 / .55), inset 0 0 0 .25rem #c98545; }
.ed__img[data-variant="0"] .ed__img-art i:nth-child(1) { left: 8%; top: 14%; }
.ed__img[data-variant="0"] .ed__img-art i:nth-child(2) { left: 46%; top: 8%; transform: rotate(40deg); }
.ed__img[data-variant="0"] .ed__img-art i:nth-child(3) { left: 30%; top: 48%; transform: rotate(-20deg); }
.ed__img[data-variant="1"] { background: linear-gradient(200deg, #7c9a8e, #3e5a51); }
.ed__img[data-variant="1"] .ed__img-art i:nth-child(1) { width: 56%; aspect-ratio: 1; left: 22%; top: 12%; background: radial-gradient(circle, #f5e6d3 0 8%, #6b3a1e 9% 52%, #f7f1e8 53% 68%, #e9e0d2 69%); box-shadow: 0 1rem 1.5rem -.6rem rgb(0 0 0 / .45); }
.ed__img[data-variant="1"] .ed__img-art i:nth-child(2) { width: 14%; height: 9%; left: 74%; top: 38%; border-radius: 0 50% 50% 0; border: .35rem solid #f7f1e8; border-left: 0; background: none; }
.ed__img[data-variant="1"] .ed__img-art i:nth-child(3) { width: 18%; aspect-ratio: 1; left: 6%; top: 62%; background: radial-gradient(circle at 50% 50%, #8a4b22 0 14%, #d9934f 15% 62%, #b06a33 63%); }
.ed__img[data-variant="2"] { background: linear-gradient(140deg, #f4d7c6, #d98f74); }
.ed__img[data-variant="2"] .ed__img-art i:nth-child(1) { width: 62%; aspect-ratio: 1; left: 19%; top: 6%; background: radial-gradient(circle at 38% 40%, #7aa65a 0 14%, transparent 15%), radial-gradient(circle at 62% 46%, #e8c547 0 12%, transparent 13%), radial-gradient(circle at 48% 64%, #c4572e 0 13%, transparent 14%), radial-gradient(circle, #f3ead9 0 58%, #fffaf2 59% 70%, #e6dccb 71%); box-shadow: 0 1rem 1.5rem -.6rem rgb(58 36 24 / .4); }
.ed__img[data-variant="2"] .ed__img-art i:nth-child(2), .ed__img[data-variant="2"] .ed__img-art i:nth-child(3) { width: 4%; height: 40%; top: 30%; border-radius: 99px; background: #fffaf2; }
.ed__img[data-variant="2"] .ed__img-art i:nth-child(2) { left: 84%; }
.ed__img[data-variant="2"] .ed__img-art i:nth-child(3) { left: 89%; }
.ed__img.is-swapping .ed__img-art { opacity: 0; transform: scale(1.04); }
.ed__img-tag {
  position: absolute; left: .6rem; bottom: .6rem; padding: .3rem .6rem; border-radius: 99px;
  background: rgb(12 14 26 / .72); color: var(--paper); font-size: .75rem; font-weight: 600;
}
.ed__img.is-changed { outline: 3px solid var(--ed-amber); }
.ed__menu { border-top: 1.5px solid var(--ed-brown); }
.ed__menu li { display: flex; justify-content: space-between; gap: 1rem; padding-block: .6rem; border-bottom: 1px solid rgb(58 36 24 / .18); font-size: .9375rem; }
.ed__menu b { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Editable fields: the same outlines as in the real tool. */
.ed [data-ed-field] { border-radius: 3px; outline: 1.5px dashed rgb(61 61 255 / .5); outline-offset: 2px; transition: outline-color .15s, background-color .15s; }
.js .ed [data-ed-field] { cursor: text; }
.ed [data-ed-field]:hover { outline-color: var(--signal); }
.ed [data-ed-field]:focus { outline: 2px solid var(--signal); background: rgb(61 61 255 / .07); }
.ed [data-ed-field].is-changed { outline: 2px solid var(--ed-amber); background: rgb(255 200 0 / .16); }
.ed.is-live [data-ed-field], .ed.is-live .ed__img { outline-color: transparent; }

.ed__menu li:first-child { position: relative; }
.ed__hint {
  position: absolute; right: -.25rem; bottom: calc(100% + .1rem); z-index: 2; white-space: nowrap;
  padding: .4rem .75rem; border-radius: .7rem; background: var(--signal); color: #fff; font-size: .8125rem; font-weight: 600;
  box-shadow: 0 .8rem 1.5rem -.8rem rgb(61 61 255 / .9); pointer-events: none;
}
.ed__hint::after { content: ""; position: absolute; right: 1.2rem; bottom: -.3rem; width: .65rem; height: .65rem; background: inherit; transform: rotate(45deg); }
html:not(.js) .ed__hint, html:not(.js) .ed__actions { display: none; }
.ed__foot { padding: .65rem 1rem; border-top: 1px solid rgb(58 36 24 / .14); font-size: .75rem; color: #7a6656; }
@media (prefers-reduced-motion: no-preference) {
  .ed__hint { animation: ed-bob 2.4s var(--ease) infinite; }
  .ed.is-live .ed__dot { animation: pulse 2.4s var(--ease) infinite; }
}
@keyframes ed-bob { 50% { transform: translateY(-.3rem); } }
@media (min-width: 40em) { .ed__hero { grid-template-columns: 1.15fr 1fr; align-items: center; } }

/* ---------- Edit mode marketing (2026-10-14): "Nytt" tag, hero callout, own-software facts ---------- */
.tag-new {
  display: inline-block; padding: .18rem .5rem; border-radius: 99px; background: var(--signal); color: var(--on-signal);
  font-family: var(--sans); font-size: .625rem; font-weight: 700; font-style: normal; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase; vertical-align: .2em;
}
.nav__new .tag-new { margin-left: .35rem; }
.js .nav li a.nav__new:hover .tag-new { font-style: normal; }
.announce {
  display: flex; width: fit-content; align-items: center; gap: .65rem; max-width: 100%;
  margin-bottom: 1.5rem; padding: .35rem .9rem .35rem .4rem; border-radius: 99px;
  background: #fff; box-shadow: 0 0 0 1.5px var(--ink), 0 .8rem 1.6rem -1rem rgb(61 61 255 / .8);
  font-size: .875rem; line-height: 1.3; text-decoration: none;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.announce .tag-new { flex: none; padding: .3rem .6rem; vertical-align: 0; }
.announce__text b { font-weight: 700; color: var(--signal-text); }
.announce__arr { flex: none; transition: transform .3s var(--ease); }
.announce:hover { box-shadow: 0 0 0 1.5px var(--signal), 0 1rem 2rem -1rem rgb(61 61 255 / .95); transform: translateY(-1px); }
.announce:hover .announce__arr { transform: translateX(3px); }
.editdemo__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; max-width: 32rem; margin-bottom: 2rem; }
.editdemo__facts li { display: grid; gap: .25rem; padding: .9rem; border-radius: .9rem; background: rgb(242 240 235 / .06); box-shadow: inset 0 0 0 1px rgb(163 168 255 / .22); }
.editdemo__facts b { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 5vw, 2.5rem); line-height: 1; color: var(--signal-light); }
.editdemo__facts span { font-size: .8125rem; line-height: 1.35; color: var(--muted-dark); }
.editdemo .textlink { color: var(--paper); }
.editdemo .ed { box-shadow: 0 0 0 1.5px rgb(163 168 255 / .35), 0 2.5rem 5rem -2rem rgb(0 0 0 / .7); }
.announce__long { display: none; }
@media (min-width: 30em) { .announce__long { display: inline; } }
/* Seven links + the button: tighten the desktop menu until there is room (1024–1279 px). */
@media (min-width: 64em) and (max-width: 79.99em) {
  .js .nav, html:not(.js) .nav { gap: 1.25rem; }
  .js .nav ul { gap: 1.1rem; }
  .js .nav li a { font-size: .875rem; }
  .nav__cta { padding-inline: .95rem; }
}

/* Cards never grow wider than the screen, whatever a list item contains (2026-10-15). */
.card { grid-template-columns: minmax(0, 1fr); }
.list li > span { min-width: 0; }