/* Self-hosted fonts (was Google Fonts) — latin + latin-ext, variable woff2. */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;src:url('/assets/fonts/bricolage-grotesque-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;src:url('/assets/fonts/bricolage-grotesque-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:400 700;font-display:swap;src:url('/assets/fonts/instrument-sans-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:400 700;font-display:swap;src:url('/assets/fonts/instrument-sans-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/instrument-sans-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/instrument-sans-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* Home Straight Garage Doors — Wyong / Tuggerah NSW
   Chalk-and-silk racecourse system (brand-kit/system.md).
   Discipline: one silk block per viewport; loam never as body text;
   turf is a confirmation state only; the running rail always has post-gaps. */

:root {
  /* Ink + grounds */
  --ink:          oklch(25.5% 0.048 293);  /* #241E38 */
  --ink-soft:     oklch(44.0% 0.043 295);  /* #544E68 */
  --paper:        oklch(95.9% 0.016 86);   /* #F6F1E6 */
  --paper-raised: oklch(92.0% 0.026 87);   /* #ECE4D2 */
  --rail:         oklch(98.2% 0.009 94);   /* #FBF9F2 */

  /* Primary — racing-silk violet */
  --silk:         oklch(35.3% 0.118 288);  /* #3B2C74 — urgent CTA */
  --silk-deep:    oklch(29.5% 0.097 288);  /* #2C2159 — footer/hero base */
  --silk-soft:    oklch(72.5% 0.097 292);  /* #A79BDE — on-dark only */

  /* Accent — track loam / saddle leather */
  --loam:         oklch(62.2% 0.093 60);   /* #B0794A — display/non-text only */
  --loam-deep:    oklch(47.1% 0.080 65);   /* #7A5126 — considered CTA */

  /* Support */
  --galv:         oklch(69.5% 0.025 85);   /* borders/trim */
  --galv-deep:    oklch(46.5% 0.025 89);   /* muted labels */
  --turf:         oklch(48.3% 0.063 154);  /* confirmation only */

  --font-display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --font-body:    "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1140px;
  --pad: clamp(1.1rem, 4vw, 2rem);
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.09375rem; /* 17.5px — read in the driveway */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 .5em; }
h1 { font-weight: 700; font-size: clamp(2.1rem, 5.2vw, 3.4rem); }
h2 { font-weight: 600; font-size: clamp(1.55rem, 3.4vw, 2.2rem); }
h3 { font-weight: 600; font-size: 1.22rem; }
p  { margin: 0 0 1em; }
/* the page hook: H1 orients (what+where), the hook keeps its line right below, quieter and subordinate */
p.hook {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.12rem, 2.2vw, 1.5rem); line-height: 1.2;
  letter-spacing: -0.01em; color: var(--ink-soft);
  max-width: 46ch; margin: -0.15em 0 0.7em;
}
.on-dark p.hook { color: var(--silk-soft); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--silk); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--silk); outline-offset: 2px; border-radius: 2px; }
.on-dark :focus-visible { outline-color: var(--silk-soft); }
::placeholder { color: color-mix(in oklch, var(--ink-soft) 32%, transparent); }
::selection { background: var(--silk); color: var(--rail); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.measure { max-width: 62ch; }

/* Kit list marker + hr */
ul.post-list { list-style: none; padding-left: 0; }
ul.post-list li { padding-left: 1.5em; position: relative; margin-bottom: .55em; }
ul.post-list li::before {
  content: ""; position: absolute; left: 0; top: .34em;
  width: .85em; height: .85em;
  background: url("/assets/micro/bullet.svg") no-repeat center / contain;
}
hr.divider {
  border: 0; height: 22px; margin: 2.6rem auto; width: min(420px, 70%);
  background: url("/assets/micro/divider.svg") no-repeat center / contain;
}

/* Running rail — posts and gaps, never a continuous line */
.rail-rule {
  height: 3px; border: 0; margin: 0;
  background: repeating-linear-gradient(90deg, var(--galv) 0 42px, transparent 42px 60px);
}
.on-dark .rail-rule, .rail-rule.light {
  background: repeating-linear-gradient(90deg, var(--rail) 0 42px, transparent 42px 60px);
  opacity: .55;
}

/* Eyebrow labels */
.eyebrow {
  font-family: var(--font-display); font-weight: 600; font-size: .82rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--loam-deep);
  margin: 0 0 .8em;
}
.on-dark .eyebrow { color: var(--silk-soft); }

/* ── Buttons — the two paths ──────────────────────────────────────────── */
.btn {
  display: inline-block; font-family: var(--font-display); font-weight: 600;
  font-size: 1.02rem; text-decoration: none; border: 0; cursor: pointer;
  padding: .82em 1.5em; border-radius: 3px; /* squared, saddlecloth-like */
  transition: background-color .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }
.btn-silk { background: var(--silk); color: var(--rail); }
.btn-silk:hover { background: var(--silk-deep); color: var(--rail); }
.btn-loam { background: var(--loam-deep); color: var(--rail); }
.btn-loam:hover { background: color-mix(in oklch, var(--loam-deep) 84%, black); color: var(--rail); }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--galv); }
.btn-line:hover { box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); }
.on-dark .btn-line { color: var(--rail); box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--rail) 55%, transparent); }
.on-dark .btn-line:hover { box-shadow: inset 0 0 0 2px var(--rail); color: var(--rail); }
/* dark sections recolour links; filled CTAs must re-assert their own ink */
.on-dark a { color: var(--silk-soft); }
.on-dark a:hover { color: var(--rail); }
.on-dark .btn-silk, .on-dark .btn-silk:hover { color: var(--rail); box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--rail) 28%, transparent); }
.on-dark .btn-loam, .on-dark .btn-loam:hover { color: var(--rail); }

/* Saddlecloth numeral plate */
.plate {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.35em; padding: .28em .5em;
  background: var(--silk); color: var(--rail);
  font-family: var(--font-display); font-weight: 700; font-stretch: 80%;
  font-variant-numeric: tabular-nums; font-size: 1.05rem; line-height: 1;
  border-radius: 3px;
}
.plate.loam { background: var(--loam-deep); }
.plate.ghost { background: transparent; color: var(--galv-deep); box-shadow: inset 0 0 0 2px var(--galv); }

/* ── Header ───────────────────────────────────────────────────────────── */
.meeting-strip {
  background: var(--ink); color: var(--rail);
  font-size: .82rem; letter-spacing: .04em;
}
.meeting-strip .wrap {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-block: .42em; align-items: baseline;
}
.meeting-strip .locality { opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meeting-strip .channel { color: var(--silk-soft); white-space: nowrap; }

.site-head { background: var(--paper); position: relative; }
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.2rem; padding-block: .95rem;
}
.site-head .lockup img { height: 60px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 1.45rem; }
.site-nav a {
  font-family: var(--font-display); font-weight: 600; font-size: .99rem;
  color: var(--ink); text-decoration: none; padding-block: .3em;
  border-bottom: 3px solid transparent;
}
.site-nav a:hover { border-bottom-color: var(--loam); }
.site-nav a.nav-cta {
  background: var(--silk); color: var(--rail); padding: .55em 1.1em;
  border-radius: 3px; border-bottom: 0;
}
.site-nav a.nav-cta:hover { background: var(--silk-deep); }
/* active page — <body data-page> */
body[data-page="services"] .site-nav a[href="/services/"],
body[data-page="areas"]    .site-nav a[href="/areas/"],
body[data-page="guides"]   .site-nav a[href="/guides/"],
body[data-page="about"]    .site-nav a[href="/about/"] { border-bottom-color: var(--silk); }

.nav-toggle {
  display: none; background: none; border: 2px solid var(--galv); border-radius: 3px;
  padding: .45em .7em; font-family: var(--font-display); font-weight: 600;
  font-size: .95rem; color: var(--ink); cursor: pointer;
}
.head-rail { /* the ground line under the header — loam earth broken by posts */
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--loam) 0 64px, transparent 64px 84px);
}

@media (max-width: 820px) {
  .site-head .lockup img { height: 46px; } /* every word of the lockup stays readable at this floor */
  .nav-toggle { display: inline-block; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
    background: var(--silk-deep); flex-direction: column; align-items: stretch;
    gap: 0; padding: .6rem 0 1rem; box-shadow: 0 14px 28px rgba(36,30,56,.28);
  }
  .site-nav.open { display: flex; }
  .site-nav a {
    color: var(--rail); padding: .8em var(--pad); border-bottom: 0; font-size: 1.08rem;
  }
  .site-nav a:hover { background: var(--silk); border-bottom: 0; }
  .site-nav a.nav-cta { margin: .6rem var(--pad) 0; text-align: center; }
  body[data-page] .site-nav a { border-bottom: 0; }
}

/* ── Sections ─────────────────────────────────────────────────────────── */
.section { padding-block: clamp(3rem, 7vw, 5rem); }
.section.raised { background: var(--paper-raised); }
.section.chalk-texture { background: var(--paper) url("/assets/textures/section-chalk-furlongs.webp") center / cover; }
.section.on-dark { background: var(--silk-deep) url("/assets/textures/section-violet-bands.webp") center / cover; color: var(--rail); }
.section.on-dark h2, .section.on-dark h3 { color: var(--rail); }
.watermarked { position: relative; }
.watermarked::before {
  content: ""; position: absolute; right: -60px; bottom: -40px;
  width: 420px; height: 420px; pointer-events: none;
  background: url("/assets/textures/watermark.svg") no-repeat center / contain;
}
.on-dark.watermarked::before { background-image: url("/assets/textures/watermark-reversed.svg"); }

/* ── Hero (home) ──────────────────────────────────────────────────────── */
.hero { padding-block: clamp(2.6rem, 6vw, 4.6rem) 0; overflow: hidden; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
  gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center;
}
.hero-copy p.lede { font-size: 1.16rem; color: var(--ink-soft); max-width: 46ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .8rem .9rem; margin-top: 1.5rem; }
.hero-fig { position: relative; margin: 0 0 2.4rem; }
.hero-fig img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px;
  box-shadow: 0 18px 40px -18px rgba(36,30,56,.45);
}
.hero-fig::after { /* the ground line the door finishes on — runs off the frame edge */
  content: ""; position: absolute; left: -14%; right: 8%; bottom: -16px; height: 5px;
  background: var(--loam); border-radius: 3px;
}
.hero-fig figcaption {
  position: absolute; left: -10px; bottom: 18px; transform: rotate(-1.2deg);
  background: var(--rail); color: var(--galv-deep); font-size: .8rem;
  padding: .35em .75em; border-radius: 2px; box-shadow: 0 3px 10px rgba(36,30,56,.18);
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-fig { margin-top: .4rem; }
  .hero-fig::after { left: -6%; }
}

/* ── The Home Straight Check ──────────────────────────────────────────── */
.check-panel {
  background: var(--silk-deep) url("/assets/textures/section-violet-bands.webp") center / cover;
  color: var(--rail); border-radius: 6px; padding: clamp(1.4rem, 4vw, 2.6rem);
  box-shadow: 0 24px 50px -22px rgba(36,30,56,.55);
}
.furlongs {
  display: flex; align-items: center; gap: 0; margin: 1.4rem 0 1.8rem;
  max-width: 560px;
}
.furlongs .fl {
  display: flex; flex-direction: column; align-items: center; gap: .4em;
  font-family: var(--font-display); font-weight: 700; font-stretch: 80%;
  font-size: .92rem; letter-spacing: .05em; color: var(--rail);
}
.furlongs .fl .disc {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent; box-shadow: inset 0 0 0 3px color-mix(in oklch, var(--rail) 40%, transparent);
  color: color-mix(in oklch, var(--rail) 55%, transparent);
  font-variant-numeric: tabular-nums; transition: background-color .2s, color .2s;
}
.furlongs .fl.active .disc { background: var(--rail); color: var(--silk); box-shadow: none; }
.furlongs .fl.done .disc { background: var(--loam); color: var(--rail); box-shadow: none; }
.furlongs .gap { /* the rail between markers — with its post-gaps */
  flex: 1; height: 3px; margin: 0 6px; align-self: flex-start; margin-top: 21px;
  background: repeating-linear-gradient(90deg, color-mix(in oklch, var(--rail) 55%, transparent) 0 14px, transparent 14px 22px);
}
.check-q { font-family: var(--font-display); font-weight: 600; font-size: 1.28rem; margin: 0 0 1rem; }
.check-opts { display: flex; flex-wrap: wrap; gap: .7rem; padding: 0; margin: 0; list-style: none; }
.check-opts a, .check-opts button {
  display: inline-block; background: transparent; color: var(--rail);
  border: 2px solid color-mix(in oklch, var(--rail) 45%, transparent); border-radius: 3px;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  padding: .68em 1.1em; cursor: pointer; text-decoration: none; text-align: left;
}
.check-opts a:hover, .check-opts button:hover { border-color: var(--rail); background: color-mix(in oklch, var(--rail) 10%, transparent); color: var(--rail); }
.check-result { margin-top: .4rem; }
.check-result .cause { font-size: 1.12rem; margin-bottom: .7rem; }
.check-result .steer {
  border-left: 4px solid var(--loam); padding: .5em .9em; margin: 0 0 1rem;
  background: color-mix(in oklch, var(--rail) 7%, transparent); border-radius: 0 3px 3px 0;
}
.check-result .fineline { font-size: .86rem; color: color-mix(in oklch, var(--rail) 72%, transparent); margin-top: 1rem; }
.check-back {
  background: none; border: 0; color: var(--silk-soft); font-size: .9rem;
  cursor: pointer; padding: 0; margin-top: 1.1rem; text-decoration: underline;
  font-family: var(--font-body);
}
.check-back:hover { color: var(--rail); }

/* ── Two markets / split cards ────────────────────────────────────────── */
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 2rem); }
@media (max-width: 760px) { .split-grid { grid-template-columns: 1fr; } }
.market-card {
  background: var(--rail); border-radius: 5px; overflow: hidden;
  border: 1px solid var(--galv);
  display: flex; flex-direction: column;
}
.market-card img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.market-card .body { padding: 1.4rem 1.5rem 1.6rem; flex: 1; display: flex; flex-direction: column; }
.market-card .body p { color: var(--ink-soft); }
.market-card .body .cardlink { margin-top: auto; font-family: var(--font-display); font-weight: 600; }

/* ── Services ─────────────────────────────────────────────────────────── */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.1rem; }
@media (min-width: 1000px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
.svc-tile {
  background: var(--rail); border: 1px solid var(--galv); border-radius: 5px;
  padding: 1.15rem 1.2rem 1.25rem; text-decoration: none; color: var(--ink);
  display: block; transition: border-color .15s ease, transform .15s ease;
}
.svc-tile:hover { border-color: var(--loam-deep); transform: translateY(-2px); color: var(--ink); }
.svc-tile img { width: 54px; height: 54px; margin-bottom: .6rem; }
.svc-tile h3 { margin-bottom: .3rem; font-size: 1.08rem; }
.svc-tile p { font-size: .93rem; color: var(--ink-soft); margin: 0; }

/* Service long sections (services page) */
.svc-section { display: grid; grid-template-columns: 64px 1fr; gap: 1.3rem; padding-block: 2.2rem; }
.svc-section + .svc-section { border-top: 2px solid transparent; border-image: repeating-linear-gradient(90deg, var(--galv) 0 42px, transparent 42px 60px) 2; }
.svc-section img.svc-icon { width: 64px; height: 64px; }
.svc-section .paths { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .9rem; }
@media (max-width: 640px) { .svc-section { grid-template-columns: 1fr; } .svc-section img.svc-icon { width: 54px; height: 54px; } }

/* ── The card (areas listing) ─────────────────────────────────────────── */
.runner-list { list-style: none; margin: 0; padding: 0; }
.runner {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1rem 1.2rem; align-items: baseline;
  padding: .95rem .4rem; border-bottom: 1px solid var(--galv);
}
.runner:first-child { border-top: 2px solid var(--galv-deep); }
.runner .no {
  font-family: var(--font-display); font-weight: 700; font-stretch: 80%;
  font-variant-numeric: tabular-nums; font-size: 1.35rem; color: var(--loam-deep);
  min-width: 3.2em; text-align: right;
}
.runner .no small { display: block; font: 600 .62rem/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--galv-deep); }
.runner .who strong { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; }
.runner .who strong a { text-decoration: none; }
.runner .who strong a:hover { text-decoration: underline; }
.runner .who span { display: block; color: var(--ink-soft); font-size: .95rem; }
.runner .side {
  font-family: var(--font-display); font-weight: 600; font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--galv-deep);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .runner { grid-template-columns: auto 1fr; }
  .runner .side { grid-column: 2; justify-self: start; }
}

/* ── Figures / prose pages ────────────────────────────────────────────── */
.page-head { padding-block: clamp(2.4rem, 5vw, 3.6rem) 0; }
.page-head .crumb { font-size: .88rem; color: var(--galv-deep); margin-bottom: 1rem; }
.page-head .crumb a { color: var(--galv-deep); }
.page-head .crumb a:hover { color: var(--ink); }
.page-head p.lede { font-size: 1.16rem; color: var(--ink-soft); max-width: 56ch; }

.figure-band { margin: 2.4rem 0; }
.figure-band img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; border-radius: 4px; }
.figure-band.tall img { aspect-ratio: 16 / 7; }
.figure-band figcaption { font-size: .86rem; color: var(--galv-deep); margin-top: .5rem; }

.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.2em; }
.prose h3 { margin-top: 1.7em; }
.prose blockquote {
  margin: 1.6em 0; padding: .2em 0 .2em 3.2em; position: relative;
  font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--silk);
}
.prose blockquote::before {
  content: ""; position: absolute; left: 0; top: .15em; width: 2.2em; height: 2.2em;
  background: url("/assets/micro/quote.svg") no-repeat center / contain; opacity: .8;
}
.prose table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.prose th, .prose td { text-align: left; padding: .55em .8em; border-bottom: 1px solid var(--galv); }
.prose th { font-family: var(--font-display); font-weight: 600; font-size: .92rem; }
.prose td.num, .prose th.num { text-align: right; }
.table-scroll { overflow-x: auto; }
.table-scroll table { min-width: 480px; }

.aside-note {
  background: var(--paper-raised); border-left: 4px solid var(--loam);
  padding: 1rem 1.2rem; border-radius: 0 4px 4px 0; margin: 1.6em 0;
}
.aside-note p:last-child { margin-bottom: 0; }

/* Worked scenario cards */
.scenario {
  background: var(--rail); border: 1px solid var(--galv); border-radius: 5px;
  padding: 1.3rem 1.4rem; margin: 1.4em 0;
}
.scenario .tag {
  display: inline-block; font: 600 .72rem/1 var(--font-display); letter-spacing: .12em;
  text-transform: uppercase; color: var(--rail); background: var(--galv-deep);
  padding: .45em .7em; border-radius: 3px; margin-bottom: .8rem;
}
.scenario h3 { margin-top: 0; }

/* Countdown strip — how a job runs */
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; counter-reset: none; }
.countdown .cd {
  background: var(--rail); border: 1px solid var(--galv); border-radius: 5px;
  padding: 1.1rem 1.15rem 1.2rem; position: relative;
}
.countdown .cd .plate { margin-bottom: .7rem; }
.countdown .cd h3 { font-size: 1.02rem; margin-bottom: .35rem; }
.countdown .cd p { font-size: .92rem; color: var(--ink-soft); margin: 0; }
.countdown .cd.post { background: var(--silk); border-color: var(--silk); color: var(--rail); }
.countdown .cd.post h3, .countdown .cd.post p { color: var(--rail); }
.countdown .cd.post .plate { background: var(--rail); color: var(--silk); }
@media (max-width: 900px) { .countdown { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .countdown { grid-template-columns: 1fr; } }

/* ── Enquiry form ─────────────────────────────────────────────────────── */
.enq-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
@media (max-width: 860px) { .enq-grid { grid-template-columns: 1fr; } }
.enq-form {
  background: var(--rail); border: 1px solid var(--galv); border-radius: 6px;
  padding: clamp(1.3rem, 3vw, 2rem);
}
.enq-form label { display: block; font: 600 .92rem/1.3 var(--font-body); margin: 1.05rem 0 .3rem; }
.enq-form label:first-of-type { margin-top: 0; }
.enq-form label .opt { font-weight: 400; color: var(--galv-deep); }
.enq-form input, .enq-form select, .enq-form textarea {
  width: 100%; font: 1rem/1.4 var(--font-body); color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--galv); border-radius: 3px;
  padding: .65em .8em;
}
.enq-form input:focus, .enq-form select:focus, .enq-form textarea:focus {
  outline: 3px solid var(--silk); outline-offset: 1px; border-color: var(--silk);
}
.enq-form textarea { min-height: 8.5em; resize: vertical; }
.enq-form input[type="file"] { border-style: dashed; background: var(--rail); font-size: .95rem; }
.enq-form input[type="file"]::file-selector-button {
  font: 600 .9rem/1.3 var(--font-body); color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--galv); border-radius: 3px;
  padding: .45em .9em; margin-right: .8em; cursor: pointer;
}
.enq-form .btn { margin-top: 1.4rem; width: 100%; font-size: 1.1rem; }
.form-msg { border-radius: 4px; padding: 1rem 1.2rem; margin-top: 1.2rem; }
.form-msg.ok { background: color-mix(in oklch, var(--turf) 12%, var(--rail)); color: var(--turf); border: 1.5px solid var(--turf); display: flex; gap: .9rem; align-items: flex-start; }
.form-msg.ok img { width: 54px; height: auto; flex: none; }
.form-msg.err { background: var(--paper-raised); color: var(--ink); border: 1.5px solid var(--loam-deep); }
.enq-aside .cd-v { border-left: 3px solid var(--galv); padding-left: 1.2rem; margin: 1.4rem 0 0; }
.enq-aside .cd-v .step { padding-bottom: 1.3rem; position: relative; }
.enq-aside .cd-v .step .plate { position: absolute; left: calc(-1.2rem - 3px); transform: translateX(-50%); }
.enq-aside .cd-v .step h3 { font-size: 1rem; margin: 0 0 .2rem; padding-left: 1.6rem; }
.enq-aside .cd-v .step p { font-size: .93rem; color: var(--ink-soft); margin: 0; padding-left: 1.6rem; }

/* ── Enquiry CTA band (partial) ───────────────────────────────────────── */
.cta-band { background: var(--silk-deep) url("/assets/textures/section-violet-bands.webp") center / cover; color: var(--rail); }
.cta-band .wrap { padding-block: clamp(2.6rem, 6vw, 4rem); display: grid; grid-template-columns: minmax(0, 3fr) auto; gap: 1.4rem 2.4rem; align-items: center; }
.cta-band h2 { color: var(--rail); margin-bottom: .35rem; }
.cta-band p { color: color-mix(in oklch, var(--rail) 82%, transparent); margin: 0; max-width: 52ch; }
.cta-band .actions { display: flex; flex-direction: column; gap: .8rem; }
.cta-band .actions .btn { text-align: center; }
@media (max-width: 760px) { .cta-band .wrap { grid-template-columns: 1fr; } .cta-band .actions { flex-direction: row; flex-wrap: wrap; } }

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-foot { background: var(--silk-deep); color: var(--rail); }
.site-foot .top { padding-block: 3rem 2.4rem; display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(3, 1fr); gap: 2rem; }
.site-foot .top img { height: 148px; width: auto; margin-bottom: 1rem; }
.site-foot p, .site-foot li { font-size: .95rem; color: color-mix(in oklch, var(--rail) 80%, transparent); }
.site-foot .foot-h { font: 600 .8rem/1.2 var(--font-display); letter-spacing: .13em; text-transform: uppercase; color: var(--rail); margin: 0 0 .8rem; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: .5em; }
.site-foot a { color: var(--silk-soft); text-decoration: none; }
.site-foot a:hover { color: var(--rail); text-decoration: underline; }
.site-foot .legal { padding-block: 1.3rem 1.6rem; font-size: .84rem; color: color-mix(in oklch, var(--rail) 65%, transparent); }
.site-foot .legal p { font-size: inherit; color: inherit; margin: 0 0 .4em; }
@media (max-width: 860px) { .site-foot .top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .site-foot .top { grid-template-columns: 1fr; } }

/* ── Utility ──────────────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 4vw, 2.8rem); align-items: center; }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }
.img-frame { position: relative; }
.img-frame img { border-radius: 4px; width: 100%; object-fit: cover; }
.img-frame::after {
  content: ""; position: absolute; left: 6%; right: -3%; bottom: -12px; height: 4px;
  background: var(--loam); border-radius: 3px;
}
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }

/* 404 */
.notfound { text-align: center; padding-block: clamp(3rem, 9vw, 6rem); }
.notfound img { width: min(300px, 60%); margin: 0 auto 1.6rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOTION LAYER — added post-build (motion pass). ADDITIVE ONLY: the resting
   design is untouched. These rules govern how the page BEHAVES on hover, focus
   and scroll, never how it looks at rest. GPU-friendly throughout: only
   transform and opacity animate. Rationale lives in MOTION.md.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1 ── Ease the snapping hovers ─────────────────────────────────────────────
   The page had many :hover states and few transitions, so they jumped. Give
   every interactive thing a short, crisp eased change on the property it moves. */
a { transition: color .16s ease; }
.site-nav a { transition: color .16s ease, background-color .16s ease, border-color .16s ease, transform .12s ease; }
.nav-toggle { transition: color .16s ease, background-color .16s ease, border-color .16s ease; }
.btn { transition: background-color .15s ease, box-shadow .16s ease, color .15s ease, transform .1s ease; }
.check-opts a, .check-opts button { transition: color .16s ease, background-color .16s ease, border-color .16s ease; }
.check-back { transition: color .16s ease; }
.enq-form input, .enq-form select, .enq-form textarea { transition: border-color .16s ease, box-shadow .16s ease; }
.site-foot a, .runner .who strong a, .cardlink a, .page-head .crumb a { transition: color .16s ease; }

/* The well-balanced-door settle: cards lift with weight, no bounce. */
.svc-tile { transition: border-color .16s ease, transform .18s cubic-bezier(.22,.61,.25,1), box-shadow .18s ease; }
.svc-tile:hover { box-shadow: 0 14px 30px -18px rgba(36,30,56,.5); }
.market-card { transition: transform .18s cubic-bezier(.22,.61,.25,1), box-shadow .18s ease, border-color .16s ease; }
.market-card:hover { transform: translateY(-3px); border-color: var(--loam-deep); box-shadow: 0 18px 40px -22px rgba(36,30,56,.4); }
.site-nav a.nav-cta:hover { transform: translateY(-1px); } /* a small lean toward the post */

/* 2 ── SIGNATURE: "The Rail to the Post" ────────────────────────────────────
   The brand's running rail — post-and-gap dashes — wipes in from the left under
   the navigational links, the way a runner sweeps down the home straight to the
   post. It replaces the plain hover underline on the links that carry you deeper
   (nav, footer, the areas list), and it points every hover toward the enquiry.
   Resting state is identical: at scaleX(0) the rail is invisible. */
.site-nav a:not(.nav-cta), .site-foot a, .runner .who strong a { position: relative; }

.site-foot a::after, .runner .who strong a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px;
  background: repeating-linear-gradient(90deg, var(--sweep) 0 11px, transparent 11px 17px);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .19s ease;
}
.runner .who strong a { --sweep: var(--loam-deep); }
.site-foot a { --sweep: var(--silk-soft); }
.site-foot a:hover, .runner .who strong a:hover { text-decoration: none; }
.site-foot a:hover::after, .site-foot a:focus-visible::after,
.runner .who strong a:hover::after, .runner .who strong a:focus-visible::after { transform: scaleX(1); }

@media (min-width: 821px) { /* the desktop nav only — the mobile drawer keeps its own bars */
  .site-nav a:not(.nav-cta)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: repeating-linear-gradient(90deg, var(--loam) 0 11px, transparent 11px 17px);
    transform: scaleX(0); transform-origin: left center;
    transition: transform .19s ease;
  }
  .site-nav a:not(.nav-cta):hover { border-bottom-color: transparent; }
  .site-nav a:not(.nav-cta):hover::after,
  .site-nav a:not(.nav-cta):focus-visible::after { transform: scaleX(1); }
}

/* 3 ── Scroll reveal ────────────────────────────────────────────────────────
   The rise-and-fade as you run down the page. .reveal-hidden is added ONLY at
   runtime by motion.js, and only to elements already below the fold — it never
   appears in the authored HTML, so nothing rests hidden. */
.reveal { transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.25,1); will-change: opacity, transform; }
.reveal-hidden { opacity: 0; transform: translateY(16px); }

/* 4 ── The motion floor ─────────────────────────────────────────────────────
   The global reduced-motion block near the top already kills transitions; this
   guarantees the reveal can never leave anything stuck invisible, belt and
   braces with motion.js declining to hide anything at all. */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-hidden { opacity: 1 !important; transform: none !important; transition: none !important; }
  .site-nav a::after, .site-foot a::after, .runner .who strong a::after { transition: none !important; }
}