/* ==========================================================================
   Digital Handshake Media — design system
   Direction: surveyor's chart. Bone paper, chart ink, one measured teal.
   The geo-grid is the signature. Everything else stays quiet.
   ========================================================================== */

:root{
  /* Ground */
  --chart:      #F4F5F0;   /* bone chart paper */
  --chart-2:    #EAECE4;   /* recessed panel */
  --basemap:    #101820;   /* night basemap — inverted bands */
  --basemap-2:  #182430;

  /* Ink */
  --ink:        #10161C;
  --ink-soft:   #4B5560;
  --ink-faint:  #626B75;   /* AA on chart, panel and white */
  --ink-invert: #F4F5F0;
  --ink-invert-soft: #A8B2BC;

  /* Rules */
  --rule:       #D6D9CF;
  --rule-hard:  #B9BEB2;
  --rule-invert:#2A3742;

  /* Measured teal — CTAs, top-3, links */
  --beacon:     #0D6E6E;
  --beacon-lo:  #0A5757;
  --beacon-hi:  #12908C;
  --beacon-wash:#E2EEEC;

  /* Data ramp — heat grid ONLY. Never decorative. */
  --rank-1:     #0D6E6E;
  --rank-2:     #4A8F76;
  --rank-3:     #8DAA6B;
  --rank-4:     #D8B44A;
  --rank-5:     #B84A33;   /* darkened: AA at 11.5px */

  /* Flag — used only for "what we don't do" / cautions */
  --flag:       #A8412F;
  --flag-wash:  #F6E9E5;

  /* Type */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --ui:      "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale */
  --step--1: clamp(.82rem, .80rem + .10vw, .90rem);
  --step-0:  clamp(1.02rem, .99rem + .16vw, 1.14rem);
  --step-1:  clamp(1.22rem, 1.15rem + .34vw, 1.44rem);
  --step-2:  clamp(1.46rem, 1.33rem + .64vw, 1.85rem);
  --step-3:  clamp(1.75rem, 1.52rem + 1.10vw, 2.45rem);
  --step-4:  clamp(2.05rem, 1.62rem + 2.05vw, 3.40rem);

  /* Space */
  --s1: .35rem; --s2: .65rem; --s3: 1rem; --s4: 1.5rem;
  --s5: 2.25rem; --s6: 3.25rem; --s7: 4.75rem; --s8: 7rem;

  --measure: 68ch;
  --wide: 1180px;
  --focus: 3px solid var(--beacon-hi);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--chart);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--step-0);
  line-height:1.68;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}

/* --- Chart-paper grid, very faint. The page itself is a survey sheet. --- */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(16,22,28,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16,22,28,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, #000 0%, transparent 75%);
}
body > *{ position:relative; z-index:1; }

/* --------------------------------- Type --------------------------------- */
h1,h2,h3,h4,h5{
  font-family:var(--display); font-weight:700;
  line-height:1.12; letter-spacing:-.021em;
  margin:0 0 var(--s3); color:var(--ink); text-wrap:balance;
}
h1{ font-size:var(--step-4); letter-spacing:-.03em; }
h2{ font-size:var(--step-3); margin-top:var(--s6); }
h3{ font-size:var(--step-1); margin-top:var(--s5); letter-spacing:-.012em; }
h4{ font-size:var(--step-0); margin-top:var(--s4); font-weight:700; }
p{ margin:0 0 var(--s4); max-width:var(--measure); }
strong{ font-weight:600; }

a{ color:var(--beacon-lo); text-underline-offset:.18em; text-decoration-thickness:1px; }
a:hover{ color:var(--beacon-hi); }
:focus-visible{ outline:var(--focus); outline-offset:3px; border-radius:2px; }

/* Mono is the measurement register: labels, coordinates, figures. */
.eyebrow{
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--beacon-lo);
  display:flex; align-items:center; gap:var(--s2); margin:0 0 var(--s3);
}
.eyebrow::before{
  content:""; width:22px; height:1px; background:var(--beacon); flex:none;
}
.eyebrow--invert{ color:var(--beacon-hi); }
.eyebrow--invert::before{ background:var(--beacon-hi); }

.lede{ font-size:var(--step-1); line-height:1.5; color:var(--ink-soft); max-width:60ch; }

ul,ol{ max-width:var(--measure); padding-left:1.15em; margin:0 0 var(--s4); }
li{ margin-bottom:var(--s2); }
ul.ticks{ list-style:none; padding-left:0; }
ul.ticks li{ position:relative; padding-left:1.6em; }
ul.ticks li::before{
  content:"—"; position:absolute; left:0; top:0;
  font-family:var(--mono); color:var(--beacon); font-size:.85em;
}

/* ------------------------------- Layout --------------------------------- */
.wrap{ width:min(100% - 2.5rem, var(--wide)); margin-inline:auto; }
.col{ max-width:var(--measure); }
.band{ padding-block:var(--s7); }
.band--tight{ padding-block:var(--s6); }
/* A faint geo-grid texture under every dark band, so pages that carry no
   photography still read as the same measured, data-grid product as the
   ones that do. Pure CSS gradients, not an image — costs nothing, no request,
   scales to any band on the site. Layers: two soft colour blooms (the same
   teal/rust the rest of the site uses for "on" and "off" states), then a
   grid-line lattice at 48px, all under the flat basemap colour. */
.band--dark{
  background:
    radial-gradient(circle at 12% 18%, rgba(79,179,174,.07), transparent 42%),
    radial-gradient(circle at 88% 78%, rgba(196,87,58,.05), transparent 46%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 48px),
    var(--basemap);
  color:var(--ink-invert);
}
.band--dark h1,.band--dark h2,.band--dark h3,.band--dark h4{ color:var(--ink-invert); }
.band--dark p,.band--dark li{ color:var(--ink-invert-soft); }
.band--dark a{ color:var(--beacon-hi); }
/* Buttons must win over the generic dark-band link colour (equal specificity,
   so these have to come after and be more specific). */
.band--dark a.btn--primary,.hero a.btn--primary,
.band--dark a.btn--primary:hover,.hero a.btn--primary:hover{ color:#fff; }
.band--dark a.btn--ghost,.hero a.btn--ghost{ color:var(--ink-invert); }
.band--panel{ background:var(--chart-2); }

/* Section divider with coordinate ticks — a chart edge, not a plain rule. */
.tickrule{ height:11px; border-top:1px solid var(--rule-hard); position:relative; }
.tickrule::after{
  content:""; position:absolute; inset:0 0 auto 0; height:6px;
  background-image:linear-gradient(to right, var(--rule-hard) 1px, transparent 1px);
  background-size:32px 100%;
}

.grid2{ display:grid; gap:var(--s5); grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.grid3{ display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }

/* -------------------------------- Cards --------------------------------- */
.card{
  background:var(--chart); border:1px solid var(--rule);
  padding:var(--s4); border-radius:2px;
}
.card h2,.card h3,.card h4{ margin-top:0; }
.card h2{ font-size:var(--step-1); letter-spacing:-.012em; }
.card p:last-child,.card ul:last-child{ margin-bottom:0; }
.band--dark .card{ background:var(--basemap-2); border-color:var(--rule-invert); }

.card--link{ display:block; text-decoration:none; color:inherit; transition:border-color .18s, transform .18s; }
.card--link:hover{ border-color:var(--beacon); transform:translateY(-2px); }
.card--link .card__go{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--beacon-lo);
}

/* Callouts */
.note{
  border-left:3px solid var(--beacon); background:var(--beacon-wash);
  padding:var(--s4); margin:var(--s5) 0; max-width:var(--measure); border-radius:0 2px 2px 0;
}
.note .note-head{
  font-family:var(--display); font-weight:700; font-size:var(--step-0);
  line-height:1.3; margin:0 0 var(--s2); color:var(--ink); letter-spacing:-.012em;
}
.note p:last-child{ margin-bottom:0; }
.note--flag{ border-left-color:var(--flag); background:var(--flag-wash); }

/* Definition / key-takeaway blocks — the AI-citable units */
.answer{
  border:1px solid var(--rule-hard); background:#fff;
  padding:var(--s4) var(--s4) var(--s3); margin:0 0 var(--s5);
  max-width:var(--measure); border-radius:2px;
}
.answer__label{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:var(--s2);
}
.answer p:last-child{ margin-bottom:var(--s3); }

/* Stats — figures set in mono so they read as measurements */
.stats{ display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); margin:var(--s5) 0; }
.stat__n{ font-family:var(--mono); font-size:var(--step-3); font-weight:600; color:var(--beacon-lo); display:block; line-height:1; letter-spacing:-.02em; }
.band--dark .stat__n{ color:var(--beacon-hi); }
.stat__l{ display:block; margin-top:var(--s2); font-size:var(--step--1); color:var(--ink-soft); line-height:1.4; }
.band--dark .stat__l{ color:var(--ink-invert-soft); }
.stat__src{ display:block; margin-top:var(--s1); font-family:var(--mono); font-size:.66rem; color:var(--ink-faint); }

/* -------------------------------- Buttons -------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--ui); font-weight:600; font-size:.96rem; letter-spacing:-.005em;
  padding:.86em 1.5em; border-radius:2px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; transition:background .18s, color .18s, border-color .18s;
}
.btn--primary{ background:var(--beacon); color:#fff; }
.btn--primary:hover{ background:var(--beacon-lo); color:#fff; }
.btn--ghost{ border-color:var(--rule-hard); color:var(--ink); background:transparent; }
.btn--ghost:hover{ border-color:var(--ink); color:var(--ink); background:rgba(16,22,28,.04); }
/* Any dark surface — .band--dark OR .hero. Previously only .band--dark was
   covered, which left the hero's secondary button at 1.02:1 (invisible). */
.band--dark .btn--ghost,
.hero .btn--ghost{
  border-color:var(--ink-invert-soft); color:var(--ink-invert); background:transparent;
}
.band--dark .btn--ghost:hover,
.hero .btn--ghost:hover{
  border-color:var(--ink-invert); color:var(--ink-invert); background:rgba(244,245,240,.08);
}
.btn-row{ display:flex; flex-wrap:wrap; gap:var(--s3); margin:var(--s5) 0 var(--s3); }

/* ============================ SIGNATURE: geo-grid ==========================
   A 7x7 scan grid. Centre ranks well; edges fall off. This is literally
   the product, so it is the one place the design spends any boldness.
   ========================================================================== */
.geogrid{
  --cell:38px;
  display:inline-grid; grid-template-columns:repeat(7,var(--cell));
  gap:4px; padding:18px; position:relative;
  background:var(--basemap-2); border:1px solid var(--rule-invert); border-radius:2px;
}
.geogrid::before,.geogrid::after{
  content:""; position:absolute; font-family:var(--mono); font-size:.6rem;
  color:var(--ink-invert-soft); letter-spacing:.12em;
}
.geogrid::before{ content:"SCAN 7×7"; top:-1.35rem; left:0; }
.geogrid::after{ content:"5 KM RADIUS"; bottom:-1.35rem; right:0; }
.geogrid i{
  display:grid; place-items:center; aspect-ratio:1; border-radius:2px;
  font-family:var(--mono); font-size:.72rem; font-weight:600; font-style:normal;
  color:#08120F; background:var(--rank-5);
}
.geogrid i[data-r="1"]{ background:var(--rank-1); color:#EAF6F4; }
.geogrid i[data-r="2"]{ background:var(--rank-2); color:#06120C; }
.geogrid i[data-r="3"]{ background:var(--rank-3); }
.geogrid i[data-r="4"]{ background:var(--rank-4); }
.geogrid i[data-r="5"]{ background:var(--rank-5); color:#FFFFFF; }
.geogrid__legend{
  display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s5);
  font-family:var(--mono); font-size:.68rem; color:var(--ink-invert-soft);
}
.geogrid__legend span{ display:flex; align-items:center; gap:.45em; }
.geogrid__legend b{ width:11px; height:11px; border-radius:2px; display:block; }

/* Sweep pass — one orchestrated moment, disabled under reduced-motion. */
@media (prefers-reduced-motion: no-preference){
  .geogrid i{ animation:settle .5s ease-out backwards; }
  @keyframes settle{ from{ opacity:0; transform:scale(.72); } to{ opacity:1; transform:none; } }
}
@media (max-width:560px){ .geogrid{ --cell:30px; padding:12px; } }

/* ------------------------------ Pricing orbit ------------------------------
   The 12-week roadmap, laid out as phases orbiting the business rather than
   a numbered list. A runner dot keeps circling to read as "this keeps
   running"; each phase pulses in turn on the same lap. Decorative — the
   roadmap is stated in full, in text, elsewhere on the page. */
.pr-hero{
  display:grid; gap:var(--s6); grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  align-items:center;
}
.pr-hero__copy .lede{ max-width:52ch; }
.pr-orbit{
  position:relative; width:100%; max-width:340px; aspect-ratio:1; margin-inline:auto;
}
.pr-orbit__ring{
  position:absolute; inset:12%; border-radius:50%; border:1px dashed var(--rule-invert);
}
.pr-orbit__center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:120px; padding:.85em 1em; border-radius:2px; text-align:center;
  background:var(--basemap-2); border:1px solid var(--rule-invert);
  box-shadow:0 18px 36px rgba(0,0,0,.4);
  display:flex; flex-direction:column; gap:.3em;
}
.pr-orbit__center-w{ font-family:var(--display); font-weight:700; font-size:1rem; color:var(--ink-invert); }
.pr-orbit__center-l{ font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-invert-soft); }
.pr-orbit__node{
  position:absolute; top:50%; left:50%; z-index:1;
  transform:rotate(var(--a)) translate(148px) rotate(calc(-1 * var(--a)));
  width:112px; margin:-32px 0 0 -56px; padding:.55em .7em; border-radius:2px;
  text-align:center; background:var(--basemap-2); border:1px solid var(--rule-invert);
  display:flex; flex-direction:column; gap:.15em;
}
.pr-orbit__node-w{ font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--beacon-hi); }
.pr-orbit__node-l{ font-family:var(--ui); font-size:.78rem; color:var(--ink-invert-soft); }
.pr-orbit__runner{
  position:absolute; top:50%; left:50%; width:9px; height:9px; margin:-4.5px;
  border-radius:50%; background:var(--beacon-hi); box-shadow:0 0 12px 3px rgba(79,179,174,.75);
  z-index:1;
}
@media (max-width:900px){
  .pr-hero{ grid-template-columns:1fr; }
  .pr-orbit{ max-width:280px; margin-top:var(--s5); }
  .pr-orbit__node{ transform:rotate(var(--a)) translate(118px) rotate(calc(-1 * var(--a))); }
}
@media (prefers-reduced-motion: no-preference){
  .pr-orbit__runner{ animation:pr-orbit-run 9s linear infinite; }
  @keyframes pr-orbit-run{
    from{ transform:rotate(0deg) translate(148px); }
    to{ transform:rotate(360deg) translate(148px); }
  }
  .pr-orbit__node{ animation:pr-orbit-pulse 9s cubic-bezier(.22,.68,.24,1) infinite; animation-delay:calc(var(--i,0) * 2.25s); }
  @keyframes pr-orbit-pulse{
    0%,4%{ background:var(--basemap-2); border-color:var(--rule-invert); box-shadow:none; }
    9%{ background:#123d3b; border-color:var(--beacon-hi); box-shadow:0 0 18px 2px rgba(79,179,174,.4); }
    18%,100%{ background:var(--basemap-2); border-color:var(--rule-invert); box-shadow:none; }
  }
  @media (max-width:900px){
    .pr-orbit__runner{ animation-name:pr-orbit-run-sm; }
    @keyframes pr-orbit-run-sm{
      from{ transform:rotate(0deg) translate(118px); }
      to{ transform:rotate(360deg) translate(118px); }
    }
  }
}

/* --------------------------------- Hero ---------------------------------- */
.hero{ background:var(--basemap); color:var(--ink-invert); padding-block:var(--s7) var(--s7); overflow:hidden; }
.hero h1,.hero h2,.hero h3{ color:var(--ink-invert); }
.hero h1{ max-width:19ch; }
.hero .lede,.hero p,.hero li{ color:var(--ink-invert-soft); }
.hero a:not(.btn){ color:var(--beacon-hi); }
.hero__inner{ display:grid; gap:var(--s6); grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center; }
@media (max-width:900px){ .hero__inner{ grid-template-columns:1fr; } }
.hero__meta{
  display:flex; flex-wrap:wrap; gap:var(--s4); margin-top:var(--s5);
  font-family:var(--mono); font-size:.72rem; color:var(--ink-invert-soft);
  border-top:1px solid var(--rule-invert); padding-top:var(--s3);
}

/* --------------------------------- Tables -------------------------------- */
.tablewrap{ overflow-x:auto; margin:var(--s5) 0; border:1px solid var(--rule); background:#fff; }
table{ border-collapse:collapse; width:100%; font-family:var(--ui); font-size:var(--step--1); }
caption{ text-align:left; font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); padding:var(--s3) var(--s3) 0; }
th,td{ padding:.7rem .85rem; border-bottom:1px solid var(--rule); text-align:left; vertical-align:top; }
th{ font-weight:700; background:var(--chart-2); border-bottom:1px solid var(--rule-hard); }
tbody tr:last-child td{ border-bottom:0; }

/* ---------------------------------- FAQ ---------------------------------- */
.faq{ max-width:var(--measure); border-top:1px solid var(--rule); }
.faq details{ border-bottom:1px solid var(--rule); }
.faq summary{
  cursor:pointer; list-style:none; padding:var(--s4) 2.2rem var(--s4) 0; position:relative;
  font-family:var(--display); font-weight:600; font-size:var(--step-0); line-height:1.35;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:.2rem; top:50%; transform:translateY(-50%);
  font-family:var(--mono); color:var(--beacon); font-size:1.15rem; font-weight:400;
}
.faq details[open] summary::after{ content:"–"; }
.faq details > *:not(summary){ margin-left:0; }
.faq details p:last-child{ padding-bottom:var(--s4); margin-bottom:0; }

/* --------------------------------- Header -------------------------------- */
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:var(--s3); top:var(--s3); z-index:99; background:#fff; padding:.7em 1.1em; border:2px solid var(--beacon); }

.site-header{ background:var(--basemap); border-bottom:1px solid var(--rule-invert); position:sticky; top:0; z-index:50; }
.site-header__in{ display:flex; align-items:center; gap:var(--s4); padding-block:.85rem; }
.brand{ font-family:var(--display); font-weight:700; font-size:1.02rem; letter-spacing:-.02em; color:var(--ink-invert); text-decoration:none; display:flex; align-items:center; gap:.55em; flex:none; }
/* Light plate so the logo reads on the dark bar regardless of its own background */
.brand__logo{
  height:48px; width:auto; max-width:200px; flex:none; display:block; border-radius:3px;
  background:#fff; padding:4px 8px; object-fit:contain;
}
.brand span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.site-nav{ margin-left:auto; display:flex; align-items:center; gap:var(--s4); }
.site-nav a,.site-nav__trigger{ font-family:var(--ui); font-size:.86rem; font-weight:500; color:var(--ink-invert-soft); text-decoration:none; }
.site-nav a:hover,.site-nav a[aria-current="page"],.site-nav__item:hover .site-nav__trigger{ color:var(--ink-invert); }
.site-nav .btn{ padding:.6em 1.05em; font-size:.85rem; }
/* .site-nav a beat .btn--primary on specificity and washed the CTA to 2.81:1 */
.site-nav .btn--primary,.site-nav .btn--primary:hover{ color:#fff; }
.navtoggle{ display:none; margin-left:auto; background:none; border:1px solid var(--rule-invert); color:var(--ink-invert); font-family:var(--mono); font-size:.75rem; padding:.5em .8em; border-radius:2px; cursor:pointer; }
@media (max-width:940px){
  .navtoggle{ display:block; }
  .site-nav{ display:none; width:100%; order:3; flex-direction:column; align-items:stretch; gap:0; padding-bottom:var(--s3); }
  .site-nav[data-open="true"]{ display:flex; }
  .site-nav a{ padding:.75em 0; border-bottom:1px solid var(--rule-invert); }
  .site-nav .btn{ margin-top:var(--s3); justify-content:center; border-bottom:0; }
  .site-header__in{ flex-wrap:wrap; }
}

/* Services dropdown in the top nav — hover/focus reveals the six pillar pages.
   The gap between trigger and panel used to be a plain margin-top, which is a
   dead zone: the mouse leaves .site-nav__item's hoverable box while crossing
   it, hover unsets, and the panel closes before the pointer ever reaches it.
   Moving that space into padding-bottom (with an equal negative margin so it
   costs no layout height) keeps the box — and the hover state — continuous
   all the way from the trigger into the panel. */
.site-nav__item{
  position:relative; display:flex; align-items:center;
  padding-bottom:.9rem; margin-bottom:-.9rem;
}
.site-nav__trigger{
  background:none; border:0; padding:0; margin:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:.4em;
}
.site-nav__trigger::after{
  content:""; width:.38em; height:.38em; margin-top:-.15em;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg); opacity:.75;
}
.site-nav__panel{
  position:absolute; top:100%; left:0; min-width:230px;
  background:var(--basemap); border:1px solid var(--rule-invert); border-radius:8px;
  padding:.4rem; display:none; flex-direction:column; box-shadow:0 16px 32px rgba(0,0,0,.35);
  z-index:60;
}
.site-nav__item:hover .site-nav__panel,
.site-nav__item:focus-within .site-nav__panel{ display:flex; }
.site-nav__panel a{ padding:.6em .7em; border-radius:5px; white-space:nowrap; }
.site-nav__panel a:hover,.site-nav__panel a:focus-visible{ background:rgba(255,255,255,.08); }
@media (max-width:940px){
  .site-nav__item{ flex-direction:column; align-items:stretch; padding-bottom:0; margin-bottom:0; }
  .site-nav__trigger{ padding:.75em 0; border-bottom:1px solid var(--rule-invert); justify-content:space-between; }
  .site-nav__panel{
    position:static; display:flex; margin-top:0; border:0; border-radius:0; box-shadow:none;
    background:none; padding:0 0 0 var(--s3);
  }
  .site-nav__panel a{ padding:.6em 0; border-bottom:1px solid var(--rule-invert); border-radius:0; }
}

/* The subnav title is four terms, each its own page, joined by middots.
   The global `a{color:...}` reset otherwise wins over the inherited title
   color, since a direct rule always beats inheritance. */
.subnav__title{ display:flex; flex-wrap:wrap; align-items:baseline; }
.subnav__title a{ color:inherit; text-decoration:none; }
.subnav__title a:hover,.subnav__title a:focus-visible{ text-decoration:underline; }
.subnav__title-sep{ opacity:.5; margin:0 .4em; }

/* Grouped headings inside the mobile/touch nav tray. */
.subnav__tray-head{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); margin-top:.4em;
}
.subnav__tray-head:first-child{ margin-top:0; }

/* ------------------------------ Breadcrumbs ------------------------------ */
.crumbs{ font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; color:var(--ink-invert-soft); padding-top:var(--s4); }
.crumbs a{ color:var(--ink-invert-soft); text-decoration:none; }
.crumbs a:hover{ color:var(--ink-invert); text-decoration:underline; }
.crumbs span{ margin:0 .5em; opacity:.5; }

/* -------------------------------- Footer --------------------------------- */
.site-footer{ background:var(--basemap); color:var(--ink-invert-soft); padding-block:var(--s6) var(--s5); font-family:var(--ui); font-size:var(--step--1); }
.site-footer .footer-head{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-invert); font-weight:500; margin:0 0 var(--s3); }
.site-footer a{ color:var(--ink-invert-soft); text-decoration:none; display:block; padding:.22em 0; }
.site-footer a:hover{ color:var(--ink-invert); text-decoration:underline; }
.site-footer__cols{ display:grid; gap:var(--s5); grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.site-footer__base{ margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--rule-invert); display:flex; flex-wrap:wrap; gap:var(--s4); justify-content:space-between; font-family:var(--mono); font-size:.68rem; }

/* --------------------------------- Forms --------------------------------- */
.field{ display:block; margin-bottom:var(--s3); max-width:34rem; }
.field label{ display:block; font-family:var(--ui); font-weight:600; font-size:.88rem; margin-bottom:.35em; }
.field input,.field select,.field textarea{
  width:100%; padding:.72em .85em; font-family:var(--ui); font-size:.95rem;
  border:1px solid var(--rule-hard); border-radius:2px; background:#fff; color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:var(--focus); outline-offset:1px; border-color:var(--beacon); }
.field__hint{ font-size:.8rem; color:var(--ink-faint); margin-top:.3em; font-family:var(--ui); }

/* Booking embed */
.booking{ border:1px solid var(--rule); background:#fff; padding:var(--s3); border-radius:2px; }
.booking iframe{ width:100%; min-height:660px; border:0; display:block; }

/* ------------------------------- Utilities -------------------------------- */
.mono{ font-family:var(--mono); }
.small{ font-size:var(--step--1); color:var(--ink-soft); }
.center{ text-align:center; }
.center p,.center .lede,.center h2{ margin-inline:auto; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.mt0{ margin-top:0; }

/* Sources list — visible citation trail. Central to the trust position. */
.sources{ font-family:var(--ui); font-size:.82rem; color:var(--ink-soft); border-top:1px solid var(--rule); padding-top:var(--s3); margin-top:var(--s6); max-width:var(--measure); }
.sources .sources-head{ font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 var(--s2); }
.sources ol{ padding-left:1.2em; margin:0; }
.sources li{ margin-bottom:.35em; }

/* Editorial placeholder — never ships to production silently. */
.todo{
  background:repeating-linear-gradient(45deg,#FFF4D6,#FFF4D6 10px,#FFEFC4 10px,#FFEFC4 20px);
  border:1px dashed #B8912A; color:#5C4708; padding:var(--s3) var(--s4);
  font-family:var(--mono); font-size:.8rem; line-height:1.5; margin:var(--s4) 0; border-radius:2px;
}
.todo b{ display:block; margin-bottom:.35em; letter-spacing:.08em; text-transform:uppercase; font-size:.7rem; }

@media print{
  .site-header,.site-footer,.btn,.booking{ display:none; }
  body{ background:#fff; } body::before{ display:none; }
}




.related li{ margin-bottom:var(--s3); }
.related a{ font-weight:600; }

/* Territory status board */
.terr-board{
  overflow-x:auto;
  border:1px solid var(--ink);
  background:#fff;
  margin-top:var(--s5);
}
.terr-board__row{
  display:grid;
  grid-template-columns:minmax(140px,1.2fr) repeat(10, minmax(72px,1fr));
  min-width:980px;
}
.terr-board__row--head{ background:var(--basemap); color:var(--chart); }
.terr-board__cell{
  border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:.65rem .5rem;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
}
.terr-board__cell--label{
  text-align:left;
  justify-content:flex-start;
  font-family:var(--ui);
  font-size:.85rem;
  letter-spacing:0;
  text-transform:none;
  font-weight:600;
  padding-left:.85rem;
  background:var(--chart-2, #EAECE4);
  position:sticky;
  left:0;
  z-index:1;
}
.terr-board__row--head .terr-board__cell--label{ background:var(--basemap); color:var(--chart); }
.terr-board__cell--head{ font-size:.62rem; line-height:1.25; }
.terr-board__cell--open{ background:#fff; color:var(--beacon-lo); }
.terr-board__cell--assessing{ background:var(--rank-4); color:var(--basemap); font-weight:600; }
.terr-board__cell--claimed{ background:var(--flag); color:#fff; font-weight:600; }
@media (max-width:720px){
  .terr-board__cell{ font-size:.6rem; padding:.5rem .35rem; }
}