/* Front Counter AI: the redesigned inner pages (2026-10-08): the nine service pages, /sample/, /contact/,
   /talk/ and /about/. These pages load this file INSTEAD of site.css (the other inner pages still use site.css).
   Generated markup: _tools/build_pages.py. Loads after chrome.css (tokens, gold leaf, buttons, header,
   footer) and shops.css (the drawn world lifted from the home page).
   Every page is a room of the same storefront (plan: _panel/design/PLAN.md): the street, then the
   brick wall with an enamel board, then the back office with things hung on a brass rail, then the
   green counter with the one next step. The type scale, the weights and the 1320 px measure are the
   home page's. Nothing moves but the hero shop opening once and a small lift under the pointer. */

:root {
  --sec-y: max(60px, min(6.4vw, 104px));
  --room: 1240px;
  --text: #40372f;
}

.inner .gold { -webkit-text-fill-color: transparent; }
.wrap { width: 100%; max-width: calc(var(--room) + var(--gut) * 2); margin: 0 auto; padding: 0 var(--gut); }
.sec-h { font: 800 var(--t-xl)/1.06 var(--disp); letter-spacing: -.035em; text-wrap: balance; }
.say { margin-top: 18px; font-size: var(--t-m); line-height: 1.6; color: var(--text); text-wrap: pretty; }
.sec-head { max-width: 900px; margin: 0 auto; text-align: center; }
.sec-head .say { max-width: 32em; margin-left: auto; margin-right: auto; }
.arr { width: 18px; height: 18px; flex: none; }
.more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; color: var(--brick-dk); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: rgba(143, 63, 42, .35); text-underline-offset: 5px; }
.more:hover { text-decoration-color: currentColor; }
.btn .sl-chip-ai { vertical-align: 1px; }
.btn-line .sl-chip-ai { background: var(--brick); color: var(--paper); }
.btn-brick .sl-chip-ai { background: var(--glow); color: var(--ink); }
.btn-glow { background: var(--glow); border-color: var(--glow); color: var(--ink); box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .65); }
.btn-glow:hover { background: #fff; border-color: #fff; }
.btn-glow .sl-chip-ai { background: var(--ink); color: var(--glow); }
.btn-xl { min-height: 66px; padding: 0 34px; font-size: 19px; box-shadow: 0 18px 34px -18px rgba(110, 48, 32, .85); }
.btn-sam { cursor: pointer; }
.btn[disabled] { opacity: .6; cursor: default; transform: none; }

/* =====================================================================================
   THE STREET HERO: the headline, one sentence and the buttons beside one drawn thing
   ===================================================================================== */
.street { --st-top: max(26px, min(3.6vw, 52px)); }
.street-in {
  --scene-w: min(440px, 33vw);
  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(5.4vw, 88px)); align-items: end;
}
.st-copy { align-self: center; min-width: 0; padding: 6px 0 max(44px, min(4.6vw, 72px)); }
.st-h { max-width: 12.5em; font: 800 var(--t-xl)/1.05 var(--disp); letter-spacing: -.04em; color: var(--ink); text-wrap: balance; }
.st-h-long { font-size: max(28px, min(3.1vw, 43px)); line-height: 1.08; }
.st-sub { margin-top: 20px; max-width: 30em; font-size: max(17px, min(1.35vw, 19.5px)); line-height: 1.55; color: var(--text); text-wrap: pretty; }
.st-sub a { font-weight: 700; color: var(--ink); text-underline-offset: 4px; }
.st-note { margin-top: 12px; font-weight: 700; color: var(--text); }
.st-ctas { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.st-more { margin-top: 12px; }
.st-ask { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font: 700 16px/1.3 var(--body); text-decoration: underline; text-decoration-color: rgba(27, 26, 23, .4); text-decoration-thickness: 2px; text-underline-offset: 5px; cursor: pointer; }
.st-ask:hover { color: var(--brick-dk); text-decoration-color: currentColor; }
.st-ask .sl-chip-ai { text-decoration: none; }
.st-scene { position: relative; min-width: 0; }
.st-scene::before { content: ""; position: absolute; z-index: -1; left: -22%; right: -22%; top: 12%; bottom: 0; pointer-events: none; background: radial-gradient(50% 50% at 50% 56%, rgba(255, 238, 190, .75), rgba(255, 222, 160, .24) 52%, transparent 74%); }
.st-front { --front-w: 100%; }
.street-wide .street-in { --scene-w: min(560px, 42vw); }
[data-pay][hidden], [data-pay-msg][hidden] { display: none !important; }
.pay-msg { flex-basis: 100%; margin: 2px 0 0; font-weight: 600; color: var(--text); }
.pay-msg.is-err { color: var(--brick-dk); }

/* the page whose hero is the whole street: the headline over five shops on the sidewalk */
.street-row { padding-left: 0; padding-right: 0; padding-bottom: 0; }
.street-row::after { display: none; }
.street-row .sun { left: 79%; top: calc(var(--head-h) + 236px); bottom: auto; }
.row-head { position: relative; z-index: 1; max-width: 1060px; margin: 0 auto; padding: 0 var(--gut); text-align: center; }
.row-head .st-h { max-width: none; }
.row-head .st-sub { max-width: 35em; margin-left: auto; margin-right: auto; }
.row-head .st-ctas { justify-content: center; margin-top: 26px; }
.street-row .row-wrap { margin-top: max(8px, min(1.6vw, 24px)); }
.row-note { margin: 0; padding: 4px var(--gut) max(36px, min(3.6vw, 56px)); background: var(--sand); text-align: center; font-size: 16px; line-height: 1.5; font-weight: 600; color: var(--text); text-wrap: balance; }
.row-note a { font-weight: 700; color: var(--ink); text-underline-offset: 4px; white-space: nowrap; }
.hear { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center; align-items: center; margin-top: 10px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.hear a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.hear a:hover { color: var(--brick-dk); }
.offer-s .o-price { font-size: min(30px, 16cqw); }

/* a short street for the pages that are read, not looked at */
.street-read { --st-top: max(26px, min(3.4vw, 48px)); }
.street-read .street-in { display: block; max-width: 1040px; }
.street-read .st-copy { padding-bottom: max(40px, min(4vw, 60px)); }
.street-read .backrow { height: 120px; opacity: .8; }
.street-read .sun { left: 74%; bottom: calc(var(--walk) + 40px); }

/* =====================================================================================
   THE BRICK WALL: what is included, on the enamel sign, a gold check on every line
   ===================================================================================== */
.wall-in { display: grid; gap: 28px; justify-items: center; max-width: var(--max); margin: 0 auto; }
.wall-2 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
.enamel-inc { width: 100%; max-width: 1040px; margin: 0; padding-left: max(24px, min(4.6vw, 68px)); padding-right: max(24px, min(4.6vw, 68px)); }
.ticks { --rows: 4; margin-top: max(24px, min(2.8vw, 36px)); display: grid; grid-auto-flow: column; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), auto); column-gap: max(24px, min(3.4vw, 52px)); border-bottom: 1.5px dashed rgba(217, 164, 65, .42); }
.ticks li { position: relative; display: flex; align-items: center; min-height: 62px; padding: 13px 4px 13px 46px; border-top: 1.5px dashed rgba(217, 164, 65, .42); color: var(--linen); font: 600 17.5px/1.4 var(--body); text-wrap: pretty; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: var(--tick) center / 15px no-repeat, var(--brass); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 0 rgba(0, 0, 0, .35); }
.ticks-1 { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
.inc-foot { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; color: var(--glow); font: 800 14px/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.inc-foot .plate { letter-spacing: .02em; text-transform: none; font-size: 15px; }

/* the black board: the rules, the add-ons, the payback line */
.board-h { font: 800 max(22px, min(2.3vw, 31px))/1.14 var(--disp); letter-spacing: -.03em; text-align: center; text-wrap: balance; }
.board-h .gold { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)); }
.board-say { margin: 12px auto 0; max-width: 30em; text-align: center; font: 500 16.5px/1.5 var(--body); color: rgba(243, 227, 195, .88); text-wrap: balance; }
.rules-board { width: 100%; padding: 44px max(22px, min(2.6vw, 36px)) 34px; }
.rules-board .screw { width: 12px; height: 12px; }
.rules-board .screw::after { left: 2px; right: 2px; top: 5px; }
.rules-board .s1 { left: 20px; top: 20px; } .rules-board .s2 { right: 20px; top: 20px; } .rules-board .s3 { left: 20px; bottom: 20px; } .rules-board .s4 { right: 20px; bottom: 20px; }
.rules-list { margin-top: 22px; }
.rules-list li { padding: 14px 2px; border-top: 1.5px dashed rgba(217, 164, 65, .4); color: var(--linen); font: 600 16.5px/1.45 var(--body); text-align: center; text-wrap: balance; }
.rules-list li:last-child { border-bottom: 1.5px dashed rgba(217, 164, 65, .4); }

/* =====================================================================================
   THE BACK OFFICE: cards on a brass rail, dated stops, papers pinned up, rows that open
   ===================================================================================== */
.room { padding: var(--sec-y) var(--gut); }
.room-in { max-width: var(--room); margin: 0 auto; }
.room-in > * + * { margin-top: max(40px, min(4.4vw, 64px)); }

.hung { --drop: 34px; --n: 3; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--drop) max(18px, min(2.2vw, 30px)); align-items: start; padding-top: calc(var(--drop) + 12px); margin-left: auto; margin-right: auto; }
.hung-1 { --n: 1; max-width: 780px; }
.hung-2, .hung-4 { --n: 2; max-width: 1060px; }
.hung::before { content: ""; position: absolute; left: -14px; right: -14px; top: 0; height: 12px; border-radius: 99px; background: linear-gradient(180deg, #fff3cf 0, #e7b955 45%, #8a5f22 100%); box-shadow: 0 5px 6px -1px rgba(27, 26, 23, .32); }
.hung::after { content: ""; position: absolute; left: 2.5%; right: 2.5%; top: -18px; height: 24px; border-radius: 3px; pointer-events: none; background: linear-gradient(90deg, #2a241d, #4e453c 50%, #2a241d) 0 0 / 8px 100% no-repeat, linear-gradient(90deg, #2a241d, #4e453c 50%, #2a241d) 100% 0 / 8px 100% no-repeat; }
.hcard { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: 8px 8px 18px 18px; background: var(--paper); box-shadow: 0 0 0 1px rgba(27, 26, 23, .08), 0 34px 44px -30px rgba(70, 25, 10, .7); }
.hcard::before, .hcard::after { content: ""; position: absolute; bottom: calc(100% - 2px); width: 8px; height: calc(var(--drop) + 8px); background: var(--chain) 0 100% / 8px 12px repeat-y; pointer-events: none; }
.hcard::before { left: calc(13% - 4px); }
.hcard::after { right: calc(13% - 4px); }
.hcard-h { position: relative; display: flex; align-items: center; gap: 14px; min-height: 78px; padding: 16px 22px; border-radius: 8px 8px 0 0; background: var(--enamel); color: var(--glow); font: 800 max(19px, min(1.7vw, 23.5px))/1.16 var(--disp); letter-spacing: -.03em; text-wrap: balance; box-shadow: inset 0 0 0 4px #173d2e, inset 0 0 0 5.5px rgba(217, 164, 65, .78); }
.hcard-h::before, .hcard-h::after { content: ""; position: absolute; top: -6px; width: 13px; height: 13px; 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%); }
.hcard-h::before { left: calc(13% - 6.5px); }
.hcard-h::after { right: calc(13% - 6.5px); }
.hcard:nth-child(even) .hcard-h, .hung-4 .hcard:nth-child(3) .hcard-h { background: radial-gradient(120% 90% at 30% 0, #c96a4a 0, var(--brick) 50%, var(--brick-dk) 100%); color: var(--paper); box-shadow: inset 0 0 0 4px var(--brick-dk), inset 0 0 0 5.5px rgba(255, 227, 163, .72); }
.hung-4 .hcard:nth-child(4) .hcard-h { background: var(--enamel); color: var(--glow); box-shadow: inset 0 0 0 4px #173d2e, inset 0 0 0 5.5px rgba(217, 164, 65, .78); }
.hc-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; 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 2px rgba(184, 134, 46, .9), 0 1px 2px rgba(0, 0, 0, .4); }
.hc-ic svg { width: 56%; height: 56%; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.hcard-b { padding: 22px 24px 26px; }
.hcard-b p { font-size: 17.5px; line-height: 1.6; color: var(--text); text-wrap: pretty; }
.hcard-b p + p { margin-top: 10px; }
.hcard-b .more { margin-top: 6px; }
.hcard-b .card-go { display: inline-flex; align-items: center; gap: 8px; font: 700 18px/1.4 var(--body); color: var(--brick-dk); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: rgba(143, 63, 42, .35); text-underline-offset: 5px; }
.hcard-b .card-go:hover { text-decoration-color: currentColor; }
.detail-list { display: grid; gap: 10px; margin-top: 12px; }
.detail-list li { font-size: 17px; line-height: 1.55; color: var(--text); }
.detail-list li b { color: var(--ink); }

/* a real sequence: plates along a brass rail */
.blk-h { font: 800 var(--t-l)/1.12 var(--disp); letter-spacing: -.03em; text-align: center; text-wrap: balance; }
.blk-say { margin: 12px auto 0; max-width: 34em; text-align: center; font-size: 17.5px; line-height: 1.55; color: var(--text); }
.blk-note { margin: 22px auto 0; max-width: 40em; text-align: center; font-weight: 600; color: var(--ink); }
.stops { --n: 4; position: relative; margin-top: 34px; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0 max(16px, min(2vw, 28px)); }
.stops::before { content: ""; position: absolute; left: 6px; right: 6px; top: 16px; height: 8px; border-radius: 99px; background: linear-gradient(180deg, #fff3cf 0, #e7b955 45%, #8a5f22 100%); box-shadow: 0 3px 4px rgba(27, 26, 23, .25); }
.stops li { position: relative; display: grid; align-content: start; justify-items: start; gap: 16px; min-width: 0; }
.stop-k { min-height: 40px; padding: 8px 16px 7px; border-radius: 6px; font: 800 14.5px/1.1 var(--disp); letter-spacing: -.01em; white-space: nowrap; }
.stop-v { font-size: 17px; line-height: 1.55; color: var(--text); text-wrap: pretty; }
.stop-v b { display: block; color: var(--ink); font-weight: 700; }
.stops-n .stop-k { width: 40px; padding: 0; border-radius: 50%; font-size: 16px; }

/* papers pinned to the wall: an example morning, a sample estimate */
.papers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: max(22px, min(2.6vw, 36px)); align-items: start; max-width: 1080px; margin-left: auto; margin-right: auto; }
.paper { position: relative; display: grid; gap: 12px; align-content: start; padding: 34px max(20px, min(2.4vw, 32px)) 28px; border-radius: 6px; background: var(--paper); box-shadow: 0 0 0 1px rgba(27, 26, 23, .08), 0 34px 44px -30px rgba(70, 25, 10, .7); }
.paper::before { content: ""; position: absolute; 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); }
.paper:nth-child(odd) { rotate: -.7deg; }
.paper:nth-child(even) { rotate: .6deg; }
.paper-h { font: 700 max(19px, min(1.7vw, 23px))/1.2 var(--disp); letter-spacing: -.02em; text-wrap: balance; }
.paper p { font-size: 17px; line-height: 1.55; color: var(--text); }
.stamp { justify-self: start; display: inline-block; padding: 5px 10px 4px; border: 2.5px solid var(--brick); border-radius: 6px; color: var(--brick-dk); font: 800 12px/1.2 var(--body); letter-spacing: .2em; text-transform: uppercase; rotate: -3deg; }
.ex-log { display: grid; }
.ex-log li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1.5px dashed rgba(27, 26, 23, .16); font-size: 17px; line-height: 1.5; color: var(--text); }
.ex-t { font: 800 16px/1.5 var(--disp); color: var(--brick-dk); font-variant-numeric: tabular-nums; }
.paper .ex-note, .paper .ex-intro { font-weight: 600; color: var(--ink); }
.est { background: #fffdf7 repeating-linear-gradient(180deg, transparent 0 31px, rgba(31, 77, 58, .08) 31px 32px); }
.paper .est-biz { font: 800 20px/1.2 var(--disp); letter-spacing: -.02em; color: var(--ink); }
.paper .est-job { margin-top: -4px; font-weight: 600; }
.est-lines { width: 100%; border-collapse: collapse; }
.est-lines th, .est-lines td { padding: 9px 0; border-bottom: 1px dashed rgba(27, 26, 23, .2); font-size: 17px; line-height: 1.4; text-align: left; font-weight: 500; }
.est-lines td { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 14px; }
.est-total th, .est-total td { border-bottom: 0; border-top: 2px solid var(--ink); font-weight: 800; font-size: 19px; color: var(--ink); }
.paper .est-note { font-size: 15.5px; color: var(--ink-3); }

/* the rest, as rows that open */
.folds { max-width: 900px; margin-left: auto; margin-right: auto; border-radius: 16px; background: var(--paper); box-shadow: 0 0 0 1px rgba(27, 26, 23, .08), 0 34px 44px -34px rgba(70, 25, 10, .6); overflow: hidden; }
.fold + .fold { border-top: 1.5px dashed rgba(184, 134, 46, .6); }
.fold summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 70px; padding: 14px max(18px, min(2.2vw, 28px)); cursor: pointer; list-style: none; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary:hover { background: rgba(243, 227, 195, .4); }
.fold summary:focus-visible { outline-offset: -3px; }
.fold-h { font: 700 max(17.5px, min(1.55vw, 21px))/1.25 var(--disp); letter-spacing: -.02em; text-wrap: balance; }
.fold-p { margin-left: auto; flex: none; font: 800 max(17px, min(1.5vw, 20px))/1 var(--disp); letter-spacing: -.02em; color: var(--brick-dk); white-space: nowrap; }
.fold-x { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--brass); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 0 rgba(27, 26, 23, .35); }
.fold-x::before, .fold-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.6px; margin: -1.3px 0 0 -7px; border-radius: 2px; background: var(--ink); transition: rotate .2s var(--ease); }
.fold-x::after { rotate: 90deg; }
.fold[open] .fold-x::after { rotate: 0deg; }
.fold-b { padding: 0 max(18px, min(2.2vw, 28px)) 24px; }
.fold-b p { max-width: 42em; font-size: 17.5px; line-height: 1.62; color: var(--text); text-wrap: pretty; }
.fold-b p + p, .fold-b p + ul, .fold-b ul + p, .fold-b ol + p { margin-top: 12px; }
.fold-b .fold-short { font-weight: 600; color: var(--ink); }
.tl { display: grid; }
.tl li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1.5px dashed rgba(27, 26, 23, .16); font-size: 17px; line-height: 1.5; color: var(--text); }
.tl-k { justify-self: start; }
.works { display: flex; flex-wrap: wrap; gap: 8px; }
.works li { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--linen); border: 1.5px solid rgba(27, 26, 23, .16); font-weight: 700; font-size: 16px; }
.works + p { margin-top: 12px; }
.callout-list { display: grid; margin-top: 10px; }
.callout-list li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 12px 0; border-top: 1.5px dashed rgba(27, 26, 23, .2); font-size: 17px; line-height: 1.45; color: var(--text); }
.callout-list b { font: 800 19px/1.2 var(--disp); color: var(--brick-dk); white-space: nowrap; }
.works-strip { max-width: 900px; margin-left: auto; margin-right: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 22px; align-items: center; padding: 22px max(18px, min(2.2vw, 28px)); border-radius: 16px; background: var(--paper); box-shadow: 0 0 0 1px rgba(27, 26, 23, .08), 0 34px 44px -34px rgba(70, 25, 10, .6); }
.works-h { font: 700 max(17.5px, min(1.55vw, 21px))/1.25 var(--disp); letter-spacing: -.02em; }
.works-strip p { grid-column: 1 / -1; font-size: 16.5px; line-height: 1.55; color: var(--text); }

.terms { max-width: 900px; margin-left: auto; margin-right: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding: 18px 24px; border-radius: 12px; background: var(--linen); border: 1.5px solid rgba(27, 26, 23, .14); }
.terms b { flex: none; font: 800 12px/1.6 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--brick-dk); }
.terms p { flex: 1 1 22em; font-weight: 600; line-height: 1.55; }

.payback { max-width: 900px; margin-left: auto; margin-right: auto; padding: max(30px, min(3.6vw, 48px)) max(24px, min(3.6vw, 52px)); text-align: center; }
.payback-h { font: 800 max(24px, min(2.9vw, 40px))/1.12 var(--disp); letter-spacing: -.03em; }
.payback-h .gold { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .45)); }
.payback p { max-width: 36em; margin: 14px auto 0; font-size: 17px; line-height: 1.6; color: rgba(251, 241, 225, .9); }
.payback .payback-line { font: 700 max(18.5px, min(1.75vw, 23px))/1.45 var(--body); color: var(--glow); text-wrap: balance; }

/* =====================================================================================
   THE AI RECEPTIONIST: the example calls, on a black board
   ===================================================================================== */
.hear-in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr); gap: 20px max(28px, min(5vw, 76px)); align-items: center; }
.hear-in > * + * { margin-top: 0; }
.hear-head .sec-h { font-size: var(--t-l); line-height: 1.1; }
.hear-k { margin-bottom: 10px; font: 800 12px/1.3 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--brick-dk); }
.hear-card { display: grid; gap: 14px; padding: max(22px, min(2.6vw, 32px)); border-radius: 18px; }
.hear-card .hear-audio { width: 100%; }
.hear-live { margin-top: 22px; display: grid; gap: 12px; justify-items: start; }
.hear-live p { font-size: 16.5px; line-height: 1.5; color: var(--text); }
.call-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.call-tabs[hidden] { display: none; }
.call-tab { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid rgba(255, 227, 163, .5); background: transparent; color: var(--cream); font: 700 16px/1 var(--body); cursor: pointer; }
.call-tab:hover { border-color: var(--glow); }
.call-tab[aria-selected="true"] { background: var(--glow); border-color: var(--glow); color: var(--ink); }
.call-tab:focus-visible { outline: 3px solid var(--glow); outline-offset: 2px; }
.call-panel { display: grid; gap: 12px; }
.call-panel[hidden] { display: none; }
.call-panel + .call-panel { padding-top: 14px; border-top: 1px solid rgba(255, 227, 163, .2); }
.call-k { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.call-k .hear-k { margin: 0; color: var(--glow); }
.call-say { font-size: 17px; line-height: 1.55; color: rgba(251, 241, 225, .92); }
.call-text { color: var(--linen); }
.call-text summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--glow); text-decoration: underline; text-decoration-color: rgba(255, 227, 163, .45); text-underline-offset: 5px; }
.call-text summary:focus-visible { outline-color: var(--glow); }
.call-lines { display: grid; gap: 10px; margin-top: 10px; }
.call-lines li { display: grid; gap: 3px; max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: 17px; line-height: 1.5; }
.call-lines b { font: 800 12px/1.3 var(--body); letter-spacing: .1em; text-transform: uppercase; }
.call-lines .cl-ai { justify-self: start; background: var(--green); color: var(--cream); border-bottom-left-radius: 4px; }
.call-lines .cl-ai b { color: var(--glow); }
.call-lines .cl-caller { justify-self: end; background: var(--paper); color: var(--ink); border-bottom-right-radius: 4px; }
.call-lines .cl-caller b { color: var(--brick-dk); }

/* =====================================================================================
   /services/ and /prices/: what follows the street
   ===================================================================================== */
.start-go { margin-top: 2px; }
.room-prices .room-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: max(28px, min(3.6vw, 52px)); align-items: start; }
.room-prices .room-in > * + * { margin-top: 0; }
.terms-col .sec-h { font-size: var(--t-l); }
.terms-col .say { max-width: 30em; }
.terms-col .folds { margin-top: 26px; }
.term-rows { display: grid; }
.term-rows > div { padding: 14px 0; border-top: 1.5px dashed rgba(27, 26, 23, .16); }
.term-rows > div:first-child { border-top: 0; padding-top: 0; }
.term-rows dt { font: 700 16.5px/1.3 var(--disp); letter-spacing: -.02em; }
.term-rows dt a { color: var(--ink); text-underline-offset: 4px; text-decoration-color: rgba(217, 164, 65, .9); text-decoration-thickness: 2px; }
.term-rows dd { margin: 5px 0 0; font-size: 16px; line-height: 1.55; color: var(--text); }
.addons-board { padding: max(40px, min(4vw, 56px)) max(22px, min(3vw, 44px)) max(30px, min(3vw, 44px)); border-radius: 16px; }
.addons { width: 100%; margin-top: 24px; border-collapse: collapse; }
.addons th, .addons td { padding: 14px 0; border-top: 1.5px dashed rgba(217, 164, 65, .36); text-align: left; font-size: 17px; line-height: 1.4; vertical-align: top; }
.addons tbody th { font-weight: 600; color: var(--cream); text-wrap: pretty; }
.addons td { padding-left: 18px; text-align: right; font: 800 16.5px/1.35 var(--disp); letter-spacing: -.02em; color: var(--glow); }
.addons tbody tr:last-child > * { border-bottom: 1.5px dashed rgba(217, 164, 65, .36); }
.quote-card { padding: max(18px, min(3vw, 36px)); border-radius: 22px; background: var(--paper); box-shadow: 0 0 0 1px rgba(27, 26, 23, .07), 0 34px 50px -38px rgba(60, 20, 10, .55); }

/* =====================================================================================
   /agents/: the back office is the page. Shelf jobs hang a paper tag; desk jobs are
   written on the drawer fronts.
   ===================================================================================== */
.room-head { position: relative; z-index: 1; max-width: 940px; margin: 0 auto; text-align: center; }
.room-head .st-h { max-width: none; }
.room-head .st-sub { max-width: 34em; margin-left: auto; margin-right: auto; }
.room-head .st-ctas { justify-content: center; }
.room-jobs { padding: calc(var(--head-h) + max(26px, min(3.6vw, 52px))) var(--gut) 96px; }
.jobs-stage { position: relative; max-width: 1220px; margin: max(40px, min(4.4vw, 64px)) auto 0; }
.jobs-plaque { display: flex; justify-content: center; margin-bottom: max(34px, min(3.6vw, 48px)); }
.jobs-plaque .plate { min-height: 44px; padding: 9px 22px 8px; border-radius: 6px; font: 800 max(15.5px, min(1.4vw, 19px))/1.15 var(--disp); letter-spacing: -.02em; }
.of-room { position: relative; }
.of-room::after { content: ""; position: absolute; z-index: -1; left: 50%; top: 100%; width: 300vw; height: 400px; 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); }
.jobs { position: relative; display: grid; }
.jobs-shelf { --obj: 136px; --top: 32px; margin-left: 36%; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 18px; }
.jobs-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); }
.jobs-desk { --obj: 176px; --top: 26px; margin-top: 60px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.jobs-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); }
.jobs-desk::after { content: ""; position: absolute; z-index: 0; left: -12px; right: -12px; top: calc(var(--obj) + var(--top)); bottom: 0; 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); }
.job { position: relative; z-index: 2; display: grid; grid-template-rows: var(--obj) var(--top) auto; justify-items: center; min-width: 0; }
.job-obj { grid-row: 1; align-self: end; position: relative; display: block; width: min(var(--w), 94%); margin-bottom: -5px; transition: transform .32s var(--ease); }
.job-obj svg { width: 100%; height: auto; overflow: visible; }
.job:hover .job-obj { transform: translateY(-10px); }
.job-card { grid-row: 3; position: relative; align-self: stretch; text-align: center; }
.job-n { font-size: 14.5px; }
.job-w { margin-top: 12px; font: 800 11.5px/1.4 var(--body); letter-spacing: .13em; text-transform: uppercase; color: var(--brick-dk); text-wrap: balance; }
.job-d { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--text); text-wrap: pretty; }
.jobs-shelf .job-card { margin-top: 30px; padding: 24px 16px 20px; border-radius: 6px 6px 14px 14px; background: var(--paper); box-shadow: 0 0 0 1px rgba(27, 26, 23, .08), 0 26px 34px -24px rgba(70, 25, 10, .7); transform-origin: 50% -30px; }
.jobs-shelf .job-card::before { content: ""; position: absolute; left: 50%; bottom: calc(100% - 12px); width: 2px; height: 42px; margin-left: -1px; background: #4a3d2f; }
.jobs-shelf .job-card::after { content: ""; position: absolute; left: 50%; top: 6px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: radial-gradient(circle closest-side, #2a1d10 0 34%, #fff1c4 40%, #e2b04c 58%, #8a5f22 86%, rgba(138, 95, 34, 0) 100%); }
.jobs-shelf .job:nth-child(odd) .job-card { rotate: -1.1deg; }
.jobs-shelf .job:nth-child(even) .job-card { rotate: .9deg; }
.jobs-desk .job-card { margin: 16px 9px 22px; padding: 20px 14px 36px; border: 1.5px solid rgba(217, 164, 65, .5); border-radius: 4px; }
.jobs-desk .job-card::after { content: ""; position: absolute; left: 50%; bottom: 13px; 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); }
.jobs-desk .job-w { color: var(--gold); }
.jobs-desk .job-d { color: rgba(251, 241, 225, .93); }

/* where you get them: three signs on chains, as in our own window */
.room-from .sec-head .sec-h { font-size: var(--t-l); }
.signs-row { --gap: 22px; --sw: 100%; --drop: 30px; --b: 12px; flex-direction: row; align-items: flex-start; max-width: 1080px; margin: 0 auto; padding-top: calc(var(--drop) + 10px); filter: drop-shadow(0 6px 5px rgba(40, 14, 4, .3)); }
.signs-row::before { z-index: 0; top: 0; bottom: auto; left: -12px; right: -12px; height: 10px; border-radius: 99px; background: linear-gradient(180deg, #fff3cf 0, #e7b955 45%, #8a5f22 100%); }
.signs-row .sign { flex: 1 1 0; width: auto; min-height: 66px; gap: 12px; padding-right: 8px; }
.signs-row .sign::before, .signs-row .sign::after { top: calc(var(--b) * -1 - var(--drop) - 4px); width: 8px; height: calc(var(--drop) + 6px); border-radius: 0; background: var(--chain) 0 100% / 8px 12px repeat-y; }
.signs-row .sign::before { left: 12%; }
.signs-row .sign::after { right: 12%; }
.signs-row .sign-ic { width: 38px; height: 38px; }
.signs-row .sign-t { font-size: max(15px, min(1.3vw, 18px)); }
.signs-row .sign-p { flex: none; font: 800 15px/1.2 var(--body); color: var(--linen); white-space: nowrap; }
.signs-row .sign-go { width: 15px; }

/* =====================================================================================
   /sample/: the form beside the phone in a hand
   ===================================================================================== */
.street-sample { padding-bottom: 0; }
.street-sample::after { display: none; }
.street-sample .street-in { --scene-w: min(430px, 34vw); align-items: end; }
.street-sample .st-copy { padding-bottom: max(48px, min(5vw, 80px)); }
.st-hand { align-self: end; }
.st-hand::before { display: none; }
.st-hand .hand-stage { align-items: end; }
.st-hand .hand { margin-bottom: -7%; }
.sp-cap { position: absolute; z-index: 3; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; }
.sp-cap span { padding: 6px 12px 5px; border-radius: 999px; background: rgba(27, 26, 23, .82); color: var(--glow); font-size: 13.5px; font-weight: 700; }
.slip { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px; padding: 26px; border-radius: 16px; background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px rgba(27, 26, 23, .06), 0 30px 44px -30px rgba(70, 25, 10, .7); }
.slip-form { max-width: 560px; margin-top: 26px; }
.slip-k { display: flex; align-items: center; gap: 8px; font: 800 12px/1.2 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--brick-dk); }
.slip-h { font: 800 22px/1.15 var(--disp); letter-spacing: -.02em; text-wrap: balance; }
.slip-line { line-height: 1.55; color: var(--text); }
.slip .btn { justify-self: start; max-width: 100%; margin-top: 4px; padding-top: 10px; padding-bottom: 10px; white-space: normal; line-height: 1.25; text-align: left; }
.slip .call-title { font-size: 22px; }
.slip .lead-f input, .slip .lead-f select, .slip .call-form input { background: var(--cream); }
.slip .lead-acts .sl-btn, .slip .call-form .sl-btn { background: var(--ink); border-color: var(--ink); color: var(--glow); }
.slip .lead-done { background: var(--green); color: var(--cream); }
.slip .lead-done .sl-btn { background: var(--glow); border-color: var(--glow); color: var(--ink); }
.slip .call-line { font-size: 17px; color: var(--text); }
.slip .call-fine, .slip .lead-fine { font-size: 15px; }
.steps-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; }

/* =====================================================================================
   /contact/ and /talk/: the counter room
   ===================================================================================== */
.room-counter { padding: calc(var(--head-h) + max(26px, min(3.6vw, 52px))) var(--gut) max(60px, min(6vw, 96px)); }
.room-counter .ct-desk { margin-top: max(30px, min(3.4vw, 50px)); }
a.ct-item { color: inherit; }
.ct-under { position: relative; z-index: 3; max-width: 1060px; margin: 34px auto 0; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 24px; align-items: start; }
.slip-call { scroll-margin-top: calc(var(--head-h) + 24px); }
.reach-card { border-radius: 16px; overflow: hidden; background: var(--paper); box-shadow: 0 0 0 1px rgba(27, 26, 23, .06), 0 30px 44px -30px rgba(70, 25, 10, .7); }
.tel-big a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 20px 26px 18px; background: var(--ink); color: var(--glow); font: 800 max(23px, min(2.3vw, 31px))/1.1 var(--disp); letter-spacing: -.02em; text-decoration: none; }
.tel-big a:hover { background: #2b2925; }
.tel-big a:focus-visible { outline-offset: -4px; outline-color: var(--glow); }
.tel-big span { font: 800 12.5px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 227, 163, .78); }
.reach-in { display: grid; gap: 16px; padding: 22px 26px 26px; }
.reach-mail { font-size: 17.5px; line-height: 1.5; color: var(--text); }
.reach-mail a { font-weight: 700; color: var(--brick-dk); text-decoration-thickness: 2px; text-underline-offset: 4px; overflow-wrap: anywhere; }
.reach { display: grid; gap: 14px; }
.reach > div { padding-top: 14px; border-top: 1.5px dashed rgba(184, 134, 46, .55); }
.reach dt { font: 800 11.5px/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.reach dd { margin: 4px 0 0; font-size: 17px; font-weight: 600; line-height: 1.5; }

.room-talk { min-height: min(100svh, 900px); padding: calc(var(--head-h) + max(22px, min(3vw, 44px))) var(--gut) 0; display: grid; grid-template-rows: 1fr auto; }
.talk-in { position: relative; z-index: 3; align-self: center; display: grid; justify-items: center; text-align: center; padding-bottom: max(22px, min(2.6vw, 36px)); }
.talk-in .st-h { max-width: 11em; font-size: max(36px, min(5.2vw, 74px)); }
.talk-in .st-sub { max-width: 30em; }
.talk-btn { margin-top: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; width: min(100%, 640px); min-height: 118px; padding: 0 34px; border: 0; border-radius: 999px; background: var(--brick); color: var(--paper); font: 800 max(26px, min(3.6vw, 38px))/1.1 var(--body); letter-spacing: -.01em; cursor: pointer; box-shadow: 0 0 0 5px var(--cream), 0 0 0 8px var(--gold), 0 28px 46px -22px rgba(110, 48, 32, .9); transition: transform .16s ease, background .16s ease; }
.talk-btn:hover { background: var(--brick-dk); transform: translateY(-2px); }
.talk-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 10px; }
.talk-mic { display: grid; place-items: center; flex: none; width: 60px; height: 60px; border-radius: 50%; background: var(--glow); color: var(--ink); }
.talk-mic svg { width: 32px; height: 32px; }
.talk-btn .sl-chip-ai { flex: none; padding: 4px 9px; font-size: 14px; background: var(--glow); color: var(--ink); }
.talk-alts { margin-top: 26px; display: grid; justify-items: center; gap: 2px; }
.talk-alt { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; min-height: 50px; padding: 6px 14px; border: 0; background: none; color: var(--text); font: 600 18px/1.35 var(--body); text-align: center; text-decoration: none; cursor: pointer; }
.talk-alt b { color: var(--brick-dk); font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: rgba(143, 63, 42, .4); text-underline-offset: 5px; }
.talk-alt:hover b { text-decoration-color: currentColor; }
.pg-talk .sam-fab { display: none; }
.ct-desk-show { --obj: 170px; --front: 66px; width: 100%; margin: 0 auto; pointer-events: none; }
.ct-desk-show .ct-item { cursor: default; }
.ct-desk-show .ct-item::after { display: none; }
.ct-desk-show .ct-bell { --w: 150px; }
.ct-desk-show .ct-phone { --w: 200px; }
.ct-desk-show .ct-mic { --w: 104px; }

/* =====================================================================================
   /google-check/: the lookup beside a storefront that takes the visitor's name
   ===================================================================================== */
.street-check .street-in { --scene-w: min(520px, 39vw); }
.street-check .st-copy { padding-bottom: max(36px, min(4vw, 60px)); }
.slip-check { max-width: 600px; margin-top: 26px; }
.st-ctas-after { margin-top: 22px; }
.starwin { position: relative; isolation: isolate; height: 100%; min-height: 34cqw; display: grid; place-items: center; align-content: center; gap: 2cqw; padding: 5cqw 3cqw; overflow: hidden; border-radius: 3px; background: linear-gradient(180deg, #fff3d6 0, #ffe3a3 52%, #f3bb62 100%); box-shadow: inset 0 0 0 1.5px rgba(27, 26, 23, .7); }
.starwin::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(70% 56% at 50% 40%, #fffaf0 0, rgba(255, 246, 220, 0) 72%), linear-gradient(112deg, transparent 8%, rgba(255, 250, 238, .5) 15%, transparent 24%, transparent 72%, rgba(255, 250, 238, .34) 77%, transparent 83%); }
.stars { font: 800 12cqw/1 var(--disp); letter-spacing: .04em; white-space: nowrap; }
.star-glass { position: absolute; right: 7cqw; bottom: 3cqw; width: 30cqw; height: auto; overflow: visible; rotate: -8deg; filter: drop-shadow(0 1.4cqw 1.2cqw rgba(40, 14, 4, .35)); }
.sf-visitor .sf-bulk { height: 6.2cqw; }

/* =====================================================================================
   /about/: our storefront, the founder on the office wall, the bell on the counter
   ===================================================================================== */
.street-about .street-in { --scene-w: min(540px, 40vw); }
.founder { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: max(32px, min(5vw, 80px)); align-items: center; max-width: 1120px; }
.founder > * + * { margin-top: 0; }
.founder-fig { position: relative; margin: 0; padding-top: 46px; }
.founder-fig::before { content: ""; position: absolute; left: 50%; top: 0; width: 46%; height: 60px; translate: -50% 0; border: 2px solid #4a3d2f; border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; clip-path: polygon(0 0, 100% 0, 100% 78%, 0 78%); }
.founder-fig::after { content: ""; position: absolute; left: 50%; top: -7px; width: 16px; height: 16px; 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); }
.frame { position: relative; display: block; padding: 14px; border-radius: 6px; background: linear-gradient(135deg, #f6dc8a 0, #d9a441 30%, #9a6a26 52%, #e7b955 74%, #b8862e 100%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), inset 0 0 0 11px rgba(90, 58, 16, .28), 0 34px 44px -26px rgba(70, 25, 10, .8); rotate: -1.2deg; }
.frame .tm-photo { display: block; width: 100%; height: auto; border-radius: 2px; background: var(--paper); box-shadow: 0 0 0 2px rgba(27, 26, 23, .55); }
.founder-slot[hidden] { display: none; }
.founder-cap { position: relative; z-index: 1; width: max-content; max-width: 92%; margin: -14px auto 0; padding: 8px 16px 7px; border-radius: 4px; background: var(--brass); color: var(--ink); font: 800 14px/1.3 var(--body); text-align: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 3px 0 rgba(27, 26, 23, .35); }
.founder-words .sec-h { margin-bottom: 20px; }
.founder-words p { max-width: 36em; font-size: max(17.5px, min(1.4vw, 19.5px)); line-height: 1.68; color: var(--text); text-wrap: pretty; }
.founder-acts { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.founder-acts .book-btn { width: auto; flex: 0 1 auto; }

.room-name { padding: var(--sec-y) var(--gut) 0; }
.name-in { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; text-align: center; }
.name-say { margin: 20px auto 0; max-width: 30em; font: 600 max(19px, min(1.8vw, 25px))/1.5 var(--body); color: var(--ink); text-wrap: balance; }
.ct-desk-one { --obj: 150px; --front: 58px; max-width: 760px; margin-top: 18px; pointer-events: none; }
.ct-desk-one .ct-items { grid-template-columns: minmax(0, 1fr); }
.ct-desk-one .ct-item { cursor: default; }
.ct-desk-one .ct-item::after { display: none; }
.ct-desk-one .ct-bell { --w: 150px; }

.room-who .room-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: max(32px, min(5vw, 80px)); align-items: start; }
.room-who .room-in > * + * { margin-top: 0; }
.who-card { position: relative; border-radius: 16px; background: var(--paper); box-shadow: 0 0 0 1px rgba(27, 26, 23, .08), 0 34px 44px -30px rgba(70, 25, 10, .7); }
.who-card .of-pin { top: -10px; }
.who-h { padding: 26px 28px 20px; border-radius: 16px 16px 0 0; background: radial-gradient(120% 90% at 30% 0, #c96a4a 0, var(--brick) 50%, var(--brick-dk) 100%); color: var(--paper); font: 800 max(21px, min(2vw, 27px))/1.15 var(--disp); letter-spacing: -.03em; text-align: center; text-wrap: balance; }
.who { display: grid; padding: 8px 28px 22px; }
.who > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 4px 18px; padding: 14px 0; border-bottom: 1.5px dashed rgba(184, 134, 46, .55); }
.who > div:last-child { border-bottom: 0; }
.who dt { font: 800 11.5px/1.7 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.who dd { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink); }
.who a { font-weight: 700; color: var(--brick-dk); overflow-wrap: anywhere; }
.own .sec-h { font-size: var(--t-l); line-height: 1.1; }
.own p { margin-top: 18px; max-width: 34em; font-size: 18px; line-height: 1.66; color: var(--text); text-wrap: pretty; }
.own p:last-child { margin-top: 10px; }
.enamel-wide { max-width: 940px; }

/* =====================================================================================
   /terms/ and /privacy/: one calm column on paper, a contents list beside it
   ===================================================================================== */
.room-read { padding-top: max(40px, min(4.4vw, 68px)); }
.read-in { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: max(28px, min(4vw, 60px)); align-items: start; }
.read-toc { position: sticky; top: calc(var(--head-h) + 28px); }
.toc-k { margin-bottom: 10px; font: 800 12px/1.3 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--brick-dk); }
.read-toc ol { display: grid; border-left: 2px solid rgba(184, 134, 46, .6); }
.read-toc a { display: block; padding: 7px 0 7px 16px; font-size: 15.5px; font-weight: 600; line-height: 1.35; color: var(--text); text-decoration: none; }
.read-toc a:hover { color: var(--brick-dk); text-decoration: underline; text-underline-offset: 3px; }
.read { position: relative; padding: max(28px, min(4.4vw, 60px)) max(22px, min(4.4vw, 64px)); border-radius: 8px; background: var(--paper); box-shadow: 0 0 0 1px rgba(27, 26, 23, .07), 0 34px 50px -38px rgba(60, 20, 10, .55); }
.read::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px; border-radius: 8px 8px 0 0; background: repeating-linear-gradient(90deg, var(--green) 0 18px, var(--linen) 18px 36px); }
.read-block { padding: 30px 0; border-top: 1.5px dashed rgba(217, 164, 65, .7); scroll-margin-top: calc(var(--head-h) + 20px); }
.read-block:first-child { border-top: 0; padding-top: 8px; }
.read-block:last-child { padding-bottom: 4px; }
.read-block[hidden] { display: none; }
.read-h { font: 700 max(20px, min(1.8vw, 24px))/1.25 var(--disp); letter-spacing: -.02em; text-wrap: balance; }
.read-block p, .read-list li { margin-top: 12px; max-width: 36em; font-size: 18px; line-height: 1.7; color: var(--text); text-wrap: pretty; }
.read-list li { position: relative; margin-top: 8px; padding-left: 24px; }
.read-list li::before { content: ""; position: absolute; left: 2px; top: .66em; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
.read a { font-weight: 700; color: var(--brick-dk); text-underline-offset: 3px; }
.read a[href^="mailto:"] { overflow-wrap: anywhere; }

/* the page that is not there, and the page after a payment */
.links { margin-top: 22px; max-width: 520px; display: grid; }
.links a { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; border-bottom: 1.5px dashed rgba(27, 26, 23, .3); font: 700 max(17px, min(1.5vw, 20px))/1.3 var(--disp); letter-spacing: -.01em; text-decoration: none; }
.links a:hover { color: var(--brick-dk); }
.links .arr { color: var(--brick-dk); }
.street-shut { --g: 0; }
.thanks-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }

/* =====================================================================================
   THE COUNTER: the one next step. A slip on the green counter, Sam beside it.
   ===================================================================================== */
.next { position: relative; padding: 0 0 var(--sec-y); background: var(--green); color: var(--cream); }
.next::before { content: ""; display: block; height: 22px; margin-bottom: max(48px, min(5.4vw, 80px)); 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); }
.next-in { display: grid; justify-items: start; }
.next-h { font: 800 var(--t-xl)/1.06 var(--disp); letter-spacing: -.035em; text-wrap: balance; }
.next-h .gold { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .4)); }
.next-say { margin-top: 12px; max-width: 40em; font-size: var(--t-m); line-height: 1.55; color: rgba(251, 241, 225, .86); }
.next-row { width: 100%; margin-top: 30px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.next-one { width: 100%; }
.slip-one { gap: 14px; padding: max(22px, min(3vw, 34px)); }
.slip-one .slip-h, .slip-one .call-title { font-size: max(22px, min(2.2vw, 28px)); }
.next-sam { display: grid; justify-items: start; gap: 12px; padding: 38px 32px 32px; border-radius: 16px; background: var(--inkboard); box-shadow: var(--ink-rim), 0 30px 44px -30px rgba(0, 0, 0, .7); color: var(--cream); }
.next-sam-k { font: 800 12px/1.2 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.next-sam-line { font-size: 17px; line-height: 1.55; color: rgba(251, 241, 225, .9); text-wrap: pretty; }
.next-sam .btn { max-width: 100%; margin-top: 6px; padding-top: 10px; padding-bottom: 10px; white-space: normal; line-height: 1.25; text-align: left; }
.next-sam .btn:focus-visible { outline-color: var(--glow); }
.next-in > .next-sam { width: 100%; max-width: 760px; margin-top: 24px; }
.next-talk { width: 100%; max-width: 760px; margin-top: 18px; }
.next-talk summary { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 48px; padding: 4px 0; cursor: pointer; list-style: none; font-size: 18px; color: rgba(251, 241, 225, .88); }
.next-talk summary::-webkit-details-marker { display: none; }
.next-talk summary b { color: var(--glow); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: rgba(255, 227, 163, .45); text-underline-offset: 5px; }
.next-talk summary::after { content: ""; width: 9px; height: 9px; margin-left: 4px; border-right: 2.5px solid var(--glow); border-bottom: 2.5px solid var(--glow); rotate: 45deg; translate: 0 -3px; transition: rotate .16s ease; }
.next-talk[open] summary::after { rotate: 225deg; translate: 0 2px; }
.next-talk summary:hover b { text-decoration-color: currentColor; }
.next-talk summary:focus-visible { outline-color: var(--glow); border-radius: 6px; }
.next-talk .slip { margin-top: 10px; }
.next-alt { margin-top: 4px; padding-top: 14px; border-top: 1.5px dashed rgba(27, 26, 23, .18); }
.next-alt summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--brick-dk); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: rgba(143, 63, 42, .35); text-underline-offset: 5px; }
.next-alt[open] summary { margin-bottom: 12px; }
.next-alt .lead-f input, .next-alt .lead-f select { background: var(--cream); }
.next-quiet .next-in > .next-sam { margin-top: 0; margin-bottom: 14px; }
.next-quiet .next-talk { margin-top: 0; }
.next-build .quote-card { width: 100%; max-width: 940px; margin-top: 28px; color: var(--ink); }
.book-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 54px; padding: 10px 22px; border-radius: 999px; border: 2px solid var(--ink); background: rgba(255, 250, 241, .6); color: var(--ink); font: 700 16.5px/1.2 var(--body); text-align: center; text-decoration: none; transition: background .16s ease, color .16s ease; }
.book-btn:hover { background: var(--ink); color: var(--glow); }
.book-btn-dark { border-color: rgba(255, 227, 163, .75); background: transparent; color: var(--glow); }
.book-btn-dark:hover { background: var(--glow); color: var(--ink); }
.book-btn-dark:focus-visible { outline-color: var(--glow); }
.call-book, .next-book { width: 100%; max-width: 760px; margin-top: 10px; }
@media (min-width: 1000px) {
  .next-row { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 24px; }
}

/* =====================================================================================
   the forms and cards the shared scripts draw
   ===================================================================================== */
/* a long footer link wraps and its price follows it (chrome.css sets these links to inline-flex) */
.foot-col a { flex-wrap: wrap; column-gap: 8px; }
.foot-col a span { margin-left: 0; }
.foot-reach a.foot-call, .foot-reach a.foot-mail { min-height: 44px; font: 600 16px/1.45 var(--body); color: var(--cream); text-decoration: underline; text-decoration-color: rgba(251, 241, 225, .35); text-underline-offset: 4px; }
.foot-reach a.foot-call:hover, .foot-reach a.foot-mail:hover { color: var(--glow); }

/* Check your Google listing: the box, then the snapshot card (shared/snapshot.js draws it) */
.chk .lead-f input { background: var(--cream); }
.chk-out { margin-top: 4px; }
.chk-out[hidden], .chk-sample[hidden] { display: none; }
.chk-sample { display: grid; gap: 10px; padding-top: 14px; border-top: 1.5px dashed rgba(27, 26, 23, .18); }
.gs { overflow: hidden; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); color: var(--ink); }
.gs-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 16px 9px; background: linear-gradient(180deg, #f6dc8a, #d9a441 55%, #b8862e); }
.gs-h { font: 800 12.5px/1.2 var(--body); letter-spacing: .15em; text-transform: uppercase; }
.gs-src { font: 700 12.5px/1.2 var(--body); color: rgba(27, 26, 23, .8); white-space: nowrap; }
.gs-body { display: grid; gap: 14px; padding: 16px 18px; }
.gs-body > p { font-size: 17px; line-height: 1.5; }
.gs-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start; }
.gs-name { font: 700 18px/1.25 var(--disp); letter-spacing: -.02em; overflow-wrap: anywhere; }
.gs-starrow { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-top: 6px; }
.gs-stars { --fill: 0%; position: relative; display: inline-block; font-size: 24px; line-height: 1; letter-spacing: 1px; color: #e6d9c0; white-space: nowrap; }
.gs-stars::before { content: "\2605\2605\2605\2605\2605"; }
.gs-stars::after { content: "\2605\2605\2605\2605\2605"; position: absolute; left: 0; top: 0; width: var(--fill); overflow: hidden; color: var(--gold); text-shadow: 0 1px 0 #8a5f22; }
.gs-num { font-size: 16px; color: var(--ink-2); }
.gs-num b, .gs-rank b { font-weight: 800; color: var(--ink); }
.gs-rank { margin-top: 6px; font-size: 16px; line-height: 1.35; }
.gs-by { display: block; font-size: 14px; color: var(--ink-3); }
.gs-score { display: grid; justify-items: center; align-content: center; width: 86px; height: 86px; border-radius: 16px; background: var(--green); color: var(--glow); box-shadow: inset 0 0 0 4px var(--green-dk), inset 0 0 0 5.5px rgba(217, 164, 65, .85); }
.gs-score b { font: 800 34px/1 var(--disp); letter-spacing: -.04em; }
.gs-score span { margin-top: 5px; font: 800 10px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--linen); }
.gs-k { font: 800 12px/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.gs-checks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.gs-checks li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 5px; border-radius: 999px; background: var(--linen); font: 700 15px/1.2 var(--body); }
.gs-checks i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 900 13px/1 var(--body); font-style: normal; }
.gs-checks .is-ok i { background: var(--gold); color: var(--ink); }
.gs-checks .is-ok i::before { content: "\2713"; }
.gs-checks .is-no i { background: var(--brick); color: var(--paper); }
.gs-checks .is-no i::before { content: "\2715"; font-size: 11px; }
.gs-fixes { margin-top: 6px; border-top: 1.5px dashed rgba(27, 26, 23, .22); }
.gs-fix { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 10px 2px; border-bottom: 1.5px dashed rgba(27, 26, 23, .22); color: var(--ink); text-decoration: none; }
.gs-fix:hover .gs-what b { text-decoration: underline; text-underline-offset: 3px; }
.gs-n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--glow); font: 800 12px/1 var(--body); }
.gs-what b { display: block; font-weight: 800; font-size: 16px; line-height: 1.3; }
.gs-what small { display: block; margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.gs-price { font: 800 15px/1.2 var(--body); color: var(--brick-dk); white-space: nowrap; text-align: right; }
.gs-price.is-incl { font-weight: 700; color: var(--ink-3); }
.gs-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.gs-acts .btn { flex: 1 1 auto; min-height: 48px; padding: 0 18px; font-size: 16px; white-space: normal; }
.gs-fine { font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.gs-fine a { color: var(--ink-2); font-weight: 700; }
.gs-msg { font-size: 17px; line-height: 1.5; }
.gs-wait { display: flex; align-items: baseline; padding: 18px; font-size: 16px; color: var(--ink-2); }
.gs-dots { display: inline-flex; gap: 4px; margin-left: 5px; }
.gs-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .6; }
.gs-rest { display: grid; gap: 14px; }
.gs-rest[hidden] { display: none; }
.gs-you { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding-bottom: 12px; border-bottom: 1.5px dashed rgba(27, 26, 23, .22); }
.gs-youline { min-width: 0; font-size: 16px; line-height: 1.4; color: var(--ink-2); }
.gs-q { font-weight: 800; color: var(--brick-dk); }
.gs-you.is-far .gs-q { display: block; font-weight: 600; color: var(--ink); line-height: 1.45; }
.gs-you.is-yes .gs-q { color: var(--green); }
.gs-you.is-yes .gs-q::before { content: "\2713"; margin-right: 6px; }
.gs-youline b { font: 700 18px/1.25 var(--disp); letter-spacing: -.02em; color: var(--ink); overflow-wrap: anywhere; }
.gs-addr { font-size: 15px; color: var(--ink-3); }
.gs-yn { display: flex; gap: 6px; }
.gs-mini { min-height: 44px; padding: 0 16px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font-size: 16px; }
.gs-mini:hover { background: var(--ink); color: var(--glow); }
.gs-note { margin-top: 8px; font-size: 16px; font-weight: 600; line-height: 1.45; }
.gs-gap { padding: 12px 14px; border-radius: 12px; background: var(--linen); font-weight: 800; font-size: 17px; line-height: 1.4; color: var(--ink); }
.gs-pay { font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.gs-pay a { color: var(--brick-dk); font-weight: 800; text-underline-offset: 3px; }
.gs-acts .gs-ask { flex: 0 0 auto; min-height: 48px; padding: 0 8px; border: 0; background: none; color: var(--ink); font-size: 16px; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 5px; box-shadow: none; }
.gs-acts .gs-ask:hover { color: var(--brick-dk); transform: none; }
.gs-sug { display: grid; gap: 8px; }
.gs-sug-list { display: grid; gap: 8px; }
.gs-sug-b { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid rgba(27, 26, 23, .28); border-radius: 12px; background: var(--linen); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.gs-sug-b b { font: 700 17px/1.3 var(--disp); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.gs-sug-b span { font-size: 15px; color: var(--ink-3); }
.gs-sug-b:hover { border-color: var(--ink); }

/* "Send me this in writing" (AI in Your Business) */
.plan .lead-f input { background: var(--cream); }
.plan .lead-f input[type="number"] { max-width: 140px; }
.plan-hint { font-size: 15px; line-height: 1.45; color: var(--ink-3); }
.plan-price { font-weight: 700; font-size: 17px; color: var(--brick-dk); }
.plan-price[hidden] { display: none; }

/* Sam's floating button steps aside while something to tap is under it (site.js, tuckFab) */
.sam-fab { transition: transform .2s ease, opacity .2s ease; }
.sam-fab.is-tucked { opacity: 0; transform: translateY(18px); pointer-events: none; }

/* =====================================================================================
   tablets and phones: the words first, then the drawing
   ===================================================================================== */
@media (max-width: 1199px) {
  .street-row { background: linear-gradient(180deg, #fbdcbc 0, #f9cfa8 200px, var(--cream) 520px); }
  .street-row .sky { display: none; }
  .row-note { padding-top: 30px; background: var(--cream); }
  .wall-2 { grid-template-columns: minmax(0, 1fr); }
  .rules-board { max-width: 800px; }
}
@media (max-width: 1023px) {
  .street-in, .street-wide .street-in, .street-check .street-in, .street-about .street-in, .street-sample .street-in { --scene-w: 100%; grid-template-columns: minmax(0, 1fr); }
  .st-copy { width: 100%; max-width: 640px; justify-self: center; padding-bottom: 0; }
  .st-scene { width: 100%; max-width: 420px; justify-self: center; margin-top: 30px; }
  .st-front { max-width: 560px; }
  .street-sample .st-copy, .street-check .st-copy { padding-bottom: 0; }
  .st-hand { max-width: 360px; margin-top: 18px; }
  .sun { left: 78%; }
  .hear-in { grid-template-columns: minmax(0, 1fr); }
  .room-prices .room-in, .room-who .room-in { grid-template-columns: minmax(0, 1fr); }
  .founder { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .founder-fig { width: min(300px, 78%); }
  .read-in { grid-template-columns: minmax(0, 1fr); }
  .read-toc { display: none; }
}
@media (max-width: 999px) {
  .jobs-shelf { margin-left: 0; }
  .of-window, .of-beam { display: none; }
  .jobs-desk { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0; }
  .jobs-desk::before, .jobs-desk::after { display: none; }
  .jobs-desk .job { margin-top: 44px; }
  .jobs-desk .job::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; 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); }
  .jobs-desk .job::after { content: ""; position: absolute; z-index: 0; left: 8px; right: 8px; top: calc(var(--obj) + var(--top)); bottom: 0; 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); }
  .jobs-desk .job-obj, .jobs-desk .job-card { z-index: 2; }
  .jobs-desk .job-card { margin: 16px 18px 22px; }
  .of-room::after { display: none; }
  .room-jobs { padding-bottom: var(--sec-y); }
}
@media (max-width: 900px) {
  .hung, .hung-2, .hung-4 { --n: 1; max-width: 560px; }
  .hung::before { left: -8px; right: -8px; }
  .hcard:nth-child(even) .hcard-h, .hung-4 .hcard:nth-child(3) .hcard-h { background: radial-gradient(120% 90% at 30% 0, #c96a4a 0, var(--brick) 50%, var(--brick-dk) 100%); color: var(--paper); box-shadow: inset 0 0 0 4px var(--brick-dk), inset 0 0 0 5.5px rgba(255, 227, 163, .72); }
  .hung-4 .hcard:nth-child(3) .hcard-h { background: var(--enamel); color: var(--glow); box-shadow: inset 0 0 0 4px #173d2e, inset 0 0 0 5.5px rgba(217, 164, 65, .78); }
  .hung-4 .hcard:nth-child(4) .hcard-h { background: radial-gradient(120% 90% at 30% 0, #c96a4a 0, var(--brick) 50%, var(--brick-dk) 100%); color: var(--paper); box-shadow: inset 0 0 0 4px var(--brick-dk), inset 0 0 0 5.5px rgba(255, 227, 163, .72); }
  .stops { grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: 560px; margin-left: auto; margin-right: auto; }
  .stops::before { left: 16px; right: auto; top: 8px; bottom: 8px; width: 8px; height: auto; }
  .stops li { grid-template-columns: 108px minmax(0, 1fr); gap: 14px; align-items: start; }
  .stops-n li { grid-template-columns: 40px minmax(0, 1fr); }
  .stop-v { padding-top: 7px; }
  .papers { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .ticks { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .ct-under { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
  .signs-row { flex-direction: column; align-items: stretch; max-width: 440px; gap: 26px; padding-top: 34px; }
  .signs-row .sign { flex: none; }
  .signs-row .sign::before, .signs-row .sign::after { height: 32px; top: calc(var(--b) * -1 - 30px); }
}
@media (max-width: 759px) {
  /* the back office becomes a list: the object on its little shelf, the words beside it */
  .of-room { display: grid; gap: 12px; }
  .jobs, .jobs-shelf, .jobs-desk { display: contents; }
  .job, .jobs-desk .job { order: var(--i); margin-top: 0; grid-template-columns: 104px minmax(0, 1fr); grid-template-rows: auto; align-items: stretch; justify-items: stretch; border-radius: 16px; overflow: hidden; background: var(--paper); box-shadow: 0 0 0 1px rgba(27, 26, 23, .07), 0 16px 26px -22px rgba(70, 25, 10, .7); }
  .jobs-desk .job { background: var(--green); }
  .jobs-desk .job::before, .jobs-desk .job::after { display: none; }
  .job-obj, .jobs-desk .job-obj { grid-row: 1; grid-column: 1; align-self: stretch; display: grid; align-items: end; justify-items: center; width: auto; margin: 0; padding: 14px 8px 16px; background: linear-gradient(180deg, #fdebd2 0, #f8dcb6 calc(100% - 16px), #c98d58 calc(100% - 16px), #9a6339 100%); }
  .job-obj svg { width: min(84px, 100%); }
  .job:hover .job-obj { transform: none; }
  .job-card, .jobs-shelf .job-card, .jobs-desk .job-card { grid-row: 1; grid-column: 2; margin: 0; padding: 16px 16px 18px; border: 0; border-radius: 0; background: none; box-shadow: none; rotate: none !important; text-align: left; }
  .jobs-shelf .job-card::before, .jobs-shelf .job-card::after, .jobs-desk .job-card::after { display: none; }
  .job-w { margin-top: 10px; text-wrap: pretty; }
  .job-d { font-size: 15.5px; }
}
@media (max-width: 640px) {
  :root { --sec-y: 56px; }
  .street { --st-top: 20px; }
  .st-h { font-size: 31px; }
  .st-h-long { font-size: 27px; }
  .st-sub { margin-top: 12px; font-size: 16px; line-height: 1.48; }
  .st-ctas { gap: 8px; margin-top: 18px; }
  .st-ctas .btn { flex: 1 1 100%; min-height: 50px; padding: 0 14px; font-size: 15.5px; white-space: normal; text-align: center; line-height: 1.2; }
  .st-more { margin-top: 6px; text-align: center; }
  .st-ask { font-size: 15.5px; }
  .st-scene { margin-top: 22px; width: 92%; }
  .st-front { width: 100%; }
  .row-head .st-ctas { margin-top: 18px; }
  .say { font-size: 17px; }
  .brickwall { padding-top: 48px; padding-bottom: 48px; }
  .enamel-inc { padding: 46px 20px 50px; }
  .inc-foot { margin-top: 20px; }
  .ticks li { min-height: 0; padding: 13px 2px 13px 40px; font-size: 16.5px; }
  .ticks li::before { width: 26px; height: 26px; margin-top: -13px; }
  .inc-foot { font-size: 12.5px; letter-spacing: .1em; }
  .rules-board { padding: 40px 18px 26px; }
  .hung { --drop: 26px; }
  .hcard-h { min-height: 66px; padding: 13px 16px; gap: 12px; }
  .hc-ic { width: 36px; height: 36px; }
  .hcard-b { padding: 18px 18px 22px; }
  .hcard-b p { font-size: 16.5px; line-height: 1.55; }
  .fold summary { min-height: 62px; }
  .fold-b p, .tl li, .callout-list li, .ex-log li, .est-lines th, .est-lines td, .paper p { font-size: 16.5px; }
  .tl li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ex-log li { grid-template-columns: 54px minmax(0, 1fr); }
  .works-strip { grid-template-columns: minmax(0, 1fr); }
  .paper:nth-child(odd), .paper:nth-child(even) { rotate: none; }
  .terms { padding: 16px 18px; }
  .hear-head .sec-h { font-size: 26px; }
  .call-lines li { max-width: 94%; }
  .call-tab { padding: 0 15px; font-size: 15.5px; }
  .call-say { font-size: 16.5px; }
  .slip, .slip-one { padding: 22px 18px; }
  .next::before { margin-bottom: 44px; }
  .next-sam { padding: 30px 24px 26px; }
  .next-sam-line { display: none; }
  .room-jobs, .room-counter { padding-top: calc(var(--head-h) + 20px); }
  .jobs-plaque { margin-bottom: 22px; }
  .room-counter .ct-desk { margin-top: 34px; }
  .tel-big a { padding: 18px 20px 16px; }
  .reach-in { padding: 18px 20px 22px; }
  .room-talk { min-height: 0; padding-top: calc(var(--head-h) + 22px); }
  .talk-btn { min-height: 104px; margin-top: 26px; padding: 0 22px; gap: 14px; }
  .talk-mic { width: 52px; height: 52px; }
  .talk-mic svg { width: 28px; height: 28px; }
  .talk-alts { margin-top: 18px; }
  .ct-desk-show { --obj: 118px; --front: 44px; margin-top: 26px; }
  .ct-desk-show .ct-bell { --w: 92px; }
  .ct-desk-show .ct-phone { --w: 118px; }
  .ct-desk-show .ct-mic { --w: 70px; }
  .ct-desk-one { --obj: 112px; --front: 40px; }
  .ct-desk-one .ct-bell { --w: 112px; }
  .founder-words p { font-size: 17px; line-height: 1.62; }
  .founder-acts .book-btn, .founder-acts .btn { width: 100%; flex: 1 1 100%; white-space: normal; text-align: center; }
  .who > div { grid-template-columns: minmax(0, 1fr); }
  .who, .who-h { padding-left: 20px; padding-right: 20px; }
  .own p { font-size: 17px; }
  .read-block { padding: 24px 0; }
  .read-block p, .read-list li { font-size: 17px; line-height: 1.65; }
  .addons th, .addons td { font-size: 16px; }
  .addons td { font-size: 15px; }
  /* on phones the page's last strip leaves room under its last button for Sam's round button */
  main > .next:last-child { padding-bottom: calc(var(--sec-y) + 56px); }
}
@media (prefers-reduced-motion: reduce) {
  .job-obj, .talk-btn, .fold-x::before, .fold-x::after, .book-btn, .sam-fab { transition: none; }
  .job:hover .job-obj, .talk-btn:hover { transform: none; }
}

/* ---------- print: the page itself, without the header, Sam, the forms or the footer ---------- */
@media print {
  .site-head, .skip, .nav-menu, .sam-fab, .sam-panel, .site-foot, .next, [data-call], .sky, .st-ctas, .st-more, .st-scene, .defs, .read-toc, .ct-desk, .row-note a { display: none !important; }
  html, body, main { background: #fff !important; color: #000 !important; }
  .street, .room, .brickwall, .office, .counter { padding: 14px 0 !important; background: none !important; }
  .street::after, .hung::before, .hung::after, .hcard::before, .hcard::after, .read::before { display: none !important; }
  .street-in, .hear-in, .wall-in, .founder, .read-in, .hung, .papers, .stops { display: block !important; }
  .gold, .inner .gold { background: none !important; -webkit-text-fill-color: #000 !important; color: #000 !important; filter: none !important; }
  .enamel, .inkboard, .hcard-h, .next-sam { background: #fff !important; box-shadow: none !important; border: 1.5px solid #000; color: #000 !important; }
  .enamel-list li, .enamel-pairs li b, .enamel-pairs li span, .enamel-say, .ticks li, .rules-list li, .payback p, .call-lines li, .call-lines b, .addons tbody th, .addons td, .call-say, .call-k .hear-k, .board-say, .inc-foot { color: #000 !important; }
  .call-lines .cl-ai, .call-lines .cl-caller { background: #fff !important; border: 1px solid #000; }
  .hcard, .paper, .folds, .read, .slip, .who-card { box-shadow: none !important; border: 1px solid #999; rotate: none !important; }
  .hcard, .read-block, .ticks li, .tl li, .ex-log li, .fold, .job { break-inside: avoid; }
  .sec-h, .read-h, .fold-h { break-after: avoid; }
  a { color: #000 !important; text-decoration: none !important; }
  .call-text summary, .call-tabs, .call-book { display: none !important; }
  .call-panel[hidden] { display: grid !important; }
}