/* Tidyee. Values come from the approved Webflow design (staging, Oct 2026). */

@font-face {
  font-family: "Anek Latin";
  src: url("/fonts/anek-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Anek Latin";
  src: url("/fonts/anek-latin-ext.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --paper: #fff;
  --ink: #16181d;
  --grey: #776c6c;
  --blush: #edc0c2;
  --pink: #e5277a;
  --hair: #e8e3e3;
  --glass: #ffffffdb;
  --glass-thin: #ffffffa3;
  --placeholder: #f1ecec;
  --map-ground: #faf0f1;    /* the drawn maps' ground (tools/maps/render_area.py GROUND) */
  --placeholder-stripe: rgb(22 24 29 / 3%);
  /* A mark on the blush ground: the ink taken halfway into the blush, so a grey
     silhouette reads as part of the pink rather than mud on it. */
  --mark-on-blush: color-mix(in srgb, var(--ink) 52%, var(--blush));
  --tint: #f7eeee;          /* choices, menu hover: the palest blush */
  --blush-fade: #f7dfe0;    /* where a blush band fades to paper */
  --glass-edge: rgb(255 255 255 / 60%); /* the bright rim of every pane */
  /* One piece of the brand mark: the marker for every list. */
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0 Q4.9 0 2.5 2.1 Q0 4.1 0 8 L0 12 Q0 15.9 2.5 17.9 Q4.9 20 10 20 Q15.1 20 17.5 17.9 Q20 15.9 20 12 L20 8 Q20 4.1 17.5 2.1 Q15.1 0 10 0 Z'/%3E%3C/svg%3E") center / contain no-repeat;

  --type-1: 12px;
  --type-2: 15px;
  --type-3: 19px;
  --type-4: 24px;
  --type-5: 30px;
  --type-6: 37px;
  --type-7: 46px;
  --type-8: 58px;
  --type-poster: 20rem; /* section labels as poster type */
  --poster: color-mix(in srgb, var(--grey) 11%, transparent);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 60px;
  --space-11: 72px;
  --space-13: 112px;

  --content: 1240px;
  /* Corners: every corner is the logo's pane corner. Four sizes and no others;
     an element takes the size nearest 40% of its shorter side, so nothing is
     ever a pill. Elements keep their natural size; the corner follows them. */
  --radius-chip: 16px;   /* buttons, fields, choices, menu entries (36–48px) */
  --radius-button: 22px; /* name labels (around 56px) */
  --radius-card: 34px;   /* cards, quotes, plates, menus (84px and up) */
  --radius-pane: 80px;   /* photos and the panes that hold a band (200px and up) */
  /* The hero's blush sweeps (its curve shows beside and below the photo); a band
     or the footer takes a curve that suits a band and stays clear of its content. */
  --curve-hero: min(65vh, 45vw);
  --curve: 200px;
  --header-h: 68px;
  --fold: 96px; /* how far a call-out folds over the band above it */
  /* How far a pane rises over the foot of the photo it sits on (the hero's
     quote pane, the carousel's panes). */
  --rise: var(--space-9);
  --rise-deep: var(--space-13);
  --quick: 0.15s; /* every transition */
  /* Rhythm: a band opens with --band-top and closes with --band-foot, so the
     copy of two bands sits the same distance apart everywhere. */
  --band-top: var(--space-13);
  /* The grid: two text columns of --col inside the container, --gutter apart.
     Every two-column band puts its words on one of these two lines. */
  --gutter: var(--space-11);
  /* How far a stretched photo runs past the foot of the column beside it;
     before a blush band, it runs on over the band's top edge by the same. */
  --step: var(--space-10);
  /* From the grid's outer line to the page edge: how far a photo runs off the page. */
  --edge: max(var(--space-6), (100vw - var(--content)) / 2 + var(--space-6));
  --col: calc((min(100vw, var(--content)) - 2 * var(--space-6) - var(--gutter)) / 2);
  /* A band's head (heading and intro over a full-width layout) keeps to the left column. */
  --head: var(--col);
  /* How far a pane reaches past its column over the photo beside it. */
  --reach: calc(var(--space-13) + var(--gutter));
  --band-foot: var(--space-10);
  /* A blush band opens with room for its curve: its edge sits a foot below the
     content before it, its own content this far below its edge. */
  --ground-top: calc(var(--space-13) * 2);
  --shadow: 0 18px 50px -20px rgb(22 24 29 / 28%);
  /* Something you can press lifts a little towards you on hover. */
  --lift: -2px;
  --shadow-lift: 0 24px 60px -20px rgb(22 24 29 / 34%);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Clipped below the root: on a phone, a clip on the root or body still lets the page pan sideways to a pane sliding in from off the edge. */
main, .footer { overflow-x: clip; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--type-3) / 1.5 "Anek Latin", system-ui, sans-serif;
}
h1, h2, h3, h4, .callout_line { margin: 0 0 var(--space-5); font-weight: 700; letter-spacing: -0.02em; }
h1, .hero_title { font-size: var(--type-8); line-height: 1; letter-spacing: -0.035em; }
/* A long title takes one step down, never half the size. */
.hero h1.hero_title:is(.is-long, .is-statement) { font-size: var(--type-7); font-weight: 700; line-height: 1.05; max-width: none; }
h2, .callout_line { font-size: var(--type-6); line-height: 1.08; }
/* Weight follows importance: H1 and H2 at 700, items (H3) a step lighter. */
h3, h4, .h3 { font-size: var(--type-3); font-weight: 600; line-height: 1.25; margin-bottom: var(--space-3); }
/* Heading shapes (kit.ts, headingShape): Clean Network's tags stay; how
   heavy a heading looks follows the shape of its words. */
:is(h1, h2, .callout_line).is-statement { font-size: var(--type-5); font-weight: 400; line-height: 1.3; letter-spacing: -0.015em; max-width: 30em; }
:is(h1, h2, .callout_line).is-long { font-size: var(--type-5); }
/* A colon heading introducing a list (a checklist, a list in an article) is
   a small bold lead-in to it; elsewhere a colon heading is the band's own. */
:is(.checklist, .article) :is(h1, h2).is-lead-in { font-size: var(--type-3); font-weight: 700; line-height: 1.35; letter-spacing: 0; margin-bottom: var(--space-3); }
/* In an article, a paragraph set as a heading reads as the paragraph it is. */
.article :is(h2, h3).is-statement { font-size: var(--type-3); font-weight: 400; line-height: 1.6; letter-spacing: 0; max-width: none; }
.article .container > :is(h2, h3).is-statement { margin: 0 0 var(--space-5); }
/* A subheading written as a paragraph reads as the post's other section headings do. */
.article p.subhead { font-size: var(--type-6); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); margin: var(--space-9) 0 var(--space-5); }
/* A post that opens with such a paragraph: it is the intro, at a lead size. */
.article .container > :is(h2, h3).is-statement:first-child { font-size: var(--type-4); line-height: 1.45; }
.is-caps { text-transform: lowercase; }
.is-caps::first-letter { text-transform: uppercase; }
p { margin: 0 0 var(--space-5); }
/* The last words of a block end on the band's own spacing. */
main :is(p, ul):last-child { margin-bottom: 0; }
a { color: inherit; }
/* Links inside copy: an underline in the brand pink, clear of the letters. */
main :is(p, li, address, dd, blockquote) a:not(.button) {
  text-decoration: underline; text-decoration-color: var(--pink);
  text-decoration-thickness: 1.5px; text-underline-offset: 0.2em;
}
/* Keyboard focus: one pink ring everywhere, never the browser's. */
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
/* Headings break into even lines (no word left alone); copy avoids a lone last word. */
h1, h2, h3, h4, .h3, .callout_line { text-wrap: balance; }
p, li { text-wrap: pretty; }
/* In-page links glide, clear of the sticky header; never for people who ask for less motion. */
html { scroll-padding-top: calc(var(--header-h) + var(--space-6)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } .button:hover, .post_card:hover { transform: none; } }
address { font-style: normal; }
ul { margin: 0; padding: 0; list-style: none; }

.container { width: 100%; max-width: var(--content); margin: 0 auto; padding-inline: var(--space-6); }
/* A narrow column (reading, forms) on the grid's left line, not centred. */
.container-narrow { max-width: calc(860px + 2 * var(--space-6)); margin-left: max(0px, (100vw - var(--content)) / 2); }
.small-label {
  font-size: var(--type-1); letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600; color: var(--grey); margin-bottom: var(--space-4);
}
.lead { font-size: var(--type-3); max-width: 30em; }
.poster-kind::before { content: attr(data-word); }
/* A section's label as poster type: out of the flow, behind its section's
   words from halfway into the band's top space, running from the grid's
   left line to its right one (--w, its width in em, from kit.ts), never
   larger than the poster size. */
.poster {
  position: absolute; z-index: -1; top: calc(var(--band-top) / 2); left: var(--edge); margin: 0;
  font-size: min(var(--type-poster), (min(100vw, var(--content)) - 2 * var(--space-6)) / var(--w));
  font-weight: 700; line-height: 0.8; letter-spacing: -0.04em; font-kerning: none;
  text-transform: uppercase; white-space: nowrap; color: var(--poster); pointer-events: none;
}

/* Buttons */
.button {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-chip);
  background: var(--ink); color: var(--paper); text-decoration: none;
  font-size: var(--type-2); font-weight: 600; line-height: 1.25;
  border: 1.5px solid var(--ink);
  transition: transform var(--quick), box-shadow var(--quick);
}
.button:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow); }
.button-outline { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.pane .button-outline { border-color: var(--ink); }
/* On paper, white on white: the outline is drawn in ink (on blush the white fill shows it). */
main > section:not(.hero, .bento, .service_head) .button-outline { border-color: var(--ink); }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-6); }

/* Photo placeholders: replaced by generated images */
.photo {
  margin: 0; position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(135deg, transparent 0 22px, var(--placeholder-stripe) 22px 44px),
    var(--placeholder);
  border-radius: var(--radius-pane);
  display: flex; align-items: flex-end; justify-content: flex-start;
}
.photo_img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Header */
/* The header's glass is drawn behind it, so the menus inside it blur the page
   under them too (an element with its own backdrop filter would cut theirs off). */
.header { position: sticky; top: 0; z-index: 40; }
.header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--glass); backdrop-filter: blur(14px); }
.header_inner {
  max-width: var(--content); margin: 0 auto; padding: 0 var(--space-6); min-height: var(--header-h);
  display: flex; align-items: center; gap: var(--space-6);
}
.brand { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: var(--type-4); text-decoration: none; letter-spacing: -0.02em; }
.brand_mark { width: 28px; height: 28px; }
.nav { margin-left: auto; }
.nav_list { display: flex; gap: var(--space-5); }
.nav_item { position: relative; }
.nav_link { display: block; padding: var(--space-2) 0; font-size: var(--type-2); font-weight: 600; text-decoration: none; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 6px; }
/* The open section, and the one under the pointer: a pink underline. A line
   fits a word; nothing else marks them. */
.nav_item.is-current > .nav_link, .nav_link:hover, .burger_link.is-current { text-decoration-line: underline; }
.nav_menu {
  position: absolute; top: 100%; left: calc(-1 * var(--space-4)); min-width: 230px;
  padding: var(--space-3); border-radius: var(--radius-card);
  background: var(--glass-thin); backdrop-filter: blur(16px) saturate(1.3); border: 1px solid var(--glass-edge); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(var(--space-1)); transition: var(--quick);
}
.nav_menu a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-chip); font-size: var(--type-2); text-decoration: none; }
.nav_menu a:hover { background: var(--tint); }
.nav_group { padding: var(--space-2) var(--space-3) 0; }
.nav_group_label { display: block; font-size: var(--type-1); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--grey); padding-bottom: var(--space-1); }
.nav_group ul { columns: 2; column-gap: var(--space-3); margin: 0 calc(-1 * var(--space-3)) var(--space-2); }
.nav_menu:has(.nav_group) { min-width: 440px; } /* two columns of area names */
.nav_item:hover .nav_menu, .nav_item:focus-within .nav_menu { opacity: 1; visibility: visible; transform: none; }
.header_actions { display: flex; align-items: center; gap: var(--space-5); }
.header_phone { font-size: var(--type-2); font-weight: 600; text-decoration: none; }
.burger { display: none; margin-left: auto; }
.burger summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; }
.burger summary::-webkit-details-marker { display: none; }
.burger summary span, .burger summary span::before, .burger summary span::after {
  display: block; width: 22px; height: 2px; background: var(--ink); position: relative; content: "";
}
.burger summary span::before { position: absolute; top: -7px; }
.burger summary span::after { position: absolute; top: 7px; }
.burger_panel {
  position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  background: var(--glass-thin); backdrop-filter: blur(16px) saturate(1.3); padding: var(--space-6); border-bottom: 1px solid var(--glass-edge); box-shadow: var(--shadow);
}
.burger_group { padding-bottom: var(--space-4); }
.burger_link { display: block; font-weight: 700; font-size: var(--type-4); text-decoration: none; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 6px; padding: var(--space-2) 0; }
.burger_sub { display: block; text-decoration: none; padding: var(--space-1) 0; color: var(--grey); }

/* Hero: blush pane, cut bottom right */
/* The blush pane's curve starts at half the screen and sweeps down about five
   sixths of it, peeking out below the glass quote pane: the photo runs out
   onto paper and the quote pane straddles blush, photo and paper. */
.hero {
  --hero-pane: calc(50vw + var(--curve-hero));
  position: relative; isolation: isolate;
  /* Runs up under the glass header, so no edge of the blush or photo shows at the top. */
  margin-top: calc(-1 * var(--header-h));
  padding: calc(var(--header-h) + var(--space-10)) 0 var(--space-10);
  margin-bottom: var(--band-foot);
}
/* A hero with nothing after it meets the footer's blush: a full band seam between them, never a strip. */
main > .hero:last-child { margin-bottom: calc(var(--band-top) + var(--band-foot)); }
.hero::before {
  content: ""; position: absolute; z-index: -1;
  top: 0; left: 0; bottom: 0; width: var(--hero-pane);
  background: var(--blush);
  border-bottom-right-radius: var(--curve-hero);
}
/* The words on the left line; the photo starts on the right line and runs off
   the page, square, with the quote pane over its foot. */
/* The photo takes about two thirds of the page (three fifths), landscape, so the hero stays
   short and the client logos under it show above the fold (Andrei, 12 Oct 2026). */
.hero { --hero-photo: calc(100vw * 3 / 5); }
.hero_grid { display: grid; grid-template-columns: calc(100vw - var(--edge) - var(--hero-photo) - var(--gutter)) minmax(0, 1fr); column-gap: var(--gutter); align-items: start; }
/* The words sit in the middle of the blush; the photo stays up under the header. */
.hero { display: flex; flex-direction: column; }
.hero > .hero_grid { flex: 1; }
.hero_words { align-self: center; }
.hero_media { position: relative; margin-top: calc(-1 * (var(--header-h) + var(--space-10))); margin-right: calc(-1 * var(--edge)); }
.photo-hero { aspect-ratio: 16 / 9; border-radius: 0 0 0 var(--radius-pane); align-items: flex-start; }
/* The quote form's pane (design deferred): glass over the photo's foot, from
   a step left of the photo to the right grid line. */
.hero .quote_pane {
  position: relative;
  /* Inside the photo, a step in from its inner edge, over its foot; about as
     tall as it is wide, and hanging a step below the blush into the white
     (Andrei, 12 Oct 2026): the form is front and centre. */
  z-index: 2; width: calc(100% - var(--space-9) - var(--edge)); padding: var(--space-9);
  /* Title, question and trail on one rhythm: a step between each. */
  display: grid; gap: var(--space-7); container-type: inline-size;
  margin: calc(-1 * var(--rise-deep)) 0 calc(-1 * var(--space-13)) var(--space-9);
}
.hero .quote_pane .h3 { margin: 0; font-size: var(--type-5); font-weight: 700; color: var(--ink); }
/* The trail at the foot: a mark per question, the open one pink; an answered
   question's mark becomes a chip with its answer, and a tap reopens it. */
.quote_trail { position: relative; display: flex; align-items: flex-end; gap: var(--space-2); margin: 0; padding: var(--space-6) 0 0; list-style: none; border-top: 1px solid var(--hair);
  /* One line: when the answers outrun it, it scrolls sideways (kept at its end by public/quote.js). */
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.quote_trail::-webkit-scrollbar { display: none; }
/* Where answers run past an edge, they fade into the pane there. */
.quote_trail.is-cut-start { -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--space-9)); mask-image: linear-gradient(to right, transparent, #000 var(--space-9)); }
.quote_trail.is-cut-end { -webkit-mask-image: linear-gradient(to left, transparent, #000 var(--space-9)); mask-image: linear-gradient(to left, transparent, #000 var(--space-9)); }
.quote_trail.is-cut-start.is-cut-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--space-9), #000 calc(100% - var(--space-9)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--space-9), #000 calc(100% - var(--space-9)), transparent); }
.quote_mark { flex: none; }
.quote_answer { white-space: nowrap; }
.quote_mark:empty { width: var(--space-6); height: 3px; background: var(--hair); }
.quote_mark.is-current:empty { background: var(--pink); }
.quote_step { border: 0; margin: 0; padding: 0; min-width: 0; }
.hero .quote_pane_question { padding: 0; font-size: var(--type-4); line-height: 1.25; color: var(--ink); margin: 0 0 var(--space-5); }
/* The choices are chips: the radio itself hidden, the chosen one ink. */
.quote_choices { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.quote_choice { position: relative; display: inline-flex; padding: var(--space-3) var(--space-5); border-radius: var(--radius-chip); background: var(--tint); font-size: var(--type-3); color: var(--ink); cursor: pointer; transition: background var(--quick), color var(--quick); }
.quote_choice:hover { background: var(--blush-fade); }
.quote_choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.quote_choice:has(input:checked) { background: var(--ink); color: var(--paper); }
.quote_choice:has(input:focus-visible) { outline: 2px solid var(--pink); outline-offset: 2px; }
.quote_pane .quote_next { margin-top: var(--space-6); font-family: inherit; cursor: pointer; }
.quote_next:disabled { background: var(--hair); border-color: var(--hair); color: var(--grey); cursor: default; transform: none; box-shadow: none; }
/* Each question in turn; without the script they stack, a step apart. */
.quote_step + .quote_step { margin-top: var(--space-7); }
.quote_pane.is-stepped .quote_step + .quote_step { margin-top: 0; }
.quote_answer { display: inline-block; font: inherit; font-size: var(--type-2); line-height: 1.4; padding: var(--space-1) var(--space-3); border: 1px solid var(--hair); border-radius: var(--radius-chip); background: var(--paper); color: var(--ink); cursor: pointer; }
.quote_answer:hover { border-color: var(--ink); }
/* Typed answers: the postcode beside its Next, the contact fields two by two. */
.quote_row { display: flex; gap: var(--space-3); align-items: stretch; }
.quote_pane .quote_row .quote_next { margin-top: 0; }
.quote_input { font: inherit; font-size: var(--type-3); line-height: 1.4; min-width: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-chip); border: 1px solid var(--hair); background: var(--paper); color: var(--ink); }
.quote_row .quote_input { flex: 1; max-width: 16em; text-transform: uppercase; }
.quote_row .quote_input::placeholder { text-transform: none; }
.quote_input::placeholder { color: var(--grey); opacity: 1; }
.quote_fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
/* The send button closes the fields' second row, so the last question is no
   taller than the first. */
.quote_pane .quote_fields .quote_submit { grid-column: span 2; align-self: stretch; margin-top: 0; justify-content: center; }
/* A narrow pane takes the fields two by two, the send button a row of its own. */
@container (max-width: 34rem) {
  .quote_fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quote_pane .quote_fields .quote_submit { grid-column: 1 / -1; }
}
@container (max-width: 24rem) {
  .quote_input { font-size: var(--type-2); }
  /* The choices on a two-column grid, so no row ends at a ragged edge. */
  .quote_choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quote_choice { justify-content: center; align-items: center; text-align: center; }
}
/* Counts: − n + beside what is counted. */
.quote_counts { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); }
.quote_count { display: flex; align-items: center; gap: var(--space-2); font-size: var(--type-3); }
.quote_count input { width: 2.5em; font: inherit; text-align: center; border: 0; background: none; color: var(--ink); -moz-appearance: textfield; appearance: textfield; }
.quote_count input::-webkit-inner-spin-button, .quote_count input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.quote_stepper { width: var(--space-9); height: var(--space-9); font: inherit; font-size: var(--type-4); line-height: 1; border: 0; border-radius: var(--radius-chip); background: var(--tint); color: var(--ink); cursor: pointer; }
.quote_stepper:hover { background: var(--blush-fade); }
/* Logos: other companies' logos (accreditations, clients) are silhouettes in
   the one grey, each at the height tuned for it beside the others (the site
   record's `size`), so seven brands bring no palettes to the page. */
.credential, .logo, .footer_badge {
  display: block; width: auto; background: var(--grey);
  -webkit-mask: var(--m) no-repeat center / contain; mask: var(--m) no-repeat center / contain;
}
.hero .credential, .footer_badge { background: var(--mark-on-blush); }
.credentials { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-7); margin-top: var(--space-8); }

/* Logos */
/* The strip sits in the middle of the white between the hero and the next
   band: the hero's foot plus this top equals the next band's top. */
.logos { padding: calc(var(--band-top) - var(--band-foot)) 0 0; }
.logos .small-label { text-align: center; }
/* The label centred; under it two hand-composed rows, each centred, 48 between
   marks and 24 between rows. */
.logo_rows { display: grid; gap: var(--space-6); margin-top: var(--space-7); }
.logo_row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-6) var(--space-9); }

/* Word-and-shot rows: the photo runs off the page edge */
.rows { padding: var(--band-top) 0 var(--band-foot); display: grid; gap: var(--space-11); }
.row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  gap: var(--gutter);
}
/* The rows run edge to edge; their words sit on the grid's two lines. */
.row_words { width: var(--col); }
.row-right .row_words { justify-self: end; }
.row-left .row_words { order: 2; }
.row-left .photo-row { order: 1; }
/* Its column sets the width; the minimum height never widens it past the column. */
.photo-row { width: 100%; aspect-ratio: 1 / 1; min-height: 420px; }
.row-right .photo-row { border-radius: var(--radius-pane) 0 0 var(--radius-pane); }
.row-left .photo-row { border-radius: 0 var(--radius-pane) var(--radius-pane) 0; }
.row_title { font-size: var(--type-6); }
.row_words .button { margin-top: var(--space-2); }
/* A subheading inside a row's words. */
.row_words p.subhead { font-weight: 700; color: var(--ink); margin: var(--space-6) 0 var(--space-2); }
/* Panel: a wide photo off the page edge (from the middle of the far column),
   the words in a glass pane over its lower corner on the near side. */
/* The pane rises over the lower half of its photo. */
.panel { padding: var(--band-top) 0 var(--band-foot); --panel-photo: calc((100vw - var(--edge) - var(--col) / 2) * 9 / 16); }
.photo-panel { aspect-ratio: 16 / 9; margin-left: calc(var(--edge) + var(--col) / 2); border-radius: var(--radius-pane) 0 0 var(--radius-pane); }
.panel.is-flipped .photo-panel { margin-left: 0; margin-right: calc(var(--edge) + var(--col) / 2); border-radius: 0 var(--radius-pane) var(--radius-pane) 0; }
.pane.panel_pane { position: relative; z-index: 1; width: var(--col); margin-top: calc(-1 * var(--panel-photo) / 2); padding: var(--space-9); border-radius: var(--radius-pane); }
.panel.is-flipped .pane.panel_pane { margin-left: auto; }
.panel_pane h2 { margin-bottom: var(--space-5); }
.pane.panel_pane p { font-size: var(--type-3); color: var(--ink); }
.pane.panel_pane p + p { margin-top: var(--space-4); }
/* A long text takes both columns of the grid, set in two columns of its own. */
.panel-long .pane.panel_pane, .panel-long.is-flipped .pane.panel_pane { width: auto; }
.panel-long .panel_text { columns: 2; column-gap: var(--gutter); }
/* A run of panels: the head on white, then each panel a step apart. */
.panels { padding: var(--band-top) 0 var(--band-foot); display: grid; gap: var(--space-11); }
.panels > .panel { padding: 0; }
.panels_head { max-width: calc(var(--head) + 2 * var(--space-6)); margin-left: max(0px, (100vw - var(--content)) / 2); }
.panels_head h2 { margin-bottom: var(--space-5); }
.panel_pane .row_title { margin-bottom: var(--space-4); }
/* Carousel: one photo centred on the grid; the items a row of glass panes
   over its lower third, from the grid's left line off the page's right edge,
   scrolling sideways and snapping to each pane. */
/* The row shows --show whole panes and a part of the next, so it reads as one that scrolls. */
.carousel { padding: var(--band-top) 0 var(--band-foot); --show: 3; }
.carousel_stage { position: relative; }
/* The arrows sit on the photo, on the right grid line, a step above the panes. */
.carousel_nav { position: absolute; left: 0; right: 0; bottom: calc(var(--rise-deep) + var(--space-6)); display: flex; justify-content: flex-end; }
.carousel_head { position: relative; max-width: calc(var(--head) + 2 * var(--space-6)); margin-left: max(0px, (100vw - var(--content)) / 2); margin-bottom: var(--space-9); }
.carousel_head h2 { margin-bottom: var(--space-5); }
/* The photo is the band: nearly the full width of the screen, a gutter in from each edge. */
.photo-carousel { aspect-ratio: 16 / 9; width: calc(100% - 2 * var(--space-6)); margin: 0 auto; border-radius: var(--radius-pane); }
.carousel_track {
  position: relative; z-index: 1; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100vw - var(--edge) - var(--show) * var(--space-5)) / (var(--show) + 0.4));
  column-gap: var(--space-5); align-items: stretch; margin-top: calc(-1 * (var(--rise-deep) + var(--space-6)));
  /* The row scrolls, so it clips: its padding holds the panes' whole shadow,
     the foot's share given back below so the band keeps its rhythm. */
  padding: var(--space-6) var(--edge) var(--space-10); margin-bottom: calc(var(--space-6) - var(--space-10)); scroll-padding-inline: var(--edge);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
.carousel_track::-webkit-scrollbar { display: none; }
.carousel_track:focus-visible { outline: 2px solid var(--pink); outline-offset: -2px; }
.carousel_pane { scroll-snap-align: start; }
/* A carousel beside its words: the photo running off the page on its side,
   the panes in a row over its foot, two whole panes in the photo's column (the
   arrows move them); the heading and copy on the other column. */
.carousel_side_grid { display: grid; grid-template-columns: calc(var(--edge) + var(--col)) minmax(0, 1fr); column-gap: var(--gutter); align-items: center; padding-right: var(--edge); }
.carousel-side.is-flipped .carousel_side_grid { grid-template-columns: minmax(0, 1fr) calc(var(--edge) + var(--col)); padding: 0 0 0 var(--edge); }
.carousel-side.is-flipped .carousel_side_media { order: 2; }
.carousel_side_media { min-width: 0; }
/* The photo is the window: the panes and arrows sit inside it, near its foot,
   and its rounded edge cuts the next pane as it slides in. */
.carousel_window { display: grid; overflow: hidden; isolation: isolate; border-radius: 0 var(--radius-pane) var(--radius-pane) 0; }
.carousel-side.is-flipped .carousel_window { border-radius: var(--radius-pane) 0 0 var(--radius-pane); }
.carousel_window > * { grid-area: 1 / 1; min-width: 0; }
.photo-carousel-side { aspect-ratio: 1 / 1; border-radius: 0; }
.carousel_over { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-2); }
/* The arrows end on the line where the pane in view ends. */
.carousel-side .carousel_nav { position: static; display: flex; justify-content: flex-end; padding: 0 var(--space-13) 0 var(--edge); }
.carousel-side.is-flipped .carousel_nav { padding: 0 var(--edge) 0 var(--space-9); justify-content: flex-start; }
.carousel-side .carousel_track { margin: 0; padding: var(--space-5) var(--space-13) var(--space-9) var(--edge); scroll-padding-inline: var(--edge) 0; grid-auto-columns: calc(var(--col) - var(--space-13)); }
.carousel-side.is-flipped .carousel_track { padding-inline: var(--space-9) var(--edge); scroll-padding-inline: var(--space-9) 0; }
.carousel_side_words h2 { margin-bottom: var(--space-6); }
.carousel_side_words p { font-size: var(--type-3); color: var(--ink); }
.carousel_side_words p:first-of-type { font-size: var(--type-4); line-height: 1.4; }
p.carousel_side_lead { font-size: var(--type-3); font-weight: 700; margin: 0; }
/* A pane of one line (a checklist's item): the line is its words, at lead size. */
.carousel-lines .carousel_pane p { font-size: var(--type-4); line-height: 1.35; color: var(--ink); }
.carousel_pane > * + * { margin-top: var(--space-3); }
.carousel_pane .h3 { margin: 0 0 var(--space-3); }
.carousel_foot { position: relative; z-index: 2; display: flex; margin-top: var(--space-5); }
.carousel_arrows { position: relative; z-index: 2; display: flex; gap: var(--space-3); }
.carousel_arrows[hidden] { display: none; }
/* The arrows are the site's button: ink, its height and corner, square to its height. */
.button.carousel_arrow { font-family: inherit; cursor: pointer; justify-content: center; padding-inline: 0; width: calc(var(--type-2) * 1.25 + 2 * var(--space-3) + 3px); }
.button.carousel_arrow:disabled { background: var(--hair); border-color: var(--hair); color: var(--grey); cursor: default; transform: none; box-shadow: none; }
/* A card band after a blush one turns: a white band, the cards in blush. */
.bento.bento-turned { background: none; margin-top: 0; padding-top: var(--band-top); }
.bento-turned .pane.card { background: var(--blush); border-color: transparent; }
/* A services band after a blush one opens on white. */
.service_rows-white .service_head { background: none; padding-top: var(--band-top); }
/* A statement row (no photo): the heading runs on into its line, set as one
   sentence across the band, centred. */
.row.row-statement { display: block; text-align: center; max-width: calc(var(--head) * 1.5); }
/* A pause between rows: the space of a band seam on both sides, not a row gap. */
.row-statement:not(:first-child) { margin-top: calc(var(--band-top) + var(--band-foot) - var(--space-11)); }
.row-statement:not(:last-child) { margin-bottom: calc(var(--band-top) + var(--band-foot) - var(--space-11)); }
.row-statement .row_statement_head, .row-statement .row_statement_line { font-size: var(--type-6); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.row-statement .row_statement_head { font-weight: 700; }
.row-statement .row_statement_line { font-weight: 400; }
/* Groups in a list's pane: a small heading over each further list. */
/* A checklist's room lists as a row of cards under its band. */
.list_cards { position: relative; z-index: 2; margin-top: calc(-1 * var(--space-13)); padding: 0 0 var(--band-foot); }
.list_cards_grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); align-items: start; }
.list_card .h3 { margin: var(--space-2) 0 var(--space-3); }
.list_card .list.list-long { grid-template-columns: minmax(0, 1fr); }
.list_card .list-long li:nth-child(2) { border-top: 1px solid var(--hair); }
/* Groups sit two to a row under the main list, so a list by room stays within a screen. */
.list_groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); }
.list_group { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--hair); }
.list_group .h3 { margin: 0 0 var(--space-2); }
.list_pane .list_group .list:not(.list-many) { grid-template-columns: minmax(0, 1fr); }
/* Service rows: the band's heading above the run, each service a row. Its
   name (an H3, as Clean Network had it) takes the row title's size and
   weight; its list runs in two columns under its words. */
/* Like every blush band, it starts under the foot of the band above. */
.service_rows { padding-top: 0; }
.service_rows-head { margin-top: calc(-1 * var(--space-13)); }
/* Without its blush head, the rows open at the band's own top. */
.service_rows:not(.service_rows-head) { padding-top: var(--band-top); }
/* The services open on a blush band (one corner facing the gap above, fading
   to paper at its foot): the words on the left line; on the right the
   services that follow, a list in a glass pane, hung a step below the
   heading, each name a link to its row. */
.service_head { padding: var(--ground-top) 0 var(--space-13); background: linear-gradient(var(--blush) 55%, var(--blush-fade) 85%, var(--paper)); }
.service_head_grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gutter); align-items: start; }
.service_head_words h2 { margin-bottom: var(--space-6); }
.service_head_statement.lead { font-size: var(--type-4); line-height: 1.45; color: var(--ink); margin: 0 0 var(--space-6); }
.service_head_facts p { margin: 0; color: var(--ink); }
.service_head_facts p + p { margin-top: var(--space-5); }
.pane.service_index { margin-top: var(--space-10); }
.pane.service_index .list { font-size: var(--type-4); font-weight: 600; }
.pane.service_index .list li { align-items: center; padding: var(--space-4) 0; }
.pane.service_index .list li::before { margin-top: 0; }
.pane.service_index a { text-decoration: none; color: var(--ink); }
.pane.service_index a:hover { text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.service_rows .row { scroll-margin-top: calc(var(--header-h) + var(--space-8)); }
.rows_foot { margin-left: max(0px, (100vw - var(--content)) / 2); }
h3.row_title { font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; margin-bottom: var(--space-5); }
.service_list { margin: var(--space-6) 0; }
.service_list .list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); row-gap: var(--space-2); margin: 0; font-size: var(--type-2); }

/* Bento: blush band cut top left, panes, then photo and quotes */
.bento {
  margin-top: calc(-1 * var(--space-13));
  padding: var(--ground-top) 0 var(--band-foot);
  background: linear-gradient(var(--blush) 55%, var(--blush-fade) 85%, var(--paper));
}
.bento_grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gutter); align-items: start; }
/* The intro stays in view while a tall set of cards scrolls past it. */
.bento_intro { position: sticky; top: calc(var(--header-h) + var(--space-8)); padding-top: var(--space-10); }
/* The second column hangs lower than the first: offset, never level. */
.panes > *, .bento_grid > *, .quotes_grid > *, .checklist_grid > *, .contact_grid > * { min-width: 0; }
.panes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); align-items: start; }
.panes_col { display: grid; gap: var(--space-5); min-width: 0; }
.panes_col:nth-child(even) { padding-top: var(--space-10); }
/* Mirrored: intro on the right, the band's curve on the other corner, the first column hung lower. */
.bento.is-flipped .bento_intro { order: 2; }
.bento.is-flipped .panes_col:nth-child(even) { padding-top: 0; }
.bento.is-flipped .panes_col:nth-child(odd) { padding-top: var(--space-10); }
/* Stacked (five or more cards): intro on top, three staggered columns below. */
.bento-stacked .bento_grid { grid-template-columns: 1fr; gap: var(--space-9); }
.bento-stacked .bento_intro { position: static; padding-top: 0; max-width: var(--head); }
.bento-stacked .panes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bento-stacked .panes .card-wide { grid-column: 1 / -1; }
/* Stacked cards line up: one grid, each row's cards as tall as its tallest,
   the cards back in their own order. */
.bento-stacked .panes { align-items: stretch; }
.bento-stacked .panes_col { display: contents; }
/* With a photo: the intro on the left, the photo from the right grid line off
   the page, and the cards rising from under the intro across its foot. */
.bento-stacked.has-photo .bento_grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gutter); }
/* It spans the intro and the cards and runs a step past the lowest card, so
   their feet never sit level. */
.bento-stacked .photo-bento { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; margin: 0 calc(-1 * var(--edge)) calc(-1 * var(--step)) 0; border-radius: var(--radius-pane) 0 0 var(--radius-pane); }
.bento-stacked.has-photo .panes { grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 1; }
.bento-stacked.has-photo .bento_foot { grid-column: 1; }
/* With an action under the cards, the photo runs past that too. */
.bento-stacked.has-photo:has(.bento_foot) .photo-bento { grid-row: 1 / span 3; }
/* Beside: the photo under the intro, running off the page on its side, the
   cards beside both; it runs a step past the lowest card (at least 4:3). */
.bento.has-photo:not(.bento-stacked) .bento_grid { grid-template-rows: auto 1fr; }
.bento.has-photo:not(.bento-stacked) .bento_intro { position: static; grid-column: 1; grid-row: 1; }
.bento.has-photo:not(.bento-stacked) .photo-bento { grid-column: 1; grid-row: 2; align-self: stretch; min-height: calc(var(--col) * 3 / 4); margin: 0 0 calc(-1 * var(--step)) calc(-1 * var(--edge)); border-radius: 0 var(--radius-pane) var(--radius-pane) 0; }
.bento.has-photo:not(.bento-stacked) .panes { grid-column: 2; grid-row: 1 / span 2; }
.bento.has-photo.is-flipped .bento_intro, .bento.has-photo.is-flipped .photo-bento { grid-column: 2; }
.bento.has-photo.is-flipped .photo-bento { margin: 0 calc(-1 * var(--edge)) calc(-1 * var(--step)) 0; border-radius: var(--radius-pane) 0 0 var(--radius-pane); }
.bento.has-photo.is-flipped .panes { grid-column: 1; }
/* A stacked band's action: on the left line under its cards, at the grid's own gap. */
.bento_foot { display: flex; }
/* Turned: the second of two card bands; white band, blush cards. */
/* The gutter law: the page is the logo, zoomed out. Each blush band is a pane
   showing one corner, the one facing the white gap above it; down the page the
   corners alternate sides, the hero's bottom-right answered first by a top-right. */
.ground-right { border-top-right-radius: var(--curve); }
.ground-left { border-top-left-radius: var(--curve); }
.pane {
  margin: 0; padding: var(--space-7); border-radius: var(--radius-card);
  background: var(--glass-thin); backdrop-filter: blur(16px) saturate(1.3); border: 1px solid var(--glass-edge); box-shadow: var(--shadow);
}
/* One pane, one glass. Its words sit in by its corner: 32 in a card (34
   corner), 48 in a pane that holds a band (80 corner). */
.pane:is(.callout_pane, .contact_pane, .form) { padding: var(--space-9); }
.pane p { font-size: var(--type-2); color: var(--grey); margin: 0; }
/* Quotes: the panes slide over the photo's edge; the photo sits on the band's side. */
.quotes_grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gutter); align-items: start; }
/* The photo runs off the page edge on its side. */
.photo-quotes { aspect-ratio: 4 / 5; order: 2; margin-right: calc(-1 * var(--edge)); border-radius: var(--radius-pane) 0 0 var(--radius-pane); }
.quotes { position: relative; z-index: 1; display: grid; gap: var(--space-5); padding-top: var(--space-10); margin-right: calc(-1 * var(--reach)); }
/* The heading stays in its column; only the quote panes reach over the photo. */
.quotes > :first-child { padding-right: var(--reach); margin-bottom: calc(var(--space-9) - var(--space-5)); }
.quote:nth-of-type(2) { margin-right: var(--space-11); }
.quotes-band.is-flipped .photo-quotes { order: 0; margin: 0 0 0 calc(-1 * var(--edge)); border-radius: 0 var(--radius-pane) var(--radius-pane) 0; }
.quotes-band.is-flipped .quotes { margin-right: 0; margin-left: calc(-1 * var(--reach)); }
.quotes-band.is-flipped .quotes > :first-child { padding-right: 0; padding-left: var(--reach); }
.quotes-band.is-flipped .quote:nth-of-type(2) { margin-right: 0; margin-left: var(--space-11); }
.quote blockquote { margin: 0 0 var(--space-5); font-size: var(--type-4); line-height: 1.3; letter-spacing: -0.01em; }
/* Attributions: one style whatever the copy's casing, small capitals. */
.quote figcaption { font-size: var(--type-1); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; }
/* The quote marks are drawn here, one pair around the whole quote. */
.quote blockquote > p:first-child::before, .person_quote > p:first-child::before { content: "“"; }
.quote blockquote > p:last-child::after, .person_quote > p:last-child::after { content: "”"; }

/* Quotes as their own band, and a call-out pane between bands */
.quotes-band { padding: var(--band-top) 0 var(--band-foot); }
.quote blockquote h2, .quote blockquote h3 { font-size: inherit; line-height: inherit; letter-spacing: inherit; font-weight: 400; margin: 0 0 var(--space-3); }
.quote blockquote p { margin: 0 0 var(--space-3); font-size: inherit; color: inherit; }
/* The call-out folds over the foot of the photo row above it. */
/* Layering: every band paints over the start of the one after it (a photo
   covers the pink band's top edge), and the call-out over the band before it.
   The call-out folds only over the foot of the band before it, which is kept
   clear of copy. */
main > section { position: relative; z-index: 1; }
main > :is(.bento, .service_rows) { z-index: 0; }
.callout { z-index: 2; margin-top: calc(-1 * var(--fold)); padding-bottom: var(--band-foot); }
main > section:has(+ .callout:not(.closing)) { padding-bottom: calc(var(--fold) + var(--space-8)); }
/* The closing pane, at the foot of every page, folds over the top of the
   footer, on the side away from its curve. */
.callout.closing { margin: 0 0 calc(-1 * var(--fold)); padding-bottom: 0; }
/* Glass, as over the hero's photo: the blush shows through its foot.
   Centred on the page. */
.closing .callout_pane { margin-inline: auto; }
/* A full step above and below it: from the office band, and to the footer's words. */
.office:has(+ .closing) { padding-bottom: var(--band-top); }
/* On a page that borrows it, its heading is a line that looks like one. */
.pane p.callout_line { color: var(--ink); margin: 0 0 var(--space-5); }
/* A blush band starts under the foot of the band before it; that foot is kept
   clear of copy (and of hanging cards), as for the call-out. After the hero it
   opens on its own, a step below. */
main > section:not(.hero):has(+ :is(.bento, .service_rows-head)) { padding-bottom: calc(var(--space-13) + var(--band-foot)); --step: calc(var(--band-foot) + var(--space-10)); }
/* Before the closing pane, a stepped photo runs on under it: the pane folds over its foot. */
main > section:has(+ .closing) { --step: calc(var(--band-foot) + var(--space-10)); }
.hero + :is(.bento, .service_rows-head) { margin-top: var(--space-10); }
/* Like every pane that opens a band, the call-out's edge sits on a grid line:
   the left one, or the right one when mirrored. */
/* The pane hugs its words: no dead strip beside a short heading. */
.callout_pane { width: fit-content; border-radius: var(--radius-pane); }
/* A pane hugs its heading's longest line, so the lines fill it (balanced
   lines would leave a strip at the right). */
.callout_pane :is(h2, .callout_line) { text-wrap: pretty; }
.callout_pane :is(h2, .callout_line):not(.is-statement) { max-width: 20em; }
.callout_pane p { max-width: 40em; }
.callout.is-flipped .callout_pane { margin-left: auto; }
/* Two call-outs in a row: side by side on the grid's two columns, the second
   hung a step lower. */
.callout_pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gutter); align-items: start; }
.callout_pair > .callout_pane { width: auto; }
.callout_pair > .callout_pane:nth-child(2) { margin-top: var(--space-10); }
.small-label.small-label { font-size: var(--type-1); line-height: 1.5; letter-spacing: 0.12em; }

/* Reading column (long copy, posts) and image grids */
/* A post's sections: space above each heading, more than below it. */
.article .container > h2 { margin-top: var(--space-9); }
.article .container > :is(h3, h4) { margin-top: var(--space-7); }
.article > .container > :first-child { margin-top: 0; }
.article { padding: var(--band-top) 0 var(--band-foot); }
/* Tables: a glass card of ruled rows, the column names in ink, the first
   cell of each row naming it. Its rows bring 12px above and below. */
.table_pane { margin: var(--space-7) 0; padding-block: var(--space-5); }
.table { width: 100%; border-collapse: collapse; font-size: var(--type-2); }
.table th, .table td { padding: var(--space-3) var(--space-5) var(--space-3) 0; text-align: left; vertical-align: top; }
.table :is(th, td):last-child { padding-right: 0; }
.table thead th { font-weight: 700; color: var(--ink); }
.table tbody th { font-weight: 600; color: var(--ink); }
.table td { color: var(--grey); }
.table tbody tr { border-top: 1px solid var(--hair); }
/* Lists: each item carries the pink mark, not a bullet. */
.list { margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-3); }
.list li { display: flex; gap: var(--space-3); align-items: flex-start; }
.list li::before { content: ""; flex: none; width: 0.6em; height: 0.6em; margin-top: 0.42em; background: var(--pink); -webkit-mask: var(--mark); mask: var(--mark); }
.list li.list_label { font-weight: 700; color: var(--ink); margin-top: var(--space-3); }
.list li.list_label::before { content: none; }
.list li.list_label:first-child { margin-top: 0; }
/* Steps and ranked runs: the number in place of the mark, in the mark's pink. */
.list-ordered { counter-reset: step; }
.list-ordered li { counter-increment: step; }
.list-ordered li::before { content: counter(step); width: auto; min-width: 1.2em; height: auto; margin-top: 0; background: none; -webkit-mask: none; mask: none; color: var(--pink); font-weight: 700; font-variant-numeric: tabular-nums; }
/* A list in a pane is a ruled grid: two columns once it runs past five items. */
/* A list in a pane: ruled rows, in two columns when long. */
.list_pane .list { gap: 0; column-gap: var(--space-8); font-size: var(--type-2); }
.list_pane .list li { padding: var(--space-3) 0; border-top: 1px solid var(--hair); }
.list_pane .list li:first-child { border-top: 0; }
.list_pane .list-long { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.list_pane .list-long li:nth-child(2) { border-top: 0; }
.list_pane .list-many { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.list_pane .list-many li:nth-child(3) { border-top: 0; }
.photo-inline { aspect-ratio: 4 / 3; border-radius: var(--radius-card); }
.pane .button { margin-top: var(--space-4); }
.pane > p + p { margin-top: var(--space-3); }
.hero_intro p { max-width: 34em; }
/* The statement under the title (an H2, as Clean Network had it): a short
   one reads as the title's tagline, a sentence as its lead. */
h2.hero_statement { font-size: var(--type-4); line-height: 1.35; font-weight: 700; letter-spacing: -0.01em; max-width: 30em; margin: 0 0 var(--space-5); }
.hero h2.hero_statement.is-statement { font-size: var(--type-4); font-weight: 400; }
h2.hero_statement + h2.hero_statement { margin-top: calc(-1 * var(--space-2)); }
.hero_words .list { margin-top: var(--space-5); }

/* Areas: the map runs off the page edge;
   the list pane reaches over the map. */
.areas { position: relative; z-index: 1; padding: var(--band-top) 0 var(--band-foot); }
.points-names .areas_words > p { max-width: 34em; }
.areas_grid {
  display: grid; grid-template-columns: var(--col) minmax(0, 1fr); align-items: center; column-gap: var(--gutter);
  padding-left: var(--edge);
}
.areas_words { position: relative; z-index: 1; }
.areas_pane { margin-top: var(--space-6); margin-right: calc(-1 * var(--reach)); }
/* The map stands as tall as the words and runs a step past their foot, like the checklist's photo, so the pane never sits level with it. */
.areas .photo-bleed { aspect-ratio: auto; align-self: stretch; min-height: var(--col); margin-bottom: calc(-1 * var(--step)); }
.photo-bleed { border-radius: var(--radius-pane) 0 0 var(--radius-pane); }
.areas.is-flipped .areas_grid {
  grid-template-columns: minmax(0, 1fr) var(--col);
  padding-left: 0; padding-right: var(--edge);
}
.areas.is-flipped .areas_words { order: 2; }
.areas.is-flipped .areas_pane { margin-right: 0; margin-left: calc(-1 * var(--reach)); }
.areas.is-flipped .photo-bleed { border-radius: 0 var(--radius-pane) var(--radius-pane) 0; }
/* Areas on a drawn map: the map keeps its 16:9 at every width (each chip is
   placed in percent of it, so it is never cropped) and runs off the page edge;
   every covered place is a glass chip centred on its point, its neighbours
   quiet chips; the credit sits in the corner at the page edge. */
/* The heading above on the left column; the map from the grid's outer line
   off the page edge on its side, as wide as the page allows. */
.areas_head { max-width: calc(var(--head) + 2 * var(--space-6)); margin-left: max(0px, (100vw - var(--content)) / 2); margin-bottom: var(--space-9); }
.area_frame { padding-left: var(--edge); }
.areas-map.is-flipped .area_frame { padding: 0 var(--edge) 0 0; }
.area_map { position: relative; }
.area_map_img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-pane) 0 0 var(--radius-pane); }
.areas-map.is-flipped .area_map_img { border-radius: 0 var(--radius-pane) var(--radius-pane) 0; }
.area_chips { margin: 0; padding: 0; list-style: none; }
/* A drawn map in a square slot (the office): the picture fills it; its chips and pin sit on it. */
/* A tag near its edge stays whole, standing just past the picture. */
.drawn_map { position: relative; border-radius: var(--radius-pane); }
.drawn_map_img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.office_media .drawn_map, .contact .drawn_map { aspect-ratio: 1 / 1; border-radius: var(--radius-pane) 0 0 var(--radius-pane); }
/* The pin: one pane at hand scale, pink, on the office's own point. */
.map_pin { position: absolute; z-index: 2; width: var(--space-5); height: var(--space-5); transform: translate(-50%, -50%); background: var(--pink); border: 3px solid var(--paper); border-radius: 6px; box-shadow: var(--shadow); }
.chip.chip-pin { z-index: 2; background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; padding: var(--space-2) var(--space-4); border-radius: var(--radius-chip); background: var(--glass-thin); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); border: 1px solid var(--glass-edge); box-shadow: var(--shadow); font-size: var(--type-3); font-weight: 700; line-height: 1.2; color: var(--ink); }
.chip a { color: inherit; text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.chip-quiet { font-size: var(--type-2); font-weight: 500; color: var(--grey); box-shadow: none; }
/* A drawn map in a photo slot: whole, on its own ground, in the room the
   list's pane leaves uncovered; each listed place a pin, the list's marker,
   smaller with the map so the central ones stay apart. */
.photo-drawn { background: var(--map-ground); }
.drawn_room { position: absolute; inset: 0 0 0 var(--reach); container-type: size; display: grid; place-items: center; }
.areas.is-flipped .drawn_room { inset: 0 var(--reach) 0 0; }
.drawn_map { position: relative; aspect-ratio: var(--ar); width: min(100cqw, 100cqh * var(--ar)); }
.drawn_img { display: block; width: 100%; height: 100%; }
.place_pins { margin: 0; padding: 0; list-style: none; }
.place_pin { position: absolute; width: min(0.6em, 2cqw); height: min(0.6em, 2cqw); translate: -50% -50%; background: var(--pink); -webkit-mask: var(--mark); mask: var(--mark); }
.map_credit { position: absolute; right: var(--space-4); bottom: var(--space-4); padding: var(--space-1) var(--space-3); border-radius: var(--radius-chip); background: var(--glass-thin); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); font-size: var(--type-1); color: var(--grey); text-decoration: none; }
.areas-map.is-flipped .map_credit { right: auto; left: var(--space-4); }
.photo-map { aspect-ratio: 3 / 2; }


/* Office */
.office { padding: var(--band-top) 0 var(--band-foot); }
.office_grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gutter); align-items: center; }
/* The map runs from the right grid line off the page, square, the office card over its foot. */
.office_media { position: relative; margin-right: calc(-1 * var(--edge)); }
.office_media .photo-map { aspect-ratio: 1 / 1; border-radius: var(--radius-pane) 0 0 var(--radius-pane); }
.office_card { position: relative; width: fit-content; max-width: min(calc(var(--col) * 0.7), 80%); margin: calc(-1 * var(--rise-deep)) 0 0 calc(-1 * var(--space-7)); }
.office_card address { font-size: var(--type-2); }
.office_card p { margin-top: var(--space-3); color: var(--ink); }


/* Footer */
.footer {
  background: var(--blush); border-top-right-radius: var(--curve-hero);
  padding: calc(var(--fold) + var(--band-top)) 0 var(--space-8); font-size: var(--type-2);
}
/* The footer's second column starts on the grid's right line. */
.footer_grid { display: grid; grid-template-columns: var(--col) repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--space-8); }
.footer_heading { font-size: var(--type-2); margin: var(--space-6) 0 var(--space-3); }
.footer_grid > div > .footer_heading:first-child { margin-top: 0; }
.footer_ethos { max-width: 26em; }
.footer_mark { width: 40px; height: 40px; margin-bottom: var(--space-4); }
.footer_badge { margin-top: var(--space-5); }
.footer_social { display: flex; gap: var(--space-4); margin-top: var(--space-4); }
.footer_links li, .footer_offices li { padding: var(--space-1) 0; }
/* The quick links run in two columns, so the left column ends with the others. */
.footer_links { columns: 2; column-gap: var(--space-8); }
.footer_links li { break-inside: avoid; }
.footer a { text-decoration: none; }
.footer_base { margin-top: var(--space-10); font-size: var(--type-1); color: var(--grey); }

/* ---- Components added in plan step 3 ---- */

/* Checklist: the list in a glass pane overlapping the photo */
.checklist { padding: var(--band-top) 0 var(--band-foot); }
.checklist_grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: var(--gutter); row-gap: var(--space-8); }
.checklist_words { position: relative; z-index: 1; }
/* A line leading into a list heads it: in its pane, or above the ledger's rows. */
:is(.list_pane, .sheet, .ledger_points) > .card_list_heading { margin-bottom: var(--space-3); }
/* Its rows bring 12px above and below, so the words sit 32 in like any card. */
.list_pane { padding-block: var(--space-5); }
.list_pane .list { margin: 0; }
.checklist_pane { margin: var(--space-6) calc(-1 * var(--reach)) var(--space-6) 0; }
/* The photo stretches beside the words to a step past their foot, never
   shorter than 4:5 of its column, so the two never end level. */
.photo-checklist { align-self: stretch; min-height: calc(var(--col) * 5 / 4); margin: 0 calc(-1 * var(--edge)) calc(-1 * var(--step)) 0; border-radius: var(--radius-pane) 0 0 var(--radius-pane); }
.checklist.is-flipped .photo-checklist { margin: 0 0 calc(-1 * var(--step)) calc(-1 * var(--edge)); border-radius: 0 var(--radius-pane) var(--radius-pane) 0; }
.checklist.is-flipped .checklist_words { order: 2; }
.checklist.is-flipped .checklist_pane { margin-right: 0; margin-left: calc(-1 * var(--reach)); }

/* Points: one glass sheet over a photo, or a ruled ledger beside one */
.points { padding: var(--band-top) 0 var(--band-foot); }
.point_list { margin: 0; padding: 0; display: grid; column-gap: var(--space-9); }
.point { padding: var(--space-6) 0; border-top: 1px solid var(--hair); }
.point p { margin: 0; color: var(--grey); font-size: var(--type-2); }
.point .h3 { margin-bottom: var(--space-2); }
.point-bare { display: flex; gap: var(--space-4); align-items: flex-start; }
.point-bare p { color: var(--ink); font-size: var(--type-3); line-height: 1.45; }
/* An untitled point carries the mark. */
.point-bare::before { content: ""; flex: none; width: 0.6em; height: 0.6em; margin-top: 0.42em; background: var(--pink); -webkit-mask: var(--mark); mask: var(--mark); }
/* Sheet: the photo runs off the edge; the sheet starts low on it, and the photo runs on under it and past its foot. */
.points_head { max-width: calc(var(--head) + 2 * var(--space-6)); margin-left: max(0px, (100vw - var(--content)) / 2); }
.points_stage { position: relative; margin-top: var(--space-9); }
/* The sheet's photo starts below the head, so its poster is set from the
   head's foot: like every poster, half the band's top space above the photo. */
.points_head { position: relative; }
.points_head > .poster { top: calc(100% + var(--space-9) - var(--band-top) / 2); left: var(--space-6); }
/* The photo runs from the middle of the far column off the page: about
   seven tenths of it. */
.photo-points { position: absolute; top: 0; bottom: 0; right: 0; left: calc(var(--edge) + var(--col) / 2); border-radius: var(--radius-pane) 0 0 var(--radius-pane); }
.points.is-flipped .photo-points { right: calc(var(--edge) + var(--col) / 2); left: 0; border-radius: 0 var(--radius-pane) var(--radius-pane) 0; }
/* The photo shows its full height above the sheet before the sheet crosses it. */
/* The sheet crosses the photo a step below its top, so the photo shows and the band stays within a screen. */
.points_stage > .container { padding: calc(var(--space-13) * 2) var(--space-6) var(--space-13); }
/* The ruled rows bring their own 24px, so the words sit 48px in on every side. */
.sheet { position: relative; z-index: 1; margin: 0; width: 100%; padding: var(--space-6) var(--space-9); border-radius: var(--radius-pane); }
.points.is-flipped .sheet { margin-left: auto; }
.sheet .point_list-titled { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* A card in the sheet keeps its paragraphs apart. */
.cards-sheet .point p + p, .cards-sheet .point .card_list { margin-top: var(--space-2); }
.sheet .point_list-bare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* The first row of the sheet has no rule above it. */
.sheet .point_list-titled > :nth-child(-n + 3), .sheet .point_list-bare > :nth-child(-n + 2) { border-top: 0; }
/* Two columns when that leaves fewer gaps (kit.ts, sheetColumns). */
.sheet .point_list-c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sheet .point_list-c2 > :nth-child(3) { border-top: 1px solid var(--hair); }
.points_foot { margin-top: var(--space-9); }
/* Ledger: heading and photo on one side, the points down the other. */
/* The heading, then the photo, which stretches to a step past the points'
   foot (at least 4:3), so the two columns never end level. */
.ledger_grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gutter); }
.ledger_side { display: flex; flex-direction: column; }
/* The photo and its label: the poster is set from the photo's top, like
   every poster, half the band's top space above it. */
.ledger_shot { flex: 1 0 auto; display: flex; flex-direction: column; margin-top: var(--space-9); }
.ledger_shot > .poster { top: auto; margin-top: calc(var(--band-top) / -2); }
.points-ledger.is-flipped .ledger_side { order: 2; }
.photo-ledger { flex: 1 0 auto; min-height: calc(var(--col) * 3 / 4); margin: 0 0 calc(-1 * var(--step)) calc(-1 * var(--edge)); border-radius: 0 var(--radius-pane) var(--radius-pane) 0; }
.points-ledger.is-flipped .photo-ledger { margin: 0 calc(-1 * var(--edge)) calc(-1 * var(--step)) 0; border-radius: var(--radius-pane) 0 0 var(--radius-pane); }
.ledger_points { padding-top: var(--space-4); }
.ledger_points .point_list-titled .point { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-6); }
.ledger_points .point_list-titled .h3 { margin: 0; }
/* A long card as a ledger row: its words, then its list. */
.point .point_body > * + * { margin-top: var(--space-3); }
/* A long ledger: the heading and photo stay in view beside the rows, rather
   than the photo stretching the whole run. */
.cards-ledger .ledger_side { position: sticky; top: calc(var(--header-h) + var(--space-8)); align-self: start; }
.cards-ledger .ledger_shot, .cards-ledger .photo-ledger { flex: none; }
.cards-ledger .photo-ledger { min-height: 0; aspect-ratio: 4 / 5; margin-bottom: 0; }
.point_body .list { margin: 0; font-size: var(--type-2); gap: var(--space-2); }

.ledger_points .point:last-child { border-bottom: 1px solid var(--hair); }
.ledger_points .button { margin-top: var(--space-7); }

/* Cards: a card's own list, and a full-width set when there is no intro */
.card_list { margin: var(--space-4) 0 var(--space-3); }
.card_list:last-child { margin-bottom: 0; }
.card_link { text-decoration: none; color: inherit; }
.card_link :is(.h3, .row_title) { text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.card_link:hover :is(.h3, .row_title) { text-decoration-color: var(--ink); }
.card_list_heading, .pane p.card_list_heading { font-size: var(--type-2); font-weight: 700; color: var(--ink); margin: 0 0 var(--space-2); }
.card .list { font-size: var(--type-2); color: var(--grey); margin-bottom: var(--space-3); }
.card .list:last-child { margin-bottom: 0; }
.card > p + p { margin-top: var(--space-3); }
.card > :last-child { margin-bottom: 0; }

/* Questions: each with its answer under it */
.faq { padding: var(--band-top) 0 var(--band-foot); }
/* The heading across the top, the questions in the grid's two columns under it. */
.faq_head { margin-bottom: var(--space-9); }
.faq_head h2 { margin: 0; }
/* Questions in pairs, one row each, so the rules run straight across (one column on a phone). */
.questions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gutter); }
.question:nth-child(-n + 2) { border-top: 1px solid var(--hair); }
/* One ruled row per question, full width of its column, the same space above
   and below its words (the answer's looser lines bring 4px of their own). */
.question { border-bottom: 1px solid var(--hair); padding: var(--space-6) 0 calc(var(--space-6) - var(--space-1)); }
.question .h3 { margin: 0 0 var(--space-2); font-size: var(--type-3); }
.question .answer { color: var(--grey); }
.question .answer p:last-child, .question .answer .list:last-child { margin-bottom: 0; }

/* Team: one glass card per person */
.team { padding: var(--band-top) 0 var(--band-foot); }
.team_intro { max-width: var(--head); }
/* One row per person: portrait and words side by side, alternating, each within a screen. */
.team_cards { display: grid; grid-template-columns: 1fr; row-gap: var(--space-11); margin-top: var(--space-9); }
.team_cards .person { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gutter); align-items: center; }
.team_cards .person:nth-child(even) .person_media { order: 2; }
/* Beside a short bio, a square portrait: a 4:5 one stood far taller than its words. */
.team_cards .photo-person { aspect-ratio: 1 / 1; }
.photo-person { aspect-ratio: 4 / 5; align-items: flex-start; }
.person_name { position: relative; z-index: 1; display: inline-block; margin: calc(-1 * var(--space-11)) 0 var(--space-6) var(--space-8); padding: var(--space-5) var(--space-7); font-size: var(--type-4); border-radius: var(--radius-button); }
.person_quote { margin: 0 0 var(--space-5); font-size: var(--type-4); line-height: 1.3; letter-spacing: -0.01em; }
.person_quote p { margin: 0; }
.person .button { margin-top: var(--space-3); }

/* Contact: the form in the left column; the map off the right edge, the
   details pane rising over its foot. */
.contact { padding: var(--band-top) 0 var(--band-foot); }
.contact_grid { display: grid; grid-template-columns: var(--col) minmax(0, 1fr); column-gap: var(--gutter); align-items: start; }
.contact .photo-map { aspect-ratio: 1 / 1; margin-right: calc(-1 * var(--edge)); border-radius: var(--radius-pane) 0 0 var(--radius-pane); }
.contact_pane { position: relative; z-index: 1; margin: calc(-1 * var(--rise-deep)) 0 0 calc(-1 * var(--space-9)); border-radius: var(--radius-pane); }
.contact_pane address { margin-bottom: var(--space-5); }
.contact_line { margin: 0 0 var(--space-2); font-weight: 600; }

/* Forms */
/* A form on its own is the band's one thing, so it sits centred. */
.form-band { padding: var(--band-top) 0 var(--band-foot); }
.form-band .container-narrow { margin-inline: auto; }
.form { border-radius: var(--radius-pane); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-6); margin: var(--space-6) 0 var(--space-7); }
.field { display: grid; gap: var(--space-2); }
.field-wide { grid-column: 1 / -1; }
.field label, .field legend { font-size: var(--type-2); font-weight: 600; }
.field legend { padding: 0; }
.field input, .field select, .field textarea {
  font: inherit; font-size: var(--type-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-chip);
  border: 1px solid var(--hair); background: var(--paper); color: var(--ink);
}
/* Form controls, decided: the select draws its own chevron, choices take the
   brand pink, text areas grow downwards only, placeholders are grey. */
.field select {
  appearance: none; padding-right: var(--space-9);
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2316181d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right var(--space-4) center / 12px 8px no-repeat;
}
.field textarea { resize: vertical; border-radius: var(--radius-card); }
.field ::placeholder { color: var(--grey); opacity: 1; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--pink); }
fieldset.field { border: 0; padding: 0; margin: 0; }
.choices { display: flex; gap: var(--space-3); }
.choice { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-chip); background: var(--tint); font-size: var(--type-2); cursor: pointer; }

/* Post cards */
.posts { padding: var(--band-top) 0 var(--band-foot); }
.post_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); padding-bottom: var(--space-10); }
/* The words sit 28px in (16 + 12) on the sides and at the foot. */
.post_card { display: block; text-decoration: none; transition: transform var(--quick), box-shadow var(--quick); padding: var(--space-4) var(--space-4) calc(var(--space-4) + var(--space-3)); }
.post_card:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow-lift); }
.post_card time { display: block; margin: var(--space-4) var(--space-3) var(--space-2); font-size: var(--type-1); color: var(--grey); }
.post_card .h3 { margin: 0 var(--space-3) var(--space-2); }
.post_card p { margin: 0 var(--space-3) var(--space-3); }
.photo-post { aspect-ratio: 4 / 3; border-radius: var(--radius-chip); }
/* Older posts: titles under their year, ruled rows in two columns, the date on the right. */
/* One rhythm through the listing: the cards, then each year, a step apart. */
.posts:has(+ .posts_year) { padding-bottom: 0; }
.posts:has(+ .posts_year) .post_grid { padding-bottom: 0; }
.posts_year { padding: var(--space-11) 0 0; }
.posts_year:not(:has(+ .posts_year)) { padding-bottom: var(--band-foot); }
.posts_year_head { font-size: var(--type-6); margin: 0 0 var(--space-6); }
/* Two columns while each has room for a title beside its date, else one. */
.post_list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); column-gap: var(--gutter); border-top: 1px solid var(--hair); }
.post_list li { border-bottom: 1px solid var(--hair); }
.post_list a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-5); padding: var(--space-4) 0; text-decoration: none; color: var(--ink); }
.post_list_title { font-weight: 600; }
.post_list a:hover .post_list_title { text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.post_list time { flex: none; font-size: var(--type-1); color: var(--grey); }

/* Gallery labels (local tool). Bands that tuck under the one above get room here. */
.gallery_label + .hero, .gallery_label + .callout { margin-top: var(--space-6); }
.gallery_label { padding-top: var(--space-11); border-top: 1px dashed var(--hair); margin-top: var(--space-11); }
.gallery_label p:last-child { color: var(--grey); font-size: var(--type-2); }

/* The change log (/_changes/, local only) */
.changes { padding: calc(var(--header-h) + var(--band-top)) 0 var(--band-foot); }
.changes_count { color: var(--grey); }
.changes_page { margin-top: var(--space-10); }
.changes_path { font-weight: 400; color: var(--grey); font-size: var(--type-2); margin-left: var(--space-2); }
.changes_table { width: 100%; border-collapse: collapse; font-size: var(--type-2); }
.changes_table th, .changes_table td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-4) var(--space-3) 0; border-top: 1px solid var(--hair); }
.changes_table th { width: 4em; color: var(--grey); font-weight: 600; }
.changes_before { width: 36%; color: var(--grey); }
.changes_after { width: 36%; font-weight: 600; }
.changes_why { color: var(--grey); font-size: var(--type-1); }
.changes_note { display: block; font-weight: 400; color: var(--grey); font-size: var(--type-1); margin-top: var(--space-1); }

/* Tablet and phone */
@media (max-width: 1100px) {
  /* The office map is half as wide here: its tags step down. */
  .drawn_map .chip { padding: var(--space-1) var(--space-3); font-size: var(--type-1); }
  .hero_grid { grid-template-columns: var(--col) minmax(0, 1fr); }
  .photo-hero { aspect-ratio: 1 / 1; }
  /* Narrower screens: the carousel's photo starts a step in and runs off the
     right edge; its panes keep to the content edge, so no two edges line up. */
  .photo-carousel { width: auto; margin: 0 0 0 calc(var(--space-9) + var(--space-6)); border-radius: var(--radius-pane) 0 0 var(--radius-pane); }
  .carousel { --show: 2; }
  .nav, .header_actions { display: none; }
  .burger { display: block; }
  /* The hero's sweep is wide against a narrow page: the footer's words start
     below its first half, clear of the curve at the right column. */
  .footer { padding-top: calc(var(--fold) + var(--curve-hero) / 2); }
}
@media (max-width: 900px) {
  :root { --head: 100%; }
  .photo-carousel, .photo-panel { aspect-ratio: 4 / 3; }
  .carousel_track { grid-auto-columns: 82%; padding-inline: var(--space-6); scroll-padding-inline: var(--space-6); }
  .carousel_side_grid, .carousel-side.is-flipped .carousel_side_grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-9); padding: 0; }
  .carousel_side_media, .carousel-side.is-flipped .carousel_side_media { order: 2; }
  .carousel_side_words { padding: 0 var(--space-6); }
  .carousel_window, .carousel-side.is-flipped .carousel_window { margin-left: calc(var(--space-9) + var(--space-6)); border-radius: var(--radius-pane) 0 0 var(--radius-pane); }
  .photo-carousel-side { aspect-ratio: 4 / 5; }
  .carousel-lines .carousel_pane p { font-size: var(--type-3); }
  .carousel-side .carousel_nav, .carousel-side.is-flipped .carousel_nav { padding: 0 var(--space-9) 0 var(--space-6); justify-content: flex-end; }
  .carousel-side .carousel_track, .carousel-side.is-flipped .carousel_track { grid-auto-columns: calc(100vw - 2 * var(--space-9) - 2 * var(--space-6)); padding-inline: var(--space-6) var(--space-9); scroll-padding-inline: var(--space-6); }
  .photo-panel, .panel.is-flipped .photo-panel { margin: 0 0 0 var(--space-9); border-radius: var(--radius-pane) 0 0 var(--radius-pane); }
  .pane.panel_pane, .panel.is-flipped .pane.panel_pane { width: auto; margin: calc(-1 * var(--rise-deep)) var(--space-4) 0 0; padding: var(--space-7); }
  .panel-long .panel_text { columns: 1; }
  :root { --band-top: var(--space-11); --band-foot: var(--space-8); }
  h1, .hero_title { font-size: var(--type-7); }
  h2, .row_title, .article p.subhead { font-size: var(--type-5); }
  :is(h1, h2, .callout_line).is-long, :is(h1, h2, .callout_line).is-statement { font-size: var(--type-4); }
  .hero_grid, .row, .bento_grid, .quotes_grid, .areas_grid, .office_grid { grid-template-columns: minmax(0, 1fr); }
  /* Footer: the ethos and links across the top, coverage and contact side by side below. */
  .footer_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); }
  .footer_grid > div:first-child { grid-column: 1 / -1; }
  .hero { --hero-pane: 100%; padding-top: calc(var(--header-h) + var(--space-8)); }
  .hero_words { padding-top: 0; }
  /* Stacked, the words and the photo stand a step apart. */
  .hero_grid { row-gap: var(--space-9); }
  .hero_media { margin-top: 0; margin-right: calc(-1 * var(--space-6)); }
  .photo-hero { margin-left: var(--space-9); border-radius: var(--radius-pane) 0 0 var(--radius-pane); }
  .photo-hero { aspect-ratio: 3 / 2; }
  .hero .quote_pane { padding: var(--space-6); gap: var(--space-6); }
  .hero .quote_pane .h3 { font-size: var(--type-4); }
  .hero .quote_pane { width: auto; max-width: none; margin: calc(-1 * var(--rise-deep)) var(--space-4) calc(-1 * var(--space-11)) 0; }
  .row_words, .row-right .row_words, .row-left .row_words { order: 1; justify-self: stretch; width: auto; max-width: none; padding-inline: var(--space-6); }
  /* Phone: the marks a little smaller; each row still centred, wrapping centred. */
  .logos, .credentials { --logo-scale: 0.8; }
  .credentials { flex-wrap: nowrap; gap: var(--space-6); }
  .logo_row { gap: var(--space-6) var(--space-7); }
  .row-left .photo-row, .row-right .photo-row { order: 2; min-height: 0; width: calc(100% - var(--space-6)); }
  .row-left .photo-row { justify-self: start; }
  .row-right .photo-row { justify-self: end; }
  .rows { gap: var(--space-10); }
  .row-statement .row_statement_head, .row-statement .row_statement_line { font-size: var(--type-5); }
  .row-statement:not(:first-child) { margin-top: calc(var(--band-top) + var(--band-foot) - var(--space-10)); }
  .row-statement:not(:last-child) { margin-bottom: calc(var(--band-top) + var(--band-foot) - var(--space-10)); }
  .bento { padding-top: calc(var(--space-13) * 1.6); }
  /* Phone: the heading leads, then the first quote pane rises over the photo. */
  .quotes_grid { gap: var(--space-5); }
  .quotes { display: contents; }
  .quotes > :first-child { order: -1; padding-left: 0; margin: 0 0 calc(var(--space-9) - var(--space-5)); }
  .quote { position: relative; z-index: 1; margin-left: var(--space-6); }
  .quote:nth-of-type(1) { margin-top: calc(-1 * (var(--rise-deep) + var(--space-6))); }
  .photo-quotes { margin: 0 calc(-1 * var(--space-6)) 0 var(--space-9); border-radius: var(--radius-pane) 0 0 var(--radius-pane); }
  .office_media { margin-right: calc(-1 * var(--space-6)); margin-left: var(--space-9); }
  .quote blockquote { font-size: var(--type-3); }
  .quote:nth-of-type(2) { margin-left: 0; margin-right: var(--space-6); }
  .areas_grid, .areas.is-flipped .areas_grid { padding: 0 var(--space-6); }
  .areas_words, .areas.is-flipped .areas_words { order: 0; padding: 0; }
  .areas_pane, .areas.is-flipped .areas_pane { margin: var(--space-6) var(--space-4) calc(-1 * var(--space-10)) 0; }
  .drawn_room, .areas.is-flipped .drawn_room { inset: var(--space-10) 0 0; }
  .areas .photo-bleed, .areas.is-flipped .photo-bleed { aspect-ratio: 1 / 1; min-height: 0; margin: 0 calc(-1 * var(--space-6)) 0 var(--space-9); border-radius: var(--radius-pane) 0 0 var(--radius-pane); }
  .area_frame, .areas-map.is-flipped .area_frame { padding: 0 0 0 calc(var(--space-9) + var(--space-6)); }
  /* Narrower than its tags need, the map keeps the width they were placed for
     and scrolls sideways in its frame (public/carousel.js opens it centred). */
  .area_frame, .areas-map.is-flipped .area_frame { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .area_frame::-webkit-scrollbar { display: none; }
  .area_map { min-width: calc(var(--space-13) * 7); }
  /* The map is half as wide here; its chips step down a size so neighbours keep clear. */
  .chip { padding: var(--space-1) var(--space-3); font-size: var(--type-2); }
  .chip-quiet { font-size: var(--type-1); }
  .area_map_img, .areas-map.is-flipped .area_map_img { border-radius: var(--radius-pane) 0 0 var(--radius-pane); }
  .areas-map.is-flipped .map_credit { left: auto; right: var(--space-4); }
  .office_card { margin: calc(-1 * var(--space-11)) 0 0 var(--space-6); max-width: calc(100% - var(--space-8)); }
  .checklist_grid, .contact_grid { grid-template-columns: 1fr; row-gap: var(--space-11); }
  .service_head_grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-8); }
  .pane.service_index { margin-top: 0; }
  .bento_intro { position: static; padding-top: 0; }
  .checklist_pane { margin-right: 0; }
  .list_pane .list-long { grid-template-columns: minmax(0, 1fr); }
  .list_pane .list-long li:nth-child(2) { border-top: 1px solid var(--hair); }
  .list_groups { grid-template-columns: minmax(0, 1fr); }
  .list_cards_grid { grid-template-columns: minmax(0, 1fr); }
  .list_cards { margin-top: 0; }
  .list_pane .list-many { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .list_pane .list-many li:nth-child(2) { border-top: 0; }
  .list_pane .list-many li:nth-child(3) { border-top: 1px solid var(--hair); }
  .checklist .photo-checklist, .checklist.is-flipped .photo-checklist { min-height: 0; aspect-ratio: 4 / 5; margin: var(--space-6) calc(-1 * var(--space-6)) 0 var(--space-9); border-radius: var(--radius-pane) 0 0 var(--radius-pane); }
  .fields { grid-template-columns: 1fr; }
  .post_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-stacked .panes { grid-template-columns: 1fr; }
  .bento-stacked .panes .card-wide { grid-column: auto; }
  .post_grid > * { transform: none !important; }
  .post_grid { padding-bottom: 0; }
  .bento-stacked .panes_col { display: contents; }
  /* One column: intro, photo, cards. */
  .bento-stacked.has-photo .bento_grid { grid-template-columns: minmax(0, 1fr); }
  .bento.has-photo .bento_grid > :is(.bento_intro, .photo-bento, .panes) { grid-column: auto; grid-row: auto; }
  .bento.has-photo .bento_grid > .photo-bento { aspect-ratio: 4 / 5; margin: 0 calc(-1 * var(--edge)) 0 var(--space-9); border-radius: var(--radius-pane) 0 0 var(--radius-pane); }
  .bento.is-flipped .bento_intro { order: 0; }
  .bento .bento_grid, .bento.is-flipped .bento_grid, .checklist.is-flipped .checklist_grid, .areas.is-flipped .areas_grid { grid-template-columns: minmax(0, 1fr); }
  .questions { grid-template-columns: minmax(0, 1fr); }
  .question:nth-child(2) { border-top: 0; }
  .question .answer { padding-right: 0; }
  .team_cards, .team_cards .person { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-6); }
  .team_cards .person:nth-child(even) .person_media { order: 0; }
  .person_name { margin-left: var(--space-4); max-width: calc(100% - var(--space-9)); }
  .quotes_grid .photo-quotes, .quotes-band.is-flipped .photo-quotes { order: 0; }
  .quotes, .quotes-band.is-flipped .quotes { margin: 0; }
  .quotes-band .quotes_grid, .quotes-band.is-flipped .quotes_grid { grid-template-columns: 1fr; }
  .quotes-band .quotes > :first-child, .quotes-band.is-flipped .quotes > :first-child { padding: 0; }
  .quotes-band .quote, .quotes-band.is-flipped .quote { margin-right: var(--space-6); margin-left: var(--space-6); }
  /* Phone: the quotes step by one small offset, whichever side the band takes. */
  .quotes-band .quote:nth-of-type(odd), .quotes-band.is-flipped .quote:nth-of-type(odd) { margin-left: 0; margin-right: var(--space-6); }
  .quotes-band .quote:nth-of-type(even), .quotes-band.is-flipped .quote:nth-of-type(even) { margin-left: var(--space-6); margin-right: 0; }
  .contact .photo-map { margin-left: var(--space-9); }
  .contact_pane { margin: calc(-1 * var(--rise-deep)) var(--space-4) 0 0; }
  .checklist.is-flipped .checklist_words { order: 0; }
  .checklist.is-flipped .checklist_pane { margin-left: 0; }
  /* One column: a call-out's words fill it, so the pane takes the column. */
  .callout_pane { width: auto; }
  .callout_pair { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-5); }
  .callout_pair > .callout_pane:nth-child(2) { margin: 0 0 0 var(--space-6); }
  .callout.is-flipped .callout_pane { margin-right: var(--space-4); }
  /* Points: the photo leads, the sheet rises over its foot; the ledger stacks. */
  .points_head { margin-left: 0; }
  .photo-points, .points.is-flipped .photo-points { position: static; width: auto; aspect-ratio: 4 / 5; margin: 0 0 0 calc(var(--space-9) + var(--space-6)); border-radius: var(--radius-pane) 0 0 var(--radius-pane); }
  .points_stage > .container { padding: 0 var(--space-6); }
  /* A card on a phone: the ruled rows bring their own 24px, so the words sit 32 in. */
  .sheet, .points.is-flipped .sheet { width: auto; margin: calc(-1 * var(--rise-deep)) var(--space-4) 0 0; padding: var(--space-2) var(--space-7); border-radius: var(--radius-card); }
  .sheet .point_list-titled, .sheet .point_list-bare { grid-template-columns: minmax(0, 1fr); }
  .sheet .point_list-titled > :nth-child(-n + 3), .sheet .point_list-bare > :nth-child(-n + 2) { border-top: 1px solid var(--hair); }
  .sheet .point_list > :first-child { border-top: 0; }
  .ledger_grid, .points-ledger.is-flipped .ledger_grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .ledger_shot, .photo-ledger, .points-ledger.is-flipped .photo-ledger { flex: none; min-height: 0; margin-bottom: 0; }
  .cards-ledger .ledger_side { position: static; }
  .photo-ledger { aspect-ratio: 4 / 5; }
  .points-ledger.is-flipped .ledger_side { order: 0; }
  .ledger_points .point_list-titled .point { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
}
@media (max-width: 560px) {
  /* Phone: the client marks on one even grid, two across, each centred in its
     cell; an odd last one is centred under the rest. */
  .logo_rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--space-6); align-items: center; }
  .logo_row { display: contents; }
  .logo_row > li { display: flex; justify-content: center; min-width: 0; }
  /* A mark wider than its cell shrinks to fit it, keeping its shape. */
  .logo_row .logo { max-width: 100%; max-height: calc(100cqw / var(--ar)); }
  .logo_row > li { container-type: inline-size; }
  .logo_rows > .logo_row:last-child > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .quote_choice { padding: var(--space-2) var(--space-4); font-size: var(--type-2); }
  .photo-hero { aspect-ratio: 1 / 1; }
  .photo-carousel, .photo-panel { aspect-ratio: 4 / 5; }
  /* Phone: the map runs off the right edge and keeps its tags on it, the covered
     places only, at the smallest size; the neighbours go. */
  /* The map keeps the width its tags were placed for and scrolls sideways
     inside its frame, from the gutter off the right edge; a swipe across it. */
  .area_frame, .areas-map.is-flipped .area_frame { padding-left: var(--space-6); }
  .area_map_img, .areas-map.is-flipped .area_map_img { border-radius: var(--radius-pane); }

  .map_credit { right: var(--space-2); bottom: var(--space-2); }
  .post_grid { grid-template-columns: 1fr; }

  .service_list .list { grid-template-columns: minmax(0, 1fr); }
  /* Phone: each row stacks, its cells under their column names. */
  .table thead { display: none; }
  .table tbody tr { display: block; padding: var(--space-3) 0; }
  .table tbody tr:first-child { border-top: 0; }
  .table :is(th, td) { display: block; padding: var(--space-1) 0; }
  .table td::before { content: attr(data-col); display: block; font-size: var(--type-1); color: var(--ink); font-weight: 600; }
  h1, .hero_title { font-size: var(--type-6); }
  .panes { grid-template-columns: 1fr; }
  .panes_col { display: contents; }
  .card-odd { transform: translateX(var(--space-6)); }
}

/* Motion (Andrei, 14 Oct 2026). Everything moves only for visitors who have not
   asked their device for less motion: html.motion is set in the head when they
   have not. Starting states that hide something wait for /motion.js
   (html.motion-ready), so a page without the script shows everything. Each
   movement plays once, is short, and never holds the page up. */
:root { --settle: 0.7s; --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); }

/* Motion keeps the depth (Andrei, 14 Oct 2026): a pane comes in from the side
   it is still cut off at at rest (the screen's edge, or the photo it scrolls
   in), and a nearer layer travels further than the one under it.
   --travel-photo and --travel-glass are the two layers' distances. */
:root { --travel-photo: var(--space-11); --travel-glass: calc(var(--space-11) * 2); }

/* The hero opens: the blush sweeps out from the top left, where it meets the
   screen; the photo slides in from the right edge it runs off; the quote form,
   the nearer layer, follows from the same side and travels further; the words
   rise into place. */
@keyframes blush-in { from { clip-path: circle(0 at 0 0); } to { clip-path: circle(150% at 0 0); } }
@keyframes rise-in { from { opacity: 0; translate: 0 var(--space-5); } }
@keyframes photo-from-right { from { opacity: 0; translate: var(--travel-photo) 0; } }
@keyframes glass-from-right { from { opacity: 0; translate: var(--travel-glass) 0; } }
.motion .hero::before { animation: blush-in 0.8s var(--ease-out) both; }
.motion .photo-hero:has(.photo_img) { animation: photo-from-right 0.9s var(--ease-out) 0.1s both; }
.motion .hero_words { animation: rise-in 0.6s var(--ease-out) 0.2s both; }
.motion .hero .quote_pane { animation: glass-from-right 0.9s var(--ease-out) 0.35s both; }

/* Panes settle into place from their side (--from, set per pane by
   motion.js): photos first, the glass over them a beat later and further. */
.motion-ready .reveal {
  opacity: 0; translate: var(--from, 0 var(--space-6));
  transition: opacity var(--settle) var(--ease-out), translate var(--settle) var(--ease-out), transform var(--quick), box-shadow var(--quick);
  transition-delay: var(--delay, 0s), var(--delay, 0s), 0s, 0s;
}
.motion-ready .reveal.is-in { opacity: 1; translate: none; }

/* A gleam crosses glass once when it is hovered, as light catches a pane. */
.motion :is(.button, .quote_choice, .post_card, .carousel_arrow) { position: relative; overflow: hidden; }
.motion :is(.button, .quote_choice, .post_card, .carousel_arrow)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; translate: -110% 0;
  background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 0.38) 50%, transparent 70%);
}
.motion :is(.button, .quote_choice, .post_card, .carousel_arrow):hover::after { translate: 110% 0; transition: translate 0.7s var(--ease-out); }

/* Photos drift a touch slower than the panes over them (--drift, set by motion.js). */
.motion-ready .drift .photo_img { scale: 1.08; translate: 0 var(--drift, 0px); }
/* Background words slide slowly as their section passes (--slide). */
.motion-ready .poster { translate: var(--slide, 0px) 0; }

/* A map's tags drop onto their places one by one, the pin last (--n per tag). */
.motion-ready .tags-wait :is(.chip, .map_pin) { opacity: 0; translate: 0 calc(-1 * var(--space-4)); }
.motion-ready .tags-in :is(.chip, .map_pin) { opacity: 1; translate: none; transition: opacity 0.45s var(--ease-out), translate 0.45s var(--ease-out); transition-delay: calc(var(--n, 0) * 70ms); }

/* The quote form: the next question slides up as the answer folds into its chip. */
@keyframes step-in { from { opacity: 0; translate: 0 var(--space-4); } }
@keyframes chip-in { from { opacity: 0; scale: 0.8; } }
.motion .quote_pane.is-stepped .quote_step:not([hidden]) { animation: step-in 0.4s var(--ease-out) both; }
.motion .quote_answer { animation: chip-in 0.35s var(--ease-out) both; }

/* A field only bots fill (src/send.ts): kept out of sight and out of reach. */
.form_trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }