/* Oak & Mason components.
   Tokens (colours, type, spacing, radii, shadows, layout) come from tokens.css.
   This file only composes them. Class prefix: om-. */

:root {
  --gutter: 20px;
  --om-ease: cubic-bezier(.2, .7, .2, 1);
  --om-i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7l10 10M17 8.5V17H8.5'/%3E%3C/svg%3E");
  --om-i-arrow-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16M6 14l6 6 6-6'/%3E%3C/svg%3E");
  --om-i-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h16M4 15h16'/%3E%3C/svg%3E");
  --om-i-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  --om-i-check-on-slate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23faf9f6' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --om-i-check-on-brass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2224' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --om-i-plus-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316191a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --om-i-minus-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316191a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1200px) { :root { --gutter: 56px; } }

/* Base */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
::selection { background: var(--slate); color: var(--on-dark); }
.om-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.om-skip { position: absolute; left: var(--space-4); top: -100px; z-index: 100; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font: 500 15px/20px var(--font-sans); }
.om-skip:focus { top: var(--space-4); }

.om-wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); box-sizing: border-box; }
.om-section { padding: var(--space-9) 0; scroll-margin-top: 80px; }
.om-section > .om-wrap { display: grid; gap: var(--space-7); }
@media (min-width: 1024px) {
  .om-section { padding: var(--space-10) 0; }
  .om-section > .om-wrap { gap: var(--space-8); }
}
.om-section--tight { padding-top: 0; }

/* Focus: slate ring on light grounds, brass ring on dark ones */
:where(a, button, summary, input, select, textarea):focus-visible { outline: none; box-shadow: var(--focus-ring); }
:where(.om-risk, .om-nav, .om-menu, .om-hero, .om-panel:not(.om-panel--light), .om-cta__panel) :where(a, button, summary, input):focus-visible { box-shadow: var(--focus-ring-dark); }

/* Arrow chip, shared by buttons and links. Chip fill = currentColor; arrow = --om-chip-ink. */
.om-chip {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-xs);
  background: currentColor;
}
.om-chip::before {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--om-chip-ink, var(--paper));
  -webkit-mask: var(--om-i-arrow) center / contain no-repeat;
  mask: var(--om-i-arrow) center / contain no-repeat;
}

/* Button */
.om-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: 500 15px/20px var(--font-sans);
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s var(--om-ease), color .2s var(--om-ease), border-color .2s var(--om-ease);
}
.om-btn--primary { background: var(--ink); color: var(--on-dark); --om-chip-ink: var(--ink); }
.om-btn--primary:hover { background: var(--slate); --om-chip-ink: var(--slate); }
.om-btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); --om-chip-ink: var(--paper); }
.om-btn--secondary:hover { background: var(--ink); color: var(--paper); --om-chip-ink: var(--ink); }
.om-btn--light { background: var(--on-dark); color: var(--ink); --om-chip-ink: var(--on-dark); }
.om-btn--light:hover { background: var(--stone); --om-chip-ink: var(--stone); }
.om-btn--ghost { background: transparent; color: var(--on-dark); border-color: var(--on-dark); --om-chip-ink: var(--ink); }
.om-btn--ghost:hover { background: var(--on-dark); color: var(--ink); --om-chip-ink: var(--on-dark); }
.om-btn--block { width: 100%; }

/* Text link */
.om-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 500 16px/24px var(--font-sans);
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  border-radius: 2px;
}
.om-link:hover { text-decoration-thickness: 2px; }
.om-link--on-dark { color: var(--on-dark); }

/* Pill */
.om-pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-full);
  background: var(--brass-light);
  color: var(--peat);
  font: 500 12px/16px var(--font-sans);
  letter-spacing: .02em;
  white-space: nowrap;
}
.om-pill--stone { background: var(--stone); color: var(--ink); }
.om-pill--slate { background: var(--slate); color: var(--on-dark); }

/* Eyebrow: a short tick and a label */
.om-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font: 500 14px/20px var(--font-sans);
  color: var(--ink);
}
.om-eyebrow::before {
  content: "";
  flex: none;
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: var(--om-tick, var(--brass));
}
.om-eyebrow--slate { --om-tick: var(--slate); }
.om-eyebrow--ink { --om-tick: var(--ink); }
.om-eyebrow--on-dark { color: var(--on-dark); --om-tick: var(--brass-light); }

/* Source line */
.om-source { margin: 0; font: 400 12px/18px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }

/* Risk strip */
.om-risk { background: var(--slate-deep); color: var(--on-dark); }
.om-risk__text {
  max-width: var(--container);
  margin: 0 auto;
  padding: 7px var(--gutter);
  box-sizing: border-box;
  font: 400 13px/18px var(--font-sans);
  text-align: center;
  text-wrap: balance;
}
.om-risk__text strong { font-weight: 600; }
@media (max-width: 767px) { .om-risk__text { padding: 6px 12px; font-size: 12px; line-height: 16px; } }
.om-risk--inline { background: var(--stone); color: var(--ink); border-radius: var(--radius-sm); }
.om-risk--inline .om-risk__text { padding: 14px 18px; font-size: 15px; line-height: 22px; text-align: left; }

/* Navigation: a sticky zero-height bar carrying one glass pill */
.om-navbar { position: sticky; top: 0; z-index: 50; height: 0; }
.om-nav {
  position: absolute;
  top: calc(var(--frame-inset) + 12px);
  left: calc(var(--frame-inset) + 12px);
  right: calc(var(--frame-inset) + 12px);
  display: flex;
  align-items: stretch;
  height: 52px;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.3);
  backdrop-filter: blur(var(--blur-glass)) saturate(1.3);
  color: var(--on-dark);
}
@media (min-width: 768px) {
  .om-nav { left: auto; top: calc(var(--frame-inset) + 20px); right: calc(var(--frame-inset) + 20px); }
}
.om-nav--static { position: relative; top: auto; left: auto; right: auto; display: inline-flex; }
.om-nav__brand { display: flex; align-items: center; margin-right: auto; padding: 0 20px; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.om-nav__brand img { display: block; height: 15px; width: auto; filter: brightness(0) invert(1); }
.om-nav__cta {
  display: none;
  align-items: center;
  padding: 0 18px;
  border-left: 1px solid var(--glass-line);
  font: 500 14px/20px var(--font-sans);
  color: var(--on-dark);
  text-decoration: none;
  transition: background-color .2s var(--om-ease);
}
.om-nav__cta:hover { background: var(--glass-line); }
@media (min-width: 560px) { .om-nav__cta { display: flex; } }
.om-nav__menu {
  display: grid;
  place-items: center;
  width: 52px;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--glass-line);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color .2s var(--om-ease);
}
.om-nav__menu:hover { background: var(--glass-line); }
.om-nav__menu::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--om-i-menu) center / contain no-repeat;
  mask: var(--om-i-menu) center / contain no-repeat;
}

/* Menu sheet */
.om-menu {
  position: fixed;
  inset: var(--frame-inset);
  z-index: 60;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-6);
  padding: 20px 20px 28px;
  border-radius: var(--radius-lg);
  background: var(--slate-deep);
  color: var(--on-dark);
  overflow: auto;
  --om-chip-ink: var(--slate-deep);
}
@media (min-width: 768px) { .om-menu { padding: 28px 40px 40px; } }
.om-menu[hidden] { display: none; }
.om-menu--static { position: relative; inset: auto; min-height: 480px; }
.om-menu__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.om-menu__top img { display: block; height: 15px; width: auto; filter: brightness(0) invert(1); }
.om-menu__close {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--on-dark);
  cursor: pointer;
}
.om-menu__close::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--om-i-close) center / contain no-repeat;
  mask: var(--om-i-close) center / contain no-repeat;
}
.om-menu__links { list-style: none; margin: 0; padding: 0; display: grid; align-content: center; gap: 2px; }
.om-menu__links a {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--on-dark);
  text-decoration: none;
  border-radius: 4px;
}
.om-menu__links a:hover { color: var(--brass-light); }
.om-menu__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); font: 400 15px/22px var(--font-sans); color: var(--on-dark-muted); }
.om-menu__foot a:not(.om-btn) { color: var(--on-dark); }
.om-menu-veil { position: fixed; inset: 0; z-index: 59; background: #1f2224b3; }
.om-menu-veil[hidden] { display: none; }
/* The gutter keeps the page from shifting sideways where the scrollbar takes up room */
html.om-menu-open { overflow: hidden; scrollbar-gutter: stable; }

/* Menu opening: the sheet unfolds out of the nav pill, as the hero frame draws in. The page script measures the pill
   against the sheet into --om-menu-from, numbers the contents (--n) and marks the sheet .om-menu--unfold; .is-open
   draws the sheet out to its inset and radius, and the wordmark, links and foot follow 45ms apart. Closing runs
   backwards: the contents fade, then the sheet folds back into the pill. The veil dims the page throughout.
   Under reduced motion the sheet simply appears and goes. */
@media (prefers-reduced-motion: no-preference) {
  .om-menu-veil { opacity: 0; transition: opacity .5s var(--om-ease); }
  .om-menu-veil.is-open { opacity: 1; }
  .om-menu--unfold {
    clip-path: var(--om-menu-from, inset(0 round var(--radius-lg)));
    transition: clip-path .55s cubic-bezier(.65, 0, .25, 1) .12s;
  }
  .om-menu--unfold.is-open { clip-path: inset(0 round var(--radius-lg)); transition: clip-path .6s cubic-bezier(.65, 0, .25, 1); }
  .om-menu--unfold :is(.om-menu__top, .om-menu__links > li, .om-menu__foot) {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .16s var(--om-ease), transform .16s var(--om-ease);
  }
  .om-menu--unfold.is-open :is(.om-menu__top, .om-menu__links > li, .om-menu__foot) {
    opacity: 1;
    transform: none;
    transition: opacity .5s var(--om-ease), transform .6s var(--om-ease);
    transition-delay: calc(.42s + var(--n, 0) * 45ms);
  }
}

/* Hero: an inset photographic frame. The frame is cut by clip-path rather than overflow, and the photograph
   runs out under the inset, so the intro can open it full-bleed and draw it in without moving the layout. */
.om-hero { padding: var(--frame-inset); overflow: hidden; }
.om-hero__frame {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: calc(100vh - var(--om-risk-h, 68px) - 2 * var(--frame-inset));
  min-height: calc(100svh - var(--om-risk-h, 68px) - 2 * var(--frame-inset));
  border-radius: var(--radius-lg);
  clip-path: inset(0 round var(--radius-lg));
  background: var(--peat);
  color: var(--on-dark);
}
.om-hero__media {
  position: absolute;
  top: calc(-1 * var(--frame-inset));
  left: calc(-1 * var(--frame-inset));
  z-index: -2;
  width: calc(100% + 2 * var(--frame-inset));
  height: calc(100% + 2 * var(--frame-inset));
  max-width: none;
  object-fit: cover;
}
.om-hero__frame::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--frame-inset));
  z-index: -1;
  background:
    linear-gradient(to top, #1f2224d9 0%, #1f222480 26%, #1f222400 58%),
    linear-gradient(to right, #1f2224a6 0%, #1f22244d 38%, #1f222400 62%),
    linear-gradient(to bottom, #1f222459 0%, #1f222400 22%);
}
.om-hero__content { display: grid; gap: var(--space-7); padding: 112px 20px 20px; }
/* Parallax: the page script sets --om-par on the frame as the page scrolls; the photograph, its screen and the words
   drift down inside the frame while the frame itself scrolls at full speed */
.om-hero__media, .om-hero__frame::before, .om-hero__content { translate: 0 var(--om-par, 0px); }
@media (min-width: 768px) { .om-hero__content { padding: 144px 32px 32px; } }
@media (min-width: 1100px) {
  .om-hero__content { grid-template-columns: minmax(0, 1fr) minmax(380px, 516px); align-items: end; gap: var(--space-8); padding: 128px 40px 40px; }
}
.om-hero__main { display: grid; gap: 24px; align-content: end; }
.om-hero__title {
  margin: 0;
  max-width: 9.6em;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(40px, 4.9vw, 70px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.om-hero__title em { font-style: italic; }
.om-hero__lead { margin: 0; max-width: 27em; font: 400 16px/24px var(--font-sans); letter-spacing: -0.005em; color: #faf9f6c7; text-wrap: pretty; }
.om-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: 4px; }
.om-hero__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--glass-line); }
.om-hero__aside { display: grid; gap: var(--space-2); align-self: end; }
.om-scrollcue { display: inline-flex; align-items: center; gap: 14px; font: 500 15px/20px var(--font-sans); color: var(--on-dark); text-decoration: none; border-radius: 4px; }
.om-scrollcue__disc { display: grid; place-items: center; width: 32px; height: 32px; box-sizing: border-box; border: 1.5px solid var(--brass-light); border-radius: var(--radius-full); }
.om-scrollcue__disc::before {
  content: "";
  width: 16px;
  height: 16px;
  background: var(--brass-light);
  -webkit-mask: var(--om-i-arrow-d) center / contain no-repeat;
  mask: var(--om-i-arrow-d) center / contain no-repeat;
}
@media (max-width: 767px) {
  /* Phones: the hero is the headline, the lead and the actions, balanced within one screen: the headline sits in the
     middle of the photograph, the lead and actions at its foot. The guide card, the two figures and the scroll cue
     step aside (the guide band and the terms follow further down). A page can move the photograph's focus for
     phones with --om-hero-focus-sm on .om-hero. */
  .om-hero__aside, .om-scrollcue { display: none; }
  .om-hero__foot:not(:has(.om-hero__pause)) { display: none; }
  .om-hero__content { flex: 1; display: flex; flex-direction: column; padding: 96px 20px 24px; }
  .om-hero__main { flex: 1; display: flex; flex-direction: column; gap: 20px; }
  .om-hero__title { margin: auto 0; }
  .om-hero__media { object-position: var(--om-hero-focus-sm, 50% 50%); }
}
@media (prefers-reduced-motion: no-preference) {
  .om-hero__main > * { animation: om-rise .9s var(--om-ease) both; }
  .om-hero__main > :nth-child(2) { animation-delay: .06s; }
  .om-hero__main > :nth-child(3) { animation-delay: .12s; }
  .om-hero__main > :nth-child(4) { animation-delay: .18s; }
  .om-hero__main > :nth-child(5) { animation-delay: .24s; }
  .om-hero__aside { animation: om-rise 1s var(--om-ease) .3s both; }
}
@keyframes om-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Hero opening. A head script sets .om-opening before first paint: the photograph opens full-bleed under the risk
   strip, unscreened and alone. The page script adds .om-opening--play once it has loaded; the frame draws in to
   its inset and radius, the screen comes up behind the words, and the words, tiles and nav pill arrive.
   The classes stay on afterwards (removing them would replay the entrance). No intro under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .om-opening .om-hero__frame { clip-path: inset(calc(-1 * var(--frame-inset)) round 0); }
  .om-opening:not(.om-opening--play) .om-hero { background: var(--peat); }
  .om-opening .om-hero__frame::before { opacity: 0; }
  .om-opening :is(.om-hero__main > *, .om-hero__aside, .om-nav) { opacity: 0; transform: translateY(16px); animation: none; }
  .om-opening--play .om-hero__frame { clip-path: inset(0 round var(--radius-lg)); transition: clip-path 1.25s cubic-bezier(.65, 0, .25, 1); }
  .om-opening--play .om-hero__frame::before { opacity: 1; transition: opacity 1.1s var(--om-ease) .25s; }
  .om-opening--play :is(.om-hero__main > *, .om-hero__aside, .om-nav) {
    opacity: 1;
    transform: none;
    transition: opacity .9s var(--om-ease) var(--om-in, .5s), transform 1s var(--om-ease) var(--om-in, .5s);
  }
  .om-opening--play .om-hero__main > :nth-child(2) { --om-in: .58s; }
  .om-opening--play .om-hero__main > :nth-child(3) { --om-in: .66s; }
  .om-opening--play .om-hero__main > :nth-child(4) { --om-in: .74s; }
  .om-opening--play .om-hero__aside { --om-in: .8s; }
  .om-opening--play .om-nav { --om-in: .95s; }
}

/* Hero film (preview option): a muted clip in place of the photograph, with a pause control */
.om-hero__pause {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-full);
  background: var(--glass-tile);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
  font: 500 14px/20px var(--font-sans);
  color: var(--on-dark);
  cursor: pointer;
}
.om-hero__pause::before { content: ""; width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.om-hero__pause[data-paused]::before { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.om-hero__pause:hover { background: var(--glass); }

/* Glass tiles */
.om-glass {
  border: 1px solid var(--glass-line);
  border-radius: 12px;
  background: var(--glass-tile);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.2);
  backdrop-filter: blur(var(--blur-glass)) saturate(1.2);
  color: var(--on-dark);
}
.om-story { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 18px; padding: 8px; color: var(--on-dark); text-decoration: none; transition: background-color .2s var(--om-ease); }
.om-story:hover { background: #23353bd9; }
.om-story__media { width: 100%; height: 100%; min-height: 148px; object-fit: cover; border-radius: 8px; display: block; }
/* A guide tile shows the whole A4 cover, so the media column takes the cover's own width */
.om-story--guide { grid-template-columns: 104px minmax(0, 1fr); align-items: center; }
.om-story__cover { display: block; width: 104px; height: auto; aspect-ratio: 210 / 297; border-radius: 6px; box-shadow: 0 1px 2px #16191a24, 0 10px 20px -12px #16191a80; }
.om-story__body { display: grid; gap: 8px; align-content: center; justify-items: start; padding: 10px 10px 10px 0; }
.om-story__title { margin: 0; font: 500 15px/21px var(--font-sans); letter-spacing: -0.005em; }
.om-story__text { margin: 0; font: 400 14px/20px var(--font-sans); }
.om-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.om-tile { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-5); min-height: 116px; padding: 14px 18px 16px; box-sizing: border-box; }
.om-tile__label { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 14px/20px var(--font-sans); }
.om-tile__label::before { content: ""; flex: none; width: 2px; height: 14px; border-radius: 1px; background: var(--brass-light); }
.om-tile__figure { align-self: flex-end; margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 38px; line-height: 1; letter-spacing: -0.02em; }

/* Guide cover: a small designed cover for a guide or report, in place of a photograph */
.om-cover {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: space-between;
  box-sizing: border-box;
  padding: 14px 14px 15px;
  border-radius: 8px;
  background: var(--brass);
  color: var(--ink);
}
.om-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-radial-gradient(circle at 112% 62%, transparent 0 10px, #1f22242b 10px 11px);
  -webkit-mask: linear-gradient(to right, transparent 28%, #000 72%);
  mask: linear-gradient(to right, transparent 28%, #000 72%);
}
.om-cover--staves::after { background: repeating-linear-gradient(90deg, transparent 0 12px, #1f22242b 12px 13px); }
.om-cover > * { position: relative; z-index: 1; }
.om-cover__head { display: grid; gap: 9px; }
.om-cover__mark { display: block; width: 62px; height: auto; }
.om-cover__kicker { font: 500 9px/12px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.om-cover__title { max-width: 7.4em; font-family: var(--font-serif); font-weight: 400; font-size: 17px; line-height: 1.1; letter-spacing: -0.01em; }
.om-tile--light { border: 0; background: var(--stone); color: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
.om-tile--light .om-tile__label::before { background: var(--brass); }

/* Section intro */
.om-intro { display: grid; justify-items: center; gap: var(--space-5); max-width: var(--measure); margin: 0 auto; text-align: center; }
.om-intro__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  max-width: 15em;
  font-size: clamp(30px, 2.7vw, 38px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--slate-deep);
  text-wrap: balance;
}
.om-intro__title em { font-style: italic; white-space: nowrap; }
.om-intro__lead { margin: 0; max-width: 36em; font: 400 17px/27px var(--font-sans); letter-spacing: -0.01em; color: var(--ink-muted); text-wrap: pretty; }
@media (min-width: 1024px) { .om-intro__lead { font-size: 18px; line-height: 28px; } }

/* Feature panels, stacked */
.om-stack { display: grid; gap: 12px; }
.om-panel {
  box-sizing: border-box;
  padding: 32px 24px;
  border-radius: var(--radius-lg);
  background: var(--slate);
  color: var(--on-dark);
  --om-chip-ink: var(--slate);
  scroll-margin-top: 80px;
}
.om-panel--peat { background: var(--peat); --om-chip-ink: var(--peat); }
.om-panel--light { background: var(--stone); color: var(--ink); --om-chip-ink: var(--stone); }
.om-panel--light .om-panel__head { border-bottom-color: var(--line); }
.om-panel--light .om-panel__title { color: var(--slate-deep); }
.om-panel--light .om-panel__text { color: var(--ink-soft); }
.om-panel--light .om-panel__text strong { color: var(--ink); }
.om-panel--light .om-panel__note { border-top-color: var(--line); color: var(--ink-muted); }
.om-panel.om-panel--light .om-link { color: var(--ink); --om-chip-ink: var(--stone); }
.om-panel--light .om-panel__media { background: var(--sand); }
@media (min-width: 768px) { .om-panel { padding: 48px; } }
@media (min-width: 1100px) { .om-panel { padding: 48px 56px 60px; } }
@media (min-width: 1100px) and (min-height: 820px) {
  .om-stack--sticky .om-panel { position: sticky; top: var(--space-4); }
  .om-stack--sticky .om-panel:nth-child(2) { top: calc(var(--space-4) + 12px); }
  .om-stack--sticky .om-panel:nth-child(3) { top: calc(var(--space-4) + 24px); }
  .om-stack--sticky .om-panel:nth-child(4) { top: calc(var(--space-4) + 36px); }
}
/* With the page script the stack pins on any screen, phones included. The script sets each panel's --om-stick
   from its own height (a panel taller than the screen pins by its foot, so it is read in full before the next
   covers it) and --om-cover, 0 to 1, as the next panel slides over it. */
.om-js .om-stack--sticky .om-panel { position: sticky; top: var(--om-stick, var(--space-4)); transform-origin: 50% 0; }
/* A card sliding over the one beneath must be solid from the moment it arrives, so stacked cards skip the fade-in */
.om-js .om-stack--sticky .om-panel[data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .om-js .om-stack--sticky .om-panel { scale: calc(1 - var(--om-cover, 0) * .06); filter: brightness(calc(1 - var(--om-cover, 0) * .3)); }
}
.om-panel__head { display: grid; gap: 16px; padding-bottom: 32px; border-bottom: 1px solid var(--glass-line); }
.om-panel__title {
  margin: 0;
  max-width: 16em;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(32px, 3.3vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.om-panel__title em { font-style: italic; }
.om-panel__body { display: grid; gap: var(--space-6); padding-top: 32px; }
@media (min-width: 900px) {
  .om-panel__head { padding-bottom: 40px; }
  .om-panel__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--space-8); padding-top: 40px; }
}
.om-panel__media { position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-md); background: var(--peat); }
.om-panel__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.om-panel__text { display: grid; gap: 18px; justify-items: start; max-width: 32em; font: 400 17px/27px var(--font-sans); letter-spacing: -0.01em; }
.om-panel__text p { margin: 0; }
.om-panel__text strong { font-weight: 600; }
.om-panel__note { margin: 6px 0 0; padding-top: 18px; border-top: 1px solid var(--glass-line); font: 400 15px/22px var(--font-sans); letter-spacing: 0; color: var(--on-dark-muted); }
.om-panel .om-link { color: var(--on-dark); }

/* Fact rows */
.om-facts { display: grid; gap: var(--space-2); }
.om-fact { display: grid; gap: 14px; padding: 28px 24px; border-radius: 12px; background: var(--stone); }
.om-fact__label { display: flex; align-items: flex-start; gap: 14px; margin: 0; font: 500 20px/28px var(--font-sans); letter-spacing: -0.01em; color: var(--slate-deep); }
.om-fact__label::before { content: ""; flex: none; width: 3px; height: 20px; margin-top: 4px; border-radius: 2px; background: var(--om-tick, var(--brass)); }
.om-fact--slate { --om-tick: var(--slate); }
.om-fact--ink { --om-tick: var(--ink); }
.om-fact__text { margin: 0; font: 400 17px/26px var(--font-sans); color: var(--ink-muted); text-wrap: pretty; }
.om-fact__figure { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(38px, 3.5vw, 50px); line-height: 1; letter-spacing: -0.02em; color: var(--slate-deep); }
@media (min-width: 900px) {
  .om-fact { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 3fr); align-items: center; gap: 0; padding: 48px 40px; }
  .om-fact__text { padding-right: 40px; }
  .om-fact__figure { padding: 10px 0 10px 24px; border-left: 1px solid var(--line); text-align: right; }
}

/* Check list */
.om-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.om-checks > li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; align-items: start; font: 500 17px/26px var(--font-sans); color: var(--ink); }
.om-checks > li::before { content: ""; width: 26px; height: 26px; border-radius: var(--radius-xs); background: var(--slate) var(--om-i-check-on-slate) center / 16px no-repeat; }
.om-checks--quiet > li { font-weight: 400; color: var(--ink-muted); }
.om-checks--quiet strong { font-weight: 600; color: var(--ink); }
.om-checks--on-dark > li { color: var(--on-dark); }
.om-checks--on-dark > li::before { background: var(--brass-light) var(--om-i-check-on-brass) center / 16px no-repeat; }

/* Split: text, a rule, a list */
.om-split { display: grid; gap: var(--space-6); width: 100%; max-width: 900px; margin: 0 auto; }
.om-split__text { margin: 0; font: 400 18px/28px var(--font-sans); letter-spacing: -0.01em; color: var(--ink-muted); }
.om-split__rule { height: 1px; background: var(--line); }
@media (min-width: 900px) {
  .om-split { grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); gap: 72px; }
  .om-split__rule { width: 1px; height: auto; }
  .om-split__text { padding-top: 28px; }
}

/* Place cards */
.om-places { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-2); width: 100%; max-width: 720px; margin: 0 auto; }
.om-place { position: relative; margin: 0; aspect-ratio: 23 / 24; overflow: hidden; border-radius: var(--radius-md); background: var(--sand); }
.om-place > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) sepia(.1) contrast(1.04); }
.om-place__caption {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 12px 12px 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--paper);
  box-shadow: var(--shadow-card);
}
.om-place__name { display: block; font: 600 16px/22px var(--font-sans); color: var(--ink); }
.om-place__role { display: block; font: 500 13px/18px var(--font-sans); color: var(--brass-text); }
.om-place__go { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--slate); color: var(--on-dark); }
.om-place__go::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--om-i-arrow) center / contain no-repeat;
  mask: var(--om-i-arrow) center / contain no-repeat;
}
.om-place__go:hover { background: var(--slate-deep); }

/* Info cards */
.om-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--space-2); }
.om-card { display: grid; align-content: start; gap: 28px; box-sizing: border-box; padding: 32px 24px; border-radius: 16px; background: var(--stone); }
@media (min-width: 1024px) { .om-card { gap: 32px; padding: 52px 48px 56px; } }
.om-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.om-card__title { margin: 0; font: 500 22px/28px var(--font-sans); letter-spacing: -0.01em; color: var(--ink); }
.om-card__num { flex: none; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 40px; line-height: 1; color: var(--brass-text); }

/* Steps, option A: rail. Three stops on one hairline, read left to right (top to bottom on phones). */
.om-rail { list-style: none; margin: 0; padding: 0; display: grid; gap: 44px; }
.om-rail__step { position: relative; display: grid; align-content: start; gap: 12px; padding-left: 40px; }
.om-rail__step::before { content: ""; position: absolute; left: 6px; top: 15px; bottom: -44px; width: 1px; background: var(--line-strong); transform-origin: 50% 0; }
.om-rail__step:last-child::before { display: none; }
.om-rail__step::after { content: ""; position: absolute; left: 0; top: 2px; width: 13px; height: 13px; box-sizing: border-box; border: 1.5px solid var(--om-tick, var(--brass)); border-radius: var(--radius-full); background: var(--paper); }
.om-rail__step--slate { --om-tick: var(--slate); }
.om-rail__step--ink { --om-tick: var(--ink); }
.om-rail__meta { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0; font: 500 14px/20px var(--font-sans); color: var(--ink); }
.om-rail__when { font-weight: 400; color: var(--brass-text); }
.om-rail__title { margin: 6px 0 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(26px, 2.3vw, 32px); line-height: 1.15; letter-spacing: -0.015em; color: var(--slate-deep); text-wrap: balance; }
.om-rail__text { margin: 0; max-width: 30em; font: 400 17px/27px var(--font-sans); color: var(--ink-muted); text-wrap: pretty; }
@media (min-width: 900px) {
  .om-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .om-rail__step { padding: 40px 56px 0 0; }
  .om-rail__step::before { left: 0; right: 0; top: 6px; bottom: auto; width: auto; height: 1px; transform-origin: 0 50%; }
  .om-rail__step:last-child::before { display: block; background: linear-gradient(to right, var(--line-strong), #7e7c7600); }
}

/* Steps, option B: story. A pinned photograph beside the stages; the photograph and the lit stage change as they scroll past. */
.om-journey__wrap { display: grid; gap: var(--space-7); }
.om-journey__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(30px, 2.7vw, 38px); line-height: 1.18; letter-spacing: -0.02em; color: var(--slate-deep); }
.om-journey__lead { margin: 16px 0 0; max-width: 26em; font: 400 17px/27px var(--font-sans); color: var(--ink-muted); }
.om-journey__media { position: relative; display: none; margin: 32px 0 0; aspect-ratio: 1 / 1; max-height: calc(100svh - 320px); overflow: hidden; border-radius: var(--radius-lg); background: var(--sand); }
.om-journey__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.om-journey__media img.is-active { opacity: 1; }
.om-journey__bars { position: absolute; left: 20px; right: 20px; bottom: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.om-journey__bars span { height: 3px; border-radius: 2px; background: #faf9f666; transition: background-color .4s var(--om-ease); }
.om-journey__bars span.is-active { background: var(--on-dark); }
.om-journey__steps { list-style: none; margin: 0; padding: 0; display: grid; border-bottom: 1px solid var(--line); }
.om-journey__step { display: grid; gap: 16px; align-content: center; padding: 36px 0; border-top: 1px solid var(--line); }
.om-journey__step-media { margin: 0 0 8px; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-md); background: var(--sand); }
.om-journey__step-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.om-journey__when { margin: 0; font: 500 14px/20px var(--font-sans); color: var(--brass-text); }
.om-journey__step-title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.14; letter-spacing: -0.02em; color: var(--slate-deep); }
.om-journey__step-text { margin: 0; max-width: 30em; font: 400 17px/27px var(--font-sans); color: var(--ink-muted); text-wrap: pretty; }
@media (min-width: 900px) {
  .om-journey__wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-9); }
  .om-journey__sticky { position: sticky; top: 96px; }
  .om-journey__media { display: block; }
  .om-journey__step { min-height: 44vh; padding: 48px 0; }
  .om-journey__step-media { display: none; }
  .om-js .om-journey__step { opacity: .3; transition: opacity .5s var(--om-ease); }
  .om-js .om-journey__step.is-active { opacity: 1; }
}

.om-journey__main { display: grid; gap: var(--space-5); align-content: start; }
@media (min-width: 900px) {
  .om-journey--flip .om-journey__wrap { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .om-journey--flip .om-journey__aside { order: 2; }
}

/* Steps, option C: register. One ruled row per stage, read like entries in a ledger. */
.om-register { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.om-register__row { position: relative; display: grid; gap: 10px; padding: 28px 0 32px; }
.om-register__row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transform-origin: 0 50%; }
.om-register__row--slate { --om-tick: var(--slate); }
.om-register__row--ink { --om-tick: var(--ink); }
.om-register__stage { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 14px/20px var(--font-sans); color: var(--ink); }
.om-register__stage::before { content: ""; flex: none; width: 3px; height: 16px; border-radius: 2px; background: var(--om-tick, var(--brass)); }
.om-register__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.15; letter-spacing: -0.02em; color: var(--slate-deep); text-wrap: balance; }
.om-register__text { margin: 0; max-width: 34em; font: 400 17px/27px var(--font-sans); color: var(--ink-muted); text-wrap: pretty; }
.om-register__when { margin: 0; font: 500 15px/22px var(--font-sans); color: var(--brass-text); }
@media (min-width: 900px) {
  .om-register__row { grid-template-columns: minmax(0, 2fr) minmax(0, 4fr) minmax(0, 5fr) minmax(0, 2.4fr); align-items: baseline; gap: 0 32px; padding: 44px 8px 48px; }
  .om-register__when { text-align: right; }
}

/* Closing call to action */
.om-cta { display: grid; gap: var(--space-2); padding: 0 var(--frame-inset); }
@media (min-width: 900px) { .om-cta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.om-cta__panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-7);
  min-height: 440px;
  box-sizing: border-box;
  padding: 32px 24px;
  border-radius: var(--radius-lg);
  background: var(--slate);
  color: var(--on-dark);
  --om-chip-ink: var(--on-dark);
}
@media (min-width: 900px) { .om-cta__panel { min-height: 600px; padding: 56px; } }
.om-cta__title { margin: 0; max-width: 11em; font-family: var(--font-serif); font-weight: 400; font-size: clamp(34px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }
.om-cta__lead { margin: 20px 0 0; max-width: 28em; font: 400 17px/27px var(--font-sans); letter-spacing: -0.01em; color: var(--on-dark-muted); text-wrap: pretty; }
.om-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.om-cta__media { position: relative; margin: 0; min-height: 320px; overflow: hidden; border-radius: var(--radius-lg); background: var(--peat); }
.om-cta__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Photograph band */
.om-band { padding: 0 var(--frame-inset); }
.om-band__frame { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); background: var(--sand); }
@media (min-width: 768px) { .om-band__frame { aspect-ratio: 21 / 9; } }
.om-band__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.om-band__caption { position: absolute; left: 16px; bottom: 16px; margin: 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--paper); color: var(--ink-muted); font: 400 13px/18px var(--font-sans); box-shadow: var(--shadow-card); }

/* FAQ */
.om-faq { width: 100%; max-width: 900px; margin: 0 auto; border-top: 1px solid var(--line); }
.om-faq__item { border-bottom: 1px solid var(--line); }
.om-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: 24px 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--slate-deep);
  border-radius: 4px;
  transition: color .2s var(--om-ease);
}
.om-faq__q::-webkit-details-marker { display: none; }
.om-faq__q::after {
  content: "";
  flex: none;
  width: 36px;
  height: 36px;
  box-sizing: border-box;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
  background: var(--om-i-plus-ink) center / 16px no-repeat;
}
.om-faq__item[open] > .om-faq__q::after { background-image: var(--om-i-minus-ink); }
.om-faq__q:hover { color: var(--slate); }
.om-faq__a { max-width: 64ch; padding: 0 0 28px; font: 400 17px/27px var(--font-sans); color: var(--ink-muted); }
.om-faq__a p { margin: 0 0 12px; }
.om-faq__a p:last-child { margin-bottom: 0; }
@media (min-width: 900px) { .om-faq__a { padding-right: 72px; } }

/* Form field */
.om-field { display: grid; gap: 8px; }
.om-field__label { font: 500 14px/20px var(--font-sans); color: var(--ink); }
.om-field__input {
  width: 100%;
  min-height: 52px;
  box-sizing: border-box;
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/24px var(--font-sans);
}
.om-field__input::placeholder { color: var(--ink-muted); }
.om-field__input:hover { border-color: var(--ink); }
.om-field__hint { margin: 0; font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }
.om-field__error { display: none; align-items: center; gap: 8px; margin: 0; font: 500 14px/20px var(--font-sans); color: var(--danger); }
.om-field__error::before { content: "!"; flex: none; width: 18px; height: 18px; border-radius: var(--radius-full); background: var(--danger); color: var(--paper); font: 700 12px/18px var(--font-sans); text-align: center; }
.om-field--invalid .om-field__input { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.om-field--invalid .om-field__error { display: flex; }
.om-form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); }
.om-form-row > .om-field { flex: 1 1 260px; }
.om-form-row > .om-btn { min-height: 52px; }

/* Terms figures: three terms side by side between two rules, each a ticked label, a large figure and one sentence */
.om-terms { display: grid; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.om-terms__col { display: grid; gap: 16px; align-content: start; padding: 32px 0; }
.om-terms__col + .om-terms__col { border-top: 1px solid var(--line); }
@media (min-width: 900px) {
  .om-terms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .om-terms__col { gap: 20px; padding: 40px 40px 44px; }
  .om-terms__col:first-child { padding-left: 0; }
  .om-terms__col:last-child { padding-right: 0; }
  .om-terms__col + .om-terms__col { border-top: 0; border-left: 1px solid var(--line); }
}
.om-terms__figure { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(52px, 5vw, 72px); line-height: 1; letter-spacing: -0.03em; font-variation-settings: 'opsz' 72; color: var(--slate-deep); }
.om-terms__text { margin: 0; max-width: 26em; font: 400 17px/27px var(--font-sans); letter-spacing: -0.01em; color: var(--ink-muted); text-wrap: pretty; }

/* Handling with an account record: the checklist beside an example of the record kept in the client's account */
.om-handle { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 1100px) { .om-handle { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; } }
.om-handle__intro { display: grid; gap: 24px; justify-items: start; }
.om-handle__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(30px, 2.7vw, 38px); line-height: 1.18; letter-spacing: -0.02em; color: var(--slate-deep); text-wrap: balance; }
.om-handle__lead { margin: 0; max-width: 34em; font: 400 17px/27px var(--font-sans); letter-spacing: -0.01em; color: var(--ink-muted); text-wrap: pretty; }
@media (min-width: 1024px) { .om-handle__lead { font-size: 18px; line-height: 28px; } }
.om-handle__list { gap: 12px; padding-top: 4px; }
.om-record-stage { margin: 0; box-sizing: border-box; padding: 16px; border-radius: var(--radius-lg); background: var(--sand); }
@media (min-width: 768px) { .om-record-stage { padding: 56px; } }
.om-record { box-sizing: border-box; padding: 24px 20px 22px; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow-card); }
@media (min-width: 768px) { .om-record { padding: 32px 36px 28px; } }
.om-record__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.om-record__heading { margin: 0; font: 500 22px/28px var(--font-sans); letter-spacing: -0.01em; color: var(--ink); }
.om-record__name { margin: 22px 0 4px; font-family: var(--font-serif); font-weight: 400; font-size: 28px; line-height: 34px; letter-spacing: -0.015em; color: var(--slate-deep); }
.om-record__list { margin: 12px 0 0; }
.om-record__row { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--sand); }
@media (min-width: 480px) { .om-record__row { grid-template-columns: minmax(0, 130px) minmax(0, 1fr); gap: 16px; align-items: baseline; } }
@media (min-width: 768px) { .om-record__row { grid-template-columns: minmax(0, 170px) minmax(0, 1fr); } }
.om-record__row dt { margin: 0; font: 500 12px/18px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.om-record__row dd { margin: 0; font: 400 16px/24px var(--font-sans); color: var(--ink); }
.om-record__foot { margin: 18px 0 0; font: 400 14px/22px var(--font-sans); color: var(--ink-muted); }

/* Sites: the distillery and the warehouse as two colour photographs, each with a caption card of facts */
.om-sites { display: grid; gap: var(--space-2); }
@media (min-width: 900px) { .om-sites { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.om-site { position: relative; display: flex; flex-direction: column; justify-content: flex-end; margin: 0; min-height: 520px; box-sizing: border-box; padding: 12px; overflow: hidden; border-radius: var(--radius-lg); background: var(--peat); }
@media (min-width: 1100px) { .om-site { min-height: 620px; padding: 16px; } }
.om-site > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.om-site__card { position: relative; display: grid; gap: 18px; box-sizing: border-box; padding: 22px 20px 20px; border-radius: var(--radius-md); background: var(--paper); box-shadow: var(--shadow-card); }
@media (min-width: 768px) { .om-site__card { padding: 26px 28px 24px; } }
.om-site__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.om-site__name { margin: 0; font: 500 22px/28px var(--font-sans); letter-spacing: -0.01em; color: var(--ink); }
.om-site__role { margin: 0; font: 500 14px/20px var(--font-sans); color: var(--brass-text); }
.om-site .om-checks { gap: 10px; }
@media (max-width: 767px) {
  /* On phones the photograph sits above its card, which overlaps it a little, so neither hides the other */
  .om-site { display: block; min-height: 0; padding: 0; overflow: visible; background: none; }
  .om-site > img { position: relative; display: block; height: auto; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); background: var(--peat); }
  .om-site__card { margin: -40px 12px 0; }
  .om-sites { gap: var(--space-6); }
}

/* Scale statement: one industry figure set large on slate, a sentence carrying the others, a live count of bottles
   shipped since the page opened (script-driven, hidden without JavaScript, with a pause button) and a photograph */
.om-scale { display: grid; gap: var(--space-6); box-sizing: border-box; padding: 32px 24px; border-radius: var(--radius-lg); background: var(--slate); color: var(--on-dark); }
@media (min-width: 768px) { .om-scale { padding: 48px; } }
@media (min-width: 1100px) { .om-scale { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; min-height: 760px; padding: 56px; } }
.om-scale :where(a, button):focus-visible { box-shadow: var(--focus-ring-dark); }
.om-scale__main { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-7); }
.om-scale__head { display: grid; gap: 24px; justify-items: start; }
.om-scale__title { display: grid; gap: 24px; justify-items: start; margin: 0; font-weight: 400; }
.om-scale__figure { font-family: var(--font-serif); font-weight: 400; font-size: clamp(76px, 9.4vw, 136px); line-height: .95; letter-spacing: -0.035em; font-variation-settings: 'opsz' 72; }
.om-scale__text { margin: 0; max-width: 26em; font: 400 19px/29px var(--font-sans); letter-spacing: -0.01em; text-wrap: pretty; }
@media (min-width: 1024px) { .om-scale__text { font-size: 22px; line-height: 32px; } }
.om-scale__counter { display: grid; gap: 10px; justify-items: start; padding-top: 28px; border-top: 1px solid var(--glass-line); }
html:not(.om-js) .om-scale__counter { display: none; }
.om-scale__counter-label { margin: 0; font: 500 14px/20px var(--font-sans); color: var(--on-dark-muted); }
.om-scale__count { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(38px, 3.5vw, 50px); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.om-scale__counter-note { margin: 0; font: 400 15px/22px var(--font-sans); color: var(--on-dark-muted); }
.om-scale__pause { min-height: 44px; margin-top: 6px; padding: 0 16px; border: 1px solid #faf9f640; border-radius: var(--radius-full); background: transparent; color: var(--on-dark); font: 500 14px/20px var(--font-sans); cursor: pointer; transition: border-color .2s var(--om-ease); }
.om-scale__pause:hover { border-color: var(--on-dark); }
.om-scale__media { position: relative; margin: 0; min-height: 320px; overflow: hidden; border-radius: var(--radius-md); background: var(--peat); }
@media (min-width: 1100px) { .om-scale__media { min-height: 0; } }
.om-scale__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.om-scale__notes { display: grid; gap: 12px; }
@media (min-width: 900px) { .om-scale__notes { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; } }
.om-scale__note { margin: 0; max-width: 40em; font: 400 16px/25px var(--font-sans); color: var(--ink-muted); }

/* Guide band: a stone panel with the guide's cover, what is inside and the request form (posts through /js/lp-form.js) */
.om-guide { display: grid; gap: var(--space-7); box-sizing: border-box; padding: 24px; border-radius: var(--radius-lg); background: var(--stone); }
@media (min-width: 768px) { .om-guide { padding: 48px; } }
@media (min-width: 1100px) { .om-guide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: var(--space-8); padding: 64px; } }
.om-guide__stage { display: grid; place-items: center; min-height: 340px; border-radius: var(--radius-md); background: var(--sand); }
@media (min-width: 1100px) { .om-guide__stage { align-self: stretch; min-height: 620px; } }
.om-guide__book { position: relative; width: min(62%, 340px); aspect-ratio: 210 / 297; }
/* The guide's real cover (page one of the PDF, built by _scripts/build-guides.py) on the book */
.om-guide__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 4px; box-shadow: 0 1px 2px #16191a14, 0 18px 36px -18px #16191a59; }
.om-guide__page { position: absolute; inset: 0; border-radius: 8px; background: var(--paper); box-shadow: var(--shadow-card); transform: translate(6%, 2.5%) rotate(3deg); }
.om-guide__cover { position: absolute; inset: 0; padding: 9% 9% 9.5%; box-shadow: 0 1px 2px #16191a14, 0 18px 36px -18px #16191a59; container-type: inline-size; }
.om-guide__cover .om-cover__head { gap: 5cqi; }
.om-guide__cover .om-cover__mark { width: 39cqi; }
.om-guide__cover .om-cover__kicker { font-size: max(9px, 3.6cqi); line-height: 1.35; }
.om-guide__cover .om-cover__title { max-width: 6.2em; font-size: 13.5cqi; }
.om-guide__body { display: grid; gap: 28px; }
.om-guide__intro { display: grid; gap: 16px; justify-items: start; }
.om-guide__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(30px, 2.7vw, 38px); line-height: 1.18; letter-spacing: -0.02em; color: var(--slate-deep); text-wrap: balance; }
.om-guide__lead { margin: 0; max-width: 34em; font: 400 17px/27px var(--font-sans); letter-spacing: -0.01em; color: var(--ink-muted); text-wrap: pretty; }
@media (min-width: 1024px) { .om-guide__lead { font-size: 18px; line-height: 28px; } }
.om-guide__list { gap: 12px; }
.om-guide__form { display: grid; gap: 12px; }
.om-guide__form .om-field__hint a { color: var(--ink); }
.om-guide__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 4px; }
.om-guide .lp-form__error { margin: 0; font: 500 14px/20px var(--font-sans); color: var(--danger); }
.om-guide .lp-form__error:empty { display: none; }

/* Footer */
.om-footer { padding: var(--space-9) 0 var(--space-7); }
@media (min-width: 1024px) { .om-footer { padding: var(--space-10) 0 var(--space-7); } }
.om-footer__grid { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .om-footer__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: 0; }
  .om-footer__col { padding-right: 40px; }
  .om-footer__col + .om-footer__col { padding-left: 40px; border-left: 1px solid var(--line); }
}
.om-footer__brand { display: block; height: 15px; width: auto; margin-bottom: 28px; }
.om-footer__contact { display: grid; gap: 20px; font: 400 16px/24px var(--font-sans); color: var(--ink-muted); }
.om-footer__contact p { margin: 0; }
.om-footer__contact a { color: var(--ink-soft); text-decoration: none; }
.om-footer__contact a:hover { text-decoration: underline; text-underline-offset: 4px; }
.om-footer__nav, .om-footer__links { list-style: none; margin: 0; padding: 0; display: grid; }
.om-footer__nav { gap: 2px; }
.om-footer__nav a { font: 400 24px/36px var(--font-sans); letter-spacing: -0.015em; color: var(--ink); text-decoration: none; border-radius: 2px; }
.om-footer__nav a:hover { color: var(--slate); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.om-footer__links { gap: 8px; font: 400 16px/24px var(--font-sans); }
.om-footer__links a { color: var(--ink-muted); text-decoration: none; }
.om-footer__links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.om-footer__tagline { margin: 0 0 20px; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 22px; line-height: 30px; letter-spacing: -0.01em; color: var(--ink); }
.om-footer__legal { display: grid; gap: 14px; margin-top: var(--space-8); padding-top: 28px; border-top: 1px solid var(--line); font: 400 14px/22px var(--font-sans); color: var(--ink-muted); }
.om-footer__legal p { margin: 0; max-width: 118ch; }

/* Motion: one entrance per element, colour and a nudge on hover, nothing that loops */
@media (prefers-reduced-motion: no-preference) {
  .om-hero__media { animation: om-settle 14s var(--om-ease) both; }
  .om-nav { animation: om-fade .9s var(--om-ease) .25s both; }
  .om-js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--om-ease), transform .9s var(--om-ease); transition-delay: calc(var(--i, 0) * 90ms); }
  .om-js [data-reveal].is-in { opacity: 1; transform: none; }
  .om-js .om-band__frame[data-reveal] img { transform: scale(1.06); transition: transform 1.8s var(--om-ease); }
  .om-js .om-band__frame.is-in img { transform: none; }
  .om-place > img { transition: transform .9s var(--om-ease); }
  .om-place:hover > img, .om-place:focus-within > img { transform: scale(1.04); }
  .om-panel__media img, .om-cta__media img { transition: transform 1.2s var(--om-ease); }
  .om-panel:hover .om-panel__media img { transform: scale(1.02); }
  .om-chip::before { transition: transform .25s var(--om-ease); }
  .om-btn:hover .om-chip::before, .om-link:hover .om-chip::before, .om-place__go:hover::before { transform: translate(1px, 1px); }
  .om-faq__item[open] > .om-faq__a { animation: om-fade .45s var(--om-ease) both; }
  .om-faq__q::after { transition: transform .3s var(--om-ease), border-color .2s var(--om-ease); }
  .om-faq__item[open] > .om-faq__q::after { transform: rotate(180deg); }
  .om-faq__q:hover::after { border-color: var(--ink); }
}
@media (prefers-reduced-motion: no-preference) {
  .om-js .om-rail__step[data-reveal]::before { transform: scaleY(0); transition: transform 1.1s var(--om-ease) calc(var(--i, 0) * 200ms + 250ms); }
  .om-js .om-rail__step[data-reveal]::after { transform: scale(.3); transition: transform .6s var(--om-ease) calc(var(--i, 0) * 200ms + 100ms); }
  .om-js .om-rail__step.is-in::before, .om-js .om-rail__step.is-in::after { transform: none; }
  .om-journey__media img { transform: scale(1.05); transition: opacity .8s var(--om-ease), transform 1.6s var(--om-ease); }
  .om-journey__media img.is-active { transform: none; }
  .om-js .om-register__row[data-reveal]::after { transform: scaleX(0); transition: transform 1.2s var(--om-ease) calc(var(--i, 0) * 150ms + 200ms); }
  .om-js .om-register__row.is-in::after { transform: none; }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .om-js .om-rail__step[data-reveal]::before { transform: scaleX(0); }
  .om-js .om-rail__step.is-in::before { transform: none; }
}
@keyframes om-settle { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes om-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Preview helpers (component cards only) */
.om-demo { padding: var(--space-5); }
.om-demo-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.om-demo-dark { padding: var(--space-5); border-radius: var(--radius-md); background: var(--slate); color: var(--on-dark); }
.om-demo-peat { padding: var(--space-5); border-radius: var(--radius-md); background: var(--peat); color: var(--on-dark); --om-chip-ink: var(--peat); }
.om-demo-photo { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--peat) center / cover no-repeat; }
.om-demo-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, #1f2224cc, #1f222433); }
.om-demo-photo > * { position: relative; }