/* CSA V08: the street.
   Amber ground, white reading pages, deep brown type, cream on brown.
   Tomato appears only as the small square mark: the full stop, the place you're at, the end of a button.
   One typeface, Overpass. The sign on the empty lot is lettered in a cut of Archivo, to match the model's signs.
   One light theme on purpose: the amber is the brand's ground, so there's no dark version. */

@font-face { font-family: "Overpass"; src: url("../fonts/overpass-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Sign"; src: url("../fonts/sign.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  --amber: #F2A516;
  --brown: #5A2C17;
  --night: #2A140A;
  --cream: #F7E8C9;
  --white: #FFFFFF;
  --tomato: #E0501B;
  --soft: #7A5646;                       /* second-line text on white */
  --line: rgb(90 44 23 / .2);
  --gutter: max(clamp(16px, 4vw, 48px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --wrap: 1400px;
  --edge: max(var(--gutter), calc((100% - var(--wrap)) / 2));   /* where the page's left edge sits inside a full-width box */
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--brown) #F3E3C3; }
body { margin: 0; background: var(--amber); color: var(--brown); font: 400 1.125rem/1.5 "Overpass", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; caret-color: var(--tomato); }
::selection { background: var(--brown); color: var(--cream); }
[hidden] { display: none !important; }
img, video, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: .14em; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--brown); outline-offset: 3px; border-radius: 4px; }
.foot :focus-visible, .viewer :focus-visible, .counter__card :focus-visible { outline-color: var(--cream); }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 30; background: var(--brown); color: var(--cream); padding: 10px 14px; border-radius: 8px; font-weight: 700; }
.skip:focus { top: 12px; }
.sq { display: inline-block; width: .19em; height: .19em; margin-left: .07em; background: var(--tomato); }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; gap: .6em; min-height: 48px; padding: .58em 1.05em .46em; border-radius: 8px; background: var(--brown); color: var(--cream); font-weight: 700; line-height: 1.1; text-decoration: none; white-space: nowrap; transition: background-color .2s; }
.btn::after { content: ""; flex: none; width: .5em; height: .5em; margin-top: -.12em; background: var(--tomato); transition: transform .35s var(--ease); }
.btn:hover { background: var(--night); }
.btn:hover::after { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }
.btn--light { background: var(--cream); color: var(--brown); }
.btn--light:hover { background: var(--white); }

.round { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--brown); color: var(--cream); cursor: pointer; transition: background-color .2s; }
.round svg { width: 22px; height: 22px; fill: currentColor; }
.round:hover { background: var(--night); }
.round:active { transform: scale(.95); }
/* Dimmed with see-through colour, not opacity, so its focus ring stays at full strength. */
.round[aria-disabled="true"], .round[aria-disabled="true"]:hover { background: rgb(90 44 23 / .32); color: rgb(247 232 201 / .7); cursor: default; }
.round[aria-disabled="true"]:active { transform: none; }
@media (forced-colors: active) { .round[aria-disabled="true"], .round[aria-disabled="true"]:hover { color: GrayText; } }
.round--light { background: var(--cream); color: var(--brown); }
.round--light:hover { background: var(--white); }

/* ---------------------------------------------------------------- top
   The bar stays on screen as the page scrolls (asked for on the preview, 14 Nov 2026). On a phone turned on its side it
   would take a fifth of the screen, so there it scrolls away as before. --bar-h is how much of the top it covers, so a
   jump to a section, a focused link and the sticky pictures all clear it. Once the page moves, a soft shadow lifts it. */
.top { background: var(--amber); }
@media (min-height: 521px) {
  :root { --bar-h: 72px; scroll-padding-top: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + 12px); }
  .top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; }
  body::before { content: ""; position: fixed; inset: 0 0 auto; z-index: 21; height: env(safe-area-inset-top, 0px); background: var(--amber); }
  @supports (animation-timeline: scroll()) {
    .top { animation: top-lift linear both; animation-timeline: scroll(root); animation-range: 0 40px; }
  }
}
@media (min-height: 521px) and (max-width: 560px) { :root { --bar-h: 70px; } }
@keyframes top-lift { to { box-shadow: 0 14px 24px -18px rgb(42 20 10 / .55); } }
.top__in { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-block: 14px 10px; }
.brand { flex: none; display: block; padding: 10px 14px; border-radius: 8px; background: var(--brown); transition: background-color .2s; }
.brand:hover { background: var(--night); }
.brand img { width: 104px; height: 26px; }
.nav { display: flex; align-items: center; gap: clamp(14px, 2.6vw, 34px); font-weight: 700; font-size: 1.0625rem; }
.nav a:not(.btn) { padding: 12px 0 8px; text-decoration: none; }
.nav a:not(.btn):hover, .nav a[aria-current] { text-decoration: underline; text-decoration-thickness: .12em; }
@media (max-width: 560px) {
  .nav__what { display: none; }
  .nav a { white-space: nowrap; }
  .brand { padding: 11px 12px; }
  .brand img { width: 88px; height: 22px; }
  .nav .btn { min-height: 44px; }
}
@media (max-width: 380px) {
  .top__in { gap: 10px; }
  .nav { gap: 10px; font-size: 1rem; }
  .nav .btn { gap: .45em; padding-inline: .8em; }
  .brand { padding: 12.5px 10px; }
  .brand img { width: 76px; height: 19px; }
}

/* ---------------------------------------------------------------- hero */
.hero { background: var(--amber); padding-bottom: clamp(26px, 4vw, 52px); overflow-x: hidden; overflow-x: clip; }
.hero__words { padding-top: clamp(6px, 1.6svh, 22px); }
h1 { font-size: clamp(2.5rem, min(8.2vw, 11.5svh), 6rem); font-weight: 800; line-height: .96; letter-spacing: -.028em; }
h1 .l { display: block; }
.lede { margin-top: .6em; max-width: 62ch; font-size: clamp(1.0625rem, 1.75vw, 1.5rem); font-weight: 500; line-height: 1.35; }
.hero__note { margin-top: clamp(14px, 2vw, 22px); font-size: 1.0625rem; font-weight: 500; }
.hero__note span { display: block; max-width: 64ch; }
@media (max-width: 640px) {
  h1 { font-size: clamp(2.4rem, min(12.4vw, 9.4svh), 3.5rem); line-height: .95; }
  h1 .l > span { display: block; }
  .home .hero__words { padding-top: 4px; }
}

/* ---------------------------------------------------------------- the street
   --m is the size of one metre of the model. Everything on the street is placed in metres.
   It's set in rem so the street grows with a visitor's own text size and the labels keep fitting their lots. */
.street { --m: clamp(1.4375rem, 3.4svh, 2.5rem); --rail: 4.125rem; --trim: 4.2; --soft: 1.6; margin-top: clamp(10px, 2svh, 26px); }
.street__view { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; padding-bottom: 20px; scrollbar-width: thin; scrollbar-color: var(--brown) transparent; cursor: grab; -webkit-user-select: none; user-select: none; }
.street__view:focus-visible { outline-offset: -3px; }
.street__view.is-dragging, .street__view.is-dragging .place { cursor: grabbing; }
.street__land { position: relative; width: calc(var(--land) * var(--m)); height: calc(var(--high) * var(--m) + var(--rail)); margin-left: calc(var(--trim) * var(--m) * -1); }
.street__band { position: absolute; inset: 0 0 var(--rail) 0; pointer-events: none; }
.street__tiles { position: absolute; inset: 0; }
.street__tiles picture { position: absolute; top: 0; bottom: 0; left: calc(var(--k) * var(--step) * var(--m)); width: calc(var(--tw) * var(--m)); }
.street__tiles img { width: 100%; height: 100%; max-width: none; }
/* The street starts as bare card and the colour washes along it: --shown is how many metres the colour has reached.
   The colour sits in a box slid left until its right edge is at --shown, and the pictures inside slide back the same
   distance so they stay put. Only transforms move, so nothing is redrawn while it goes, and a soft edge (--soft metres,
   which the script reads too) leads the way. Both moves are in percent of the box, so a resize or zoom never sets them
   going. The script sets --sweep and --glide for each move. */
.street__roll { position: absolute; inset: 0; }
.js .street__full { overflow: hidden; transform: translateX(calc((var(--shown, 0) / var(--land) - 1) * 100%));
  -webkit-mask-image: linear-gradient(to left, transparent, #000 calc(var(--soft) * var(--m))); mask-image: linear-gradient(to left, transparent, #000 calc(var(--soft) * var(--m))); }
.js .street__full .street__roll { transform: translateX(calc((1 - var(--shown, 0) / var(--land)) * 100%)); }
.js .street__full, .js .street__full .street__roll { transition: transform var(--sweep, 0s) var(--glide, ease); will-change: transform; }
.js .street__full.is-all, .js .street__full.is-all .street__roll { transform: none; transition: none; will-change: auto; -webkit-mask-image: none; mask-image: none; }
.js .street__full:not(.is-live), .js .street__full:not(.is-live) .street__roll { animation: colour-anyway .01s 6s both; }       /* if the script never arrives */
@keyframes colour-anyway { to { transform: none; -webkit-mask-image: none; mask-image: none; } }
html:not(.js) .street__bare { display: none; }

.street__rail { position: absolute; bottom: 0; left: calc(var(--a) * var(--m)); width: calc((var(--b) - var(--a)) * var(--m)); height: var(--rail); border-radius: 0 0 6px 6px; background: var(--brown); box-shadow: 0 18px 20px -14px rgb(42 20 10 / .55); }
/* The stretch of board before the first lot says how the street works, so it's on the first screen of a phone. */
.street__tip { position: absolute; inset: 0 auto 0 0; width: calc(var(--tip) * var(--m)); display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 3px 8px 0 13px; color: var(--cream); line-height: 1.15; white-space: nowrap; pointer-events: none; }
.street__tip b { display: flex; align-items: center; gap: 7px; font-size: 1.1875rem; font-weight: 800; letter-spacing: -.01em; }
.street__tip svg { flex: none; width: 18px; height: 18px; fill: currentColor; }
.street__tip > span { font-size: 1rem; font-weight: 500; color: rgb(247 232 201 / .88); }
.street__places { position: absolute; inset: 0; }
.place { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * var(--m)); width: calc((var(--b) - var(--a)) * var(--m)); color: var(--cream); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.place:focus-visible { outline: 3px solid var(--brown); outline-offset: -4px; border-radius: 8px; box-shadow: inset 0 0 0 7px var(--cream); }
.place__label { position: absolute; left: 0; right: 0; bottom: 0; min-height: var(--rail); background: var(--brown); display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 3px 0 0 13px; border-left: 1px solid rgb(247 232 201 / .24); line-height: 1.15; }
.place__label::before { content: ""; position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; background: var(--tomato); transform: scale(0); transition: transform .4s var(--ease); }
.place.is-here .place__label::before { transform: scale(1); }
.place__top { display: flex; align-items: center; gap: 8px; font-size: 1.1875rem; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.place__no { flex: none; display: grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: .16em .25em 0; border-radius: 4px; background: var(--cream); color: var(--brown); font-size: 1rem; line-height: 1; transition: background-color .2s; }
/* The name is underlined at rest, so on a touch screen it reads as something to tap. */
.place__biz { font-size: 1rem; font-weight: 500; color: rgb(247 232 201 / .88); text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .2em; }
.place:hover .place__no, .place:focus-visible .place__no, .place:active .place__no { background: var(--white); }
.place:hover .place__biz, .place:focus-visible .place__biz, .place:active .place__biz { color: var(--white); }

.street__bar { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 2px; }
.street__hint { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.street__arrows { flex: none; display: flex; gap: 10px; }
@media (hover: hover) and (pointer: fine) { .no-hover { display: none; } }
@media not all and (hover: hover) and (pointer: fine) { .can-hover { display: none; } }
@media (max-width: 640px) {
  .street { --m: clamp(1.40625rem, 3.3svh, 1.6875rem); --rail: 3.75rem; --trim: 6.1; margin-top: 0; }
  .place__top, .street__tip b { font-size: 1.0625rem; }
  .street__view { padding-bottom: 24px; }
}

/* ---------------------------------------------------------------- everything we do */
h2 { font-size: clamp(2.3rem, 5.4vw, 4.5rem); font-weight: 800; line-height: 1; letter-spacing: -.028em; text-wrap: balance; }
.range { background: var(--white); padding-block: clamp(56px, 9vw, 124px) clamp(8px, 2vw, 24px); }
/* Laid out like the three crafts under it, so the paragraph starts where the pictures do. */
.range__head { display: grid; gap: 14px; margin-left: var(--edge); padding-right: var(--gutter); }
.range__head p { max-width: 46ch; font-size: clamp(1.125rem, 1.6vw, 1.375rem); font-weight: 500; line-height: 1.4; }
@media (min-width: 960px) { .range__head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: end; padding-right: 0; } }

.craft { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; margin: clamp(40px, 6vw, 84px) 0 0 var(--edge); padding-top: clamp(22px, 3vw, 40px); border-top: 2px solid var(--brown); }
.craft__words { padding-right: var(--gutter); }
.craft h3 { font-size: clamp(3.5rem, 8.4vw, 6rem); font-weight: 800; line-height: .9; letter-spacing: -.035em; }
.craft__line { margin-top: .55em; max-width: 36ch; font-size: clamp(1.125rem, 1.6vw, 1.375rem); font-weight: 500; line-height: 1.35; }
/* Two columns only where each has room for a whole name beside its number. */
.craft__list { margin-top: 1.4em; columns: 19rem 2; column-gap: 28px; font-size: 1.0625rem; font-weight: 500; line-height: 1.3; }
.craft__list li { display: flex; padding: .7em 0 .6em; border-top: 1px solid var(--line); break-inside: avoid; }
/* The whole row is the link, number plate included. */
.craft__list a { flex: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: -.7em 0 -.6em; padding: .7em 0 .6em; font-weight: 800; text-decoration: none; }
.craft__list a > span:first-child { text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .2em; }
.craft__list a:hover > span:first-child { text-decoration-thickness: .14em; }
.craft__list .plate { flex: none; margin-left: 0; }
.plate { display: inline-block; margin-left: .3em; padding: .25em .45em .1em; border-radius: 4px; background: var(--brown); color: var(--cream); font-size: 1rem; font-weight: 800; line-height: 1; white-space: nowrap; vertical-align: .06em; transition: background-color .2s; }
a:hover .plate { background: var(--night); }
.craft__extra { margin-top: 1.2em; max-width: 44ch; font-size: 1.0625rem; color: var(--soft); }
.craft__pics { min-width: 0; }
@media (min-width: 960px) {
  .craft { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; }
  .craft__words { padding-right: 0; }
  .craft__pics { align-self: start; position: sticky; top: calc(var(--bar-h, 0px) + 16px); }      /* the pictures keep you company down a long list, below the bar */
}

/* The 8px of padding on the top and left is room for a picture's focus ring; the negative margin puts the pictures back where they were. */
.strip { --h: clamp(220px, 30vw, 430px); position: relative; display: flex; gap: clamp(12px, 1.6vw, 22px); overflow-x: auto; overscroll-behavior-x: contain; margin: -8px 0 0 -8px; padding: 8px var(--gutter) 16px 8px; scroll-padding-inline: 8px; scrollbar-width: thin; scrollbar-color: var(--brown) transparent; cursor: grab; -webkit-user-select: none; user-select: none; }
.strip.is-dragging, .strip.is-dragging a { cursor: grabbing; }
.strip:focus-visible { outline-offset: -3px; }
.strip > li { flex: none; }
.shot > a { display: block; border-radius: 8px; }
/* A fine line round each picture, so a white screenshot still has an edge on the white page. */
.shot img, .shot video { width: auto; max-width: none; height: var(--h); aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; background: var(--cream); outline: 1px solid var(--line); outline-offset: -1px; }
.shot video:focus-visible { outline: 3px solid var(--brown); outline-offset: 3px; }
/* The film's own play and pause button, top right, clear of the captions in its bottom left. */
.film { position: relative; }
.film__toggle { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgb(22 24 27 / .72); color: var(--white); cursor: pointer; transition: background-color .2s var(--ease); }
.film__toggle:hover { background: rgb(22 24 27 / .9); }
.film__toggle:active { transform: scale(.96); }
.film__toggle:focus-visible { outline-color: var(--white); outline-offset: 2px; box-shadow: 0 0 0 6px var(--brown); }
.film__toggle span { width: 14px; height: 16px; margin-left: 3px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.film__toggle.is-playing span { margin-left: 0; clip-path: none; background: linear-gradient(90deg, currentColor 0 36%, transparent 36% 64%, currentColor 64%); }
.shot--tall img { aspect-ratio: 3 / 4; }
.shot figcaption { display: grid; margin-top: 10px; line-height: 1.3; }
.shot figcaption b { font-size: 1.125rem; font-weight: 800; }
.shot figcaption > span { color: var(--soft); }
.shot figcaption .plate { margin-left: .35em; }
/* The strips' own arrows, for a mouse: every drag has a button that does the same job. */
.strip__arrows { display: none; }
@media (hover: hover) and (pointer: fine) { .strip__arrows { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; padding-right: var(--gutter); } }
@media (max-width: 640px) { .strip { --h: min(56vw, 60svh); } }

/* ---------------------------------------------------------------- promises: four people behind one long counter */
.promises { background: var(--white); padding-top: clamp(64px, 9vw, 130px); }
.counter { --who: clamp(150px, 21vw, 330px); --pad: clamp(14px, 2.4vw, 34px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(14px, 2vw, 28px); }
.counter li { display: grid; grid-template-rows: auto 1fr; }
.counter__who { display: flex; justify-content: center; align-items: flex-end; height: var(--who); overflow: hidden; }
.counter__who img { width: auto; max-width: none; height: 100%; transition: transform .95s var(--ease); }
.counter.is-live li:not(.is-up) .counter__who img { transform: translateY(102%); }
.counter li:nth-child(2) img { transition-delay: .08s; }
.counter li:nth-child(3) img { transition-delay: .16s; }
.counter li:nth-child(4) img { transition-delay: .24s; }
/* The benchtop is a dark strip painted along the top of the counter. */
.counter__card { padding: 27px var(--pad) clamp(26px, 3.4vw, 48px); background: linear-gradient(var(--night) 0 9px, var(--brown) 9px); color: var(--cream); }
.counter__card h3 { font-size: clamp(1.3rem, 2.1vw, 1.9rem); font-weight: 800; line-height: 1.1; letter-spacing: -.015em; }
.counter__card p { margin-top: .5em; max-width: 30ch; font-size: 1.0625rem; line-height: 1.4; }
@media (min-width: 761px) {
  /* The counter runs the full width of the screen; the four people stand within the page's own edges. */
  .counter { padding-inline: calc(var(--edge) - var(--pad)); background: linear-gradient(var(--night) 0 9px, var(--brown) 9px) 0 var(--who) / 100% calc(100% - var(--who)) no-repeat; }
}
@media (max-width: 760px) {
  .counter { --who: 40vw; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .counter li:nth-child(odd) .counter__card { padding-left: var(--gutter); }
  .counter li:nth-child(3) img { transition-delay: 0s; }
  .counter li:nth-child(4) img { transition-delay: .08s; }
}

/* ---------------------------------------------------------------- the last lot */
.lot { background: var(--amber); overflow: hidden; overflow: clip; }
.lot__in { display: grid; grid-template-columns: minmax(0, 1fr); }
.lot__head, .lot__form { padding-inline: var(--gutter); }
.lot__head { padding-top: clamp(52px, 8vw, 110px); }
.lot__lede { margin-top: .7em; max-width: 34ch; font-size: clamp(1.125rem, 1.6vw, 1.375rem); font-weight: 500; line-height: 1.4; }
/* The lot's picture is shown wider than the page so the sign is a good size, and never taller than the screen can hold.
   What spills over runs off the page. --sw is the picture's width, --mid is where the sign's middle sits along it. */
.lot__pic { margin-top: 6px; }
.lot__stage { --sw: min(160%, 115svh, 760px); width: var(--sw); margin-left: calc(50% - var(--mid) * var(--sw)); }
.lot__img { position: relative; container-type: inline-size; }
.lot__img img { width: 100%; height: auto; }
.lot__sign { position: absolute; left: var(--l); top: var(--t); width: var(--w); height: var(--h); display: grid; place-items: center; padding-bottom: 6px; padding-bottom: 2.6cqw; color: #FFF4DC; font: 900 16px/1.06 "Sign", "Overpass", sans-serif; font-size: 3.5cqw; text-align: center; text-shadow: 0 .035em .05em rgb(42 20 10 / .45); text-transform: uppercase; white-space: nowrap; overflow: hidden; scroll-margin-top: 40px; }
.lot__rail { display: flex; align-items: center; width: var(--w); height: 3.75rem; margin-left: var(--l); padding: 3px 12px 0 14px; border-radius: 0 0 6px 6px; background: var(--brown); color: var(--cream); box-shadow: 0 18px 20px -14px rgb(42 20 10 / .55); white-space: nowrap; }
.lot__rail .place__top { min-width: 0; }
.lot__rail b { overflow: hidden; text-overflow: ellipsis; max-width: 58vw; }
.lot__form { padding-block: 34px clamp(44px, 6vw, 72px); }
.field label { display: block; font-weight: 800; font-size: 1.125rem; }
.field input { display: block; width: 100%; max-width: 26rem; margin-top: 8px; min-height: 54px; padding: .5em .8em .36em; border: 2px solid var(--brown); border-radius: 8px; background: var(--white); color: var(--brown); font: 700 1.25rem/1.2 "Overpass", system-ui, sans-serif; }
.field input:focus-visible { outline: 3px solid var(--brown); outline-offset: 3px; }
.field__help { margin-top: 8px; max-width: 40ch; font-size: 1.0625rem; font-weight: 500; line-height: 1.4; }
.lot__act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 22px; }
.addr { font-weight: 700; -webkit-user-select: all; user-select: all; }
.lot__call { margin-top: 14px; max-width: 40ch; font-size: 1.0625rem; font-weight: 500; line-height: 1.4; }
@media (min-width: 900px) {
  .lot__in { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); grid-template-areas: "head pic" "form pic"; grid-template-rows: 1fr auto; column-gap: clamp(20px, 3vw, 48px); padding-left: var(--edge); }
  .lot__head { grid-area: head; align-self: end; padding: clamp(56px, 7vw, 110px) 0 0; }
  .lot__form { grid-area: form; padding: 26px 0 clamp(52px, 6vw, 96px); }
  .lot__pic { grid-area: pic; align-self: end; margin: clamp(36px, 5vw, 80px) 0 clamp(52px, 6vw, 96px); }
  .lot__stage { --sw: 128%; margin-left: 0; }
  .lot__rail { height: 4.125rem; }
  .lot__rail b { max-width: 26vw; }
}

/* ---------------------------------------------------------------- foot */
.foot { background: var(--night); color: var(--cream); padding-block: clamp(40px, 6vw, 72px) 30px; }
.foot__in { display: grid; gap: 28px 48px; }
.foot__brand img { width: 148px; height: 37px; }
.foot__brand p { margin-top: 14px; max-width: 26ch; font-weight: 500; }
.foot h2 { font-size: 1.0625rem; font-weight: 800; letter-spacing: 0; line-height: 1.3; }
.foot ul { display: grid; gap: 2px; margin-top: 4px; }
.foot li a { display: inline-block; padding-block: 9px 8px; }
.foot__fine { font-size: 1.0625rem; line-height: 1.45; color: rgb(247 232 201 / .86); max-width: 74ch; }
.foot__fine + .foot__fine { margin-top: -14px; }
@media (min-width: 760px) {
  .foot__in { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); }
  .foot__fine { grid-column: 1 / -1; }
  .foot__fine:first-of-type { margin-top: 14px; padding-top: 22px; border-top: 1px solid rgb(247 232 201 / .22); max-width: none; }
}

/* ---------------------------------------------------------------- the big look at a picture
   A night brown board that grows out of the place, picture or line you picked, and shrinks back into it when it
   closes (site.js does the moving). It is never full screen: the page stays in sight round it, dimmed. On an upright
   phone it's a sheet with the page's own gutter at its sides and the top bar in sight above it; on a computer the
   board stops at 1200 by 680.
   On an upright phone the sheet scrolls: the picture is shown tall, and a wide one slides sideways.
   On a wide or a short screen the picture and the words sit side by side and nothing scrolls. */
.viewer {
  --x: 12px; --y: 12px;                                  /* the least of the page that shows round it */
  --top: max(var(--y), env(safe-area-inset-top, 0px)); --bottom: max(var(--y), env(safe-area-inset-bottom, 0px));
  /* one column: as tall as what's on it and centred, up to the screen's height less the margins, then it scrolls */
  inset: var(--top) max(var(--x), env(safe-area-inset-right, 0px)) var(--bottom) max(var(--x), env(safe-area-inset-left, 0px));
  width: auto; height: fit-content; max-width: none; max-height: calc(100% - var(--top) - var(--bottom)); margin: auto;
  padding: 0; border: 0; border-radius: 8px; background: var(--night); color: var(--cream);
  overflow: hidden auto; overscroll-behavior: contain; scrollbar-color: rgb(247 232 201 / .5) transparent;
  container-type: inline-size;                           /* so the picture can size itself to the board */
}
/* An upright phone: the page's 16px gutter at the sides, and the 68px top bar in sight above the sheet. */
@media (max-width: 640px) and (min-height: 521px) { .viewer { --x: 16px; --top: max(76px, calc(env(safe-area-inset-top, 0px) + 12px)); } }
@media (min-width: 641px) { .viewer { --x: clamp(24px, 5vw, 72px); --y: clamp(20px, 5dvh, 56px); } }
@media (min-width: 900px) and (min-height: 521px) { .viewer { --x: max(clamp(24px, 5vw, 72px), (100% - 1200px) / 2); --y: max(clamp(20px, 6dvh, 64px), (100dvh - 680px) / 2); } }
.viewer::backdrop { background: rgb(42 20 10 / .55); }
.viewer[open]::backdrop { animation: dim-in .3s ease-out; }
.viewer.is-closing::backdrop { animation: dim-out .26s ease-in forwards; }
@keyframes dim-in { from { opacity: 0; } }
@keyframes dim-out { to { opacity: 0; } }
/* The page behind can't scroll while it's open. Losing its scrollbar would shift the page under the dim, so the
   script measures the bar first and the page keeps that much room. */
html:has(.viewer[open]) { overflow: hidden; padding-right: var(--bar, 0px); }
.viewer__in { position: relative; display: flex; flex-direction: column; min-height: 100%; }
.viewer__close { position: sticky; top: 10px; z-index: 2; align-self: flex-end; flex: none; margin: 10px 10px -58px 0; }
.viewer__pic { --ph: clamp(220px, 54dvh, 150vw); flex: none; display: flex; height: calc(var(--ph) + 72px); padding: 68px clamp(16px, 3vw, 28px) 4px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; }
/* An upright phone shows a picture's upright cut where it has one (the holder then holds a <source>). The cut is held
   to the sheet's width, so it never slides. Wide pictures keep the full height and slide. */
@media (max-width: 640px) and (orientation: portrait) { .viewer__pic:has(source) { --ph: clamp(220px, min(54dvh, (100vw - 2 * var(--x) - var(--sb, 0px) - 2 * clamp(16px, 3vw, 28px)) * 4 / 3), 150vw); } }
/* A finger slides the picture and needs no bar. A mouse gets a thin one, with room made for it under the picture. */
@media not all and (hover: hover) and (pointer: fine) { .viewer__pic { scrollbar-width: none; } .viewer__pic::-webkit-scrollbar { display: none; } }
@media (hover: hover) and (pointer: fine) { .viewer__pic { height: calc(var(--ph) + 84px); padding-bottom: 16px; } }
.viewer__pic:focus-visible { outline-offset: -3px; }
.viewer__pic picture { display: contents; }
.viewer__pic img, .viewer__pic video { flex: none; width: auto; max-width: none; height: var(--ph); margin-inline: auto; border-radius: 8px; }
/* a picture still on its way fades in when it comes, instead of popping in */
.viewer__pic img { transition: opacity .3s var(--ease); }
.viewer__pic img.is-coming { opacity: 0; }
/* The film carries its own play button. On an upright phone it slides sideways, so the button sits at its left,
   where it's on screen; wider than that, at its right as in the strip. */
.viewer__pic .film { flex: none; margin-inline: auto; }
.viewer__pic .film__toggle { right: auto; left: 10px; }
@media (min-width: 641px) { .viewer__pic .film__toggle { right: 10px; left: auto; } }
.viewer__slide { padding: 6px clamp(16px, 3vw, 28px) 0; font-size: 1rem; font-weight: 500; color: rgb(247 232 201 / .88); }
.viewer__words { display: grid; gap: 8px; padding: 14px clamp(16px, 3vw, 28px) 20px; }
.viewer__words h2 { font-size: clamp(1.6rem, 2.8vw, 2.4rem); letter-spacing: -.02em; }
.viewer__line { max-width: 34ch; line-height: 1.4; }
.viewer__biz { font-weight: 700; color: rgb(247 232 201 / .88); }
.viewer__biz .plate { background: var(--cream); color: var(--brown); }
.viewer__act { margin-top: 6px; }
/* a set of pictures: how far through, and a thumbnail for each */
.viewer__set { display: grid; gap: 8px; margin-top: 4px; }
.viewer__count { font-weight: 700; color: rgb(247 232 201 / .88); font-variant-numeric: tabular-nums; }
.viewer__thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; max-width: 420px; }
.viewer__thumbs button { aspect-ratio: 3 / 2; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: rgb(247 232 201 / .12); cursor: pointer; }
.viewer__thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.viewer__thumbs button[aria-current="true"] { border-color: var(--cream); }
.viewer__thumbs button:not([aria-current="true"]) img { opacity: .72; }
.viewer__thumbs button:hover img { opacity: 1; }
.viewer__nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 12px; border-top: 1px solid rgb(247 232 201 / .22); }
.step { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; max-width: 49%; padding: 6px 0; border: 0; background: none; color: var(--cream); font-weight: 700; line-height: 1.15; text-align: left; cursor: pointer; }
.step svg { flex: none; width: 20px; height: 20px; fill: currentColor; transition: transform .35s var(--ease); }
.step--on { text-align: right; }
.step:hover span { text-decoration: underline; text-underline-offset: .2em; }
.step:hover svg { transform: translateX(-4px); }
.step--on:hover svg { transform: translateX(4px); }
/* Wider than a phone but still one column: the picture fits the board's width (100cqw), less the board's scrollbar if
   it has one (--sb, measured by site.js), inside the same side margins as the words. */
@media (min-width: 641px) { .viewer__pic { --ph: min(56dvh, calc((100vw - 2 * clamp(24px, 5vw, 72px) - 2 * clamp(16px, 3vw, 28px)) / 1.5)); } }
@supports (width: 1cqw) { @media (min-width: 641px) { .viewer__pic { --ph: min(56dvh, calc((100cqw - var(--sb, 0px) - 2 * clamp(16px, 3vw, 28px)) / 1.5)); } } }   /* Safari 15 has no container units */
/* Side by side: a wide screen, or a short one such as a phone on its side. */
@media (min-width: 900px), (max-height: 520px) and (min-width: 480px) {
  .viewer { height: auto; max-height: none; overflow: hidden; }       /* a fixed board, filling its margins */
  .viewer__in { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 30%, 360px); height: 100%; min-height: 0; }
  .viewer__close { position: absolute; top: 14px; right: 14px; margin: 0; }
  .viewer__pic { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; height: auto; min-height: 0; padding: clamp(16px, 2.4vw, 32px); overflow: hidden; }
  .viewer__pic img, .viewer__pic video { height: auto; max-width: min(100%, var(--natural, 100%)); max-height: 100%; margin: 0; }
  /* the film's box is sized to fit the space at 3:2, so its button sits on the film's own corner */
  .viewer__pic { container-type: size; }
  .viewer__pic .film { width: min(100cqw, 150cqh); aspect-ratio: 3 / 2; margin: 0; }
  .viewer__pic .film video { width: 100%; height: 100%; max-width: none; max-height: none; }
  .viewer__slide { display: none; }
  /* This column scrolls, which would clip a focus ring at its left edge, so it reaches 8px left to make room.
     "safe" lets words that outgrow the screen start at the top, where they can still be scrolled to. */
  .viewer__words { align-content: end; align-content: safe end; gap: 12px; min-height: 0; overflow-y: auto; margin-left: -8px; padding: 70px clamp(20px, 2vw, 32px) clamp(20px, 2.4vw, 32px) 8px; }
  .viewer__nav { margin-top: 26px; }
}
/* A short computer screen, such as a laptop: the picture is held by the board's height there, so the words column can
   take a little more width and wrap less, and the words close up a little. A set's thumbnails and the Before and
   After row then still fit beside the picture. */
@media (min-width: 900px) and (min-height: 521px) and (max-height: 760px) {
  .viewer__in { grid-template-columns: minmax(0, 1fr) clamp(300px, 34%, 400px); }
  .viewer__words { gap: 8px; padding-top: 66px; padding-bottom: 24px; }
  .viewer__set { gap: 6px; margin-top: 0; }
  .viewer__nav { margin-top: 10px; padding-top: 8px; }
}
/* A phone on its side: little height to spare, so only a thin margin of page round the board. */
@media (max-height: 520px) and (min-width: 480px) {
  .viewer { --x: 10px; --y: 8px; }
  .viewer__in { grid-template-columns: minmax(0, 1fr) minmax(240px, 36vw); }
  .viewer__close { top: 8px; right: 8px; }
  .viewer__pic { padding: 10px; }
  .viewer__words { align-content: start; gap: 6px; padding: 60px 14px 12px 12px; }
  .viewer__nav { margin-top: 4px; }
}
@media (max-height: 520px) and (min-width: 480px) and (max-width: 760px) {
  /* too narrow for two names side by side: After drops under Before */
  .viewer__nav { flex-direction: column; align-items: flex-start; gap: 0; }
  .step { max-width: none; }
  .step--on { align-self: flex-end; }
}

/* ---------------------------------------------------------------- about us */
.hero--about { padding-bottom: 0; }
.hero--about .lede { max-width: 40ch; }
.key { display: grid; gap: 12px 40px; margin-top: clamp(22px, 3vw, 40px); }
.key li { padding-top: 12px; border-top: 2px solid var(--brown); line-height: 1.3; }
.key b { display: block; font-size: clamp(1.6rem, 2.8vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.key span { font-weight: 500; }
@media (min-width: 700px) { .key { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 980px; } }
/* The office film: the studio as a model, its frames laid on the page's own amber so it needs no frame. Its play and
   pause button is the page's brown circle, in the amber below the model; on a phone it sits under the film. */
.office { margin-top: clamp(4px, 1.2vw, 18px); }
.office .film { max-width: 1600px; margin-inline: auto; }
.office video { width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--amber); }
.office .film__toggle { top: auto; right: max(var(--gutter), 2.5%); bottom: max(8px, 3%); width: 48px; height: 48px; background: var(--brown); color: var(--cream); }
.office .film__toggle:hover { background: var(--night); }
.office .film__toggle:focus-visible { outline-color: var(--brown); outline-offset: 3px; box-shadow: none; }
/* On a phone the film's own amber margins are trimmed, so the model runs edge to edge and its people are a tenth bigger. */
@media (max-width: 640px) {
  .office .film { overflow: hidden; }
  .office video { width: 110%; max-width: none; margin: -3.5% -5% -3%; }
  .office .film__toggle { position: static; margin: 4px var(--gutter) 0 auto; width: 44px; height: 44px; }
}
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.steps { background: var(--white); padding-block: clamp(56px, 9vw, 124px) clamp(40px, 6vw, 80px); }
.steps__list { display: grid; gap: 28px 40px; margin-top: clamp(26px, 4vw, 54px); counter-reset: step; }
.steps__list li { padding-top: 14px; border-top: 2px solid var(--brown); counter-increment: step; }
.steps__list li::before { content: counter(step); display: block; font-size: clamp(2.6rem, 4.4vw, 4rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.steps__list h3 { margin-top: 6px; font-size: clamp(1.3rem, 2.1vw, 1.9rem); font-weight: 800; line-height: 1.15; letter-spacing: -.015em; }
.steps__list p { margin-top: .5em; max-width: 36ch; }
@media (min-width: 620px) { .steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .steps__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.faq { background: var(--white); padding-block: clamp(20px, 4vw, 60px) clamp(64px, 9vw, 130px); }
.faq__in { display: grid; gap: 24px 48px; }
.faq__list { border-bottom: 2px solid var(--brown); }
.faq details { border-top: 2px solid var(--brown); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 0 14px; font-size: clamp(1.3rem, 2.1vw, 1.9rem); font-weight: 800; line-height: 1.2; letter-spacing: -.015em; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 22px; height: 22px; background: linear-gradient(var(--brown) 0 0) center / 100% 4px no-repeat, linear-gradient(var(--brown) 0 0) center / 4px 100% no-repeat; transition: transform .4s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .2em; }
.faq details p { max-width: 62ch; padding: 0 44px 22px 0; }
@media (min-width: 960px) { .faq__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* About me: the owner's own words at the foot of About (asked for 14 Nov 2026), laid out like the questions above it.
   45ch of Overpass is about 65 letters, the reading width this site keeps to for running text. */
.me { background: var(--white); padding-bottom: clamp(64px, 9vw, 130px); }
.me__in { display: grid; gap: 24px 48px; }
.me__words { padding-top: 18px; border-top: 2px solid var(--brown); }
.me__words p { max-width: 45ch; text-wrap: pretty; }
.me__words p + p { margin-top: .9em; }
.me__words p:first-child { max-width: 32ch; font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 700; line-height: 1.25; letter-spacing: -.012em; }
@media (min-width: 960px) { .me__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
/* The owner as a cartoon, drawn like the promise people, behind a short desk of the same counter. He rises once. */
.me__side { display: grid; align-content: start; gap: clamp(22px, 3vw, 40px); }
.me__desk { --me: clamp(170px, 17vw, 280px); width: calc(var(--me) * 720 / 570); max-width: 100%; }
.me__who { display: flex; justify-content: center; align-items: flex-end; height: var(--me); overflow: hidden; }
.me__who img { width: auto; max-width: none; height: 100%; transition: transform .95s var(--ease); }
.me__desk.is-live:not(.is-up) .me__who img { transform: translateY(102%); }
.me__desk::after { content: ""; display: block; height: clamp(26px, 2.6vw, 38px); border-radius: 0 0 6px 6px; background: linear-gradient(var(--night) 0 9px, var(--brown) 9px); }

/* ---------------------------------------------------------------- privacy, accessibility and the 404 page (tools/legal.py)
   Amber top with the heading, then a white reading page like the questions on About. */
.hero--doc .hero__words { padding-top: clamp(28px, 6vw, 80px); }
.doc__date { margin-top: 1.1em; font-size: 1rem; font-weight: 600; }
.doc { background: var(--white); padding-block: clamp(36px, 6vw, 80px) clamp(64px, 9vw, 130px); }
.doc__in { max-width: 45ch; }
.doc__in h2 { margin: 1.5em 0 .45em; font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.1; letter-spacing: -.015em; }
.doc__in h2:first-child { margin-top: 0; }
.doc__in p { text-wrap: pretty; }
.doc__in p + p, .doc__in p + ul, .doc__in ul + p { margin-top: .9em; }
.doc__in ul { display: grid; gap: .55em; padding-left: 1.1em; list-style: square; }
.doc__in li { text-wrap: pretty; }
.doc__in li::marker { color: var(--tomato); }
.lost__act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 26px; font-weight: 700; }
.lost__pic { display: block; margin-top: clamp(24px, 4vw, 48px); }
.lost__pic img { width: 100%; height: auto; }

/* ---------------------------------------------------------------- moving between the pages, and calm */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; }
  .js .street__full, .js .street__full .street__roll { transform: none; -webkit-mask-image: none; mask-image: none; }
}