/* ============================================================
   EMILECON, property evidence services. Design system v3.
   Every colour is a token. Palette themes live in
   assets/theme-*.css and override this block only.
   ============================================================ */
/* ---------- fonts, self hosted, latin subset ---------- */
@font-face {
  font-family: 'Archivo';
  src: url(/fonts/archivo-var.woff2) format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url(/fonts/newsreader-var.woff2) format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url(/fonts/newsreader-italic-var.woff2) format('woff2-variations');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Martian Mono';
  src: url(/fonts/martianmono-var.woff2) format('woff2-variations');
  font-weight: 100 800;
  font-stretch: 75% 112%;
  font-display: swap;
}

/* ---------- tokens ----------
   Palette "Chancery". Learned from avvr.nl: a warm off-white page
   rather than a grey one, ink that is green rather than black, and a
   single saturated accent used at about one per cent coverage.
   The accent is document red, the colour a defect is marked in. It
   appears on the seal, the stamp, the scan marks and the arrows.
   It never sets body text.
   ---------------------------------------------------------------- */
:root {
  --ink-rgb: 11 31 25;
  --scrim-rgb: 10 16 14;
  --paper-rgb: 245 241 236;
  --card-rgb: 253 251 248;
  --void-rgb: 7 22 18;
  --accent-lt-rgb: 224 112 90;

  --ink: rgb(var(--ink-rgb));
  --ink-2: #33453D;
  --grey: #5D6C66;
  --paper: rgb(var(--paper-rgb));
  --card: rgb(var(--card-rgb));
  --void: rgb(var(--void-rgb));
  --void-2: #0D2820;
  --line: rgb(var(--ink-rgb) / 0.14);
  --line-firm: rgb(var(--ink-rgb) / 0.26);
  --gold: #B4402C;
  --gold-lt: rgb(var(--accent-lt-rgb));
  --on-accent: rgb(var(--card-rgb));

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --prose: 'Newsreader', Georgia, 'Times New Roman', serif;
  --mono: 'Martian Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --gutter: clamp(20px, 5vw, 60px);
  --max: 1300px;
  --stack: clamp(84px, 9vw, 148px);
  --r: 14px;
  --r-lg: 22px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--prose);
  font-size: 1.115rem;
  line-height: 1.66;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* height:auto matters: without it an image with a height attribute in the
   markup is stretched to that literal pixel height on a narrow screen.
   Rules further down that set a height deliberately still win on order. */
img, svg { max-width: 100%; display: block; height: auto; }
a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: 12px 18px; z-index: 300;
  font-family: var(--mono); font-size: 0.75rem;
}
.skip:focus { left: 0; }

.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- type roles ---------- */
.label {
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 620;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
  margin: 0;
}
.h1 {
  font-family: var(--display);
  font-weight: 500;
  font-stretch: 100%;
  font-size: clamp(2.55rem, 6vw, 5.1rem);
  line-height: 1.03;
  letter-spacing: -0.021em;
  margin: 0;
  text-wrap: balance;
}
.h2 {
  font-family: var(--display);
  font-weight: 500;
  font-stretch: 100%;
  font-size: clamp(1.95rem, 3.9vw, 3.15rem);
  line-height: 1.08;
  letter-spacing: -0.019em;
  margin: 0 0 20px;
  text-wrap: balance;
}
.h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.24rem;
  line-height: 1.3;
  letter-spacing: -0.011em;
  margin: 0 0 10px;
}
/* the accent: one phrase per headline set in italic serif */
.it {
  font-family: var(--prose);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.012em;
}
.lead {
  font-size: clamp(1.2rem, 1.75vw, 1.46rem);
  line-height: 1.46;
  color: var(--ink-2);
  margin: 0;
  max-width: 44ch;
}
.prose p { margin: 0 0 1.1em; max-width: 64ch; }
.prose p:last-child { margin-bottom: 0; }
.muted { color: var(--grey); }

/* ---------- layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.band { padding-block: var(--stack); }
.band-tight { padding-block: clamp(50px, 6vw, 90px); }
.band-dark { background: var(--ink); color: var(--paper); }
.band-dark .label { color: rgb(var(--paper-rgb) / 0.6); }
.band-dark .lead { color: rgb(var(--paper-rgb) / 0.84); }
.band-dark .muted { color: rgb(var(--paper-rgb) / 0.6); }

/* section opener: quiet label above a hairline */
.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 14px;
  margin-bottom: clamp(28px, 4vw, 52px);
  border-bottom: 1px solid var(--line);
}
.band-dark .sec-head { border-color: rgb(var(--paper-rgb) / 0.22); }
.sec-head .label { color: var(--ink); }
.band-dark .sec-head .label { color: var(--paper); }
.sec-head em {
  font-family: var(--prose);
  font-style: italic;
  font-size: 1.04rem;
  color: var(--grey);
  text-align: right;
}
.band-dark .sec-head em { color: rgb(var(--paper-rgb) / 0.6); }
/* a quiet line of small print under a section head, used where the pictures
   are illustrative and the page should say so rather than imply otherwise */
.sec-note {
  font-size: 0.86rem;
  color: var(--grey);
  margin: -18px 0 clamp(22px, 3vw, 34px);
}
.band-dark .sec-note { color: rgb(var(--paper-rgb) / 0.55); }

/* ---------- pill actions ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-weight: 560;
  font-size: 0.99rem;
  letter-spacing: -0.004em;
  text-decoration: none;
  padding: 9px 9px 9px 24px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--card);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn .arw {
  width: 34px; height: 34px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  display: grid;
  place-items: center;
  flex: none;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.btn .arw svg { width: 13px; height: 13px; }
.btn:hover { background: transparent; color: var(--ink); }
.btn:hover .arw { transform: translateX(3px) rotate(45deg); }

.btn-light { background: var(--card); color: var(--ink); border-color: var(--card); }
.btn-light:hover { background: transparent; color: var(--card); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--card); }
.btn-plain {
  padding: 13px 24px;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid var(--line-firm);
  display: inline-flex;
  align-items: center;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-plain:hover { background: var(--ink); color: var(--card); border-color: var(--ink); }
.on-dark .btn-plain { border-color: rgb(var(--card-rgb) / 0.4); color: var(--card); }
.on-dark .btn-plain:hover { background: var(--card); color: var(--ink); border-color: var(--card); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- masthead ---------- */
.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.masthead-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
}
.wordmark {
  font-family: var(--display);
  font-weight: 620;
  font-stretch: 108%;
  font-size: 1.06rem;
  letter-spacing: 0.24em;
  text-decoration: none;
  text-transform: uppercase;
}
.nav { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 32px); }
.nav a {
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 3px 0;
  border-bottom: 1.5px solid transparent;
  white-space: nowrap;
}
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--gold); }
.masthead .btn { padding: 7px 7px 7px 20px; font-size: 0.9rem; }
.masthead .btn .arw { width: 30px; height: 30px; }

/* over a photo hero */
.masthead.over { color: var(--card); }
.masthead.over .btn {
  background: rgb(var(--card-rgb) / 0.12);
  border-color: rgb(var(--card-rgb) / 0.45);
  color: var(--card);
  backdrop-filter: blur(6px);
}
.masthead.over .btn:hover { background: var(--card); color: var(--ink); border-color: var(--card); }
/* solid state, applied by script once scrolled */
.masthead.stuck {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line);
}
.masthead.stuck .btn {
  background: var(--ink); border-color: var(--ink); color: var(--card); backdrop-filter: none;
}
.masthead.stuck .btn:hover { background: transparent; color: var(--ink); }
/* plain pages: solid from the start */
.masthead.plain { position: sticky; background: var(--paper); box-shadow: 0 1px 0 var(--line); }

@media (max-width: 940px) {
  .masthead-in { flex-wrap: wrap; gap: 0; min-height: 0; padding-block: 12px 0; }
  .masthead-in .wordmark { flex: 1; }
  .nav {
    order: 3;
    width: calc(100% + var(--gutter) * 2);
    margin-inline: calc(var(--gutter) * -1);
    margin-top: 12px;
    padding: 10px var(--gutter);
    border-top: 1px solid var(--line);
    gap: 18px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .masthead.over .nav { border-color: rgb(var(--card-rgb) / 0.25); }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { font-size: 0.88rem; }
}

/* ---------- photo hero ---------- */
.hero {
  position: relative;
  min-height: min(90vh, 820px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--void);
  color: var(--card);
}
.hero picture {
  position: absolute;
  inset: 0;
  display: block;
}
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.72;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(var(--scrim-rgb) / 0.94) 0%, rgb(var(--scrim-rgb) / 0.55) 42%, rgb(var(--scrim-rgb) / 0.5) 100%);
}
.hero-in {
  position: relative;
  z-index: 2;
  padding-block: clamp(120px, 16vw, 190px) clamp(46px, 5vw, 78px);
  width: 100%;
}
.hero .h1 { max-width: 17ch; }
.hero-sub {
  font-size: clamp(1.08rem, 1.5vw, 1.28rem);
  line-height: 1.5;
  color: rgb(var(--card-rgb) / 0.86);
  max-width: 50ch;
  margin: 24px 0 34px;
}
.hero .label { color: rgb(var(--card-rgb) / 0.72); margin-bottom: 22px; }
.hero-in > * { animation: rise 0.75s cubic-bezier(0.2, 0.7, 0.3, 1) backwards; }
.hero-in > *:nth-child(1) { animation-delay: 0.05s; }
.hero-in > *:nth-child(2) { animation-delay: 0.14s; }
.hero-in > *:nth-child(3) { animation-delay: 0.23s; }
.hero-in > *:nth-child(4) { animation-delay: 0.32s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* compact page header for inner pages */
.pagehead { padding-block: clamp(112px, 12vw, 168px) clamp(34px, 4vw, 56px); }
.pagehead .h1 { max-width: 18ch; }
.pagehead .lead { margin-top: 24px; max-width: 58ch; }

/* ---------- image service cards ---------- */
.svc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 26px); }
@media (max-width: 860px) { .svc { grid-template-columns: 1fr; } }
.svc-card {
  position: relative;
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--card);
  background: var(--ink);
  min-height: clamp(330px, 40vw, 460px);
  isolation: isolate;
}
.svc-card img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.svc-card::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgb(var(--scrim-rgb) / 0.92) 4%, rgb(var(--scrim-rgb) / 0.34) 52%, rgb(var(--scrim-rgb) / 0.58) 100%);
}
.svc-card:hover img { transform: scale(1.045); }
.svc-in {
  position: relative;
  height: 100%;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(22px, 2.4vw, 32px);
}
.svc-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  letter-spacing: -0.018em;
  line-height: 1.1;
  margin: 0;
  max-width: 16ch;
}
.svc-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.svc-foot p { margin: 0; font-size: 1rem; color: rgb(var(--card-rgb) / 0.86); max-width: 34ch; }
.svc-arw {
  width: 46px; height: 46px; flex: none;
  border-radius: 999px;
  border: 1px solid rgb(var(--card-rgb) / 0.5);
  display: grid; place-items: center;
  transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;
}
.svc-arw svg { width: 15px; height: 15px; }
.svc-card:hover .svc-arw { background: var(--gold); border-color: var(--gold); color: var(--on-accent); transform: rotate(45deg); }

/* ---------- split ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(30px, 4.5vw, 76px);
  align-items: start;
}
.split-flip { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
.split-even { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) {
  .split, .split-flip, .split-even { grid-template-columns: 1fr; }
}

/* ---------- the specimen sheet ---------- */
.sheet {
  background: var(--card);
  border: 1px solid var(--line-firm);
  border-radius: var(--r);
  box-shadow: 0 22px 44px -30px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.sheet-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: 18px 22px 14px;
  border-bottom: 2px solid var(--ink);
}
.sheet-title {
  font-family: var(--display); font-weight: 800; font-stretch: 110%;
  font-size: 0.86rem; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 5px;
}
.sheet-ref { font-family: var(--mono); font-size: 0.6rem; color: var(--grey); }
.sheet-stamp {
  font-family: var(--mono); font-size: 0.55rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--on-accent); background: var(--gold);
  border-radius: 999px; padding: 5px 11px; white-space: nowrap;
}
.sheet table { width: 100%; border-collapse: collapse; }
.sheet th {
  font-family: var(--mono); font-size: 0.55rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--grey);
  text-align: left; padding: 10px 22px; border-bottom: 1px solid var(--line);
}
.sheet td {
  font-size: 0.88rem; line-height: 1.4; padding: 12px 22px;
  border-bottom: 1px solid var(--line); vertical-align: top;
}
.sheet td:first-child { white-space: nowrap; }
.sheet td.num { font-family: var(--mono); font-size: 0.66rem; text-align: right; white-space: nowrap; }
.sheet tr:last-child td { border-bottom: 0; }
.sheet-foot {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 18px;
  padding: 16px 22px 20px; border-top: 2px solid var(--ink);
}
.sheet-sign { font-family: var(--mono); font-size: 0.58rem; color: var(--grey); line-height: 1.85; }
.sheet-sign strong { color: var(--ink); font-weight: 700; }
.seal { width: 104px; height: 104px; flex: none; }
.seal-ring { animation: turn 48s linear infinite; transform-origin: 50% 50%; }
@keyframes turn { to { transform: rotate(360deg); } }

/* ---------- sequence ---------- */
.seq { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); }
.seq-step {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 24px 22px 26px;
}
.seq-when {
  font-family: var(--mono); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink);
  display: block; padding-bottom: 11px; margin-bottom: 15px;
  border-bottom: 2px solid var(--gold); width: fit-content;
}
.seq-step p { font-size: 0.96rem; margin: 0; color: var(--ink-2); }
@media (max-width: 860px) { .seq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 500px) { .seq { grid-template-columns: 1fr; } }

/* ---------- spec rows ---------- */
.spec { margin: 0; border-top: 1px solid var(--line); }
.band-dark .spec { border-color: rgb(var(--paper-rgb) / 0.22); }
.spec-row {
  display: grid; grid-template-columns: 138px minmax(0, 1fr);
  gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line);
}
.band-dark .spec-row { border-color: rgb(var(--paper-rgb) / 0.22); }
.spec-row dt {
  font-family: var(--mono); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--grey); padding-top: 3px;
}
.band-dark .spec-row dt { color: rgb(var(--paper-rgb) / 0.6); }
.spec-row dd { margin: 0; font-size: 1rem; line-height: 1.55; }
@media (max-width: 620px) { .spec-row { grid-template-columns: 1fr; gap: 5px; } }

/* ---------- ticks ---------- */
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding-left: 30px; margin-bottom: 13px; font-size: 1rem; line-height: 1.5; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 14px; height: 2px; background: var(--gold); }

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: 20px; }
.card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  padding: 26px 24px 28px;
  text-decoration: none;
  display: block;
}
.card .label { margin-bottom: 12px; }
.card p { font-size: 0.98rem; margin: 0; color: var(--ink-2); }

/* ---------- floor plan ---------- */
.plan-frame {
  border: 1px solid rgb(var(--paper-rgb) / 0.22);
  border-radius: var(--r);
  padding: clamp(16px, 2.2vw, 30px);
  background: var(--void-2);
}
.plan { width: 100%; height: auto; }
.plan .room { fill: rgb(var(--paper-rgb) / 0.04); transition: fill 0.22s ease; }
.plan .room:hover { fill: rgb(var(--accent-lt-rgb) / 0.14); }
.plan .wall { stroke: rgb(var(--paper-rgb) / 0.7); stroke-width: 3; fill: none; }
.plan .part { stroke: rgb(var(--paper-rgb) / 0.42); stroke-width: 1.5; fill: none; }
.plan .swing { stroke: rgb(var(--paper-rgb) / 0.26); stroke-width: 1; fill: none; stroke-dasharray: 3 3; }
.plan .tag {
  font-family: var(--mono); font-size: 8px; font-weight: 600;
  letter-spacing: 0.04em; fill: rgb(var(--paper-rgb) / 0.62); text-transform: uppercase;
}
.plan .cam { fill: var(--gold-lt); }
.plan .cam-halo { fill: none; stroke: var(--gold-lt); stroke-width: 1; opacity: 0.5; animation: ping 3.4s ease-out infinite; }
@keyframes ping { 0% { r: 6; opacity: 0.6; } 70% { r: 20; opacity: 0; } 100% { r: 20; opacity: 0; } }
.plan-key {
  display: flex; flex-wrap: wrap; gap: 18px;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid rgb(var(--paper-rgb) / 0.2);
  font-family: var(--mono); font-size: 0.58rem;
  letter-spacing: 0.03em; text-transform: uppercase; color: rgb(var(--paper-rgb) / 0.6);
}
.plan-key span { display: inline-flex; align-items: center; gap: 8px; }
.plan-key i { width: 8px; height: 8px; background: var(--gold-lt); border-radius: 999px; display: inline-block; }

/* ---------- areas covered ---------- */
.areas {
  columns: 4;
  column-gap: 30px;
  margin: 0; padding: 0;
  list-style: none;
}
.areas li {
  break-inside: avoid;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.98rem;
}
@media (max-width: 900px) { .areas { columns: 2; } }
@media (max-width: 460px) { .areas { columns: 1; } }

/* ---------- photo CTA ---------- */
.cta-photo {
  position: relative;
  overflow: hidden;
  color: var(--card);
  background: var(--void);
  isolation: isolate;
}
.cta-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2; opacity: 0.5;
}
.cta-photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right, rgb(var(--scrim-rgb) / 0.94) 0%, rgb(var(--scrim-rgb) / 0.76) 55%, rgb(var(--scrim-rgb) / 0.66) 100%);
}
.cta-photo .h2 { max-width: 16ch; }

/* ---------- form ---------- */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label {
  font-family: var(--display); font-size: 0.68rem; font-weight: 620;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--grey);
}
.field input, .field select, .field textarea {
  font-family: var(--prose); font-size: 1rem; color: var(--ink);
  background: var(--card); border: 1px solid var(--line-firm);
  border-radius: 10px; padding: 13px 15px; width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--gold); outline-offset: 0; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px) { .field-pair { grid-template-columns: 1fr; } }
.hp { position: absolute; left: -9999px; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1); }
.reveal.seen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- footer ---------- */
.foot { background: var(--ink); color: var(--paper); padding-block: clamp(50px, 6vw, 84px) 32px; }
.foot-top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 34px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgb(var(--paper-rgb) / 0.2);
}
@media (max-width: 760px) { .foot-top { grid-template-columns: 1fr 1fr; } }
.foot .wordmark { color: var(--paper); display: inline-block; margin-bottom: 14px; }
.foot p { font-size: 0.98rem; color: rgb(var(--paper-rgb) / 0.76); margin: 0; max-width: 36ch; }
.foot h3 {
  font-family: var(--display); font-size: 0.68rem; font-weight: 620;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: rgb(var(--paper-rgb) / 0.6); margin: 0 0 16px;
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 9px; }
.foot li a { font-size: 0.98rem; text-decoration: none; border-bottom: 1px solid transparent; }
.foot li a:hover { border-bottom-color: var(--gold-lt); }

/* LinkedIn and Instagram, under the blurb (and inside .foot-base on the short footers).
   Round, like the site's buttons; 44px so they are easy to tap. */
.foot-social { display: flex; gap: 10px; margin-top: 22px; }
.foot .foot-social li { margin: 0; }
.foot .foot-social a {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid rgb(var(--paper-rgb) / 0.28); border-radius: 999px;
  color: rgb(var(--paper-rgb) / 0.82);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.foot .foot-social a:hover { color: var(--paper); border-color: var(--gold-lt); }
.foot .foot-social a:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 3px; }
.foot .foot-social svg { width: 18px; height: 18px; display: block; }
.foot-base .foot-social { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .foot .foot-social a { transition: none; } }
.foot-base {
  display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between;
  padding-top: 24px; font-family: var(--display); font-size: 0.72rem;
  font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase;
  color: rgb(var(--paper-rgb) / 0.72);
}

/* inner pages sit under a sticky solid masthead, so they need less top room */
.pagehead.solid { padding-block: clamp(44px, 5vw, 78px) clamp(30px, 4vw, 52px); }

/* text sitting over a photograph, not inside .band-dark */
.on-dark .lead, .cta-photo .lead { color: rgb(var(--card-rgb) / 0.88); }
.on-dark .label, .cta-photo .label { color: rgb(var(--card-rgb) / 0.7); }
.on-dark .prose, .cta-photo .prose { color: rgb(var(--card-rgb) / 0.88); }

/* ============================================================
   PHONES: the masthead is two rows tall here, so a fixed or
   sticky header covers the top of whatever is beneath it. It
   scrolls away instead, and keeps its over-the-photo styling.
   ============================================================ */
@media (max-width: 820px) {
  .masthead { position: absolute; }
  .masthead.plain { position: static; background: var(--paper); box-shadow: 0 1px 0 var(--line); }
  .masthead.over.stuck { background: transparent; box-shadow: none; color: var(--card); }
  .masthead.over.stuck .btn {
    background: rgb(var(--card-rgb) / 0.12);
    border-color: rgb(var(--card-rgb) / 0.45);
    color: var(--card);
    backdrop-filter: blur(6px);
  }
  .hero-in { padding-block: 152px clamp(40px, 6vw, 60px); }
  .hero { min-height: min(88vh, 760px); }

  /* a card title sits at the top of the image, where a bright photo
     gives it the least help, so the scrim carries more weight here */
  .svc-card::before {
    background: linear-gradient(to top, rgb(var(--scrim-rgb) / 0.92) 4%, rgb(var(--scrim-rgb) / 0.42) 46%, rgb(var(--scrim-rgb) / 0.72) 100%);
  }
  .svc-card { min-height: 420px; }

  /* the CTA scrim runs left to right on desktop, which leaves stacked
     mobile text sitting over the bright half */
  .cta-photo::before {
    background: linear-gradient(to bottom, rgb(var(--scrim-rgb) / 0.82) 0%, rgb(var(--scrim-rgb) / 0.7) 55%, rgb(var(--scrim-rgb) / 0.86) 100%);
  }
  .cta-photo img { opacity: 0.64; }
}

/* ============================================================
   LOOPING EXAMPLE FOOTAGE
   Every clip is stock illustration, never Emilecon's own work,
   and the ones on the service pages say so on the frame.
   A poster image always renders, so the panel is never empty
   if the video is blocked, saving data, or still loading.
   ============================================================ */
.svc-card video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  opacity: 0;
  transition: opacity 0.7s ease;
}
.svc-card video.playing { opacity: 1; }

.loop { margin: 0; }
.loop-frame {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--void);
  aspect-ratio: 16 / 9;
}
.loop-frame img,
.loop-frame video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.loop-frame video { opacity: 0; transition: opacity 0.7s ease; }
.loop-frame video.playing { opacity: 1; }
.loop-tag {
  position: absolute;
  left: 16px; top: 16px;
  z-index: 3;
  font-family: var(--mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
  border-radius: 999px;
  padding: 6px 13px;
}
.loop figcaption {
  margin-top: 14px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--grey);
}
.band-dark .loop figcaption,
.on-dark .loop figcaption { color: rgb(var(--paper-rgb) / 0.72); }

/* ---------- accent on dark fields ----------
   The flat accent is chosen to read on the paper field. On the dark
   bands and over photographs it needs the lighter variant, otherwise a
   deep accent (claret, green) disappears into the ink. */
.band-dark .ticks li::before,
.on-dark .ticks li::before,
.cta-photo .ticks li::before { background: var(--gold-lt); }
.band-dark .strip span::before,
.on-dark .strip span::before { background: var(--gold-lt); }
.band-dark .seq-step h3,
.on-dark .seq-step h3 { border-bottom-color: var(--gold-lt); }

/* ---------- the third service, stated once ----------
   Facilities management does not get a card. It gets a line, because
   it is what an agent asks about after they already trust the reports. */
.svc-note {
  margin: clamp(26px, 3.4vw, 42px) 0 0;
  max-width: 62ch;
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--ink-2);
  padding-left: 20px;
  border-left: 2px solid var(--gold);
}
.svc-note strong { font-weight: 600; color: var(--ink); }
.svc-note a { text-decoration: none; border-bottom: 1px solid var(--line-firm); }
.svc-note a:hover { border-bottom-color: var(--gold); }

/* ---------- trading disclosure ----------
   Required on the website of a limited company: registered name,
   number, place of registration and registered office. It sits in
   the footer small print, which is where it belongs. */
/* specificity: .foot p also matches this element */
.foot-base .foot-legal {
  flex: 1 0 100%;
  order: 3;
  margin: 18px 0 0;
  max-width: 84ch;
  font-family: var(--display);
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1.75;
  color: rgb(var(--paper-rgb) / 0.5);
}
.foot-base .foot-legal strong { font-weight: 600; color: rgb(var(--paper-rgb) / 0.72); }

/* ---------- the embedded example tour (Kuula) ----------
   A facade until clicked. The panel is the same 16:9 box the iframe
   will occupy, so nothing shifts when the tour loads. */
.tourdemo { margin: 0; }
.tourdemo-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--void-2);
  border: 1px solid rgb(var(--paper-rgb) / 0.16);
}
.tourdemo-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tourdemo-face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 14px;
  padding: clamp(22px, 3.4vw, 44px);
  color: var(--paper);
  background:
    radial-gradient(120% 90% at 78% 18%, rgb(var(--accent-lt-rgb) / 0.13) 0%, transparent 62%),
    linear-gradient(to top, rgb(var(--scrim-rgb) / 0.92) 0%, rgb(var(--scrim-rgb) / 0.42) 100%);
}
.tourdemo-face .loop-tag { position: absolute; left: clamp(22px, 3.4vw, 44px); top: clamp(22px, 3.4vw, 44px); }
.tourdemo-kicker {
  font-family: var(--display); font-weight: 620;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgb(var(--paper-rgb) / 0.62); margin: 0;
}
.tourdemo-line {
  font-size: clamp(1.06rem, 1.5vw, 1.24rem); line-height: 1.5;
  margin: 0; max-width: 40ch; color: rgb(var(--paper-rgb) / 0.92);
}
.tourdemo-face .btn { align-self: flex-start; cursor: pointer; margin-top: 4px; }
.tourdemo-note {
  font-family: var(--display); font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.02em; color: rgb(var(--paper-rgb) / 0.5); margin: 0;
}
.tourdemo figcaption {
  margin-top: 18px;
  font-size: 0.98rem; line-height: 1.62; color: var(--grey);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.tourdemo figcaption strong { color: var(--ink); font-weight: 600; }
.on-dark .tourdemo figcaption,
.band-dark .tourdemo figcaption { color: rgb(var(--paper-rgb) / 0.72); }
.band-dark .tourdemo figcaption strong { color: var(--paper); }

/* ============================================================
   THE JOURNAL
   Posts are set narrower than the rest of the site and one step
   larger, because this is the only place on the site where
   somebody reads several hundred words in a row.
   ============================================================ */
.draftbar {
  background: var(--gold); color: var(--on-accent);
  font-family: var(--display); font-size: 0.74rem; font-weight: 620;
  letter-spacing: 0.14em; text-transform: uppercase;
  text-align: center; padding: 11px 20px;
}
.post-head { max-width: 940px; }
.post-head .h1 { max-width: 20ch; }
.post-head .lead { margin-top: 24px; max-width: 54ch; }
.post-meta {
  margin: 28px 0 0;
  font-family: var(--display); font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--grey);
}
.post-head .label a { text-decoration: none; border-bottom: 1px solid var(--line-firm); }
.post-head .label a:hover { border-bottom-color: var(--gold); }

.post-cover { margin: clamp(30px, 4vw, 52px) auto 0; }
.post-cover img { width: 100%; border-radius: var(--r-lg); }
.post-cover figcaption {
  margin-top: 14px; font-size: 0.9rem; font-style: italic;
  color: var(--grey); max-width: 62ch;
}

.post-body { max-width: 66ch; margin-inline: auto; font-size: 1.17rem; line-height: 1.72; }
.post-body > p:first-child {
  font-size: 1.32rem; line-height: 1.55; color: var(--ink);
}
.post-body p { max-width: none; }
.post-h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  margin: clamp(46px, 5vw, 68px) 0 18px;
}
.post-body .h3 { margin: 38px 0 12px; }
.post-body a { text-decoration: none; border-bottom: 1px solid var(--gold); }
.post-body a:hover { background: rgb(var(--accent-lt-rgb) / 0.12); }
.post-body .ticks { margin: 26px 0; display: grid; gap: 14px; }
.post-body .ticks li { font-size: 1.08rem; }
.post-body .steps {
  margin: 26px 0; padding-left: 1.3em; display: grid; gap: 12px;
}
.pull {
  margin: clamp(38px, 4.5vw, 56px) 0;
  padding: 4px 0 4px 26px;
  border-left: 2px solid var(--gold);
}
.pull p {
  margin: 0; font-family: var(--prose); font-style: italic;
  font-size: 1.32rem; line-height: 1.5; color: var(--ink);
}
.post-body em { font-style: italic; }
.post-body .sources { font-size: 0.92rem; color: var(--grey); line-height: 1.68; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); }

.post-cta {
  max-width: 66ch; margin-inline: auto;
  padding: clamp(30px, 4vw, 46px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  display: grid; gap: 18px; justify-items: start;
}
.post-cta .h2 { margin: 0; font-size: clamp(1.55rem, 2.4vw, 2rem); }
.post-cta .lead { max-width: 48ch; }

/* ---------- the index ---------- */
.post-list { display: grid; gap: clamp(22px, 2.6vw, 34px); }
.post-card {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  text-decoration: none;
  padding-bottom: clamp(22px, 2.6vw, 34px);
  border-bottom: 1px solid var(--line);
}
.post-card:last-child { border-bottom: 0; }
.post-card-img { overflow: hidden; border-radius: var(--r); aspect-ratio: 16 / 10; }
.post-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.post-card:hover .post-card-img img { transform: scale(1.035); }
.post-card-in { display: grid; gap: 12px; }
.post-card .h3 { margin: 0; font-size: clamp(1.35rem, 2.1vw, 1.8rem); font-weight: 500; letter-spacing: -0.014em; }
.post-card-x { margin: 0; color: var(--ink-2); font-size: 1.04rem; max-width: 48ch; }
.post-card-go {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display); font-size: 0.86rem; font-weight: 560;
  color: var(--ink);
}
.post-card-go .arw {
  width: 26px; height: 26px; border-radius: 999px;
  border: 1px solid var(--line-firm);
  display: grid; place-items: center;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}
.post-card-go .arw svg { width: 12px; height: 12px; }
.post-card:hover .post-card-go .arw { background: var(--gold); border-color: var(--gold); color: var(--on-accent); }

@media (max-width: 760px) {
  .post-card { grid-template-columns: 1fr; }
  .post-body { font-size: 1.1rem; }
  .post-body > p:first-child { font-size: 1.2rem; }
}

/* a link that inherits its surroundings and only shows on hover */
.plainlink { text-decoration: none; border-bottom: 1px solid transparent; }
.plainlink:hover { border-bottom-color: currentColor; }

/* the Matterport example, loading on its own rather than on a click */
.tourdemo-chip {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px;
  font-family: var(--display); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.02em; color: var(--grey);
}
.on-dark .tourdemo-chip, .band-dark .tourdemo-chip { color: rgb(var(--paper-rgb) / 0.66); }
.tourdemo-chip .loop-tag { position: static; }
.tourdemo-frame.is-live { background: var(--void-2); }

/* ---------- latest from the blog, on the homepage ---------- */
.latest { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: clamp(20px, 2.6vw, 32px); }
.latest-card { text-decoration: none; display: grid; gap: 14px; align-content: start; }
.latest-card .shot { overflow: hidden; border-radius: var(--r); aspect-ratio: 16 / 10; }
.latest-card .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.latest-card:hover .shot img { transform: scale(1.035); }
.latest-card h3 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 1.28rem; line-height: 1.24; letter-spacing: -0.014em; }
.latest-card p { margin: 0; font-size: 0.98rem; color: var(--ink-2); }
.latest-empty { color: var(--grey); }

/* ============================================================
   FACILITIES: the credential
   The building under management is presented as a specification,
   because a specification is the most confident thing a services
   company can put on a page. Numerals carry it, not adjectives.
   ============================================================ */
.creds { gap: clamp(34px, 5vw, 80px); align-items: center; }

.figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3.4vw, 44px);
  margin: 0;
  padding: clamp(28px, 3.4vw, 44px);
  border: 1px solid rgb(var(--paper-rgb) / 0.18);
  border-radius: var(--r-lg);
}
.figures > div { display: grid; gap: 6px; }
.figures dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-stretch: 96%;
  font-size: clamp(2.9rem, 5vw, 4.1rem);
  line-height: 0.94;
  letter-spacing: -0.035em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--paper);
}
.figures dt {
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 620;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgb(var(--paper-rgb) / 0.56);
}
@media (max-width: 520px) { .figures { grid-template-columns: 1fr 1fr; padding: 24px; } }

/* the schedule of what the building contains */
.schedule { margin-top: clamp(44px, 5vw, 76px); border-top: 1px solid rgb(var(--paper-rgb) / 0.2); }
.schedule-row {
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 48px);
  padding: clamp(18px, 2.2vw, 26px) 0;
  border-bottom: 1px solid rgb(var(--paper-rgb) / 0.14);
}
.schedule-k {
  margin: 0;
  font-family: var(--display);
  font-size: 0.72rem; font-weight: 620;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: rgb(var(--paper-rgb) / 0.56);
  padding-top: 4px;
}
.schedule-v { margin: 0; font-size: 1.04rem; line-height: 1.6; color: rgb(var(--paper-rgb) / 0.9); max-width: 62ch; }
@media (max-width: 760px) { .schedule-row { grid-template-columns: 1fr; gap: 8px; } }

/* ---------- the five disciplines ----------
   Hairline separated rows rather than a card grid. Cards make five
   things look like a menu; rows make them look like a remit. */
.disc { border-top: 1px solid var(--line); }
.disc-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: clamp(14px, 2.4vw, 40px);
  padding: clamp(26px, 3.4vw, 44px) 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.disc-i {
  margin: 0;
  font-family: var(--display);
  font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--gold);
  font-variant-numeric: lining-nums tabular-nums;
  padding-top: 6px;
}
.disc-b { display: grid; gap: 12px; }
.disc-b .h3 { margin: 0; font-size: clamp(1.35rem, 2.1vw, 1.8rem); font-weight: 500; letter-spacing: -0.015em; }
.disc-b p { margin: 0; max-width: 74ch; font-size: 1.04rem; line-height: 1.66; color: var(--ink-2); }
@media (max-width: 620px) {
  .disc-row { grid-template-columns: 1fr; gap: 10px; }
  .disc-i { padding-top: 0; }
}

/* three service cards rather than two: portrait crops so three sit
   comfortably across a desktop, stacking to one column on a phone */
.svc-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc-three .svc-card { min-height: clamp(400px, 46vw, 560px); }
.svc-three .svc-title { font-size: clamp(1.4rem, 1.9vw, 1.85rem); max-width: 13ch; }
.svc-three .svc-foot p { font-size: 0.95rem; max-width: 28ch; }
@media (max-width: 1000px) { .svc-three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .svc-three { grid-template-columns: 1fr; } }

/* ============================================================
   THE MARK IN THE WORDMARK
   The frame and the E take the surrounding colour, so the lockup
   works over a photograph, on paper and on the dark bands without
   three separate files. Only the marked bar is coloured.
   ============================================================ */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.62em;
}
.wm-mark { width: 1.62em; height: 1.62em; flex: none; overflow: visible; }
.wm-frame { fill: none; stroke: currentColor; stroke-width: 7; }
.wm-e rect { fill: currentColor; }
.wm-bar { fill: var(--gold); transition: fill 0.22s ease; }
/* on any dark ground the deep accent disappears, so use the light one */
.masthead.over .wm-bar,
.foot .wm-bar,
.band-dark .wm-bar { fill: var(--gold-lt); }
.masthead.stuck .wm-bar { fill: var(--gold-lt); }
.masthead.plain .wm-bar { fill: var(--gold); }
@media (max-width: 520px) { .wm-mark { width: 1.5em; height: 1.5em; } }

/* the mark at scale, on the two pages that have nothing else to say */
.bigmark {
  width: clamp(84px, 11vw, 140px);
  height: clamp(84px, 11vw, 140px);
  color: var(--ink);
  margin-bottom: clamp(26px, 3.4vw, 44px);
  opacity: 0.9;
}

/* ============================================================
   SCROLL BEHAVIOUR
   Three effects, deliberately few. Content is only ever hidden
   when `html.js-anim` is present, which JavaScript adds, so a
   failed script leaves a complete page rather than a blank one.
   ============================================================ */
.js-anim .rv {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 0.72s cubic-bezier(.22,.61,.36,1),
              transform 0.72s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--rv-d, 0ms);
  will-change: opacity, transform;
}
.js-anim .rv.in { opacity: 1; transform: none; }
.js-anim .rv.in { will-change: auto; }

/* section rules draw themselves in rather than appearing */
.js-anim .sec-head { position: relative; }
.js-anim .sec-head::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: currentColor; opacity: 0.28;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1s cubic-bezier(.22,.61,.36,1) 0.1s;
}
.js-anim .sec-head.in::after { transform: scaleX(1); }
.js-anim .sec-head { border-bottom-color: transparent; }

/* the hero photograph drifts slower than the words over it */
.hero-media { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .js-anim .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js-anim .sec-head { border-bottom-color: var(--line); }
  .js-anim .sec-head::after { display: none; }
  .hero-media { transform: none !important; }
}

/* the footer takes the stacked lockup, deliberately: it gives the foot of
   the page a mark of its own without competing with the masthead */
.foot .wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5em;
  margin-bottom: 18px;
}
.foot .wm-mark { width: 2.05em; height: 2.05em; }

/* an inner page hero: the same component as the homepage, shorter, and with
   the masthead sitting over it rather than above it */
.hero-page { min-height: min(64vh, 560px); }
.hero-page .hero-in { padding-block: clamp(120px, 15vw, 176px) clamp(40px, 4.5vw, 66px); }
.hero-page .h1 { max-width: 19ch; }
.hero-page .hero-sub { max-width: 56ch; }

/* A playing <video> is composited on its own layer and can escape the
   rounded clip of its parent, which is why one card looked square-cornered
   while the others did not. Give the media the same radius directly, so the
   corner is correct whether the poster or the video is showing. */
.svc-card img,
.svc-card video,
.svc-card picture {
  border-radius: var(--r-lg);
}
.svc-card { transform: translateZ(0); }
.loop-frame video, .loop-frame img, .tourdemo-frame iframe { border-radius: inherit; }


/* ============================================================
   CAPTIONS MATCH THEIR MEDIA
   A caption capped in `ch` is as wide as its own text happens to
   be, which is never the width of the video above it. Both figures
   are full-width blocks, so with no cap the caption ends exactly
   where the frame ends, at every screen size, with no breakpoints
   to keep in step.
   ============================================================ */
.loop, .tourdemo { width: 100%; }
.loop figcaption, .tourdemo figcaption { max-width: none; width: 100%; }
.post-cover figcaption { max-width: none; }

/* the line beneath the enquiry form, pointing at the privacy notice */
.form-note {
  margin: 4px 0 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--grey);
  max-width: 58ch;
}
.form-note a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold); }

/* ---------- venue: room schedule sheet ---------- */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sheet a {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--gold);
}
.sheet a:hover { background: var(--gold); color: var(--on-accent); }
.sheet td.wrap-ok { white-space: normal; }

/* ---------- venue: use case cards, feature split, size chips ---------- */
.use { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.use-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column;
}
.use-img { aspect-ratio: 10 / 7; overflow: hidden; background: var(--void); }
.use-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s ease; }
.use-card:hover .use-img img { transform: scale(1.045); }
.use-b { padding: 22px 22px 26px; display: grid; gap: 10px; }
.use-b h3 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 1.16rem; letter-spacing: -0.012em; }
.use-b p { margin: 0; font-size: 0.96rem; line-height: 1.58; color: var(--ink-2); }
.use-k {
  font-family: var(--mono); font-size: 0.56rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey);
}
@media (max-width: 900px) { .use { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .use { grid-template-columns: 1fr; } }

.feat { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 3.4vw, 56px); align-items: center; }
.feat-img { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; }
.feat-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 820px) { .feat { grid-template-columns: 1fr; } }

.sizes { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sizes li {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em;
  border: 1px solid var(--line-firm); border-radius: 999px; padding: 9px 16px; white-space: nowrap;
}
.band-dark .sizes li, .on-dark .sizes li { border-color: rgb(var(--paper-rgb) / 0.3); }
.sizes li.big { border-color: var(--gold); color: var(--gold); }
/* document red is too dark to read on the ink field; the brand's light
   accent is the one meant for dark backgrounds */
.band-dark .sizes li.big, .on-dark .sizes li.big { border-color: var(--gold-lt); color: var(--gold-lt); }

/* A light card sitting on a dark band inherits the band's pale text and
   disappears into its own background. Put the ink back. */
.band-dark .card { color: var(--ink); }
.band-dark .card .label { color: var(--grey); }
.band-dark .card .h3 { color: var(--ink); }
.band-dark .card p { color: var(--ink-2); }

/* The venue hero leads on a photograph of the building, taken from the
   street on a wet November morning: a wide, low, three storey elevation under
   a blank white sky. Two things follow from that. The building sits across the
   middle of the frame, so the scrim has to stay off it. The sky is bright, and
   the masthead is white type sitting directly on it, so the top band cannot be
   left clear the way it could over a dark roof. */
.hero.hero-light .hero-img { opacity: 0.94; }
.hero.hero-light::after {
  /* three gradients. The vertical top band carries the masthead, the vertical
     foot carries the headline, and the horizontal shades only the side the
     headline sits on, so the brick keeps its colour through the middle. */
  background:
    linear-gradient(to right,
      rgb(var(--scrim-rgb) / 0.52) 0%,
      rgb(var(--scrim-rgb) / 0.20) 52%,
      rgb(var(--scrim-rgb) / 0.02) 82%),
    linear-gradient(to bottom,
      rgb(var(--scrim-rgb) / 0.46) 0%,
      rgb(var(--scrim-rgb) / 0.14) 24%,
      rgb(var(--scrim-rgb) / 0.06) 44%,
      rgb(var(--scrim-rgb) / 0.30) 68%,
      rgb(var(--scrim-rgb) / 0.80) 100%);
}
/* on a phone the headline sits over the whole frame, so the side shading is
   dropped and the vertical one does the work */
@media (max-width: 700px) {
  .hero.hero-light::after {
    background: linear-gradient(to bottom,
      rgb(var(--scrim-rgb) / 0.44) 0%,
      rgb(var(--scrim-rgb) / 0.22) 22%,
      rgb(var(--scrim-rgb) / 0.34) 54%,
      rgb(var(--scrim-rgb) / 0.88) 100%);
  }
}
/* The elevation is a panorama. On a wide desktop window `cover` would crop its
   ends off and leave a slab of road at the foot, so the framing is pulled up
   towards the roofline and the section is allowed to be shallower than the
   full height hero on the homepage. */
.hero.hero-elevation { min-height: min(78vh, 700px); }
.hero.hero-elevation .hero-img { object-position: 50% 38%; }
@media (max-width: 700px) {
  .hero.hero-elevation { min-height: min(84vh, 720px); }
  .hero.hero-elevation .hero-img { object-position: 50% 42%; }
}

/* A link inside a specification list was invisible: .plainlink carries a
   transparent underline that only appears on hover, and a phone never hovers.
   Give it the same accent rule the room schedule uses. */
.spec a {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--gold);
}
.spec a:hover { background: var(--gold); color: var(--on-accent); }
.band-dark .spec a { border-bottom-color: var(--gold-lt); }

/* ============================================================
   APPLE PASS, 11 September 2026
   A layer appended deliberately at the end, so it wins on order
   without a specificity fight, and so it can be lifted out in one
   piece if it is ever unwanted.

   Three things, applied to every page at once through the shared
   components: Apple's spacing and type discipline, Liquid Glass on
   the controls and the navigation bar, and a responsive pass that
   covers phones and both tablet orientations.
   ============================================================ */

:root {
  /* WAS clamp(84px, 9vw, 148px): 296px of empty page between sections
     on a wide monitor. A viewport unit here runs away on a big screen. */
  --stack: clamp(68px, 6vw, 104px);
  --gutter: clamp(20px, 4.4vw, 56px);
  --r: 18px;
  --r-lg: 26px;
  --r-pill: 999px;
  /* critically damped, no overshoot */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
}

/* ---------- type: tracking is size specific, never one value ---------- */
.h1 {
  font-size: clamp(2.6rem, 6.4vw, 5.3rem);
  font-weight: 620;
  font-stretch: 104%;
  line-height: 1.0;
  letter-spacing: -0.038em;
  font-optical-sizing: auto;
}
.h2 {
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  font-weight: 600;
  font-stretch: 104%;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 0.5em;
}
.h3 {
  font-size: clamp(1.2rem, 1.8vw, 1.46rem);
  font-weight: 580;
  line-height: 1.2;
  letter-spacing: -0.016em;
}
.it { font-weight: 360; }
.lead {
  font-size: clamp(1.05rem, 1.45vw, 1.28rem);
  line-height: 1.55;
  letter-spacing: -0.006em;
  color: rgb(var(--ink-rgb) / 0.76);
  max-width: 54ch;
  text-wrap: pretty;
}
.prose p {
  font-size: 1.0625rem;
  line-height: 1.66;
  color: rgb(var(--ink-rgb) / 0.78);
  max-width: 58ch;
}
/* small text takes a little positive tracking to stay legible */
.label {
  font-family: var(--mono);
  font-size: 0.6563rem;
  font-weight: 560;
  letter-spacing: 0.17em;
  color: rgb(var(--ink-rgb) / 0.5);
}
.band-dark .label, .on-dark .label, .on-glass .label { color: rgb(var(--card-rgb) / 0.5); }

/* ============================================================
   LIQUID GLASS
   Apple keeps glass in the control and navigation layer, never on
   content, and never stacked on more glass. Four parts make the
   material read:
     1. a tint, so the control keeps contrast over any backdrop
     2. a blur and a saturation lift of whatever sits behind it
     3. a specular rim: a bright top edge where light catches
     4. refraction, added by site.js only where the browser can
   ============================================================ */
.glass {
  position: relative;
  isolation: isolate;
  background: rgb(var(--ink-rgb) / 0.82);
  color: var(--card);
  backdrop-filter: blur(16px) saturate(190%);
  -webkit-backdrop-filter: blur(16px) saturate(190%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.42),
    inset 0 0 0 1px rgb(255 255 255 / 0.1),
    inset 0 -6px 14px -8px rgb(255 255 255 / 0.22),
    0 1px 2px rgb(var(--ink-rgb) / 0.2),
    0 12px 28px -10px rgb(var(--ink-rgb) / 0.45);
}
.glass-light {
  background: rgb(255 255 255 / 0.16);
  color: var(--card);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.55),
    inset 0 0 0 1px rgb(255 255 255 / 0.16),
    inset 0 -8px 16px -10px rgb(255 255 255 / 0.3),
    0 1px 2px rgb(0 0 0 / 0.16),
    0 14px 34px -12px rgb(0 0 0 / 0.5);
}
/* a bigger surface reads as thicker material */
.glass-thick {
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
}

/* ---------- pill actions, rebuilt as glass ---------- */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  gap: 0.55em;
  font-weight: 540;
  font-size: 0.9375rem;
  letter-spacing: 0.004em;
  padding: 0.82em 1.4em;
  border: 0;
  border-radius: var(--r-pill);
  background: rgb(var(--ink-rgb) / 0.82);
  color: var(--card);
  backdrop-filter: blur(16px) saturate(190%);
  -webkit-backdrop-filter: blur(16px) saturate(190%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.42),
    inset 0 0 0 1px rgb(255 255 255 / 0.1),
    inset 0 -6px 14px -8px rgb(255 255 255 / 0.22),
    0 1px 2px rgb(var(--ink-rgb) / 0.2),
    0 12px 28px -10px rgb(var(--ink-rgb) / 0.45);
  /* Emil Kowalski's value: press feedback at 160ms, scale 0.97 */
  transition: transform 160ms ease-out, box-shadow 0.4s var(--ease), background 0.3s var(--ease-soft);
  will-change: transform;
}
.btn:hover { background: rgb(var(--ink-rgb) / 0.88); color: var(--card); }
.btn:active { transform: scale(0.97); }
/* the arrow was a filled circle; on glass it becomes the mark itself */
.btn .arw {
  width: 15px; height: 15px;
  background: none;
  border-radius: 0;
  color: inherit;
  transition: transform 0.34s var(--ease);
}
.btn .arw svg { width: 15px; height: 15px; }
.btn:hover .arw { transform: translateX(3px); }
/* the sheen: a highlight that tracks the pointer across the surface,
   which is what sells a curved glass rather than a flat translucent pill */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(18ch circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / 0.34), transparent 60%);
  transition: opacity 0.42s var(--ease);
}
.btn:hover::after { opacity: 1; }

.btn-light {
  background: rgb(255 255 255 / 0.16);
  border: 0;
  color: var(--card);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.55),
    inset 0 0 0 1px rgb(255 255 255 / 0.16),
    inset 0 -8px 16px -10px rgb(255 255 255 / 0.3),
    0 1px 2px rgb(0 0 0 / 0.16),
    0 14px 34px -12px rgb(0 0 0 / 0.5);
}
.btn-light:hover { background: rgb(255 255 255 / 0.24); color: var(--card); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: inset 0 0 0 1px rgb(var(--ink-rgb) / 0.2);
}
.btn-ghost:hover { background: rgb(var(--ink-rgb) / 0.05); color: var(--ink); }
.btn-ghost .arw { color: var(--ink); }
.btn-plain {
  padding: 0.6em 0;
  border: 0;
  border-radius: 0;
  font-weight: 500;
  font-size: 0.9375rem;
  color: rgb(var(--ink-rgb) / 0.68);
  background: none;
  transition: color 0.22s var(--ease-soft), transform 160ms ease-out;
}
.btn-plain:hover { background: none; color: var(--ink); border: 0; }
.btn-plain:active { transform: scale(0.97); }
.on-dark .btn-plain, .on-glass .btn-plain { border: 0; color: rgb(var(--card-rgb) / 0.76); }
.on-dark .btn-plain:hover, .on-glass .btn-plain:hover { background: none; color: var(--card); }
.btn-row { gap: 14px 20px; }

/* ---------- masthead: a floating glass bar, on every page ---------- */
.masthead {
  inset: 12px 12px auto;
  border-radius: var(--r-pill);
  background: rgb(var(--paper-rgb) / 0.6);
  color: var(--ink);
  backdrop-filter: blur(26px) saturate(190%);
  -webkit-backdrop-filter: blur(26px) saturate(190%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.72),
    inset 0 0 0 1px rgb(var(--ink-rgb) / 0.07),
    0 1px 2px rgb(var(--ink-rgb) / 0.06),
    0 12px 30px -14px rgb(var(--ink-rgb) / 0.34);
  transition: background 0.4s var(--ease-soft), box-shadow 0.4s var(--ease-soft);
}
/* the sticky variant floats too, and keeps the document flow, so no page
   needs a spacer adding to the top of its content */
.masthead.plain {
  position: sticky;
  inset: auto;
  top: 12px;
  margin: 12px 12px 0;
  background: rgb(var(--paper-rgb) / 0.6);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.72),
    inset 0 0 0 1px rgb(var(--ink-rgb) / 0.07),
    0 1px 2px rgb(var(--ink-rgb) / 0.06),
    0 12px 30px -14px rgb(var(--ink-rgb) / 0.34);
}
/* the bar is now its own light surface, so it no longer inverts over a photo */
.masthead.over, .masthead.stuck { color: var(--ink); background: rgb(var(--paper-rgb) / 0.6); }
.masthead.over .btn, .masthead.stuck .btn {
  background: rgb(var(--ink-rgb) / 0.82);
  border: 0;
  color: var(--card);
  backdrop-filter: blur(16px) saturate(190%);
  -webkit-backdrop-filter: blur(16px) saturate(190%);
}
.masthead.over .btn:hover, .masthead.stuck .btn:hover { background: rgb(var(--ink-rgb) / 0.88); color: var(--card); }
.masthead.over .wm-bar, .masthead.stuck .wm-bar { fill: var(--gold); }
.masthead-in {
  max-width: var(--max);
  margin-inline: auto;
  min-height: 56px;
  padding: 8px 10px 8px clamp(16px, 2vw, 24px);
  gap: clamp(14px, 2.4vw, 34px);
}
.masthead .btn { padding: 0.72em 1.2em; font-size: 0.9063rem; }
.masthead .btn .arw { width: 14px; height: 14px; }
.nav { gap: clamp(12px, 1.8vw, 26px); margin-inline: auto; }
.nav a {
  font-size: 0.9063rem;
  font-weight: 480;
  border-bottom: 0;
  padding: 6px 2px;
  color: rgb(var(--ink-rgb) / 0.7);
  transition: color 0.22s var(--ease-soft);
}
.nav a:hover { color: var(--ink); border-bottom: 0; }
.nav a[aria-current="page"] { color: var(--ink); border-bottom: 0; box-shadow: 0 1.5px 0 var(--gold); }

/* ---------- service cards: a strip, not a half screen of wallpaper ---------- */
.svc-card > picture, .svc-shot { aspect-ratio: 16 / 7; position: relative; overflow: hidden; }
.svc-card > picture img, .svc-shot img { width: 100%; height: 100%; object-fit: cover; }
.svc-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 7px; }
.svc-list li {
  position: relative;
  padding-left: 1.15em;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgb(var(--ink-rgb) / 0.76);
}
.svc-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.56em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
}
.svc-tag {
  position: absolute;
  left: 12px; bottom: 12px;
  z-index: 2;
  border-radius: var(--r-pill);
  padding: 5px 11px;
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* ---------- the record card: a photograph that carries evidence ----------
   Used wherever a picture would otherwise stand on its own saying nothing. */
.shotcard { position: relative; border-radius: var(--r-lg); overflow: hidden; isolation: isolate; margin: 0; }
.shotcard > picture img { width: 100%; height: clamp(340px, 42vw, 500px); object-fit: cover; }
.shotcard::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgb(var(--void-rgb) / 0.72) 0%, rgb(var(--void-rgb) / 0.1) 46%, transparent 70%);
}
.record { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; border-radius: var(--r); padding: 16px 18px 14px; }
.record-top {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-family: var(--mono); font-size: 0.5938rem; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: rgb(var(--card-rgb) / 0.68); margin-bottom: 12px;
}
.record-top .stamp { color: var(--gold-lt); }
.rec-line {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: baseline;
  padding: 8px 0; border-top: 1px solid rgb(255 255 255 / 0.12);
}
.rec-line:first-of-type { border-top: 0; }
.rec-where {
  font-family: var(--mono); font-size: 0.5938rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgb(var(--card-rgb) / 0.6); min-width: 64px;
}
.rec-what { margin: 0; font-size: 0.875rem; line-height: 1.45; color: rgb(var(--card-rgb) / 0.94); }
.rec-ref { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.08em; color: var(--gold-lt); white-space: nowrap; }
.record-foot {
  margin: 12px 0 0; padding-top: 11px; border-top: 1px solid rgb(255 255 255 / 0.12);
  font-family: var(--mono); font-size: 0.5313rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgb(var(--card-rgb) / 0.52);
}
/* a strip of plain facts under a hero, instead of a decorative flourish */
.hero-meta {
  margin-top: clamp(26px, 3vw, 40px); padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  font-family: var(--mono); font-size: 0.625rem; font-weight: 560; letter-spacing: 0.13em;
  text-transform: uppercase; color: rgb(var(--ink-rgb) / 0.52);
}
.hero-meta b { color: var(--ink); font-weight: 620; }

/* ---------- the areas list: one sentence, not a grid of boxes ---------- */
.areas {
  display: block;
  margin: 0; padding: 0; list-style: none;
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  line-height: 1.62;
  color: rgb(var(--ink-rgb) / 0.72);
  max-width: 70ch;
}
.areas li { display: inline; border: 0; padding: 0; background: none; }
/* ordinary spaces rather than margins, so a line can break on the separator
   and nothing overhangs the gutter on a narrow screen */
.areas li:not(:last-child)::after { content: ' \00b7 '; color: rgb(var(--ink-rgb) / 0.3); }

/* ============================================================
   RESPONSIVE PASS: phones and both tablet orientations
   ============================================================ */

/* tablet portrait, and small laptops */
@media (max-width: 1024px) {
  .masthead-in { padding-right: 8px; }
  .split { gap: clamp(30px, 4vw, 52px); }
}

/* the navigation collapses to a scrolling rail inside the glass bar */
@media (max-width: 940px) {
  .masthead { inset: 10px 10px auto; }
  .masthead.plain { margin: 10px 10px 0; top: 10px; }
  .masthead-in { padding: 8px 8px 0 16px; }
  .nav {
    width: auto;
    margin-inline: 0;
    margin-top: 10px;
    padding: 8px 16px 6px;
    border-top: 1px solid rgb(var(--ink-rgb) / 0.1);
  }
  .masthead.over .nav { border-color: rgb(var(--ink-rgb) / 0.1); }
  .nav a { font-size: 0.875rem; }
  .shotcard > picture img { height: clamp(300px, 52vw, 420px); }
}

/* phones */
@media (max-width: 640px) {
  :root { --stack: clamp(56px, 12vw, 76px); }
  .masthead { inset: 8px 8px auto; }
  .masthead.plain { margin: 8px 8px 0; top: 8px; }
  .masthead .btn { padding: 0.68em 1em; font-size: 0.8438rem; }
  .h1 { font-size: clamp(2.1rem, 9.4vw, 3rem); letter-spacing: -0.03em; }
  .h2 { font-size: clamp(1.65rem, 7vw, 2.2rem); letter-spacing: -0.024em; }
  .lead { font-size: 1.0313rem; }
  .btn-row { gap: 12px 16px; }
  .record { left: 10px; right: 10px; bottom: 10px; padding: 13px 14px 12px; }
  .rec-line { grid-template-columns: auto 1fr; row-gap: 2px; }
  .rec-ref { grid-column: 2; justify-self: start; }
  .rec-what { font-size: 0.8125rem; }
  .shotcard > picture img { height: clamp(280px, 64vw, 360px); }
  .hero-meta { gap: 6px 18px; font-size: 0.5625rem; }
}

/* very small phones, and anything with the text size turned up */
@media (max-width: 380px) {
  :root { --gutter: 16px; }
  .h1 { font-size: 1.95rem; }
  .rec-where { min-width: 0; }
}

/* tablets held in landscape: keep three columns, they have the width for it */
@media (min-width: 700px) and (max-width: 1024px) and (orientation: landscape) {
  .svc, .svc-three { grid-template-columns: repeat(3, 1fr); }
  .latest { grid-template-columns: repeat(3, 1fr); }
}

/* a coarse pointer has no hover, so never hide anything behind one */
@media (hover: none) {
  .btn::after { display: none; }
  .btn:hover { background: rgb(var(--ink-rgb) / 0.82); }
  .svc-card:hover .svc-shot img, .latest-card:hover .latest-shot img { transform: none; }
}

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn:active, .btn-plain:active { transform: none; }
  .btn .arw, .btn::after { transition: none; }
}
/* Glass is the first thing to go when transparency is turned down. The
   !important is deliberate: site.js writes backdrop-filter as an inline style
   for the refraction, and an inline style would otherwise beat this rule. */
@media (prefers-reduced-transparency: reduce) {
  .masthead, .masthead.plain, .masthead.over, .masthead.stuck {
    background: var(--paper);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .glass, .btn {
    background: var(--ink);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .glass-light, .btn-light { background: rgb(var(--void-rgb) / 0.94); }
  .btn::after { display: none; }
}
@media (prefers-contrast: more) {
  .masthead, .masthead.plain { background: var(--paper); backdrop-filter: none !important; box-shadow: 0 0 0 1px rgb(var(--ink-rgb) / 0.4); }
  .glass, .btn { background: var(--void); backdrop-filter: none !important; }
  .lead, .prose p, .svc-list li, .nav a { color: var(--ink); }
}

/* ---------- corrections to earlier rules, kept with the Apple layer ----------
   The stylesheet already had a phone block at 820px that let the masthead
   scroll away, because the bar is two rows tall on a phone and a pinned one
   eats a third of the screen. The Apple layer above re-pinned it, so the
   original intent is restored here, and the bar keeps its glass. */
@media (max-width: 820px) {
  .masthead { position: absolute; }
  .masthead.plain { position: static; margin: 10px 10px 0; }
  /* the bar is its own light surface now, so it never inverts over a photo */
  .masthead.over.stuck, .masthead.over {
    background: rgb(var(--paper-rgb) / 0.68);
    color: var(--ink);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.72),
      inset 0 0 0 1px rgb(var(--ink-rgb) / 0.07),
      0 12px 30px -14px rgb(var(--ink-rgb) / 0.34);
  }
  .masthead.over.stuck .btn, .masthead.over .btn {
    background: rgb(var(--ink-rgb) / 0.82);
    border: 0;
    color: var(--card);
  }
  .masthead.over .wm-bar, .masthead.over.stuck .wm-bar { fill: var(--gold); }
  /* the hero no longer sits under a pinned bar, so it needs less top room */
  .hero-in { padding-block: 128px clamp(36px, 6vw, 56px); }
}

/* ============================================================
   APPLE PASS, part two: the components the new homepage uses.
   Kept with the layer so the whole pass lifts out together.
   ============================================================ */

/* the areas list was a four column rule-ruled grid; it is one sentence now */
.areas { columns: auto; column-gap: normal; }
.areas li { padding: 0; border-bottom: 0; font-size: inherit; break-inside: auto; }

/* ---------- hero ---------- */
.hero-apple { padding-block: clamp(56px, 7vw, 96px) 0; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(34px, 4.5vw, 72px);
  align-items: center;
}
.hero-apple .lead { margin-top: clamp(20px, 2.2vw, 28px); max-width: 52ch; }
.hero-apple .btn-row { margin-top: clamp(24px, 3vw, 34px); }
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ---------- service cards, as white cards with an image strip ---------- */
.svc-apple { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 940px) { .svc-apple { grid-template-columns: 1fr; } }
.svc-apple .svc-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 1px 2px rgb(var(--ink-rgb) / 0.05), 0 12px 30px -16px rgb(var(--ink-rgb) / 0.18);
  transition: transform 160ms ease-out, box-shadow 0.44s var(--ease);
  will-change: transform;
}
.svc-apple .svc-card::before { display: none; }
.svc-apple .svc-card:hover { box-shadow: 0 2px 4px rgb(var(--ink-rgb) / 0.06), 0 22px 48px -18px rgb(var(--ink-rgb) / 0.26); }
.svc-apple .svc-card:active { transform: scale(0.985); }
.svc-apple .svc-shot { position: relative; overflow: hidden; aspect-ratio: 16 / 7; }
.svc-apple .svc-card img {
  position: static;
  z-index: auto;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.72s var(--ease);
}
.svc-apple .svc-card:hover img { transform: scale(1.04); }
.svc-apple .svc-in {
  position: static;
  height: auto;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(20px, 2.1vw, 26px);
}
.svc-apple .svc-in > p {
  margin: 0 0 16px;
  font-size: 0.9688rem;
  line-height: 1.55;
  color: rgb(var(--ink-rgb) / 0.68);
  max-width: none;
}
.svc-more {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.9063rem;
  font-weight: 540;
  color: var(--gold);
}
.svc-more svg { width: 14px; height: 14px; transition: transform 0.34s var(--ease); }
.svc-apple .svc-card:hover .svc-more svg { transform: translateX(4px); }

/* ---------- the closing band ---------- */
.cta-apple {
  position: relative;
  isolation: isolate;
  color: var(--card);
  overflow: hidden;
  padding-block: clamp(56px, 6vw, 88px);
}
.cta-apple > picture img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.cta-apple::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgb(var(--void-rgb) / 0.88), rgb(var(--void-rgb) / 0.6));
}
.cta-in {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) auto;
  gap: clamp(26px, 4vw, 60px);
  align-items: center;
}
.cta-apple .h2 { margin-bottom: 0.35em; }
.cta-apple .lead { color: rgb(var(--card-rgb) / 0.82); max-width: 46ch; }
@media (max-width: 860px) { .cta-in { grid-template-columns: 1fr; gap: 26px; } }

/* ---------- the scan position scrub ----------
   Direct manipulation: one to one tracking, a velocity handoff, momentum
   projection to the landing scan point, and rubber banding at both ends. */
.scrub { position: relative; }
.scrub .plan .cam { fill: rgb(var(--card-rgb) / 0.34); transition: fill 0.3s var(--ease-soft); }
.scrub .plan .cam-halo {
  fill: none;
  stroke: var(--gold-lt);
  stroke-width: 1.4;
  opacity: 0;
  animation: none;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.6);
  transition: opacity 0.34s var(--ease), transform 0.44s var(--ease);
}
.scrub .scan-live .cam { fill: var(--gold-lt); }
.scrub .scan-live .cam-halo { opacity: 0.9; transform: scale(1.9); }
.scrub-ui { margin-top: clamp(18px, 2.2vw, 26px); }
.scrub-read {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  font-family: var(--mono); font-size: 0.5938rem; font-weight: 560; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgb(var(--card-rgb) / 0.52); margin-bottom: 14px;
}
.scrub-read strong { color: var(--card); font-weight: 620; }
.scrub-track {
  position: relative; height: 42px;
  display: flex; align-items: center;
  cursor: grab; touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}
.scrub-track:active { cursor: grabbing; }
.scrub-rail { position: absolute; inset: 50% 0 auto; height: 2px; transform: translateY(-50%); background: rgb(var(--card-rgb) / 0.18); border-radius: 2px; }
.scrub-fill { position: absolute; inset: 50% auto auto 0; height: 2px; transform: translateY(-50%); background: var(--gold-lt); border-radius: 2px; width: 0; }
.scrub-stop {
  position: absolute; top: 50%;
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: rgb(var(--card-rgb) / 0.26);
  transition: background 0.3s var(--ease-soft), transform 0.3s var(--ease);
}
.scrub-stop.on { background: var(--gold-lt); transform: scale(1.3); }
.scrub-handle {
  position: absolute; top: 50%; left: 0;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%;
  display: grid; place-items: center;
  will-change: transform;
}
.scrub-handle::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-lt); }
.scrub-hint {
  margin-top: 12px;
  font-family: var(--mono); font-size: 0.5313rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgb(var(--card-rgb) / 0.34);
}

/* the sequence: a scroll snap rail on a phone, which carries real momentum */
@media (max-width: 880px) {
  .seq {
    grid-template-columns: repeat(4, 72vw);
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .seq::-webkit-scrollbar { display: none; }
  .seq-step { scroll-snap-align: start; }
}

/* The site sets its body copy in the serif, which is the house style and
   stays. These are interface and document elements rather than prose, so
   they take the display face, as they did in the approved preview. */
.rec-what, .svc-list li, .svc-apple .svc-in > p, .svc-more,
.hero-meta, .scrub-read, .scrub-hint, .areas, .btn, .nav a { font-family: var(--display); }

/* On a phone the record card is taller than the photograph it sits on, so
   overlaying it clipped the first line. It stacks below the picture instead:
   the same card, fully legible, and the photograph stays uncropped. */
@media (max-width: 640px) {
  .shotcard { display: flex; flex-direction: column; background: var(--void); }
  .shotcard::after { display: none; }
  .shotcard > picture img { height: clamp(190px, 44vw, 250px); }
  .record {
    position: static;
    left: auto; right: auto; bottom: auto;
    border-radius: 0;
    padding: 16px 16px 14px;
    background: var(--void);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
}

/* The old section opener is a flex row: a label at one end, an italic aside
   at the other, divided by a hairline. The Apple pass puts a heading inside it
   instead, so where one is present the opener stacks and drops the rule. */
.sec-head:has(.h2) {
  display: block;
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: clamp(34px, 3.6vw, 54px);
  max-width: 64ch;
}
.sec-head:has(.h2) .label { display: block; margin-bottom: 0.95em; color: rgb(var(--ink-rgb) / 0.5); }
.band-dark .sec-head:has(.h2) .label, .on-glass .sec-head:has(.h2) .label { color: rgb(var(--card-rgb) / 0.5); }
.sec-head:has(.h2) .h2 { margin-bottom: 0; }

/* ---------- blog cover: a fixed frame rather than whatever the file is ----------
   Every post then has the same shaped cover, and a tall or square photograph
   cannot take over the screen. */
.post-cover img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  height: auto;
}
@media (max-width: 640px) {
  /* a 16:9 letterbox is too thin to read on a phone, 4:3 holds the subject */
  .post-cover img { aspect-ratio: 4 / 3; }
}

/* ============================================================
   MOBILE TIDY UP, 11 September 2026
   Michael's note: symmetrical, well laid out, captions aligned,
   and no cramped or oversized gaps on a phone.
   ============================================================ */

/* The original section opener is a two column row: a label at one end and an
   italic aside at the other, right aligned. On a phone there is not enough
   width for two columns, so the label breaks mid phrase and the aside wraps
   to three ragged right aligned lines. It stacks instead, both left aligned,
   which is what makes a narrow column read as deliberate. */
@media (max-width: 720px) {
  .sec-head {
    display: block;
    padding-bottom: 12px;
    margin-bottom: clamp(22px, 5vw, 32px);
  }
  .sec-head .label { display: block; margin-bottom: 7px; }
  .sec-head em {
    display: block;
    text-align: left;
    font-size: 0.98rem;
    line-height: 1.45;
    max-width: 42ch;
  }
}

/* The reading line orphaned its last word on a narrow screen. */
@media (max-width: 640px) {
  .post-meta { font-size: 0.68rem; letter-spacing: 0.1em; text-wrap: balance; }
  /* the caption sits on the same left edge as the article, and holds a
     comfortable measure rather than running the full width */
  .post-cover figcaption { margin-top: 12px; font-size: 0.86rem; line-height: 1.5; }
}

/* the footer base was a wrapping row of four items plus the legal line, which
   on a phone reads as a jumble. One item per line, left aligned, even spacing. */
@media (max-width: 560px) {
  .foot-base { display: grid; gap: 8px; }
  .foot-base .foot-legal { margin-top: 8px; }
  .foot-top { gap: 30px; }
}

/* A centred caption under a wide image reads as deliberate on a desktop. On a
   phone it becomes three ragged centred lines sitting under left aligned body
   copy, which is the mismatch. Captions align left on a phone, like everything
   else, and every caption on the site then shares one edge. */
@media (max-width: 720px) {
  .loop figcaption,
  .tourdemo figcaption,
  .post-cover figcaption,
  figure > figcaption {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    max-width: 52ch;
  }
}

/* ============================================================
   MOBILE MASTHEAD, 11 September 2026
   Michael's report: the quote button sits outside the bar and the
   menu runs off the edge.

   Two causes, both measured:
   1. The bar is a pill (999px radius). On one row that is right. On a
      phone it is two rows and 123px tall, so the browser caps the
      radius at half the height and each end becomes a 61px semicircle.
      At the top edge of the button that curve has already pulled 31px
      inward, so the button was genuinely outside the shape. A two row
      bar takes a rounded rectangle instead.
   2. The menu was a horizontal scroller with 119px hidden off the
      right, which reads as broken rather than scrollable. It wraps
      now, so every item is visible and nothing is cut mid word.
   ============================================================ */
@media (max-width: 940px) {
  .masthead, .masthead.plain, .masthead.over, .masthead.stuck {
    border-radius: 26px;
  }
  .masthead-in {
    /* was 16px left against 8px right, which is the misalignment */
    padding: 11px 14px;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
  }
  .nav {
    order: 3;
    width: 100%;
    margin: 11px 0 0;
    padding: 10px 0 1px;
    border-top: 1px solid rgb(var(--ink-rgb) / 0.1);
    overflow-x: visible;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px 18px;
  }
  .masthead.over .nav, .masthead.stuck .nav { border-color: rgb(var(--ink-rgb) / 0.1); }
  .nav a { padding: 3px 0; }
  /* the wordmark is wide at 0.24em tracking, and it has to share the row
     with the button, so it gives a little back on a narrow screen */
  .wordmark { font-size: 0.96rem; letter-spacing: 0.2em; }
  .masthead .btn { padding: 0.7em 1.05em; font-size: 0.875rem; white-space: nowrap; }
}

@media (max-width: 400px) {
  .masthead-in { padding: 10px 12px; }
  .wordmark { font-size: 0.88rem; letter-spacing: 0.17em; gap: 0.5em; }
  .masthead .btn { padding: 0.68em 0.95em; font-size: 0.8125rem; }
  .nav { gap: 4px 15px; }
  .nav a { font-size: 0.8438rem; }
}

/* The phone masthead is two rows plus a wrapped menu, so a photo hero that it
   floats over needs to start below it rather than 5px under its edge. */
@media (max-width: 820px) {
  .hero-in { padding-block: 196px clamp(36px, 6vw, 56px); }
  .hero-page .hero-in { padding-block: 190px clamp(30px, 5vw, 46px); }
}
@media (max-width: 400px) {
  .hero-in { padding-block: 186px clamp(32px, 6vw, 48px); }
  .hero-page .hero-in { padding-block: 180px clamp(28px, 5vw, 42px); }
}

/* The hero clears the bar by measurement rather than by a guessed number per
   breakpoint. site.js publishes the bar's real height as --bar-h; the fallback
   covers the moment before script runs, and the case where it never does. */
@media (max-width: 820px) {
  .hero-in { padding-block: calc(var(--bar-h, 160px) + 34px) clamp(36px, 6vw, 56px); }
  .hero-page .hero-in { padding-block: calc(var(--bar-h, 160px) + 28px) clamp(30px, 5vw, 46px); }
}
@media (max-width: 400px) {
  .hero-in { padding-block: calc(var(--bar-h, 170px) + 28px) clamp(32px, 6vw, 48px); }
  .hero-page .hero-in { padding-block: calc(var(--bar-h, 170px) + 24px) clamp(28px, 5vw, 42px); }
}

/* Below 360px the wordmark and the button no longer fit on one row at the
   sizes above, and the button was dropping to a line of its own. Both give a
   little more back so the first row stays a single, balanced line. */
@media (max-width: 360px) {
  .masthead-in { padding: 10px 11px; gap: 8px; }
  .wordmark { font-size: 0.8rem; letter-spacing: 0.12em; gap: 0.45em; }
  .wm-mark { width: 1.45em; height: 1.45em; }
  .masthead .btn { padding: 0.66em 0.8em; font-size: 0.7813rem; gap: 0.4em; }
  .masthead .btn .arw { width: 12px; height: 12px; }
  .nav { gap: 3px 13px; }
  .nav a { font-size: 0.8125rem; }
}

/* The single row bar has the same geometry problem as the phone one, smaller.
   It is a 61px tall pill, so each end is a 30px semicircle, and at the top edge
   of the button that curve has already pulled in 9.9px. The button sat 8px from
   the edge, so it clipped the corner by about 2px. Equal 16px insets clear it
   and make the two ends symmetrical. */
@media (min-width: 941px) {
  .masthead-in { padding: 8px 16px; }
}
@media (min-width: 941px) and (max-width: 1024px) {
  .masthead-in { padding: 8px 16px; }
}

/* ============================================================
   MENU, BUTTON COLOUR AND THE FACILITIES CARD, 11 September 2026
   ============================================================ */

/* THE MENU.
   One line was tested first and rejected on measurement: with the six live
   items it fits at 393px with 3px to spare, and fails at 375px and below. A
   layout that depends on the exact phone is not uniform. Three equal columns
   are: the items align vertically as well as horizontally, nothing is ever
   clipped, and it still works if a seventh item is added back. */
@media (max-width: 640px) {
  .nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 11px 12px;
    align-items: start;
    padding: 12px 0 3px;
  }
  .nav a { padding: 0; line-height: 1.3; }
}

/* THE PRIMARY BUTTON takes the mark's own red, so the call to action and the
   bar in the logo are the same colour. White on this red measures 5.66:1,
   which clears the 4.5:1 needed for normal text. */
:root { --accent-rgb: 180 64 44; }
.btn {
  background: rgb(var(--accent-rgb) / 0.9);
  color: var(--card);
}
.btn:hover { background: rgb(var(--accent-rgb) / 0.97); color: var(--card); }
.masthead .btn,
.masthead.over .btn,
.masthead.stuck .btn { background: rgb(var(--accent-rgb) / 0.9); color: var(--card); }
.masthead .btn:hover,
.masthead.over .btn:hover,
.masthead.stuck .btn:hover { background: rgb(var(--accent-rgb) / 0.97); color: var(--card); }
/* the arrow was the accent on an ink pill; on an accent pill it is the paper */
.btn .arw { color: var(--card); }
/* the outlined and light variants are unchanged: two reds on one row would
   fight, and the light pill exists to sit on a photograph */
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: rgb(var(--ink-rgb) / 0.05); color: var(--ink); }
.btn-ghost .arw { color: var(--ink); }
.btn-light { background: rgb(255 255 255 / 0.16); color: var(--card); }
.btn-light:hover { background: rgb(255 255 255 / 0.24); color: var(--card); }
@media (prefers-reduced-transparency: reduce) {
  .btn, .masthead .btn { background: rgb(var(--accent-rgb)); }
  .btn-light { background: rgb(var(--void-rgb) / 0.94); }
}
@media (prefers-contrast: more) {
  .btn, .masthead .btn { background: rgb(var(--accent-rgb)); }
}

/* The category tag sits on whatever the photograph happens to be. A light
   translucent surface over a bright photograph is Apple's own worst case for
   legibility, so the tag carries a dark tint of its own and stops depending on
   the picture behind it. */
.svc-tag, .svc-tag.glass, .svc-tag.glass-light {
  background: rgb(var(--void-rgb) / 0.58);
  color: var(--card);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.3),
    inset 0 0 0 1px rgb(255 255 255 / 0.12),
    0 2px 8px -2px rgb(0 0 0 / 0.4);
}
@media (prefers-reduced-transparency: reduce) {
  .svc-tag, .svc-tag.glass, .svc-tag.glass-light { background: rgb(var(--void-rgb) / 0.92); }
}

/* ============================================================
   THE SPECIMEN REGISTER ROWS
   Defect I introduced on 11 September and did not catch: the new
   homepage markup uses .sheet-row divs, but the stylesheet only
   ever styled the old TABLE version of this component, so the
   three rows have been rendering as unstyled stacked blocks. The
   rules the markup expects are written here.
   ============================================================ */
.sheet-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: baseline;
  padding: 15px 22px;
  border-bottom: 1px solid var(--line);
}
.sheet-row:last-of-type { border-bottom: 0; }
.sheet-sys {
  font-family: var(--mono);
  font-size: 0.5938rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--ink-rgb) / 0.5);
  min-width: 62px;
}
.sheet-row p {
  margin: 0;
  max-width: none;
  font-family: var(--display);
  font-size: 0.9063rem;
  line-height: 1.5;
  color: rgb(var(--ink-rgb) / 0.8);
}
.sheet-ok {
  font-family: var(--mono);
  font-size: 0.5938rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gold);
  white-space: nowrap;
}
/* the foot is a single caption here, not the two column signature block */
.sheet figcaption.sheet-foot {
  display: block;
  padding: 14px 22px 16px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--ink-rgb) / 0.44);
  background: rgb(var(--ink-rgb) / 0.025);
}
@media (max-width: 560px) {
  .sheet-row { grid-template-columns: auto minmax(0, 1fr); row-gap: 4px; padding: 13px 16px; }
  .sheet-ok { grid-column: 2; justify-self: start; }
  .sheet-head, .sheet figcaption.sheet-foot { padding-inline: 16px; }
}

/* ============================================================
   TOUR CONSENT FACADE, 12 September 2026
   The Kuula viewer can set cookies and load analytics, so under
   PECR it may not load until the visitor asks for it. The facade
   holds the same 16:9 box, so nothing shifts when the tour opens.
   ============================================================ */
.tourdemo-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tourdemo-face { z-index: 1; }
.tourdemo-note a { color: inherit; border-bottom-color: rgb(var(--paper-rgb) / 0.4); }
.tourdemo-note { color: rgb(var(--paper-rgb) / 0.72); }
@media (max-width: 560px) {
  .tourdemo-frame:not(.is-live) { aspect-ratio: 4 / 5; }
}

/* ============================================================
   FREE FIRST INVENTORY, 18 September 2026. The one offer on the
   site, so it is allowed to be loud: a pill in the hero and a dark
   band straight after it.
   ============================================================ */
.offer-pill {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 22px; padding: 9px 16px 9px 13px;
  border-radius: 999px; background: var(--gold); color: var(--on-accent);
  font-family: var(--display); font-size: 0.86rem; font-weight: 560; letter-spacing: 0.01em;
  text-decoration: none; box-shadow: 0 6px 18px rgb(180 64 44 / 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.offer-pill:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgb(180 64 44 / 0.3); }
.offer-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--on-accent); flex: none; }
.offer .offer-tag {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-lt); margin: 0 0 16px;
}
.offer .offer-h { font-size: clamp(2.3rem, 5.2vw, 4.2rem); line-height: 1.02; margin: 0; }
.offer .offer-h .it { color: var(--gold-lt); }
.offer .lead + .lead { margin-top: 14px; }
.offer-terms { margin: 22px 0 0; font-size: 0.86rem; color: rgb(var(--paper-rgb) / 0.62); max-width: 56ch; }
.offer-terms a { color: inherit; }
@media (prefers-reduced-motion: reduce) { .offer-pill { transition: none; } .offer-pill:hover { transform: none; } }
/* Services page: inventories get the full width card, the other two sit below as a pair. */
.svc-apple.svc-one { grid-template-columns: 1fr; }
.svc-apple.svc-pair { grid-template-columns: 1fr 1fr; }
.svc-one .svc-shot { aspect-ratio: 16 / 6; }
.svc-one .h2 { margin: 6px 0 14px; }
@media (max-width: 940px) { .svc-apple.svc-pair { grid-template-columns: 1fr; } .svc-one .svc-shot { aspect-ratio: 16 / 9; } }
.hero-apple + .promise-band { margin-top: clamp(24px, 3vw, 44px); }

/* The three promises agents buy on: loud numerals, one line each. */
.promise-band { padding: clamp(36px, 4.6vw, 64px) 0; }
.promise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.promise-item {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(24px, 2.6vw, 36px); border-top: 4px solid var(--gold);
}
.promise-big {
  display: block; font-family: var(--display); font-weight: 600; letter-spacing: -0.03em;
  font-size: clamp(2.4rem, 4.4vw, 3.6rem); line-height: 1; color: var(--gold);
}
.promise-what { margin: 14px 0 6px; font-family: var(--display); font-weight: 560; font-size: 1.06rem; color: var(--ink); }
.promise-why { margin: 0; font-size: 0.96rem; color: var(--ink-2); }
@media (max-width: 800px) { .promise { grid-template-columns: 1fr; } }

/* ============================================================
   MOBILE MENU AS BUTTONS, 19 September 2026
   Michael asked for the phone menu as buttons, auto scrolling, and
   working on every device including the new foldable iPhones.

   - Each link is a pill button with a 44px tap target (Apple minimum).
   - One row that scrolls sideways. The earlier row read as broken
     because it was cut mid word with no cue; now the edges fade, the
     rail snaps to whole buttons, and site.js scrolls the current page's
     button into view and gives one short peek so the rest is found.
   - Widths are fluid, so a folded cover screen (narrow) and an
     unfolded inner screen (wide) both get the right layout; at wider
     widths the buttons simply all fit and nothing scrolls.
   - Safe areas are honoured for notches, the Dynamic Island and
     rounded corners in landscape (viewport-fit=cover on every page).
   ============================================================ */
@media (max-width: 940px) {
  .nav {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 2px;
    scrollbar-width: none;
    padding: 10px 2px 2px;
    margin: 10px 0 0;
    width: 100%;
    --fade-l: 0px;
    --fade-r: 28px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav.is-mid { --fade-l: 22px; }
  .nav.is-end { --fade-l: 22px; --fade-r: 0px; }
  .nav.fits { --fade-l: 0px; --fade-r: 0px; }

  .nav a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 0 17px;
    border-radius: 999px;
    border: 1px solid rgb(var(--ink-rgb) / 0.16);
    background: rgb(var(--card-rgb) / 0.92);
    color: var(--ink);
    font-size: 0.9063rem;
    font-weight: 520;
    line-height: 1;
    white-space: nowrap;
    scroll-snap-align: start;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background 0.18s var(--ease-soft), color 0.18s var(--ease-soft), transform 0.12s var(--ease-soft);
  }
  .nav a:hover { color: var(--ink); }
  .nav a:active { transform: scale(0.96); background: rgb(var(--ink-rgb) / 0.08); }
  .nav a[aria-current="page"] {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--card);
    box-shadow: none;
  }
  /* the one accent: a small document red mark on the page you are on */
  .nav a[aria-current="page"]::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 1px;
    background: var(--gold-lt);
  }
  .nav a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
}

@media (max-width: 400px) {
  .nav { gap: 6px; }
  .nav a { padding: 0 14px; font-size: 0.875rem; }
}
/* smallest folded cover screens, down to 280px wide */
@media (max-width: 320px) {
  .nav a { padding: 0 12px; font-size: 0.8438rem; }
  .masthead .btn .arw { display: none; }
}

/* notches, the Dynamic Island and rounded corners, in either orientation */
@supports (padding: max(0px)) {
  @media (max-width: 940px) {
    .masthead { left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); }
    .masthead.plain { margin-left: max(8px, env(safe-area-inset-left)); margin-right: max(8px, env(safe-area-inset-right)); }
  }
  .wrap { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
}

@media (prefers-reduced-motion: reduce) {
  .nav a { transition: none; }
  .nav a:active { transform: none; }
}

/* touch tablets in the desktop layout (iPad landscape, an unfolded foldable held
   wide): the menu keeps Apple's 44px tap height without changing its look */
@media (min-width: 941px) and (pointer: coarse) {
  .nav a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* phones held sideways: the two row bar would pin over 40% of a 390px tall
   screen, so it scrolls away with the page, as it already does upright */
@media (max-width: 940px) and (max-height: 500px) {
  .masthead { position: absolute; }
  .masthead.plain { position: static; }
}

/* ============================================================
   CREDENTIALS BAND, 19 September 2026. Replaces the free first
   inventory band (withdrawn). Reuses the .offer band styling; the
   ledger reads like the particulars block of a signed document.
   ============================================================ */
.cred { margin: 28px 0 0; border-top: 1px solid rgb(var(--paper-rgb) / 0.2); }
.cred-row {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 6px 20px;
  padding: 15px 0;
  border-bottom: 1px solid rgb(var(--paper-rgb) / 0.2);
}
.cred dt {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 620; font-size: 0.72rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: rgb(var(--paper-rgb) / 0.66);
}
.cred dt::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--gold-lt); flex: none; }
.cred dd { margin: 0; color: var(--paper); font-size: 1.02rem; line-height: 1.5; }
@media (max-width: 560px) { .cred-row { grid-template-columns: 1fr; } }

/* ============================================================
   OPTIONAL FIELD MARKER, 20 September 2026
   Michael made every enquiry field mandatory except the agency
   name and the date, so the two optional ones say so rather than
   the other six carrying an asterisk.
   ============================================================ */
.field label .opt {
  font-weight: 500; letter-spacing: 0.08em; text-transform: none;
  color: var(--grey); opacity: 0.7; font-size: 0.95em; margin-left: 2px;
}

/* ============================================================
   TOUCH TARGETS, 20 September 2026
   Measured across 14 pages at 13 widths, from a 280px folded
   cover screen to 1180px. Nothing overflowed sideways anywhere.
   The only finding was that buttons fell to 37px tall on the
   narrowest screens, under the 44px a thumb wants. Applied to
   touch devices only, so the desktop proportions are untouched.
   ============================================================ */
@media (pointer: coarse) {
  .btn, button.btn { min-height: 44px; }
  .field input, .field select, .field textarea { min-height: 46px; }
  .nav a { padding-block: 6px; }
}

/* ============================================================
   SAMPLE REPORT GATE, 21 September 2026
   The specimen reports are now requested rather than downloaded,
   so a visitor leaves a name and an email first. No cookie, no
   localStorage, no sessionStorage: the gate does not remember
   anybody, deliberately, so the site needs no consent banner.
   ============================================================ */
.sheetmodal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.sheetmodal[hidden] { display: none; }
.sheetmodal-scrim {
  position: absolute; inset: 0; background: rgb(var(--ink-rgb) / 0.55);
  backdrop-filter: blur(3px); animation: sheetfade 0.22s ease-out;
}
.sheetmodal-panel {
  position: relative; z-index: 1; width: min(460px, 100%);
  max-height: calc(100dvh - 40px); overflow-y: auto;
  background: var(--card); border: 1px solid var(--line-firm);
  border-radius: var(--r); padding: clamp(24px, 4vw, 34px);
  box-shadow: 0 24px 70px rgb(var(--ink-rgb) / 0.22);
  animation: sheetrise 0.26s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.sheetmodal-x {
  position: absolute; top: 12px; right: 12px; width: 38px; height: 38px;
  display: grid; place-items: center; border: 0; border-radius: 999px;
  background: none; color: var(--grey); cursor: pointer;
}
.sheetmodal-x:hover { background: var(--line); color: var(--ink); }
.sheetmodal-x svg { width: 16px; height: 16px; }
.checkline { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; color: var(--ink-2); line-height: 1.5; }
.checkline input { margin-top: 3px; flex: none; width: 17px; height: 17px; accent-color: var(--gold); }
@keyframes sheetfade { from { opacity: 0; } }
@keyframes sheetrise { from { opacity: 0; transform: translateY(14px) scale(0.985); } }
@media (prefers-reduced-motion: reduce) {
  .sheetmodal-scrim, .sheetmodal-panel { animation: none; }
}

/* ============================================================
   PRICES, ALSO STRIP AND PROMO VIDEO (26 September 2026)
   The homepage leads on inventories: three price cards straight
   after the promises, the full list on /inventory#prices, and the
   other two services demoted to one quiet strip.
   ============================================================ */
.price-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.price-card {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(22px, 2.4vw, 30px); text-decoration: none; color: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.price-card:hover { border-color: var(--line-firm); box-shadow: 0 18px 40px -26px rgb(var(--ink-rgb) / 0.35); }
.price-card .label { margin: 0 0 4px; }
.price-card p { margin: 0; font-size: 0.96rem; color: var(--ink-2); }
.price-card .price-from {
  font-family: var(--display); font-weight: 500; font-variant-numeric: tabular-nums;
  font-size: clamp(2.2rem, 3.6vw, 3rem); line-height: 1.05; letter-spacing: -0.02em;
  color: var(--ink); margin: 10px 0 8px;
}
.price-card .price-from span { font-size: 0.34em; letter-spacing: 0.02em; color: var(--gold); vertical-align: 0.9em; margin-right: 4px; }
#prices .muted a { border-bottom: 1px solid var(--gold); color: var(--ink); }
@media (max-width: 820px) { .price-cards { grid-template-columns: 1fr; } }

.price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); margin-top: clamp(22px, 2.6vw, 32px); }
@media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; } }
.price-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.price-table caption {
  caption-side: top; text-align: left; padding: 16px 18px 12px;
  font-family: var(--display); font-weight: 500; font-size: 1.1rem; color: var(--ink);
  border-bottom: 2px solid var(--ink);
}
.price-table th, .price-table td { padding: 11px 18px; border-bottom: 1px solid var(--line); text-align: left; font-size: 0.94rem; }
.price-table thead th {
  font-family: var(--mono); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--grey); vertical-align: bottom;
}
.price-table tbody th { font-weight: 500; color: var(--ink); }
.price-table td { color: var(--ink); white-space: nowrap; }
.price-table tr:last-child th, .price-table tr:last-child td { border-bottom: 0; color: var(--grey); }
@media (max-width: 420px) {
  .price-table th, .price-table td { padding: 10px 10px; font-size: 0.86rem; }
  .price-table thead th { font-size: 0.5rem; }
}
.price-extras { margin-top: clamp(24px, 3vw, 36px); }

.also-band { padding-top: 0; }
.also { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(18px, 3vw, 40px); border-top: 1px solid var(--line); margin-top: 14px; }
.also-item {
  display: grid; gap: 4px; padding: 18px 28px 18px 0; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--line); position: relative;
}
.also-item strong { font-family: var(--display); font-weight: 500; font-size: 1.05rem; color: var(--ink); }
.also-item span { font-size: 0.95rem; color: var(--ink-2); }
.also-item::after { content: "\2192"; position: absolute; right: 4px; top: 18px; color: var(--gold); transition: transform 0.2s ease; }
.also-item:hover::after { transform: translateX(3px); }
@media (max-width: 700px) { .also { grid-template-columns: 1fr; } }

.loop-frame video.promo { opacity: 1; object-fit: cover; background: var(--void); }
@media (prefers-reduced-motion: reduce) { .price-card, .also-item::after { transition: none; } }
#prices { scroll-margin-top: 120px; }
.price-sheet .price-table th, .price-sheet .price-table td { vertical-align: middle; }
.price-sheet .price-table tbody th {
  font-family: var(--display); font-size: 0.94rem; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--ink); white-space: nowrap;
}
.price-sheet .price-table td { font-family: var(--display); font-size: 0.98rem; }
.price-sheet .price-table thead th { white-space: normal; line-height: 1.5; }
.price-sheet .price-table tr:last-child th, .price-sheet .price-table tr:last-child td { color: var(--grey); white-space: normal; }
@media (max-width: 360px) {
  .price-sheet .price-table th, .price-sheet .price-table td { padding: 9px 7px; font-size: 0.8rem; }
  .price-sheet .price-table tbody th { font-size: 0.8rem; white-space: normal; }
  .price-sheet .price-table thead th { font-size: 0.46rem; }
}

/* ============================================================
   SERVICES DROP-DOWN, SERVICE AND AREA PAGES (26 September 2026)
   Desktop only: on a phone the menu is the scrolling chip row, and
   the Services chip goes to /services, which lists every page.
   ============================================================ */
.nav-drop { position: relative; display: inline-flex; align-items: center; }
.nav-menu { display: none; }
@media (max-width: 940px) {
  .nav-drop { display: contents; }
  .nav-menu { display: none !important; }
}
@media (min-width: 941px) {
  .nav-drop-top::after {
    content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 8px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: translateY(-3px) rotate(45deg); opacity: 0.7;
  }
  .nav-drop:hover .nav-menu, .nav-drop:focus-within .nav-menu { display: grid; }
  .nav-menu {
    position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-38%);
    grid-template-columns: repeat(4, max-content); gap: 10px 34px; z-index: 80;
    padding: 24px 28px 18px; background: var(--card);
    border: 1px solid var(--line-firm); border-radius: var(--r);
    box-shadow: 0 26px 60px -26px rgb(var(--ink-rgb) / 0.4);
  }
  .nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
  .nav-col { display: grid; gap: 2px; align-content: start; }
  .nav-h { font-family: var(--mono); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey); margin: 0 0 6px; }
  .nav .nav-menu a { font-size: 0.92rem; padding: 5px 0; border-bottom: 0; box-shadow: none; color: var(--ink-2); white-space: nowrap; }
  .nav .nav-menu a:hover, .nav .nav-menu a:focus-visible { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
  .nav .nav-menu .nav-all { grid-column: 1 / -1; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; color: var(--ink); font-weight: 560; }
}

.crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--grey); }
.crumbs a { color: var(--grey); text-decoration: none; border-bottom: 1px solid var(--line-firm); }
.crumbs a:hover { color: var(--ink); }

.svc-hero { margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 7; background: var(--void); }
.svc-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px) { .svc-hero { aspect-ratio: 4 / 3; } }
.svc-body .prose a, .faq-item a { color: var(--ink); border-bottom: 1px solid var(--gold); text-decoration: none; }

.faq { border-top: 1px solid var(--line); max-width: 880px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer; list-style: none; position: relative; padding: 18px 44px 18px 0;
  font-family: var(--display); font-weight: 500; font-size: 1.05rem; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 8px; top: 13px; font-size: 1.45rem; line-height: 1; color: var(--gold); transition: transform 0.2s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.faq-item p { margin: 0 0 20px; max-width: 68ch; font-size: 1rem; line-height: 1.6; color: var(--ink-2); }

.svc-links, .borough-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(18px, 3vw, 40px); border-top: 1px solid var(--line); }
@media (max-width: 900px) { .svc-links, .borough-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .svc-links, .borough-grid { grid-template-columns: 1fr; } }
.svc-link { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 2px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.svc-link strong { font-family: var(--display); font-weight: 500; font-size: 1rem; }
.svc-link span { color: var(--gold); transition: transform 0.2s ease; }
.svc-link:hover span { transform: translateX(3px); }
.borough-card { display: grid; gap: 3px; padding: 16px 2px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.borough-card strong { font-family: var(--display); font-weight: 500; font-size: 1.05rem; color: var(--ink); }
.borough-card span { font-size: 0.9rem; color: var(--ink-2); }
.borough-card:hover strong { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }

.price-cards.price-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .price-cards.price-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .price-cards.price-cards-4 { grid-template-columns: 1fr; } }
.price-flat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(2.2rem, 3.6vw, 3rem); color: var(--ink); }
.price-flat span { font-family: var(--prose); font-weight: 400; font-size: 1.02rem; color: var(--ink-2); }
.price-single { max-width: 580px; }
.plainlink.ul { color: var(--ink); border-bottom: 1px solid var(--gold); }
.on-dark-plain { color: rgb(var(--card-rgb) / 0.9); }

.hood { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: clamp(18px, 3vw, 40px); border-top: 1px solid var(--line); }
@media (max-width: 900px) { .hood { columns: 2; } }
@media (max-width: 520px) { .hood { columns: 1; } }
.hood li { break-inside: avoid; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.hood-name { flex: 1; font-size: 0.98rem; color: var(--ink); }
.hood-pc { font-family: var(--mono); font-size: 0.62rem; color: var(--grey); text-align: right; }
.pc-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.pc-cloud span { font-family: var(--mono); font-size: 0.66rem; padding: 6px 10px; border: 1px solid var(--line-firm); border-radius: 999px; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .svc-link span, .faq-item summary::after { transition: none; } }

/* ============================================================
   26 September 2026, round three
   1. Services menu: one plain list, like HP Inventory, no headings.
   2. Price cards: label, name, price and note sit on shared rows
      (subgrid), so every "from" price lines up across a row of cards
      whatever the length of the label or the name above it.
   ============================================================ */
@media (min-width: 941px) {
  .nav-menu {
    grid-template-columns: 1fr; gap: 0; min-width: 270px; padding: 8px 0;
    transform: translateX(-50%);
  }
  .nav .nav-menu a { display: block; padding: 10px 22px; font-size: 0.94rem; color: var(--ink); white-space: nowrap; }
  .nav .nav-menu a:hover, .nav .nav-menu a:focus-visible { background: rgb(var(--ink-rgb) / 0.05); text-decoration: none; color: var(--ink); }
  .nav-sep { display: block; height: 1px; margin: 6px 22px; background: var(--line); }
}

.price-cards { align-items: stretch; }
.price-cards .price-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 6px; align-content: start; }
@supports not (grid-template-rows: subgrid) {
  .price-cards .price-card { display: flex; flex-direction: column; }
  .price-cards .price-card .h3 { min-height: 2.5em; }
}
.price-card .label { align-self: start; }
.price-card .h3 { align-self: start; }
.price-card .price-from { align-self: end; }
.price-card .price-from span {
  display: block; margin: 0 0 6px; vertical-align: baseline;
  font-family: var(--mono); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gold);
}
.price-card .price-quote { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.price-cards.price-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .price-cards.price-cards-2 { grid-template-columns: 1fr; } }

/* Short landscape screens (a phone on its side, an open iPhone Fold at
   904 x 640): the two-row phone masthead would hold 40% of the height, so
   it scrolls away with the page instead of staying pinned. */
@media (max-width: 940px) and (max-height: 700px) and (orientation: landscape) {
  .masthead.plain { position: relative; }
}

/* ============================================================
   SERVICES ON PHONES AND TABLETS (2 October 2026)
   Michael: on a phone the Services button went straight to /services,
   nine screens long, with 3D tours and facilities management on screen
   seven. Up to 940px, tapping Services now opens the same list as the
   desktop drop-down, in place, under the button row. site.js builds the
   panel (.svc-panel) as a child of the header, because the button row
   scrolls sideways and would clip anything dropping out of it.
   Desktop (941px and up) is untouched: the panel never shows there.
   ============================================================ */
.svc-panel { display: none; }
@media (max-width: 940px) {
  .masthead.plain { position: relative; }
  .nav .nav-drop-top::after {
    content: ""; width: 6px; height: 6px; margin-left: 2px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg); opacity: 0.75;
    transition: transform 0.18s var(--ease-soft);
  }
  .nav .nav-drop-top[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: var(--card); }
  .nav .nav-drop-top[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
  .svc-panel:not([hidden]) {
    display: block; position: absolute; z-index: 210;
    top: calc(100% + 8px); left: 0; right: 0;
    padding: 8px 0; background: var(--card);
    border: 1px solid var(--line-firm); border-radius: 22px;
    box-shadow: 0 26px 60px -24px rgb(var(--ink-rgb) / 0.45);
    animation: svc-in 0.16s var(--ease-soft);
  }
  .svc-panel a {
    display: flex; align-items: center; min-height: 46px; padding: 0 22px;
    font-family: var(--display); font-size: 0.98rem; font-weight: 450; line-height: 1.2;
    color: var(--ink); text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .svc-panel a:active { background: rgb(var(--ink-rgb) / 0.06); }
  .svc-panel a:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
  .svc-panel a[aria-current="page"] { font-weight: 600; }
  .svc-panel a[aria-current="page"]::before {
    content: ""; width: 6px; height: 6px; margin-right: 10px; border-radius: 1px; background: var(--gold-lt);
  }
  .svc-panel .svc-panel-all { font-weight: 600; }
  .svc-panel .nav-sep { display: block; height: 1px; margin: 6px 22px; background: var(--line); }
  .svc-panel .svc-panel-label {
    display: block; padding: 10px 22px 4px; font-family: var(--mono); font-size: 0.6rem;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey);
  }
}
/* tablets: a list the width of the screen reads as clumsy, so it keeps a phone's width */
@media (min-width: 600px) and (max-width: 940px) {
  .svc-panel:not([hidden]) { right: auto; width: 360px; }
}
@keyframes svc-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .svc-panel:not([hidden]) { animation: none; }
  .nav .nav-drop-top::after { transition: none; }
}

/* ============================================================
   LANDLORD LICENSING LIST, region pages (2 October 2026)
   One row per borough: name (to the borough page), the two council
   schemes, and a link to the council's own licensing page.
   ============================================================ */
.lic-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.lic-list li {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: 6px 24px; align-items: baseline; padding: 14px 2px; border-bottom: 1px solid var(--line);
}
.lic-name { font-family: var(--display); font-weight: 500; font-size: 1.02rem; color: var(--ink); text-decoration: none; }
.lic-name:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.lic-st { font-size: 0.95rem; color: var(--ink-2); }
.lic-st b { display: block; font-family: var(--mono); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey); margin-bottom: 2px; }
.lic-council { font-size: 0.92rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold); white-space: nowrap; }
@media (max-width: 760px) {
  .lic-list li { grid-template-columns: 1fr 1fr; }
  .lic-name { grid-column: 1 / -1; }
  .lic-council { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
}