/* ============================================================
   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;
}
img, svg { max-width: 100%; display: block; }
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); }

/* ---------- 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: 820px) {
  .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(270px, 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); }
.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;
  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 Matterport example ----------
   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);
}
.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(280px, 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); }