/* ===========================================================================
   AlphaTill — the website's design system.

   Cream ground, burgundy brand, warm amber kept for small refinements. The
   application's own ten colours are unchanged and still named as they were,
   because the product interface uses them and the screenshots on these pages
   are real captures of it. Burgundy belongs to the website: it is the brand
   around the product, not the product's own chrome.

   Two typefaces. Fraunces, an optical-sizing serif, for anything set large;
   Manrope for everything meant to be read. Both are self-hosted variable
   fonts, so the strict Content-Security-Policy needs no exception and no
   request leaves the site to render a page.
   ======================================================================== */

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces.woff2') format('woff2-variations'),
       url('../fonts/Fraunces.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope.woff2') format('woff2-variations'),
       url('../fonts/Manrope.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* The application's palette, unchanged. */
  --bg:        #f6f1e6;
  --surface:   #fffdf8;
  --surface-2: #ece4d4;
  --accent:    #8f4f16;
  --green:     #2f7a4f;
  --ink:       #2c2620;
  --muted:     #6d6357;
  --border:    #ddd1ba;
  --danger:    #b23b30;
  --on-dark:   #f3ece0;

  /* The website's own brand colour. */
  --burgundy:       #68283d;
  --burgundy-dark:  #461c2b;
  --burgundy-light: #88465b;

  /* Derived, so a tint is never typed twice. */
  --burgundy-wash: #f2e8ea;
  --burgundy-line: #d8c2c9;
  --on-burgundy:   #fdf6ef;

  --sans:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;

  /* Six steps. Everything on the site is one of these. */
  --t-ui:    0.9375rem;
  --t-body:  clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --t-lead:  clamp(1.25rem, 1.12rem + 0.6vw, 1.5rem);
  --t-sub:   clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --t-head:  clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
  --t-hero:  clamp(2.125rem, 1.35rem + 3.3vw, 5.25rem);

  --page: clamp(1.25rem, 4vw, 4rem);
  --gap:  clamp(4rem, 8vw, 7.5rem);

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;

  /* Warm shadows. A cool grey shadow on a cream page looks like dirt. */
  --sh-sm: 0 1px 2px rgba(70, 55, 30, .06), 0 2px 6px rgba(70, 55, 30, .05);
  --sh:    0 2px 6px rgba(70, 55, 30, .06), 0 12px 28px rgba(70, 55, 30, .08);
  --sh-lg: 0 4px 12px rgba(70, 55, 30, .07), 0 28px 60px rgba(70, 55, 30, .12);

  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-head); }
h2 { font-size: var(--t-sub); }
h3 { font-size: var(--t-lead); line-height: 1.25; letter-spacing: -0.005em; }
p  { margin: 0; text-wrap: pretty; }
p + p { margin-top: 1rem; }

img, svg, video { max-width: 100%; height: auto; }
a { color: inherit; }

:where(a, button, input, select, textarea, summary, details):focus-visible {
  outline: 3px solid var(--burgundy);
  outline-offset: 3px;
  border-radius: 3px;
}
::selection { background: var(--burgundy); color: var(--on-burgundy); }

.wrap  { padding-inline: var(--page); }
.limit { max-width: 1200px; margin-inline: auto; }
.narrow { max-width: 760px; margin-inline: auto; }
section { padding-block: var(--gap); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--burgundy); color: var(--on-burgundy);
  padding: .8rem 1.2rem; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

/* ---- movement ----------------------------------------------------------
   Nothing is hidden until the script has an observer running and has said so
   by putting .motion on the root. If the file never loads, if the browser has
   no IntersectionObserver, if the tab is in the background so the callbacks
   never fire, or if anything here throws, the page is simply the page: every
   word visible, nothing to reveal. Hiding content first and trusting a
   callback to bring it back is how a site ends up blank.

   Anyone who has asked their system for less motion never gets .motion at
   all, so they read the finished page straight away. */
.rise { transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
html.motion .rise { opacity: 0; transform: translateY(20px); }
html.motion .rise.seen { opacity: 1; transform: none; }

.mask > span { display: block; }
html.motion .mask { overflow: hidden; }
html.motion .mask > span {
  transform: translateY(105%);
  transition: transform 900ms var(--ease);
}
html.motion.ready .hero .mask > span,
html.motion .mask.seen > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  html.motion .rise { opacity: 1; transform: none; }
  html.motion .mask > span { transform: none !important; }
}

/* ---- buttons -----------------------------------------------------------
   Three weights: the burgundy action, a quiet outline beside it, and a plain
   text link with an arrow for a third choice. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font: inherit; font-size: var(--t-ui); font-weight: 600; letter-spacing: .005em;
  padding: .85rem 1.6rem; border-radius: 999px;
  background: var(--burgundy); color: var(--on-burgundy);
  border: 1.5px solid var(--burgundy);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: var(--sh-sm);
  transition: background-color 220ms var(--ease), border-color 220ms var(--ease),
              transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.btn:hover { background: var(--burgundy-dark); border-color: var(--burgundy-dark); transform: translateY(-2px); box-shadow: var(--sh); }
.btn:active { transform: translateY(0); box-shadow: var(--sh-sm); }
.btn svg { flex: none; }

.btn--ghost {
  background: transparent; color: var(--burgundy);
  border-color: var(--burgundy-line); box-shadow: none;
}
.btn--ghost:hover { background: var(--burgundy-wash); border-color: var(--burgundy); box-shadow: none; }

.btn--light { background: var(--on-burgundy); color: var(--burgundy-dark); border-color: var(--on-burgundy); }
.btn--light:hover { background: #fff; border-color: #fff; }

.btn--outline-light { background: transparent; color: var(--on-burgundy); border-color: rgba(253, 246, 239, .45); box-shadow: none; }
.btn--outline-light:hover { background: rgba(253, 246, 239, .12); border-color: var(--on-burgundy); box-shadow: none; }

.textlink {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--t-ui); font-weight: 600; color: var(--burgundy);
  text-decoration: none;
}
.textlink span { box-shadow: inset 0 -1px 0 var(--burgundy-line); transition: box-shadow 200ms var(--ease); }
.textlink svg { transition: transform 240ms var(--ease); }
.textlink:hover span { box-shadow: inset 0 -1px 0 var(--burgundy); }
.textlink:hover svg { transform: translateX(4px); }

.actions { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }

/* ---- labels and badges ------------------------------------------------- */
.label {
  display: inline-block; font-size: .8125rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--burgundy-light);
  margin-bottom: 1rem;
}
.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 999px;
}
.badge--live  { background: #e4efe8; color: #1f5c39; }
.badge--soon  { background: var(--burgundy-wash); color: var(--burgundy); }
.badge--dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}

/* ---- navigation --------------------------------------------------------
   Sticky, quiet, and it keeps the booking button on the bar at every width —
   on a phone the links fold away but the one thing worth pressing does not. */
.nav {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem var(--page);
  background: rgba(246, 241, 230, .88);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color 280ms var(--ease), border-color 280ms var(--ease);
}
.nav[data-scrolled="true"] { background: rgba(246, 241, 230, .96); border-bottom-color: var(--border); }
.nav-brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; flex: none; }
.nav-brand img { height: 30px; width: auto; }
.nav-brand b { font-family: var(--display); font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; }

.nav-links { display: flex; align-items: center; gap: clamp(.5rem, 1.6vw, 1.5rem); margin-left: auto; order: 2; }
.nav-cta { order: 3; }
.menu-toggle { order: 4; }
.nav-links > a, .nav-toggle-btn {
  font-size: var(--t-ui); font-weight: 500; color: var(--ink);
  text-decoration: none; padding: .45rem .15rem; position: relative;
  background: none; border: 0; font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: .3rem;
}
.nav-links > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .15rem; height: 2px;
  background: var(--burgundy); transform: scaleX(0); transform-origin: left;
  transition: transform 260ms var(--ease);
}
.nav-links > a:hover::after, .nav-links > a[aria-current="page"]::after { transform: scaleX(1); }
.nav-cta { margin-left: 1.25rem; }

/* the Products disclosure */
.nav-group { position: relative; }
.nav-toggle-btn svg { transition: transform 240ms var(--ease); }
.nav-toggle-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-menu {
  position: absolute; top: calc(100% + .6rem); left: 50%; transform: translateX(-50%);
  min-width: 290px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--sh-lg); padding: .5rem; display: none;
}
.nav-menu[data-open="true"] { display: block; }
.nav-menu a {
  display: block; padding: .7rem .85rem; border-radius: var(--r-sm);
  text-decoration: none; color: var(--ink);
}
.nav-menu a:hover { background: var(--burgundy-wash); }
.nav-menu b { display: block; font-size: var(--t-ui); font-weight: 600; }
.nav-menu span { display: block; font-size: .8125rem; color: var(--muted); margin-top: .1rem; }

.menu-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  color: var(--ink); padding: .4rem; margin-left: .4rem;
}

/* ---- hero -------------------------------------------------------------- */
.hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem); }
.hero-in {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.hero-head { grid-column: 1 / -1; }
.hero h1 { font-size: var(--t-hero); }
.hero h1 em { font-style: normal; color: var(--burgundy); }
.hero-say p.lede { font-size: var(--t-lead); color: var(--muted); max-width: 40ch; }
.hero .actions { margin-top: 2.25rem; }
.hero-say { padding-top: .5rem; }

.trust {
  display: flex; flex-wrap: wrap; gap: .6rem 1.75rem;
  margin-top: 2.75rem; padding-top: 1.75rem; border-top: 1px solid var(--border);
}
.trust div { display: flex; align-items: center; gap: .5rem; font-size: var(--t-ui); color: var(--muted); }
.trust svg { color: var(--green); flex: none; }

/* ---- the till on the first screen --------------------------------------
   A real capture in a plain frame, with the one control that proves the
   claim the page is making: pull the broadband out and it keeps selling. */
.stage { position: relative; }
.device {
  background: #1b1b1f; border-radius: var(--r-lg); padding: .7rem .7rem 1.4rem;
  box-shadow: var(--sh-lg); position: relative;
}
.device::after {
  content: ""; position: absolute; bottom: .55rem; left: 50%; transform: translateX(-50%);
  width: 64px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .22);
}
.device img { display: block; width: 100%; border-radius: calc(var(--r-lg) - 8px); }

.wire {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem; padding: .9rem 1.1rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--sh-sm);
}
.wire-state { display: flex; align-items: center; gap: .6rem; font-size: var(--t-ui); }
.wire-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); flex: none; transition: background-color 300ms var(--ease); }
.wire[data-online="false"] .wire-dot { background: var(--danger); }
.wire-said { color: var(--muted); }
.wire[data-online="false"] .wire-said { color: var(--ink); }

/* a real switch, operated by a real checkbox the label is tied to */
.switch { display: inline-flex; align-items: center; gap: .65rem; cursor: pointer; font-size: var(--t-ui); font-weight: 500; min-height: 44px; padding: .25rem 0; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; left: 0; top: 0; margin: 0; cursor: pointer; }
.switch-track {
  width: 44px; height: 24px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border); position: relative; flex: none;
  transition: background-color 240ms var(--ease);
}
.switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--surface); box-shadow: var(--sh-sm);
  transition: transform 240ms var(--ease);
}
.switch input:checked + .switch-track { background: var(--burgundy); border-color: var(--burgundy); }
.switch input:checked + .switch-track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch-track { outline: 3px solid var(--burgundy); outline-offset: 3px; }

/* ---- section openings -------------------------------------------------- */
.head { max-width: 760px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.head.centre { margin-inline: auto; text-align: center; }
.head p { color: var(--muted); font-size: var(--t-lead); margin-top: 1.1rem; }
.head > .badge { margin-bottom: 1.25rem; }

/* the inner pages open on a split field, like the home page without the till */
.page-head { display: grid; grid-template-columns: 1.1fr 1fr; align-items: end; gap: clamp(2rem, 5vw, 4rem); padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 5vw, 3.5rem); }
.page-head h1 { font-size: var(--t-head); max-width: 13ch; }
.page-head-say > p { font-size: var(--t-lead); color: var(--muted); margin-top: 1.25rem; max-width: 42ch; }
.page-head-note { font-size: var(--t-ui); color: var(--muted); }
.page-head-note p + p { margin-top: .9rem; }
.page-head-note .btn, .page-head-note .textlink { margin-top: 1.4rem; }

/* ---- cards ------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); overflow: hidden;
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease), border-color 300ms var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh); border-color: var(--burgundy-line); }
.card-body { padding: clamp(1.4rem, 2.6vw, 2rem); }
.card-body h3 { margin-bottom: .6rem; }
.card-body p { color: var(--muted); font-size: var(--t-ui); }
.card-body .textlink { margin-top: 1.3rem; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.75rem); align-items: stretch; }
.grid-3 > .card { display: flex; flex-direction: column; }
.grid-3 > .card .card-body { flex: 1; display: flex; flex-direction: column; }
.grid-3 > .card .card-body .textlink { margin-top: auto; padding-top: 1.3rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); }

/* the picture at the top of a product card */
.card-media {
  background: var(--surface-2); padding: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  height: 236px; overflow: hidden;
}
.card-media img { display: block; border-radius: var(--r-sm) var(--r-sm) 0 0; box-shadow: var(--sh); }

/* ---- why: a quiet grid of reasons -------------------------------------- */
.reasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: clamp(1.5rem, 3vw, 2.75rem); }
.reason { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.reason-mark {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  background: var(--burgundy-wash); color: var(--burgundy);
  display: grid; place-items: center;
}
.reason h3 { font-size: 1.0625rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
.reason p { color: var(--muted); font-size: var(--t-ui); margin-top: .35rem; }

/* ---- alternating feature rows ------------------------------------------ */
.alt { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.alt + .alt { margin-top: clamp(3rem, 7vw, 6rem); }
.alt:nth-child(even) .alt-media { order: -1; }
.alt-say h2 { font-size: var(--t-sub); max-width: 16ch; }
.alt-say p { color: var(--muted); margin-top: 1.1rem; max-width: 46ch; }
.alt-media img { display: block; border-radius: var(--r); box-shadow: var(--sh); border: 1px solid var(--border); }

.ticks { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .7rem; }
.ticks li { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; font-size: var(--t-ui); }
.ticks svg { color: var(--green); margin-top: .3rem; flex: none; }

/* ---- drawn interfaces for the services still being built ----------------
   These are drawings, not screenshots, and the page says so where they
   appear. Nothing here is presented as a product you can buy today. */
.phone {
  width: 268px; max-width: 100%; margin-inline: auto;
  background: #1b1b1f; border-radius: 30px; padding: 8px;
  box-shadow: var(--sh-lg);
}
.phone-screen { background: var(--surface); border-radius: 23px; overflow: hidden; }
.phone-bar {
  background: var(--burgundy); color: var(--on-burgundy);
  padding: .9rem 1rem .8rem; font-size: .8125rem; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between;
}
.phone-body { padding: .85rem; display: grid; gap: .55rem; }
.mock-row {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .6rem .7rem; border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: .8125rem; background: var(--surface);
}
.mock-row b { font-weight: 600; }
.mock-row .pr { color: var(--accent); font-weight: 600; }
.mock-row--on { border-color: var(--burgundy); background: var(--burgundy-wash); }
.mock-note { font-size: .75rem; color: var(--muted); }
.mock-total { display: flex; justify-content: space-between; font-weight: 600; padding-top: .5rem; border-top: 1px solid var(--border); font-size: .875rem; }
.mock-btn {
  background: var(--burgundy); color: var(--on-burgundy); text-align: center;
  padding: .65rem; border-radius: var(--r-sm); font-size: .8125rem; font-weight: 600;
}
.mock-ok { text-align: center; padding: 1.5rem .75rem; display: grid; gap: .5rem; justify-items: center; }
.mock-ok .big { width: 44px; height: 44px; border-radius: 50%; background: #e4efe8; color: var(--green); display: grid; place-items: center; }

.journey { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.5vw, 2rem); align-items: start; }
.journey figcaption { text-align: center; font-size: var(--t-ui); color: var(--muted); margin-top: 1rem; }
.journey figcaption b { display: block; color: var(--ink); font-weight: 600; }
.journey figure { margin: 0; }

/* the reservation board */
.board { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh); overflow: hidden; }
.board-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.board-top b { font-family: var(--display); font-size: 1.125rem; font-weight: 600; }
.board-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border); }
.board-day { background: var(--surface); padding: .7rem .4rem; text-align: center; font-size: .875rem; }
.board-day span { display: block; color: var(--muted); font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em; }
.board-day b { display: block; font-weight: 600; margin-top: .15rem; }
.board-day--on { background: var(--burgundy); color: var(--on-burgundy); }
.board-day--on span { color: rgba(253, 246, 239, .75); }
.board-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .5rem; padding: 1.25rem; }
.slot { text-align: center; padding: .55rem .4rem; border: 1px solid var(--border); border-radius: var(--r-sm); font-size: .875rem; font-weight: 500; }
.slot--on { background: var(--burgundy); color: var(--on-burgundy); border-color: var(--burgundy); }
.slot--off { color: var(--muted); background: var(--surface-2); text-decoration: line-through; }
.board-list { border-top: 1px solid var(--border); }
.board-list div { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: 1rem; padding: .75rem 1.25rem; font-size: var(--t-ui); border-bottom: 1px solid var(--border); align-items: center; }
.board-list div:last-child { border-bottom: 0; }
.board-list time { font-weight: 600; font-variant-numeric: tabular-nums; }
.board-list span { color: var(--muted); }

/* a drawn interface is labelled wherever it appears */
.drawn {
  display: flex; align-items: center; gap: .5rem; justify-content: center;
  font-size: .8125rem; color: var(--muted); margin-top: 1.25rem;
}
.drawn svg { flex: none; }

/* ---- burgundy fields --------------------------------------------------- */
.dark {
  background: var(--burgundy); color: var(--on-burgundy); position: relative; overflow: hidden;
}
.dark h1, .dark h2, .dark h3 { color: var(--on-burgundy); }
.dark p { color: rgba(253, 246, 239, .82); }
.dark .label { color: rgba(253, 246, 239, .7); }
.dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 80% at 85% 10%, rgba(136, 70, 91, .55), transparent 70%),
    radial-gradient(45% 60% at 5% 90%, rgba(70, 28, 43, .6), transparent 70%);
}
.dark > * { position: relative; }

.closing { text-align: center; }
.closing h2 { font-size: var(--t-head); max-width: 18ch; margin-inline: auto; }
.closing p { font-size: var(--t-lead); max-width: 52ch; margin: 1.25rem auto 2.5rem; }
.closing .actions { justify-content: center; }

/* ---- how it works ------------------------------------------------------ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); counter-reset: s; }
.step { counter-increment: s; position: relative; padding-top: 2.75rem; }
.step::before {
  content: counter(s); position: absolute; top: 0; left: 0;
  font-family: var(--display); font-size: 1.5rem; font-weight: 600; color: var(--burgundy);
  width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--burgundy-wash);
  display: grid; place-items: center; line-height: 1;
}
.step h3 { font-size: 1.0625rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
.step p { color: var(--muted); font-size: var(--t-ui); margin-top: .45rem; }

/* ---- pricing ----------------------------------------------------------- */
.plans { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: clamp(1rem, 2vw, 1.75rem); align-items: start; }
.plan {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--sh-sm); height: 100%;
  display: flex; flex-direction: column;
}
.plan--lead { background: var(--burgundy); color: var(--on-burgundy); border-color: var(--burgundy); box-shadow: var(--sh-lg); }
.plan--lead h3, .plan--lead .fig { color: var(--on-burgundy); }
.plan--lead p, .plan--lead .ticks li { color: rgba(253, 246, 239, .85); }
.plan--lead .ticks svg { color: #8fd3a8; }
.plan--lead .per { color: rgba(253, 246, 239, .7); }
.plan h3 { font-family: var(--sans); font-size: 1.0625rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.fig { font-family: var(--display); font-size: clamp(3rem, 6vw, 4.25rem); font-weight: 600; line-height: 1; margin-top: 1.25rem; font-variant-numeric: tabular-nums; }
.fig sup { font-size: .4em; top: -.8em; font-weight: 500; }
.per { font-size: var(--t-ui); color: var(--muted); margin-top: .4rem; }
.plan > p { color: var(--muted); font-size: var(--t-ui); margin-top: 1rem; }
.plan .ticks { margin-top: 1.5rem; }
.plan .btn, .plan .textlink { margin-top: auto; align-self: flex-start; }
.plan .ticks + .btn, .plan .ticks + .textlink { margin-top: 2rem; }
.vat { font-size: var(--t-ui); color: var(--muted); margin-top: 1.75rem; }

/* ---- FAQ, built on <details> so it works without script ----------------- */
.faq { max-width: 820px; margin-inline: auto; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.4rem 2.5rem 1.4rem 0; position: relative;
  font-size: var(--t-lead); font-family: var(--display); font-weight: 500; letter-spacing: -.005em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .35rem; top: 50%; width: 11px; height: 11px;
  border-right: 2px solid var(--burgundy); border-bottom: 2px solid var(--burgundy);
  transform: translateY(-70%) rotate(45deg); transition: transform 260ms var(--ease);
}
.faq details[open] summary::after { transform: translateY(-20%) rotate(225deg); }
.faq summary:hover { color: var(--burgundy); }
.faq-a { padding: 0 2.5rem 1.6rem 0; color: var(--muted); }
.faq-a p + p { margin-top: .8rem; }

/* ---- forms ------------------------------------------------------------- */
.form-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(1.5rem, 3.5vw, 2.75rem); box-shadow: var(--sh-sm); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.1rem; }
.field label, .fieldset-label { font-size: var(--t-ui); font-weight: 500; color: var(--ink); }
.field .hint { font-size: .8125rem; color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea {
  font: inherit; font-size: var(--t-ui); color: var(--ink);
  background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--r-sm);
  padding: .8rem .9rem; width: 100%;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.field textarea { min-height: 7.5rem; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--burgundy-line); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--burgundy); outline: none; box-shadow: 0 0 0 4px var(--burgundy-wash);
}
.field input::placeholder, .field textarea::placeholder { color: #9b9185; }

fieldset { border: 0; padding: 0; margin: 0 0 1.1rem; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem; margin-top: .6rem; }
.choice { position: relative; }
.choice input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span {
  display: flex; align-items: center; gap: .55rem;
  padding: .7rem .85rem; border: 1.5px solid var(--border); border-radius: var(--r-sm);
  font-size: var(--t-ui); background: var(--bg);
  transition: border-color 180ms var(--ease), background-color 180ms var(--ease);
}
.choice span::before {
  content: ""; width: 16px; height: 16px; border: 1.5px solid var(--border);
  border-radius: 4px; flex: none; background: var(--surface);
}
.choice input:checked + span { border-color: var(--burgundy); background: var(--burgundy-wash); }
.choice input:checked + span::before { background: var(--burgundy); border-color: var(--burgundy); box-shadow: inset 0 0 0 2px var(--surface); }
.choice input:focus-visible + span { outline: 3px solid var(--burgundy); outline-offset: 2px; }

#form-error {
  display: none; background: #f9e9e7; color: #8d2a21; border: 1px solid #e8c4bf;
  border-radius: var(--r-sm); padding: .9rem 1rem; margin-bottom: 1.25rem; font-size: var(--t-ui);
}
#form-ok { display: none; }
.offscreen { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.margin-note { font-size: var(--t-ui); }
.margin-note p { color: var(--muted); }
.margin-note strong { color: var(--ink); font-weight: 600; display: block; margin-top: 1.5rem; }
.margin-note strong:first-child { margin-top: 0; }

/* ---- long prose, for the legal pages ----------------------------------- */
.prose { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(1.5rem, 4vw, 3.5rem); box-shadow: var(--sh-sm); }
.prose h2 { font-size: 1.5rem; margin-top: 2.5rem; max-width: 26ch; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-family: var(--sans); font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; margin-top: 1.75rem; }
.prose p, .prose li { max-width: 68ch; font-size: 1.0625rem; }
.prose ul { padding-left: 1.15rem; }
.prose li { margin-bottom: .5rem; }
.prose a { color: var(--burgundy); text-underline-offset: 3px; }
.facts { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; gap: .5rem; }
.facts li { display: flex; gap: 1rem; flex-wrap: wrap; }
.facts span { color: var(--muted); min-width: 12rem; }

/* ---- footer ------------------------------------------------------------ */
.foot { background: var(--burgundy-dark); color: var(--on-burgundy); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.foot a { color: rgba(253, 246, 239, .78); text-decoration: none; }
.foot a:hover { color: var(--on-burgundy); }
.tiles { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); }
.tile h3 { font-family: var(--sans); font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(253, 246, 239, .55); margin-bottom: 1rem; }
.tile a, .tile p { display: block; font-size: var(--t-ui); margin-bottom: .6rem; color: rgba(253, 246, 239, .78); }
.foot-brand b { font-family: var(--display); font-size: 1.5rem; font-weight: 600; display: block; margin-bottom: .6rem; }
.foot-brand p { font-size: var(--t-ui); color: rgba(253, 246, 239, .7); max-width: 32ch; }
.foot-legal { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.75rem; border-top: 1px solid rgba(253, 246, 239, .16); }
.foot-legal p { font-size: .8125rem; color: rgba(253, 246, 239, .6); max-width: 80ch; }
.foot-legal p + p { margin-top: .5rem; }

/* =========================================================================
   Responsive. The phone is the first case, not an adaptation: the owner is
   reading this between services.
   ====================================================================== */
@media (max-width: 1040px) {
  .plans { grid-template-columns: 1fr; }
  .plan .btn, .plan .textlink { align-self: flex-start; }
  .journey { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
}

@media (max-width: 960px) {
  .hero-in, .page-head, .alt, .grid-2 { grid-template-columns: 1fr; }
  .hero-head { grid-column: auto; }
  .hero-in { gap: 2.5rem; }
  .alt:nth-child(even) .alt-media { order: 0; }
  .grid-3 { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .page-head { padding-bottom: 0; }

  /* The links fold into the menu button; the booking button stays out of it,
     so the first screen on a phone always has something to press. */
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: .5rem var(--page) 1.25rem; box-shadow: var(--sh);
    max-height: calc(100vh - 64px); overflow-y: auto;
  }
  .nav-links[data-open="true"] { display: flex; }
  .nav-links > a, .nav-toggle-btn { padding: .85rem 0; width: 100%; justify-content: space-between; }
  .nav-links > a::after { display: none; }
  .nav-links > a[aria-current="page"] { color: var(--burgundy); font-weight: 600; }
  .nav-group { position: static; }
  .nav-menu {
    position: static; transform: none; box-shadow: none; border: 0; min-width: 0;
    padding: 0 0 .5rem .85rem; background: none; border-left: 2px solid var(--border);
    margin-bottom: .5rem;
  }
  .nav-cta { margin-left: auto; }
  .menu-toggle { display: block; }
}

@media (max-width: 620px) {
  .journey { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr; }
  .trust { gap: .5rem 1.25rem; }
  .board-list div { grid-template-columns: 4rem 1fr; }
  .board-list div span:last-child { grid-column: 2; }
}

/* ---- small pieces the pages ask for ------------------------------------
   The Content-Security-Policy forbids a style attribute in the markup, so
   anything a page needs to nudge has a class here instead. */
.phone--mini { width: 168px; }
.card-media .phone-body { padding: .6rem; gap: .4rem; }
.board--mini { width: 236px; }
.board--mini .board-slots { padding: .75rem; }
.drawn--left { justify-content: flex-start; }
.muted { color: var(--muted); }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 1.75rem; }
.mt-3 { margin-top: 2.5rem; }
.mt-4 { margin-top: clamp(2.5rem, 5vw, 4rem); }
.vat a, .inline-link { color: var(--burgundy); text-underline-offset: 3px; }

/* the band that sends people to the working demo */
.demo-card { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; }
.demo-card .card-body { padding: clamp(1.75rem, 4vw, 3.5rem); }
.demo-card .card-body p { font-size: var(--t-body); color: var(--muted); }
.demo-card-media {
  background: var(--surface-2); height: 100%;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex; align-items: center; justify-content: center;
}
.demo-card-media img { border-radius: var(--r); box-shadow: var(--sh); }
@media (max-width: 820px) {
  .demo-card { grid-template-columns: 1fr; }
  .demo-card-media { order: -1; }
}

/* a row of claims under a drawn interface */
.plan .fig--quote { font-size: clamp(2.25rem, 4vw, 3rem); }

/* ---- the capability list -----------------------------------------------
   Eighty-odd lines of feature, which has to stay readable rather than
   becoming a wall. Each area is its own block, each line is a row, and the
   status sits on the right where the eye can run down it. */
.matrix-area + .matrix-area { margin-top: clamp(2.5rem, 5vw, 4rem); }
.matrix-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; margin-bottom: 1.25rem; }
.matrix-head h3 { font-size: var(--t-lead); }
.matrix-head p { color: var(--muted); font-size: var(--t-ui); }
.matrix-head .tally { margin-left: auto; font-size: var(--t-ui); color: var(--muted); white-space: nowrap; }

.matrix { border-top: 1px solid var(--border); }
.row {
  display: grid; grid-template-columns: 15rem 1fr auto;
  gap: .5rem clamp(1rem, 3vw, 2.5rem); align-items: baseline;
  padding: 1.1rem 0; border-bottom: 1px solid var(--border);
}
.row > b { font-weight: 600; }
.row > p { color: var(--muted); font-size: var(--t-ui); }
.row--soon > b, .row--soon > p { color: var(--muted); }
.row .badge { align-self: center; }

.legend { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 2.5rem; font-size: var(--t-ui); color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: .5rem; }

@media (max-width: 760px) {
  .row { grid-template-columns: 1fr auto; }
  .row > p { grid-column: 1 / -1; }
  .matrix-head .tally { margin-left: 0; width: 100%; }
}