/* Layout: one 12-column grid with equal outer margins. Each section is a short sentence on one side
   with its proof on the other, and whole colour fields alternate ivory, charcoal and orange. */
:root {
  --orange: #F66F2C;
  --charcoal: #14171A;
  --ivory: #E7E3DD;
  --stone: #EBE6DD;
  --soft: #1F2126;
  --white: #FFFFFF;
  --ink-2: #44474C;
  --on-dark-2: #ABA7A1;
  --on-orange-2: #3A1F12;

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --display-stretch: 112%;

  --fs-small: 0.875rem;
  --fs-body: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-lead: clamp(1.375rem, 1.05rem + 1.25vw, 2.25rem);
  --fs-head: clamp(2.5rem, 1.3rem + 4.6vw, 6rem);
  --fs-display: clamp(2.75rem, 0.4rem + 10.4vw, 10.25rem);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --gutter: clamp(16px, 3.2vw, 48px);
  --side-l: max(var(--gutter), env(safe-area-inset-left, 0px));
  --side-r: max(var(--gutter), env(safe-area-inset-right, 0px));
  --nav-h: 76px;
  --radius: 18px;

  /* Example client used in the service panels (Corner Grind Coffee, a sample brand) */
  --cg-teal: #1D4A4A;
  --cg-butter: #F3C969;
  --cg-cream: #F3E7CF;
  --cg-ink: #1B1A17;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--orange) var(--charcoal); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--charcoal);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 60; background: var(--ivory);
}
::selection { background: var(--orange); color: var(--charcoal); }
img { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 2px; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
input { caret-color: var(--orange); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-left: var(--side-l);
  padding-right: var(--side-r);
}

.skip {
  position: fixed; left: 16px; top: 16px; z-index: 100;
  background: var(--orange); color: var(--charcoal); padding: 12px 18px; border-radius: 999px;
  font-weight: 600; text-decoration: none; transform: translateY(-160%);
  transition: transform 200ms var(--ease-out);
}
.skip:focus { transform: none; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--orange); --btn-fg: var(--charcoal);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 48px; padding: 0 1.4em;
  border: 0; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 650; font-size: 1rem; letter-spacing: -0.005em; line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 1.1em; height: 1.1em; flex: none; transition: transform 250ms var(--ease-out); }
.btn-lg { min-height: 60px; padding: 0 1.75em; font-size: 1.0625rem; }
.btn-dark { --btn-bg: var(--charcoal); --btn-fg: var(--ivory); }
.btn-light { --btn-bg: var(--ivory); --btn-fg: var(--charcoal); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover svg { transform: translateX(4px); }
  .btn:hover { --btn-bg: #FF8346; }
  .btn-dark:hover { --btn-bg: #000; }
  .btn-light:hover { --btn-bg: var(--white); }
}
.magnet { display: inline-block; will-change: transform; }
.magnet.is-block { display: block; }
.price-card .magnet { margin-top: auto; }

.link-under {
  display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px;
  font-weight: 600; text-decoration: none; position: relative; background: none; border: 0; padding: 0;
}
.link-under::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px;
  background: currentColor; transform-origin: right; transition: transform 300ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .link-under:hover::after { transform: scaleX(0); }
}

/* ---------- Navigation ---------- */
.nav {
  --nav-fg: var(--charcoal); --nav-bg: var(--ivory);
  position: fixed; z-index: 50; left: 0; right: 0; top: env(safe-area-inset-top, 0px);
  color: var(--nav-fg);
  transition: transform 450ms var(--ease-out), color 300ms ease;
}
.nav::before {
  content: ""; position: absolute; inset: 0; background: var(--nav-bg);
  transition: opacity 300ms ease, background-color 300ms ease;
}
.nav[data-theme="top"]::before, .nav[data-theme="photo"]::before { opacity: 0; }
.nav[data-theme="dark"] { --nav-fg: var(--ivory); --nav-bg: var(--charcoal); }
.nav[data-theme="soft"] { --nav-fg: var(--ivory); --nav-bg: var(--soft); }
.nav[data-theme="photo"] { --nav-fg: var(--ivory); }
.nav[data-theme="orange"] { --nav-fg: var(--charcoal); --nav-bg: var(--orange); }
.nav[data-theme="stone"] { --nav-bg: var(--stone); }
.nav.is-hidden { transform: translateY(calc(-100% - env(safe-area-inset-top, 0px))); }
.nav-inner {
  position: relative; height: var(--nav-h);
  display: flex; align-items: center; gap: 24px;
}
.nav-logo { display: block; flex: none; padding: 6px 0; border-radius: 6px; }
.logo-mask {
  display: block; aspect-ratio: 1583 / 680; height: 54px;
  background: currentColor;
  -webkit-mask: url("../img/elevate-wrk-logo-mask.svg") center / contain no-repeat;
  mask: url("../img/elevate-wrk-logo-mask.svg") center / contain no-repeat;
}
.nav-links {
  list-style: none; padding: 0; margin: 0 0 0 auto;
  display: flex; gap: clamp(16px, 2.4vw, 40px);
}
.nav-links a {
  display: inline-block; padding: 10px 0; font-size: 0.975rem; font-weight: 550;
  text-decoration: none; position: relative;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover::after { transform: scaleX(1); }
}
.nav-call {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; margin-left: clamp(8px, 1.6vw, 24px);
  border: 2px solid currentColor; border-radius: 999px; font-size: 0.95rem; font-weight: 600; text-decoration: none;
  transition: transform 160ms var(--ease-out);
}
.nav-call svg, .menu-call svg, .btn-call svg { width: 1.1em; height: 1.1em; flex: none; }
.nav-call:active { transform: scale(0.97); }
.nav-cta { min-height: 44px; font-size: 0.95rem; margin-left: 10px; }
.nav[data-theme="orange"] .nav-cta { --btn-bg: var(--charcoal); --btn-fg: var(--ivory); }
.nav-menu {
  display: none; margin-left: auto; min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 2px solid currentColor; background: none; font-weight: 600; font-size: 0.95rem;
}
@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .nav-call { margin-left: auto; }
  .nav-menu { margin-left: 8px; }
  .nav-menu { display: inline-flex; align-items: center; }
  :root { --nav-h: 68px; }
  .logo-mask { height: 48px; }
}

.mobile-menu {
  position: fixed; inset: 0; z-index: 70; background: var(--charcoal); color: var(--ivory);
  display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) var(--side-r) calc(env(safe-area-inset-bottom, 0px) + 24px) var(--side-l);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 520ms var(--ease-io);
}
.mobile-menu.is-open { clip-path: inset(0 0 0 0); }
.mobile-menu-top { display: flex; justify-content: space-between; align-items: center; height: 52px; }
.mobile-menu-top .nav-menu { display: inline-flex; align-items: center; margin: 0; }
.mobile-menu ul { list-style: none; padding: 0; margin: auto 0; display: grid; gap: 4px; }
.mobile-menu li a {
  display: block; font-size: clamp(2.5rem, 12vw, 4rem); font-weight: 800; font-stretch: 108%;
  letter-spacing: -0.035em; line-height: 1.08; text-decoration: none;
  transform: translateY(24px); opacity: 0;
  transition: transform 500ms var(--ease-out), opacity 400ms ease;
}
.mobile-menu.is-open li a { transform: none; opacity: 1; }
.mobile-menu.is-open li:nth-child(2) a { transition-delay: 50ms; }
.mobile-menu.is-open li:nth-child(3) a { transition-delay: 100ms; }
.mobile-menu.is-open li:nth-child(4) a { transition-delay: 150ms; }
.mobile-menu.is-open li:nth-child(5) a { transition-delay: 200ms; }
.mobile-menu .btn { width: 100%; }
.mobile-menu .menu-call { margin-top: 10px; }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--ivory); }
.hero-stage { position: relative; height: 100svh; min-height: 600px; overflow: hidden; }
.hero-inner {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: calc(var(--nav-h) + 8px); padding-bottom: 48px;
}
.hero-title {
  font-size: var(--fs-display); font-weight: 800; font-stretch: var(--display-stretch);
  letter-spacing: -0.04em; line-height: 0.92; color: var(--charcoal);
}
.hero-title .line { display: block; overflow: hidden; padding: 0.02em 0 0.1em; margin-bottom: -0.1em; }
.hero-title .line-in { display: inline-block; white-space: nowrap; }
.slot {
  position: relative; display: inline-block; vertical-align: baseline;
  width: 2.05em; height: 0.72em; margin-right: 0.16em;
  border-radius: 999px; overflow: hidden; background: var(--orange);
}
.slot-words {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 0.26em; font-weight: 750; font-stretch: 100%; letter-spacing: -0.02em; line-height: 1; color: var(--charcoal);
}
.slot-words > span { grid-area: 1 / 1; align-self: stretch; display: grid; place-items: center; white-space: nowrap; }
.slot .slot-words > span + span { visibility: hidden; }
.hero.has-expand .slot { visibility: hidden; }
.hero-foot {
  margin-top: clamp(28px, 4.5vh, 52px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px clamp(24px, 4vw, 64px);
}
.hero-sub { max-width: 40ch; font-size: var(--fs-body); color: var(--charcoal); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.hero-ring {
  position: absolute; z-index: 1; left: 50%; top: 54%;
  width: min(122vw, 1800px); aspect-ratio: 1000 / 600; translate: -50% -50%;
  pointer-events: none; overflow: visible;
}
.hero-ring path { fill: none; stroke: var(--orange); stroke-width: 12; stroke-linecap: butt; }
.hero-expand { display: none; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hero.has-expand .hero-expand { display: block; }
.pill {
  position: absolute; z-index: 6; left: 0; top: 0; overflow: hidden;
  border-radius: 999px; background: rgb(246, 111, 44); box-shadow: inset 0 0 0 0px #F66F2C;
}

@media (max-width: 767px) {
  :root { --display-stretch: 100%; --fs-display: clamp(2.6rem, 11.4vw, 4.5rem); }
  .hero-stage { min-height: 560px; }
  .hero-inner { justify-content: flex-end; padding-bottom: max(40px, env(safe-area-inset-bottom, 0px)); }
  .hero-ring { top: 40%; width: 170vw; }
  .hero-inner { justify-content: center; }
  .slot { display: block; width: 100%; height: 0.95em; margin: 0.12em 0 0.14em; }
  .slot-words { font-size: 0.38em; }
  .hero-title .line-in { white-space: normal; }
  .hero-actions { width: 100%; }
  .hero-actions .magnet, .hero-actions .btn { width: 100%; }
}

/* The live project inside the opened window. The board is a size container, so every mockup keeps
   its proportions; the cursor, its tag and the notifications stay at real UI size. */
.studio {
  position: absolute; inset: 0; z-index: 5; visibility: hidden;
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "copy board" "rail rail";
  column-gap: clamp(24px, 4vw, 72px); row-gap: clamp(16px, 3vh, 32px);
  padding: calc(var(--nav-h) + clamp(8px, 2vh, 24px)) var(--side-r) clamp(18px, 3.6vh, 36px) var(--side-l);
  background: var(--stone); color: var(--charcoal);
  --pill-bg: var(--orange); --pill-fg: var(--charcoal);
}
.studio-copy { grid-area: copy; align-self: center; min-width: 0; display: grid; gap: clamp(14px, 2.4vh, 24px); }
.studio-word {
  display: grid; overflow: hidden;
  font-size: clamp(2.5rem, 0.9rem + 3.6vw, 5.25rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1.12;
}
.studio-word > span { grid-area: 1 / 1; white-space: nowrap; }
.studio-word .is-end { color: var(--orange); }
.studio-lines { display: grid; }
.studio-lines p {
  grid-area: 1 / 1; max-width: 24ch;
  font-size: clamp(1.0625rem, 0.9rem + 0.55vw, 1.4rem); font-weight: 550; line-height: 1.3; letter-spacing: -0.01em;
}
.studio-client { font-size: var(--fs-small); font-weight: 550; opacity: 0.8; }
.studio-cta {
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: opacity 400ms ease, transform 600ms var(--ease-out), visibility 0s linear 400ms;
}
.studio.is-end .studio-cta { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity 400ms ease, transform 600ms var(--ease-out), visibility 0s; }
.studio-rail { grid-area: rail; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 32px); transition: opacity 300ms ease, visibility 0s; }
.studio-rail button {
  pointer-events: auto; display: grid; gap: 10px; text-align: left;
  background: none; border: 0; padding: 8px 0; color: inherit; font-weight: 650; font-size: 0.95rem;
}
.studio-rail i { display: block; height: 4px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, currentColor 20%, transparent); }
.studio-rail b { display: block; height: 100%; background: currentColor; transform-origin: left; transform: scaleX(0); }

.board { grid-area: board; position: relative; min-width: 0; min-height: 0; container: board / size; }
.board > * { position: absolute; }

.mark-wrap { left: calc(50% - 17cqmin); top: calc(36% - 17cqmin); width: 34cqmin; height: 34cqmin; z-index: 5; }
.mark-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gd { fill: none; stroke: var(--orange); stroke-width: 0.6; stroke-dasharray: 1; stroke-dashoffset: 1; }
.m-disc { fill: var(--cg-teal); }
.m-bean { fill: var(--cg-butter); }
.m-crease { fill: none; stroke: var(--cg-teal); stroke-width: 5.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.sel { position: absolute; inset: -7%; border: 1.5px solid var(--orange); }
.sel i { position: absolute; width: 10px; height: 10px; margin: -5px; background: var(--white); border: 1.5px solid var(--orange); }
.sel i:nth-child(1) { left: 0; top: 0; } .sel i:nth-child(2) { right: 0; top: 0; }
.sel i:nth-child(3) { left: 0; bottom: 0; } .sel i:nth-child(4) { right: 0; bottom: 0; }
.wordmark {
  left: 0; right: 0; top: calc(36% + 20cqmin); text-align: center;
  font-family: "Young Serif", Georgia, serif; font-size: 8cqmin; line-height: 1.1; letter-spacing: -0.01em; color: var(--cg-teal);
}
.tagline { left: 0; right: 0; top: calc(36% + 31cqmin); text-align: center; font-size: max(12px, 2.3cqmin); font-weight: 550; color: var(--ink-2); }
.type { display: inline-grid; }
.type > span { grid-area: 1 / 1; white-space: pre; }
.type-ghost { visibility: hidden; }
.type-live { justify-self: start; }
.type-live.is-typing::after {
  content: ""; display: inline-block; width: 0.07em; min-width: 2px; height: 1em; margin-left: 0.05em;
  vertical-align: -0.14em; background: var(--orange);
}
.kit-colors { right: 0; top: 13%; width: 24cqmin; display: grid; gap: 1.6cqmin; z-index: 2; }
.sw {
  display: flex; flex-direction: column; justify-content: flex-end; height: 12.5cqmin; padding: 1.6cqmin 2cqmin; border-radius: 2cqmin;
  font-size: max(11px, 1.7cqmin); font-weight: 550; line-height: 1.3; font-variant-numeric: tabular-nums;
}
.sw b { font-weight: 700; }
.sw-teal { background: var(--cg-teal); color: var(--cg-cream); }
.sw-butter { background: var(--cg-butter); color: var(--cg-ink); }
.sw-cream { background: var(--cg-cream); color: var(--cg-ink); box-shadow: inset 0 0 0 1px rgba(20, 23, 26, 0.14); }
.kit-aa { left: 0; top: 15%; width: 24cqmin; padding: 2.4cqmin; border-radius: 2cqmin; background: var(--white); color: var(--cg-ink); display: grid; gap: 0.5cqmin; z-index: 2; }
.kit-aa b { font-family: "Young Serif", Georgia, serif; font-weight: 400; font-size: 11cqmin; line-height: 1.05; color: var(--cg-teal); }
.kit-aa span { font-size: max(11px, 1.7cqmin); font-weight: 650; }
.kit-aa span + span { font-weight: 450; color: #55524C; }

.ph {
  left: 4%; top: 2%; height: 96%; aspect-ratio: 9 / 19.5; z-index: 3;
  padding: 1.1cqmin; border-radius: 5.6cqmin; background: var(--charcoal);
  transform-origin: 0 0; --to-top: 30; --to-h: 66;
}
.ph-screen { position: relative; height: 100%; border-radius: 4.5cqmin; overflow: hidden; background: var(--white); color: var(--cg-ink); container-type: inline-size; }
.ph-post, .ph-site { position: absolute; inset: 0; display: flex; flex-direction: column; }
.ph-head { display: flex; align-items: center; gap: 3cqw; padding: 13cqw 5cqw 4cqw; font-size: 4.4cqw; font-weight: 700; line-height: 1.2; }
.ph-head small { display: block; font-size: 3.5cqw; font-weight: 500; color: #66635C; }
.ph-avatar { flex: none; width: 11cqw; height: 11cqw; }
.ph-avatar svg, .sc-logo svg { display: block; width: 100%; height: 100%; }
.ph-pic { aspect-ratio: 4 / 5; overflow: hidden; background: #ECE9E4; }
.ph-actions { display: flex; align-items: center; gap: 2.4cqw; padding: 4cqw 5cqw 1cqw; font-size: 4cqw; font-weight: 650; font-variant-numeric: tabular-nums; }
.ph-actions b { font-weight: 800; }
.ph-heart { display: grid; width: 7.5cqw; height: 7.5cqw; }
.ph-heart svg { grid-area: 1 / 1; width: 100%; height: 100%; overflow: visible; }
.heart-line { fill: none; stroke: var(--cg-ink); stroke-width: 2; }
.heart-fill { fill: var(--orange); }
.ph-copy { padding: 1cqw 5cqw; font-size: 3.9cqw; line-height: 1.4; }
.ph-copy b { font-weight: 700; }
.ph-site { background: var(--cg-cream); }
.ph-site-nav { display: flex; align-items: center; gap: 2.4cqw; padding: 13cqw 5cqw 4cqw; font-family: "Young Serif", Georgia, serif; font-size: 5cqw; color: var(--cg-teal); }
.ph-site-nav svg { width: 8cqw; height: 8cqw; }
.ph-site-nav i { margin-left: auto; width: 6.5cqw; height: 0.9cqw; border-radius: 1cqw; background: currentColor; box-shadow: 0 2cqw 0 currentColor; translate: 0 -1cqw; }
.ph-site-pic { aspect-ratio: 1; margin: 0 5cqw; border-radius: 4cqw; overflow: hidden; }
.ph-site-copy { display: grid; gap: 5cqw; padding: 6cqw 5cqw; }
.ph-site-copy b { font-family: "Young Serif", Georgia, serif; font-weight: 400; font-size: 9.5cqw; line-height: 1.02; color: var(--cg-teal); }
.ph-site-btn { justify-self: start; padding: 2.8cqw 5cqw; border-radius: 99px; background: var(--cg-butter); font-size: 4.2cqw; font-weight: 700; }

.sc {
  left: 44%; top: 7%; width: 50%; z-index: 4; container-type: inline-size;
  padding: 2.2cqmin; border-radius: 2.2cqmin; background: var(--white); color: var(--charcoal);
  display: grid; gap: 4.5cqw;
}
.sc-bar { display: flex; align-items: center; gap: 2.6cqw; min-height: 11cqw; padding: 2.4cqw 4cqw; border-radius: 99px; background: #F1EFEB; font-size: 4.1cqw; font-weight: 500; }
.sc-bar svg { flex: none; width: 4.6cqw; height: 4.6cqw; }
.sc-result { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 3.2cqw; row-gap: 0.6cqw; align-items: center; }
.sc-logo { grid-row: span 3; width: 14cqw; height: 14cqw; }
.sc-result b { font-size: 4.8cqw; font-weight: 750; line-height: 1.15; }
.sc-rating { display: flex; align-items: center; gap: 1.4cqw; font-size: 3.6cqw; font-weight: 700; font-variant-numeric: tabular-nums; }
.stars { display: flex; gap: 0.4cqw; }
.stars svg { width: 3.9cqw; height: 3.9cqw; fill: var(--orange); }
.sc-meta { font-size: 3.6cqw; color: #4E5156; }
.sc-meta .open { color: #1C7A4A; font-weight: 650; }
.sc-actions { display: flex; gap: 2cqw; }
.sc-actions span { flex: 1; padding: 2.4cqw 0; border-radius: 99px; background: #F1EFEB; text-align: center; font-size: 3.6cqw; font-weight: 650; }
.sc-actions span:first-child { background: var(--cg-teal); color: var(--cg-cream); }

.toasts { left: 50%; top: 55%; width: min(44%, 340px); display: grid; gap: 10px; z-index: 6; }
.toast {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 14px;
  background: var(--white); color: var(--charcoal);
  font-size: clamp(0.8125rem, 0.76rem + 0.2vw, 0.9375rem); font-weight: 600; line-height: 1.3;
}
.toast i {
  flex: none; display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 10px;
  background: var(--charcoal); color: var(--orange); font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums;
}
.toast-order { left: 5%; top: 76%; z-index: 6; }
.toast-order i { background: var(--orange); color: var(--charcoal); }
.toast-order svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }

.br {
  left: 0; top: 5%; width: 76%; aspect-ratio: 16 / 10.4; z-index: 2; container-type: inline-size;
  display: flex; flex-direction: column; overflow: hidden; border-radius: 1.6cqmin; background: var(--cg-cream); color: var(--cg-ink);
}
.br-bar { flex: none; height: 6.4cqw; display: flex; align-items: center; justify-content: center; background: #2A2C31; }
.br-url { min-width: 30cqw; padding: 0.8cqw 3cqw; border-radius: 99px; background: #3A3D43; color: #D6D3CD; text-align: center; font-size: 1.9cqw; }
.br-nav { display: flex; align-items: center; gap: 1.6cqw; padding: 2.6cqw 3.4cqw; font-size: 1.9cqw; font-weight: 600; }
.br-nav svg { width: 4.6cqw; height: 4.6cqw; }
.br-nav .cgw { font-family: "Young Serif", Georgia, serif; font-size: 2.6cqw; color: var(--cg-teal); }
.br-links { margin-left: auto; display: flex; gap: 2.8cqw; }
.br-hero { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; padding: 0 3.4cqw 3.4cqw; }
.br-copy { display: grid; align-content: center; gap: 2.4cqw; }
.br-head { font-family: "Young Serif", Georgia, serif; font-weight: 400; font-size: 6.4cqw; line-height: 1.04; letter-spacing: -0.01em; color: var(--cg-teal); }
.br-head .hw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.br-head .hw > span { display: inline-block; }
.br-copy p { max-width: 26ch; font-size: 1.9cqw; line-height: 1.45; }
.br-btn { justify-self: start; padding: 1.5cqw 3cqw; border-radius: 99px; background: var(--cg-butter); font-size: 1.9cqw; font-weight: 700; }
.br-pic { min-height: 0; overflow: hidden; border-radius: 1.8cqw; }

.cur { left: 0; top: 0; z-index: 10; pointer-events: none; }
.cur-arrow { display: block; width: 24px; height: 24px; margin: -3px 0 0 -4px; fill: var(--charcoal); stroke: var(--white); stroke-width: 1.6; stroke-linejoin: round; }
.cur-ring { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--pill-bg); opacity: 0; }
.cur-tag {
  position: absolute; left: 16px; top: 18px; display: grid; overflow: hidden; padding: 6px 12px; border-radius: 6px 999px 999px 999px;
  background: var(--pill-bg); color: var(--pill-fg); font-size: 0.8125rem; font-weight: 650; white-space: nowrap;
}
.cur-tag > span { grid-area: 1 / 1; }

@container board (orientation: portrait) {
  .kit-colors { left: 0; right: 0; top: auto; bottom: 1%; width: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sw { height: 15cqmin; }
  .kit-aa { display: none; }
  .ph { left: 0; top: 0; height: 100%; --to-top: 42; --to-h: 58; }
  .sc { left: 38%; top: 5%; width: 62%; }
  .toasts { left: auto; right: 0; top: auto; bottom: 3%; width: 72%; gap: 8px; }
  .toast { gap: 10px; padding: 8px 12px 8px 8px; font-size: 0.8125rem; }
  .toast i { min-width: 32px; height: 32px; border-radius: 8px; }
  .br { top: 1%; width: 100%; }
  .toast-order { left: 0; top: auto; bottom: 2%; }
}
@media (max-width: 767px) {
  .studio {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "copy" "board" "rail"; row-gap: 18px;
  }
  .studio-copy { align-self: start; gap: 10px; }
  .studio-word { font-size: clamp(2.25rem, 10vw, 3rem); }
  .studio-lines p { font-size: 1.0625rem; }
  .studio-client { font-size: 0.8125rem; }
  .studio-cta { position: absolute; z-index: 12; left: var(--side-l); right: var(--side-r); bottom: max(18px, env(safe-area-inset-bottom, 0px)); }
  .studio-cta .btn { width: 100%; }
  .studio.is-end .studio-rail { opacity: 0; visibility: hidden; transition: opacity 300ms ease, visibility 0s linear 300ms; }
  .studio-rail button { font-size: 0.875rem; }
}

/* ---------- Statement ---------- */
.statement { background: var(--charcoal); color: var(--ivory); }
.statement-stage {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(32px, 5vh, 56px);
  padding-top: calc(var(--nav-h) + 48px); padding-bottom: 96px;
}
.statement-text {
  max-width: 24em; font-size: clamp(1.375rem, 0.95rem + 1.4vw, 2.25rem);
  font-weight: 600; font-stretch: 104%; letter-spacing: -0.02em; line-height: 1.2;
}
.statement-title {
  font-size: var(--fs-head); font-weight: 800; font-stretch: var(--display-stretch);
  letter-spacing: -0.04em; line-height: 0.95; color: var(--orange); max-width: 9em;
}
.statement-title .tw { display: inline-block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; vertical-align: top; }
.statement-title .tw > span { display: inline-block; }
.statement-text .w { color: var(--on-dark-2); }
.no-motion .statement-text .w { color: var(--ivory); }
.chip {
  display: inline-block; width: 1.25em; height: 0.82em; vertical-align: -0.1em;
  border-radius: 0.14em; overflow: hidden; margin: 0 0.06em; position: relative;
}
.chip-logo { background: var(--orange); }
.chip-logo::before {
  content: ""; position: absolute; inset: 8% 6%; background: var(--charcoal);
  -webkit-mask: url("../img/elevate-wrk-logo-mask.svg") center / contain no-repeat;
  mask: url("../img/elevate-wrk-logo-mask.svg") center / contain no-repeat;
}
.chip-web { background: var(--ivory); }
.chip-web::before { content: ""; position: absolute; left: 12%; top: 18%; width: 54%; height: 18%; background: var(--charcoal); border-radius: 2px; }
.chip-web::after { content: ""; position: absolute; left: 12%; bottom: 18%; width: 34%; height: 22%; background: var(--orange); border-radius: 99px; }
.chip-ad { background: #FBB28D; }
.chip-ad::before { content: "AD"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.4em; font-weight: 800; color: var(--charcoal); }

/* ---------- Services ---------- */
.services { position: relative; background: var(--ivory); overflow: hidden; }
.services-track { display: block; }
.panel {
  position: relative;
  padding: 120px var(--side-r) 120px var(--side-l);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 48px;
  align-items: center;
}
.panel-intro { background: var(--ivory); }
.panel-branding { background: var(--stone); }
.panel-marketing { background: var(--orange); }
.panel-websites { background: var(--soft); color: var(--ivory); }
.panel-copy { grid-column: 1 / span 5; min-width: 0; display: grid; gap: 28px; align-content: center; }
.panel-intro .panel-copy { grid-column: 1 / span 9; }
.panel-title {
  font-size: var(--fs-head); font-weight: 800; font-stretch: var(--display-stretch);
  letter-spacing: -0.04em; line-height: 0.95;
}
.panel-intro .panel-title { font-size: clamp(2.75rem, 1.2rem + 6vw, 7.5rem); max-width: 9.5em; }
.panel-lead { font-size: var(--fs-body); max-width: 42ch; }
.panel-intro .panel-lead { font-size: var(--fs-lead); line-height: 1.25; max-width: 30ch; font-weight: 500; letter-spacing: -0.015em; }
.panel-list { list-style: none; padding: 0; display: grid; gap: 2px; }
.panel-list li {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); font-weight: 600; letter-spacing: -0.01em;
  padding: 10px 0; display: flex; align-items: center; gap: 14px;
}
.panel-list li::before {
  content: ""; flex: none; width: 0.95em; height: 0.55em; border: 3px solid var(--orange); border-radius: 50%;
  transform: rotate(-20deg);
}
.panel-marketing .panel-list li::before { border-color: var(--charcoal); }
.panel-visual {
  grid-column: 7 / span 6; position: relative; min-width: 0;
  height: clamp(420px, 62svh, 640px);
  container-type: size;
}
.example-label {
  position: absolute; left: 0; bottom: -36px; font-size: var(--fs-small); font-weight: 550;
  color: var(--ink-2);
}
.panel-marketing .example-label { color: var(--on-orange-2); }
.panel-websites .example-label { color: var(--on-dark-2); }
.panel-websites .link-under, .panel-websites .panel-lead { color: var(--ivory); }

.services.is-horizontal .services-track { display: flex; width: max-content; height: 100svh; will-change: transform; }
.services.is-horizontal .panel { width: 100vw; height: 100svh; flex: none; padding-top: calc(var(--nav-h) + 40px); padding-bottom: 120px; }
.services.is-horizontal .panel-intro { width: 78vw; }

.services-progress {
  display: none; position: absolute; z-index: 5; left: var(--side-l); right: var(--side-r); bottom: 36px;
  align-items: center; gap: 28px; color: var(--charcoal); transition: color 300ms ease;
}
.services.is-horizontal .services-progress { display: flex; }
.services[data-active="websites"] .services-progress { color: var(--ivory); }
.services-progress button {
  background: none; border: 0; padding: 8px 0; font-weight: 600; font-size: 0.95rem;
  opacity: 0.68; transition: opacity 250ms ease;
}
.services-progress button[aria-current="true"] { opacity: 1; }
.services-progress .track { flex: 1; height: 4px; border-radius: 4px; background: currentColor; opacity: 1; position: relative; overflow: hidden; }
.services-progress .track::before { content: ""; position: absolute; inset: 0; background: var(--ivory); opacity: 0.72; }
.services[data-active="marketing"] .services-progress .track::before { background: #FBB28D; opacity: 1; }
.services[data-active="websites"] .services-progress .track::before { background: var(--soft); opacity: 0.6; }
.services-progress .fill { position: absolute; inset: 0; background: currentColor; transform-origin: left; transform: scaleX(0); }

@media (max-width: 767px) {
  .panel { grid-template-columns: minmax(0, 1fr); padding-top: 96px; padding-bottom: 112px; row-gap: 56px; }
  .panel-copy, .panel-intro .panel-copy, .panel-visual { grid-column: 1; }
  .panel-visual { height: 440px; }
}

/* Mockups (the example brand's real pieces) */
/* Where a photo would go, the example café's own brand graphic: a cream sun and the mark, cropped */
.cg-art { position: relative; overflow: hidden; width: 100%; height: 100%; background: var(--cg-butter); }
.cg-art::before { content: ""; position: absolute; left: 12%; top: 14%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: var(--cg-cream); }
.cg-art svg { position: absolute; right: -16%; bottom: -22%; width: 82%; height: auto; aspect-ratio: 1; }
[data-ui] { font-family: var(--font); }
.mock { position: absolute; }
.kit-tile {
  left: 0; top: 2%; width: 54cqw; aspect-ratio: 1; background: var(--cg-teal); border-radius: 3cqw;
  display: grid; place-items: center; align-content: center; gap: 2.4cqw; color: var(--cg-butter); text-align: center;
}
.kit-tile svg { width: 19cqw; height: 19cqw; }
.cg-word { font-family: "Young Serif", Georgia, serif; font-size: 6.2cqw; line-height: 1; letter-spacing: -0.01em; }
.cg-sub { font-size: 2.2cqw; color: var(--cg-cream); font-weight: 500; letter-spacing: 0.02em; }
.kit-swatches { right: 0; top: 0; width: 40cqw; display: grid; gap: 1.6cqw; }
.swatch {
  height: 9.5cqw; border-radius: 2cqw; padding: 0 2.6cqw;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 2.3cqw; font-weight: 600; font-variant-numeric: tabular-nums;
}
.swatch-teal { background: var(--cg-teal); color: var(--cg-cream); }
.swatch-butter { background: var(--cg-butter); color: var(--cg-ink); }
.swatch-cream { background: var(--cg-cream); color: var(--cg-ink); }
.kit-type {
  right: 3cqw; top: 40cqh; width: 37cqw; background: var(--white); border-radius: 2.4cqw; padding: 3cqw;
  color: var(--cg-ink); display: grid; gap: 0.6cqw;
}
.kit-type .aa { font-family: "Young Serif", Georgia, serif; font-size: 13cqw; line-height: 1; color: var(--cg-teal); }
.kit-type span { font-size: 2.2cqw; font-weight: 600; }
.kit-type span + span { font-weight: 400; color: #55524C; }
.biz-card {
  width: 46cqw; aspect-ratio: 1.75; background: var(--cg-cream); border-radius: 1.6cqw;
  padding: 3.2cqw; color: var(--cg-ink); display: grid; grid-template-columns: auto 1fr; gap: 0 2.4cqw; align-content: space-between;
  box-shadow: 0 2cqw 5cqw rgba(20,23,26,0.16);
}
.kit-card { left: 16cqw; bottom: 0; rotate: -6deg; }
.biz-card svg { width: 8cqw; height: 8cqw; grid-row: span 2; }
.biz-card b { font-family: "Young Serif", Georgia, serif; font-weight: 400; font-size: 4cqw; line-height: 1.05; color: var(--cg-teal); align-self: center; }
.biz-card small { font-size: 2cqw; color: #55524C; align-self: start; }
.biz-card .meta { grid-column: 1 / -1; font-size: 2cqw; line-height: 1.5; font-variant-numeric: tabular-nums; }

.phone {
  background: var(--charcoal); border-radius: 6cqw; padding: 1.6cqw;
  box-shadow: 0 2.5cqw 6cqw rgba(20,23,26,0.25);
}
.phone-screen { background: var(--white); border-radius: 4.6cqw; overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.mk-phone { left: 4cqw; top: 0; width: 42cqw; height: 100cqh; }
.post-head { display: flex; align-items: center; gap: 1.6cqw; padding: 4cqw 3cqw 2.4cqw; font-size: 2.3cqw; font-weight: 650; color: var(--cg-ink); }
.post-head svg { width: 6cqw; height: 6cqw; }
.post-pic { aspect-ratio: 1; width: 100%; height: auto; }
.post-copy { padding: 2.4cqw 3cqw; font-size: 2.2cqw; line-height: 1.4; color: var(--cg-ink); }
.post-copy b { font-weight: 650; }
.mk-search {
  right: 0; top: 6cqh; width: 52cqw; background: var(--white); border-radius: 3cqw; padding: 2.6cqw;
  color: var(--charcoal); display: grid; gap: 2.4cqw; box-shadow: 0 2cqw 5cqw rgba(20,23,26,0.18);
}
.search-bar { display: flex; align-items: center; gap: 1.6cqw; background: #F1EFEB; border-radius: 99px; padding: 1.8cqw 2.6cqw; font-size: 2.4cqw; }
.search-bar svg { width: 2.8cqw; height: 2.8cqw; }
.result { display: grid; grid-template-columns: auto 1fr; gap: 0.4cqw 2cqw; align-items: center; }
.result svg { width: 8cqw; height: 8cqw; grid-row: span 2; }
.result b { font-size: 2.8cqw; font-weight: 700; }
.result span { font-size: 2.1cqw; color: #4E5156; }
.result .open { color: #1C7A4A; font-weight: 650; }
.result-actions { display: flex; gap: 1.4cqw; }
.result-actions span { flex: 1; text-align: center; border-radius: 99px; padding: 1.4cqw 0; font-size: 2.1cqw; font-weight: 650; background: #F1EFEB; }
.result-actions span:first-child { background: var(--cg-teal); color: var(--cg-cream); }
.mk-mail {
  right: 6cqw; bottom: 0; width: 46cqw; background: var(--cg-cream); border-radius: 3cqw; padding: 3cqw;
  color: var(--cg-ink); display: grid; gap: 1cqw; box-shadow: 0 2cqw 5cqw rgba(20,23,26,0.18);
}
.mk-mail small { font-size: 2cqw; color: #5B574F; font-weight: 550; }
.mk-mail b { font-family: "Young Serif", Georgia, serif; font-weight: 400; font-size: 3.4cqw; line-height: 1.15; color: var(--cg-teal); }
.mk-mail p { font-size: 2.1cqw; line-height: 1.45; }

.web-browser {
  left: 0; top: 4cqh; width: 88cqw; aspect-ratio: 16 / 10.4; background: var(--cg-cream); border-radius: 2.2cqw; overflow: hidden;
  display: flex; flex-direction: column; color: var(--cg-ink);
}
.browser-bar { flex: none; height: 6cqw; background: #2A2C31; display: flex; align-items: center; justify-content: center; }
.browser-bar span { background: #3A3D43; color: #C9C6C0; border-radius: 99px; font-size: 1.9cqw; padding: 0.7cqw 4cqw; font-variant-numeric: tabular-nums; }
.site-nav { display: flex; align-items: center; gap: 1.6cqw; padding: 2.4cqw 3.2cqw; font-size: 1.9cqw; font-weight: 600; }
.site-nav svg { width: 4.6cqw; height: 4.6cqw; }
.site-nav .cg-word { font-size: 2.6cqw; color: var(--cg-teal); }
.site-nav nav { margin-left: auto; display: flex; gap: 2.6cqw; }
.site-hero { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 2.6cqw; padding: 0 3.2cqw 3.2cqw; min-height: 0; }
.site-hero-copy { display: grid; align-content: center; gap: 2cqw; }
.site-hero-copy b { font-family: "Young Serif", Georgia, serif; font-weight: 400; font-size: 6cqw; line-height: 1; color: var(--cg-teal); letter-spacing: -0.01em; }
.site-hero-copy p { font-size: 1.9cqw; line-height: 1.45; max-width: 26ch; }
.site-btn { justify-self: start; background: var(--cg-butter); color: var(--cg-ink); border-radius: 99px; padding: 1.4cqw 2.8cqw; font-size: 1.9cqw; font-weight: 700; }
.site-hero .cg-art { border-radius: 1.6cqw; min-height: 0; }
.web-phone { right: 0; bottom: 0; width: 27cqw; height: 58cqh; }
.web-phone .phone-screen { background: var(--cg-cream); color: var(--cg-ink); }
.web-phone .cg-art { flex: none; height: 42%; }
.web-phone .m-copy { padding: 2.6cqw; display: grid; gap: 1.6cqw; }
.web-phone .m-copy b { font-family: "Young Serif", Georgia, serif; font-weight: 400; font-size: 3.8cqw; line-height: 1.05; color: var(--cg-teal); }
.web-phone .site-btn { font-size: 1.8cqw; }
@media (max-width: 767px) {
  .kit-tile { width: 56cqw; } .kit-swatches { width: 40cqw; }
}

/* ---------- Try it ---------- */
.try { background: var(--ivory); padding-block: clamp(112px, 16vh, 200px); }
.try-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 56px; align-items: center; }
.try-copy { grid-column: 1 / span 5; min-width: 0; display: grid; gap: 28px; }
.try-copy .section-title { max-width: 7.5em; }
.section-title {
  font-size: var(--fs-head); font-weight: 800; font-stretch: var(--display-stretch);
  letter-spacing: -0.04em; line-height: 0.95;
}
.try-copy .section-title { font-size: clamp(2.25rem, 1.2rem + 2.9vw, 4.25rem); }
.try-copy p { max-width: 40ch; }
.field { display: grid; gap: 10px; }
.field label, .field legend { font-size: var(--fs-small); font-weight: 650; }
.name-input {
  width: 100%; min-height: 64px; padding: 0 20px; border-radius: 14px;
  border: 2px solid var(--charcoal); background: var(--white);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); font-weight: 600; letter-spacing: -0.01em;
  transition: border-color 200ms ease;
}
.name-input:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.trades { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.trades input, .pills input { position: absolute; opacity: 0; pointer-events: none; }
.trades label, .pills label {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px;
  border-radius: 999px; background: var(--stone); font-weight: 600; font-size: 0.975rem; cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out);
  box-shadow: inset 0 0 0 2px rgba(20,23,26,0.12);
}
.trades label svg { width: 18px; height: 18px; }
.trades label:active, .pills label:active { transform: scale(0.97); }
.trades input:checked + label, .pills input:checked + label { background: var(--charcoal); color: var(--ivory); box-shadow: none; }
.trades input:focus-visible + label, .pills input:focus-visible + label { outline: 3px solid var(--orange); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .trades label:hover, .pills label:hover { background: #DDD7CE; }
  .trades input:checked + label:hover, .pills input:checked + label:hover { background: var(--charcoal); }
}
.try-actions { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }

.preview-wrap { grid-column: 6 / span 7; min-width: 0; }
.preview {
  --p-bg: #F1D9D2; --p-ink: #2B1A1F; --p-accent: #9E3B52; --p-font: "Gloock", Georgia, serif; --p-weight: 400; --p-case: none; --p-track: -0.01em;
  position: relative; aspect-ratio: 1.18; width: 100%; max-width: 100%;
  background: #D9D3C9; border-radius: 28px; overflow: hidden;
  container-type: inline-size;
}
.pv { position: absolute; transition: background-color 450ms ease, color 450ms ease; }
.pv-name {
  font-family: var(--p-font); font-weight: var(--p-weight); text-transform: var(--p-case);
  letter-spacing: var(--p-track); line-height: 1.02; overflow-wrap: anywhere;
}
.pv-icon { display: grid; place-items: center; border-radius: 50%; background: var(--p-accent); color: var(--p-bg); transition: background-color 450ms ease, color 450ms ease; }
.pv-icon svg { width: 56%; height: 56%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pv-sign {
  left: 5cqw; top: 6cqw; width: 54cqw; min-height: 33cqw; padding: 4.4cqw;
  background: var(--p-bg); color: var(--p-ink); border-radius: 2.6cqw;
  display: grid; align-content: space-between; gap: 3cqw;
}
.pv-sign .pv-icon { width: 9cqw; height: 9cqw; }
.pv-sign .pv-name { font-size: calc(6.6cqw * var(--name-scale, 1)); }
.pv-sign .pv-tag { font-size: 2.3cqw; font-weight: 550; opacity: 0.85; }
.pv-card {
  left: 9cqw; bottom: 7cqw; width: 44cqw; aspect-ratio: 1.75; padding: 3.4cqw;
  background: var(--p-ink); color: var(--p-bg); border-radius: 1.8cqw; rotate: -5deg;
  display: grid; align-content: space-between;
}
.pv-card .pv-name { font-size: calc(4cqw * var(--name-scale, 1)); }
.pv-card .pv-meta { font-size: 1.8cqw; line-height: 1.5; opacity: 0.9; overflow-wrap: anywhere; }
.pv-phone {
  right: 6cqw; top: 7cqw; width: 30cqw; height: calc(100% - 14cqw);
  background: var(--charcoal); border-radius: 5cqw; padding: 1.2cqw;
}
.pv-screen { height: 100%; border-radius: 4cqw; overflow: hidden; background: var(--p-bg); color: var(--p-ink); display: flex; flex-direction: column; transition: background-color 450ms ease, color 450ms ease; }
.pv-screen-nav { display: flex; align-items: center; gap: 1.4cqw; padding: 3.4cqw 2.6cqw 2cqw; }
.pv-screen-nav .pv-icon { width: 4.6cqw; height: 4.6cqw; }
.pv-screen-nav .pv-name { font-size: 2.1cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.pv-burger { width: 3.6cqw; height: 1.6cqw; border-block: 0.45cqw solid currentColor; flex: none; }
.pv-screen-hero { padding: 2cqw 2.6cqw; display: grid; gap: 2cqw; }
.pv-screen-hero .pv-name { font-size: calc(4.6cqw * var(--name-scale, 1)); }
.pv-screen-hero .pv-tag { font-size: 1.9cqw; line-height: 1.4; }
.pv-btn { justify-self: start; background: var(--p-accent); color: var(--p-bg); border-radius: 99px; padding: 1.3cqw 2.4cqw; font-size: 1.8cqw; font-weight: 700; transition: background-color 450ms ease, color 450ms ease; }
.pv-art { margin: auto 2.6cqw 2.6cqw; flex: 1; max-height: 34cqw; border-radius: 2.4cqw; background: var(--p-accent); color: var(--p-bg); display: grid; place-items: center; transition: background-color 450ms ease, color 450ms ease; }
.pv-art svg { width: 44%; height: 44%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pv-social {
  right: 22cqw; bottom: 5cqw; display: flex; align-items: center; gap: 1.4cqw; padding: 1.2cqw 2.4cqw 1.2cqw 1.2cqw;
  background: var(--white); border-radius: 99px;
  font-size: 2cqw; font-weight: 650; color: var(--charcoal); max-width: 40cqw;
}
.pv-social .pv-icon { width: 5.4cqw; height: 5.4cqw; flex: none; }
.pv-social span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preview-note { margin-top: 14px; font-size: var(--fs-small); color: var(--ink-2); }
.swap { transition: filter 220ms ease, opacity 220ms ease; }
.swap.is-swapping { filter: blur(4px); opacity: 0.35; }

@media (max-width: 900px) {
  .try-copy, .preview-wrap { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .preview { aspect-ratio: 0.92; }
  .pv-sign { width: 58cqw; }
  .pv-phone { width: 33cqw; height: 72cqw; }
  .pv-card { width: 50cqw; bottom: 16cqw; }
  .pv-social { right: auto; left: 6cqw; bottom: 4cqw; }
}

/* ---------- Who we're for ---------- */
.for, .pricing { background: var(--ivory); padding-block: clamp(96px, 14vh, 168px); }
.for-head, .pricing-head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 20px;
  align-items: end; margin-bottom: clamp(40px, 6vh, 64px);
}
.for-head .section-title, .pricing-head .section-title { grid-column: 1 / span 6; font-size: clamp(2.25rem, 1.2rem + 2.9vw, 4.25rem); }
.for-lead, .pricing-lead { grid-column: 8 / span 5; max-width: 44ch; font-size: var(--fs-body); }
.for-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.for-item {
  min-height: clamp(220px, 30vh, 320px); padding: clamp(22px, 2.4vw, 32px); border-radius: var(--radius);
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
}
.for-item h3 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); font-weight: 800; font-stretch: 108%; letter-spacing: -0.035em; line-height: 1; }
.for-item p { max-width: 26ch; font-size: 1rem; line-height: 1.45; }
.for-item.is-orange { background: var(--orange); color: var(--charcoal); }
.for-item.is-charcoal { background: var(--charcoal); color: var(--ivory); }
.for-item.is-stone { background: var(--white); color: var(--charcoal); }
.for-item.is-soft { background: var(--soft); color: var(--ivory); }

/* ---------- Pricing ---------- */
.pricing-group { margin: 0 0 16px; font-size: 1.25rem; font-weight: 750; letter-spacing: -0.015em; }
.price-grid + .pricing-group { margin-top: 56px; }
.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); align-items: stretch; }
.price-card {
  display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 2.4vw, 32px); border-radius: var(--radius);
  background: var(--white); color: var(--charcoal);
}
.price-card.is-featured { background: var(--charcoal); color: var(--ivory); }
.price-flag { align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: var(--orange); color: var(--charcoal); font-size: 0.8125rem; font-weight: 700; }
.price-name { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.price-amount { display: flex; align-items: baseline; gap: 8px; }
.price-num { font-size: clamp(2.5rem, 1.8rem + 1.6vw, 3.25rem); font-weight: 800; font-stretch: 106%; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.price-unit { font-size: 0.9375rem; font-weight: 600; color: var(--ink-2); }
.price-reason { font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.price-who { font-size: 0.9375rem; line-height: 1.45; color: var(--ink-2); }
.is-featured .price-unit, .is-featured .price-who { color: var(--on-dark-2); }
.price-list {
  list-style: none; margin: 4px 0 8px; padding: 16px 0 0; display: grid; gap: 10px;
  border-top: 1px solid rgba(20, 23, 26, 0.12); font-size: 0.9375rem; line-height: 1.45;
}
.is-featured .price-list { border-top-color: rgba(231, 227, 221, 0.18); }
.price-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; }
.price-list li::before { content: ""; width: 14px; height: 8px; margin-top: 6px; border: 2px solid var(--orange); border-radius: 50%; transform: rotate(-20deg); }
.price-card .btn { width: 100%; white-space: normal; text-align: center; padding-block: 12px; }
.pricing-notes { max-width: 80ch; margin-top: 32px; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-2); }
@media (max-width: 1024px) { .for-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .price-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; } }
@media (max-width: 767px) {
  .for-head .section-title, .pricing-head .section-title, .for-lead, .pricing-lead { grid-column: 1 / -1; }
  .for-item { min-height: 180px; }
}
@media (max-width: 480px) { .for-list { grid-template-columns: minmax(0, 1fr); } .for-item { min-height: 0; } }

/* ---------- Process ---------- */
.process { background: var(--charcoal); color: var(--ivory); }
.verbs { list-style: none; padding: 0 0 40svh; margin: 0; }
.verb-panel { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--charcoal); }
.verb-scale { position: absolute; inset: 0; transform-origin: 50% 0; }
.verb-media { position: absolute; inset: 0; }
.verb-media svg { position: absolute; left: 50%; top: 45%; width: min(96vw, 1400px); height: auto; translate: -50% -50%; overflow: visible; }
.verb-media ellipse { fill: none; stroke: var(--ring, var(--orange)); stroke-width: 10; }
.verb-panel { --fg: var(--ivory); color: var(--fg); }
.verb-panel.is-soft { background: var(--soft); }
.verb-panel.is-orange { background: var(--orange); --fg: var(--charcoal); --ring: var(--charcoal); }
.verb-panel.is-stone { background: var(--stone); --fg: var(--charcoal); }
.verb-panel.is-charcoal { background: var(--charcoal); }
.verb-dim { position: absolute; inset: 0; background: var(--charcoal); opacity: 0; pointer-events: none; }
.verb {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%);
  font-size: clamp(4.5rem, 1rem + 15vw, 17rem); font-weight: 800; font-stretch: 112%;
  letter-spacing: -0.045em; line-height: 0.86; color: var(--fg); white-space: nowrap;
}
.verb .ch { display: inline-block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; vertical-align: top; }
.verb .ch > span { display: inline-block; }
.verb-text {
  position: absolute; left: var(--side-l); bottom: max(40px, env(safe-area-inset-bottom, 0px)); right: var(--side-r);
  max-width: 34ch; font-size: var(--fs-body); font-weight: 500; color: var(--fg);
}
.verb-text { z-index: 2; }
@media (max-width: 767px) {
  .verb { font-size: 21vw; font-stretch: 100%; }
}

/* ---------- About ---------- */
.about { background: var(--stone); padding-block: clamp(120px, 18vh, 220px); }
.about-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 48px; }
.about-facts { grid-column: 1 / span 3; display: grid; gap: 24px; align-content: start; padding-top: 10px; }
.about-facts dt { font-size: var(--fs-small); font-weight: 650; color: var(--ink-2); }
.about-facts dd { font-size: 1.0625rem; font-weight: 600; margin-top: 2px; }
.about-body { grid-column: 4 / span 9; min-width: 0; display: grid; gap: 1.1em; }
.about-lead, .about-more {
  font-size: clamp(1.375rem, 1rem + 1.1vw, 2rem); line-height: 1.22; letter-spacing: -0.02em; font-weight: 500;
}
.about-more { color: var(--ink-2); }
.about-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 1rem; }
.about-rating a { font-weight: 600; }
.rating-stars { color: var(--orange); font-size: 1.25rem; letter-spacing: 0.08em; line-height: 1; }
.about-social { list-style: none; padding: 0; margin: 0.4em 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.about-social a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 2px solid var(--charcoal); font-size: 0.975rem; font-weight: 600; text-decoration: none;
  transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out);
}
.about-social a:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .about-social a:hover { background: var(--charcoal); color: var(--stone); } }
.about-lead strong { font-weight: 750; }
.about-mark { float: left; width: 2.6em; height: 2.4em; margin: 0.12em 0.45em 0 0; shape-outside: ellipse(50% 50%); }
.about-mark svg { width: 100%; height: 100%; overflow: visible; }
.about-mark ellipse { fill: none; stroke: var(--orange); stroke-width: 9; }
@media (max-width: 767px) {
  .about-facts { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .about-facts dd { font-size: 0.9375rem; }
  .about-body { grid-column: 1 / -1; }
}

/* ---------- CTA ---------- */
.cta { background: var(--stone); }
.cta-field { background: var(--orange); color: var(--charcoal); min-height: 92svh; display: flex; }
.cta-inner { display: flex; flex-direction: column; justify-content: space-between; gap: 64px; padding-block: clamp(120px, 16vh, 180px) 48px; }
.cta-title {
  font-size: clamp(3.25rem, 0.8rem + 9.6vw, 11rem); font-weight: 800; font-stretch: var(--display-stretch);
  letter-spacing: -0.045em; line-height: 0.9;
}
.cta-title .line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.cta-title .line > span { display: inline-block; }
.cta-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 48px; }
.cta-foot p { max-width: 40ch; font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem); font-weight: 500; }
.cta-email { display: block; margin-top: 14px; font-size: 1rem; font-weight: 550; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-call { --btn-bg: transparent; --btn-fg: var(--charcoal); box-shadow: inset 0 0 0 2px var(--charcoal); }
@media (hover: hover) and (pointer: fine) { .btn-call:hover { --btn-bg: var(--charcoal); --btn-fg: var(--orange); } }
@media (max-width: 767px) { .cta-actions { width: 100%; } .cta-actions > * { flex: 1 1 100%; } }
@media (max-width: 767px) {
  .cta-field { min-height: 0; }
  .cta-inner { gap: 48px; padding-block: 112px 40px; }
  .cta-foot .magnet, .cta-foot .btn { width: 100%; }
}

/* ---------- Footer ---------- */
.footer { background: var(--charcoal); color: var(--ivory); padding-top: 56px; padding-bottom: max(32px, env(safe-area-inset-bottom, 0px)); overflow: hidden; }
.footer-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 28px; align-items: start; }
.footer-about { grid-column: 1 / span 4; display: grid; gap: 6px; font-size: 0.975rem; }
.footer-about p:first-child { font-weight: 650; }
.footer-logo { margin-bottom: 6px; }
.footer-logo img { display: block; height: 52px; width: auto; }
.footer-about p + p { color: var(--on-dark-2); }
.footer-links { grid-column: 6 / span 5; list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 28px; }
.footer-links a { display: inline-block; padding: 6px 0; font-weight: 600; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .footer-links a:hover { color: var(--orange); } }
.footer-top .to-top { grid-column: 11 / span 2; justify-self: end; color: var(--ivory); white-space: nowrap; }
.footer-about a { color: var(--ivory); }
.footer-legal {
  list-style: none; margin: 56px 0 16px; padding: 16px 0 0; display: flex; flex-wrap: wrap; gap: 0 28px;
  border-top: 1px solid rgba(231, 227, 221, 0.16);
}
.footer-legal a { display: inline-block; padding: 10px 0; font-size: 0.9375rem; font-weight: 600; }
.footer-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: var(--fs-small); color: var(--on-dark-2); }
@media (max-width: 767px) {
  .footer-about, .footer-links { grid-column: 1 / -1; }
  .footer-top .to-top { grid-column: 1 / -1; justify-self: start; }
  .footer-meta { flex-direction: column; }
  }

/* ---------- Booking drawer ---------- */
.book {
  position: fixed; margin: 0; padding: 0; border: 0;
  inset: 0 0 0 auto; width: min(540px, 100%); height: 100%; max-height: 100%; max-width: 100%;
  background: var(--ivory); color: var(--charcoal);
  transform: translateX(100%);
  transition: transform 320ms var(--ease-drawer);
  overscroll-behavior: contain;
}
.book.is-open { transform: none; transition-duration: 560ms; }
.book::backdrop { background: rgba(20, 23, 26, 0.55); opacity: 0; transition: opacity 320ms ease; }
.book.is-open::backdrop { opacity: 1; }
.book-panel {
  height: 100%; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(env(safe-area-inset-top, 0px) + 28px) max(28px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 32px) 28px;
  display: grid; align-content: start; gap: 24px;
}
.book-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.book-head h2 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); font-weight: 800; font-stretch: 106%; letter-spacing: -0.03em; line-height: 1.02; }
.book-close {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--stone);
  display: grid; place-items: center; transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.book-close:active { transform: scale(0.94); }
.book-close svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .book-close:hover { background: #DDD7CE; } }
.book-intro { color: var(--ink-2); max-width: 40ch; font-size: 1.0625rem; margin-bottom: 20px; }
.book-done:focus { outline: none; }
.book form { display: grid; gap: 22px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pills label { min-height: 44px; padding: 0 16px; font-size: 0.9375rem; }
.days label { flex-direction: column; gap: 0; min-height: 60px; padding: 0 14px; border-radius: 14px; line-height: 1.1; min-width: 64px; justify-content: center; }
.days label b { font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.days label small { font-size: 0.8125rem; font-weight: 600; }
.times label { font-variant-numeric: tabular-nums; }
.text-field { display: grid; gap: 8px; }
.text-field label { font-size: var(--fs-small); font-weight: 650; }
.text-field input, .text-field textarea, .text-field select {
  min-height: 54px; padding: 0 16px; border-radius: 12px; border: 2px solid rgba(20,23,26,0.25); background: var(--white);
  font-size: 1.0625rem; transition: border-color 200ms ease;
}
.text-field input:focus-visible, .text-field textarea:focus-visible, .text-field select:focus-visible { outline: none; border-color: var(--charcoal); box-shadow: 0 0 0 3px var(--orange); }
.text-field input[aria-invalid="true"], .text-field textarea[aria-invalid="true"] { border-color: #B3261E; }
.text-field textarea { min-height: 96px; padding-block: 12px; resize: vertical; line-height: 1.45; font: inherit; font-size: 1.0625rem; }
.opt { font-weight: 450; color: var(--ink-2); }
.field-hint { margin-top: 10px; font-size: var(--fs-small); color: var(--ink-2); }
.consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; font-size: 0.9375rem; line-height: 1.45; }
.consent input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--charcoal); }
.consent input[aria-invalid="true"] { outline: 2px solid #B3261E; outline-offset: 2px; }
.consent a, .book-note a { font-weight: 600; }
.form-error { color: #9C2219; font-weight: 600; font-size: 0.9375rem; }
.book .btn { width: 100%; }
.book-note { font-size: var(--fs-small); color: var(--ink-2); }
.book-done { display: grid; gap: 20px; align-content: start; }
.book-done svg { width: 120px; height: 72px; overflow: visible; }
.book-done ellipse { fill: none; stroke: var(--orange); stroke-width: 7; }
.book-done path { fill: none; stroke: var(--charcoal); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.book-done h3 { font-size: 2rem; font-weight: 800; font-stretch: 106%; letter-spacing: -0.03em; line-height: 1.05; }
.book-done p { font-size: 1.125rem; max-width: 34ch; }
@media (max-width: 640px) {
  .book {
    inset: auto 0 0 0; width: 100%; height: auto; max-height: 92svh;
    border-radius: 22px 22px 0 0; transform: translateY(100%);
  }
  .book-panel { max-height: 92svh; padding-top: 22px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .book, .book.is-open { transition: opacity 200ms ease !important; }
}