/* THE PUBLIC WEBSITE'S ONE STYLESHEET (the operator, 27 Sep 2026: "build the website as well. Combine A and H.";
   design.md). A. Editorial's voice (serif display type, quiet sans, tracked eyebrows, hairlines, white space) on H. Soft
   light's surfaces (warm paper, soft washes of light, glass panels, 28 px corners, pills), with the NIGHT tone (the
   Studio's own #1d1915) for the set pieces where the logo lives: the pill, the phone menu, the footer, the lightbox and
   the photobooth's pages.

   House rules kept here: every class starts ws- (never an "ad" word); no web fonts and no fixed-width type (system stacks, with
   tabular figures where numbers line up); the logo's colours never change and it only sits on a dark surface; 44 px
   targets; buttons in a row the same size; no sideways scroll on a phone (and never overflow-x: hidden on html or body,
   which killed sticky positioning in the desk once); everything that moves stops under reduced motion. */

/* ---------------- 1. tokens ---------------- */

:root {
  --ws-paper: #fffaf4; --ws-sand: #f3ece2; --ws-cream: #f6f1e8;
  --ws-ink: #221b15; --ws-ink-2: #4d443b; --ws-mute: #6f655c; --ws-rule: #e6ded3;
  --ws-brown: #6b4e35; --ws-brown-hi: #7d5b3c; --ws-brown-lo: #5a4029;
  --ws-tan: #a0794f; --ws-tan-text: #83603d; --ws-beige: #e4d8c6; --ws-moon: #f4ff6a;
  --ws-night: #1d1915; --ws-night-2: #241c15; --ws-on-night: #f2efe8;
  --ws-bad: #a4442c; --ws-bad-edge: #c2553a; --ws-bad-bg: #fff3ef; --ws-good: #3d6b3f;
  --ws-wash-a: rgba(246, 220, 184, .70); --ws-wash-b: rgba(244, 255, 106, .22); --ws-wash-c: rgba(233, 201, 166, .62);

  --ws-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", P052, "URW Palladio L", Georgia, "Noto Serif", serif;
  --ws-sans: -apple-system, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --ws-sans-d: -apple-system, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;

  --ws-t-hero: clamp(2.6rem, 1.2rem + 5.6vw, 6rem);
  --ws-t-h1: clamp(2.4rem, 1.4rem + 3.6vw, 4.5rem);
  --ws-t-h2: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
  --ws-t-h3: clamp(1.375rem, 1.15rem + 1vw, 2.125rem);
  --ws-t-h4: 1.125rem;
  --ws-t-say: clamp(1.75rem, 1.2rem + 1.9vw, 2.75rem);
  --ws-t-lede: clamp(1.125rem, 1rem + .4vw, 1.25rem);
  --ws-t-body: clamp(1rem, .95rem + .2vw, 1.0625rem);
  --ws-t-small: .875rem;
  --ws-t-eye: .6875rem;
  --ws-t-btn: .9375rem;

  --ws-1: 4px; --ws-2: 8px; --ws-3: 12px; --ws-4: 16px; --ws-5: 24px; --ws-6: 32px; --ws-7: 48px; --ws-8: 64px; --ws-9: 96px;
  --ws-sec: clamp(64px, 4rem + 4vw, 128px);
  --ws-sec-tight: clamp(40px, 2rem + 2vw, 64px);
  --ws-max: 1240px; --ws-max-wide: 1440px;
  --ws-gut: clamp(16px, 4vw, 56px);
  --ws-frame-inset: clamp(8px, 1vw, 14px);
  --ws-hdr-h: 56px; --ws-hdr-top: 12px;
  --ws-hdr-clear: calc(var(--ws-hdr-top) + var(--ws-hdr-h) + 28px);
  --ws-r-xs: 8px; --ws-r-sm: 14px; --ws-r-md: 18px; --ws-r-lg: 28px; --ws-r-xl: 24px; --ws-r-pill: 999px;
  --ws-sh-1: 0 1px 1px rgba(107, 78, 53, .05), 0 18px 46px rgba(107, 78, 53, .09);
  --ws-sh-2: 0 6px 12px rgba(107, 78, 53, .07), 0 26px 52px rgba(107, 78, 53, .14);
  --ws-sh-pill: 0 12px 34px rgba(29, 25, 21, .26);
  --ws-glass: blur(18px) saturate(1.3);
  --ws-ease: cubic-bezier(.2, .6, .25, 1);
  --ws-fast: .2s; --ws-mid: .26s; --ws-slow: .8s;
  --ws-z-dock: 30; --ws-z-hdr: 40; --ws-z-skip: 60;
}
@media (min-width: 640px) {
  :root { --ws-hdr-h: 60px; --ws-hdr-top: 20px; --ws-r-xl: 36px; }
}

/* the tones: components read these, and a tone class on any ancestor swaps them (design 1.2) */
.ws, .ws-tone-paper {
  --ws-bg: var(--ws-paper); --ws-fg: var(--ws-ink); --ws-fg-2: var(--ws-ink-2); --ws-fg-mute: var(--ws-mute);
  --ws-line: var(--ws-rule); --ws-accent: var(--ws-brown); --ws-eye-c: var(--ws-tan-text); --ws-focus: var(--ws-brown);
  --ws-main-bg: linear-gradient(135deg, var(--ws-brown-hi), var(--ws-brown-lo)); --ws-main-fg: #fffaf4;
  --ws-plain-bg: rgba(255, 255, 255, .72); --ws-plain-edge: rgba(107, 78, 53, .22); --ws-plain-fg: var(--ws-ink);
  --ws-card-bg: rgba(255, 255, 255, .62); --ws-card-edge: rgba(255, 255, 255, .78);
  --ws-field-bg: rgba(255, 255, 255, .86); --ws-field-edge: rgba(107, 78, 53, .24);
  --ws-chip-bg: rgba(228, 216, 198, .55);
}
.ws-tone-sand { --ws-bg: var(--ws-sand); --ws-line: #ded4c6; --ws-card-bg: rgba(255, 255, 255, .72); }
.ws-tone-night, .ws-on-photo {
  --ws-fg: var(--ws-on-night); --ws-fg-2: rgba(242, 239, 232, .86); --ws-fg-mute: rgba(242, 239, 232, .72);
  --ws-line: rgba(255, 255, 255, .14); --ws-accent: var(--ws-beige); --ws-eye-c: var(--ws-beige); --ws-focus: var(--ws-beige);
  --ws-main-bg: var(--ws-cream); --ws-main-fg: var(--ws-night-2);
  --ws-plain-bg: rgba(255, 255, 255, .07); --ws-plain-edge: rgba(255, 255, 255, .34); --ws-plain-fg: var(--ws-on-night);
  --ws-card-bg: rgba(255, 255, 255, .05); --ws-card-edge: rgba(255, 255, 255, .12);
  --ws-field-bg: rgba(255, 255, 255, .07); --ws-field-edge: rgba(255, 255, 255, .24);
  --ws-chip-bg: rgba(255, 255, 255, .08);
  --ws-bad: #f0a48f; --ws-bad-edge: #e07a5f; --ws-bad-bg: rgba(224, 122, 95, .12);
}
.ws-tone-night { --ws-bg: var(--ws-night); color-scheme: dark; }
.ws-tone-sand, .ws-tone-night { background: var(--ws-bg); color: var(--ws-fg); }

/* ---------------- 2. base ---------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--ws-hdr-clear); background: var(--ws-paper); }
html:has(body.ws-night) { background: var(--ws-night); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body.ws {
  margin: 0; min-height: 100vh; background: var(--ws-bg); color: var(--ws-fg);
  font: 400 var(--ws-t-body)/1.68 var(--ws-sans); overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.ws [hidden] { display: none !important; }
/* the element rules weigh nothing (:where), so every ws- class below wins over them without !important */
:where(.ws) img, :where(.ws) svg { max-width: 100%; }
:where(.ws) img { display: block; height: auto; }
:where(.ws) :where(h1, h2, h3, h4) { margin: 0; font-weight: 400; text-wrap: balance; color: var(--ws-fg); }
:where(.ws) h1 { font: 400 var(--ws-t-h1)/1.04 var(--ws-serif); letter-spacing: -.016em; }
:where(.ws) h2 { font: 400 var(--ws-t-h2)/1.06 var(--ws-serif); letter-spacing: -.014em; }
:where(.ws) h3 { font: 400 var(--ws-t-h3)/1.15 var(--ws-serif); letter-spacing: -.01em; }
:where(.ws) h4 { font: 650 var(--ws-t-h4)/1.3 var(--ws-sans-d); letter-spacing: -.005em; }
:where(.ws) p { margin: 0; text-wrap: pretty; }
:where(.ws) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.ws) a { color: inherit; }
:where(.ws) :where(button, input, select, textarea) { font: inherit; color: inherit; }
.ws :focus-visible { outline: 3px solid var(--ws-focus); outline-offset: 3px; }
.ws main:focus { outline: none; }
.ws ::selection { background: rgba(228, 216, 198, .9); color: var(--ws-ink); }
svg.i { width: 1em; height: 1em; flex: none; vertical-align: -.125em; }
.ws-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ws-skip {
  position: fixed; left: 12px; top: 12px; z-index: var(--ws-z-skip); transform: translateY(-160%);
  padding: 12px 18px; border-radius: var(--ws-r-pill); background: var(--ws-cream); color: var(--ws-night-2);
  font: 600 var(--ws-t-btn)/1 var(--ws-sans); text-decoration: none; box-shadow: var(--ws-sh-pill);
}
.ws-skip:focus { transform: none; }

/* ---------------- 3. layout ---------------- */

.ws-in { width: 100%; max-width: var(--ws-max); margin-inline: auto; padding-inline: var(--ws-gut); }
.ws-in--narrow { max-width: calc(760px + 2 * var(--ws-gut)); }
.ws-in--form { max-width: calc(820px + 2 * var(--ws-gut)); }
.ws-sec { padding-block: var(--ws-sec); position: relative; }
.ws-sec--tight { padding-block: var(--ws-sec-tight); }
.ws-sec-head { display: grid; gap: 14px; margin-bottom: clamp(24px, 2vw + 16px, 44px); max-width: 62ch; }
.ws-sec-head:last-child { margin-bottom: 0; }
.ws-sec--say { padding-block: clamp(56px, 3rem + 4vw, 120px); }
.ws-nohdr main { padding-top: 12px; }

/* ---------------- 4. type ---------------- */

.ws-eye { font: 650 var(--ws-t-eye)/1.5 var(--ws-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ws-eye-c); }
.ws-lede { font-size: var(--ws-t-lede); line-height: 1.6; color: var(--ws-fg-2); max-width: 46ch; }
.ws-small { font-size: var(--ws-t-small); line-height: 1.55; color: var(--ws-fg-mute); letter-spacing: .01em; }
.ws-fine { font-size: .8125rem; line-height: 1.55; color: var(--ws-fg-mute); }
.ws-fig { font-family: var(--ws-sans-d); font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ws-say { font: 400 var(--ws-t-say)/1.26 var(--ws-serif); letter-spacing: -.016em; max-width: 19ch; margin-inline: auto; text-align: center; }
.ws-say-in { display: grid; justify-items: center; gap: 22px; text-align: center; }
.ws-say-sub { text-align: center; }
.ws-link {
  color: var(--ws-accent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  display: inline-flex; align-items: center; gap: 6px;
}
.ws-link:hover { text-decoration-color: currentColor; }
/* a link on a line of its own (a card's "Find out more", a list of profiles) is a 44px touch target */
.ws-card > .ws-link, .ws-plainlist .ws-link, .ws-more > .ws-link, .ws-revs-more > .ws-link, .ws-cta .ws-small > .ws-link, .ws-ft-base .ws-link,
.ws-contact-tx .ws-lede > .ws-link:only-child, .ws-sheet-foot > .ws-link { min-height: 44px; }
.ws-link .i { transition: transform var(--ws-fast) ease; }
.ws-link:hover .i { transform: translateX(3px); }
.ws-more { margin-top: 18px; }
.ws-prose { max-width: 68ch; color: var(--ws-fg-2); }
.ws-prose > * + * { margin-top: 1em; }
.ws-prose h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-top: 1.6em; color: var(--ws-fg); }
.ws-prose h3 { font-size: 1.3rem; margin-top: 1.3em; }
.ws-prose ul { list-style: disc; padding-left: 1.4em; }
.ws-prose li + li { margin-top: .4em; }
.ws-prose a { color: var(--ws-accent); text-decoration: underline; text-underline-offset: 3px; }
.ws-plainlist { display: grid; gap: 8px; }
.ws-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--ws-r-pill);
  background: var(--ws-chip-bg); color: var(--ws-fg); font: 600 .9rem/1 var(--ws-sans); text-decoration: none; }
.ws-chip:hover { background: var(--ws-beige); }

/* ---------------- 5. buttons ---------------- */

.ws-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px;
  border-radius: var(--ws-r-pill); border: 1px solid transparent; font: 600 var(--ws-t-btn)/1.15 var(--ws-sans);
  letter-spacing: .005em; text-decoration: none; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform var(--ws-fast) ease, box-shadow var(--ws-fast) ease, background var(--ws-fast) ease;
}
.ws-btn--main { background: var(--ws-main-bg); color: var(--ws-main-fg); }
.ws-btn--plain { background: var(--ws-plain-bg); color: var(--ws-plain-fg); border-color: var(--ws-plain-edge); }
.ws-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(107, 78, 53, .28); }
.ws-tone-night .ws-btn:hover, .ws-on-photo .ws-btn:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }
.ws-btn--s { min-height: 44px; padding: 0 20px; font-size: .90625rem; }
.ws-btn--block { width: 100%; }
.ws-btn[disabled], .ws-btn[aria-disabled="true"] { opacity: .55; cursor: default; transform: none; box-shadow: none; }
.ws-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.ws-row--center { justify-content: center; }
.ws-row--s > .ws-btn { min-height: 44px; padding: 0 20px; font-size: .90625rem; }
@media (max-width: 639px) { .ws-row--stack > .ws-btn { flex: 1 1 100%; } }

/* ---------------- 6. the header: the floating dark glass pill ---------------- */

.ws-hdr { position: fixed; inset: var(--ws-hdr-top) 0 auto; z-index: var(--ws-z-hdr); pointer-events: none; padding-inline: var(--ws-gut); }
.ws-pill {
  pointer-events: auto; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 1180px; height: var(--ws-hdr-h); margin-inline: auto; padding: 6px 6px 6px 18px; border-radius: var(--ws-r-pill);
  background: rgba(29, 25, 21, .74); border: 1px solid rgba(255, 255, 255, .14); box-shadow: var(--ws-sh-pill);
  -webkit-backdrop-filter: var(--ws-glass); backdrop-filter: var(--ws-glass); color: var(--ws-on-night);
  transition: box-shadow var(--ws-mid) ease;
}
.ws-hdr.ws-on .ws-pill { box-shadow: 0 16px 44px rgba(29, 25, 21, .38); }
/* while the Photography menu is open the pill gives up its own glass: a backdrop filter on it would show the page
   through the menu panel inside it */
.ws-pill:has(.ws-has[data-open]), html:not(.ws-js) .ws-pill:has(.ws-has:hover), html:not(.ws-js) .ws-pill:has(.ws-has:focus-within) {
  -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(29, 25, 21, .94);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ws-pill { background: rgba(29, 25, 21, .94); } }
.ws-mark { display: inline-flex; align-items: center; min-height: 44px; color: #fff; flex: none; }
.ws-logo { width: 112px; height: 36px; color: #fff; display: block; }
@media (min-width: 640px) { .ws-logo { width: 132px; height: 42px; } .ws-pill { padding: 8px 8px 8px 20px; } }
.ws-nav { display: none; }
.ws-nav-list { display: flex; align-items: center; gap: 2px; }
.ws-nav-a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--ws-r-pill);
  background: transparent; color: var(--ws-on-night); font: 500 .90625rem/1 var(--ws-sans); text-decoration: none; cursor: pointer;
  transition: background var(--ws-fast) ease;
}
.ws-nav-a:hover { background: rgba(255, 255, 255, .08); }
.ws-nav-a[aria-current="page"], .ws-nav-a[aria-expanded="true"] { background: rgba(255, 255, 255, .14); }
.ws-chev { font-size: .8em; transition: transform var(--ws-fast) ease; }
.ws-nav-a[aria-expanded="true"] .ws-chev { transform: rotate(180deg); }
.ws-hdr-acts { flex: none; gap: 8px; }
.ws-menu-btn { min-width: 44px; }
/* a phone narrower than 380 px (320 to 379: the smaller iPhones, most Androids at 360): the logo, Book now and Menu
   need 346 px at the sizes above, so the pill's spacing, the logo and the two buttons' side padding come in to fit
   from 318 px. Book now and Menu keep their 44 px height and stay the same size as each other. */
@media (max-width: 379px) {
  .ws-pill { gap: 8px; padding-left: 12px; }
  .ws-logo { width: 88px; height: 28px; }
  .ws-hdr-acts { gap: 6px; }
  .ws-hdr-acts .ws-btn--s, .ws-hdr--go .ws-btn--s { padding: 0 14px; }
}
.ws-hdr--go .ws-pill, .ws-hdr--booth .ws-pill { padding-right: 6px; }
.ws-nav--booth { display: block; }
.ws-nav--booth .ws-nav-list { gap: 0; }
.ws-nav--booth .ws-nav-a { padding: 0 10px; font-size: .84rem; }
@media (min-width: 640px) { .ws-nav--booth .ws-nav-a { padding: 0 14px; font-size: .90625rem; } }
@media (max-width: 379px) { .ws-nav--booth .ws-nav-list li:first-child { display: none; } }
@media (min-width: 1100px) {
  .ws-nav { display: block; }
  .ws-menu-btn { display: none; }
}

/* the Photography menu (design 5.3): shown by :hover and :focus-within without the script, by data-open with it */
.ws-has { position: static; }
.ws-mega {
  display: none; position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 1;
  grid-template-columns: 1.1fr .8fr 1fr; gap: 36px; padding: 32px 36px; border-radius: var(--ws-r-lg);
  background: var(--ws-paper); color: var(--ws-ink); box-shadow: var(--ws-sh-2); border: 1px solid rgba(255, 255, 255, .8);
  /* no glass of its own: it sits inside the pill, whose own backdrop filter would leave this one see-through */
}
.ws-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
html:not(.ws-js) .ws-has:hover .ws-mega, html:not(.ws-js) .ws-has:focus-within .ws-mega, .ws-has[data-open] .ws-mega { display: grid; }
@media (prefers-reduced-motion: no-preference) { .ws-has[data-open] .ws-mega { animation: ws-drop var(--ws-mid) var(--ws-ease); } }
@keyframes ws-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.ws-mega .ws-eye { margin-bottom: 14px; }
.ws-mega-list { display: grid; gap: 4px; }
.ws-mega-list a { display: grid; gap: 2px; padding: 10px 12px; margin-inline: -12px; border-radius: var(--ws-r-sm); text-decoration: none; color: var(--ws-ink); }
.ws-mega-list a:hover, .ws-mega-list a[aria-current="page"] { background: rgba(228, 216, 198, .5); }
.ws-mega-list b { font: 400 1.2rem/1.2 var(--ws-serif); }
.ws-mega-list span { font-size: .84rem; color: var(--ws-mute); line-height: 1.4; }
.ws-mega-list--plain a { font-weight: 500; min-height: 44px; align-content: center; }
.ws-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ws-thumb { display: grid; gap: 8px; text-decoration: none; color: var(--ws-ink-2); font-size: .8rem; line-height: 1.4; }
.ws-thumb .ws-pic { border-radius: var(--ws-r-sm); }
.ws-mega-book { display: grid; gap: 12px; align-content: start; }
.ws-mega-pic { border-radius: var(--ws-r-md); }
.ws-mega-say { color: var(--ws-ink-2); font-size: .95rem; }
.ws-mega-book .ws-btn { justify-self: start; }

/* the phone menu: a full height dialog in the night tone (design 5.3) */
.ws-sheet {
  width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0;
  background: var(--ws-night); color: var(--ws-on-night);
}
.ws-sheet[open] { display: flex; flex-direction: column; }
.ws-sheet::backdrop { background: rgba(24, 19, 14, .6); }
.ws-sheet-top { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--ws-gut); }
.ws-sheet-nav { flex: 1; overflow-y: auto; padding: 8px var(--ws-gut) 24px; }
.ws-sheet-nav .ws-eye { margin: 12px 0 4px; }
.ws-sheet-nav ul + ul { margin-top: 18px; }
.ws-sheet-a {
  display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid rgba(255, 255, 255, .12);
  color: var(--ws-on-night); font: 400 1.25rem/1.2 var(--ws-serif); text-decoration: none;
}
.ws-sheet-a[aria-current="page"] { color: var(--ws-beige); }
.ws-sheet-foot { display: grid; gap: 14px; justify-items: center; padding: 16px var(--ws-gut) calc(20px + env(safe-area-inset-bottom)); }

/* ---------------- 7. the hero ---------------- */

.ws-hero { position: relative; isolation: isolate; }
.ws-hero-wash {
  position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: calc(100% + 420px); pointer-events: none;
  background:
    radial-gradient(40% 36% at 10% 8%, var(--ws-wash-a), transparent 70%),
    radial-gradient(36% 32% at 88% 10%, var(--ws-wash-b), transparent 70%),
    radial-gradient(46% 40% at 56% 62%, var(--ws-wash-c), transparent 72%);
}
.ws-hero-wash--night {
  background:
    radial-gradient(44% 40% at 12% 6%, rgba(160, 121, 79, .30), transparent 70%),
    radial-gradient(34% 30% at 90% 8%, rgba(244, 255, 106, .08), transparent 70%),
    radial-gradient(50% 44% at 60% 70%, rgba(107, 78, 53, .28), transparent 72%);
}
.ws-hero-frame {
  position: relative; overflow: hidden; border-radius: var(--ws-r-xl); background: var(--ws-night-2);
  margin: var(--ws-frame-inset) max(var(--ws-frame-inset), calc((100% - var(--ws-max-wide)) / 2)) 0;
  height: max(460px, 78vh); height: max(460px, 78svh); box-shadow: 0 30px 80px rgba(107, 78, 53, .18);
}
.ws-hero--svc .ws-hero-frame { height: max(440px, 70vh); height: max(440px, 70svh); }
@media (min-width: 640px) {
  .ws-hero--full .ws-hero-frame { height: clamp(560px, 86vh, 880px); height: clamp(560px, 86svh, 880px); }
  .ws-hero--svc .ws-hero-frame { height: clamp(460px, 68vh, 720px); height: clamp(460px, 68svh, 720px); }
}
.ws-hero-frame .ws-hero-pic { position: absolute; inset: 0; background: var(--ws-night-2); }
.ws-hero-frame .ws-hero-pic img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .ws-hero-img { animation: ws-drift 34s ease-in-out infinite alternate; transform-origin: 50% 40%; }
}
@keyframes ws-drift { from { transform: scale(1.005); } to { transform: scale(1.075) translate3d(-1.2%, -1.4%, 0); } }
.ws-hero-light {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(55% 60% at 12% 8%, var(--ws-wash-a), transparent 70%), radial-gradient(40% 45% at 88% 12%, var(--ws-wash-b), transparent 70%);
}
.ws-hero-scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(26, 19, 13, .42), rgba(26, 19, 13, 0) 38%, rgba(26, 19, 13, .1) 55%, rgba(26, 19, 13, .74)); }
.ws-hero-tx { display: grid; gap: 16px; justify-items: start; }
.ws-hero-frame .ws-hero-tx { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: 28px; color: #fff; display: block; }
.ws-hero-frame .ws-hero-tx .ws-in { display: grid; gap: 14px; justify-items: start; }
@media (min-width: 1024px) { .ws-hero-frame .ws-hero-tx { padding-bottom: 72px; } }
/* the words on a photo keep their contrast whatever the photo is: a wash under them, darkest at the foot */
.ws-hero-frame .ws-hero-tx { padding-top: 140px; background: linear-gradient(0deg, rgba(26, 19, 13, .8) 0%, rgba(26, 19, 13, .6) 50%, rgba(26, 19, 13, 0) 100%); }
.ws-on-photo .ws-eye { text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }
.ws-hero-h { font-size: var(--ws-t-h1); line-height: 1.02; max-width: 16ch; }
.ws-hero-h.ws-hero-h--full { font-size: var(--ws-t-hero); line-height: 1; letter-spacing: -.018em; max-width: 15ch; }
.ws-on-photo .ws-hero-h, .ws-on-photo h1 { color: #fff; text-shadow: 0 2px 30px rgba(0, 0, 0, .25); }
.ws-on-photo .ws-lede { color: rgba(246, 241, 232, .94); }
.ws-on-photo .ws-eye { color: rgba(246, 241, 232, .86); }
.ws-hero-tx .ws-row { margin-top: 8px; }
.ws-hero-after { display: grid; gap: 18px; justify-items: center; padding-top: 22px; }
@media (min-width: 1024px) { .ws-hero-frame + .ws-hero-after:has(> .ws-tick:first-child) { margin-top: -28px; position: relative; z-index: 1; } }
.ws-hero-end { position: absolute; bottom: 0; left: 0; width: 1px; height: 1px; }

/* a hero with no photograph: the text on the wash, clear of the pill */
.ws-hero--plain { padding-top: calc(var(--ws-hdr-clear) + clamp(8px, 3vw, 48px)); padding-bottom: clamp(32px, 2rem + 2vw, 72px); }
.ws-crumbs + .ws-hero--plain { padding-top: 18px; }
/* the light starts at the top of the page, above the breadcrumbs, so it never begins at a hard edge */
.ws-crumbs + .ws-hero .ws-hero-wash { top: calc(-1 * var(--ws-hdr-clear) - 40px); height: calc(100% + 460px + var(--ws-hdr-clear)); }
.ws-hero--plain .ws-hero-tx { max-width: 60rem; }
.ws-hero--plain h1 { font-size: var(--ws-t-h1); }
.ws-hero-split { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1024px) { .ws-hero-split { grid-template-columns: 1.1fr .9fr; gap: 56px; } }
.ws-hero--book .ws-hero-tx, .ws-hero--thanks .ws-hero-tx { justify-items: start; }
.ws-hero--book .ws-proof { margin-top: 18px; justify-content: flex-start; }
.ws-hero--booth { text-align: left; }

/* ---------------- 8. proof strip and the ticker ---------------- */

.ws-proof {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0; padding: 12px 8px; color: var(--ws-fg-2);
  font-size: .9rem; line-height: 1.35;
}
.ws-proof li { display: inline-flex; align-items: center; gap: 8px; padding: 2px 16px; }
.ws-proof li + li { border-left: 1px solid var(--ws-line); }
.ws-stars { display: inline-flex; gap: 2px; color: #c9962f; font-size: .95rem; }
.ws-tone-night .ws-stars, .ws-on-photo .ws-stars { color: var(--ws-moon); }
@media (max-width: 639px) {
  .ws-proof { display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 8px; }
  .ws-proof li + li { border-left: 0; }
}

.ws-tick {
  display: flex; align-items: center; gap: 14px; width: min(100%, 720px); padding: 10px 12px 10px 18px;
  border-radius: var(--ws-r-pill); background: var(--ws-card-bg); border: 1px solid var(--ws-card-edge); box-shadow: 0 8px 22px rgba(107, 78, 53, .07);
  -webkit-backdrop-filter: var(--ws-glass); backdrop-filter: var(--ws-glass);
}
.ws-tick-lbl { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.ws-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ws-moon); box-shadow: 0 0 0 3px rgba(107, 78, 53, .16); }
.ws-tick-lines { position: relative; flex: 1; min-height: 22px; font-size: .906rem; color: var(--ws-fg-2); }
.ws-js .ws-tick:not(.ws-tick--all) .ws-tick-ln { position: absolute; inset: 0; opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-js .ws-tick:not(.ws-tick--all) .ws-tick-ln.ws-on { opacity: 1; transform: none; }
.ws-tick-hold { flex: none; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--ws-r-pill); background: rgba(107, 78, 53, .09);
  color: var(--ws-accent); font-weight: 600; font-size: .8rem; cursor: pointer; }
@media (max-width: 639px) {
  .ws-tick { border-radius: var(--ws-r-lg); flex-wrap: wrap; }
  .ws-tick-lines { flex-basis: 100%; order: 3; }
}

/* ---------------- 9. photographs ---------------- */

.ws-pic { display: block; position: relative; overflow: hidden; background: var(--ws-sand); }
.ws-tone-night .ws-pic { background: rgba(255, 255, 255, .06); }
.ws-pic > img { width: 100%; height: 100%; object-fit: cover; }
.ws-ar-32 { aspect-ratio: 3 / 2; } .ws-ar-23 { aspect-ratio: 2 / 3; } .ws-ar-45 { aspect-ratio: 4 / 5; }
.ws-ar-43 { aspect-ratio: 4 / 3; } .ws-ar-11 { aspect-ratio: 1; } .ws-ar-169 { aspect-ratio: 16 / 9; }
.ws-fp-t { object-position: 50% 22%; } .ws-fp-b { object-position: 50% 78%; }
.ws-fp-l { object-position: 30% 50%; } .ws-fp-r { object-position: 70% 50%; }
@media (prefers-reduced-motion: no-preference) {
  a .ws-pic img { transition: transform .7s var(--ws-ease); }
  a:hover .ws-pic img { transform: scale(1.035); }
}

/* ---------------- 10. cards ---------------- */

.ws-card { background: var(--ws-card-bg); border: 1px solid var(--ws-card-edge); border-radius: var(--ws-r-lg); box-shadow: var(--ws-sh-1); overflow: hidden; }
a.ws-card { display: block; text-decoration: none; color: inherit; transition: transform var(--ws-mid) ease, box-shadow var(--ws-mid) ease; }
a.ws-card:hover { transform: translateY(-4px); box-shadow: var(--ws-sh-2); }
.ws-svcs, .ws-cards { display: grid; gap: 20px; }
@media (min-width: 640px) { .ws-svcs, .ws-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .ws-svcs { grid-template-columns: repeat(4, 1fr); } .ws-cards { grid-template-columns: repeat(3, 1fr); } }
.ws-svc { padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.ws-svc-no { font: 650 var(--ws-t-eye)/1 var(--ws-sans); letter-spacing: .26em; color: var(--ws-tan); }
.ws-svc-pic { border-radius: var(--ws-r-md); margin: -8px -8px 6px; }
.ws-svc p { color: var(--ws-fg-2); font-size: .97rem; }
.ws-svc-price { margin-top: auto; color: var(--ws-fg); }
.ws-pcard { padding: 12px; display: grid; gap: 14px; align-content: start; }
.ws-pcard .ws-pic { border-radius: var(--ws-r-md); }
.ws-pcard-tx { display: grid; gap: 8px; padding: 6px 10px 12px; }
.ws-pcard-tx p { color: var(--ws-fg-2); font-size: .97rem; }
.ws-cards--words .ws-pcard { padding: 22px; }
.ws-ticks { display: grid; gap: 10px; }
@media (min-width: 640px) { .ws-ticks { grid-template-columns: repeat(2, 1fr); gap: 10px 28px; } .ws-ticks--one { grid-template-columns: 1fr; } }
.ws-ticks li { position: relative; padding-left: 26px; color: var(--ws-fg-2); }
.ws-ticks li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 12px; border-radius: 50%;
  background: var(--ws-beige); box-shadow: inset 0 0 0 2px var(--ws-brown); }
.ws-tone-night .ws-ticks li::before { box-shadow: inset 0 0 0 2px var(--ws-moon); background: transparent; }
.ws-nsteps { display: grid; gap: 18px; counter-reset: none; }
@media (min-width: 1024px) { .ws-nsteps { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; } }
.ws-nstep { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.ws-nstep-n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ws-beige); color: var(--ws-brown);
  font: 650 1rem/1 var(--ws-sans-d); font-variant-numeric: tabular-nums; }
.ws-nstep h3, .ws-nstep h4 { font-size: 1.35rem; margin-bottom: 6px; }
.ws-nstep p { color: var(--ws-fg-2); }
.ws-reasons { display: grid; gap: 16px; }
@media (min-width: 900px) { .ws-reasons { grid-template-columns: repeat(3, 1fr); } }
.ws-reason { padding: 24px; display: grid; gap: 8px; }
.ws-reason-t { font: 400 1.35rem/1.2 var(--ws-serif); color: var(--ws-fg); }
.ws-reason p + p { color: var(--ws-fg-2); }

/* ---------------- 11. recent work, the gallery and the lightbox ---------------- */

.ws-cases { display: grid; }
.ws-case { display: grid; gap: 24px; padding-block: 40px; border-top: 1px solid var(--ws-line); }
.ws-case:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 1024px) { .ws-case { grid-template-columns: 318px 1fr; gap: 72px; padding-block: 56px 64px; } }
.ws-case-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 600 var(--ws-t-eye)/1.5 var(--ws-sans); letter-spacing: .18em;
  text-transform: uppercase; color: var(--ws-fg-mute); margin-bottom: 16px; }
.ws-case-meta span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--ws-tan); margin-right: 10px; vertical-align: middle; }
.ws-case-ix { color: var(--ws-tan); }
.ws-case h3 { margin-bottom: 14px; }
.ws-case-story { color: var(--ws-fg-2); margin-bottom: 18px; }
.ws-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.ws-facts li { padding: 6px 12px; border-radius: var(--ws-r-pill); background: var(--ws-chip-bg); font-size: .85rem; }
.ws-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (min-width: 1024px) { .ws-shots { grid-template-columns: 1.32fr 1fr; gap: 26px; } }
.ws-shot { display: block; text-decoration: none; color: inherit; }
.ws-shot .ws-pic { border-radius: var(--ws-r-md); }
.ws-cap { display: block; margin-top: 10px; font-size: .8rem; color: var(--ws-fg-mute); line-height: 1.5; }
.ws-gal { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 1024px) { .ws-gal { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

.ws-lbx {
  width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0;
  background: rgba(24, 19, 14, .96); color: var(--ws-on-night); overflow: hidden;
}
.ws-lbx[open] { display: grid; grid-template-rows: auto 1fr auto; }
.ws-lbx::backdrop { background: rgba(24, 19, 14, .94); }
.ws-lbx-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px var(--ws-gut); }
.ws-lbx-count { font: 600 var(--ws-t-eye)/1.5 var(--ws-sans); letter-spacing: .22em; text-transform: uppercase; color: rgba(243, 236, 225, .7); }
.ws-lbx-stage { margin: 0; min-height: 0; display: grid; grid-template-rows: 1fr auto; place-items: center; padding: 0 var(--ws-gut); }
.ws-lbx-img { max-width: 100%; max-height: calc(100vh - 220px); max-height: calc(100svh - 220px); width: auto; height: auto; object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55); border-radius: 6px; }
.ws-lbx-under { text-align: center; padding: 14px 0 6px; max-width: 62ch; }
.ws-lbx-cap { font: 400 1.25rem/1.3 var(--ws-serif); }
.ws-lbx-sub { font-size: .85rem; color: rgba(243, 236, 225, .72); margin-top: 4px; }
.ws-lbx-go {
  position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); color: var(--ws-on-night); cursor: pointer; font-size: 1.3rem;
  -webkit-backdrop-filter: var(--ws-glass); backdrop-filter: var(--ws-glass);
}
.ws-lbx-go:hover { background: rgba(255, 255, 255, .16); }
.ws-lbx-go--prev { left: 14px; } .ws-lbx-go--next { right: 14px; }
@media (max-width: 639px) { .ws-lbx-go { width: 44px; height: 44px; margin-top: -22px; } .ws-lbx-go--prev { left: 8px; } .ws-lbx-go--next { right: 8px; } .ws-lbx-cap { font-size: 1.05rem; } }
.ws-lbx-picks { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 10px var(--ws-gut) calc(18px + env(safe-area-inset-bottom)); }
.ws-lbx-picks button { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.ws-lbx-picks button::before { content: ""; width: 34px; height: 3px; border-radius: 2px; background: rgba(243, 236, 225, .28); transition: background .25s ease; }
.ws-lbx-picks button:hover::before { background: rgba(243, 236, 225, .55); }
.ws-lbx-picks button[aria-current="true"]::before { background: #f4e3c9; }

/* ---------------- 12. reviews ---------------- */

.ws-revs { display: grid; gap: 16px; }
@media (max-width: 1023px) {
  .ws-revs { grid-auto-flow: column; grid-auto-columns: min(86%, 380px); overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 4px 4px 18px; margin: -4px -4px 0; overscroll-behavior-x: contain; }
  .ws-revs > li { scroll-snap-align: start; }
}
@media (min-width: 1024px) { .ws-revs { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.ws-revs > li { display: flex; }
.ws-rev { margin: 0; padding: 26px; display: grid; gap: 14px; align-content: start; width: 100%; }
.ws-rev-q { margin: 0; font: 400 1.18rem/1.45 var(--ws-serif); color: var(--ws-fg); }
.ws-rev-by { font-size: .85rem; color: var(--ws-fg-mute); }
.ws-rev-by b { color: var(--ws-fg); font-weight: 650; }
.ws-revs-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 22px; color: var(--ws-fg-2); font-size: .92rem; }
.ws-revs-more > span { display: inline-flex; align-items: center; gap: 8px; }

/* ---------------- 13. the enquiry form ---------------- */

.ws-enq-in { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1024px) { .ws-enq-in { grid-template-columns: 1fr 1.15fr; gap: 56px; } .ws-enq-tx { position: sticky; top: var(--ws-hdr-clear); } }
.ws-enq-tx { display: grid; gap: 14px; }
.ws-enq-card { padding: 22px; }
@media (min-width: 640px) { .ws-enq-card { padding: 34px; } }
.ws-enq-card.ws-tone-night { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); box-shadow: none; }
body.ws-night .ws-enq-card.ws-tone-night { background: rgba(255, 255, 255, .05); }
.ws-sec--form { padding-top: 8px; }
.ws-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.ws-step { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 8px; border-radius: var(--ws-r-pill);
  background: rgba(255, 255, 255, .5); color: var(--ws-fg-mute); font-size: .86rem; font-weight: 600; }
.ws-tone-night .ws-step { background: rgba(255, 255, 255, .06); }
.ws-step b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(107, 78, 53, .12); font-size: .8rem; }
.ws-step[aria-current="step"] { color: var(--ws-fg); background: rgba(228, 216, 198, .72); }
.ws-tone-night .ws-step[aria-current="step"] { background: rgba(228, 216, 198, .16); }
.ws-step[aria-current="step"] b { background: var(--ws-brown); color: #fffaf4; }
.ws-step.ws-done b { background: var(--ws-moon); color: var(--ws-ink); }
.ws-form { display: grid; gap: 18px; }
.ws-pane { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 18px; }
.ws-pane + .ws-pane { margin-top: 10px; padding-top: 22px; border-top: 1px solid var(--ws-line); }
.ws-js .ws-pane + .ws-pane { margin-top: 0; padding-top: 0; border-top: 0; }
.ws-pane-lg { padding: 0; margin-bottom: 4px; font: 400 1.5rem/1.2 var(--ws-serif); color: var(--ws-fg); float: left; width: 100%; }
.ws-pane-lg + * { clear: both; }
.ws-js .ws-pane-lg { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; float: none; }
.ws-fld { display: grid; gap: 7px; min-width: 0; border: 0; margin: 0; padding: 0; }
.ws-lbl { font: 600 var(--ws-t-small)/1.4 var(--ws-sans); color: var(--ws-fg); padding: 0; }
.ws-opt { font-weight: 400; color: var(--ws-fg-mute); }
.ws-inp {
  display: block; width: 100%; min-height: 48px; padding: 12px 15px; border-radius: var(--ws-r-sm);
  border: 1px solid var(--ws-field-edge); background: var(--ws-field-bg); color: var(--ws-fg); font-size: 16px; line-height: 1.35;
  transition: border-color var(--ws-fast) ease, box-shadow var(--ws-fast) ease;
}
.ws-inp:focus { outline: none; border-color: var(--ws-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws-focus) 35%, transparent); }
.ws-inp--short { max-width: 12rem; }
textarea.ws-inp { resize: vertical; min-height: 96px; }
select.ws-inp { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.ws-tone-night select.ws-inp option { color: var(--ws-ink); }
input[type="date"].ws-inp { -webkit-appearance: none; appearance: none; min-height: 48px; }
input[type="date"].ws-inp::-webkit-date-and-time-value { text-align: left; }
.ws-tone-night input[type="date"].ws-inp { color-scheme: dark; }
.ws-inp[aria-invalid="true"] { border-color: var(--ws-bad-edge); background: var(--ws-bad-bg); }
.ws-inp:disabled { opacity: .55; cursor: not-allowed; }
.ws-hint { font-size: .84rem; color: var(--ws-fg-mute); line-height: 1.45; }
.ws-err { font-size: .86rem; color: var(--ws-bad); line-height: 1.45; font-weight: 600; }
.ws-pair { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.ws-pair > .ws-err, .ws-pair > .ws-hint { grid-column: 1 / -1; }
@media (max-width: 479px) { .ws-pair:not(.ws-times) { grid-template-columns: 1fr; } }
.ws-tiles { gap: 10px; }
.ws-tiles-in { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 640px) { .ws-tiles-in { grid-template-columns: repeat(3, 1fr); } }
.ws-tile { position: relative; display: flex; cursor: pointer; }
.ws-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.ws-tile span {
  display: flex; align-items: center; width: 100%; min-height: 56px; padding: 10px 14px; border-radius: var(--ws-r-sm);
  border: 1px solid var(--ws-field-edge); background: var(--ws-field-bg); font-size: .92rem; font-weight: 600; line-height: 1.3;
  transition: background var(--ws-fast) ease, box-shadow var(--ws-fast) ease, border-color var(--ws-fast) ease;
}
.ws-tile:hover span { border-color: var(--ws-focus); }
.ws-tile input:checked + span { background: rgba(228, 216, 198, .8); border-color: var(--ws-brown); box-shadow: inset 0 0 0 1px var(--ws-brown); }
.ws-tone-night .ws-tile input:checked + span { background: rgba(228, 216, 198, .18); border-color: var(--ws-beige); box-shadow: inset 0 0 0 1px var(--ws-beige); }
.ws-tile input:focus-visible + span { outline: 3px solid var(--ws-focus); outline-offset: 2px; }
.ws-tiles[aria-invalid="true"] .ws-tile span { border-color: var(--ws-bad-edge); }
.ws-check { display: flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 500; cursor: pointer; }
.ws-check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--ws-brown); }
.ws-tone-night .ws-check input { accent-color: var(--ws-beige); }
.ws-avail, .ws-guide { padding: 10px 14px; border-radius: var(--ws-r-sm); background: var(--ws-chip-bg); font-size: .9rem; color: var(--ws-fg-2); line-height: 1.45; }
.ws-avail[data-state="full"] { background: var(--ws-bad-bg); color: var(--ws-bad); }
.ws-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.ws-sendfail { padding: 12px 16px; border-radius: var(--ws-r-sm); background: var(--ws-bad-bg); color: var(--ws-bad); border: 1px solid var(--ws-bad-edge); font-size: .92rem; }
.ws-enq-nav { margin-top: 6px; }
.ws-enq-nav .ws-btn { flex: 1 1 auto; }
@media (min-width: 640px) { .ws-enq-nav .ws-btn { flex: 0 0 auto; } }

/* ---------------- 14. questions, the closing band, breadcrumbs ---------------- */

.ws-faqs { display: grid; border-top: 1px solid var(--ws-line); }
.ws-faq { border-bottom: 1px solid var(--ws-line); }
.ws-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 64px; padding: 16px 0; cursor: pointer; list-style: none; }
.ws-faq summary::-webkit-details-marker { display: none; }
.ws-faq summary h2, .ws-faq summary h3, .ws-faq summary h4 { font: 400 clamp(1.15rem, 1rem + .6vw, 1.45rem)/1.3 var(--ws-serif); }
.ws-faq-pm { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ws-chip-bg); }
.ws-faq-pm::before, .ws-faq-pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 1px; background: currentColor; transition: transform var(--ws-fast) ease; }
.ws-faq-pm::after { transform: rotate(90deg); }
.ws-faq[open] .ws-faq-pm::after { transform: rotate(0); }
.ws-faq-a { padding: 0 0 20px; color: var(--ws-fg-2); max-width: 64ch; }
.ws-jump { position: relative; z-index: 1; }
.ws-jump ul { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 8px; }

.ws-cta {
  padding: clamp(32px, 2rem + 3vw, 64px) clamp(20px, 1rem + 3vw, 58px); text-align: center; display: grid; gap: 16px; justify-items: center;
  background: linear-gradient(135deg, rgba(228, 216, 198, .85), rgba(255, 255, 255, .6) 60%, rgba(244, 255, 106, .32));
}
body.ws-night .ws-cta { background: linear-gradient(135deg, rgba(160, 121, 79, .3), rgba(255, 255, 255, .04) 60%, rgba(244, 255, 106, .08)); }
.ws-cta .ws-lede { margin-inline: auto; text-align: center; }
.ws-cta-say { font: 400 var(--ws-t-h2)/1.06 var(--ws-serif); letter-spacing: -.014em; color: var(--ws-fg); max-width: 18ch; }

.ws-crumbs { padding-top: var(--ws-hdr-clear); font-size: var(--ws-t-small); color: var(--ws-fg-mute); position: relative; z-index: 1; }
.ws-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ws-crumbs li { display: inline-flex; align-items: center; min-height: 44px; }
.ws-crumbs li + li::before { content: "/"; margin: 0 8px 0 4px; color: var(--ws-tan); }
.ws-crumbs a { color: var(--ws-fg-2); text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.ws-crumbs a:hover { color: var(--ws-accent); text-decoration: underline; }
.ws-crumbs + .ws-hero .ws-hero-frame { margin-top: 12px; }

/* ---------------- 15. the footer and the phone's Book bar ---------------- */

.ws-ft { background: var(--ws-night); color: var(--ws-on-night); padding: clamp(48px, 3rem + 2vw, 80px) 0 calc(28px + env(safe-area-inset-bottom)); }
.ws-ft a { color: var(--ws-on-night); text-decoration: none; }
.ws-ft a:hover { color: var(--ws-beige); text-decoration: underline; text-underline-offset: 3px; }
.ws-ft-top { display: grid; gap: 12px; max-width: 40ch; }
.ws-ft-mark .ws-logo { width: 160px; height: 51px; }
.ws-ft-line { color: rgba(242, 239, 232, .78); }
.ws-ft-proof { display: flex; align-items: center; gap: 8px; color: rgba(242, 239, 232, .78); font-size: .9rem; }
.ws-ft-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; margin: 40px 0; }
.ws-ft-cols li a { overflow-wrap: anywhere; min-width: 0; }
@media (min-width: 1024px) { .ws-ft-cols { grid-template-columns: repeat(4, 1fr); } }
.ws-ft-cols .ws-eye { margin-bottom: 12px; }
.ws-ft-cols li a, .ws-ft-cols li span { display: inline-flex; align-items: center; min-height: 44px; color: rgba(242, 239, 232, .86); font-size: .95rem; }
.ws-ft-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12);
  color: rgba(242, 239, 232, .66); font-size: .82rem; }
.ws-ft-base .ws-link { color: rgba(242, 239, 232, .8); font-weight: 500; }
.ws-ft--min { padding: 24px 0 calc(24px + env(safe-area-inset-bottom)); }
.ws-ft-min { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; justify-content: center; font-size: .86rem; color: rgba(242, 239, 232, .74); }
.ws-ft-min .ws-link { color: var(--ws-beige); font-weight: 500; min-height: 44px; }

.ws-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--ws-z-dock); padding: 10px var(--ws-gut) calc(10px + env(safe-area-inset-bottom));
  background: rgba(29, 25, 21, .86); border-top: 1px solid rgba(255, 255, 255, .12); -webkit-backdrop-filter: var(--ws-glass); backdrop-filter: var(--ws-glass);
  transform: translateY(0); transition: transform var(--ws-mid) ease;
}
.ws-dock.ws-off { transform: translateY(110%); }
@media (min-width: 1024px) { .ws-dock { display: none !important; } }
body.ws-docked { padding-bottom: 72px; }
@media (min-width: 1024px) { body.ws-docked { padding-bottom: 0; } }

/* ---------------- 16. the pages' own pieces ---------------- */

/* find your photobooth photos */
.ws-find-card { display: grid; gap: 22px; padding: clamp(22px, 1rem + 2vw, 36px); }
@media (min-width: 900px) { .ws-find-card { grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; } }
.ws-find-tx { display: grid; gap: 10px; }
.ws-find-tx p { color: var(--ws-fg-2); }
.ws-find-form { display: grid; gap: 12px; }
.ws-find-form .ws-btn { justify-self: start; }
@media (max-width: 639px) { .ws-find-form .ws-btn { justify-self: stretch; } }
.ws-find-said { padding: 10px 14px; border-radius: var(--ws-r-sm); background: var(--ws-chip-bg); font-size: .92rem; }

/* not found */
.ws-lost-pic { padding: 12px; }
.ws-lost-pic .ws-pic { border-radius: var(--ws-r-md); }
@media (max-width: 1023px) { .ws-lost-pic { display: none; } }
.ws-tries { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 640px) { .ws-tries { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .ws-tries { grid-template-columns: repeat(6, 1fr); } }
.ws-try { padding: 8px; }
.ws-try .ws-pic { border-radius: 16px; }
.ws-try-blank { background: radial-gradient(70% 60% at 30% 20%, rgba(160, 121, 79, .45), transparent 70%), var(--ws-night); }
.ws-try-name { display: block; padding: 12px 8px 8px; font: 400 1.1rem/1.2 var(--ws-serif); }

/* contact */
.ws-contact-tx { display: grid; gap: 40px; }
.ws-contact-tx > section { display: grid; gap: 12px; align-content: start; }
.ws-contact-tx > section > p { color: var(--ws-fg-2); }
@media (min-width: 1024px) {
  .ws-contact-tx { grid-template-columns: 1fr 1.15fr; column-gap: 56px; row-gap: 36px; }
  .ws-contact-tx > section { grid-column: 1; }
  .ws-contact-tx > .ws-contact-form { grid-column: 2; grid-row: 1 / span 4; }
}

/* thank you */
.ws-hero--thanks .ws-done { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--ws-beige); color: var(--ws-brown); font-size: 1.8rem; }
.ws-tone-night .ws-hero--thanks .ws-done, body.ws-night .ws-hero--thanks .ws-done { background: rgba(228, 216, 198, .16); color: var(--ws-moon); }
.ws-recap { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; padding: 22px; margin: 0; }
.ws-recap dt { color: var(--ws-fg-mute); font-size: .88rem; }
.ws-recap dd { margin: 0; color: var(--ws-fg); }

/* the Go page: the text and proof beside the form on a computer, the form right after the hero on a phone */
.ws-hero--go { padding-bottom: clamp(24px, 2vw + 16px, 56px); }
.ws-hero-frame--short { height: 38vh; height: 38svh; min-height: 220px; }
.ws-go-split { display: grid; gap: 24px; padding-top: 22px; }
.ws-go-tx { display: grid; gap: 14px; justify-items: start; }
.ws-go-tx .ws-proof { justify-content: flex-start; padding-inline: 0; }
.ws-go-tx .ws-proof li:first-child { padding-left: 0; }
.ws-hero--go:not(:has(.ws-hero-frame)) .ws-go-split { padding-top: calc(var(--ws-hdr-clear) + 8px); }
@media (min-width: 1024px) {
  .ws-hero--go .ws-hero-frame--short { height: 34vh; height: 34svh; }
  .ws-go-split { grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: start; padding-top: 36px; }
  .ws-go-first { display: none; }
}
.ws-price-line { color: var(--ws-fg); max-width: none; }

/* the service, about and team pages: a price table, two cards side by side, two short sections side by side, and
   the photobooth page's proof strip under its left-aligned words */
.ws-prices { display: grid; grid-template-columns: 1fr auto; margin: 0; padding: 6px clamp(18px, 1rem + 1vw, 28px); }
.ws-prices dt, .ws-prices dd { margin: 0; padding: 14px 0; border-top: 1px solid var(--ws-line); }
.ws-prices dt:first-of-type, .ws-prices dt:first-of-type + dd { border-top: 0; }
.ws-prices dt { color: var(--ws-fg-2); }
.ws-prices dd { text-align: right; color: var(--ws-fg); font-size: 1.05rem; }
@media (min-width: 640px) { .ws-cards.ws-cards--two { grid-template-columns: repeat(2, 1fr); } }
.ws-duo { display: grid; gap: 48px; }
@media (min-width: 900px) { .ws-duo { grid-template-columns: 1fr 1fr; gap: 72px; } }
.ws-duo > section { display: grid; gap: 14px; align-content: start; }
.ws-duo > section > p { color: var(--ws-fg-2); }
.ws-hero--booth .ws-proof { justify-content: flex-start; padding-inline: 0; }
/* the Go page's proof beside its words is a short stacked list, left-aligned, on a phone and a computer alike */
.ws-go-tx .ws-proof { display: grid; grid-template-columns: 1fr; justify-items: start; text-align: left; gap: 6px; padding: 4px 0; }
.ws-go-tx .ws-proof li, .ws-go-tx .ws-proof li + li { padding: 0; border-left: 0; }
.ws-hero--booth .ws-proof li:first-child { padding-left: 0; }
@media (max-width: 639px) { .ws-hero--booth .ws-proof { justify-items: start; text-align: left; } .ws-hero--booth .ws-proof li { padding-left: 0; } }

/* ---------------- 17. the night pages (the photobooth host) ---------------- */

body.ws-night { background: var(--ws-night); color: var(--ws-on-night); }
body.ws-night .ws-ft { background: #16120f; }
body.ws-night .ws-card { box-shadow: none; }
body.ws-night .ws-tone-sand { --ws-bg: #221c17; --ws-card-bg: rgba(255, 255, 255, .05); background: var(--ws-bg); }

/* ---------------- 18. motion: sections settle in, and nothing moves under reduced motion ---------------- */

@media (prefers-reduced-motion: no-preference) {
  .ws-js .ws-rv { opacity: 0; transform: translateY(22px); transition: opacity var(--ws-slow) var(--ws-ease), transform var(--ws-slow) var(--ws-ease); }
  .ws-js .ws-rv.ws-on { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ws *, .ws *::before, .ws *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}