/* Front Counter AI, the home page (v8 made the home page, 2026-10-08; first screen redrawn on
   2026-10-08, _BRIEF6.md).
   Loads after /shared/core.css and /shared/chrome.css. chrome.css owns the tokens, the base, the
   gold leaf, the buttons, the header, the footer and Sam's button skin; this file adds the
   screens: the first screen (our own storefront, the five services as signs hanging in its
   window, a headline and two buttons beside it), watch it work (the visitor's storefront with
   the gate and the live window), what we do (five drawn shops, every offering a link), the
   agents we put to work (a back office you tap), found by AI assistants, build your price, the
   counter, the sample, the house rules.
   Numbers set by home.js:
     --g  a shop opening, 0 (gate down) to 1 (open): our shop on the first screen, the
          visitor's shop on the second
     --b  the build in the visitor's window, 0 (empty) to 1 (done)
     --o  each shop on the street, 0 (awning up, glass cool) to 1 (awning down, glass warm) */

:root {
  --brick-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='16'%3E%3Crect width='44' height='16' fill='%23b5563a'/%3E%3Crect x='2' y='1' width='18' height='5.5' fill='%23c4643f' opacity='.55'/%3E%3Crect x='25' y='9' width='17' height='5.5' fill='%23a64c32' opacity='.6'/%3E%3Crect y='6.8' width='44' height='1.3' fill='%2393432e'/%3E%3Crect y='14.8' width='44' height='1.3' fill='%2393432e'/%3E%3Crect x='21.5' width='1.3' height='7' fill='%2393432e'/%3E%3Crect y='8' width='1.3' height='7' fill='%2393432e'/%3E%3C/svg%3E");
  --wash: linear-gradient(90deg, rgba(255, 216, 160, .34), rgba(255, 216, 160, .05) 40%, rgba(58, 22, 48, .16));
  --walk-bg:
    linear-gradient(180deg, rgba(93, 53, 80, .34) 0, rgba(93, 53, 80, 0) 8px) 0 0 / 100% 8px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 119px, rgba(120, 78, 50, .26) 119px 120px) 0 0 / 100% calc(var(--walk) * .78) no-repeat,
    linear-gradient(180deg, #e8c99f 0, #dfbb8d 78%, #f6e2c0 78% 86%, #b98f68 86% 100%) 0 0 / 100% var(--walk) no-repeat;
  --wood: linear-gradient(180deg, #d79a62 0, #b97c4a 30%, #9a6339 100%);
  --board: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='64' viewBox='0 0 120 64'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23306e55'/%3E%3Cstop offset='.5' stop-color='%23215240'/%3E%3Cstop offset='1' stop-color='%23163a2b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M10 0H110A10 10 0 0 0 120 10V54A10 10 0 0 0 110 64H10A10 10 0 0 0 0 54V10A10 10 0 0 0 10 0Z' fill='url(%23a)'/%3E%3Cpath d='M13.78 4.5H106.22A14.5 14.5 0 0 0 115.5 13.78V50.22A14.5 14.5 0 0 0 106.22 59.5H13.78A14.5 14.5 0 0 0 4.5 50.22V13.78A14.5 14.5 0 0 0 13.78 4.5Z' fill='none' stroke='%23e2b04c' stroke-width='1.8'/%3E%3Cpath d='M15.81 7.5H104.19A17.5 17.5 0 0 0 112.5 15.81V48.19A17.5 17.5 0 0 0 104.19 56.5H15.81A17.5 17.5 0 0 0 7.5 48.19V15.81A17.5 17.5 0 0 0 15.81 7.5Z' fill='none' stroke='%23e2b04c' stroke-opacity='.45' stroke-width='1'/%3E%3C/svg%3E");
  --chain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Cellipse cx='4' cy='4' rx='2.3' ry='3.3' fill='none' stroke='%232a241d' stroke-width='1.5'/%3E%3Crect x='3.2' y='7' width='1.6' height='5.6' rx='.8' fill='%234a3d2f'/%3E%3C/svg%3E");
}

/* what chrome.css does not set */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
button { font: inherit; color: inherit; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.nw { white-space: nowrap; }
.gold { -webkit-text-fill-color: transparent; }
.go, .o-go, .svc-go { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* the opening, shared by both drawn storefronts. --g is registered so our shop can open with a
   plain CSS animation: the five signs never wait on a script. */
@property --g { syntax: "<number>"; inherits: true; initial-value: 0; }
.hero, .watch {
  --g: 0; --b: 0;
  --gate: min(1, max(0, var(--g) / .8));             /* the gate rolls up */
  --flip: min(1, max(0, (var(--g) - .8) * 6));       /* the sign turns to Open */
  --awn: min(1, max(0, (var(--g) - .3) * 1.8));      /* the awning comes out */
  --warm: min(1, max(0, (var(--g) - .15) * 1.6));    /* the sun reaches the glass */
  --shine: min(1, var(--b) * 1.4);                   /* the window glows once the site is up */
}
.hero { --b: 1; animation: shop-open 1.5s cubic-bezier(.3, .75, .3, 1) .55s both; }
@keyframes shop-open { 0% { --g: 0; } 10% { --g: .03; } 100% { --g: 1; } }
/* home.js pins the end state once the animation is over (some browsers hold animations back) */
.hero.is-open { --g: 1; animation: none; }
/* the visitor's shop waits for the script that opens it; without that script it stands open */
html:not(.motion) .watch { --g: 1; --b: 1; }
.still :is(.hero, .watch) { --g: 1; --b: 1; animation: none; }
@media (prefers-reduced-motion: reduce) { .hero, .watch { --g: 1; --b: 1; animation: none; } }

/* =====================================================================================
   THE FIRST SCREEN: our own storefront, the five services hanging in its window
   ===================================================================================== */
.hero { position: relative; isolation: isolate; overflow: clip; min-height: min(100vh, 1000px); min-height: min(100svh, 1000px); padding: calc(var(--head-h) + 26px) var(--gut) var(--walk); display: flex; flex-direction: column; background: var(--sky); }
.hero::after { content: ""; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: var(--walk); background: var(--walk-bg); }

/* the sky: sun, clouds, the row of roofs behind */
.sky { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.sun { position: absolute; left: 41%; top: 75%; width: 0; height: 0; }
.sun::before { content: ""; position: absolute; left: -540px; top: -540px; width: 1080px; height: 1080px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 246, 222, .95) 0, rgba(255, 234, 186, .6) 8%, rgba(255, 216, 156, .28) 24%, rgba(255, 204, 140, 0) 58%); }
.sun i { position: absolute; left: -58px; top: -58px; width: 116px; height: 116px; border-radius: 50%; background: radial-gradient(circle at 45% 42%, #fffbf2 0, #fff1cc 55%, #ffe1a2 100%); box-shadow: 0 0 60px rgba(255, 236, 190, .9); }
.clouds { position: absolute; left: 46%; top: 86px; width: 54%; height: 240px; opacity: .75; }
.backrow { position: absolute; left: 0; bottom: var(--walk); width: 100%; height: 190px; object-fit: cover; object-position: 64% bottom; }

.hero-in {
  /* the storefront is sized so the whole shop, cornice to sidewalk, fits the first screen */
  --scene-w: min(740px, 52vw, calc((100svh - var(--head-h) - var(--walk) - 70px) / .9));
  position: relative; z-index: 1; flex: 1; width: 100%; max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--scene-w); column-gap: max(36px, min(4.5vw, 72px)); align-items: end;
}

/* the left column: one headline, one line, two buttons */
.h-copy { align-self: center; }
.h1 { max-width: 10.5em; font: 800 clamp(32px, 3.05vw, 45px)/1.07 var(--disp); letter-spacing: -.04em; color: var(--ink); text-wrap: balance; }
.h-sub { margin-top: 22px; max-width: 27em; font-size: max(17px, min(1.3vw, 19px)); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.h-ctas { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }

/* our shop: its own sign, its own awning, the signs in the window */
.h-shop { position: relative; }
.h-shop::before { content: ""; position: absolute; z-index: -1; left: -14%; right: -14%; top: 20%; bottom: 0; pointer-events: none; background: radial-gradient(50% 50% at 50% 56%, rgba(255, 238, 190, .7), rgba(255, 222, 160, .22) 52%, transparent 74%); opacity: var(--warm); }
.sf-ours .sf-signrow { padding-top: 1.6cqw; }
.sf-ours .sf-sign { height: 8.2cqw; }
.sf-ours .sf-awning { --aw-h: 4.4cqw; --val-h: 3.4cqw; --sc: 1.6cqw; }
.sf-ours .valance { font-size: max(9.5px, 1.62cqw); letter-spacing: .2em; max-width: 94%; color: var(--glow); }
.sf-ours .sf-front { grid-template-columns: minmax(0, 1fr) 13cqw; }
.sf-ours .door { grid-template-rows: 9% 40% 1fr; }
.sf-ours .open-sign { right: calc(1.2cqw + 6.5cqw); }
.sf-ours .sill-bell { right: 7.5cqw; }
.sf-ours .sf-bulk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2cqw; place-items: stretch; padding: 1.1cqw 3.2cqw; height: 6.2cqw; }
.sf-ours .sf-bulk i { border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(27, 26, 23, .35), inset 1px 1px 0 2px rgba(21, 54, 40, .9), inset -1px -1px 0 2px rgba(255, 217, 168, .16); }

/* the window: warm glass, a brass rod across the top, five signs on chains */
.shopwin { position: relative; isolation: isolate; height: 100%; padding: 5.6cqw 0 3.8cqw; overflow: hidden; border-radius: 3px; background: linear-gradient(180deg, #fae0c4, #e7b8a0 45%, #b68e8c); box-shadow: inset 0 0 0 1.5px rgba(27, 26, 23, .7); }
.shopwin::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(70% 56% at 50% 40%, #fffaf0 0, rgba(255, 246, 220, 0) 72%), linear-gradient(180deg, #fff3d6 0, #ffe3a3 52%, #f3bb62 100%); opacity: var(--warm); }
.shopwin::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(112deg, transparent 8%, rgba(255, 250, 238, .5) 15%, transparent 24%, transparent 72%, rgba(255, 250, 238, .34) 77%, transparent 83%); }
.sw-rod { position: absolute; z-index: 2; left: 5cqw; right: 5cqw; top: 2.1cqw; height: max(4px, .8cqw); border-radius: 99px; background: linear-gradient(180deg, #fff3cf 0, #e7b955 45%, #8a5f22 100%); box-shadow: 0 .3cqw .4cqw rgba(27, 26, 23, .35); }
.sw-rod::before, .sw-rod::after { content: ""; position: absolute; bottom: 30%; width: max(4px, .8cqw); height: 3cqw; border-radius: 2px 2px 3px 3px; background: linear-gradient(90deg, #2a241d, #4e453c 50%, #2a241d); }
.sw-rod::before { left: 1.2cqw; }
.sw-rod::after { right: 1.2cqw; }

.signs { --gap: max(10px, 2.2cqw); --sw: 84%; --drop: 3.1cqw; --b: max(11px, 1.9cqw); position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--gap); filter: drop-shadow(0 max(5px, .8cqw) max(4px, .6cqw) rgba(40, 14, 4, .36)); }
/* one pair of chains from the brass rod down through the stack, behind the boards */
.signs::before { content: ""; position: absolute; z-index: -1; top: calc(var(--drop) * -1); bottom: 30%; left: calc((100% - var(--sw)) / 2 + var(--sw) * .12 - 4px); right: calc((100% - var(--sw)) / 2 + var(--sw) * .12 - 4px); pointer-events: none; background: var(--chain) 0 0 / 8px 12px repeat-y, var(--chain) 100% 0 / 8px 12px repeat-y; }
.sign {
  position: relative; display: flex; align-items: center; gap: max(10px, 1.6cqw);
  width: var(--sw); min-height: max(46px, 8.6cqw); padding: 0 max(4px, .8cqw) 0 0;
  border: var(--b) solid transparent; border-image: var(--board) 22 fill / var(--b) / 0 stretch;
  color: var(--glow); text-decoration: none;
  transition: translate .25s var(--ease), filter .2s ease;
}
/* the brass rings the board hangs from */
.sign::before, .sign::after { content: ""; position: absolute; top: calc(var(--b) * -1 - max(4px, .6cqw)); width: max(9px, 1.35cqw); height: max(9px, 1.35cqw); border-radius: 50%; pointer-events: none; background: radial-gradient(circle closest-side, #2a1d10 0 34%, #fff1c4 40%, #e2b04c 58%, #8a5f22 86%, rgba(138, 95, 34, 0) 100%); }
.sign::before { left: calc(12% - var(--b) * .76 - max(4.5px, .675cqw)); }
.sign::after { right: calc(12% - var(--b) * .76 - max(4.5px, .675cqw)); }
.sign-ic { flex: none; display: grid; place-items: center; width: max(30px, 5.2cqw); height: max(30px, 5.2cqw); border-radius: 50%; color: var(--green-dk); background: radial-gradient(circle at 36% 30%, #fffaf0 0, #f3e3c3 58%, #e2c690 100%); box-shadow: inset 0 0 0 max(1.5px, .25cqw) rgba(184, 134, 46, .9), 0 1px 2px rgba(0, 0, 0, .4); }
.sign-ic svg { width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.sign-t { flex: 1; min-width: 0; font: 700 max(14px, 2.7cqw)/1.15 var(--disp); letter-spacing: -.022em; text-wrap: balance;
  background: linear-gradient(180deg, #fff7dc 0, #f7da86 46%, #e3ae48 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .5)); }
.sign-go { flex: none; width: max(13px, 2cqw); height: auto; fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
/* point at a sign: it lifts on its chain, a touch brighter, and the arrow steps forward */
.sign:hover, .sign:focus-visible { translate: 0 -3px; filter: brightness(1.12); }
.sign:hover .sign-go, .sign:focus-visible .sign-go { transform: translateX(4px); }
.sign:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
/* a narrow shop (small laptops, tablets on their side): slimmer door, wider signs, so the
   longest name stays on one line */
@media (min-width: 641px) {
  @container (max-width: 610px) {
    .sf-ours .sf-front { grid-template-columns: minmax(0, 1fr) 11cqw; }
    .sf-ours .open-sign { right: calc(1.2cqw + 5.5cqw); width: 10cqw; }
    .signs { --sw: 90%; }
  }
}
/* as the gate clears them the boards give a small settle on the chains, one after another */
.hero .sign { animation: settle 1.1s cubic-bezier(.3, .6, .3, 1) calc(1.25s + var(--i) * 90ms) backwards; }
.still .hero .sign { animation: none; }
@media (prefers-reduced-motion: reduce) { .hero .sign { animation: none; } }
@keyframes settle { 0% { translate: 0 0; } 22% { translate: 0 -5px; } 48% { translate: 0 2px; } 72% { translate: 0 -1px; } 100% { translate: 0 0; } }

/* =====================================================================================
   WATCH IT WORK: the visitor's storefront, the input beside it
   ===================================================================================== */
.watch { position: relative; isolation: isolate; overflow: clip; padding: max(72px, min(7vw, 110px)) var(--gut) 0; background: linear-gradient(180deg, var(--cream) 0, #fbe3c6 24%, #f7cd9f 64%, #f0b075 100%); }
.watch::after { content: ""; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: var(--walk); background: var(--walk-bg); }
.w-sky { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.w-sky .backrow { opacity: .85; object-position: 20% bottom; -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 38%, #000 52%); mask-image: linear-gradient(90deg, transparent 0, transparent 38%, #000 52%); }
.watch-in {
  --scene-w: min(720px, 48.5vw, calc(100svh * 1.42 - 470px));
  position: relative; z-index: 1; width: 100%; max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--scene-w); column-gap: max(36px, min(4.5vw, 72px)); align-items: end;
}
.w-copy { align-self: center; padding-bottom: var(--walk); }
.w-h { font-size: max(30px, min(3.3vw, 48px)); }
.w-h span { display: block; }
.h-form { margin-top: 34px; max-width: 480px; display: grid; gap: 8px; }
.h-form label { font-weight: 800; font-size: 15px; }
.h-form input { width: 100%; height: 60px; padding: 0 20px; border-radius: 14px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font: 600 19px var(--body); box-shadow: 0 14px 34px -18px rgba(110, 48, 20, .55); transition: box-shadow .2s ease; }
.h-form input::placeholder { color: #9b8a76; }
.h-form input:focus { outline: none; box-shadow: 0 0 0 4px rgba(181, 86, 58, .3), 0 14px 34px -18px rgba(110, 48, 20, .55); }
.h-hint { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }

/* ---------- the storefront ---------- */
.h-scene { align-self: end; position: relative; margin: 0; }
.h-scene::before { content: ""; position: absolute; z-index: -1; left: -12%; right: -12%; top: 18%; bottom: 4%; pointer-events: none; background: radial-gradient(50% 50% at 50% 55%, rgba(255, 238, 190, .75), rgba(255, 222, 160, .25) 50%, transparent 74%); opacity: var(--shine); }
.sf {
  container-type: inline-size; position: relative; padding: 0 3cqw;
  background: var(--wash), var(--brick-img);
  box-shadow: inset 7px 0 0 rgba(255, 217, 168, .4), inset -7px 0 0 rgba(27, 26, 23, .16), 0 30px 60px -40px rgba(70, 25, 10, .6);
}
.sf-cornice {
  height: 4.4cqw; margin: 0 calc(-3cqw - 8px);
  background:
    linear-gradient(rgba(255, 217, 168, .55) 0 .35cqw, transparent .35cqw),
    linear-gradient(var(--green-dk) 0 1.6cqw, var(--green) 1.6cqw 3.6cqw, transparent 3.6cqw),
    repeating-linear-gradient(90deg, var(--green-dk) 0 .9cqw, transparent .9cqw 1.8cqw) 0 3.6cqw / 100% .8cqw no-repeat;
}

/* the sign board: the visitor's name in gold leaf */
.sf-signrow { position: relative; padding: 2cqw 1.8cqw 0; }
.sf-sign { container-type: inline-size; height: 9.4cqw; display: grid; place-items: center; padding: 0 4%; border-radius: 4px; background: var(--ink); box-shadow: inset 0 0 0 7px var(--ink), inset 0 0 0 8.5px rgba(217, 164, 65, .75), 0 1.2cqw 1.6cqw -.8cqw rgba(60, 20, 10, .7); }
.sf-name { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 min(6.6cqw, calc(138cqw / var(--len, 18)))/1.15 var(--disp); letter-spacing: -.01em; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .6)); }
.sf-tag { position: absolute; right: .4cqw; top: .9cqw; rotate: 5deg; padding: .5cqw 1cqw .45cqw; border-radius: 3px; background: var(--linen); color: var(--brick-dk); font: 800 max(9px, 1.2cqw)/1 var(--body); letter-spacing: .16em; text-transform: uppercase; box-shadow: 0 .4cqw .8cqw -.2cqw rgba(27, 26, 23, .5); }
.sf-rail { height: 1cqw; margin: 2cqw -1.6cqw 0; background: var(--green); box-shadow: 0 .35cqw 0 rgba(27, 26, 23, .22); }

/* awnings (the hero's and every shop's) */
.awning { position: relative; z-index: 4; transform-origin: 50% 0; scale: 1 calc(.08 + .92 * var(--aw, 1)); }
.aw-slope { display: block; height: var(--aw-h, 34px); clip-path: polygon(1.6% 0, 98.4% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(27, 26, 23, .24), rgba(27, 26, 23, 0) 50%, rgba(255, 243, 214, .14)), linear-gradient(90deg, rgba(255, 244, 214, .4), rgba(255, 244, 214, 0) 40%), repeating-linear-gradient(90deg, var(--s1) 0 var(--sw, 14px), var(--s2) var(--sw, 14px) calc(var(--sw, 14px) * 2)); }
.aw-val { position: relative; display: grid; place-items: center; height: var(--val-h, 14px); background: var(--s1); box-shadow: inset 0 2px 0 rgba(27, 26, 23, .18); }
.aw-val::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: var(--sc, 12px); background: radial-gradient(circle at 50% 0, var(--s1) calc(var(--sc, 12px) - .5px), transparent var(--sc, 12px)) 0 0 / calc(var(--sc, 12px) * 2) var(--sc, 12px) repeat-x; }
.aw-green { --s1: var(--green); --s2: var(--linen); }
.aw-brick { --s1: var(--brick); --s2: var(--linen); }
.aw-thin { --sw: 8px; }
.valance { font: 800 max(8px, 1.3cqw)/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--linen); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 92%; }
.sf-awning { --aw: var(--awn); --sw: 1.8cqw; --aw-h: 5.2cqw; --val-h: 2.6cqw; --sc: 1.5cqw; margin: 0 -1.8cqw; }

/* the shop front: the big window, the door, the gate that covers both */
.sf-front { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 12.5cqw; gap: 1.3cqw; margin-top: 2.2cqw; padding: 1.2cqw; background: var(--green); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(27, 26, 23, .35); }
.sf-front::after { content: ""; position: absolute; z-index: 6; inset: 0 0 auto; height: 7cqw; pointer-events: none; background: linear-gradient(rgba(74, 31, 51, .42), rgba(74, 31, 51, 0)); opacity: var(--awn); }
.win { padding: .8cqw; background: var(--green-dk); border-radius: 2px; }
.win-glass { position: relative; overflow: hidden; border-radius: 3px; background: #2a2420; container-type: inline-size; box-shadow: 0 0 0 1.5px rgba(27, 26, 23, .7); }

/* the browser chrome inside the window: says "this is a website", and that it is playing */
.win-chrome { position: relative; z-index: 1; display: flex; align-items: center; gap: 2cqw; height: max(26px, 5.2cqw); padding: 0 2cqw; background: var(--ink); }
.chrome-dots { display: inline-flex; gap: 1cqw; flex: none; }
.chrome-dots i { width: max(6px, 1.4cqw); height: max(6px, 1.4cqw); border-radius: 50%; background: rgba(243, 227, 195, .4); }
.chrome-dots i:first-child { background: var(--brick); }
.chrome-url { display: inline-flex; align-items: center; gap: 1.2cqw; min-width: 0; max-width: 46%; height: max(18px, 3.4cqw); padding: 0 1.8cqw; border-radius: 99px; background: rgba(255, 250, 241, .12); font: 600 max(9.5px, 1.75cqw)/1 var(--body); color: var(--linen); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chrome-url svg { width: 1.6cqw; min-width: 8px; height: auto; flex: none; fill: none; stroke: var(--linen); stroke-width: 1.5; }
.chrome-live { margin-left: auto; display: inline-flex; align-items: center; gap: 1.2cqw; font: 800 max(9px, 1.6cqw)/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--glow); white-space: nowrap; }
.chrome-live i { width: max(6px, 1.2cqw); height: max(6px, 1.2cqw); border-radius: 50%; background: var(--brick); }
.motion .chrome-live i, .motion .cap-dot { animation: live 1.8s ease-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(181, 86, 58, .6); } 70% { box-shadow: 0 0 0 7px rgba(181, 86, 58, 0); } 100% { box-shadow: 0 0 0 0 rgba(181, 86, 58, 0); } }

/* the viewport the sample site plays in */
.win-view { position: relative; aspect-ratio: 16 / 9.3; overflow: hidden; }
.win-paper { position: absolute; inset: 0; background: var(--paper); -webkit-mask-image: linear-gradient(#000 0, #000 calc(var(--b) * 130% - 30%), transparent calc(var(--b) * 130%)); mask-image: linear-gradient(#000 0, #000 calc(var(--b) * 130% - 30%), transparent calc(var(--b) * 130%)); }
.win-edge { position: absolute; left: -10%; right: -10%; height: 34%; top: calc(var(--b) * 130% - 40%); pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 214, 140, .7), rgba(255, 214, 140, .18) 55%, transparent 75%); opacity: calc(var(--b) * (1 - var(--b)) * 4); }
.win-screen { position: absolute; inset: 0; }
.win-screen .mock { background: transparent; height: 100%; font-size: max(7px, min(1.72cqi, 14px)); }
.win-glare { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(112deg, transparent 22%, rgba(255, 246, 230, .16) 29%, transparent 36%, transparent 66%, rgba(255, 246, 230, .1) 70%, transparent 75%); box-shadow: inset 0 0 60px rgba(255, 214, 140, calc(var(--shine) * .3)); }

/* the film's progress line along the bottom of the glass */
.win-scrub { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(27, 26, 23, .12); opacity: var(--shine); }
.win-scrub i { position: absolute; inset: 0; background: var(--brick); transform: scaleX(0); transform-origin: 0 50%; }
.still .win-scrub i { transform: scaleX(1); }
@keyframes scrub { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* the build: each part of the site lands in order, with a warm flash as it arrives */
.win-screen .mock-bar { --k: min(1, max(0, var(--b) * 9)); }
.win-screen .mock-kick { --k: min(1, max(0, (var(--b) - .12) * 9)); }
.win-screen .mock-head { --k: min(1, max(0, (var(--b) - .2) * 9)); }
.win-screen .mock-sub { --k: min(1, max(0, (var(--b) - .3) * 9)); }
.win-screen .mock-btn { --k: min(1, max(0, (var(--b) - .38) * 9)); }
.win-screen .mock-art { --k: min(1, max(0, (var(--b) - .3) * 5)); }
.win-screen .mock-badge { --k: min(1, max(0, (var(--b) - .55) * 9)); }
.win-screen .mock-rev { --k: min(1, max(0, (var(--b) - .66) * 9)); }
.win-screen .mock-svcs li:nth-child(1) { --k: min(1, max(0, (var(--b) - .62) * 9)); }
.win-screen .mock-svcs li:nth-child(2) { --k: min(1, max(0, (var(--b) - .68) * 9)); }
.win-screen .mock-svcs li:nth-child(3) { --k: min(1, max(0, (var(--b) - .74) * 9)); }
.win-screen .mock-svcs li:nth-child(4) { --k: min(1, max(0, (var(--b) - .8) * 9)); }
.win-screen .mock-foot { --k: min(1, max(0, (var(--b) - .86) * 9)); }
.win-screen :is(.mock-bar, .mock-kick, .mock-head, .mock-sub, .mock-btn, .mock-badge, .mock-rev, .mock-svcs li, .mock-foot) {
  opacity: var(--k);
  translate: 0 calc((1 - var(--k)) * 10px);
  filter: drop-shadow(0 0 calc(var(--k) * (1 - var(--k)) * 40px) rgba(255, 200, 110, .95));
}
.win-screen .mock-art { opacity: var(--k); scale: calc(.92 + var(--k) * .08); }

/* the sample site's skin: paper, ink and deep green */
.mock { --m-ink: #1b1a17; --m-bg: #fffaf1; --m-bg-2: #f4e5cc; --m-accent: #1f4d3a; --m-accent-ink: #ffe3a3; }
.mock .mock-head { text-wrap: balance; }
/* the review card rides on the trade picture, like a badge on a product shot */
.win-screen .mock .mock-art .mock-rev { position: absolute; top: 1em; right: 1em; max-width: calc(100% - 2em); display: grid; gap: .3em; padding: .75em 1em; border: 0; border-radius: .8em; background: var(--m-bg); color: var(--m-ink); font-size: .95em; line-height: 1.25; text-align: left; box-shadow: 0 .6em 1.6em rgba(0, 0, 0, .14); transform: none; }
.win-screen .mock .mock-art .mock-stars { font-size: 1.35em; }
.win-screen .mock-art svg { max-width: 9em; }
.win-screen .mock-foot { display: none; }
.win-screen .demo::before { content: ""; position: absolute; inset: 0; background: rgba(27, 26, 23, .28); opacity: 0; transition: opacity .4s ease; }
.win-screen .demo:has(.demo-sheet.is-up)::before { opacity: 1; }
@container (min-width: 430px) {
  .win-screen .mock-hero { grid-template-columns: 1.15fr 1fr; padding: 2.4em 2.2em 2em; }
  .win-screen .mock-art { min-height: 13em; }
  .win-screen .mock-svcs { grid-template-columns: repeat(4, 1fr); padding: 0 2.2em 2em; }
}
@container (min-width: 520px) {
  .win-screen .demo-sheet, .win-screen .demo-done { left: 22%; right: 22%; }
  .win-screen .demo-toast { right: auto; width: 38%; }
}

/* the door, with the hanging sign in its glass */
.door { position: relative; display: grid; grid-template-rows: 9% 44% 1fr; gap: .9cqw; padding: .9cqw; background: var(--green-dk); border-radius: 2px; }
.door i { display: block; border-radius: 1px; }
.door-transom, .door-glass { background: linear-gradient(180deg, #fae0c4, #e7b8a0 45%, #b68e8c); position: relative; overflow: hidden; }
.door-transom::after, .door-glass::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #fff6dc, #ffe3a3 55%, #f3bb62); opacity: var(--warm); }
.door-panel { box-shadow: inset 0 0 0 1.5px rgba(27, 26, 23, .35); }
.door-knob { position: absolute; right: 1.6cqw; top: 54%; width: .7cqw; height: 2.6cqw; min-width: 3px; border-radius: 4px; background: var(--gold); }
.open-sign { position: absolute; z-index: 4; top: 5.6cqw; right: calc(1.2cqw + 6.25cqw); width: 11.4cqw; translate: 50% 0; display: grid; justify-items: center; perspective: 460px; pointer-events: none; }
.os-string { width: 100%; height: auto; overflow: visible; }
.os-string path { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.os-string circle { fill: var(--gold); }
.os-card { display: grid; width: 96%; height: 3.8cqw; margin-top: -1px; transform-style: preserve-3d; transform: rotateY(calc(var(--flip) * 180deg)); }
.os-card b { grid-area: 1 / 1; display: grid; place-items: center; border-radius: 3px; backface-visibility: hidden; -webkit-backface-visibility: hidden; font: 800 max(8px, 1.5cqw)/1 var(--body); letter-spacing: .16em; text-transform: uppercase; padding-left: .16em; }
.os-closed { background: var(--ink); color: var(--linen); box-shadow: inset 0 0 0 1.5px rgba(243, 227, 195, .35), 0 6px 10px -4px rgba(0, 0, 0, .6); }
.os-open { transform: rotateY(180deg); background: var(--linen); color: var(--brick-dk); box-shadow: inset 0 0 0 1.5px rgba(143, 63, 42, .5), 0 6px 10px -4px rgba(0, 0, 0, .4), 0 0 22px rgba(255, 227, 163, .8); }

/* the roll-up gate: sand-colored steel ribs catching the sun */
.gate { position: absolute; inset: 0; z-index: 5; translate: 0 calc(var(--gate) * -102%);
  background:
    linear-gradient(transparent 40%, rgba(255, 214, 150, .22)),
    linear-gradient(90deg, rgba(27, 26, 23, .3), transparent 10%, transparent 90%, rgba(27, 26, 23, .3)),
    repeating-linear-gradient(180deg, #f6e8cc 0 1px, #dcc59c 1px 7px, #b49668 7px 11px, #6e5a40 11px 12px); }
.gate-bar { position: absolute; left: 0; right: 0; bottom: 0; height: max(16px, 3cqw); display: flex; justify-content: space-between; padding: 0 22%; background: linear-gradient(var(--green-hi), var(--green-dk)); box-shadow: 0 -1px 0 rgba(27, 26, 23, .6); }
.gate-bar i { width: 5cqw; height: .9cqw; min-height: 5px; margin-top: .9cqw; border-radius: 4px; background: var(--gold); }

/* the sill, the bell, the bulkhead with the brass plate */
.sf-sill { position: relative; z-index: 7; height: 1.5cqw; margin: 0 -1.4cqw; background: linear-gradient(#f6e2c0, #ead2aa); box-shadow: 0 .35cqw 0 rgba(27, 26, 23, .22); }
.sill-bell { position: absolute; bottom: 70%; right: 20cqw; width: 6.4cqw; height: auto; }
.sf-bulk { display: grid; place-items: center; height: 6.6cqw; background: var(--green); box-shadow: inset 0 0 0 .6cqw var(--green), inset 0 0 0 .8cqw rgba(27, 26, 23, .3); border-bottom: 1.4cqw solid var(--brick-lo); }
.plate { container-type: inline-size; display: grid; justify-items: center; gap: .2cqw; width: 32cqw; padding: .55cqw 1.4cqw .5cqw; border-radius: 3px; background: linear-gradient(#f6dc8a, #d9a441 55%, #b8862e); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 2px 3px rgba(27, 26, 23, .5); }
.plate-name { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 min(7.6cqw, calc(128cqw / var(--len, 18)))/1.15 var(--disp); letter-spacing: -.01em; color: var(--ink); }
.plate-town { font: 800 max(7px, 4.2cqw)/1 var(--body); letter-spacing: .26em; text-transform: uppercase; color: rgba(27, 26, 23, .7); }
.plate-town:empty { display: none; }

/* the caption, on the sidewalk */
.sf-cap { display: flex; align-items: center; justify-content: center; gap: 12px; height: var(--walk); padding: 6px 8px 0; font-size: 15px; line-height: 1.3; color: var(--ink-2); text-align: center; }
.sf-cap b { color: var(--ink); font-weight: 800; }
.cap-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--brick); }

/* =====================================================================================
   the shared voice below the hero
   ===================================================================================== */
.rise { transition: opacity .9s var(--ease), transform .9s var(--ease); }
.motion .rise:not(.is-in) { opacity: 0; transform: translateY(24px); }
.sec-h { font: 800 var(--t-xl)/1.06 var(--disp); letter-spacing: -.035em; text-wrap: balance; }
.say { margin-top: 20px; font-size: var(--t-m); line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.soon { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 6px 12px 5px; border-radius: 999px; border: 1.5px solid var(--green); color: var(--green); font: 800 12.5px/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; }
.soon::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brick); }

/* =====================================================================================
   WHAT WE DO: five drawn shops side by side, every offering a link on the glass
   ===================================================================================== */
.what { --cap-h: 128px; position: relative; padding-top: max(80px, min(7vw, 104px)); background: var(--cream); }
.what-head { max-width: 1060px; margin: 0 auto; padding: 0 var(--gut); text-align: center; }
.what-head .say { max-width: 34em; margin: 14px auto 0; }
.row-wrap { position: relative; isolation: isolate; margin-top: max(20px, min(2.4vw, 36px)); padding: 46px var(--gut) 0; background: linear-gradient(180deg, var(--cream) 0, #fbe3c6 22%, #f7cd9f 64%, #f0b075 100%) top / 100% calc(100% - var(--cap-h)) no-repeat; }
.row-wrap::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: var(--cap-h); background: var(--walk-bg), var(--sand); }
.row-back { position: absolute; z-index: -1; left: 0; right: 0; bottom: var(--cap-h); width: 100%; height: 170px; object-fit: cover; object-position: left bottom; opacity: .8; }
.shops { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; }

.shop {
  --o: 0;
  --awo: min(1, max(0, var(--o) * 2.2));
  --wm: min(1, max(0, (var(--o) - .36) * 1.65));
  display: flex; flex-direction: column; justify-content: flex-end; min-width: 0;
}
.still .shop { --o: 1; }
.shop-face { --pad: max(10px, min(1vw, 16px)); --frame: var(--green); --frame-in: var(--green-dk); position: relative; margin: 0 5px; padding: 0 var(--pad); background: var(--wash), var(--brick-img); box-shadow: inset 6px 0 0 rgba(255, 217, 168, .38), inset -6px 0 0 rgba(27, 26, 23, .16); }
.shop-2 .shop-face { --frame: var(--brick-dk); --frame-in: var(--brick-lo); background: var(--wash), repeating-linear-gradient(180deg, rgba(143, 63, 42, .07) 0 1px, transparent 1px 22px), #f0d3a6; }
.shop-3 .shop-face { --frame: #efdcb6; --frame-in: #d9c193; background: var(--wash), repeating-linear-gradient(90deg, rgba(0, 0, 0, .14) 0 2px, transparent 2px 30px), var(--green); }
.shop-4 .shop-face { background: var(--wash), linear-gradient(rgba(93, 53, 80, .16), rgba(93, 53, 80, .16)), var(--brick-img); }
.shop-5 .shop-face { background: var(--wash), repeating-linear-gradient(180deg, rgba(143, 63, 42, .06) 0 1px, transparent 1px 18px), #e8c88a; }

/* rooflines: a cornice, an arched parapet, a stepped false front, dentils, a gable */
.roof { position: relative; margin: 0 calc(var(--pad) * -1); }
.roof svg { width: 100%; height: 100%; }
.roof-flat { height: 34px; margin: 0 calc(var(--pad) * -1 - 6px); background: linear-gradient(rgba(255, 217, 168, .55) 0 3px, transparent 3px), linear-gradient(var(--green-dk) 0 12px, var(--green) 12px 26px, transparent 26px), repeating-linear-gradient(90deg, var(--green-dk) 0 7px, transparent 7px 14px) 0 26px / 100% 7px no-repeat; }
.roof-arch { height: 62px; margin: -24px calc(var(--pad) * -1 - 6px) 0; }
.roof-step { height: 54px; margin-top: -26px; }
.roof-step::before { content: ""; position: absolute; inset: 0 -6px; clip-path: polygon(0 100%, 0 52%, 18% 52%, 18% 22%, 34% 22%, 34% 0, 66% 0, 66% 22%, 82% 22%, 82% 52%, 100% 52%, 100% 100%); background: linear-gradient(rgba(255, 217, 168, .6) 0 3px, var(--green-dk) 3px 100%); }
.roof-step::after { content: ""; position: absolute; left: -6px; right: -6px; bottom: 0; height: 9px; background: var(--linen); box-shadow: 0 3px 0 rgba(27, 26, 23, .2); }
.roof-dentil { height: 40px; margin: 0 calc(var(--pad) * -1 - 6px); background: linear-gradient(rgba(255, 233, 196, .8) 0 3px, #efdcb6 3px 15px, transparent 15px), repeating-linear-gradient(90deg, #efdcb6 0 9px, transparent 9px 15px) 0 18px / 100% 10px no-repeat, linear-gradient(transparent 31px, #efdcb6 31px 37px, transparent 37px); box-shadow: 0 3px 0 rgba(27, 26, 23, .12); }
.roof-gable { height: 64px; margin: -30px calc(var(--pad) * -1 - 6px) 0; }
.oculus { position: absolute; left: 50%; bottom: 10px; width: 26px; height: 26px; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff6dc, #ffe3a3 55%, #f3bb62); box-shadow: 0 0 0 4px var(--brick-dk), 0 0 0 6px rgba(255, 217, 168, .6); }

/* the sign: gold leaf on a black board, and a link to that service's group */
.shop-sign { position: relative; margin-top: 16px; min-height: 66px; display: grid; place-items: center; padding: 10px 10px; border-radius: 4px; background: var(--ink); box-shadow: inset 0 0 0 5px var(--ink), inset 0 0 0 6.5px rgba(217, 164, 65, .75), 0 8px 14px -8px rgba(60, 20, 10, .7); }
.shop-5 .shop-sign { background: var(--green); box-shadow: inset 0 0 0 5px var(--green), inset 0 0 0 6.5px rgba(217, 164, 65, .8), 0 8px 14px -8px rgba(60, 20, 10, .6); }
.shop-sign h3 { font: 700 max(14.5px, min(1.12vw, 17px))/1.18 var(--disp); letter-spacing: -.015em; text-align: center; text-wrap: balance; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .55)); }
.shop-sign a { text-decoration: none; }
.shop-sign a::after { content: ""; position: absolute; inset: 0; border-radius: 4px; }
.shop-sign:hover { background: #2b2925; }
.shop-5 .shop-sign:hover { background: #24573f; }
.shop-sign:has(a:focus-visible) { outline: 3px solid var(--glow); outline-offset: 3px; }
.shop-sign a:focus-visible { outline: none; }
.shop-awning { --aw: var(--awo); --aw-h: 30px; --val-h: 11px; --sc: 10px; margin: 14px -8px 0; }
.shop-front { position: relative; margin-top: 16px; padding: 7px; background: var(--frame); box-shadow: inset 0 0 0 1px rgba(27, 26, 23, .3); }
.shop-front::after { content: ""; position: absolute; inset: 0 0 auto; height: 50px; pointer-events: none; background: linear-gradient(rgba(74, 31, 51, .38), rgba(74, 31, 51, 0)); opacity: var(--awo); }
.shop-win { min-width: 0; padding: 5px; background: var(--frame-in); }
.glass { position: relative; isolation: isolate; container-type: inline-size; min-height: 330px; display: grid; place-items: center; padding: 14px 6px; overflow: hidden; text-align: center; background: linear-gradient(180deg, #fae0c4, #e7b8a0 45%, #b68e8c); }
.glass::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(90% 70% at 50% 30%, #fffaf0 0, rgba(255, 246, 220, 0) 70%), linear-gradient(180deg, #fff6dc, #ffe3a3 55%, #f3bb62); opacity: var(--wm); }
.glass::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(112deg, transparent 20%, rgba(255, 246, 230, .32) 28%, transparent 38%, transparent 62%, rgba(255, 246, 230, .22) 66%, transparent 71%); opacity: calc(.95 - var(--wm) * .6); }
.paint { position: relative; width: 100%; min-width: 0; display: grid; justify-items: stretch; gap: 0; opacity: calc(.26 + var(--wm) * .74); translate: 0 calc((1 - var(--wm)) * 10px); }

/* one offering painted on the glass: the whole line is the link */
.offer { position: relative; display: grid; justify-items: center; gap: 6px; padding: 12px 6px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; transition: background .2s ease, box-shadow .2s ease; }
.offer + .offer, .offer + .pbtn { margin-top: 10px; }
.offer + .offer::before { content: ""; position: absolute; left: 12%; right: 12%; top: -6px; border-top: 2px dotted rgba(27, 26, 23, .32); }
.offer:hover { background: rgba(255, 250, 241, .62); box-shadow: 0 8px 18px -14px rgba(70, 25, 10, .8); }
.offer:focus-visible { outline: 3px solid var(--ink); outline-offset: 0; }
.o-name { font: 700 min(15px, 8.4cqw)/1.22 var(--disp); letter-spacing: -.02em; text-wrap: balance; }
.o-price { font: 800 min(40px, 21cqw)/1 var(--disp); letter-spacing: -.04em; white-space: nowrap; }
.o-price .gold { padding: 0 .04em; }
.o-word { margin: 2px 0; font: 800 min(21px, 11.5cqw)/1.1 var(--disp); letter-spacing: -.03em; color: var(--brick-dk); text-wrap: balance; }
.o-note { display: block; max-width: 15em; font: 700 13.5px/1.4 var(--body); color: var(--ink-2); text-wrap: balance; }
.o-note b { color: var(--ink); font-weight: 800; }
.o-go { display: inline-block; flex: none; width: 15px; height: 15px; margin-left: 4px; vertical-align: -3px; color: var(--brick-dk); transition: transform .2s var(--ease); }
.offer:hover .o-go { transform: translateX(3px); }
.pbtn { justify-self: center; display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--ink); color: var(--glow); font: 700 15.5px/1 var(--body); cursor: pointer; box-shadow: 0 10px 20px -12px rgba(27, 26, 23, .8); transition: background .2s ease, transform .16s ease; }
.pbtn:hover { background: var(--brick-dk); color: var(--paper); transform: translateY(-1px); }

.shop-sill { height: 34px; margin: 0 calc(var(--pad) * -1); background: linear-gradient(#f6e2c0 0, #ead2aa 8px, var(--frame) 8px, var(--frame) calc(100% - 9px), var(--brick-lo) calc(100% - 9px)); }
.shop-cap { height: var(--cap-h); margin: 0 5px; padding: calc(var(--walk) + 12px) 8px 0; font-size: 14.5px; line-height: 1.42; font-weight: 600; color: var(--ink-2); text-align: center; text-wrap: balance; }
.row-note { margin: 0; padding: 6px var(--gut) max(56px, min(5vw, 76px)); background: var(--sand); text-align: center; font-size: var(--t-s); font-weight: 600; color: var(--ink-2); text-wrap: balance; }

/* =====================================================================================
   THE AGENTS WE PUT TO WORK: a back office. A window on the street, a shelf, a desk with
   seven objects. Tap or hover one: it lifts, and the badge on the wall says who it is.
   ===================================================================================== */
.office { position: relative; isolation: isolate; overflow: clip; padding: max(80px, min(7vw, 112px)) var(--gut) max(64px, min(6vw, 96px)); background: repeating-linear-gradient(90deg, rgba(143, 63, 42, .05) 0 2px, transparent 2px 48px), linear-gradient(180deg, #fbefdb 0, #f6e2c2 100%); }
.of-head { position: relative; max-width: 900px; margin: 0 auto; text-align: center; }
.of-head .say { max-width: 30em; margin: 14px auto 0; }
.of-stage { position: relative; max-width: 1220px; margin: max(40px, min(4.4vw, 64px)) auto 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: max(36px, min(4.5vw, 76px)); align-items: start; }
.of-room { position: relative; }

/* the window on the street, and the beam it throws on the desk */
.of-window { position: absolute; left: 0; top: 0; width: 30%; height: 184px; padding: 9px; border-radius: 4px 4px 2px 2px; background: var(--green); box-shadow: inset 0 0 0 1px rgba(27, 26, 23, .35), 0 18px 26px -20px rgba(70, 25, 10, .7); }
.of-window::before { content: ""; position: absolute; z-index: 2; left: 9px; right: 9px; top: 50%; height: 7px; translate: 0 -50%; background: var(--green); }
.of-window::after { content: ""; position: absolute; left: -10px; right: -10px; bottom: -12px; height: 12px; border-radius: 2px; background: linear-gradient(#f6e2c0, #ead2aa); box-shadow: 0 4px 0 rgba(27, 26, 23, .18); }
.of-glass { position: relative; height: 100%; overflow: hidden; border-radius: 2px; background: var(--sky); }
.of-glass::after { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: 50%; width: 7px; translate: -50% 0; background: var(--green); }
.of-glass img { position: absolute; left: -40%; bottom: 0; width: 260%; max-width: none; height: 66%; object-fit: cover; object-position: 30% bottom; }
.of-sun { position: absolute; left: 66%; top: 50%; width: 52px; height: 52px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle at 45% 42%, #fffbf2 0, #fff1cc 55%, #ffe1a2 100%); box-shadow: 0 0 46px 14px rgba(255, 236, 190, .85); }
.of-beam { position: absolute; z-index: 0; left: 6%; top: 60px; width: 22%; height: 400px; background: linear-gradient(180deg, rgba(255, 226, 158, .62), rgba(255, 226, 158, 0) 88%); transform: skewX(28deg); transform-origin: 0 0; filter: blur(5px); pointer-events: none; }

/* the shelf (three objects) and the desk (four), each object a button */
.of-shelf { --obj: 136px; --top: 32px; --front: 0px; position: relative; margin-left: 36%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.of-shelf::before { content: ""; position: absolute; z-index: 1; left: -16px; right: -16px; top: var(--obj); height: var(--top); border-radius: 3px; background: var(--wood); box-shadow: inset 0 2px 0 rgba(255, 233, 196, .7), 0 14px 16px -10px rgba(27, 26, 23, .5); }
.of-shelf::after { content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: calc(var(--obj) + var(--top)); height: 38px; background: linear-gradient(var(--ink), var(--ink)) 9% 0 / 9px 100% no-repeat, linear-gradient(var(--ink), var(--ink)) 91% 0 / 9px 100% no-repeat; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); border-radius: 0 0 6px 6px; }
.of-desk { --obj: 176px; --top: 26px; --front: 108px; position: relative; margin-top: 64px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.of-desk::before { content: ""; position: absolute; z-index: 1; left: -24px; right: -24px; top: var(--obj); height: var(--top); border-radius: 6px 6px 2px 2px; background: var(--wood); box-shadow: inset 0 2px 0 rgba(255, 233, 196, .7), 0 10px 14px -6px rgba(27, 26, 23, .55); }
.of-desk::after { content: ""; position: absolute; z-index: 0; left: -12px; right: -12px; top: calc(var(--obj) + var(--top)); height: var(--front); background: linear-gradient(180deg, rgba(27, 26, 23, .3), rgba(27, 26, 23, 0) 16px), var(--green); box-shadow: inset 0 -10px 0 var(--green-dk); }
.of-floor { position: absolute; z-index: -1; left: 50%; top: calc(var(--obj) + var(--top) + var(--front)); width: 300vw; height: 1400px; translate: -50% 0; background: linear-gradient(180deg, rgba(27, 26, 23, .22), rgba(27, 26, 23, 0) 26px), repeating-linear-gradient(90deg, rgba(143, 63, 42, .1) 0 1px, transparent 1px 84px), linear-gradient(180deg, #e3c79a, #ecd6ad 400px); }

.ag { position: relative; z-index: 2; display: grid; grid-template-rows: var(--obj) var(--top) var(--front); justify-items: center; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; text-align: center; -webkit-tap-highlight-color: transparent; }
.ag-obj { grid-row: 1; align-self: end; position: relative; isolation: isolate; display: block; width: min(var(--w), 94%); margin-bottom: -5px; transition: transform .32s var(--ease), opacity .6s var(--ease); transition-delay: 0s, calc(var(--i) * 70ms); }
.ag-obj::before { content: ""; position: absolute; z-index: -1; left: -22%; right: -22%; top: -6%; bottom: -10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 232, 170, .95), rgba(255, 226, 160, .45) 55%, rgba(255, 226, 160, 0)); opacity: 0; transition: opacity .3s ease; }
.ag-obj svg { width: 100%; height: auto; overflow: visible; }
.ag:hover .ag-obj, .ag[aria-pressed="true"] .ag-obj { transform: translateY(-12px); }
.ag[aria-pressed="true"] .ag-obj::before { opacity: 1; }
.motion .of-room:not(.is-in) .ag-obj { opacity: 0; transform: translateY(-18px); }
.ag-tag { grid-row: 2; align-self: center; position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 24px; max-width: 96%; padding: 4px 10px 3px; border-radius: 3px; background: linear-gradient(180deg, #f6dc8a, #d9a441 55%, #b8862e); color: var(--ink); font: 800 13px/1.15 var(--body); letter-spacing: .01em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 0 rgba(27, 26, 23, .35); white-space: nowrap; transition: background .2s ease, color .2s ease; }
.ag[aria-pressed="true"] .ag-tag { background: var(--ink); color: var(--glow); }
.ag:focus-visible { outline: none; }
.ag:focus-visible .ag-tag { outline: 3px solid var(--brick); outline-offset: 3px; }
.of-desk .ag-tag { grid-row: 3; align-self: start; margin-top: 22px; min-height: 30px; padding: 6px 14px 5px; font-size: 14px; }
.of-desk .ag::after { content: ""; position: absolute; left: 7%; right: 7%; top: calc(var(--obj) + var(--top) + 10px); bottom: 20px; border: 1.5px solid rgba(217, 164, 65, .5); border-radius: 4px; pointer-events: none; }
.of-desk .ag::before { content: ""; position: absolute; left: 50%; bottom: 32px; width: 40px; height: 9px; translate: -50% 0; border-radius: 5px; background: linear-gradient(180deg, #f6dc8a, #d9a441 55%, #8a5f22); box-shadow: 0 2px 0 rgba(27, 26, 23, .35); }

/* the badge on the wall: who this agent is */
.of-card { position: relative; z-index: 3; margin-top: 30px; display: grid; justify-items: center; gap: 26px; }
.of-pin { position: absolute; z-index: 2; left: 50%; top: -9px; width: 20px; height: 20px; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3cf, #d9a441 45%, #8a5f22); box-shadow: 0 3px 4px rgba(27, 26, 23, .45); }
.badge { width: 100%; rotate: -1.6deg; border-radius: 18px; overflow: hidden; background: var(--paper); box-shadow: 0 0 0 1px rgba(27, 26, 23, .08), 0 34px 50px -30px rgba(70, 25, 10, .75); }
.bd-hi { display: grid; justify-items: center; gap: 4px; padding: 18px 20px 16px; background: var(--brick); color: var(--paper); text-align: center; }
.bd-hi b { font: 800 30px/1 var(--disp); letter-spacing: -.03em; }
.bd-hi span { font: 800 12.5px/1.2 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--glow); }
.bd-body { display: grid; gap: 14px; padding: 24px 26px 28px; }
.bd-n { font: 800 25px/1.12 var(--disp); letter-spacing: -.03em; text-wrap: balance; }
.bd-row { display: grid; gap: 4px; padding-top: 13px; border-top: 1.5px dashed rgba(184, 134, 46, .55); }
.bd-k { font: 800 11.5px/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.bd-v { font-size: 16.5px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.motion .badge.is-new .bd-body > * { animation: bd-in .42s var(--ease) both; }
.motion .badge.is-new .bd-body > :nth-child(2) { animation-delay: .05s; }
.motion .badge.is-new .bd-body > :nth-child(3) { animation-delay: .1s; }
@keyframes bd-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.of-link { gap: 10px; }
.of-link .o-go { margin: 0; vertical-align: 0; color: currentColor; }

/* the shared header: chrome.css blurs the header backdrop, and a backdrop filter makes the
   header the containing block for the fixed menu sheet, which then shrinks to a 59 px strip on
   phones. While the menu is open the header goes solid instead. */
body.nav-open .site-head { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--cream); }
body.nav-open .sam-fab { display: none; }

/* the shared footer: a long service name wraps and its price follows it, instead of
   standing in a second column (chrome.css sets these links to inline-flex) */
.foot-col a { display: block; min-height: 0; padding: 8px 0; line-height: 1.35; }
.foot-col a span { margin-left: 6px; white-space: nowrap; }

/* =====================================================================================
   FOUND BY AI ASSISTANTS: a phone in a hand, playing the scene
   ===================================================================================== */
.found { position: relative; overflow: clip; padding: max(56px, min(5vw, 90px)) var(--gut) max(88px, min(8vw, 130px)); background: linear-gradient(180deg, #ecd6ad 0, var(--cream) 55%); }
.found-in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: max(40px, min(6vw, 96px)); align-items: center; }
.found-copy .sec-h { max-width: 12em; }
.found-lines { margin-top: 28px; display: grid; gap: 16px; font-size: var(--t-m); line-height: 1.5; color: var(--ink-2); max-width: 30em; }
.found-lines li { text-wrap: pretty; }
.found-lines li:first-child { color: var(--ink); }
.found-lines [data-who], .found-lines [data-place] { color: var(--ink); font-weight: 700; }

.hand-stage { position: relative; display: grid; place-items: center; }
.hand-sun { position: absolute; width: 560px; height: 560px; max-width: 130%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff3d6 0, #ffe6b4 30%, rgba(255, 214, 150, .5) 52%, rgba(255, 214, 150, 0) 70%); }
.hand { position: relative; width: min(420px, 100%); aspect-ratio: 420 / 640; rotate: -6deg; }
.hand-back, .hand-front { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hand-front { z-index: 2; pointer-events: none; }
.hand .phone { position: absolute; z-index: 1; left: 22.6%; top: 6.25%; width: 57.2%; height: 78.2%; }

/* both drawn phones */
.phone { padding: 3.6%; border-radius: 13% / 6.4%; background: var(--ink); box-shadow: inset 0 0 0 2px #3d362f, inset 0 0 0 4px #121110, 0 40px 60px -34px rgba(70, 25, 10, .7); }
.phone-glass { position: relative; height: 100%; overflow: hidden; border-radius: 10.5% / 5%; background: var(--paper); container-type: inline-size; }
.phone-isle { position: absolute; z-index: 5; top: 2.2%; left: 50%; width: 30%; height: 4.4%; max-height: 22px; translate: -50% 0; border-radius: 99px; background: var(--ink); }

/* the assistant app */
.as { position: absolute; inset: 0; display: flex; flex-direction: column; padding-top: 15cqw; font-size: 5.4cqw; line-height: 1.35; color: var(--ink); }
.as-top { display: flex; align-items: center; gap: .45em; padding: 0 1em .65em; border-bottom: 1px solid rgba(27, 26, 23, .08); }
.as-top b { font-weight: 800; font-size: 1.05em; }
.as-spark { width: 1.4em; height: 1.4em; }
.as-ai { padding: .2em .35em .15em; border-radius: .3em; background: var(--ink); color: var(--glow); font-weight: 800; font-size: .66em; letter-spacing: .08em; }
.as-log { position: relative; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: .6em; padding: .8em .85em; }
.as-step { display: none; }
.as-step.is-on { display: block; animation: as-in .38s var(--ease) both; }
.still .as-step.is-on { animation: none; }
@keyframes as-in { from { opacity: 0; transform: translateY(.6em) scale(.97); } to { opacity: 1; transform: none; } }
.as-hello { margin-bottom: auto; padding-top: .4em; text-align: center; color: var(--ink-3); font-weight: 600; font-size: .92em; }
.as-me.is-on { display: flex; justify-content: flex-end; }
.as-q { max-width: 86%; padding: .55em .8em; border-radius: 1em 1em .3em 1em; background: var(--green); color: var(--cream); font-weight: 600; font-size: .92em; }
.as-dots.is-on { display: inline-flex; align-self: flex-start; gap: .25em; padding: .7em .8em; border-radius: 1em; background: #efe3cf; }
.as-dots i { width: .4em; height: .4em; border-radius: 50%; background: var(--ink-3); animation: sam-blink 1.2s infinite ease-in-out; }
.as-dots i:nth-child(2) { animation-delay: .2s; }
.as-dots i:nth-child(3) { animation-delay: .4s; }
.as-say { display: grid; gap: .5em; }
.as-say > p { font-size: .92em; }
.as-ask { font-weight: 800; }
.as-card { padding: .7em; border-radius: .9em; background: #fff; border: 1px solid rgba(27, 26, 23, .12); box-shadow: 0 .5em 1em -.6em rgba(70, 25, 10, .45); }
.as-card-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .5em; align-items: center; }
.as-logo { display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: .55em; background: var(--green); color: var(--glow); font: 800 1em/1 var(--disp); }
.as-who { display: grid; min-width: 0; }
.as-who b { font-weight: 800; font-size: .95em; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-who span { font-size: .72em; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-sample { align-self: start; padding: .25em .4em .2em; border: 1px solid var(--brick-dk); border-radius: .3em; color: var(--brick-dk); font-weight: 800; font-size: .58em; letter-spacing: .12em; text-transform: uppercase; }
.as-prices { margin-top: .55em; display: grid; gap: .25em; }
.as-prices li { display: flex; justify-content: space-between; gap: .5em; padding: .3em .45em; border-radius: .4em; background: #f6ecdb; font-weight: 700; font-size: .8em; }
.as-prices li span { color: var(--green); font-weight: 700; font-size: .9em; white-space: nowrap; }
.as-prices li span::before { content: "✓ "; }
.as-open { margin-top: .45em; font-size: .72em; color: var(--ink-3); font-weight: 600; }
.as-btns.is-on { display: flex; gap: .4em; }
.as-yes, .as-no { padding: .5em .9em; border-radius: 99px; font-weight: 800; font-size: .85em; transition: transform .12s ease, background .2s ease; }
.as-yes { background: var(--ink); color: var(--glow); }
.as-yes.is-pressed { transform: scale(.92); }
.as-yes.is-chosen { background: var(--green); color: var(--cream); }
.as-no { border: 1.5px solid rgba(27, 26, 23, .25); color: var(--ink-2); }
.as-booked.is-on { display: flex; align-items: flex-start; gap: .5em; padding: .6em .7em; border-radius: .8em; background: #e2efe4; font-weight: 600; font-size: .86em; }
.as-check { flex: none; display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--green); color: var(--cream); font-weight: 900; font-size: .9em; }
.as-bar { display: flex; align-items: center; gap: .2em; margin: 0 .7em .9em; height: 2.6em; padding: 0 .3em 0 .9em; border-radius: 99px; border: 1.5px solid rgba(27, 26, 23, .18); background: #fff; }
.as-typed { min-width: 0; overflow: hidden; white-space: nowrap; font-size: .88em; }
.as-caret { width: 1.5px; height: 1.1em; background: var(--brick); }
.motion .as-caret { animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.as-send { margin-left: auto; display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--ink); color: var(--glow); font-weight: 800; font-size: .9em; }
.as-tap { position: absolute; z-index: 4; left: var(--x, 70%); top: var(--y, 90%); width: 2.4em; height: 2.4em; margin: -1.2em 0 0 -1.2em; border-radius: 50%; background: rgba(27, 26, 23, .16); border: .2em solid rgba(27, 26, 23, .5); opacity: 0; transform: scale(.6); transition: left .6s var(--ease), top .6s var(--ease), opacity .3s ease, transform .18s ease; pointer-events: none; }
.as-tap.is-in { opacity: 1; transform: scale(1); }
.as-tap.is-tap { transform: scale(.7); background: rgba(27, 26, 23, .3); }

/* =====================================================================================
   BUILD YOUR PRICE: the builder, and the hanging sign with the live total
   ===================================================================================== */
.prices { position: relative; padding: max(88px, min(8vw, 130px)) var(--gut); background: var(--paper); }
.prices:focus { outline: none; }
.prices-in { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: max(40px, min(5vw, 88px)); align-items: start; }
.prices-also { margin: 14px 0 38px; font-size: var(--t-m); line-height: 1.5; color: var(--ink-2); }
.prices-also a { font-weight: 700; color: var(--brick-dk); text-underline-offset: 4px; white-space: nowrap; }
.prices-also a:hover { color: var(--ink); }
.rig-col { position: sticky; top: calc(var(--head-h) + 30px); }
.rig { position: relative; width: 400px; height: 470px; }
.rig-pier { position: absolute; right: 0; top: 0; bottom: 0; width: 46px; background: var(--wash), var(--brick-img); box-shadow: inset 6px 0 0 rgba(255, 217, 168, .38), inset -5px 0 0 rgba(27, 26, 23, .18); }
.rig-pier::before { content: ""; position: absolute; left: -6px; right: -6px; top: 0; height: 18px; background: linear-gradient(var(--green-dk) 0 8px, var(--green) 8px); }
.rig-pier::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: 0; height: 16px; background: var(--brick-lo); }
.rig-arm { position: absolute; top: 34px; right: 0; width: 400px; height: 110px; max-width: none; }
.hang { position: absolute; top: 80px; left: 70px; width: 260px; transform-origin: 50% 0; }
.motion .hang.is-swing { animation: swing 1.5s cubic-bezier(.3, .6, .3, 1); }
@keyframes swing { 0% { rotate: 0deg; } 14% { rotate: 4.5deg; } 36% { rotate: -3.2deg; } 58% { rotate: 1.8deg; } 80% { rotate: -.7deg; } 100% { rotate: 0deg; } }
.chains { width: 260px; height: 64px; }
.board { display: grid; justify-items: center; gap: 4px; padding: 22px 18px 24px; border-radius: 12px; background: radial-gradient(120% 70% at 30% 0, #2c2924 0, var(--ink) 60%); box-shadow: inset 0 0 0 6px var(--ink), inset 0 0 0 8px rgba(217, 164, 65, .85), inset 0 0 0 12px var(--ink), inset 0 0 0 13px rgba(217, 164, 65, .4), 0 30px 40px -24px rgba(60, 20, 10, .75); text-align: center; }
.board-k { margin-bottom: 6px; font: 800 11px/1 var(--body); letter-spacing: .24em; text-transform: uppercase; color: rgba(243, 227, 195, .7); }
.board-row { display: grid; justify-items: center; gap: 6px; }
.board-l { font: 800 12px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--linen); }
.board-v { font: 800 min(46px, calc(300px / var(--len, 6)))/1.05 var(--disp); letter-spacing: -.035em; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .6)); padding: 0 .04em; }
.board-rule { display: block; width: 70%; height: 2px; margin: 12px 0 10px; background: linear-gradient(90deg, transparent, rgba(217, 164, 65, .8), transparent); }

/* the builder itself, given room */
.quote .q { gap: 34px; }
.quote .q-label { font-size: 13px; letter-spacing: .12em; }
.quote .q-seg { background: var(--cream); padding: 7px; border-radius: 16px; }
.quote .q-segbtn { padding: 14px; border-radius: 12px; }
.quote .q-segname { font-size: 15.5px; }
.quote .q-segbtn[aria-checked="true"] { border-color: var(--green); }
.quote .q-note { font-size: var(--t-s); }
.quote .q-rows { gap: 10px; }
.quote .q-row { padding: 18px 20px; border-radius: 16px; gap: 16px; }
.quote .q-row:has(.q-sw-in:checked) { border-color: var(--green); }
.quote .q-sw-in:checked ~ .q-sw { background: var(--green); }
.quote .q-rowname { font-size: 17px; }
.quote .q-rowshort { font-size: 14px; }
.quote .q-pbtn { width: 44px; height: 44px; font-size: 18px; }
.quote .q-people { flex-wrap: wrap; }
.quote .q-people small { white-space: nowrap; }
.quote .q-rowprice { max-width: 210px; }
.quote .q-rowprice small { white-space: normal; line-height: 1.35; }
.quote .q-call { font-size: var(--t-s); }
.quote .q-bar { padding: 26px 28px; border-radius: 22px; }
.quote .q-bar .q-msg.is-ok { color: var(--glow); }
.quote .q-bar .sl-btn-accent { background: var(--glow); border-color: var(--glow); color: var(--ink); }

/* =====================================================================================
   THE COUNTER: a bell, a desk phone, a microphone. Tap them.
   ===================================================================================== */
.counter { position: relative; isolation: isolate; overflow: clip; padding: max(88px, min(8vw, 130px)) var(--gut) max(64px, min(6vw, 96px)); }
.ct-wall { position: absolute; z-index: -2; inset: 0; background: linear-gradient(180deg, #fbefdb 0, #f7e3c3 100%); overflow: hidden; }
.ct-beam { position: absolute; top: -12%; left: 6%; width: 17%; height: 110%; background: linear-gradient(180deg, rgba(255, 228, 160, .75), rgba(255, 228, 160, 0) 82%); transform: skewX(-26deg); filter: blur(3px); }
.ct-beam-2 { left: 30%; width: 7%; opacity: .7; }
.ct-h { position: relative; text-align: center; }
.ct-desk { --obj: 210px; --top: 30px; --front: 156px; position: relative; max-width: 1060px; margin: max(40px, min(4vw, 60px)) auto 0; }
.ct-desk::before { content: ""; position: absolute; z-index: 1; left: -40px; right: -40px; top: var(--obj); height: var(--top); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #d0935d 0, #b4774a 30%, #94603a 100%); box-shadow: inset 0 2px 0 rgba(255, 233, 196, .7), 0 10px 14px -6px rgba(27, 26, 23, .55); }
.ct-desk::after { content: ""; position: absolute; z-index: 0; left: -26px; right: -26px; top: calc(var(--obj) + var(--top)); height: var(--front); background: linear-gradient(180deg, rgba(27, 26, 23, .3), rgba(27, 26, 23, 0) 18px), var(--green); }
.ct-items { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ct-item { position: relative; display: grid; grid-template-rows: var(--obj) var(--top) var(--front); justify-items: center; padding: 0; border: 0; background: none; cursor: pointer; text-align: center; -webkit-tap-highlight-color: transparent; }
.ct-item::after { content: ""; position: absolute; left: 7%; right: 7%; top: calc(var(--obj) + var(--top) + 18px); bottom: 20px; border: 1.5px solid rgba(217, 164, 65, .5); border-radius: 4px; pointer-events: none; }
.ct-item:focus-visible { outline: none; }
.ct-item:focus-visible .ct-plate { outline: 3px solid var(--glow); outline-offset: 4px; }
.ct-obj { grid-row: 1; align-self: end; display: block; width: var(--w); margin-bottom: -10px; transition: transform .25s var(--ease); }
.ct-obj svg { width: 100%; height: auto; overflow: visible; }
.ct-item:hover .ct-obj { transform: translateY(-5px); }
.ct-bell { --w: 190px; }
.ct-phone { --w: 250px; }
.ct-mic { --w: 124px; }
.ct-plate { grid-row: 3; align-self: center; position: relative; z-index: 1; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; max-width: 82%; padding: 12px 18px; border-radius: 6px; background: linear-gradient(180deg, #f6dc8a, #d9a441 55%, #b8862e); color: var(--ink); font: 800 16.5px/1.25 var(--body); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(27, 26, 23, .25), 0 3px 0 rgba(27, 26, 23, .35); }
.ct-plate .sl-chip-ai { background: var(--ink); color: var(--glow); }
.ct-soon { padding: 4px 7px 3px; border-radius: 4px; background: var(--ink); color: var(--glow); font: 800 10.5px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; }

/* the bell rings */
.bell-body, .bell-knob, .bell-ring, .handset, .cord, .mic-wave { transform-box: fill-box; }
.bell-body { transform-origin: 50% 100%; }
.bell-ring { opacity: 0; transform-origin: 50% 50%; }
.ct-bell.is-ring .bell-body { animation: bell-hit .7s var(--ease); }
.ct-bell.is-ring .bell-knob { animation: knob .3s ease; }
.ct-bell.is-ring .bell-ring { animation: ring 1s ease-out; }
@keyframes bell-hit { 0% { transform: none; } 14% { transform: translateY(5px) scaleY(.95); } 34% { transform: translateY(-7px) rotate(-4deg); } 54% { transform: rotate(3deg); } 74% { transform: rotate(-1.5deg); } 100% { transform: none; } }
@keyframes knob { 40% { transform: translateY(8px); } }
@keyframes ring { 0% { opacity: 0; transform: scale(.85); } 18% { opacity: 1; } 100% { opacity: 0; transform: scale(1.2); } }

/* the phone: the handset lifts */
.handset { transform-origin: 0% 100%; transition: transform .5s var(--ease); }
.cord { transform-origin: 50% 100%; transition: transform .5s var(--ease); }
.ct-phone.is-lifted .handset { transform: translate(-6px, -40px) rotate(-13deg); }
.ct-phone.is-lifted .cord { transform: scaleY(1.45) translateY(-2px); }

/* the microphone: coming online */
.mic-wave { opacity: 0; transform-origin: 50% 50%; }
.ct-mic.is-on .mic-wave { opacity: 1; }
.motion .ct-mic.is-on .mic-wave { animation: wave 1.2s ease-out 3; }
@keyframes wave { 0% { opacity: 0; transform: scale(.85); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.15); } }
.ct-note { position: absolute; z-index: 5; right: 4%; top: 0; width: max-content; max-width: min(260px, 70vw); padding: 10px 14px; border-radius: 12px; background: var(--ink); color: var(--cream); font: 600 14px/1.35 var(--body); text-align: left; box-shadow: 0 16px 30px -16px rgba(27, 26, 23, .8); opacity: 0; translate: 0 -70%; transition: opacity .3s ease, translate .4s var(--ease); pointer-events: none; }
.ct-note::after { content: ""; position: absolute; right: 26%; top: 100%; border: 8px solid transparent; border-top-color: var(--ink); }
.ct-mic.is-on .ct-note { opacity: 1; translate: 0 -100%; }

/* the call box comes up under the counter */
.ct-drawer { position: relative; z-index: 3; display: grid; grid-template-rows: 0fr; max-width: 620px; margin: 0 auto; transition: grid-template-rows .55s var(--ease); }
.ct-drawer.is-open { grid-template-rows: 1fr; }
.ct-drawer-in { min-height: 0; overflow: hidden; }
.ct-slip { margin: 30px 4px 6px; padding: 26px 26px 22px; border-radius: 18px; background: var(--paper); border: 1px solid var(--sl-line); box-shadow: 0 30px 50px -36px rgba(70, 25, 10, .7); translate: 0 -24px; opacity: 0; transition: translate .55s var(--ease), opacity .4s ease; }
.ct-drawer.is-open .ct-slip { translate: 0 0; opacity: 1; }
.ct-slip .call { gap: 12px; }
.ct-slip .call-title { font: 800 24px/1.15 var(--disp); letter-spacing: -.025em; }
.ct-slip .call-line, .ct-slip .call-fine { font-size: var(--t-s); color: var(--ink-2); }
.ct-slip .call-form .sl-btn { background: var(--ink); border-color: var(--ink); color: var(--glow); }
.ct-floor { position: absolute; z-index: -1; left: 50%; top: calc(var(--obj) + var(--top) + var(--front)); width: 300vw; height: 1400px; translate: -50% 0; background: linear-gradient(180deg, rgba(27, 26, 23, .22), rgba(27, 26, 23, 0) 26px), repeating-linear-gradient(90deg, rgba(143, 63, 42, .1) 0 1px, transparent 1px 84px), linear-gradient(180deg, #e3c79a, #ecd6ad 400px); }

/* =====================================================================================
   THE SAMPLE: the form, and a phone that receives the text as you type
   ===================================================================================== */
.sample { position: relative; overflow: clip; padding: max(88px, min(8vw, 130px)) var(--gut); background: linear-gradient(180deg, var(--cream), var(--paper)); }
.sample:focus { outline: none; }
.sample-in { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: max(40px, min(6vw, 96px)); align-items: center; }
.sample-copy .say { max-width: 32em; }
.sample-form { margin-top: 36px; }
.sample-form .lead-f input, .sample-form .lead-f select { background: var(--cream); }
.sample-form .lead-acts .sl-btn { background: var(--ink); border-color: var(--ink); color: var(--glow); }
.sample-form .lead-done { background: var(--green); color: var(--cream); }
.sample-form .lead-done .sl-btn { background: var(--glow); border-color: var(--glow); color: var(--ink); }
.sp-stage { position: relative; display: grid; place-items: center; min-height: 640px; }
.sp-sun { position: absolute; width: 500px; height: 500px; max-width: 120%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff3d6 0, #ffe6b4 30%, rgba(255, 214, 150, .5) 52%, rgba(255, 214, 150, 0) 70%); }
.phone-sp { position: relative; width: 300px; height: 612px; rotate: 4deg; }
.sp { position: absolute; inset: 0; display: flex; flex-direction: column; padding-top: 13cqw; font-size: 4.8cqw; line-height: 1.35; color: var(--ink); }
.sp-top { display: flex; align-items: center; gap: .5em; padding: .2em .9em .7em; border-bottom: 1px solid rgba(27, 26, 23, .08); }
.sp-back { color: var(--brick); font-size: 1.9em; line-height: .8; font-weight: 600; }
.sp-av { display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: var(--brick); }
.sp-av svg { width: 62%; height: auto; }
.sp-who { display: grid; }
.sp-who b { font-weight: 800; font-size: .98em; }
.sp-who span { font-size: .74em; color: var(--ink-3); }
.sp-log { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: .55em; padding: .8em; }
.sp-day { margin-bottom: auto; align-self: center; font-weight: 700; font-size: .72em; color: var(--ink-3); }
.sp-in { align-self: flex-start; max-width: 88%; padding: .6em .8em; border-radius: 1.1em 1.1em 1.1em .3em; background: #efe3cf; font-size: .92em; line-height: 1.38; transform-origin: 0 100%; }
.sp-in b { font-weight: 800; }
.motion .sp-in.is-pop { animation: pop .5s var(--ease); }
@keyframes pop { 0% { transform: translateY(.5em) scale(.94); opacity: .3; } 100% { transform: none; opacity: 1; } }
.sp-img { position: relative; align-self: flex-start; width: 74%; border-radius: 1em; overflow: hidden; border: 1px solid rgba(27, 26, 23, .14); box-shadow: 0 .6em 1.2em -.8em rgba(70, 25, 10, .5); }
.sp-shot { height: 17em; overflow: hidden; background: var(--paper); }
.sp-shot .mock { font-size: 1.75cqw; height: auto; }
.sp-tag { position: absolute; left: .5em; bottom: .5em; padding: .3em .45em .25em; border-radius: .3em; background: var(--ink); color: var(--glow); font-weight: 800; font-size: .58em; letter-spacing: .12em; text-transform: uppercase; }
.sp-in-2 { font-size: .86em; }
.sp-bar { display: flex; align-items: center; margin: 0 .7em .9em; height: 2.6em; padding: 0 .3em 0 .9em; border-radius: 99px; border: 1.5px solid rgba(27, 26, 23, .18); background: #fff; }
.sp-bar span { font-size: .84em; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-bar i { margin-left: auto; display: grid; place-items: center; width: 1.9em; height: 1.9em; flex: none; border-radius: 50%; background: var(--green); color: var(--cream); font-style: normal; font-weight: 800; font-size: .9em; }

/* =====================================================================================
   SIX THINGS WE WILL NEVER DO: the house-rules sign on the brick
   ===================================================================================== */
.rules { position: relative; padding: max(88px, min(8vw, 130px)) var(--gut); background: radial-gradient(60% 70% at 50% 45%, rgba(255, 226, 170, .38), rgba(255, 226, 170, 0) 70%), linear-gradient(180deg, rgba(58, 22, 48, .2), rgba(58, 22, 48, 0) 18%, rgba(58, 22, 48, 0) 80%, rgba(58, 22, 48, .25)), var(--wash), var(--brick-img); }
.rules-sign { position: relative; max-width: 800px; margin: 0 auto; padding: max(44px, min(5vw, 68px)) max(26px, min(6vw, 84px)) max(36px, min(4vw, 56px)); border-radius: 18px; background: radial-gradient(120% 80% at 30% 0, #2a6650 0, var(--green) 46%, var(--green-dk) 100%); box-shadow: inset 0 0 0 10px #173d2e, inset 0 0 0 12.5px rgba(217, 164, 65, .9), inset 0 0 0 17px #173d2e, inset 0 0 0 18px rgba(217, 164, 65, .45), 0 40px 60px -30px rgba(40, 10, 5, .75), 0 0 0 1px rgba(27, 26, 23, .4); }
.screw { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3cf, #d9a441 45%, #8a5f22); box-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.screw::after { content: ""; position: absolute; left: 3px; right: 3px; top: 7px; height: 2px; background: rgba(60, 40, 10, .7); rotate: 35deg; }
.s1 { left: 28px; top: 28px; } .s2 { right: 28px; top: 28px; } .s3 { left: 28px; bottom: 28px; } .s4 { right: 28px; bottom: 28px; }
.s2::after { rotate: -20deg; } .s3::after { rotate: 80deg; }
.rules-h { font: 800 max(26px, min(3.2vw, 44px))/1.12 var(--disp); letter-spacing: -.03em; text-align: center; text-wrap: balance; }
.rules-h .gold { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .45)); }
.rules-list { margin-top: max(26px, min(3vw, 40px)); }
.rules-list li { padding: 16px 6px; border-top: 1.5px dashed rgba(217, 164, 65, .42); color: var(--linen); font: 600 var(--t-m)/1.4 var(--body); text-align: center; text-wrap: balance; }
.rules-list li:last-child { border-bottom: 1.5px dashed rgba(217, 164, 65, .42); }

/* static and reduced motion: everything in its final state at once */
.still .shop *, .still .shop *::before, .still .shop *::after, .still .hero *, .still .watch *, .still .counter *, .still .sample *, .still .office * { transition: none !important; }

/* =====================================================================================
   tablets and phones
   ===================================================================================== */
@media (max-width: 1199px) {
  /* the street becomes cards: three, then two */
  .what { --cap-h: auto; }
  .row-wrap { background: var(--cream); padding: 30px var(--gut) 0; }
  .row-wrap::after, .row-back { display: none; }
  .shops { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 22px; max-width: 980px; align-items: stretch; }
  .shop { grid-column: span 2; padding-top: 40px; border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, #fbdcbc 0, #f4b986 100%); }
  .shop-4 { grid-column: 2 / span 2; }
  .shop-face { margin: 0 12px; }
  .shop-cap { height: auto; margin: 0; padding: calc(var(--walk) + 12px) 16px 20px; background: var(--walk-bg), var(--sand); }
  .shop-sign h3 { font-size: 17px; }
  .row-note { padding-top: 34px; background: var(--cream); }
  .office { background: repeating-linear-gradient(90deg, rgba(143, 63, 42, .05) 0 2px, transparent 2px 48px), linear-gradient(180deg, #fbefdb 0, #f6e2c2 100%); }
  .of-stage { grid-template-columns: minmax(0, 1fr); max-width: 780px; row-gap: 0; }
  .of-card { order: -1; width: min(100%, 520px); justify-self: center; margin: 0 0 56px; }
  .badge { rotate: -1deg; }
}
@media (max-width: 1180px) {
  .prices-in { grid-template-columns: minmax(0, 1fr) 340px; }
  .rig-col { overflow: clip; overflow-clip-margin: 24px; }
  .rig { transform: scale(.85); transform-origin: top left; margin-bottom: -70px; }
}
@media (max-width: 1023px) {
  /* the first screen stacks: the headline, the line, the buttons, then our storefront on the sidewalk */
  .hero { min-height: 0; padding-top: calc(var(--head-h) + 22px); }
  .sun { left: 76%; top: auto; bottom: 300px; }
  .sun::before { left: -300px; top: -300px; width: 600px; height: 600px; }
  .sun i { left: -40px; top: -40px; width: 80px; height: 80px; }
  .clouds { display: none; }
  .backrow { height: 140px; }
  .hero-in { --scene-w: 100%; grid-template-columns: minmax(0, 1fr); }
  .h-copy { width: 100%; max-width: 640px; justify-self: center; padding-bottom: 0; }
  .h1 { max-width: 11em; }
  .h-sub { margin-top: 16px; }
  .h-ctas { margin-top: 22px; }
  .h-ctas .btn { flex: 1 1 auto; }
  .h-shop { width: 100%; max-width: 640px; justify-self: center; margin-top: 30px; }

  /* watch it work stacks: the heading, the input, then the visitor's storefront */
  .watch { padding-top: max(64px, 12vw); }
  .watch::after { display: none; }
  .w-sky { display: none; }
  .watch-in { --scene-w: 100%; grid-template-columns: minmax(0, 1fr); }
  .w-copy { width: 100%; max-width: 640px; justify-self: center; padding-bottom: 0; }
  .h-form { max-width: none; margin-top: 22px; }
  .h-scene { width: 100%; max-width: 640px; justify-self: center; margin-top: 34px; }
  .sf-cap { margin: 0 calc(var(--gut) * -1); height: auto; min-height: var(--walk); padding: 16px var(--gut) 18px; background: var(--walk-bg), var(--sand); font-size: 14.5px; }

  .found-in { grid-template-columns: minmax(0, 1fr); }
  .found-copy { order: -1; text-align: center; }
  .found-copy .sec-h, .found-lines { margin-inline: auto; }
  .hand { width: min(380px, 92%); }

  .prices-in { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .prices-tool { display: contents; }
  .prices-tool .sec-h { order: 1; text-align: center; }
  .prices-also { order: 1; margin: 12px 0 24px; text-align: center; }
  .rig-col { order: 2; position: relative; top: 0; width: 100%; display: grid; justify-items: center; overflow: clip; }
  .rig { transform: scale(.82); transform-origin: top center; margin-bottom: -60px; }
  .quote { order: 3; margin-top: 20px; }

  .ct-desk { --obj: 150px; --front: 130px; }
  .ct-bell { --w: 130px; }
  .ct-phone { --w: 176px; }
  .ct-mic { --w: 86px; }
  .ct-plate { font-size: 15px; padding: 10px 12px; }

  .sample-in { grid-template-columns: minmax(0, 1fr); }
  .sp-stage { min-height: 0; padding: 30px 0 10px; }
}
@media (min-width: 1024px) {
  /* the hanging sign carries the totals, so the bar keeps only the lines and the actions */
  .quote .q-tots { display: none; }
}
@media (max-width: 759px) {
  .shops { grid-template-columns: minmax(0, 1fr); max-width: 440px; gap: 30px; }
  .shop, .shop-4 { grid-column: auto; }
  .glass { min-height: 0; padding: 22px 12px; }
  .o-name { font-size: 16px; }
  .o-note { font-size: 14px; }

  /* the back office becomes a grid of big tiles, the badge under them */
  .office { padding-bottom: max(64px, 14vw); }
  .of-stage { max-width: 520px; }
  .of-room { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .of-window, .of-beam, .of-floor { display: none; }
  .of-shelf, .of-desk { display: contents; }
  .of-shelf::before, .of-shelf::after, .of-desk::before, .of-desk::after { display: none; }
  .ag, .of-desk .ag { order: var(--i); grid-template-rows: 100px auto; row-gap: 14px; align-items: end; padding: 18px 8px 14px; border: 2px solid transparent; border-radius: 16px; background: var(--paper); box-shadow: 0 1px 0 rgba(27, 26, 23, .06), 0 16px 26px -22px rgba(70, 25, 10, .7); transition: border-color .2s ease; }
  .ag::before, .of-desk .ag::before { content: ""; position: absolute; left: 12px; right: 12px; top: 113px; bottom: auto; width: auto; height: 9px; translate: none; border-radius: 3px; background: var(--wood); box-shadow: 0 3px 0 rgba(27, 26, 23, .16); }
  .of-desk .ag::after { content: none; }
  .ag-obj { width: auto; height: 96px; margin-bottom: 0; }
  .ag-obj svg { width: auto; height: 100%; }
  .ag:hover .ag-obj, .ag[aria-pressed="true"] .ag-obj { transform: translateY(-6px); }
  .ag-tag, .of-desk .ag-tag { grid-row: 2; align-self: center; margin: 0; min-height: 30px; padding: 6px 10px 5px; font-size: 14px; white-space: normal; text-align: center; }
  .ag[aria-pressed="true"] { border-color: var(--gold); }
  .ag[data-agent="6"] { grid-column: 1 / -1; }
  .of-card { order: 0; margin: 40px 0 0; }
  .badge { rotate: 0deg; }
}
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .h-sub { font-size: 16.5px; }
  .sf { padding: 0 3.4cqw; }
  .sf-cornice { height: 5.6cqw; }
  .sf-signrow { padding: 2.6cqw 1cqw 0; }
  .sf-sign { height: 13cqw; box-shadow: inset 0 0 0 5px var(--ink), inset 0 0 0 6.5px rgba(217, 164, 65, .75); }
  .sf-name { font-size: min(9cqw, calc(150cqw / var(--len, 18))); }
  .sf-tag { font-size: 9px; padding: 4px 6px 3px; top: 0; }
  .sf-awning { --sw: 3.2cqw; --aw-h: 7cqw; --val-h: 4.6cqw; --sc: 2.4cqw; }
  .valance { font-size: 2.6cqw; }
  .sf-front { grid-template-columns: minmax(0, 1fr); margin-top: 3.6cqw; padding: 1.8cqw; }
  .door { display: none; }
  .win { padding: 1.2cqw; }
  .win-view { aspect-ratio: 4 / 4.5; }
  .win-screen .mock { font-size: max(7px, min(2.55cqi, 11px)); }
  .win-screen .mock .mock-art .mock-rev { font-size: .9em; padding: .6em .8em; }
  .chrome-dots, .chrome-live { display: none; }
  .chrome-url { max-width: 48%; font-size: 10px; }
  .open-sign { top: 1.2cqw; right: 30cqw; width: 19cqw; translate: 0 0; }
  .os-card { height: 6cqw; }
  .os-card b { font-size: 3cqw; }
  .gate-bar i { width: 9cqw; height: 1.6cqw; margin-top: 1.4cqw; }
  .sf-sill { height: 2.4cqw; }
  .sill-bell { width: 11cqw; right: 8cqw; }
  .sf-bulk { height: 11cqw; }
  .plate { width: 58cqw; padding: 1cqw 2cqw .9cqw; }

  .hero { padding-top: calc(var(--head-h) + 16px); }
  .h1 { font-size: 29px; }
  .h-sub { margin-top: 12px; font-size: 15.5px; line-height: 1.45; }
  .h-ctas { gap: 8px; margin-top: 18px; }
  .h-ctas .btn { min-height: 46px; padding: 0 13px; font-size: 15px; }
  .sf-ours .sf-front { grid-template-columns: minmax(0, 1fr); }
  .sf-ours .open-sign { display: none; }
  .sf-ours .valance { font-size: 2.55cqw; letter-spacing: .14em; }
  .sf-ours .sf-awning { --val-h: 5.2cqw; }
  .sf-ours .sf-bulk { height: 10cqw; padding: 2cqw 4cqw; }
  .h-shop { margin: 22px calc(var(--gut) * -1) 0; }
  .sf-ours { padding: 0 1.8cqw; }
  .sf-ours .sf-signrow { padding-top: 2cqw; }
  .sf-ours .sf-sign { height: 9.4cqw; }
  .sf-ours .sf-awning { --aw-h: 5.4cqw; }
  .shopwin { padding: 22px 0 16px; }
  .sw-rod { top: 8px; left: 12px; right: 12px; }
  .sw-rod::before, .sw-rod::after { height: 10px; }
  .signs { --sw: 96%; --gap: 9px; --drop: 12px; --b: 10px; }
  .sign { min-height: 44px; gap: 9px; padding-right: 4px; }
  .sign-ic { width: 29px; height: 29px; }
  .sign-t { font-size: 13.5px; letter-spacing: -.026em; }
  .sign-go { width: 12px; }
  .sf-cap { justify-content: flex-start; text-align: left; }

  .what-head .say, .found-lines, .say, .prices-also { font-size: 17px; }
  .quote .q-row { padding: 16px; }
  .quote .q-bar { padding: 22px 18px; }
  .rig { transform: scale(.78); margin-bottom: -80px; }

  .ct-desk { --obj: 112px; --top: 22px; --front: 118px; margin-top: 92px; }
  .ct-desk::before { left: -24px; right: -24px; }
  .ct-items { gap: 4px; }
  .ct-bell { --w: 94px; }
  .ct-phone { --w: 124px; }
  .ct-mic { --w: 62px; }
  .ct-obj { margin-bottom: -6px; }
  .ct-item::after { left: 3%; right: 3%; top: calc(var(--obj) + var(--top) + 10px); bottom: 10px; }
  .ct-plate { max-width: 94%; padding: 8px 6px; font-size: 13px; line-height: 1.2; }
  .ct-plate .sl-chip-ai { font-size: 9.5px; }
  .ct-soon { font-size: 8.5px; padding: 3px 4px 2px; letter-spacing: .06em; }
  .ct-note { right: 0; max-width: 220px; font-size: 13.5px; }
  .ct-slip { padding: 20px 18px; }
  .ct-slip .call-form { grid-template-columns: minmax(0, 1fr); }

  .bd-body { padding: 20px 20px 24px; }
  .bd-n { font-size: 22px; }

  .phone-sp { width: 270px; height: 552px; }
  .rules-list li { padding: 14px 2px; }
  .s1, .s3 { left: 18px; } .s2, .s4 { right: 18px; } .s1, .s2 { top: 18px; } .s3, .s4 { bottom: 18px; }
}

@media (max-width: 430px) {
  /* the whole board is the link; on a phone the arrow gives its room to the longest name */
  .sign-go { display: none; }
}