/* Hallmark · shape: Workbench · genre: modern-minimal · theme: Furrow (deal 1/3, seed eccs-company-commercial-kitchen-7213·58fa6087·2026-10-29·r0; signal recoloured to the ECCS logo green by request) · job: get a demo · redesign: full (the founder's brief of 29 Oct: highlight the app, PAN India, a demo booked like Marble's, more depth and motion)
 * hero: Stage, the drawn kitchen plan with this morning's checks pinned where they were done and the app's home screen standing on it (the founder preferred it to the 3D phones) · nav: masthead · footer: letter close · imagery: screenshots of the real app on sample data (attendance, salary month, labels, checklist, licences, Buddy, score, compliance, inspection, services, the diner's QR page and poster), photographs none · signature: the kitchen plan with each check pinned where it happened
 * axes: light/grotesk-sans/cool · posture: committed (the ink QR band and the green team band) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: E, the first build undersold the app; the hero, the tour and the tiles now lead with it and the crews follow */
/* Hallmark · answered F8 · two scroll-linked behaviours by the founder's request for more 3D and motion (29 Oct): the pinned tour and the once-only QR scan, each on a finished static layout */
/* Hallmark · answered F20 · Cleaning spans both rows beside Pest control over Inspections, so no column stands alone */
/* Hallmark · dismissed 58 · the founder asked for a fuller page; services and answers sit in lists and closed rows, and no 900px window passes about 80 words */
@import url("./tokens.css");
@import url("./base.css");

:root { --nav-h: 80px; --radius-phone: 26px; }

/* ── Controls: flat like the app's own buttons, the primary in ECCS green ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 48px; padding: 0 var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill);
  background: var(--color-paper-2); color: var(--color-ink);
  font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), transform 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--color-paper-3); } }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; opacity: 0.8; }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
@media (hover: hover) and (pointer: fine) { .btn--primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); } }
.btn--line { background: transparent; border-color: var(--color-ink); min-height: 44px; }
@media (hover: hover) and (pointer: fine) { .btn--line:hover { background: var(--color-paper-2); } }
.masthead .btn { transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform 160ms var(--ease-out); }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

.lead { color: var(--color-muted); }
.caption { font-size: var(--text-sm); color: var(--color-muted); }
.num { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; }

/* ── Masthead: the wordmark centred over an ink rule ── */
.masthead { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-ink); }
.masthead__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--gap-columns); min-height: var(--nav-h); }
.masthead__links { display: flex; gap: var(--space-lg); }
.masthead__links a, .masthead__quiet { display: inline-flex; align-items: center; min-height: 44px; font: 500 var(--text-sm)/1 var(--font-body); color: var(--color-ink-2); text-decoration: none; white-space: nowrap; }
.masthead__links a:hover, .masthead__quiet:hover { color: var(--color-ink); text-decoration: underline; }
.masthead__links a[aria-current="true"] { color: var(--color-ink); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--color-accent); }
.masthead__links a:focus-visible, .masthead__quiet:focus-visible, .masthead__mark:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.masthead__mark { display: block; }
.masthead__mark img { height: 44px; width: auto; }
.masthead__end { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-lg); }

/* ── Hero: the head beside the kitchen plan, with the real app standing on it ── */
.hero { min-height: calc(100dvh - var(--nav-h)); display: grid; align-items: center; padding-block: var(--space-2xl) var(--space-3xl); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.hero__copy { display: grid; gap: var(--space-lg); }
.hero__copy h1 { max-width: 12ch; font-size: clamp(2.75rem, 4.2vw + 0.75rem, 4.5rem); line-height: 1; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xs); }
.hero__visual { position: relative; padding-bottom: var(--space-2xl); }
.screen--hero { position: absolute; right: 0; bottom: 0; width: 40%; aspect-ratio: 780 / 740; box-shadow: var(--shadow-lift); }
.hero__caption { position: absolute; left: 0; bottom: var(--space-md); }

/* The pins land once, in time order; reduced motion shows them down already (base.css). */
@keyframes land { from { opacity: 0; transform: translateY(6px); } }
@keyframes mark-in { from { opacity: 0; } }
.plan--hero .tag { animation: land var(--dur-long) var(--ease-out) both; animation-delay: calc(200ms + var(--i, 0) * 80ms); }
.plan--hero .mark { animation: mark-in var(--dur-long) var(--ease-out) both; animation-delay: 160ms; }

.tags { list-style: none; margin: 0; padding: 0; pointer-events: none; }
.tag { position: absolute; left: var(--x); top: var(--y); translate: 0 -50%; display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-2xs) var(--space-xs); border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink); white-space: nowrap; font: 500 var(--text-xs)/1.3 var(--font-body); }
.tag .num { font-weight: 500; }
.tag--left { translate: -100% -50%; }
.tag--visit { background: var(--color-ink); color: var(--color-paper-2); }

/* A phone's screen, standing (the QR band's diner page) */
.phone { position: absolute; margin: 0; width: 31%; aspect-ratio: 780 / 1420; border-radius: var(--radius-phone); overflow: hidden; background: var(--color-sheet); outline: 1px solid color-mix(in oklab, var(--color-ink) 14%, transparent); outline-offset: -1px; box-shadow: var(--shadow-lift); }
.phone > img { object-position: 50% 0; }

/* The plan, drawn as before: walls in ink, equipment on the grid paper */
.plan { position: relative; border-radius: var(--radius-entry); background:
  linear-gradient(var(--color-grid) 1px, transparent 1px) 0 0 / 8px 8px,
  linear-gradient(90deg, var(--color-grid) 1px, transparent 1px) 0 0 / 8px 8px,
  var(--color-paper-2);
  box-shadow: 0 0 0 1px var(--color-ink); }
.plan__svg { width: 100%; height: auto; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.floor { fill: transparent; }
.wall { fill: none; stroke: var(--color-ink); stroke-width: 6; stroke-linecap: square; }
.wall-in { fill: none; stroke: var(--color-ink); stroke-width: 3; }
.equip { fill: var(--color-paper-3); stroke: var(--color-ink-2); stroke-width: 1.5; }
.burner { fill: none; stroke: var(--color-muted); stroke-width: 1.5; }
.hood { fill: none; stroke: var(--color-contour); stroke-width: 1.5; stroke-dasharray: 6 4; }
.duct { stroke: var(--color-contour); stroke-width: 8; stroke-linecap: round; opacity: 0.45; }
.fan { fill: var(--color-paper-3); stroke: var(--color-ink-2); stroke-width: 1.5; }
.fan-blade { stroke: var(--color-ink-2); stroke-width: 1.5; fill: none; }
.shelf { fill: var(--color-paper-3); stroke: var(--color-muted); stroke-width: 1; }
.basin { fill: none; stroke: var(--color-water); stroke-width: 1.5; }
.trap { fill: url(#hatch); stroke: var(--color-ink-2); stroke-width: 1.5; }
.hatch { stroke: var(--color-muted); stroke-width: 1.2; }
.room { font-family: var(--font-body); font-weight: 500; font-size: 14px; fill: var(--color-muted); }
.room--route { fill: var(--color-contour-ink); }
.room--under { visibility: var(--under-card, visible); }
.plan--hero { --under-card: hidden; }
.drain { fill: var(--color-paper-2); stroke: var(--color-water); stroke-width: 1.5; }
.drain-grate { stroke: var(--color-water); stroke-width: 1.2; fill: none; }
.walk { fill: none; stroke: var(--color-contour); stroke-width: 1.5; stroke-dasharray: 2 5; stroke-linecap: round; }
.mark--disc { fill: var(--color-accent); stroke: var(--color-paper-2); stroke-width: 3; }
.mark--diamond { fill: var(--color-ink); stroke: var(--color-paper-2); stroke-width: 2.5; }

.screen { margin: 0; border-radius: var(--radius-entry); outline: 1px solid color-mix(in oklab, var(--color-ink) 10%, transparent); outline-offset: -1px; background: var(--color-sheet); }
.screen > img { object-position: 50% var(--crop, 0%); }

/* ── Sections share the twelve columns ── */
.head-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.head-split h2 { grid-column: 1 / 7; }
.head-split .lead { grid-column: 8 / 13; }
.ruled { border-top: var(--rule-hair) solid var(--color-ink); }
.ruled > * { border-bottom: var(--rule-hair) solid var(--color-rule); }

/* Before and after: one real figure, then the same kitchen on paper and in the app */
.proof { padding-block: var(--section-gap-s); background: var(--color-paper-3); }
.proof__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.stat { grid-column: 1 / 6; margin: 0; display: grid; gap: var(--space-sm); }
.stat__num { font: var(--display-weight) clamp(4rem, 8vw, 8rem)/0.95 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-accent); font-variant-numeric: tabular-nums; }
.stat figcaption { color: var(--color-ink-2); font-size: var(--text-lead); max-width: 30ch; }
.proof__intro { grid-column: 7 / 13; display: grid; gap: var(--space-md); }
.compare { width: 100%; border-collapse: collapse; font-size: var(--text-lead); }
.compare thead th { padding: 0 0 var(--space-sm); font: 500 var(--text-sm)/1.2 var(--font-body); color: var(--color-muted); text-align: start; white-space: nowrap; border-bottom: var(--rule-hair) solid var(--color-ink); }
.compare thead th:last-child { color: var(--color-accent); }
.compare tbody th, .compare td { padding: var(--space-md) var(--space-lg) var(--space-md) 0; text-align: start; vertical-align: top; border-bottom: var(--rule-hair) solid var(--color-rule); }
.compare tbody th { width: 22%; font-weight: 500; }
.compare td { width: 39%; color: var(--color-muted); }
.compare td:last-child { color: var(--color-ink); padding-left: calc(1.25em + var(--space-xs)); position: relative; }
.compare td:last-child::before { content: ""; position: absolute; left: 0; top: calc(var(--space-md) + 0.3em); width: 1.05em; height: 1.05em; border-radius: 50%; background: var(--color-accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3C/svg%3E") center / contain no-repeat; }
.compare td:last-child::after { content: ""; position: absolute; left: 0; top: calc(var(--space-md) + 0.3em); width: 1.05em; height: 1.05em; background: var(--color-accent-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.6' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.6' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
@keyframes stat-in { from { opacity: 0; translate: 0 12px; } }
.stat.is-seen { animation: stat-in 560ms var(--ease-out) both; }

/* Everything the app covers, in four even groups */
.scope { padding-block: var(--section-gap-s) var(--space-2xl); }
.scope h2 { margin-bottom: var(--space-2xl); }
/* One set of rows for all four groups (subgrid), so each item lines up with its neighbours even when one wraps. */
.scope__groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: 0; }
.group { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
.group h3 { align-self: end; padding-bottom: var(--space-md); font-size: var(--text-xl); }
.group ul { grid-row: 2 / span 4; display: grid; grid-template-rows: subgrid; row-gap: 0; list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.group li { display: flex; align-items: center; padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-lead); }
@keyframes group-in { from { opacity: 0; translate: 0 10px; } }
.scope__groups.is-seen .group { animation: group-in 420ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }

/* The tour: one phone held on screen while six chapters scroll past, its screen changing with each */
.tour { padding-block: var(--space-2xl) var(--section-gap-s); }
.tour h2 { margin-bottom: var(--space-2xl); }
.tour__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); }
.tour__pin { grid-column: 1 / 6; position: sticky; top: calc(var(--nav-h) + var(--space-xl)); align-self: start; display: grid; place-items: center; min-height: calc(100dvh - var(--nav-h) - var(--space-3xl)); }
.tour__device { position: relative; width: min(100%, 330px); }
.tour__stage { position: relative; width: 100%; aspect-ratio: 780 / 1560; border-radius: var(--radius-phone); overflow: hidden; background: var(--color-sheet); outline: 1px solid color-mix(in oklab, var(--color-ink) 14%, transparent); outline-offset: -1px; box-shadow: var(--shadow-lift); transform: perspective(1400px) rotateY(-10deg) rotateX(3deg); transition: transform 640ms var(--ease-in-out); }
.tour__device[data-chapter="2"] .tour__stage, .tour__device[data-chapter="4"] .tour__stage, .tour__device[data-chapter="6"] .tour__stage { transform: perspective(1400px) rotateY(10deg) rotateX(3deg); }
.tour__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: 0; filter: blur(6px); transition: opacity 320ms var(--ease-out), filter 320ms var(--ease-out); }
.tour__shot[data-chapter="1"] { opacity: 1; filter: none; }
.js .tour__stage .tour__shot[data-chapter="1"] { opacity: 0; filter: blur(6px); }
.js .tour__device[data-chapter="1"] .tour__shot[data-chapter="1"], .js .tour__device[data-chapter="2"] .tour__shot[data-chapter="2"],
.js .tour__device[data-chapter="3"] .tour__shot[data-chapter="3"], .js .tour__device[data-chapter="4"] .tour__shot[data-chapter="4"],
.js .tour__device[data-chapter="5"] .tour__shot[data-chapter="5"], .js .tour__device[data-chapter="6"] .tour__shot[data-chapter="6"] { opacity: 1; filter: none; }
/* The label the app prints comes out beside the phone while the labels chapter is read. */
.tour__label { position: absolute; left: -30%; bottom: 12%; width: 78%; height: auto; border-radius: 6px; background: var(--color-sheet); outline: 1px solid color-mix(in oklab, var(--color-ink) 14%, transparent); box-shadow: var(--shadow-lift); transform: perspective(900px) rotateY(16deg) rotateZ(-5deg); transition: opacity 320ms var(--ease-out), transform 520ms var(--ease-out); pointer-events: none; }
.js .tour__label { opacity: 0; transform: perspective(900px) rotateY(16deg) rotateZ(-5deg) translateY(24px); }
.js .tour__device[data-chapter="3"] .tour__label { opacity: 1; transform: perspective(900px) rotateY(16deg) rotateZ(-5deg); }
.tour__chapters { grid-column: 7 / 13; list-style: none; margin: 0; padding: 0; }
.chapter { min-height: 64dvh; display: flex; flex-direction: column; justify-content: center; gap: var(--space-md); padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.chapter:first-child { border-top-color: var(--color-ink); }
.chapter h3 { font-size: var(--text-2xl); line-height: 1.1; max-width: 18ch; }
.chapter p { color: var(--color-muted); font-size: var(--text-lead); max-width: 40ch; }
.js .chapter { opacity: 0.38; transition: opacity var(--dur-long) var(--ease-out); }
.js .chapter.is-current { opacity: 1; }
.chapter__shot { display: none; }

/* Ready for an inspection: real screens, cropped in tinted wells */
.ready { padding-block: var(--space-3xl) var(--section-gap-s); }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); }
.tile { grid-column: span 4; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: var(--space-lg); height: 400px; padding: var(--space-xl) var(--space-xl) 0; border-radius: var(--radius-card); background: var(--color-paper-3); overflow: hidden; }
.tile--lead { grid-column: span 7; grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: 460px; }
.tile--side { grid-column: span 5; height: 460px; }
.tile__text { display: grid; align-content: start; gap: var(--space-xl); padding-bottom: var(--space-xl); }
.tile .screen { width: 300px; max-width: 100%; justify-self: center; border-radius: var(--radius-entry) var(--radius-entry) 0 0; -webkit-mask-image: linear-gradient(to bottom, var(--color-ink) 80%, transparent); mask-image: linear-gradient(to bottom, var(--color-ink) 80%, transparent); transition: transform 320ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .tile:hover .screen { transform: translateY(-6px); } }
.screen--crop, .screen--tile { height: 100%; }
.tile--lead .screen--tile { margin-top: var(--space-xs); }
.tile--type { height: auto; min-height: 400px; grid-template-rows: none; align-content: space-between; gap: var(--space-lg); padding-bottom: var(--space-xl); background: var(--color-accent); color: var(--color-accent-ink); }
.langs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs) var(--space-md); font-size: var(--text-md); }
.langs li { padding-block: var(--space-2xs); text-align: start; border-top: var(--rule-hair) solid color-mix(in oklab, var(--color-accent-ink) 30%, transparent); }
.tile__big { font: var(--display-weight) var(--text-2xl)/1.1 var(--font-display); letter-spacing: var(--tracking-display); }
.tile--type p:not(.tile__big) { color: var(--color-accent-ink); max-width: 30ch; }
.weights { margin: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.weights div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.weights dt { color: var(--color-ink-2); }
.weights dd { margin: 0; font-size: var(--text-xl); font-weight: 500; }

/* The QR page: the poster standing on the counter, the diner's phone in front, on the page's ink band */
.qr { padding-block: var(--section-gap-s); background: var(--color-ink); color: var(--color-on-ink); }
.qr h2 { color: var(--color-on-ink); }
.qr .lead { color: var(--color-on-ink-muted); }
.qr__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: center; }
.qr__copy { grid-column: 1 / 6; display: grid; gap: var(--space-lg); }
.qr__steps { list-style: none; margin: var(--space-md) 0 0; padding: 0; counter-reset: step; display: grid; gap: var(--space-md); }
.qr__steps li { counter-increment: step; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-sm); align-items: baseline; color: var(--color-on-ink-muted); font-size: var(--text-lead); }
.qr__steps li::before { content: counter(step); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1.5px solid var(--color-on-ink-muted); border-radius: 50%; color: var(--color-on-ink); font: 500 var(--text-md)/1 var(--font-body); translate: 0 0.2em; }
.qr__steps strong { color: var(--color-on-ink); font-weight: 500; }
.qr__visual { grid-column: 7 / 13; position: relative; aspect-ratio: 1 / 0.86; perspective: 1700px; }
.qr__poster { position: absolute; left: 2%; top: 4%; width: 60%; aspect-ratio: 545 / 653; margin: 0; border-radius: var(--radius-card); background: var(--color-sheet); transform: rotateY(24deg) rotateX(3deg) rotateZ(-1.5deg); box-shadow: var(--shadow-on-ink); }
.qr__poster > img { object-fit: contain; }
.qr__phone { left: auto; right: 4%; bottom: 0; width: 36%; aspect-ratio: 780 / 1500; transform: rotateY(-14deg) translateZ(90px); box-shadow: var(--shadow-on-ink); }
.qr__beam { position: absolute; z-index: 2; left: 29%; top: 23%; width: 42%; height: 3px; border-radius: 2px; background: var(--color-accent); opacity: 0; pointer-events: none; }
@keyframes scan { 0% { opacity: 0; translate: 0 0; } 12% { opacity: 0.9; } 88% { opacity: 0.9; } 100% { opacity: 0; translate: 0 calc(var(--beam-run, 300px)); } }
@keyframes phone-light { from { opacity: 0.35; } }
.qr__visual.is-seen .qr__beam { animation: scan 1300ms var(--ease-in-out) 200ms both; }
.qr__visual.is-seen .qr__phone { animation: phone-light 600ms var(--ease-out) 1300ms both; }

/* Services: what the crews do, each one bookable from here */
.services { padding-block: var(--section-gap-s) var(--space-3xl); }
.services__cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.svc { grid-column: span 6; display: grid; gap: var(--space-md); align-content: start; }
.svc:first-child { grid-row: span 2; }
.svc h3 { font-size: var(--text-xl); }
.svc__list { list-style: none; margin: 0; padding: 0; }
.svc__list li { display: grid; gap: var(--space-2xs); padding-block: var(--space-md); }
.svc__name { font-weight: 500; font-size: var(--text-lead); }
.svc__line { color: var(--color-muted); }

/* One team: the statement on the page's green field */
.oneteam { padding-block: var(--section-gap-s); background: var(--color-accent); color: var(--color-accent-ink); }
.oneteam__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); row-gap: var(--space-2xl); }
.statement { grid-column: 1 / 11; max-width: 20ch; font-size: var(--text-section); line-height: 1.05; color: var(--color-accent-ink); }
.oneteam__list { grid-column: 1 / -1; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.oneteam__list div { display: grid; gap: var(--space-xs); align-content: start; padding-top: var(--space-md); border-top: var(--rule-hair) solid color-mix(in oklab, var(--color-accent-ink) 45%, transparent); }
.oneteam__list dt { font: var(--display-weight) var(--text-title)/1.2 var(--font-display); letter-spacing: var(--tracking-display); }
.oneteam__list dd { margin: 0; color: var(--color-accent-ink); font-size: var(--text-lead); max-width: 34ch; }
@keyframes head-in { from { opacity: 0; translate: 0 12px; } }
.statement.is-seen { animation: head-in 560ms var(--ease-out) both; }

/* Questions: rows that open */
.questions { padding-block: var(--section-gap-s) var(--section-gap); }
.questions__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); }
.questions__grid h2 { grid-column: 1 / 5; align-self: start; font-size: var(--text-2xl); }
.questions__grid .ruled { grid-column: 6 / 13; }
details summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); min-height: 72px; font: 500 var(--text-lead)/1.3 var(--font-body); cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary .plus { flex-shrink: 0; fill: none; stroke: var(--color-muted); stroke-width: 1.5; stroke-linecap: round; transition: transform var(--dur-short) var(--ease-out); }
details[open] summary .plus { transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) { details summary:hover { color: var(--color-accent); } details summary:hover .plus { stroke: var(--color-accent); } }
@keyframes answer-in { from { opacity: 0; transform: translateY(-4px); } }
details[open] p { animation: answer-in 200ms var(--ease-out); }
details summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
details p { padding-bottom: var(--space-lg); color: var(--color-muted); max-width: 60ch; }
details:not([open]) > p { display: none; }

/* Booking: a demo at a time picked here, or a service; both reach the console as a lead */
.book { padding-block: var(--section-gap) var(--section-gap-l); background: var(--color-paper-3); }
.book__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }
.book__head { grid-column: 1 / 5; display: grid; gap: var(--space-lg); position: sticky; top: calc(var(--nav-h) + var(--space-xl)); }
.facts { margin: var(--space-md) 0 0; border-top: var(--rule-hair) solid var(--color-ink); }
.facts div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.facts dt { color: var(--color-muted); }
.facts dd { margin: 0; }
.book__forms { grid-column: 6 / 13; }
.book__panel { display: grid; }
.seg { display: inline-flex; gap: var(--space-2xs); padding: var(--space-2xs); margin-bottom: var(--space-lg); border-radius: calc(var(--radius-pill) + 4px); background: var(--color-paper); max-width: 100%; }
.seg button { min-height: 44px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-2); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .seg button:hover { background: var(--color-paper-2); color: var(--color-ink); } }
.seg button:active { transform: scale(0.97); }
.seg button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.seg button[aria-selected="true"] { color: var(--color-ink); background: var(--color-paper-2); outline: 1.5px solid var(--color-ink); outline-offset: -1.5px; }
@keyframes panel-in { from { opacity: 0; transform: translateY(4px); } }
.switch__panel.is-entering { animation: panel-in 200ms var(--ease-out); }
html:not(.js) .seg { display: none; }
html:not(.js) .switch__panel + .switch__panel { margin-top: var(--space-xl); }

.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); padding: var(--space-xl); border-radius: var(--radius-entry); background: var(--color-paper-2); box-shadow: 0 0 0 1px var(--color-ink); }
.pick { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; min-width: 0; }
.pick legend { margin-bottom: var(--space-sm); padding: 0; font: 500 var(--text-md)/1.3 var(--font-body); }
.pick__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-xs); }
.pick__row .choice { display: flex; }
.pick__row .choice span { width: 100%; padding-inline: var(--space-xs); }
.pick__empty { grid-column: 1 / -1; }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span { display: grid; place-items: center; min-height: 44px; padding: var(--space-xs) var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-sheet); color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.25; text-align: center; transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out), transform 160ms var(--ease-out); }
.choice small { display: block; color: var(--color-muted); font-size: var(--text-xs); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .choice:hover span { border-color: var(--color-ink-2); } }
.choice input:active + span { transform: scale(0.97); }
.choice input:checked + span { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-ink); outline: 1.5px solid var(--color-accent); outline-offset: -1.5px; }
.choice input:checked + span small { color: var(--color-ink-2); }
.choice input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.pick__row--services .choice span { min-height: 40px; }
.pick__empty { color: var(--color-muted); font-size: var(--text-sm); }
.field { position: relative; }
.field--wide { grid-column: 1 / -1; }
.field label { position: absolute; left: var(--space-md); top: var(--space-xs); font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); pointer-events: none; }
.field input, .field textarea { width: 100%; height: 52px; padding: var(--space-lg) var(--space-md) 0; line-height: 1.2; border: 1px solid var(--color-muted); border-radius: var(--radius-pill); background: var(--color-sheet); color: var(--color-ink); font-size: var(--text-md); outline: 2px solid transparent; outline-offset: -3px; appearance: none; }
.field textarea { height: auto; min-height: 96px; padding-top: var(--space-xl); resize: vertical; line-height: 1.45; }
@media (hover: hover) and (pointer: fine) { .field input:hover, .field textarea:hover { border-color: var(--color-ink-2); } }
.field__error { min-height: 1lh; margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-error); }
.pick .field__error { margin-top: var(--space-xs); }
.field input:focus-visible, .field textarea:focus-visible { outline-color: var(--color-focus); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--color-error); }
.field input:disabled, .field textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__end { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-xs); }
.form__help { min-height: 1lh; font-size: var(--text-sm); color: var(--color-muted); }
.form__help[data-tone="error"] { color: var(--color-error); }
.done { display: grid; gap: var(--space-md); justify-items: start; padding: var(--space-xl); border-radius: var(--radius-entry); background: var(--color-paper-2); box-shadow: 0 0 0 1px var(--color-accent); }
.done:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.done h3 { color: var(--color-accent); }
.done p { font-size: var(--text-lead); max-width: 44ch; }
@keyframes done-in { from { opacity: 0; transform: scale(0.98); } }
.done:not([hidden]) { animation: done-in 260ms var(--ease-out); }

/* Footer: a letter's close, then the small print */
.footer { padding-block: var(--space-3xl) var(--space-2xl); border-top: var(--rule-hair) solid var(--color-ink); }
.footer__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); row-gap: var(--space-xl); }
.footer__close { grid-column: 1 / 7; display: grid; gap: var(--space-lg); justify-items: start; }
.footer__logo { height: 72px; width: auto; }
.footer__sign { font-size: var(--text-lead); color: var(--color-ink-2); max-width: 40ch; }
.footer__links { grid-column: 8 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm) var(--gap-columns); align-content: start; }
.footer__links a { color: var(--color-ink-2); text-decoration: none; padding-block: var(--space-2xs); white-space: nowrap; }
.footer__links a:hover { color: var(--color-ink); text-decoration: underline; }
.footer__links a:focus-visible, .footer__small a:focus-visible, .footer__sign a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.footer__small { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--color-muted); }

/* ── Between tablet and wide desktop: the plan keeps its width, the head a step smaller so it keeps two lines ── */
@media (max-width: 75rem) and (min-width: 60.01rem) {
  .hero__grid { gap: var(--space-2xl); }
  .hero__copy h1 { max-width: 14ch; font-size: clamp(2.75rem, 3.2vw + 1rem, 4rem); }
}

/* ── Narrow screens ── */
@media (max-width: 60rem) {
  .masthead__links, .masthead__quiet { display: none; }
  .masthead__bar { grid-template-columns: auto minmax(0, 1fr); }
  .hero { min-height: 0; padding-block: var(--space-xl) var(--space-2xl); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .head-split h2, .head-split .lead { grid-column: 1 / -1; }
  .head-split { row-gap: var(--space-md); }
  .stat, .proof__intro { grid-column: 1 / -1; }
  .proof__head { row-gap: var(--space-xl); }
  .scope__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .group { padding-bottom: var(--space-xl); }
  .tour__pin { display: none; }
  .tour__chapters { grid-column: 1 / -1; }
  .js .chapter { opacity: 1; }
  .chapter { min-height: 0; padding-block: var(--space-xl); }
  .chapter__shot { display: block; width: min(100%, 320px); aspect-ratio: 780 / 1180; margin-top: var(--space-sm); overflow: hidden; }
  .chapter__shot > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
  .tile, .tile--lead, .tile--side { grid-column: 1 / -1; }
  .qr__copy, .qr__visual { grid-column: 1 / -1; }
  .svc { grid-column: 1 / -1; }
  .svc:first-child { grid-row: auto; }
  .statement, .oneteam__list { grid-column: 1 / -1; }
  .statement { max-width: none; }
  .book__head, .book__forms, .footer__close, .footer__links { grid-column: 1 / -1; }
  .book__head { position: static; }
}
@media (max-width: 40rem) {
  :root { --nav-h: 64px; --radius-phone: 18px; }
  .oneteam__list { grid-template-columns: minmax(0, 1fr); }
  .questions__grid h2, .questions__grid .ruled { grid-column: 1 / -1; }
  .masthead__mark img { height: 34px; }
  .masthead__end .btn { padding: 0 var(--space-md); }
  .room { display: none; }
  .plan--hero .tag:not(.tag--visit) { display: none; }
  .plan--hero .tag--visit { translate: -50% -50%; }
  .hero__caption { position: static; margin-top: var(--space-sm); }
  .hero__visual { padding-bottom: 0; }
  .screen--hero { position: relative; right: auto; bottom: auto; width: 74%; margin: calc(-1 * var(--space-3xl)) 0 0 auto; }
  .scope__groups { grid-template-columns: minmax(0, 1fr); }
  .pick__row[data-times] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pick__row { gap: var(--space-2xs); }
  .pick__row .choice span { padding-inline: var(--space-3xs); }
  .compare, .compare tbody, .compare tr, .compare tbody th, .compare td { display: block; width: auto; }
  .compare thead { display: none; }
  .compare tr { padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .compare tbody th, .compare td { padding: 0; border: 0; }
  .compare tbody th { margin-bottom: var(--space-xs); }
  .compare td::before { content: attr(data-label) ": "; color: var(--color-muted); font-size: var(--text-sm); }
  .compare td + td { margin-top: var(--space-2xs); }
  .compare td:last-child { padding-left: 0; }
  .compare td:last-child::after { display: none; }
  .compare td:last-child::before { content: attr(data-label) ": "; position: static; width: auto; height: auto; border-radius: 0; background: none; -webkit-mask: none; mask: none; color: var(--color-accent); font-size: var(--text-sm); font-weight: 500; }
  .tile--lead .screen--tile { display: none; }
  .tile--lead { grid-template-columns: minmax(0, 1fr); height: auto; }
  .tile:not(.tile--lead):not(.tile--type) { height: 340px; }
  .tile--type { height: auto; padding-top: var(--space-2xl); }
  .form { grid-template-columns: minmax(0, 1fr); padding: var(--space-lg); }
  .seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seg button { padding: 0 var(--space-sm); }
  .footer__links { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .plan--hero .tag, .plan--hero .mark, .stat.is-seen, .scope__groups.is-seen .group, .statement.is-seen, .qr__visual.is-seen .qr__beam, .qr__visual.is-seen .qr__phone, .done:not([hidden]) { animation: none; }
  .btn, .masthead .btn, .seg button, .choice span, details summary .plus, .tour__stage, .tour__shot, .tour__label, .tile .screen { transition: none; }
  .switch__panel.is-entering, details[open] p { animation: none; }
  .tour__shot { filter: none; }
}