/*
Theme Name: SDSR 4WD Expeditions
Description: Custom one-page block theme for the SDSR 4WD Heritage & Engineering Marvel Expedition (Southern Downs Steam Railway). A pixel-faithful port of the approved HTML mockup. Content is editable with native WordPress blocks; layout and styling are locked. Built by Ivory Websites.
Author: Ivory Websites
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sdsr-4wd-expeditions
*/

/* ============================================================
   PART 1: FONTS
   Lora and Inter, lifted from the mockup where they were inlined
   as base64 and written out as real .woff2 files. Same faces, same
   weights, same unicode subsets, so text metrics are unchanged.
   Fraunces was also embedded in the mockup but never referenced by
   any rule, so it has been dropped (0.56 MB saved).
   ============================================================ */

/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:url("assets/fonts/inter-1.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:url("assets/fonts/inter-2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:url("assets/fonts/inter-3.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:url("assets/fonts/inter-4.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:url("assets/fonts/inter-5.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:url("assets/fonts/inter-6.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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:url("assets/fonts/inter-7.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src:url("assets/fonts/inter-8.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src:url("assets/fonts/inter-9.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src:url("assets/fonts/inter-10.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src:url("assets/fonts/inter-11.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src:url("assets/fonts/inter-12.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src:url("assets/fonts/inter-13.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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src:url("assets/fonts/inter-14.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src:url("assets/fonts/inter-15.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src:url("assets/fonts/inter-16.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src:url("assets/fonts/inter-17.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src:url("assets/fonts/inter-18.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src:url("assets/fonts/inter-19.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src:url("assets/fonts/inter-20.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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src:url("assets/fonts/inter-21.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:url("assets/fonts/inter-22.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:url("assets/fonts/inter-23.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:url("assets/fonts/inter-24.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:url("assets/fonts/inter-25.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:url("assets/fonts/inter-26.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:url("assets/fonts/inter-27.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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:url("assets/fonts/inter-28.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:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/lora-29.woff2") format('woff2')}
@font-face{font-family:'Lora';font-style:italic;font-weight:600;font-display:swap;src:url("assets/fonts/lora-30.woff2") format('woff2')}
@font-face{font-family:'Lora';font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/lora-31.woff2") format('woff2')}
@font-face{font-family:'Lora';font-style:italic;font-weight:700;font-display:swap;src:url("assets/fonts/lora-32.woff2") format('woff2')}


/* ============================================================
   PART 2: THE MOCKUP'S OWN CSS
   Ported verbatim from the approved mockup, in the same cascade
   order. The only edits: the design tool's own shell rules
   (.sc-placeholder, .sc-host, #dc-root) were removed, and the
   background-image data URIs now point at assets/images/.
   Do not edit this part; WordPress adaptations go in Part 3.
   ============================================================ */

.sc-logic-error{position:absolute;top:8px;left:8px;z-index:2147483647;max-width:60ch;
      padding:6px 10px;background:#b00020;color:#fff;font:12px/1.4 ui-monospace,monospace;
      border-radius:4px;white-space:pre-wrap;pointer-events:none}
/* Mirrors PRINT_BASELINE_CSS in apps/web deck-stage-export.ts - keep both
       in sync until dc-runtime regains a build step. */
    @media print {
      @page { margin: 0.5cm; }
      section, article, figure, table { break-inside: avoid; }
      *, *::before, *::after {
        print-color-adjust: exact; -webkit-print-color-adjust: exact;
        backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
        animation-delay: -99s !important; animation-duration: .001s !important;
        animation-iteration-count: 1 !important; animation-fill-mode: both !important;
        animation-play-state: running !important; transition-duration: 0s !important;
      }
    }
x-dc{display:none!important}
html,body{height:100%;margin:0}
:root{ --display:'Lora',Georgia,serif; --ui:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; --wrap:1180px; }
h1,h2{font-weight:700!important;letter-spacing:-.01em}
h3{font-weight:600!important}
.journey-lead-block{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.journey-lead-block .lead-statement{margin:0}
.journey-lead-block .eyebrow{margin-bottom:-8px}
.journey-lead-block .journey-sights{padding-top:20px;border-top:1px solid var(--stats-line)}
.journey-head{max-width:820px;margin:0 auto;text-align:center}
.journey-title{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,3.2vw,2.35rem);line-height:1.28;color:var(--heading);margin:14px auto 20px;max-width:20ch}
.journey-title em{color:var(--accent);font-style:italic}
.journey-lead{font-family:var(--ui);font-size:1.05rem;line-height:1.75;color:var(--muted);max-width:700px;margin:0 auto}
.sights{max-width:1000px;margin:24px auto 0;text-align:center}
.sights-title{display:block;font-family:var(--ui);font-weight:600;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:26px}
.sights-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sights-grid li{position:relative;background:var(--surface);border:1px solid var(--surface-border);border-radius:14px;padding:22px 18px;font-family:var(--display);font-size:1.08rem;color:var(--heading);line-height:1.3}
.sights-grid li:before{content:"";display:block;width:26px;height:2px;background:var(--accent);margin:0 auto 12px;border-radius:2px}
.sights-note{margin-top:26px;font-family:var(--ui);color:var(--muted);font-size:.95rem}
@media(max-width:820px){.sights-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.sights-grid{grid-template-columns:1fr}}
.journey-intro{margin:0;text-align:left;font-family:var(--ui);font-size:1.02rem;line-height:1.7;color:var(--muted)}
.journey-sights{margin:0;text-align:left;font-family:var(--ui);font-size:1.02rem;line-height:1.7;color:var(--muted)}
.facts-line{max-width:720px;margin:0 auto;text-align:center;color:var(--muted);font-size:.98rem;line-height:1.6}
.dl-wrap{text-align:center;margin-top:18px}
.dl-btn{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 24px;border-radius:999px;background:var(--accent);color:#fff;font-family:var(--ui);font-weight:600;font-size:.9rem;text-decoration:none}
.dl-btn:hover{background:#175d96}
.site-footer{background:#07182c;color:#cddae8;padding:56px 32px 30px;font-family:var(--ui)}
.foot-wrap{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between}
.foot-brand{max-width:420px}
.foot-name{font-family:var(--display);font-weight:700;font-size:1.15rem;color:#fff!important;margin-bottom:12px}
.foot-blurb{font-size:.92rem;line-height:1.6;color:#9fb2c6;margin-bottom:14px}
.foot-link{display:block;color:#7cc0ef;text-decoration:none;font-size:.92rem;margin-top:4px}
.foot-terms{max-width:520px}
.foot-terms h4{font-family:var(--ui);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:#7cc0ef;margin-bottom:12px}
.foot-terms ul{list-style:none;padding:0;margin:0}
.foot-terms li{font-size:.88rem;line-height:1.5;color:#9fb2c6;padding-left:16px;position:relative;margin-bottom:8px}
.foot-terms li:before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:#1e73b8}
.foot-bottom{max-width:1100px;margin:34px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-size:.8rem;color:#7a92aa}
@media(max-width:680px){.site-footer{padding:40px 20px 24px}.foot-wrap{gap:26px}}
.brand{pointer-events:auto;display:flex;align-items:center;gap:13px}
.wordmark{font-family:var(--ui);font-weight:700;font-size:1.35rem;letter-spacing:.01em;color:#fff;line-height:1;white-space:nowrap;text-shadow:0 1px 12px rgba(0,0,0,.4);transition:color .3s}
header.scrolled .wordmark{color:#12263c;text-shadow:none}
header.scrolled .nav-links a{color:#263b50;text-shadow:none}
.nav-ind{background:rgba(7,24,44,.06)!important;border-color:rgba(7,24,44,.1)!important}
header.scrolled .nav-ind{background:rgba(7,24,44,.06)!important;border-color:rgba(7,24,44,.1)!important}
header.scrolled .menu-btn{background:rgba(7,24,44,.06);border-color:rgba(7,24,44,.12);color:#12263c}
.cta-pill:hover{background:#175d96}
@media(max-width:680px){.wordmark{display:none}.hdr{gap:10px}header{padding:12px 16px}}
:root,[data-theme="light"]{
    --bg:#ffffff; --bg-2:#f4f8fc;
    --heading:#07182c; --text:#33485e; --muted:#5f7488;
    --accent:#1e73b8; --accent-br:#2f87cf; --accent-soft:#7cc0ef; --em:#1e73b8;
    --line:rgba(7,24,44,.1);
    --pill-bg:rgba(255,255,255,.72); --pill-bg-scrolled:rgba(255,255,255,.92); --pill-shadow:0 14px 40px -20px rgba(7,24,44,.35);
    --surface:rgba(7,24,44,.05); --surface-hover:rgba(7,24,44,.1); --surface-border:rgba(7,24,44,.12);
    --ghost-text:#07182c; --nav-link:#33485e;
    --btn-shadow:0 14px 40px -16px rgba(30,115,184,.55);
    --ind-bg:rgba(30,115,184,.12); --ind-border:rgba(30,115,184,.35);
    --ic-bg:rgba(30,115,184,.12); --glow:rgba(30,115,184,.1);
    --cue:rgba(7,24,44,.45); --cue-bar:rgba(7,24,44,.5);
    --stats-bg:linear-gradient(180deg,#f3f8fc,#e6eef7); --stats-num:#07182c; --stats-suf:#1e73b8; --stats-label:#5f7488; --stats-line:rgba(7,24,44,.1);
    --cd-bg:#ffffff; --cd-v:#07182c; --cd-k:#1e73b8; --cd-shadow:0 24px 50px -34px rgba(7,24,44,.35);
    --badge-bg:rgba(255,255,255,.92); --badge-b:#07182c; --badge-span:#1e73b8;
    --shadow:rgba(7,24,44,.5);
  }
[data-theme="dark"],.included,.contact{
    --bg:#07182c; --bg-2:#07182c;
    --heading:#fff; --text:#d8e6f3; --muted:#88a1ba;
    --accent:#1e73b8; --accent-br:#3f9bdc; --accent-soft:#7cc0ef; --em:#7cc0ef;
    --line:rgba(255,255,255,.1);
    --pill-bg:rgba(10,26,46,.55); --pill-bg-scrolled:rgba(8,22,40,.82); --pill-shadow:0 14px 40px -16px rgba(0,0,0,.75);
    --surface:rgba(255,255,255,.05); --surface-hover:rgba(255,255,255,.12); --surface-border:rgba(255,255,255,.16);
    --ghost-text:#fff; --nav-link:#dce8f3;
    --btn-shadow:0 14px 40px -16px rgba(63,155,220,.55);
    --ind-bg:rgba(124,192,239,.2); --ind-border:rgba(124,192,239,.4);
    --ic-bg:rgba(63,155,220,.14); --glow:rgba(30,115,184,.20);
    --cue:rgba(255,255,255,.55); --cue-bar:rgba(255,255,255,.7);
    --cd-bg:linear-gradient(170deg,#10324f,#0e2b49); --cd-v:#fff; --cd-k:#7cc0ef; --cd-shadow:0 24px 50px -34px rgba(0,0,0,.8);
    --badge-bg:rgba(8,22,40,.8); --badge-b:#fff; --badge-span:#7cc0ef;
    --shadow:rgba(0,0,0,.8);
  }
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--ui);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;background:#fff}
body,.site{color:var(--text);background:var(--bg)}
body *,.site *{transition:background-color .4s ease,color .4s ease,border-color .4s ease}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.08;letter-spacing:-.01em;color:var(--heading)}
h2{font-size:clamp(2rem,4.4vw,3.4rem)}
h3{font-size:1.4rem;font-weight:500}
p{margin:0 0 1rem}
a{color:var(--accent);text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}
.eyebrow{font-family:var(--ui);font-weight:600;letter-spacing:.26em;text-transform:uppercase;font-size:.74rem;color:var(--accent)}
.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--ui);font-weight:600;font-size:1rem;padding:15px 30px;border-radius:999px;min-height:52px;cursor:pointer;border:1.5px solid transparent;transition:transform .2s ease,background .25s,box-shadow .25s,border-color .25s}
.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--btn-shadow)}
.btn-primary:hover{background:var(--accent-br);transform:translateY(-2px)}
.btn-ghost{background:var(--surface);color:var(--ghost-text);border-color:var(--surface-border)}
.btn-ghost:hover{background:var(--surface-hover)}
.ico{width:20px;height:20px;flex:none;stroke:currentColor;stroke-width:1.7;fill:none}
section{position:relative}
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){body *,.site *{transition:none!important;animation:none!important}.reveal{opacity:1;transform:none}}
/* HEADER */
  header{position:fixed;top:0;left:0;right:0;z-index:80;padding:12px 34px;pointer-events:none;background:rgba(255,255,255,.96);-webkit-backdrop-filter:saturate(150%) blur(14px);backdrop-filter:saturate(150%) blur(14px);box-shadow:0 1px 0 rgba(7,24,44,.08),0 12px 30px -26px rgba(7,24,44,.5)}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1280px;margin:0 auto}
.pill{pointer-events:auto;display:flex;align-items:center;gap:6px;background:transparent;border:none;box-shadow:none;padding:0;height:auto}
header.scrolled .pill{background:transparent}
.logo-box{display:flex;align-items:center;height:82px}
.nav-links{position:relative;display:flex;align-items:center;gap:2px;list-style:none}
.nav-ind{position:absolute;top:50%;transform:translateY(-50%);height:42px;left:0;width:0;opacity:0;border-radius:999px;background:var(--ind-bg);border:1px solid var(--ind-border);pointer-events:none;z-index:0;transition:left .34s cubic-bezier(.6,.15,.1,1),width .34s cubic-bezier(.6,.15,.1,1),opacity .25s}
.nav-links li{position:relative;z-index:1}
.nav-links a{display:inline-flex;align-items:center;height:42px;padding:0 16px;border-radius:999px;font-family:var(--ui);font-weight:500;font-size:.9rem;color:#263b50;white-space:nowrap;transition:color .25s}
.nav-links a:hover,.nav-links a.active{color:var(--heading)}
.cta-pill{display:inline-flex;align-items:center;height:46px;padding:0 22px;border-radius:999px;background:var(--accent);color:#fff;font-family:var(--ui);font-weight:600;font-size:.9rem;margin-left:10px;border:none;transition:background .25s,transform .2s}
.cta-pill:hover{background:var(--accent-br);transform:translateY(-1px)}
.menu-btn{display:none;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:rgba(7,24,44,.06);border:1px solid rgba(7,24,44,.12);cursor:pointer;color:#12263c;margin-left:8px}
@media(max-width:1040px){.nav-links{display:none}.menu-btn{display:flex}}
/* HERO - full-bleed image, soft gradient left for text, melts to white below */
  .hero{min-height:100vh;display:flex;align-items:center;overflow:hidden;background:
    linear-gradient(90deg,rgba(20,64,116,.95) 0%,rgba(20,64,116,.82) 34%,rgba(20,64,116,.5) 58%,rgba(20,64,116,0) 84%),
    linear-gradient(0deg,#07182c 0%,rgba(20,64,116,.9) 8%,rgba(20,64,116,.42) 30%,rgba(20,64,116,0) 55%),
    url("assets/images/hero-4wd.jpg") center 48%/cover no-repeat}
.hero h1{color:#fff!important}
.hero .eyebrow{color:#9fd0f2!important}
.hero p{color:rgba(255,255,255,.92)!important}
.hero em{color:#9fd0f2!important}
.hero .scroll-cue span{color:rgba(255,255,255,.72)!important}
.hero .scroll-cue .bar{background:rgba(255,255,255,.55)!important}
.hero .btn-ghost{color:#fff!important;border-color:rgba(255,255,255,.55)!important}
.hero .btn-ghost:hover{background:rgba(255,255,255,.12)!important}
.hero .wrap{position:relative;z-index:2;width:100%;padding-top:96px}
.hero h1{font-size:clamp(2.5rem,5.2vw,4.8rem);font-weight:400;max-width:14ch;color:var(--heading)}
.hero h1 em{font-style:italic;color:var(--em)}
.hero .lead{font-size:clamp(1.05rem,1.8vw,1.28rem);max-width:40ch;margin:22px 0 30px;color:var(--text)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.scroll-cue{position:absolute;left:50%;bottom:34px;z-index:2;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--cue);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase}
.scroll-cue .bar{width:1px;height:56px;background:linear-gradient(var(--cue-bar),transparent);animation:cue 2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.2;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}}
@keyframes foot-glitch{
    0%  {transform:perspective(280px) rotateX(0deg);opacity:1}
    22% {transform:perspective(280px) rotateX(-90deg);opacity:.3}
    23% {transform:perspective(280px) rotateX(70deg);opacity:.3}
    55% {transform:perspective(280px) rotateX(-8deg);opacity:1}
    78% {transform:perspective(280px) rotateX(4deg)}
    93% {transform:perspective(280px) rotateX(-1deg)}
    100%{transform:perspective(280px) rotateX(0deg)}
  }
/* CORE PURPOSES */
  .paths{padding:84px 0 30px;background:#fff}
.paths-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:820px){.paths-grid{grid-template-columns:1fr}}
.path{position:relative;display:block;min-height:380px;border-radius:20px;overflow:hidden;border:1px solid var(--line);isolation:isolate;box-shadow:0 30px 60px -42px var(--shadow)}
.path-bg{position:absolute;inset:0;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.path > image-slot, .path .path-bg, #path-journey, #path-book{position:absolute;inset:0;display:block;width:100%;height:100%;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.path::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(7,24,44,.05),rgba(7,24,44,.55))}
.path:hover .path-bg{transform:scale(1.07)}
.path:hover image-slot{transform:scale(1.07)}
.path-in{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:34px}
.path-in .eyebrow{margin-bottom:10px;color:var(--accent-soft)}
.path-in h2{font-size:clamp(1.9rem,3vw,2.6rem);margin-bottom:8px;color:#fff}
.path-in p{color:#e7f0f9;max-width:34ch;margin-bottom:16px}
.path-link{font-family:var(--ui);font-weight:600;color:#fff;display:inline-flex;align-items:center;gap:8px;transition:gap .25s}
.path:hover .path-link{gap:14px}
.path-link .ico{stroke:var(--accent-soft)}
/* JOURNEY */
  .journey{padding:90px 0 110px;background:#fff}
.journey .lead-statement{font-family:var(--display);font-weight:300;font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.3;color:var(--heading);max-width:24ch;margin:0}
.journey .lead-statement em{font-style:italic;color:var(--em)}
.journey-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.journey-media{position:sticky;top:14vh;height:72vh;border-radius:18px;overflow:hidden;box-shadow:0 40px 80px -44px var(--shadow);border:1px solid var(--line);background:#0b2036 url("assets/images/journey-6-cherry-gully-trestle.jpg") center/cover}
.journey-media image-slot{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .7s ease}
.journey-media image-slot.show{opacity:1}
.steps{display:flex;flex-direction:column;gap:13vh;padding:12vh 0}
.step .num{font-family:var(--display);font-size:2.4rem;color:var(--accent-br);line-height:1}
.step h3{margin:8px 0 10px}
.step p{color:var(--muted);max-width:42ch;margin:0}
@media(max-width:880px){
    .journey-grid{grid-template-columns:1fr;gap:34px}
    .journey-media{position:relative;top:0;height:260px;order:-1}
    .steps{gap:48px;padding:0}
  }
/* INCLUDED - dark blue, image on the right */
  .included{padding:96px 0 104px;background:linear-gradient(180deg,#0e2b49,#07182c)}
.inc-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:center}
@media(max-width:900px){.inc-grid{grid-template-columns:1fr;gap:36px}}
.inc-media{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 40px 80px -48px var(--shadow);background:#0b2036 url("assets/images/included-feature.jpg") center/cover}
.inc-media image-slot{width:100%;height:560px;display:block}
@media(max-width:900px){.inc-media image-slot{height:340px}}
.inc-media .badge{position:absolute;left:22px;bottom:22px;background:var(--badge-bg);border:1px solid var(--line);padding:12px 18px;border-radius:14px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:2}
.inc-media .badge b{font-family:var(--display);font-size:1.5rem;color:var(--badge-b);display:block;line-height:1}
.inc-media .badge span{font-size:.82rem;color:var(--badge-span)}
.inc-list{list-style:none}
.inc-list li{display:flex;gap:18px;padding:20px 0;border-bottom:1px solid var(--line)}
.inc-list li:first-child{padding-top:0}
.inc-list .ic{width:46px;height:46px;flex:none;border-radius:12px;background:var(--ic-bg);display:flex;align-items:center;justify-content:center}
.inc-list .ic .ico{stroke:var(--accent-br);width:23px;height:23px}
.inc-list b{font-family:var(--ui);font-weight:600;color:var(--heading);display:block;font-size:1.05rem;margin-bottom:2px}
.inc-list span{color:var(--muted);font-size:.96rem}
.sec-head{max-width:620px;margin-bottom:46px}
.sec-head .eyebrow{display:block;margin-bottom:14px}
.sec-head p{color:var(--muted);margin-top:14px}
/* STATS */
  .stats{background:var(--stats-bg);border-top:1px solid var(--stats-line);border-bottom:1px solid var(--stats-line);padding:64px 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center}
@media(max-width:760px){.stats-grid{grid-template-columns:1fr 1fr;gap:40px 20px}}
.stat .n{font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,4.5vw,3.6rem);color:var(--stats-num);line-height:1}
.stat .n .suf{color:var(--stats-suf)}
.stat .l{margin-top:8px;color:var(--stats-label);font-size:.92rem}
/* EVENTS - dark moment */
  .events{padding:110px 0;text-align:center;background-color:var(--bg);background-image:radial-gradient(120% 80% at 50% 0%,var(--glow),transparent 60%)}
.events .eyebrow{display:block;margin-bottom:14px}
.events .next{color:var(--muted);margin-top:14px}
.events .next b{color:var(--heading);font-weight:600}
.countdown{display:flex;justify-content:center;gap:16px;margin:42px 0 34px}
@media(max-width:560px){.countdown{gap:10px}}
.cd{min-width:120px;background:var(--cd-bg);border:1px solid var(--line);border-radius:16px;padding:24px 10px;box-shadow:var(--cd-shadow)}
@media(max-width:560px){.cd{min-width:72px;padding:16px 6px}}
.cd .v{font-family:var(--display);font-weight:400;font-size:clamp(2rem,6vw,3.4rem);color:var(--cd-v);line-height:1;font-variant-numeric:tabular-nums}
.cd .k{margin-top:8px;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cd-k)}
/* QUOTE BAND - dark moment */
  .band{height:64vh;min-height:420px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.band-bg{position:absolute;inset:0;background:linear-gradient(155deg,#10324f,#07182c)}
.band::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 0%,rgba(124,192,239,.14),transparent 58%)}
.band .wrap{position:relative;z-index:2}
.band blockquote{font-family:var(--display);font-weight:300;font-style:italic;font-size:clamp(1.6rem,3.6vw,2.8rem);line-height:1.3;color:#fff;max-width:18ch;margin:0 auto}
.band cite{display:block;margin-top:22px;font-family:var(--ui);font-style:normal;font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:.78rem;color:#7cc0ef}
/* BOOKING */
  .book{padding:110px 0 120px;background:#fff}
.book .sec-head{margin:0 auto 44px;text-align:center}
.book .sec-head .eyebrow{display:block;margin-bottom:14px}
.book-frame{max-width:980px;margin:0 auto;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 50px 90px -54px var(--shadow);border:1px solid var(--line)}
.book-frame iframe{width:100%;min-height:660px;border:0;display:block}
/* FAQ */
  .faq{padding:0 0 110px;background:#fff}
.faq-list{max-width:820px;margin:42px auto 0}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;padding:24px 4px;font-family:var(--display);font-weight:500;font-size:1.2rem;color:var(--heading);display:flex;justify-content:space-between;gap:18px;align-items:center}
summary::-webkit-details-marker{display:none}
summary .plus{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;transition:transform .25s}
details[open] summary .plus{transform:rotate(45deg)}
details .body{padding:0 4px 24px;color:var(--muted);max-width:60ch}
/* CONTACT FORM */
  .contact{padding:104px 0 116px;background:linear-gradient(180deg,#0e2b49,#07182c);border-top:1px solid rgba(255,255,255,.08)}
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start}
@media(max-width:880px){.contact-grid{grid-template-columns:1fr;gap:38px}}
.contact .sec-head{margin-bottom:0}
.contact-info{margin-top:30px;display:flex;flex-direction:column;gap:18px}
.contact-info .row{display:flex;gap:14px;align-items:center}
.contact-info .ic{width:46px;height:46px;flex:none;border-radius:12px;background:var(--ic-bg);display:flex;align-items:center;justify-content:center}
.contact-info .ic .ico{stroke:var(--accent-br);width:22px;height:22px}
.contact-info b{display:block;color:var(--heading);font-weight:600;margin-bottom:1px}
.contact-info span{color:var(--muted);font-size:.96rem}
.form{background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:32px;box-shadow:0 40px 80px -56px var(--shadow)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:520px){.form-row{grid-template-columns:1fr}}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--ui);font-weight:600;font-size:.88rem;color:var(--heading);margin-bottom:7px}
.field input,.field textarea{width:100%;font-family:var(--ui);font-size:1rem;color:var(--heading);background:var(--surface);border:1px solid var(--surface-border);border-radius:12px;padding:13px 15px;transition:border-color .2s,background .2s}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:var(--bg)}
.field textarea{min-height:130px;resize:vertical}
.form .btn-primary{width:100%;justify-content:center;margin-top:4px}
.form-success{display:none;background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:48px 32px;text-align:center;box-shadow:0 40px 80px -56px var(--shadow)}
.form-success .tick{width:58px;height:58px;border-radius:50%;background:var(--ic-bg);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.form-success .tick .ico{stroke:var(--accent-br);width:28px;height:28px}
.form-success h3{margin-bottom:8px}
.form-success p{color:var(--muted);margin:0}
.contact .form,.contact .form-success{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12)}
/* FOOTER - dark, proper columns */
  footer{background:#07182c;padding:64px 0 40px;border-top:1px solid rgba(255,255,255,.14)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px;padding-bottom:36px;border-bottom:1px solid var(--line)}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr;gap:28px}}
.foot-name{font-family:var(--display);font-size:1.3rem;color:var(--heading);margin-bottom:10px;line-height:1.1}
.foot-blurb{font-size:.9rem;color:var(--muted);max-width:32ch;margin-bottom:18px;line-height:1.6}
.foot-email{display:inline-block;margin-bottom:18px;font-size:.9rem;color:var(--muted);transition:color .2s}
.foot-email:hover{color:var(--accent-soft)}
.foot-col h4{font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-soft);margin-bottom:16px}
.foot-col a{display:inline-block;margin-bottom:10px;font-size:.92rem;color:var(--nav-link);transition:color .2s}
.foot-col a:hover{color:var(--heading);animation:foot-glitch .42s ease-out}
.foot-bottom{padding-top:20px;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;font-size:.84rem;color:var(--muted)}
.foot-bottom-links{display:flex;flex-direction:column;gap:9px;align-items:flex-end;text-align:right}
@media(max-width:820px){.foot-bottom-links{align-items:flex-start;text-align:left}}
.foot-bottom-links a{color:#7cc0ef;display:inline-block;transition:color .2s}
.foot-bottom-links a:hover{color:#fff;animation:foot-glitch .42s ease-out}
.ivory-link{font-weight:600;color:#cfe0f0;display:inline-block;transition:color .2s}
.ivory-link:hover{color:#fff;animation:foot-glitch .42s ease-out}
.reveal{opacity:1!important;transform:none!important}
.journey-media .jlayer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease;z-index:1}
.journey-media .jlayer.on{opacity:1;z-index:2}
img,iframe{max-width:100%}
.rates-grid>*,.journey-grid>*,.steps>*,.facil-grid>*,.story>*,.rateboard,.rules{min-width:0}
.rateboard,.rules{max-width:100%}
@media (max-width:520px){ .rateboard,.rules{padding:20px} }
html{overflow-x:clip}
@media (min-width:1240px){
  .hero .wrap{max-width:none;margin:0;padding-left:clamp(40px,6vw,180px);padding-right:26px}
  .hero h1{max-width:18ch}
  .hero .lead{max-width:34ch}
}
@media (min-width:2000px){
  .hero .wrap{padding-left:clamp(180px,9vw,300px)}
}
/* Header spans full width on larger screens (logo left, nav right) */
@media (min-width:1240px){ .hdr{max-width:none;margin:0} }
@media (min-width:2000px){ header{padding-left:clamp(34px,3.2vw,90px);padding-right:clamp(34px,3.2vw,90px)} }
/* Give content sections a little more room on very wide screens */
@media (min-width:1600px){ :root{--wrap:1320px} }
@media (min-width:2100px){ :root{--wrap:1440px} }


/* ============================================================
   PART 3: WORDPRESS BLOCK COMPATIBILITY LAYER
   Ivory Websites.

   Everything above is the mockup's own CSS. The rules below exist
   only to make WordPress core block markup render the way the
   mockup's hand-written markup did. Core's block styles use
   :where(), which carries zero specificity, so ordinary class
   selectors here always win.

   Nothing below changes the design. If a value here disagrees with
   Part 2, that is a bug, not a decision.
   ============================================================ */

/* ==========================================================================
   Pattern compat: sdsr-4wd/header
   Only rules needed because the block markup differs from the mockup markup.
   ========================================================================== */

/* core/image wraps the logo in <figure class="wp-block-image">, which the mockup
   did not have, and the mockup's inline style on the <img> (height:82px;
   width:auto;display:block) had to be dropped because an inline style on a
   core/image <img> fails block validation the moment the client edits it. */
#site-header .logo-box .wp-block-image{margin:0}
#site-header .logo-box .wp-block-image img{height:82px;width:auto;display:block}

/* core/buttons inserts <div class="wp-block-buttons"> between .pill and the CTA.
   Collapse it so .pill's flex row spaces exactly as it did in the mockup. */
#site-header .pill .wp-block-buttons{display:flex;align-items:center;flex-wrap:nowrap;gap:0;margin:0}

/* core/button puts className on the WRAPPER <div class="wp-block-button">, so
   .cta-pill lands one level above the <a>. Strip the pill box off the wrapper
   and re-apply it to the inner link. (The 10px left offset stays on the wrapper
   so the 6px .pill gap + 10px margin still totals 16px, as in the mockup.) */
#site-header .wp-block-button.cta-pill{display:inline-flex;align-items:center;height:auto;padding:0;border:0;border-radius:0;background:none;color:inherit;font-size:inherit;margin-left:10px;transition:none}
#site-header .wp-block-button.cta-pill:hover{background:none;transform:none}
#site-header .wp-block-button.cta-pill > .wp-block-button__link{display:inline-flex;align-items:center;height:46px;padding:0 22px;border-radius:999px;background:var(--accent);color:#fff;font-family:var(--ui);font-weight:600;font-size:.9rem;line-height:1;border:none;box-shadow:none;text-decoration:none;transition:background .25s,transform .2s}
#site-header .wp-block-button.cta-pill > .wp-block-button__link:hover{background:var(--accent-br);transform:translateY(-1px)}

/* Burger icon. The mockup's inline
   <svg class="ico" viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18"></svg>
   (from .ico: width/height 20px, fill:none, stroke:currentColor, stroke-width:1.7)
   cannot live inside a core block, so it is drawn as a CSS mask on ::before at
   the same 20x20 box. Colour still follows the button's `color`, so the
   `header.scrolled .menu-btn{color:#12263c}` rule keeps working. */
#site-header .menu-btn::before{content:"";display:block;width:20px;height:20px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18'/%3E%3C/svg%3E") no-repeat center / contain;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18'/%3E%3C/svg%3E") no-repeat center / contain}


/* ============================================================
   HERO PATTERN COMPAT  (patterns/hero.php)
   Only rules made necessary by block markup differing from the mockup.
   ============================================================ */

/* 1. CUSTOM PROPERTIES.
   The mockup declared every custom property on <div class="site" data-theme="light">.
   Rule 12 strips data-theme, and nothing in the ported theme carries it, so the
   [data-theme="light"] block already in style.css matches no element at all and
   var(--accent) / var(--accent-br) / var(--surface) / var(--btn-shadow) resolve
   to nothing -- the primary button loses its blue background completely.
   Declare the four properties THIS section consumes on .hero itself so the
   section is self-sufficient. Values are copied verbatim from the light set.
   DELETE this rule the moment data-theme="light" is restored to <html>/<body>. */
.hero{
  --accent:#1e73b8;
  --accent-br:#2f87cf;
  --btn-shadow:0 14px 40px -16px rgba(30,115,184,.55);
  --surface:rgba(7,24,44,.05);
}

/* 2. EYEBROW.
   The mockup element is <span class="eyebrow">: an inline box inside .wrap, so
   its line box is struck by .wrap's inherited 17px/1.65 font (28.05px tall) and
   an inline box ignores vertical margin. core/paragraph can only emit a
   block-level <p>, whose box would be only ~19.5px tall and which also picks up
   p{margin:0 0 1rem}, pushing the h1 down. display:inline reproduces the
   original anonymous line box exactly and neutralises the margin at the same
   time. Scoped to .hero so the .eyebrow variants in other sections
   (.sec-head .eyebrow, .journey-lead-block .eyebrow, .path-in .eyebrow) are
   untouched. */
.hero .eyebrow{display:inline}

/* 3. SCROLL CUE LABEL.
   Was <span>Scroll</span>, now a <p>. Two consequences: p{margin:0 0 1rem} adds
   a phantom gap inside the flex column (margins are not collapsed on flex
   items), and .hero .scroll-cue span no longer matches, so
   .hero p{color:rgba(255,255,255,.92)!important} wins instead of the intended
   .72 white. !important is required only because the rule it replaces is. */
.hero .scroll-cue p{margin:0;color:rgba(255,255,255,.72)!important}

/* 4. BUTTON ROW.
   .hero-actions is now core/buttons, which brings its own flex layout
   (.is-layout-flex sets align-items:center, and would inject a gap if blockGap
   were ever enabled in theme.json). Both core selectors are 0,1,0, i.e. a tie
   with .hero-actions that is decided by stylesheet order. Pin the mockup's
   values at 0,2,0 so order cannot matter. */
.hero .hero-actions{display:flex;flex-wrap:wrap;align-items:stretch;gap:14px}

/* 5. BUTTONS.
   core/button puts className on the wrapper <div class="wp-block-button">, so
   .btn / .btn-primary / .btn-ghost land one level above the <a> that needs
   them, and core's own :root :where(.wp-block-button .wp-block-button__link)
   defaults (grey background, 9999px radius, em padding) still dress the link.
   Flatten the wrapper, then move the whole box treatment onto the link.
   background is forced with !important on the wrapper because
   .hero .btn-ghost:hover in style.css is itself !important and would otherwise
   paint a second translucent white layer behind the semi-transparent link. */
.wp-block-button.btn{
  display:inline-flex;
  align-items:stretch;
  min-height:0;
  padding:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:none!important;
  transition:none;
}
.wp-block-button.btn>.wp-block-button__link{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--ui);
  font-weight:600;
  font-size:1rem;
  padding:15px 30px;
  border-radius:999px;
  min-height:52px;
  cursor:pointer;
  border:1.5px solid transparent;
  text-decoration:none;
  transition:transform .2s ease,background .25s,box-shadow .25s,border-color .25s;
}
.wp-block-button.btn-primary>.wp-block-button__link{background:var(--accent);color:#fff;box-shadow:var(--btn-shadow)}
.wp-block-button.btn-primary>.wp-block-button__link:hover{background:var(--accent-br);transform:translateY(-2px)}
.wp-block-button.btn-ghost>.wp-block-button__link{background:var(--surface);color:var(--ghost-text);border-color:var(--surface-border)}
.wp-block-button.btn-ghost>.wp-block-button__link:hover{background:var(--surface-hover)}

/* 5b. Hero-specific ghost treatment (was .hero .btn-ghost on the <a> itself).
   No !important needed here: at 0,4,0 these already beat everything above. */
.hero .wp-block-button.btn-ghost>.wp-block-button__link{color:#fff;border-color:rgba(255,255,255,.55)}
.hero .wp-block-button.btn-ghost>.wp-block-button__link:hover{background:rgba(255,255,255,.12)}


/* ================= journey pattern compat ================= */

/* core/image wraps the <img> in a <figure>, so .jlayer now lands on the FIGURE,
   not on the image. Kill the figure's own margin (block-library sets
   .wp-block-image{margin:0 0 1em}, which fights position:absolute + inset:0),
   and make the inner <img> fill and cover the layer box, because the existing
   .journey-media .jlayer{object-fit:cover} now targets a figure and does nothing. */
.journey-media .jlayer{margin:0}
.journey-media .jlayer img{display:block;width:100%;height:100%;object-fit:cover}

/* The mockup's <div class="num"> had to become a core/paragraph, because a <div>
   is destroyed the moment the client edits the block. Restore the div's box: the
   existing .step p rule already zeroes the margin but also hands the number a
   max-width:42ch the original div never had. */
.journey .step .num{margin:0;max-width:none}

/* Every group block declares flow layout, and WordPress can inject
   margin-block-start on the direct children of a flow container. .journey-grid is
   a CSS grid and .steps is a flex column, so an injected margin would add to the
   gap and push the sticky media out of alignment. All of these children are
   margin-free in the mockup, so pinning them to 0 is exact, not a fudge. */
.journey .journey-grid > *,
.journey .steps > *{margin-block-start:0;margin-block-end:0}

/* ============================================================
   PATTERN COMPAT: sdsr-4wd/included
   Verified against the mockup markup in a side-by-side harness:
   0.000px delta on every box and text-ink rect at 375 / 700 /
   1400 / 1700px, and the five icon masks rasterise pixel-identical
   to the original inline SVGs at 8x supersampling.
   ============================================================ */

/* 1. core/group cannot carry data-theme, so the token set the section got
      from [data-theme="dark"] is re-declared on .included itself. */
.included{
  --heading:#fff; --text:#d8e6f3; --muted:#88a1ba;
  --accent:#1e73b8; --accent-br:#3f9bdc;
  --line:rgba(255,255,255,.1);
  --ic-bg:rgba(63,155,220,.14);
  --badge-bg:rgba(8,22,40,.8); --badge-b:#fff; --badge-span:#7cc0ef;
  --shadow:rgba(0,0,0,.8);
}

/* 2. Belt and braces: theme.json sets settings.spacing.blockGap to null so
      core's flow layout emits no gap margins today, but if that is ever
      switched on it injects margin-block-start between block children.
      None of these boxes carry vertical margins in the mockup. */
.included .inc-grid,
.included .sec-head h2,
.inc-grid > *,
.inc-list > *,
.inc-item > *,
.inc-media > *{margin-block:0}

/* 3. The eyebrow was <span class="eyebrow">. RichText destroys spans, so it
      is a paragraph now, which makes ".sec-head p" match it and steal the
      muted colour plus a 14px top margin. Put the span's values back. */
.sec-head p.eyebrow{color:var(--accent);margin-top:0}

/* 4. core/group cannot be ul or li, so the list is divs.
      .inc-list li  ->  .inc-list .inc-item */
.inc-list .inc-item{display:flex;gap:18px;padding:20px 0;border-bottom:1px solid var(--line)}
.inc-list .inc-item:first-child{padding-top:0}

/* 5. The <b> title and <span> description become paragraphs (span would be
      destroyed on first edit).
      line-height:28.05px is the 17px x 1.65 strut that the mockup's
      anonymous block box inherited from the wrapper div; without it each
      description line box is 25.34px and the list shrinks by 19px.
      padding-top:1px with margin-bottom:-1px pushes the baseline back down
      1px (the strut half-leading differs at the smaller font size) while
      leaving the box height untouched. */
.inc-list .inc-title{font-family:var(--ui);font-weight:600;color:var(--heading);display:block;font-size:1.05rem;margin:0 0 2px}
.inc-list .inc-desc{color:var(--muted);font-size:.96rem;line-height:28.05px;margin:0 0 -1px;padding-top:1px}

/* 6. Inline SVG cannot live in a core block, so the five icons are drawn as
      CSS masks on .ic::before. Source for all five: viewBox "0 0 24 24",
      fill none, stroke currentColor -> var(--accent-br), stroke-width 1.7,
      default butt caps and miter joins, rendered into a 23x23 box. */
.inc-list .ic::before{content:"";display:block;flex:none;width:23px;height:23px;background-color:var(--accent-br);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:23px 23px;mask-size:23px 23px}
/* icon 1, vehicle: M3 13l2-5h14l2 5 | M3 13h18v4H3z | circle 7.5,18.5 r1.6 | circle 16.5,18.5 r1.6 */
.inc-list .inc-item:nth-child(1) .ic::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M3 13l2-5h14l2 5'/%3E%3Cpath d='M3 13h18v4H3z'/%3E%3Ccircle cx='7.5' cy='18.5' r='1.6'/%3E%3Ccircle cx='16.5' cy='18.5' r='1.6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M3 13l2-5h14l2 5'/%3E%3Cpath d='M3 13h18v4H3z'/%3E%3Ccircle cx='7.5' cy='18.5' r='1.6'/%3E%3Ccircle cx='16.5' cy='18.5' r='1.6'/%3E%3C/svg%3E")}
/* icon 2, person: circle 12,8 r4 | M4 21c0-4 4-6 8-6s8 2 8 6 */
.inc-list .inc-item:nth-child(2) .ic::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E")}
/* icon 3, teapot: M4 8h13v5a4 4 0 01-4 4H8a4 4 0 01-4-4z | M17 9h2a2 2 0 010 4h-2 | M7 4v2M11 4v2 */
.inc-list .inc-item:nth-child(3) .ic::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M4 8h13v5a4 4 0 01-4 4H8a4 4 0 01-4-4z'/%3E%3Cpath d='M17 9h2a2 2 0 010 4h-2'/%3E%3Cpath d='M7 4v2M11 4v2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M4 8h13v5a4 4 0 01-4 4H8a4 4 0 01-4-4z'/%3E%3Cpath d='M17 9h2a2 2 0 010 4h-2'/%3E%3Cpath d='M7 4v2M11 4v2'/%3E%3C/svg%3E")}
/* icon 4, mountain: M3 17l5-9 4 5 3-4 6 8 | M3 19h18 */
.inc-list .inc-item:nth-child(4) .ic::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M3 17l5-9 4 5 3-4 6 8'/%3E%3Cpath d='M3 19h18'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M3 17l5-9 4 5 3-4 6 8'/%3E%3Cpath d='M3 19h18'/%3E%3C/svg%3E")}
/* icon 5, convoy: circle 9,8 r3 | circle 17,9 r2.4 | M3 20c0-3 3-5 6-5s6 2 6 5 | M15 20c0-2 1.5-3.5 4-3.5 */
.inc-list .inc-item:nth-child(5) .ic::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='17' cy='9' r='2.4'/%3E%3Cpath d='M3 20c0-3 3-5 6-5s6 2 6 5'/%3E%3Cpath d='M15 20c0-2 1.5-3.5 4-3.5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='17' cy='9' r='2.4'/%3E%3Cpath d='M3 20c0-3 3-5 6-5s6 2 6 5'/%3E%3Cpath d='M15 20c0-2 1.5-3.5 4-3.5'/%3E%3C/svg%3E")}

/* 7. The feature photo was a CSS background on .inc-media, and the box got
      its height from ".inc-media image-slot". The slot is gone, so the box
      carries its own height and the real core/image fills it. The original
      background declaration is left in place as a load fallback. */
.inc-media{height:560px}
@media(max-width:900px){.inc-media{height:340px}}
.inc-media .wp-block-image{position:absolute;inset:0;width:100%;height:100%;margin:0}
.inc-media .wp-block-image img{width:100%;height:100%;object-fit:cover;display:block}

/* 8. Badge <b> and <span> become paragraphs. font-weight:700 is explicit
      because the UA bold of <b> is gone and only Lora 700 is bundled.
      line-height / padding / margin as per note 5. */
.inc-media .badge .badge-b{font-family:var(--display);font-weight:700;font-size:1.5rem;color:var(--badge-b);display:block;line-height:1;margin:0}
.inc-media .badge .badge-span{font-size:.82rem;color:var(--badge-span);line-height:28.05px;margin:0 0 -1px;padding-top:1px}


/* ---------- pattern: sdsr-4wd/book ---------- */

/* The eyebrow is a <span> in the mockup; RichText destroys <span>, so it ships
   as a paragraph. `.sec-head p` (0,1,1) then outranks `.eyebrow` (0,1,0) and
   would repaint it muted and add a 14px top margin the span never had. */
.sec-head p.eyebrow{margin-top:0;color:var(--accent)}

/* Mockup: <p class="facts-line" style="margin-top: 12px;">. A core/paragraph
   cannot carry that inline style, so restore the 12px above `.sec-head p`. */
.book .sec-head p.facts-line{margin-top:12px}

/* .dl-wrap was a <p>, so `.sec-head p{margin-top:14px}` (0,1,1) beat
   `.dl-wrap{margin-top:18px}` (0,1,0) and the approved mockup actually renders
   14px. As a core/buttons <div> that p rule no longer applies, so 14px is
   pinned here. That div is also a flex container, so the inherited
   text-align:center no longer centres the button - justify-content does. */
.book .sec-head .dl-wrap{margin-top:14px;justify-content:center}

/* core/button puts className on the wrapper <div class="wp-block-button">, not
   on the inner <a>, so `.dl-btn` lands one level too high. Strip the pill off
   the wrapper and rebuild it on the link, out-ranking core's
   `:root :where(.wp-element-button,.wp-block-button__link)` defaults (0,1,0). */
.wp-block-button.dl-btn{height:auto;padding:0;background:none;border-radius:0}
.wp-block-button.dl-btn>.wp-block-button__link{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 24px;border-radius:999px;background:var(--accent);color:#fff;font-family:var(--ui);font-weight:600;font-size:.9rem;text-decoration:none}
.wp-block-button.dl-btn>.wp-block-button__link:hover{background:#175d96}


/* ===== FAQ pattern: block-markup compatibility ===== */

/* 1. The mockup carried inline style="text-align:center; margin:0px auto" on
      .sec-head. A core/group cannot express an auto side margin, so the two
      declarations move to CSS. (Inline margin:0 auto also cancels the
      margin-bottom:46px from the base .sec-head rule - reproduced here.) */
.faq .sec-head{margin:0 auto;text-align:center}

/* 2. The mockup summary ended with <span class="plus">+</span>. RichText destroys
      <span>, so the plus is drawn as a pseudo-element. summary is display:flex,
      so ::after becomes the second flex item exactly as the span did - the text
      node is the first, justify-content:space-between and gap:18px still apply.
      Declarations copied verbatim from `summary .plus` in design-clean.css. */
.faq-list summary::after{
	content:"+";
	flex:none;
	width:26px;
	height:26px;
	border-radius:50%;
	border:1px solid var(--line);
	color:var(--accent);
	display:flex;
	align-items:center;
	justify-content:center;
	font-weight:700;
	transition:transform .25s;
}
/* replaces `details[open] summary .plus{transform:rotate(45deg)}` */
.faq-list details[open] summary::after{transform:rotate(45deg)}

/* 3. The answer was <div class="body"> in the mockup (margin 0 from the global
      *{margin:0} reset). Core blocks give us <p class="body">, which picks up
      p{margin:0 0 1rem} and would add 16px under every answer. */
.faq-list details p.body{margin:0}

/* ==========================================================================
   CONTACT SECTION - block port compatibility
   ========================================================================== */

/* 1. data-theme="dark" was stripped from <section class="contact"> (artefact rule 12).
      Re-scope the dark palette to .contact so every var() inside the section resolves
      exactly as it did in the mockup. Custom properties inherit by proximity, not
      source order, so this wins over the light palette on any ancestor.
      Only the properties this section actually consumes are copied from
      [data-theme="dark"]; keep in sync if that block ever changes. */
.contact{
	--bg:#07182c;
	--heading:#fff;
	--text:#d8e6f3;
	--muted:#88a1ba;
	--accent:#1e73b8;
	--accent-br:#3f9bdc;
	--line:rgba(255,255,255,.1);
	--surface:rgba(255,255,255,.05);
	--surface-border:rgba(255,255,255,.16);
	--btn-shadow:0 14px 40px -16px rgba(63,155,220,.55);
	--ic-bg:rgba(63,155,220,.14);
	--shadow:rgba(0,0,0,.8);
}

/* 2. The eyebrow was <span class="eyebrow">, which RichText destroys on first edit,
      so it is now <p class="eyebrow">. Undo the paragraph defaults and the
      .sec-head p colour, which outranks .eyebrow on specificity (0,1,1 vs 0,1,0).
      display:block and margin-bottom:14px already come from .sec-head .eyebrow. */
.sec-head p.eyebrow{margin-top:0;margin-bottom:14px;color:var(--accent)}

/* 3. .contact-info .row is display:flex, so the label/value pair stays wrapped in one
      group (one flex item). The mockup's <b> and <span> became two plain paragraphs:
      first paragraph takes the .contact-info b styling, second takes .contact-info span.
      The line-height on the value reproduces the 28.05px line box the inline <span>
      inherited from its 17px parent strut; a plain 1.65 would be 1.12px shorter. */
.contact-info .row > .wp-block-group > p{margin:0 0 1px;color:var(--heading);font-weight:600}
.contact-info .row > .wp-block-group > p + p{margin:0;color:var(--muted);font-weight:400;font-size:.96rem;line-height:calc(1.65 / 0.96)}

/* 4. Inline <svg class="ico"> cannot live in a core block, so .ic is an empty group and
      the icon is painted as a CSS mask on ::before.
      viewBox 0 0 24 24, fill none, stroke-width 1.7, default butt caps / miter joins,
      rendered 22x22 in var(--accent-br), matching .ico + .contact-info .ic .ico. */
.contact-info .ic::before{
	content:"";
	flex:none;
	width:22px;
	height:22px;
	background-color:var(--accent-br);
	-webkit-mask:var(--ico) center/contain no-repeat;
	mask:var(--ico) center/contain no-repeat;
}
/* envelope - <rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/> */
.contact-info .row:nth-child(1) .ic::before{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E")}
/* map pin - <path d="M12 21s-7-5.2-7-11a7 7 0 0114 0c0 5.8-7 11-7 11z"/><circle cx="12" cy="10" r="2.6"/> */
.contact-info .row:nth-child(2) .ic::before{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M12 21s-7-5.2-7-11a7 7 0 0114 0c0 5.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E")}


/* ================= FOOTER PATTERN COMPAT =================
   Only rules needed because the block markup differs from the mockup markup.
   Appended after style.css, so these class rules win the ties they need to. */

/* .foot-link was a block-level <a class="foot-link">. No core block can output a
   bare classed anchor, so the class now sits on a core/paragraph that WRAPS the
   link. Two consequences: the base rule p{margin:0 0 1rem} adds a bottom margin
   the anchor never had, and a{color:var(--accent)} beats the inherited .foot-link
   colour on the inner anchor. */
.site-footer p.foot-link{margin-bottom:0}
.site-footer .foot-link a{display:block;color:inherit;text-decoration:none}

/* The two <span>s inside .foot-bottom are core/paragraphs (spans are destroyed by
   RichText, and each span is its own flex item so they must stay separate blocks).
   Spans carried no margin; p{margin:0 0 1rem} does. */
.site-footer .foot-bottom > p{margin:0}

/* theme.json styles.elements.heading applies font-weight:400 and line-height:1.08
   to every h1-h6 at :root :where(...) specificity. The mockup's <h4> was UA bold
   with the 1.65 line-height inherited from body (h4 is NOT in the design's
   h1,h2,h3 rule). Restore both, and pin margin-top for injected block-gap. */
.site-footer .foot-terms h4{margin-top:0;font-weight:700;line-height:1.65}

/* .foot-brand and .foot-terms are core/group blocks (mockup: plain <div>s) and are
   flex items of .foot-wrap, so any injected block-gap margin-block-start would
   offset them vertically. blockGap is null in theme.json today; this keeps the
   port safe if that ever changes. */
.site-footer .foot-brand,
.site-footer .foot-terms{margin-block-start:0;margin-block-end:0}


/* Icon tiles. The mockup drew these as inline <svg class="ico"> inside each
   .ic tile. Core blocks cannot hold raw SVG, so each is redrawn as a CSS mask
   on ::before at the same box size, with the same path data and stroke width.
   Colour comes from the tile via currentColor, matching stroke:var(--accent-br). */
.inc-list .ic,.contact-info .ic{color:var(--accent-br);}
.inc-list .ic::before,.contact-info .ic::before{content:"";display:block;flex:none;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;}
.inc-list .ic::before{width:23px;height:23px;}
.contact-info .ic::before{width:22px;height:22px;}
.ico-bus{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M3 13l2-5h14l2 5%22/%3E%3Cpath d=%22M3 13h18v4H3z%22/%3E%3Ccircle cx=%227.5%22 cy=%2218.5%22 r=%221.6%22/%3E%3Ccircle cx=%2216.5%22 cy=%2218.5%22 r=%221.6%22/%3E%3C/svg%3E");}
.ico-person{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx=%2212%22 cy=%228%22 r=%224%22/%3E%3Cpath d=%22M4 21c0-4 4-6 8-6s8 2 8 6%22/%3E%3C/svg%3E");}
.ico-cup{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M4 8h13v5a4 4 0 01-4 4H8a4 4 0 01-4-4z%22/%3E%3Cpath d=%22M17 9h2a2 2 0 010 4h-2%22/%3E%3Cpath d=%22M7 4v2M11 4v2%22/%3E%3C/svg%3E");}
.ico-mountain{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M3 17l5-9 4 5 3-4 6 8%22/%3E%3Cpath d=%22M3 19h18%22/%3E%3C/svg%3E");}
.ico-convoy{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx=%229%22 cy=%228%22 r=%223%22/%3E%3Ccircle cx=%2217%22 cy=%229%22 r=%222.4%22/%3E%3Cpath d=%22M3 20c0-3 3-5 6-5s6 2 6 5%22/%3E%3Cpath d=%22M15 20c0-2 1.5-3.5 4-3.5%22/%3E%3C/svg%3E");}
.ico-mail{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x=%223%22 y=%225%22 width=%2218%22 height=%2214%22 rx=%222%22/%3E%3Cpath d=%22M3 7l9 6 9-6%22/%3E%3C/svg%3E");}
.ico-pin{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M12 21s-7-5.2-7-11a7 7 0 0114 0c0 5.8-7 11-7 11z%22/%3E%3Ccircle cx=%2212%22 cy=%2210%22 r=%222.6%22/%3E%3C/svg%3E");}


/* ------------------------------------------------------------------
   Gap fixes found by reviewing all eight patterns together.
   These cover cases no single section agent could see.
   ------------------------------------------------------------------ */

/* Contact rows: the mockup used <b>Email</b><span>value</span>. Neither tag
   survives RichText, so both are plain paragraphs now and are targeted by
   position instead. Values mirror .contact-info b / .contact-info span. */
.contact-info .row > div > p:first-child{display:block;color:var(--heading);font-weight:600;margin:0 0 1px;}
/* The value was an inline <span>, so its line box was sized by the parent's
   17px/1.65 strut, not by its own smaller font. A block paragraph would use its
   own 0.96rem instead and lose about a pixel per line, so the strut is restated
   explicitly here. */
.contact-info .row > div > p:last-child{color:var(--muted);font-size:.96rem;margin:0;line-height:calc(17px * 1.65);}

/* Footer email link: the class sits on the inner <a>, so the wrapping
   paragraph must not add the base 1rem bottom margin. */
.foot-link-wrap{margin:0;}

/* Footer bottom bar is a flex row of paragraphs. */
.foot-bottom p{margin:0;}

/* FAQ answers: the mockup's <div class="body"> is a paragraph now. */
.faq details .body{margin:0;}

/* FAQ open/close affordance. The mockup put a <span class="plus">+</span>
   inside <summary>, which RichText destroys. Two problems solved together:
   summary was display:flex, so any bold or italic the client applies would
   break out as its own flex item and jump to the far right with an 18px gap.
   Making summary a block with an absolutely positioned ::after removes the
   flex container and restores the + indicator. Values copied from
   summary .plus / details[open] summary .plus. */
.faq summary{display:block;position:relative;padding-right:44px;}
.faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;border:1px solid var(--line);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;line-height:1;transition:transform .25s;}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg);}

/* FAQ heading is centred in the mockup via an inline style, which a group
   block cannot carry. Mirrors the existing .book .sec-head rule. */
.faq .sec-head{text-align:center;margin-left:auto;margin-right:auto;}

/* The success panel is revealed by main.js adding .show; the mockup's own
   stylesheet only ever declared .form-success{display:none}. */
.form-success.show{display:block;}

/* Honeypot: kept out of sight without display:none, which some bots detect. */
.form .hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* Header logo. parts/header.html uses core/site-logo so the client can swap it
   by clicking, and so the path survives a theme folder rename. The mockup sized
   the <img> with an inline style, which cannot round-trip through a block. */
#site-header .logo-box .wp-block-site-logo{line-height:0;margin:0;width:auto;}
#site-header .logo-box .wp-block-site-logo a{display:block;line-height:0;}
/* max-width:100% is deliberate, not an oversight. The mockup's global
   img{max-width:100%} squeezes this logo horizontally once the header runs out
   of room (about 137px wide by 82px tall on a 390px screen, so slightly
   stretched). Reproduced here so the port matches the approved rendering.
   To un-distort it instead, set max-width:none and give .brand flex:none. */
#site-header .logo-box .wp-block-site-logo img{height:82px;width:auto;max-width:100%;display:block;}

/* Template parts wrap their contents in an extra element; removing it from the
   box tree keeps the fixed header and the page flow exactly as authored. */
.wp-block-template-part{display:contents;}

/* Block gap is disabled in theme.json. These sit at one class of specificity:
   enough to beat core's :where() layout margins, low enough that most real
   rules from the mockup still win. */
.is-layout-flow > *{margin-block-start:0;}
.wp-site-blocks > *{margin-block-start:0;}
.wp-block-post-content > *{margin-block-start:0;}
.wp-block-post-content{margin:0;padding:0;}
.wp-site-blocks{margin:0;padding:0;}

/* The guard above ties with the mockup's own single-class top margins, and a
   tie goes to whichever rule comes last, which would be the guard. Every such
   value is therefore restated here one specificity step higher. Measured
   against the mockup, the first three of these were worth 42px, 30px and 34px
   of lost vertical space. Values are copied from Part 2; if one is edited
   there it must be edited here too. */
.is-layout-flow > .faq-list{margin-top:42px;}
.is-layout-flow > .contact-info{margin-top:30px;}
.is-layout-flow > .foot-bottom{margin-top:34px;}
.is-layout-flow > .journey-title{margin-top:14px;}
.is-layout-flow > .sights{margin-top:24px;}
.is-layout-flow > .sights-note{margin-top:26px;}
.is-layout-flow > .dl-wrap{margin-top:18px;}
.is-layout-flow > .countdown{margin-top:42px;}
.is-layout-flow > .foot-link{margin-top:4px;}