/* The windows style: Joseph Michael Shutters & Blinds' approved homepage (option 4, 26 Oct 2026), for firms that
   make and fit shutters, blinds and awnings. Ported from the mockup's shared/jm.css and 4-combined.html's own styles,
   in the same order, so a difference from the mockup is easy to find. theme.css (written by the build) sets the
   site's colours and fonts; the shades below that aren't settings are option 4's. */
:root {
  --navy: var(--colour-main);
  --navy-deep: #1a2539;
  --night: #121a29;
  --ink: var(--colour-text);
  --orange: #e84820;
  --orange-ink: var(--colour-accent);
  --orange-hover: #ab3211;
  --orange-on-dark: #f46a43;
  --white: var(--colour-background);
  --mist: var(--colour-surface);
  --mist-2: #e4e8ee;
  --line: #dde2ea;
  --muted: #465063;
  --on-dark-soft: rgba(255, 255, 255, 0.8);
  --glass: rgba(255, 255, 255, 0.08);
  --glass-line: rgba(255, 255, 255, 0.2);
  --error: #ffc9b8;
  --font-ui: var(--font-body);
  --font-display: var(--font-headings);
  --radius-btn: 999px;
  --radius-card: 24px;
  --soft-line: rgba(255, 255, 255, 0.16);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --t-press: 140ms;
  --t-hover: 200ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; color: var(--ink); background: var(--white); font-family: var(--font-ui); font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
::selection { background: var(--orange); color: #fff; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--orange-ink); outline-offset: 3px; }
.on-dark :focus-visible, .on-dark:focus-visible { outline-color: var(--orange-on-dark); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -80px; z-index: 100; background: var(--orange-ink); color: #fff; padding: 12px 18px; font-weight: 700; text-decoration: none; border-radius: 10px; }
.skip-link:focus { top: 12px; }
.stars { display: inline-flex; gap: 3px; }
.stars svg { width: 1em; height: 1em; }
.icon { width: 1.1em; height: 1.1em; flex: none; }

/* ---------- Page frame (option 4) ---------- */
.wrap { max-width: 1360px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 56px); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; line-height: 1.06; }
h2 { font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.75rem); text-wrap: balance; }
h3 { font-size: 1.625rem; line-height: 1.2; }
.lede { color: var(--muted); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); max-width: 34em; }
.on-dark .lede { color: var(--on-dark-soft); }
.sec { padding-block: clamp(56px, 6.5vw, 104px); } /* tighter (Jack, 28 Oct: no big gaps) */
.night { background: var(--night); color: #fff; }
.deep { background: var(--navy-deep); color: #fff; }
.mist { background: var(--mist); }
.head2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 64px; align-items: end; margin-bottom: clamp(36px, 4.5vw, 60px); }

/* ---------- Buttons: a slim pill, the arrow after the words; light sweeps across the orange and the arrow nudges on ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 0; border-radius: var(--radius-btn); font-weight: 700; font-size: 1rem; letter-spacing: -0.005em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform 160ms var(--ease), background-color var(--t-hover) ease, box-shadow var(--t-hover) ease, color var(--t-hover) ease; }
.btn:active { transform: scale(0.97); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--tab { padding-right: 20px; }
.btn .tab { display: grid; place-items: center; transition: transform 320ms var(--ease); }
.btn .tab svg { width: 16px; height: 16px; }
.btn--primary { background: var(--orange-ink); color: #fff; }
.btn--navy { background: var(--navy); color: #fff; }
.btn--glass { background: var(--glass); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.btn--outline { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn--white { background: var(--white); color: var(--ink); }
:is(.btn, .contact, .mm__wa) svg.i-wa { color: #25d366; } /* WhatsApp's own green */
.btn--small { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; }
.btn--small.btn--tab { padding-right: 20px; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--orange-hover); }
  .btn:hover .tab { transform: translateX(4px); }
  .btn--navy:hover { background: var(--ink); }
  .btn--glass:hover { background: rgba(255, 255, 255, 0.16); }
  .btn--outline:hover { box-shadow: inset 0 0 0 1px var(--ink); }
  .btn--white:hover { background: var(--mist); }
}
.more { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 0.9375rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--orange-ink); min-height: 44px; }
.on-dark .more, .more.on-dark { color: var(--orange-on-dark); }
.more svg { width: 16px; height: 16px; transition: transform 260ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .more:hover svg { transform: translateX(4px); } }

/* ---------- The opening's intro (a fresh visit only: the page's head adds .intro-play). The logo tab drops in like a
   pulled blind and the blind in its round window comes down; the headline's words rise in one by one, the orange one
   last. The window is a disc of its own colour over the logo (--wl, --wt, --ws in heights of the logo image, from
   opening.logo_window) wiping away from the top, so the logo itself shows through. ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js.intro-play .top[data-load] { opacity: 1; transform: none; animation: none; }  /* the tab dropping in is its entrance */
  .js.intro-play .logo-tab { animation: tab-drop 720ms cubic-bezier(0.34, 1.45, 0.64, 1) 80ms both; }
  .js.intro-play .logo-tab[style*="--ws"]::after { content: ""; position: absolute; left: calc(var(--lpx) + var(--lh) * var(--wl)); top: calc(var(--lpt) + var(--lh) * var(--wt)); width: calc(var(--lh) * var(--ws)); aspect-ratio: 1; border-radius: 50%; background: var(--wc); pointer-events: none; animation: window-blind 760ms var(--ease-in-out) 620ms both; }
  .js.intro-play .hero h1 { opacity: 1; transform: none; animation: none; }
  .js.intro-play .hero h1 .hero__label { opacity: 0; animation: arrive 700ms var(--ease) 120ms forwards; }
  .js.intro-play .hero h1 .w { display: inline-block; opacity: 0; transform: translateY(0.4em); filter: blur(8px); animation: word-in 760ms var(--ease) forwards; animation-delay: calc(260ms + var(--w) * 90ms); }
  .js.intro-play .hero h1 .w--last { display: inline-block; opacity: 0; transform: translateY(-0.5em) scale(1.12); animation: word-land 680ms cubic-bezier(0.34, 1.5, 0.64, 1) 820ms forwards; }
}
@keyframes tab-drop { from { translate: 0 -115%; } }
@keyframes window-blind { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(100% 0 0 0); } }
@keyframes word-in { to { opacity: 1; transform: none; filter: none; } }
@keyframes word-land { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } }

/* ---------- The louvre room ---------- */
.room { --open: 0.72; position: relative; border-radius: 14px; overflow: hidden; padding: 26px 0 0; background: #e3e7ee; isolation: isolate; }
.room::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #fff2d9; opacity: calc(var(--open) * 0.55); transition: opacity 600ms var(--ease-in-out); }
.room::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: #1a2539; opacity: calc((1 - var(--open)) * 0.22); transition: opacity 600ms var(--ease-in-out); }
.room.is-live::before, .room.is-live::after, .room.is-live .floor__light { transition: none; }
.floor { position: relative; height: 92px; background: linear-gradient(180deg, #cdbfa9, #b9a88e); overflow: hidden; }
.floor__light { position: absolute; left: 18%; right: 18%; top: -6px; height: 150px; background: repeating-linear-gradient(180deg, rgba(255, 233, 186, 0.95) 0 7px, transparent 7px 15px); transform: perspective(240px) rotateX(58deg) skewX(-14deg); transform-origin: top; opacity: var(--light, 0.7); transition: opacity 600ms var(--ease-in-out); }
.sill { position: relative; z-index: 2; height: 10px; margin: 0 auto; width: calc(min(100% - 40px, var(--elev-w, 260px)) + 34px); background: linear-gradient(180deg, #ffffff, #e5e1d9); border-radius: 2px; box-shadow: 0 6px 10px rgba(0, 0, 0, 0.14); }
.elev { --glass-view: linear-gradient(180deg, #8fbbe3 0%, #c9e1f4 52%, #a9c58d 53%, #8eae73 100%); --h: 250px; width: min(100% - 40px, calc(var(--h) * var(--aspect, 0.8))); aspect-ratio: var(--aspect, 0.8); display: flex; gap: 5px; margin-inline: auto; padding: 8px; background: #fbfaf7; box-shadow: 0 0 0 1px #e7e3dc, 0 18px 30px -18px rgba(0, 0, 0, 0.36); border-radius: 3px; cursor: grab; user-select: none; touch-action: pan-y; }
.elev.is-dragging { cursor: grabbing; }
.elev__section { position: relative; flex: var(--w, 1) 1 0; background: var(--glass-view); perspective: 700px; }
.elev__section.is-side { filter: brightness(0.92); }
.elev__tier { position: absolute; left: 0; right: 0; display: flex; gap: 3px; }
.elev__leaf { position: relative; flex: 1 1 0; background: #f8f6f1; padding: 5px; display: flex; flex-direction: column; gap: 6px; box-shadow: inset 0 0 0 1px #e3ded5, inset -2px 0 0 #ebe7df; transition: transform 520ms var(--ease-in-out); }
.elev__leaf.is-left { transform-origin: 0 50%; }
.elev__leaf.is-right { transform-origin: 100% 50%; }
.elev__tier.is-folded .elev__leaf.is-left { transform: rotateY(-78deg); }
.elev__tier.is-folded .elev__leaf.is-right { transform: rotateY(78deg); }
.elev__group { position: relative; flex: 1 1 0; display: flex; flex-direction: column; background: var(--glass-view); overflow: clip; perspective: 260px; }
.elev__group > i { flex: 1 1 0; display: block; position: relative; }
.elev__group > i::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; bottom: -1px; background: linear-gradient(180deg, #ffffff 0%, #f3f0ea 55%, #d6d2c9 100%); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.13); transform: rotateX(var(--a, 0deg)); transition: transform 600ms var(--ease-in-out); }
.elev__group.is-bottom > i::before { transform: rotateX(var(--ab, 0deg)); }
.elev__group::after { content: ""; position: absolute; top: 8%; bottom: 8%; left: 50%; width: 3px; margin-left: -1.5px; z-index: 1; border-radius: 2px; background: #ece8e0; box-shadow: 1px 0 0 rgba(0, 0, 0, 0.1); transform: translateY(calc((var(--open-top, 0.72) - 0.5) * 10px)); transition: transform 600ms var(--ease-in-out); }
.elev__group.is-bottom::after { transform: translateY(calc((var(--open-bottom, 0.72) - 0.5) * 10px)); }
.elev.is-live .elev__group > i::before, .elev.is-live .elev__group::after { transition: none; }
.elev__solid { flex: 1 1 0; display: grid; gap: 8px; padding: 8px; background: #f8f6f1; }
.elev__solid > i { display: block; background: #ece8df; box-shadow: inset 0 0 0 1px #e1dcd2; }
.tilt__top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.tilt__top label { font-weight: 800; }
.tilt__top output { font-family: var(--font-display); font-size: 1.625rem; line-height: 1; font-variant-numeric: tabular-nums; }
input[type="range"] { --val: 72%; -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; margin: 6px 0 0; }
input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--orange-ink) 0 var(--val), var(--mist-2) var(--val) 100%); }
input[type="range"]::-moz-range-track { height: 8px; border-radius: 999px; background: var(--mist-2); }
input[type="range"]::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--orange-ink); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--navy), 0 6px 14px rgba(0, 0, 0, 0.22); transition: transform var(--t-press) var(--ease); }
input[type="range"]::-moz-range-thumb { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--navy), 0 6px 14px rgba(0, 0, 0, 0.22); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
input[type="range"]:disabled { opacity: 0.4; cursor: not-allowed; }
.presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 5px; background: var(--white); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.presets button { min-height: 44px; border: 0; border-radius: 8px; background: transparent; font-weight: 800; font-size: 0.9375rem; color: var(--muted); cursor: pointer; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease); }
.presets button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.presets button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .presets button:hover:not([aria-pressed="true"]) { background: var(--mist); color: var(--ink); } }
.presets button:disabled { opacity: 0.4; cursor: not-allowed; }
.switch { display: flex; align-items: center; gap: 14px; min-height: 44px; font-weight: 800; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__track { width: 52px; height: 30px; flex: none; border-radius: 999px; background: var(--mist-2); box-shadow: inset 0 0 0 1px var(--line); position: relative; transition: background-color 240ms ease; }
.switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); transition: transform 240ms var(--ease); }
.switch input:checked + .switch__track { background: var(--orange-ink); box-shadow: none; }
.switch input:checked + .switch__track::after { transform: translateX(22px); }
.switch input:focus-visible + .switch__track { outline: 3px solid var(--orange-ink); outline-offset: 3px; }
.switch[hidden] { display: none; }
.spec { font-size: 1rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.on-dark .spec { color: var(--on-dark-soft); }
.chooser__photo img { transition: opacity 320ms ease, transform 700ms var(--ease), filter 320ms ease; }
.chooser__photo img.is-out { opacity: 0; transform: scale(1.04); filter: blur(6px); }

/* ---------- The blinds window ---------- */
.stage__wall { background: var(--mist); border-radius: var(--radius-card); padding: 36px 36px 0; overflow: hidden; }
.win { --drop: 1; position: relative; aspect-ratio: 4 / 5; border: 12px solid #fbfaf7; border-radius: 3px; box-shadow: 0 0 0 1px #e3ded5, 0 24px 40px -26px rgba(0, 0, 0, 0.45); overflow: hidden; background: linear-gradient(180deg, #8fbbe3 0%, #cfe4f5 56%, #a9c58d 57%, #8aaa70 100%); }
.win::before, .win::after { content: ""; position: absolute; z-index: 0; background: #fbfaf7; }
.win::before { left: 50%; top: 0; bottom: 0; width: 8px; margin-left: -4px; }
.win::after { top: 46%; left: 0; right: 0; height: 8px; }
.win__blind { position: absolute; inset: 0; z-index: 1; }
.win__rail { position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 16px; background: linear-gradient(180deg, #ffffff, #dedad2); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); }
.win.no-anim *, .win.no-anim *::before, .win.no-anim *::after { transition: none !important; animation: none !important; }
.stage__sill { height: 16px; margin: 0 -12px; background: linear-gradient(180deg, #ffffff, #e2ded6); box-shadow: 0 8px 14px rgba(0, 0, 0, 0.12); position: relative; z-index: 1; }
.stage__floor { height: 36px; margin: 0 -36px; background: var(--mist-2); }
.roller .sheet, .dn .sheet { position: absolute; inset: 14px 0 0; transform: translateY(calc((var(--drop) - 1) * 100%)); transition: transform 1150ms var(--ease-in-out); }
.roller .sheet { background: #ddd6c9 repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 5px); }
.roller .sheet::after, .dn .sheet::after, .pleat .sheet::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: 0; height: 12px; border-radius: 3px; background: linear-gradient(180deg, #c8c1b4, #a9a294); }
.dn .sheet { background: repeating-linear-gradient(180deg, rgba(88, 99, 118, 0.94) 0 26px, rgba(255, 255, 255, 0.28) 26px 52px); }
.dn .sheet i { position: absolute; inset: 0 0 12px; background: repeating-linear-gradient(180deg, rgba(88, 99, 118, 0.94) 0 26px, transparent 26px 52px); }
.win.is-down .dn .sheet i { animation: dn-filter 3.2s var(--ease-in-out) 1.3s infinite alternate; }
@keyframes dn-filter { 0%, 18% { transform: translateY(0); } 82%, 100% { transform: translateY(26px); } }
.roman > span { position: absolute; left: 0; right: 0; top: calc(14px + var(--i) * (100% - 14px) / 6); height: calc((100% - 14px) / 6 + 1px); background: linear-gradient(180deg, #344661 0%, #3f5370 62%, #2b3a52 100%); transform: translateY(calc((1 - var(--drop)) * -100% * var(--i))); transition: transform 1150ms var(--ease-in-out); z-index: calc(10 - var(--i)); }
.roman > span:last-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: #22304a; }
.ven { position: absolute; inset: 14px 0 0; display: flex; flex-direction: column; perspective: 400px; }
.ven > span { flex: 1 1 0; position: relative; transform: translateY(calc((1 - var(--drop)) * -100% * var(--i))); transition: transform 1100ms var(--ease-in-out); }
.ven > span > b { position: absolute; left: 0; right: 0; top: -1px; bottom: -1px; background: linear-gradient(180deg, #e2c49a 0%, #c99f6c 60%, #a97f4f 100%); box-shadow: 0 1px 1px rgba(60, 40, 20, 0.25); transform: rotateX(var(--va, 0deg)); transition: transform 700ms var(--ease-in-out); }
.win.is-down .ven { --va: 68deg; }
.win.is-down .ven > span > b { transition-delay: 1000ms; }
.vert { position: absolute; inset: 14px 0 0; display: flex; perspective: 700px; }
.vert > span { flex: 1 1 0; transform: translateX(calc((1 - var(--drop)) * -100% * var(--i))); transition: transform 1150ms var(--ease-in-out); }
.vert > span > b { display: block; height: 100%; margin: 0 1px; background: linear-gradient(90deg, #f1eee8 0%, #e1dcd2 100%); box-shadow: 1px 0 1px rgba(0, 0, 0, 0.1); transform: rotateY(var(--vy, 72deg)); transition: transform 700ms var(--ease-in-out); }
.win.is-down .vert { --vy: 0deg; }
.win.is-down .vert > span > b { transition-delay: 1000ms; }
.pleat { position: absolute; inset: 0; box-shadow: inset 0 0 0 6px #c6ccd5; }
.pleat .sheet { position: absolute; inset: 6px; transform-origin: top; transform: scaleY(max(var(--drop), 0.04)); background: repeating-linear-gradient(180deg, #f7f6f2 0 5px, #dcd8cf 5px 10px); transition: transform 1150ms var(--ease-in-out); }

/* ---------- Form fields ---------- */
.field { display: grid; gap: 8px; align-content: start; }
.field--wide { grid-column: 1 / -1; }
.field > label { font-weight: 800; font-size: 1rem; }
.field > label span { font-weight: 500; opacity: 0.8; }
.field input, .field textarea { width: 100%; min-height: 56px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); padding: 12px 16px; font-size: 1.0625rem; transition: border-color var(--t-hover) ease; }
.on-dark .field input, .on-dark .field textarea { border-color: transparent; }
.field textarea { min-height: 104px; resize: vertical; }
.field [aria-invalid="true"] { border-color: var(--orange-ink); }
.on-dark .field [aria-invalid="true"] { border-color: var(--error); }
.field .error { font-size: 1rem; color: var(--orange-ink); }
.on-dark .field .error { color: var(--error); }
.field .error:empty, .field .error[hidden] { display: none; }
.field[hidden] { display: none; }  /* a survey question waiting for an answer (data-show-if) */
.field.is-prefilled textarea { animation: prefill 1.4s var(--ease); }
@keyframes prefill { from { background: #ffe4da; } to { background: #fff; } }
.done { grid-column: 1 / -1; display: grid; gap: 14px; justify-items: start; padding-block: 12px 4px; }
.done:focus { outline: none; }
.done h3 { font-family: var(--font-display); font-size: clamp(2rem, 1.6rem + 1vw, 2.5rem); line-height: 1.15; }
.done p { color: var(--muted); max-width: 30em; }
.done svg { width: 64px; height: 64px; }
.done circle { fill: var(--orange-ink); }
.done path { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .done circle { transform-origin: center; animation: done-pop 520ms var(--ease) both; }
  .done path { stroke-dashoffset: 1; animation: done-draw 520ms var(--ease) 260ms forwards; }
}
@keyframes done-pop { from { transform: scale(0.4); opacity: 0; } }
@keyframes done-draw { to { stroke-dashoffset: 0; } }


/* the spam trap stays off screen; the form's own line for a failed send */
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__status { grid-column: 1 / -1; padding: 14px 18px; border-radius: 14px; background: #fff1ec; color: var(--orange-hover); font-weight: 700; }
.form__status[hidden] { display: none; }

/* ---------- Option 4's own parts ---------- */
.presets { border-radius: 999px; }
.presets button { border-radius: 999px; }
.field input, .field textarea { border-radius: 14px; }

/* Header: over the opening photo it's see-through and his logo hangs from the top like a tag; once the page moves it
   floats as a clear glass bar inset from the page's edges, the logo inside it (Jack, 28 Oct) */
.top { position: fixed; inset: 0 0 auto; z-index: 40; color: #fff; transition: color 240ms ease; }
/* the row itself becomes the glass: the same width as the page's content plus a little either side, and the same
   middle, so nothing in it moves. It's clear dark glass with white words; over a light part of the page (windows.js:
   .is-light) clear white glass with dark ones. */
.top__in { --edge: clamp(16px, 4vw, 56px); --pad: 14px; display: flex; align-items: center; gap: 20px; min-height: 84px; transition: background-color 240ms ease, box-shadow 240ms ease; }
.top.is-solid .top__in { max-width: calc(min(1360px, 100%) - 2 * var(--edge) + 2 * var(--pad)); margin-block: 10px; padding-inline: var(--pad); min-height: 64px; border-radius: 24px; background: rgba(18, 26, 41, 0.78); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 16px 36px -20px rgba(0, 0, 0, 0.6); animation: island-in 300ms var(--ease); }
/* the blur sits under the row, not on it: on the row it would stop the drop-downs inside it blurring the page too */
.top.is-solid .top__in::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); pointer-events: none; }
.top.is-solid .top__in { position: relative; }
@keyframes island-in { from { transform: translateY(-6px) scale(0.985); } }
.top.is-solid.is-light { color: var(--ink); }
.top.is-solid.is-light .top__in { background: rgba(255, 255, 255, 0.66); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75), 0 16px 36px -20px rgba(18, 26, 41, 0.5); }
.top.is-light :focus-visible { outline-color: var(--orange-ink); }
/* the logo: a tag hanging from the top over the photo; in the glass bar a small white card, centred */
.logo-tab { --lh: 50px; --lpx: 12px; --lpt: 8px; --tab-up: -8px; position: relative; align-self: center; background: var(--white); padding: var(--lpt) var(--lpx) 10px; border-radius: 0 0 18px 18px; box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.6); transform: translateY(var(--tab-up)); transform-origin: 0 50%; transition: border-radius 240ms ease, box-shadow 240ms ease, transform 300ms var(--ease); }
.top.is-solid .logo-tab { border-radius: 14px; box-shadow: none; transform: scale(0.84); }
.logo-tab img { height: var(--lh); width: auto; }
.top nav { position: relative; margin-inline: auto; display: flex; gap: 4px; }
.top nav a { position: relative; z-index: 1; text-decoration: none; font-weight: 700; padding: 10px 16px; border-radius: 999px; transition: background-color 200ms ease; }
/* a soft highlight glides to the link under the pointer (windows.js); without it each link lights up on its own */
.nav-glide { position: absolute; z-index: 0; top: 0; left: 0; height: 100%; border-radius: 999px; background: rgba(255, 255, 255, 0.12); opacity: 0; transition: transform 240ms var(--ease), width 240ms var(--ease), opacity 160ms ease, background-color 240ms ease; pointer-events: none; }
.top nav[data-glide] .nav-glide { opacity: 1; }
.top.is-light .nav-glide { background: rgba(18, 26, 41, 0.07); }
/* on inner pages the links go to pages, with drop-downs (hover or keyboard focus) for shutters, blinds and areas */
.top nav .dd { position: relative; display: flex; }
.top nav .dd > a { display: inline-flex; align-items: center; gap: 8px; }
.top nav .dd > a::after { content: ""; width: 7px; height: 7px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: 0.7; transition: transform 200ms var(--ease); }
.top nav .dd:hover > a::after, .top nav .dd:focus-within > a::after { transform: translateY(2px) rotate(45deg); }
/* the drop-down (Jack, 28 Oct: a new design): frosted glass grown from its link, the names on the left and, beside
   them, the photo of the page you point at (the first one until then) */
.dd__menu { position: absolute; top: calc(100% + 12px); left: -10px; display: grid; align-content: start; width: max-content; min-width: 240px; padding: 10px; border-radius: 22px; color: var(--ink); background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85), 0 28px 56px -24px rgba(18, 26, 41, 0.55); opacity: 0; visibility: hidden; transform: translateY(-4px) scale(0.97); transform-origin: 28px 0; transition: opacity 120ms ease, transform 160ms var(--ease), visibility 0s linear 160ms; }
.dd__menu:has(.dd__pic) { padding-right: 254px; min-height: 250px; }
/* a long drop-down (Joseph Michael's 16 towns) reads down two columns, opening leftwards from its link so it stays on screen */
.dd__menu:has(> a:nth-child(10)) { grid-template-rows: repeat(8, auto); grid-auto-flow: column; left: auto; right: -10px; transform-origin: calc(100% - 28px) 0; }
.dd__menu::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; } /* keeps hover alive across the gap */
.dd:hover .dd__menu, .dd:focus-within .dd__menu { opacity: 1; visibility: visible; transform: none; transition: opacity 160ms ease, transform 220ms var(--ease), visibility 0s; }
.top nav .dd__menu a { position: static; display: flex; align-items: center; gap: 18px; padding: 10px 14px; border-radius: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; transition: background-color 160ms ease; }
.top nav .dd__menu a::after { content: ""; width: 6px; height: 6px; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateX(-4px) rotate(-45deg); opacity: 0; transition: opacity 160ms ease, transform 200ms var(--ease); }
.top nav .dd__menu a[aria-current="page"] { background: rgba(18, 26, 41, 0.06); }
.dd__menu :focus-visible { outline-color: var(--orange-ink); }
.dd__pic { position: absolute; top: 10px; right: 10px; width: 234px; height: calc(100% - 20px); object-fit: cover; border-radius: 14px; background: var(--mist-2); opacity: 0; transform: scale(1.04); transition: opacity 220ms ease, transform 420ms var(--ease); pointer-events: none; }
.dd__menu a:hover .dd__pic, .dd__menu a:focus-visible .dd__pic, .dd__menu a.is-shown .dd__pic, .dd__menu:not(:has(a:hover, a:focus-visible, a.is-shown)) a:first-child .dd__pic { opacity: 1; transform: none; pointer-events: auto; }
.top nav a[aria-current="page"] { background: rgba(255, 255, 255, 0.14); }
.top.is-light nav > a[aria-current="page"], .top.is-light nav .dd > a[aria-current="page"] { background: rgba(18, 26, 41, 0.07); }
@media (hover: hover) and (pointer: fine) {
  .top nav:not(:has(.nav-glide)) > a:hover, .top nav:not(:has(.nav-glide)) .dd > a:hover { background: rgba(255, 255, 255, 0.12); }
  .top nav .dd__menu a:hover { background: rgba(18, 26, 41, 0.06); }
  .top nav .dd__menu a:hover::after { opacity: 0.55; transform: rotate(-45deg); }
}
.top__phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.top__phone svg { width: 18px; height: 18px; color: var(--orange-on-dark); transition: color 240ms ease; }
.top.is-light .top__phone svg { color: var(--orange-ink); }
.top.is-light .top__menu { background: rgba(18, 26, 41, 0.06); box-shadow: inset 0 0 0 1px rgba(18, 26, 41, 0.14); color: var(--ink); }
.top__call, .top__menu, .menu { display: none; }

/* Hero: the whole first screen is his photo */
.hero { position: relative; isolation: isolate; min-height: 100svh; display: flex; flex-direction: column; align-items: center; padding: 130px clamp(16px, 4vw, 56px) 36px; text-align: center; color: #fff; overflow: hidden; background: var(--night); }
.hero > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 55%); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18, 26, 41, 0.6) 0%, rgba(18, 26, 41, 0.36) 38%, rgba(18, 26, 41, 0.9) 100%); }
.hero__in { margin-block: auto; max-width: 1180px; }
.hero h1 { font-size: clamp(2.75rem, 1.2rem + 5.4vw, 6.75rem); line-height: 1; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--orange-on-dark); }
/* the small line above the headline, part of the main heading (Jack, 26 Oct: the old homepage's heading) */
.hero__label { display: block; margin-bottom: 14px; font-family: var(--font-ui); font-weight: 800; font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.92); text-wrap: balance; }
.hero .lede { max-width: 38em; margin: 26px auto 0; font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.375rem); color: rgba(255, 255, 255, 0.92); }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 40px; }
.pills li { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 4px 16px 4px 4px; border-radius: 999px; background: rgba(18, 26, 41, 0.6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); font-weight: 700; font-size: 0.9375rem; }
.pills b { font-weight: 800; }
.pills .mark { width: 34px; height: 34px; }

/* Reviews band: the score counts up, each review turns over like louvres */
.rev { background: var(--orange-ink); color: #fff; padding-block: clamp(52px, 5.5vw, 84px) clamp(28px, 3.5vw, 44px); overflow: hidden; }
.rev :focus-visible { outline-color: #fff; }
.rev__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.rev__num { font-family: var(--font-display); font-size: clamp(4.5rem, 2.6rem + 5vw, 8.5rem); line-height: 0.8; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.rev__stars { display: flex; gap: 5px; margin-top: 16px; }
.rev__stars span { position: relative; width: 24px; height: 24px; }
.rev__stars svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rev__stars .base { color: rgba(255, 255, 255, 0.28); }
.rev__stars .fill { color: #fff; }
.js .rev__stars .fill { clip-path: inset(0 100% 0 0); transition: clip-path 520ms var(--ease); transition-delay: calc(400ms + var(--s) * 140ms); }
.is-counted .rev__stars .fill { clip-path: inset(0 0 0 0); }
.rev__score h2 { margin-top: 18px; font-size: clamp(1.625rem, 1.3rem + 0.9vw, 2.125rem); }
.rev__score p { margin-top: 10px; max-width: 26em; }
.flip { position: relative; display: grid; }
.flip__card { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; background: var(--orange-ink); }
.js .flip__card:not(.is-active) { visibility: hidden; }
.flip.is-flipping > .flip__card { opacity: 0; }
.flip__card .stars { font-size: 1.125rem; gap: 5px; }
.flip__card blockquote p { font-family: var(--font-display); font-size: clamp(1.375rem, 1.05rem + 1vw, 1.875rem); line-height: 1.35; text-wrap: pretty; }
.flip__card figcaption { display: flex; align-items: center; gap: 14px; font-size: 1rem; }
.flip__card figcaption b { display: block; font-weight: 800; }
.flip__card figcaption small { display: block; font-size: 1rem; }
.mark--big { width: 40px; height: 40px; }
.mark--big svg { width: 22px; height: 22px; }
.flip__slats { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.slat { position: absolute; left: 0; right: 0; perspective: 1400px; }
.slat__turn { position: absolute; inset: 0; transform-style: preserve-3d; }
.slat__face { position: absolute; inset: 0; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; background: var(--orange-ink); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12); }
.slat__face--back { transform: rotateX(180deg); }
.slat__face > i { position: absolute; inset: 0; background: #6f1e07; opacity: 0; }
.rev__ctl { display: flex; align-items: center; gap: 8px; margin-top: 24px; }
.round { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); color: #fff; cursor: pointer; transition: background-color 200ms ease, transform var(--t-press) var(--ease); }
.round svg { width: 20px; height: 20px; }
.round[data-flip-prev] svg { transform: scaleX(-1); }
.round:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .round:hover { background: rgba(255, 255, 255, 0.24); } }
.round .play, .round.is-paused .pause { display: none; }
.round.is-paused .play { display: block; }
.timer { flex: 1; height: 3px; margin-inline: 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.28); overflow: hidden; }
.timer i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.rev__count { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(32px, 4vw, 52px); padding-top: 22px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28); }
.chips li { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 18px 6px 6px; border-radius: 999px; background: rgba(0, 0, 0, 0.14); font-weight: 700; font-size: 1rem; }
.chips b { font-weight: 800; }
.mark { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); }
.mark svg { width: 20px; height: 20px; }
.mark img { width: 30px; height: 30px; border-radius: 50%; }
/* a rating that opens its own page: the link fills the pill or chip */
.pills li:has(> a), .chips li:has(> a) { padding: 0; }
.pills li > a, .chips li > a { display: inline-flex; align-items: center; gap: inherit; min-height: inherit; padding: 4px 16px 4px 4px; border-radius: inherit; color: inherit; text-decoration: none; transition: background 200ms; }
.chips li > a { padding: 6px 18px 6px 6px; }
@media (hover: hover) and (pointer: fine) { .pills li > a:hover, .chips li > a:hover { background: rgba(255, 255, 255, 0.12); } }
.chips__link { padding: 0 !important; }
.chips__link a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 18px 6px 6px; color: #fff; text-decoration: none; }
.chips__link .go { width: 16px; height: 16px; transition: transform 260ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .chips__link a:hover .go { transform: translateX(3px); } }

/* Shutter styles: a big list of names, the photo, the louvre room */
.styles { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.style-names { display: grid; gap: 2px; margin-top: 28px; }
.style-names button { display: flex; align-items: center; gap: 14px; padding: 6px 0; border: 0; background: none; cursor: pointer; text-align: left; font-family: var(--font-display); font-size: clamp(1.75rem, 1.2rem + 1.2vw, 2.5rem); line-height: 1.15; color: #6d7688; transition: color 200ms ease, scale 160ms var(--ease); }
.style-names button::before { content: ""; width: 28px; height: 4px; flex: none; border-radius: 999px; background: var(--orange-ink); transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--ease); }
.style-names button[aria-pressed="true"] { color: var(--ink); }
.style-names button[aria-pressed="true"]::before { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .style-names button:hover { color: var(--ink); } }
.chooser__photo { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-card); overflow: hidden; background: var(--mist-2); }
.chooser__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chooser__photo figcaption { position: absolute; z-index: 1; left: 14px; bottom: 14px; padding: 10px 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.95); font-size: 1rem; }
.chooser__photo figcaption b { font-weight: 800; }
.chooser__photo figcaption span { color: var(--muted); }
.panel { display: grid; gap: 16px; padding: clamp(20px, 2.4vw, 28px); border-radius: var(--radius-card); background: var(--mist); }
.panel .room { border-radius: 16px; }
.style-fact { min-height: 4.8em; }
.style-fact strong { font-weight: 800; }
.panel__cta { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }

/* Fitted near you: a job at a time, by town */
.work__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.work__tabs [role="tab"] { min-height: 50px; padding: 0 24px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); color: #fff; font-weight: 800; font-size: 1rem; cursor: pointer; transition: background-color 200ms ease, color 200ms ease, transform var(--t-press) var(--ease); }
.work__tabs [role="tab"][aria-selected="true"] { background: var(--white); color: var(--ink); box-shadow: none; }
.work__tabs [role="tab"]:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .work__tabs [role="tab"]:hover:not([aria-selected="true"]) { background: rgba(255, 255, 255, 0.16); } }
.job { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px, 4vw, 72px); align-items: center; }
.job[hidden], .round[hidden] { display: none; }
.job figure { aspect-ratio: 4 / 3; border-radius: var(--radius-card); overflow: hidden; background: var(--navy); }
.job figure img { width: 100%; height: 100%; object-fit: cover; }
.job__cat { color: var(--orange-on-dark); font-weight: 800; }
.job h3 { margin-top: 10px; font-size: clamp(2rem, 1.3rem + 1.8vw, 3rem); }
.job p:not(.job__cat) { margin-top: 16px; color: var(--on-dark-soft); max-width: 32em; }
.job .more { margin-top: 20px; }
.job.is-entering figure img { animation: job-photo 760ms var(--ease) both; }
.job.is-entering .job__text { animation: job-text 520ms var(--ease) both; }
@keyframes job-photo { from { opacity: 0.4; transform: scale(1.05); } }
@keyframes job-text { from { opacity: 0; transform: translateY(10px); } }
.work__all { margin-top: 36px; }

/* The louvre band: one wide photo, nothing over it */
.band { position: relative; height: clamp(320px, 46vw, 680px); overflow: hidden; background: var(--navy); }
.band img { width: 100%; height: 100%; object-fit: cover; }
.js .band img { transform: scale(1.08); transition: transform 1800ms var(--ease); }
.js .band.is-in img { transform: none; }
.band figcaption { position: absolute; left: clamp(16px, 4vw, 56px); bottom: 20px; padding: 10px 18px; border-radius: 999px; background: rgba(18, 26, 41, 0.85); color: #fff; font-size: 1rem; font-weight: 700; }

/* We come to you */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step .ph { aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: var(--mist-2); }
.step .ph img { width: 100%; height: 100%; object-fit: cover; }
.step h3 { margin-top: 20px; font-size: 1.75rem; }
.step p { margin-top: 8px; color: var(--muted); }
.promise { max-width: 980px; margin: clamp(64px, 8vw, 104px) auto 0; text-align: center; }
.promise p { font-family: var(--font-display); font-size: clamp(1.75rem, 1.1rem + 2vw, 2.75rem); line-height: 1.3; }
.promise p::before { content: "\201C"; display: block; color: var(--orange-ink); font-size: 1.7em; line-height: 0.7; margin-bottom: 14px; }
.promise footer { margin-top: 24px; color: var(--muted); font-weight: 700; }

/* A small firm, done properly */
.why { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(40px, 6vw, 104px); align-items: center; }
.why__ph { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-card); overflow: hidden; }
.why__ph img { width: 100%; height: 100%; object-fit: cover; }
.why__ph figcaption { position: absolute; left: 14px; bottom: 14px; padding: 8px 16px; border-radius: 999px; background: rgba(18, 26, 41, 0.85); font-size: 1rem; font-weight: 700; }
.points { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; margin-top: 40px; }
.points h3 { display: flex; align-items: center; gap: 12px; font-family: var(--font-ui); font-weight: 800; font-size: 1.1875rem; letter-spacing: 0; }
.points h3::before { content: ""; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--orange-on-dark); }
.points p { margin-top: 6px; padding-left: 22px; color: var(--on-dark-soft); font-size: 1rem; }

/* Blinds: the six kinds, and the window they come down in */
.blinds { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 88px); align-items: start; }
.blind-rows { display: grid; gap: 8px; margin-top: 32px; }
.blind-row { display: grid; grid-template-columns: 64px 1fr; gap: 2px 18px; align-items: center; width: 100%; padding: 12px 20px 12px 12px; border: 0; border-radius: 20px; background: var(--white); text-align: left; cursor: pointer; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow 200ms ease, transform var(--t-press) var(--ease); }
.blind-row img { grid-row: span 2; width: 64px; height: 64px; border-radius: 14px; object-fit: cover; }
.blind-row b { font-family: var(--font-display); font-weight: 400; font-size: 1.375rem; line-height: 1.2; }
.blind-row span { color: var(--muted); font-size: 1rem; line-height: 1.45; }
.blind-row[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--orange-ink); }
.blind-row:active { transform: scale(0.98); }
.stage { position: sticky; top: 110px; }
.stage .stage__wall { background: var(--white); }
.stage__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.stage__bar p { font-family: var(--font-display); font-size: 1.75rem; }

/* Awnings and outdoor living */
.aw { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.aw a { display: grid; gap: 12px; align-content: start; text-decoration: none; }
.aw .ph { aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: var(--mist-2); }
.aw .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.aw h3 { margin-top: 6px; }
.aw p { color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .aw a:hover img { transform: scale(1.04); } }

/* The free survey */
.survey { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(40px, 6vw, 104px); align-items: start; }
.contact { display: grid; gap: 2px; margin-top: 32px; }
.contact a { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; font-weight: 800; text-decoration: none; }
.contact svg { width: 20px; height: 20px; flex: none; color: var(--orange-on-dark); }
.contact p { margin-top: 12px; color: var(--on-dark-soft); font-size: 1rem; }
.formcard { padding: clamp(24px, 3.5vw, 48px); border-radius: 28px; background: var(--white); color: var(--ink); }
/* the card is light inside a dark section: give the fields their light-ground look back */
.formcard .field input, .formcard .field textarea { border-color: var(--line); caret-color: var(--orange-ink); }
.formcard .field input:focus, .formcard .field textarea:focus { border-color: var(--navy); }
.formcard .field [aria-invalid="true"] { border-color: var(--orange-ink); }
.formcard .field .error { color: var(--orange-ink); }
.formcard :focus-visible { outline-color: var(--orange-ink); }
.formcard { scroll-margin-top: 104px; overflow: hidden; }
.survey .lede { margin-top: 16px; }
/* what happens next: numbered, joined by a line */
.survey__next { display: grid; margin-top: 36px; counter-reset: next; }
.survey__next li { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 4px 16px; padding-bottom: 26px; }
.survey__next li::before { counter-increment: next; content: counter(next); grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.3); font-family: var(--font-display); font-size: 1.375rem; }
.survey__next li:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 50px; bottom: 6px; width: 2px; background: rgba(255, 255, 255, 0.18); }
.survey__next b { font-weight: 800; padding-top: 9px; }
.survey__next p { color: var(--on-dark-soft); font-size: 1rem; }
.survey__next + .contact { margin-top: 6px; }
/* the card: one step at a time with windows.js, every step one under another without it */
.form { display: grid; }
.survey__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.survey__step + .survey__step { margin-top: 40px; }
.survey__step[hidden] + .survey__step { margin-top: 0; }  /* one step at a time: no gap for the hidden one */
.form__status:not([hidden]) { margin-top: 20px; }
.survey__head[hidden] { display: none; }
.survey__count { color: var(--muted); font-weight: 800; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.survey__progress { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; width: min(180px, 45%); }
.survey__progress li { position: relative; height: 6px; border-radius: 999px; background: var(--mist-2); overflow: hidden; }
.survey__progress li::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--orange-ink); transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--ease); }
.survey__progress li.is-done::after, .survey__progress li.is-current::after { transform: none; }
.survey__progress li.is-done::after { background: var(--navy); }
.survey__step { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
.survey__step[hidden] { display: none; }
.survey__heading, .survey__hint, .survey__recap, .survey__nav, .survey__note { grid-column: 1 / -1; }
.survey__hint { margin-top: -12px; color: var(--muted); font-size: 1rem; }
.survey__heading { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); }
.survey__heading:focus { outline: none; }
.survey__step.from-right { animation: step-in-right 420ms var(--ease) both; }
.survey__step.from-left { animation: step-in-left 420ms var(--ease) both; }
@keyframes step-in-right { from { opacity: 0; transform: translateX(24px); } }
@keyframes step-in-left { from { opacity: 0; transform: translateX(-24px); } }
.field--choice { min-width: 0; margin: 0; padding: 0; border: 0; }
.field--choice legend { padding: 0; margin-bottom: 8px; font-weight: 800; font-size: 1rem; }
.field--choice legend span { font-weight: 500; opacity: 0.8; }
/* photo tiles: tick as many as you like */
.survey__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-radius: 20px; }
.survey__tiles:has([aria-invalid="true"]) { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--orange-ink); }
.survey__tile { position: relative; display: block; border-radius: 18px; overflow: hidden; cursor: pointer; background: var(--mist); box-shadow: inset 0 0 0 2px transparent; transition: box-shadow var(--t-hover) ease, transform var(--t-press) var(--ease); }
.survey__tile input { position: absolute; z-index: 1; inset: 0; opacity: 0; cursor: pointer; }
.survey__photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 700ms var(--ease); }
.survey__tile b { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; font-weight: 800; }
.survey__tile b::after { content: ""; flex: none; width: 24px; height: 24px; border-radius: 7px; box-shadow: inset 0 0 0 2px var(--line); transition: background-color var(--t-hover) ease, box-shadow var(--t-hover) ease, transform 300ms var(--ease); }
.survey__tile:has(input:checked) { box-shadow: inset 0 0 0 3px var(--orange-ink), 0 14px 30px -20px rgba(198, 59, 21, 0.7); }
.survey__tile:has(input:checked) b::after { background: var(--orange-ink) no-repeat center / 13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.4 2.4L10 3.2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); box-shadow: none; transform: scale(1.08); }
.survey__tile:has(input:focus-visible) { outline: 3px solid var(--orange-ink); outline-offset: 3px; }
.survey__tile:active { transform: scale(0.98); }
/* chips: pick one (or a tiles question's "other": tick it) */
.survey__other { margin-top: 12px; }
.survey__chips { display: flex; flex-wrap: wrap; gap: 8px; border-radius: 16px; }
.survey__chip { position: relative; }
.survey__chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.survey__chip span { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 800; font-size: 1rem; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, box-shadow var(--t-hover) ease, transform var(--t-press) var(--ease); }
.survey__chip input:checked + span { background: var(--navy); color: #fff; box-shadow: none; }
.survey__chip input:focus-visible + span { outline: 3px solid var(--orange-ink); outline-offset: 3px; }
.survey__chip input:active + span { transform: scale(0.97); }
.survey__chips:has([aria-invalid="true"]) .survey__chip span { box-shadow: inset 0 0 0 1.5px var(--orange-ink); }
@media (hover: hover) and (pointer: fine) {
  .survey__tile:hover .survey__photo { transform: scale(1.04); }
  .survey__tile:hover:not(:has(input:checked)) { box-shadow: inset 0 0 0 2px var(--mist-2); }
  .survey__chip input:not(:checked):hover + span { box-shadow: inset 0 0 0 1.5px var(--ink); }
}
/* the answers so far, above the last step */
.survey__recap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: -6px; padding: 12px 16px; border-radius: 14px; background: var(--mist); font-weight: 700; font-size: 1rem; }
.survey__recap[hidden] { display: none; }
.survey__recap span { flex: 1 1 auto; }
.survey__change, .survey__back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; border: 0; background: none; font-weight: 800; font-size: 1rem; cursor: pointer; transition: color var(--t-hover) ease; }
.survey__change { min-height: 32px; color: var(--orange-ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.25em; }
.survey__back { color: var(--muted); }
.survey__back[hidden] { display: none; }
.survey__back svg { width: 18px; height: 18px; transform: scaleX(-1); transition: transform 260ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .survey__back:hover { color: var(--ink); }
  .survey__back:hover svg { transform: scaleX(-1) translateX(3px); }
  .survey__change:hover { color: var(--orange-hover); }
}
.survey__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 6px; }
.survey__nav .btn { margin-left: auto; }
.survey__nav .btn[hidden] { display: none; }
.survey__note { margin-top: -6px; color: var(--muted); font-size: 1rem; text-align: right; }
@media (prefers-reduced-motion: reduce) {
  .survey__step.from-right, .survey__step.from-left { animation: none; }
  .survey__progress li::after { transition: none; }
}
@media (max-width: 1100px) {
  /* the card straight after the intro, then what happens next and the contact links */
  .survey { row-gap: 22px; }
  .survey > div:first-child { display: contents; }
  .survey .lede { order: 1; margin-top: 0; }
  .survey .formcard { order: 2; margin-top: 10px; }
  .survey__next { order: 3; margin-top: 28px; }
  .survey .contact { order: 4; }
}
@media (max-width: 760px) {
  .survey__step { grid-template-columns: 1fr; }
  .survey__tiles { gap: 8px; }
  .survey__tile b { padding: 10px; font-size: 0.9375rem; }
  .survey__note { text-align: left; }
  .survey__nav .btn { flex: none; }
}

/* Footer (compact, Jack 2 Nov): logo, contact and profiles in one row; the link groups in a row under it, a group's towns
   running across the widest column; on phones the groups fold */
.foot { padding-block: 56px 24px; background: var(--night); color: #fff; }
.foot__top { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 24px 48px; }
.foot__logo { justify-self: start; padding: 12px 16px; border-radius: 16px; background: var(--white); }
.foot__logo img { width: 230px; height: auto; }
.foot h2 { margin-bottom: 8px; font-family: var(--font-ui); font-size: 1rem; font-weight: 800; letter-spacing: 0; line-height: 1.4; color: var(--orange-on-dark); }
.foot__lines { display: flex; flex-wrap: wrap; gap: 0 24px; }
.foot__lines a { display: inline-flex; min-height: 36px; align-items: center; color: #fff; font-weight: 800; text-decoration: none; }
.foot__contact p:not(.foot__lines) { max-width: 58ch; margin-top: 4px; color: var(--on-dark-soft); font-size: 0.9375rem; }
/* his profiles as round glass buttons, then the two review links */
.foot__round { display: flex; flex-wrap: wrap; gap: 8px; }
.foot .foot__round a { display: grid; padding: 0; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-line); color: #fff; transition: background 220ms, color 220ms, transform 220ms var(--ease); }
.foot__round svg { width: 20px; height: 20px; }
.foot__reviews { display: grid; justify-items: start; margin-top: 10px; }
.foot__reviews a { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; color: var(--orange-on-dark); font-weight: 800; text-decoration: none; }
.foot__reviews .go { width: 16px; height: 16px; flex: none; transition: transform 260ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .foot .foot__round a:hover { background: #fff; color: var(--night); text-decoration: none; transform: translateY(-2px); }
  .foot__reviews a:hover .go { transform: translateX(3px); }
}
.foot__cols { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 28px 32px; margin-top: 40px; padding-top: 32px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.foot__wide { grid-column: span 3; }
.foot__cols > div > .foot__group + .foot__group { margin-top: 22px; }
.foot__group > summary { display: block; list-style: none; }
.foot__group > summary::-webkit-details-marker { display: none; }
.foot__group summary h2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.foot__chev { display: none; }
.foot li a { display: inline-block; padding: 2px 0; color: var(--on-dark-soft); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .foot li a:hover { color: #fff; text-decoration: underline; } }
.foot__towns { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; }
.foot__towns dt { padding-top: 2px; font-weight: 800; }
.foot__towns dd { margin: 0; }
.foot__towns ul { display: flex; flex-wrap: wrap; gap: 0 18px; }
.foot__note { margin-top: 12px; color: var(--on-dark-soft); }
.foot__base { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 24px; margin-top: 36px; padding-top: 20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); color: var(--on-dark-soft); font-size: 1rem; }
.foot__more { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0 22px; }
.foot .foot__more a { color: #fff; font-weight: 700; }
.foot__base p a { color: #fff; }
.foot__legal { grid-column: 1 / -1; font-size: 0.875rem; }  /* the company's name, number and registered office (UK rules) */

/* The three things he does, at a glance */
.glance { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.glance a { display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 24px; border-radius: 28px; background: var(--mist); text-decoration: none; transition: transform 320ms var(--ease), background-color 200ms ease, scale 160ms var(--ease); }
.glance .ph { aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: var(--mist-2); }
.glance .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.glance h3 { margin-top: 8px; padding-inline: 10px; font-size: 1.875rem; }
.glance p { padding-inline: 10px; color: var(--muted); }
.glance ul { display: grid; gap: 8px; padding-inline: 10px; }
.glance li { display: flex; gap: 10px; font-weight: 700; font-size: 1rem; line-height: 1.45; }
.glance li::before { content: ""; width: 8px; height: 8px; flex: none; margin-top: 0.5em; border-radius: 50%; background: var(--orange-ink); }
.glance .more { margin-top: auto; padding: 8px 10px 0; }
@media (hover: hover) and (pointer: fine) { .glance a:hover { transform: translateY(-4px); background: var(--mist-2); } .glance a:hover img { transform: scale(1.04); } }
.glance__cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px; margin-top: 24px; padding: 14px 14px 14px 28px; border-radius: 999px; background: var(--navy-deep); color: #fff; }
.glance__cta p { font-weight: 700; }

/* Fitted near you: the map beside the jobs */
.work-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 4.5vw, 80px); align-items: start; }
.work-map { position: sticky; top: 108px; }
.work-jobs .job { grid-template-columns: 1fr; gap: 24px; }
.towns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.towns a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; font-size: 0.9375rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); color: #fff; font-weight: 800; text-decoration: none; transition: background-color 200ms ease, scale 160ms var(--ease); }
.towns a.base { background: var(--orange-ink); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .towns a:not(.base):hover { background: rgba(255, 255, 255, 0.16); } }
.areas__also { margin-top: 14px; color: var(--on-dark-soft); font-size: 1rem; }
.map .is-job circle { stroke: var(--orange-on-dark); stroke-width: 3; }
.map .is-job { cursor: pointer; }
.map .town circle { transform-box: fill-box; transform-origin: center; transition: transform 300ms var(--ease), fill 200ms ease; }
.map .town.is-active circle { fill: var(--orange-on-dark); transform: scale(1.4); }
.map .town.is-active text { fill: var(--orange-on-dark); }
@media (hover: hover) and (pointer: fine) { .map .is-job:hover text { text-decoration: underline; } }
.map .spoke.is-active { stroke: var(--orange-on-dark); stroke-width: 3; }
.js .map-wrap.is-in .spoke.is-active { animation: route 700ms var(--ease) both; }
@keyframes route { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.map-wrap figcaption { margin-top: 8px; color: var(--on-dark-soft); font-size: 1rem; }
.map { display: block; width: 100%; height: auto; max-height: 600px; overflow: visible; }
.map text { fill: #fff; font: 700 15px var(--font-ui); paint-order: stroke; stroke: var(--navy-deep); stroke-width: 5px; stroke-linejoin: round; }
.map .also text { fill: rgba(255, 255, 255, 0.72); font-weight: 600; font-size: 14px; }
.map .town circle { fill: #fff; }
.map .also circle { fill: rgba(255, 255, 255, 0.5); }
.map .base .dot { fill: var(--orange-on-dark); }
.map .base text { font: 400 24px var(--font-display); }
.map .base .sub { font: 700 13px var(--font-ui); fill: var(--orange-on-dark); }
.map .spoke { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 1.5; }
.js .map .spoke { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1100ms var(--ease); transition-delay: calc(200ms + var(--k) * 70ms); }
.js .map .town { opacity: 0; transition: opacity 500ms ease; transition-delay: calc(700ms + var(--k) * 70ms); }
.js .map-wrap.is-in .spoke { stroke-dashoffset: 0; }
.js .map-wrap.is-in .town { opacity: 1; }
.map .ping { fill: none; stroke: var(--orange-on-dark); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) { .map .ping { animation: ping 2.4s ease-out infinite; } }
@keyframes ping { from { transform: scale(0.8); opacity: 0.9; } to { transform: scale(2.8); opacity: 0; } }


@media (prefers-reduced-motion: reduce) {
  .rev__stars .fill, .band img, .style-names button::before, .map .spoke, .map .town, .map .town circle { transition: none !important; }
  .map .spoke.is-active { animation: none !important; }
}
@media (max-width: 1100px) {
  .top nav { display: none; }
  .top__phone { margin-left: auto; }
  .top__menu { display: inline-flex; align-items: center; min-height: 50px; padding: 0 18px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24); color: #fff; font-weight: 800; cursor: pointer; }
  .menu { display: grid; position: fixed; z-index: 39; inset: 84px 12px auto 12px; padding: 14px 22px 22px; border-radius: 22px; color: var(--ink); background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85), 0 30px 60px -20px rgba(18, 26, 41, 0.55); opacity: 0; transform: translateY(-8px) scale(0.98); transform-origin: top right; visibility: hidden; transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 0s linear 200ms; }
  .menu.is-open { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
  .menu { max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain; } /* a fold open on a small phone */
  :root:has(.cookies:not([hidden])) .menu { max-height: calc(100dvh - 108px - var(--cookies-room, 0px)); } /* and stops above the cookie banner */
  .menu :focus-visible { outline-color: var(--orange-ink); }
  /* the main links as rows; a drop-down's name opens its pages under it (Jack, 29 Oct: "less crowded") */
  .mm { display: grid; }
  .mm__row { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 58px; padding: 6px 2px; border: 0; border-bottom: 1px solid rgba(18, 26, 41, 0.08); background: none; color: var(--ink); font-family: var(--font-display); font-size: 1.6rem; line-height: 1.1; text-align: left; text-decoration: none; cursor: pointer; transition: scale 160ms var(--ease); }
  .mm__row:active { scale: 0.98; }
  .mm__row svg { width: 20px; height: 20px; flex: none; opacity: 0.55; transition: transform 240ms var(--ease); }
  .mm__row[aria-expanded="true"] svg { transform: rotate(90deg); }
  .mm__row[aria-expanded="true"] { border-bottom-color: transparent; }
  html:not(.js) .mm__row svg { display: none; }  /* without JavaScript every fold is open, so nothing to turn */
  .mm__fold { display: grid; grid-template-rows: 1fr; border-bottom: 1px solid rgba(18, 26, 41, 0.08); transition: grid-template-rows 280ms var(--ease); }
  .mm__row[aria-expanded="false"] + .mm__fold { grid-template-rows: 0fr; border-bottom-color: transparent; }
  .mm__sub { display: grid; min-height: 0; overflow: hidden; padding: 0 0 12px 2px; }
  .mm__sub:has(> .mm__page:nth-child(10)) { grid-template-rows: repeat(8, auto); grid-auto-flow: column; column-gap: 16px; } /* a long list (16 towns): two columns, like the drop-down */
  /* a closed fold's pages can't be reached by Tab either */
  .mm__row[aria-expanded="false"] + .mm__fold .mm__sub { padding-bottom: 0; visibility: hidden; transition: visibility 0s linear 280ms, padding 280ms var(--ease); }
  .mm__page { display: block; padding: 9px 0; font-weight: 700; font-size: 1.0625rem; color: var(--muted); text-decoration: none; }
  .mm__page[aria-current="page"] { color: var(--orange-ink); }
  .mm__foot { display: grid; gap: 10px; padding-top: 18px; }
  .mm__book { justify-content: center; min-height: 52px; }
  .mm__tel, .mm__wa { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; color: var(--ink); font-weight: 800; font-size: 1.0625rem; text-decoration: none; }
  .mm__tel svg, .mm__wa svg { width: 18px; height: 18px; color: var(--orange-ink); }
  .rev__grid, .head2, .why, .blinds, .survey { grid-template-columns: 1fr; }
  .styles { grid-template-columns: 1fr 1fr; }
  .styles__list { grid-column: 1 / -1; }
  .style-names { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 32px; }
  .job { grid-template-columns: 1fr; }
  .stage { position: static; }
  .work-grid { grid-template-columns: 1fr; }
  .work-map { position: static; }
  .work-jobs { order: -1; }
  .map { max-width: 560px; margin-inline: auto; }
  .glance h3 { font-size: 1.5rem; }
  .map { max-height: 480px; }
  .win { max-width: 360px; margin-inline: auto; }
  .steps { grid-template-columns: 1fr 1fr 1fr; }
  .why__ph { aspect-ratio: 16 / 10; }
  .foot__top { grid-template-columns: auto 1fr; }
  .foot__social { grid-column: 2; }
  .foot__cols { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); }
  .foot__wide { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .btn { min-height: 46px; padding: 0 18px; font-size: 0.9375rem; }
  .btn--tab { padding-right: 16px; }
  .top__in { min-height: 72px; gap: 8px; }
  .logo-tab { --lh: 40px; --lpx: 8px; --lpt: 6px; --tab-up: -9px; padding-bottom: 8px; }
  .top__in { --pad: 8px; }
  .top.is-solid .top__in { margin-block: 8px; min-height: 56px; border-radius: 20px; }
  .top__phone, .top__book { display: none; }
  .top__call { display: inline-flex; margin-left: auto; min-height: 46px; padding: 0 16px; }
  .top__menu { min-height: 46px; padding: 0 14px; }
  .menu { inset: 76px 12px auto 12px; }
  .hero { padding-top: 112px; min-height: 92svh; }
  .hero > img { object-position: var(--phone-focus, 50% 68%); }
  .hero__actions { gap: 10px; }  /* side by side when they fit, each its own width */
  .pills { margin-top: 26px; gap: 6px; }
  .pills li { min-height: 34px; padding: 3px 12px 3px 3px; gap: 6px; font-size: 0.8125rem; }
  .pills li > a { padding: 3px 12px 3px 3px; }
  .pills .mark { width: 26px; height: 26px; }
  .pills .mark svg { width: 14px; height: 14px; }
  .pills .mark img { width: 20px; height: 20px; }
  .rev__num { font-size: 5rem; }
  .rev__ctl { flex-wrap: wrap; }
  .timer { order: 5; flex-basis: 100%; margin: 14px 0 0; }
  .rev__count { margin-left: auto; }
  .styles { grid-template-columns: 1fr; }
  .style-names { grid-template-columns: 1fr; }
  .style-names button { font-size: 1.625rem; gap: 12px; padding: 4px 0; }
  .style-names button::before { width: 20px; }
  .chooser__photo { aspect-ratio: 4 / 3; }
  .steps { grid-template-columns: 1fr; }
  .points { grid-template-columns: 1fr; gap: 22px; }
  .blind-rows { grid-template-columns: 1fr 1fr; }
  .blind-row { grid-template-columns: 40px 1fr; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 16px; }
  .blind-row img { grid-row: auto; width: 40px; height: 40px; border-radius: 10px; }
  .blind-row b { font-size: 1.125rem; }
  .blind-row span { display: none; }
  .stage__wall { padding: 22px 22px 0; }
  .stage__floor { margin: 0 -22px; }
  .win { max-width: 260px; }
  .aw { grid-template-columns: 1fr; }
  .glance { grid-template-columns: 1fr; }
  .glance__cta { border-radius: 24px; padding: 18px; }
  .map .also text { font-size: 16px; }
  .map text { font-size: 17px; }
  .map .base text { font-size: 26px; }
  .map .base .sub { font-size: 16px; }
  .form { grid-template-columns: 1fr; }
  .formcard { border-radius: 22px; }
  /* phones: everything to reach him stays open; the link groups fold (windows.js) */
  .foot { padding-top: 40px; }
  .foot__top { grid-template-columns: 1fr; gap: 22px; }
  .foot__social { grid-column: auto; }
  .foot__logo img { width: 190px; }
  .foot__lines { display: grid; }
  .foot__lines a { min-height: 44px; }
  .foot__cols { display: block; margin-top: 28px; padding-top: 0; box-shadow: none; }
  .foot__cols > div > .foot__group + .foot__group { margin-top: 0; }
  .foot__group { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12); }
  .foot__group > summary { cursor: pointer; }
  .foot__group summary h2 { min-height: 54px; margin: 0; }
  .foot__chev { display: block; width: 18px; height: 18px; flex: none; color: #fff; transition: transform 240ms var(--ease); }
  .foot__group[open] .foot__chev { transform: rotate(180deg); }
  .foot__group > ul { columns: 2; column-gap: 16px; }
  .foot__group > ul li { break-inside: avoid; }
  .foot__group > ul a { display: inline-flex; min-height: 40px; align-items: center; }
  .foot__towns { grid-template-columns: 1fr; gap: 4px; }
  .foot__towns dt { padding-top: 6px; }
  .foot .foot__towns a { display: inline-flex; min-height: 36px; align-items: center; }
  .foot__group > :last-child:not(summary) { padding-bottom: 16px; }
  .foot__base { grid-template-columns: 1fr; justify-items: start; margin-top: 16px; padding-top: 0; box-shadow: none; }  /* the last group's line is enough */
  .foot .foot__more a { display: inline-flex; min-height: 40px; align-items: center; }
}

/* ---------- The inner pages' smaller reviews band ---------- */
.rev--small { padding-block: clamp(40px, 4vw, 60px) clamp(24px, 2.5vw, 32px); }
.rev--small .rev__grid { grid-template-columns: minmax(0, 0.5fr) minmax(0, 1.5fr); gap: clamp(28px, 4vw, 64px); }
.rev--small .rev__num { font-size: clamp(3.5rem, 2.2rem + 3vw, 5.5rem); }
.rev--small .rev__stars { margin-top: 10px; }
.rev--small .rev__stars span { width: 20px; height: 20px; }
.rev--small .rev__score h2 { margin-top: 12px; font-size: clamp(1.375rem, 1.2rem + 0.5vw, 1.75rem); }
.rev--small .rev__score h2 + p { font-size: 1rem; }
.rev--small .flip__card { gap: 12px; }
.rev--small .flip__card blockquote p { font-size: clamp(1.0625rem, 0.98rem + 0.3vw, 1.25rem); line-height: 1.5; }
.rev--small .rev__ctl { margin-top: 16px; }
.rev--small .chips { margin-top: 24px; padding-top: 18px; }
.rev--small .mark--big { color: var(--orange-ink); }
.rev--small .flip__card { justify-content: flex-start; }
@media (max-width: 1100px) {
  .rev--small .rev__grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .rev--small .rev__score { display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: 16px; }
  .rev--small .rev__num { font-size: 3.5rem; }
  .rev--small .rev__stars { margin-top: 0; padding-bottom: 6px; }
  .rev--small .rev__score h2 { grid-column: 1 / -1; }
  .rev--small .rev__score h2 + p { display: none; } /* the chips under the band say the same */
}

/* ---------- Shutter styles: the style's words and buttons under its photo, so the columns end together (Jack, 26 Oct) ---------- */
.styles { row-gap: 20px; grid-template-rows: auto auto 1fr; grid-template-areas: "list photo panel" "list fact panel" "list cta panel"; }
.styles__list { grid-area: list; }
.styles .chooser__photo { grid-area: photo; }
.styles .style-fact { grid-area: fact; min-height: 0; }
.styles .panel { grid-area: panel; }
.styles__cta { grid-area: cta; align-self: start; }
@media (max-width: 1100px) {
  .styles { row-gap: 20px; grid-template-rows: auto; grid-template-areas: "list list" "photo panel" "fact panel" "cta panel"; }
  .styles__list { grid-area: list; margin-bottom: 12px; }
}
@media (max-width: 760px) {
  .styles { grid-template-areas: "list" "photo" "fact" "panel" "cta"; }
}

/* ---------- Inner pages (the town and style page mockups, inner.css) ---------- */
/* the opening: a shorter photo, the words at the bottom left */
.phero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: min(80svh, 860px); padding: 150px 0 clamp(40px, 5vw, 72px); color: #fff; background: var(--night); overflow: hidden; }
.phero > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 55%); }
.phero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(18, 26, 41, 0.9) 0%, rgba(18, 26, 41, 0.74) 52%, rgba(18, 26, 41, 0.18) 88%), linear-gradient(180deg, rgba(18, 26, 41, 0.55) 0%, rgba(18, 26, 41, 0) 28%, rgba(18, 26, 41, 0) 62%, rgba(18, 26, 41, 0.7) 100%); }
.phero__in { max-width: 880px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 20px; font-weight: 700; font-size: 0.9375rem; color: rgba(255, 255, 255, 0.86); }
.crumbs li + li::before { content: "›"; margin-right: 10px; opacity: 0.6; }
.crumbs a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { text-decoration: underline; } }
.phero h1 { font-size: clamp(2.5rem, 1.3rem + 4vw, 5.25rem); line-height: 1.02; text-wrap: balance; }
.phero .lede { margin-top: 22px; max-width: 38em; color: rgba(255, 255, 255, 0.92); }
.phero .hero__actions { justify-content: flex-start; margin-top: 32px; }
.phero .pills { justify-content: flex-start; margin-top: 36px; }
/* the page's own words, beside a photo or beside their heading */
.prose { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(40px, 6vw, 104px); align-items: start; }
.prose--single { grid-template-columns: minmax(0, 1fr); }
.prose__text { max-width: 38em; }
.prose__text > * + * { margin-top: 1.05em; }
.prose__text .big { font-family: var(--font-display); font-size: clamp(1.375rem, 1.1rem + 0.7vw, 1.75rem); line-height: 1.35; }
.prose__text h2 + p { margin-top: 22px; }
.prose__text a:not(.btn):not(.more) { color: var(--orange-ink); font-weight: 700; }
.on-dark .prose__text a:not(.btn):not(.more) { color: var(--orange-on-dark); }
.on-dark .prose__text > p:not(.big) { color: var(--on-dark-soft); }
.prose__text .btn { margin-top: 30px; }
.prose__text .qa + p { margin-top: 28px; }
.prose__ph { position: sticky; top: 110px; aspect-ratio: 4 / 5; border-radius: var(--radius-card); overflow: hidden; background: var(--mist-2); }
.prose__ph img { width: 100%; height: 100%; object-fit: cover; }
.prose__side { display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 1101px) {
  /* the photo grows or shrinks so the two columns end together (within limits; it stays in view on long words) */
  .prose:not(.prose--single) { align-items: stretch; }
  .prose__side .prose__ph { flex: 1 1 auto; aspect-ratio: auto; min-height: 300px; max-height: min(720px, calc(100vh - 140px)); }
  .prose__ph img { position: absolute; inset: 0; }
  .prose.prose--aside { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: start; }
  .prose--aside .prose__side { position: sticky; top: 110px; }
}
/* a customer's own words beside the page's */
.pquote { margin: 0; padding: 24px 26px; border-radius: var(--radius-card); background: var(--navy); color: #fff; }
.pquote blockquote { margin: 0; }
.on-dark .pquote { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--glass-line); }
.pquote p { font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + 0.4vw, 1.35rem); line-height: 1.4; }
.pquote figcaption { margin-top: 12px; font-size: 0.95rem; color: var(--on-dark-soft); }
.pquote figcaption b { margin-right: 6px; color: #fff; }
/* the words across the page: highlights in two columns, then the facts, quote and questions side by side */
.pwide { display: grid; gap: clamp(24px, 3vw, 36px); }
.pwide .prose__text { max-width: none; }
/* running text, so it reads down the first column, then the second */
@media (min-width: 900px) { .pwide .hls { display: block; columns: 2; column-gap: clamp(28px, 4vw, 56px); } .pwide .hl { break-inside: avoid; } }
.pwide__extra { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 18px; align-items: start; }
.pwide .pwide__extra > *, .prose .prose__side > * { margin: 0; }
.pwide__end:empty { display: none; }
/* the room's own fact, from the homepage, beside it */
.try__fact { margin-top: 22px; padding: 18px 22px; border-radius: 18px; background: var(--mist); box-shadow: inset 4px 0 0 var(--orange-ink); font-size: 1.0625rem; line-height: 1.55; }
.try__fact b { display: block; margin-bottom: 4px; font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; line-height: 1.2; }
.try .qa { margin-top: 22px; }
/* three or more jobs: the heading in the map's column, one column itself; the column scrolls with the page (it's
   taller than the screen), and on phones and tablets the heading still comes first */
.work-map > .head2 { margin-bottom: 24px; grid-template-columns: 1fr; gap: 12px; }
.work-map:has(> .head2) { position: static; }
@media (max-width: 1100px) { .work-map:has(> .head2) { display: contents; } .work-map > .head2 { order: -2; } }
.prose__ph figcaption { position: absolute; left: 14px; bottom: 14px; padding: 9px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.95); color: var(--ink); font-size: 1rem; font-weight: 700; }
/* quick facts, in the page's own words */
.glance-facts { display: grid; gap: 12px; margin-top: 28px; padding: 24px 26px; border-radius: 22px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.glance-facts h3 { font-family: var(--font-ui); font-size: 1rem; font-weight: 800; letter-spacing: 0; color: #fff; }
.glance-facts ul { display: grid; gap: 12px; }
.glance-facts li { display: flex; gap: 12px; font-weight: 700; line-height: 1.45; }
.glance-facts li::before { content: ""; width: 8px; height: 8px; flex: none; margin-top: 0.55em; border-radius: 50%; background: var(--orange-on-dark); }
.sec:not(.on-dark) .glance-facts { background: var(--mist); box-shadow: inset 0 0 0 1px var(--line); }
.sec:not(.on-dark) .glance-facts h3 { color: var(--ink); }
.sec:not(.on-dark) .glance-facts li::before { background: var(--orange-ink); }
/* questions that open and close, without JavaScript */
.qa { margin-top: 36px; border-radius: 22px; background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.qa details + details { box-shadow: inset 0 1px 0 var(--line); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 16px 24px; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem); line-height: 1.3; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--mist) no-repeat center / 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%23c63b15' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); transition: transform 260ms var(--ease); }
.qa details[open] summary::after { transform: rotate(45deg); }
.qa details p { padding: 0 24px 22px; color: var(--muted); max-width: 40em; }
/* links to the styles */
.style-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.style-chips a { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); font-weight: 800; font-size: 0.9375rem; text-decoration: none; transition: box-shadow 200ms ease, scale 160ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .style-chips a:hover { box-shadow: inset 0 0 0 1.5px var(--ink); } }
.chips-label { margin-top: 32px; font-weight: 800; }
/* the heading beside the words */
.why2 { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.why2 > div:first-child { position: sticky; top: 110px; }
/* words under the heading: the heading scrolls with them, or it would slide over them */
.why2:has(> .why2__after) > div:first-child { position: static; }
.why2__after { padding-top: 22px; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.why2__after > * + * { margin-top: 0.9em; }
.why2__after a { color: var(--orange-ink); font-weight: 700; }
.on-dark .why2__after a { color: var(--orange-on-dark); }
@media (min-width: 1101px) {
  .why2 { grid-template-rows: auto 1fr; row-gap: 28px; }
  .why2 > .prose__text { grid-column: 2; grid-row: 1 / span 2; }
  .why2__after { grid-column: 1; grid-row: 2; align-self: start; }
}
/* the louvre room or the blinds window on a style's or blind's own page */
.try { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 104px); align-items: start; }
.try .panel { background: var(--mist); }
.try .panel__cta { margin-top: 18px; }
.try .panel__cta .btn { max-width: 100%; padding-block: 10px; white-space: normal; text-align: center; } /* "Ask about day and night blinds at my survey" is wider than a small phone */
/* other styles, other blinds */
.others { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.others a { display: grid; gap: 10px; align-content: start; color: inherit; text-decoration: none; }
.others .ph { aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; background: var(--mist-2); }
.others img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.others h3 { margin-top: 4px; font-size: 1.5rem; }
.others p { color: var(--muted); font-size: 1rem; line-height: 1.5; }
@media (hover: hover) and (pointer: fine) { .others a:hover img { transform: scale(1.04); } }
/* a town page's jobs, beside the map */
.town-jobs { display: grid; gap: 28px; }
@media (min-width: 640px) { .town-jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 22px; } .town-job:only-child { grid-column: 1 / -1; } }
/* an odd last job takes the whole row, its photo beside its words, so no empty cell */
@media (min-width: 640px) { .town-job:last-child:nth-child(odd):not(:only-child) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(4, auto) 1fr; column-gap: 22px; align-content: start; } .town-job:last-child:nth-child(odd):not(:only-child) > figure { grid-row: 1 / -1; } }
.town-job h3 { font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem); }
.town-job figure { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-card); overflow: hidden; background: var(--navy); }
.town-job img { width: 100%; height: 100%; object-fit: cover; }
.town-job .job__cat { margin-top: 16px; }
.town-job p:not(.job__cat) { margin-top: 8px; color: var(--on-dark-soft); max-width: 34em; }
.town-job .more { margin-top: 8px; }
.map a text { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .map a:hover text { text-decoration: underline; } }
/* the portfolio's photo wall */
.wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wall figure { display: grid; gap: 10px; }
.wall a { display: block; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: var(--mist-2); }
.wall img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.wall figcaption { font-weight: 700; font-size: 1rem; }
@media (hover: hover) and (pointer: fine) { .wall a:hover img { transform: scale(1.03); } }
/* a clip in the wall (look C): its poster, a play badge with its length, a silent preview on hover, then the viewer */
.vtile { position: relative; background: var(--navy-deep); }
.vtile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 300ms var(--ease); }
.vtile.is-previewing video { opacity: 1; }
.vtile:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.vtile__badge { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; color: var(--navy); background: rgba(255, 255, 255, 0.95); }
.vtile__play { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--orange); color: #fff; }
.vtile__play svg { width: 12px; height: 12px; margin-left: 2px; }
.viewer { width: fit-content; max-width: 92vw; max-height: 92vh; padding: 0; border: 0; border-radius: var(--radius-card); background: var(--night); color: #fff; overflow: hidden; }
.viewer::backdrop { background: rgba(10, 15, 25, 0.82); }
/* the clip fills the viewer (letterboxed), and the bar with its close button always fits under it */
.viewer video { display: block; width: 100%; height: min(80vh, calc(92vh - 68px), 1100px); max-width: 92vw; object-fit: contain; background: #000; }
@media (orientation: portrait) { .viewer video { width: 92vw; height: auto; max-height: min(78vh, calc(92vh - 68px)); } }
.viewer__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px 12px 18px; font-weight: 600; }
.viewer__close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; color: #fff; background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-line); cursor: pointer; }
.viewer__close:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.viewer__close svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: no-preference) { .viewer[open] { animation: viewer-in 320ms var(--ease) both; } }
@keyframes viewer-in { from { opacity: 0; transform: scale(0.96); } }

/* a clip beside its words (look A): a phone frame, a label, a pause button and a line for how far through it is */
.see { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(40px, 7vw, 120px); align-items: center; }
.see__text { max-width: 34em; }
.see__eyebrow { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange-ink); }
.on-dark .see__eyebrow { color: var(--orange-on-dark); }
.see__eyebrow + h2 { margin-top: 14px; }
.see__text h2 + p { margin-top: 18px; }
.on-dark .see__text p { color: var(--on-dark-soft); }
.see__facts { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.see__facts li { padding: 8px 14px; border-radius: 999px; font-size: 0.9375rem; font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); }
.on-dark .see__facts li { background: var(--glass); box-shadow: inset 0 0 0 1px var(--soft-line); }
.see__text .btn { margin-top: 30px; }
.see__phone { width: clamp(240px, 24vw, 320px); }
.see__full { display: block; min-height: 44px; margin: 10px auto 0; padding: 0 12px; border: 0; background: none; font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.on-dark .see__full { color: var(--on-dark-soft); }
.see__full:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 8px; }
.see__full[hidden], .clip__toggle[hidden] { display: none; }
.clip { position: relative; aspect-ratio: 9 / 16; border-radius: 34px; overflow: hidden; isolation: isolate; background: var(--navy-deep); box-shadow: 0 0 0 10px #1d2840, 0 0 0 11px rgba(255, 255, 255, 0.08), 0 40px 80px -30px rgba(0, 0, 0, 0.55); }
.clip video { display: block; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.clip__chip { position: absolute; left: 14px; top: 14px; padding: 7px 12px; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; color: var(--navy); background: rgba(255, 255, 255, 0.94); pointer-events: none; }
.clip__chip::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--orange); vertical-align: 1px; }
.clip__toggle { position: absolute; right: 14px; bottom: 16px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; color: #fff; background: rgba(18, 26, 41, 0.6); box-shadow: inset 0 0 0 1px var(--glass-line); cursor: pointer; transition: transform var(--t-press) var(--ease); }
.clip__toggle:active { transform: scale(0.94); }
.clip__toggle:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.clip__toggle svg { width: 16px; height: 16px; }
.clip__toggle .play, .clip.is-paused .clip__toggle .pause { display: none; }
.clip.is-paused .clip__toggle .play { display: block; }
.clip__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.18); pointer-events: none; }
.clip__bar i { display: block; height: 100%; background: var(--orange-on-dark); transform-origin: left; transform: scaleX(var(--p, 0)); }
@media (max-width: 52rem) {
  .see { grid-template-columns: 1fr; }
  .see__phone { justify-self: center; width: min(74vw, 290px); }
}
/* areas that we cover */
.areas { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 24px clamp(32px, 5vw, 96px); align-items: start; }
.areas .lede { margin-bottom: 0; }
.areas > .area-chips, .areas > .areas__note { grid-column: 1 / -1; }
.areas > .area-chips { margin-top: 8px; }
.area-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.area-chips li > * { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: 999px; font-weight: 800; font-size: 0.9375rem; }
.area-chips a { background: var(--navy); color: #fff; text-decoration: none; transition: background-color 200ms ease, scale 160ms var(--ease); }
.area-chips a[aria-current="page"] { background: var(--orange-ink); }
.area-chips span { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line); }
@media (hover: hover) and (pointer: fine) { .area-chips a:not([aria-current]):hover { background: var(--ink); } }
.areas__note { margin-top: 18px; color: var(--muted); font-size: 1rem; }
@media (max-width: 1100px) {
  .prose, .why2, .areas, .try { grid-template-columns: 1fr; }
  .town-jobs { order: -1; }
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .others { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prose__ph { position: relative; top: 0; aspect-ratio: 16 / 11; max-width: 720px; }
  .why2 > div:first-child { position: static; }
}
@media (max-width: 760px) {
  /* buttons and badges follow look D (Jack, 27 Oct), not the page mockups' full-width buttons */
  .phero { min-height: 86svh; padding-top: 118px; }
  .phero > img { object-position: var(--phone-focus, 50% 68%); }
  .phero::after { background: linear-gradient(180deg, rgba(18, 26, 41, 0.6) 0%, rgba(18, 26, 41, 0.3) 30%, rgba(18, 26, 41, 0.92) 78%); }
  .prose__ph { aspect-ratio: 4 / 3; }
  .others { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wall { grid-template-columns: 1fr; }
  .qa summary { padding: 14px 18px; }
  .qa details p { padding: 0 18px 20px; }
}

/* ---------- Pages without an opening photo: the privacy page and the 404 page ---------- */
.privacy, .not-found { padding-block: clamp(140px, 14vw, 190px) clamp(80px, 9vw, 136px); }
.privacy__inner, .not-found__inner { max-width: 820px; }
.privacy h1, .not-found h1 { font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem); }
.privacy h2 { margin-top: 40px; font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); }
.privacy p, .privacy ul, .privacy ol { margin-top: 16px; }
.privacy ul { list-style: disc; padding-left: 1.4em; }
/* the blog: the list of posts and a post */
.blog .lede { margin-top: 18px; }
.privacy .posts { list-style: none; padding: 0; display: grid; gap: 14px; margin-top: 36px; }
.post-card { display: grid; gap: 8px; padding: 24px 26px; border-radius: var(--radius-card); background: var(--mist); color: inherit; text-decoration: none; transition: background-color 200ms ease, scale 160ms var(--ease); }
.privacy .post-card h2 { margin-top: 0; font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); }
.privacy .post-card p { margin-top: 0; color: var(--muted); }
.post-card time { color: var(--muted); font-size: 0.9375rem; font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .post-card:hover { background: var(--mist-2); } }
.post__crumb a { font-weight: 800; color: var(--orange-ink); text-decoration: none; }
.privacy .post__crumb { margin: 0 0 14px; }
.privacy .post__meta { color: var(--muted); font-weight: 700; font-size: 0.9375rem; }
.post__body a { color: var(--orange-ink); font-weight: 700; }
.not-found .lede { margin-top: 18px; }
.not-found p:last-child { margin-top: 32px; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-load] { opacity: 0; transform: translateY(18px); animation: arrive 800ms var(--ease) forwards; animation-delay: var(--d, 0ms); }
  .js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 500ms var(--ease), transform 600ms var(--ease); transition-delay: calc(var(--r, 0) * 70ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .settle { transform: scale(1.08); animation: settle 2400ms var(--ease) forwards; }
}
@keyframes settle { to { transform: none; } }
@keyframes arrive { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .elev__leaf, .elev__group > i::before, .elev__group::after, .chooser__photo img, .room::before, .room::after, .floor__light, .win * { transition-duration: 0ms !important; }
  .win .dn .sheet i { animation: none !important; }
  /* the glass bar, its drop-downs and the link highlight fade in place; nothing slides or grows */
  .dd__menu, .dd__pic, .nav-glide { transition-property: opacity, visibility, background-color !important; }
  .dd__menu, .dd__pic { transform: none !important; }
  .mm__fold, .mm__row svg { transition: none !important; }
  .top.is-solid .top__in { animation: none; }
  .logo-tab { transition-property: border-radius, box-shadow !important; }
}

/* Shutters or blinds in one place (range_switch): a pill switch, its highlight sliding under the one picked */
.range-band { padding-top: clamp(24px, 3vw, 40px); text-align: center; }  /* the section above already ends with its own space */
.range-band + .sec, .range-band + .sec + .sec { padding-top: clamp(40px, 4vw, 56px); background: var(--white); }
.range-band + .sec, .range-band + .sec + .sec { scroll-margin-top: 210px; }  /* /#blinds stops with the switch in view */
.range-tabs { position: relative; display: inline-grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); padding: 6px; border-radius: 999px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -26px rgba(18, 26, 41, 0.45); }
.range-tabs__tab { position: relative; z-index: 1; min-height: 58px; min-width: clamp(140px, 16vw, 200px); padding: 0 clamp(22px, 3vw, 44px); border: 0; border-radius: 999px; background: none; color: var(--ink); font: inherit; font-weight: 800; font-size: 1.125rem; cursor: pointer; transition: color var(--t-hover) ease, scale 160ms var(--ease); }
.range-tabs__tab[aria-selected="true"] { color: #fff; background: var(--navy); transition: color var(--t-hover) ease, background-color 0s 280ms, scale 160ms var(--ease); }
html:not(.js) .range-band { display: none; }
.range-tabs__tab:focus-visible { outline: 3px solid var(--orange-ink); outline-offset: 3px; }
.range-tabs__pill { position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / var(--n)); border-radius: 999px; background: var(--navy); box-shadow: 0 10px 22px -12px rgba(18, 26, 41, 0.7); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform 280ms var(--ease-in-out); }
.sec.is-entering > .wrap { animation: range-in 360ms var(--ease) both; }
@keyframes range-in { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .range-tabs__pill, .range-tabs__tab[aria-selected="true"] { transition: none; } .sec.is-entering > .wrap { animation: none; } }

/* Long words to skim (prose, style_room, blind_room look: cards | highlights; Jack, 28 Oct). Every word stays. */
.pcards { display: grid; gap: 12px; margin-block: 4px 8px; }
.prose--single .pcards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.pcard { position: relative; padding: 22px 24px 22px 76px; border-radius: var(--radius-card); background: color-mix(in srgb, currentColor 5%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 10%, transparent); }
.pcard p { margin: 0; }
.pcard b { font-weight: 800; }
.pcard__n { position: absolute; left: 24px; top: 18px; font-family: var(--font-display); font-size: 1.6rem; line-height: 1; color: var(--orange-ink); }
.on-dark .pcard__n { color: var(--orange-on-dark); }
.hls { display: grid; margin-block: 4px 8px; border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
.hl { border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
.hl summary, .hl--one { display: grid; grid-template-columns: 26px 1fr 24px; gap: 12px; align-items: start; margin: 0; padding: 16px 0; font-weight: 700; cursor: pointer; list-style: none; }
.hl summary::-webkit-details-marker { display: none; }
.hl summary::before, .hl--one::before { content: ""; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; background: var(--orange-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 10.5 2.6 2.6L14.5 7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.hl summary::after { content: "+"; font-size: 1.4rem; line-height: 1; text-align: center; opacity: 0.6; transition: transform 200ms var(--ease); }
.hl[open] summary::after { transform: rotate(45deg); }
.hl summary:focus-visible { outline: 3px solid var(--orange-ink); outline-offset: 2px; border-radius: 6px; }
.on-dark .hl summary:focus-visible { outline-color: var(--orange-on-dark); }
.hl summary > span, .hl--one > span { min-width: 0; }

/* look story (Jack, 28 Oct: "too much text"): a long list one point at a time under its name, the names beside to jump
   to any point; the next comes on when its bar has filled. Until windows.js has set it up (or without JavaScript)
   every point shows, one under another. */
.story { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 36px 56px; margin-block: 8px; container-type: inline-size; }
.story__main { display: flex; flex-direction: column; flex: 1 1 460px; min-width: 0; }
.story__bars, .story__nav, .story__index { display: none; }
.story.is-ready .story__bars { display: flex; gap: 6px; margin-bottom: 22px; }
.story.is-ready .story__nav { order: 1; display: flex; align-items: center; gap: 10px; margin-top: 28px; }
.story.is-ready .story__index { display: grid; }
@container (max-width: 820px) { .story.is-ready .story__index { display: none; } }
.story__bar { position: relative; flex: 1; height: 18px; cursor: pointer; }
.story__bar::before, .story__bar::after { content: ""; position: absolute; inset: 7px 0; border-radius: 4px; background: color-mix(in srgb, currentColor 22%, transparent); }
.story__bar::after { right: 100%; background: var(--orange-ink); }
.on-dark .story__bar::after { background: var(--orange-on-dark); }
.story__bar.is-done::after, .story__bar.is-on::after { right: 0; }
/* the current bar fills only while it plays; paused, held or off screen it stops where it is */
@media (prefers-reduced-motion: no-preference) {
  .story.is-ready .story__bar.is-on::after { animation: story-fill var(--hold, 7s) linear both paused; }
  .story.is-playing:not(.is-held) .story__bar.is-on::after { animation-play-state: running; }
}
@keyframes story-fill { from { right: 100%; } to { right: 0; } }
.story__slide p { margin: 0; }
.story__slide p + p { margin-top: 0.8em; }
.story__slide + .story__slide { margin-top: 32px; }
.story.is-ready .story__stage { display: grid; }
.story.is-ready .story__slide { grid-area: 1 / 1; margin: 0; visibility: hidden; opacity: 0; transform: translateX(18px); filter: blur(2px); transition: opacity 200ms ease, transform 300ms var(--ease), filter 200ms ease, visibility 0s linear 300ms; }
.story.is-ready .story__slide.is-before { transform: translateX(-18px); }
.story.is-ready .story__slide.is-on { visibility: visible; opacity: 1; transform: none; filter: none; transition: opacity 320ms ease 60ms, transform 420ms var(--ease) 60ms, filter 320ms ease 60ms, visibility 0s; }
@media (prefers-reduced-motion: reduce) { .story.is-ready .story__slide { transform: none !important; filter: none !important; } }
.sec:has(.story) { overflow-x: clip; }  /* the next point waits 18px to the side: past a phone's edge, it made the page scroll sideways */
.story__slide .story__name { margin: 0 0 14px; color: var(--orange-ink); font-size: 0.85rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.on-dark .story__slide .story__name { color: var(--orange-on-dark); }
.story__slide .story__lead { margin: 0 0 0.6em; font-family: var(--font-display); font-size: clamp(1.3rem, 1rem + 1.8cqi, 1.75rem); line-height: 1.24; }
.story__count { min-width: 5.5em; text-align: center; font-weight: 700; }
.story .round { background: color-mix(in srgb, currentColor 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 24%, transparent); color: inherit; }
@media (hover: hover) { .story .round:hover { background: color-mix(in srgb, currentColor 16%, transparent); } }
.story [data-story-go="-1"] svg { transform: scaleX(-1); }
.story [data-story-pause] { margin-left: auto; }
.story__index { flex: 0 1 300px; gap: 2px; margin: 0; padding: 0; list-style: none; counter-reset: point; }
.story__index li { counter-increment: point; }
.story__index button { display: flex; gap: 14px; width: 100%; padding: 9px 12px; border: 0; border-radius: 12px; background: none; color: inherit; font: 600 0.98rem/1.3 var(--font-ui); text-align: left; cursor: pointer; transition: color var(--t-hover), background-color var(--t-hover), scale 160ms var(--ease); }
/* the names a little softer than the current one; their orange numbers keep full strength */
.story__index button { color: color-mix(in srgb, currentColor 80%, transparent); }
.story__index button::before { content: counter(point, decimal-leading-zero); color: var(--orange-ink); font-family: var(--font-display); }
.on-dark .story__index button::before { color: var(--orange-on-dark); }
@media (hover: hover) { .story__index button:hover { color: inherit; } }
.story__index button[aria-current="true"] { color: inherit; background: color-mix(in srgb, currentColor 9%, transparent); }
.hl summary { font-weight: 650; }
.hl--one { grid-template-columns: 26px 1fr; cursor: auto; }
.hl > p { margin: -6px 0 0 38px; padding-bottom: 18px; }
@media (max-width: 700px) { .pcard { padding: 54px 22px 22px; } }
@media (prefers-reduced-motion: reduce) { .hl summary::after { transition: none; } }

/* Names and their words as photo cards (item_cards, Jack, 28 Oct) */
.items-head { max-width: 860px; align-items: start; } /* a highlight opening under it doesn't move the heading */
.icards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; margin-top: clamp(28px, 3vw, 40px); }
/* four cards: one row on a laptop, two by two on a tablet, never three and one */
.icards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1180px) { .icards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .icards:has(> :nth-child(4):last-child) { grid-template-columns: 1fr; } }
.icard { overflow: hidden; border-radius: var(--radius-card); background: var(--white); box-shadow: 0 0 0 1px var(--line), 0 18px 40px -28px rgba(18, 26, 41, 0.5); }
.icard .ph img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.icard__text { padding: 20px 22px 24px; }
.icard h3 { margin: 0 0 8px; font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem); }
.icard h3 a { color: inherit; text-decoration: none; }
.icard h3 a::after { content: " →"; color: var(--orange-ink); }
@media (hover: hover) and (pointer: fine) { .icard h3 a:hover { color: var(--orange-ink); } }
.icard p { margin: 0 0 10px; }
.icard p:last-child { margin-bottom: 0; }


/* Everything you can press shows it heard you (Emil Kowalski): a quick, slight shrink; big cards shrink less */
.others a, .wall a, .aw a, .qa summary, .hl summary, .top__phone, .top__menu, .chips__link a { transition: scale 160ms var(--ease); }
.style-chips a:active, .area-chips a:active, .towns a:active, .style-names button:active, .story__index button:active, .range-tabs__tab:active, .qa summary:active, .hl summary:active, .top__phone:active, .top__menu:active, .chips__link a:active { scale: 0.97; }
/* a drop-down link darkens as it's pressed: shrinking it would move its photo away mid-click */
.top nav .dd__menu a:active { background: rgba(18, 26, 41, 0.1); }
.others a:active, .wall a:active, .aw a:active, .glance a:active, .post-card:active { scale: 0.985; }

/* A question opens with its answer growing in, not a jump (browsers that can animate to height: auto; others snap) */
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .qa details, details.hl { interpolate-size: allow-keywords; }
    .qa details::details-content, details.hl::details-content { height: 0; overflow: clip; opacity: 0; transition: height 260ms var(--ease), opacity 200ms ease, content-visibility 260ms allow-discrete; }
    .qa details[open]::details-content, details.hl[open]::details-content { height: auto; opacity: 1; }
  }
}

/* An awning's room (awning_room; Jack, 28 Oct): a drawing you work, in the site's colours. The fabric rolls out and its
   shade grows on the ground; a pergola's roof louvres turn open and the light comes through. It follows a drag at once
   (.is-live) and glides to a preset. */
.aw-frame { border-radius: 16px; overflow: hidden; background: var(--white); }
.aw-art { display: block; width: 100%; height: auto; }
.aw-sun { fill: #f6b75e; }
.aw-ground { fill: #d9d2c5; }
.aw-joints { fill: none; stroke: rgba(29, 41, 64, 0.1); stroke-width: 1.5; }
.aw-door, .aw-glass { fill: #c9d7e4; stroke: #fff; stroke-width: 3; }
.aw-sign, .aw-cassette, .aw-bar, .aw-things, .aw-post, .aw-beam { fill: var(--navy); }
.aw-stripe { fill: var(--orange-ink); }
.aw-stripe--b { fill: #f7e6dc; }
.aw-wall { fill: #f1ebe2; }
.aw-sky { fill: #dfe9f3; }
.aw-shade { fill: rgba(18, 26, 41, 0.2); transform-box: fill-box; transform-origin: center top; transform: scaleY(var(--out)); }
.aw-fabric { transform-box: fill-box; transform-origin: center top; transform: scaleY(var(--out)); }
.aw-front { transform: translateY(calc(var(--out) * 118px)); }
.aw-slat { fill: #3b4a63; transform-box: fill-box; transform-origin: center; transform: rotate(calc(var(--out) * 80deg)); }
.aw-ray { fill: #fff3d2; opacity: calc(var(--out) * 0.6); }
.aw-shade--roof { transform: none; opacity: calc(1 - var(--out) * 0.7); }
.aw-shade, .aw-fabric, .aw-front, .aw-slat, .aw-ray { transition: transform 600ms var(--ease-in-out), opacity 600ms ease; }
.aw-frame.is-live * { transition: none; }
@media (prefers-reduced-motion: reduce) { .aw-art * { transition: none !important; } }

/* Phones: the survey button comes up from the bottom once the opening has gone, and goes away at the survey itself
   (windows.js setUpDock; Jack, 28 Oct: "a pop up button for the survey sits at the bottom") */
.dock { display: none; }
@media (max-width: 760px) {
  .js .dock { display: inline-flex; position: fixed; z-index: 38; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); translate: -50% 0; transform: translateY(170%); visibility: hidden; box-shadow: 0 12px 24px -12px rgba(198, 59, 21, 0.6); transition: transform 460ms cubic-bezier(0.34, 1.36, 0.64, 1), visibility 0s linear 460ms; }
  .js .dock.is-up { transform: none; visibility: visible; transition: transform 460ms cubic-bezier(0.34, 1.36, 0.64, 1), visibility 0s; }
  .js .dock.is-up:active { transform: scale(0.97); }
}
@media (prefers-reduced-motion: reduce) { .js .dock, .js .dock.is-up { transition: visibility 0s; } }

/* The cookie banner (consent.js; only with Google's ad tag): a navy card along the foot of the screen, Accept and
   Reject the same size and weight. It waits for the opening's intro, the survey button stands aside while it's up,
   and the footer keeps clear of it (--cookies-room) */
.cookies { position: fixed; inset: auto 12px calc(12px + env(safe-area-inset-bottom)); z-index: 45; max-width: 46rem; margin-inline: auto; padding: 18px 20px; border-radius: var(--radius-card); background: var(--navy); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 24px 48px -20px rgba(10, 15, 25, 0.6); }
.cookies[hidden] { display: none; }
.cookies__inner { display: grid; gap: 14px; }
.cookies__text { margin: 0; color: var(--on-dark-soft); font-size: 0.9375rem; line-height: 1.5; }
.cookies__text a { color: #fff; font-weight: 700; white-space: nowrap; }
.cookies__choices { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }  /* the same width whatever their words */
.cookies__button { min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: #fff; color: var(--navy); font: inherit; font-size: 0.9375rem; font-weight: 700; cursor: pointer; transition: transform var(--t-press) var(--ease); }
.cookies__button:active { transform: scale(0.97); }
.cookies :focus-visible { outline-color: var(--orange-on-dark); }
.cookies__button:focus-visible { outline: 3px solid var(--orange-on-dark); outline-offset: 2px; }
@media (min-width: 640px) {
  .cookies__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; }
  .cookies__button { min-width: 112px; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .cookies:not([hidden]) { animation: cookies-in 420ms var(--ease) 300ms both; }
  .js.intro-play .cookies:not([hidden]):not([data-reopened]) { animation-delay: 1800ms; }  /* after the logo's intro */
  .js .cookies[data-reopened] { animation-name: cookies-back; animation-delay: 0ms; }
}
/* hidden while it waits, so an unseen Accept can't be pressed or tabbed to; reopened, its first button takes focus at once */
@keyframes cookies-in { from { opacity: 0; transform: translateY(16px); visibility: hidden; } }
@keyframes cookies-back { from { opacity: 0; transform: translateY(16px); } }
:root:has(.cookies:not([hidden])) { scroll-padding-bottom: calc(var(--cookies-room, 0px) + 24px); }
:root:has(.cookies:not([hidden])) .foot { padding-bottom: calc(28px + var(--cookies-room, 0px) + 12px); }
:root:has(.cookies:not([hidden])) .dock { visibility: hidden; }
.foot__cookies { padding: 0; border: 0; background: none; color: #fff; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.foot__cookies:focus-visible { outline: 3px solid var(--orange-on-dark); outline-offset: 2px; border-radius: 4px; }

/* Every kind of awning's drawing in one place (awning_switch): the switch beside the heading, the drawing beside them */
.awsw__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 32px; margin-bottom: 28px; }
.awsw__head h2 { margin: 0; }
.awsw .range-tabs { box-shadow: inset 0 0 0 1px var(--line); }
html:not(.js) .awsw .range-tabs { display: none; }
.awsw__panel[hidden] { display: none; }  /* the one not picked */
.awsw__panel { scroll-margin-top: 240px; }  /* a link to a drawing (#awsw-pergola) stops with its switch in view */
.awsw__panel + .awsw__panel { margin-top: 32px; }  /* without JavaScript, one under another */
.js .awsw__panel + .awsw__panel { margin-top: 0; }
.awsw__panel.is-entering { animation: range-in 360ms var(--ease) both; }
.awsw .panel { background: var(--white); }
.awsw__about { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.awsw__about .btn { max-width: 100%; padding-block: 10px; white-space: normal; text-align: left; }  /* long asks wrap on small phones */
.awsw__line { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 1.0625rem; }
/* laptops: its words and controls on the left, the drawing on the right */
@media (min-width: 1000px) {
  .panel--wide { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: clamp(28px, 4vw, 56px); align-items: start; }
  .panel--wide > .aw-frame { grid-column: 2; grid-row: 1 / span 4; }
  .panel--wide > :not(.aw-frame) { grid-column: 1; }
  .panel--wide .awsw__about { flex-direction: column; align-items: flex-start; margin-bottom: 8px; }
}