/* Kervan site styles. Colour, type and spacing come from /tokens.css.
   Component rules below are lifted unchanged from the reference index.html. */
:root{
  --maxw:1180px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(84px + env(safe-area-inset-top,0px))}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }

body{
  margin:0;
  background:var(--surface-canvas);
  color:var(--ink);
  font-family:var(--font-text);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--surface-canvas);z-index:60}

h1,h2,h3{font-family:var(--font-display);font-weight:400;margin:0;letter-spacing:-.018em}
h1{font-size:clamp(44px,7.4vw,84px);line-height:1.02;font-variation-settings:'opsz' 144;letter-spacing:-.028em}
h2{font-size:clamp(30px,4.2vw,44px);line-height:1.1;font-variation-settings:'opsz' 72}
h3{font-size:clamp(23px,2.6vw,30px);line-height:1.2;font-variation-settings:'opsz' 48}
p{margin:0}
a{color:var(--copper-deep);text-decoration:none;border-bottom:1px solid var(--border)}
a:hover{border-bottom-color:var(--copper-deep)}
:focus-visible{outline:2px solid var(--copper-deep);outline-offset:3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--space-4)}
@media(min-width:900px){ .wrap{padding:0 var(--space-7)} }

.lead{font-size:clamp(18px,2.1vw,20px);line-height:1.55;color:var(--ink-muted);max-width:40ch}
.small{font-size:15px;line-height:1.55}
.muted{color:var(--ink-muted)}
.label{font-size:12px;line-height:1.3;font-weight:600;letter-spacing:.1em;text-transform:uppercase}

section{padding:var(--space-8) 0}
@media(max-width:700px){ section{padding:var(--space-7) 0} }
.rule{height:1px;background:var(--border);border:0;margin:0}

/* ---------- header ---------- */
header{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
  background:var(--surface-canvas);border-bottom:1px solid var(--border);
}
.bar{max-width:var(--maxw);margin:0 auto;padding:var(--space-3) var(--space-4);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
@media(min-width:900px){ .bar{padding:var(--space-3) var(--space-7)} }
.brand{display:flex;align-items:center;gap:14px;border:0}
.brand svg{display:block}
nav.main{display:none;gap:var(--space-5);align-items:center}
@media(min-width:900px){ nav.main{display:flex} }
nav.main a{color:var(--ink-muted);border:0;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
nav.main a:hover{color:var(--ink)}

.btn{
  display:inline-block;font-family:var(--font-text);font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:13px 22px;border-radius:var(--radius-control);
  background:var(--copper-deep);color:var(--ink-inverse);border:1px solid var(--copper-deep);
  cursor:pointer;transition:background .15s ease;
}
.btn:hover{background:var(--copper)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--ink-inverse)}

/* ---------- hero ---------- */
.hero{padding-top:var(--space-7);padding-bottom:0}
.hero-grid{display:grid;grid-template-columns:1fr;gap:var(--space-7);align-items:end}
@media(min-width:980px){ .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:var(--space-8)} }
.hero h1{margin-bottom:var(--space-4)}
.hero .lead{max-width:34ch;margin-bottom:var(--space-5);color:var(--ink)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-5)}
.hero-note{font-size:15px;color:var(--ink-muted);max-width:42ch}

/* arcade: the four grounds as portals */
.arcade{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2);align-items:end}
.portal{display:block;border:0;text-align:left}
.portal .arch{width:100%;height:auto;display:block}
.portal .arch path{fill:var(--p);transition:fill .2s ease}
.portal:hover .arch path,.portal:focus-visible .arch path{fill:var(--ink)}
.portal .nm{font-family:var(--font-display);font-size:clamp(14px,1.6vw,19px);line-height:1.15;
  font-variation-settings:'opsz' 36;color:var(--ink);margin-top:var(--space-2);display:block}
.portal .sub{font-size:12px;color:var(--ink-muted);display:block;margin-top:2px}
.arch-rise{animation:rise .7s cubic-bezier(.2,.7,.3,1) both}
@keyframes rise{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}

/* ---------- services strip ---------- */
.strip{display:grid;grid-template-columns:1fr;border-top:1px solid var(--border)}
@media(min-width:800px){ .strip{grid-template-columns:repeat(3,1fr)} }
.strip > div{padding:var(--space-5) 0;border-bottom:1px solid var(--border)}
@media(min-width:800px){
  .strip > div{padding:var(--space-5) var(--space-5) var(--space-5) 0;border-bottom:0;border-right:1px solid var(--border)}
  .strip > div:last-child{border-right:0}
  .strip > div + div{padding-left:var(--space-5)}
}
.strip h3{margin-bottom:var(--space-1)}
.strip p{color:var(--ink-muted);font-size:16px}

/* ---------- grounds ---------- */
.grounds{display:grid;grid-template-columns:1fr;gap:var(--space-6);margin-top:var(--space-6)}
@media(min-width:760px){ .grounds{grid-template-columns:repeat(2,1fr);gap:var(--space-6) var(--space-5)} }
@media(min-width:1060px){ .grounds{grid-template-columns:repeat(4,1fr)} }
.ground .cap{width:100%;height:auto;display:block;margin-bottom:var(--space-3)}
.ground h3{margin-bottom:var(--space-2)}
.ground p{color:var(--ink-muted);font-size:16px;margin-bottom:var(--space-3)}
.spec{border-top:1px solid var(--border);font-size:14px}
.spec div{display:flex;justify-content:space-between;gap:var(--space-2);
  padding:7px 0;border-bottom:1px solid var(--border)}
.spec dt{color:var(--ink-muted);margin:0}
.spec dd{margin:0;text-align:right}

/* ---------- facts (inverted band) ---------- */
.band{background:var(--surface-ink);color:var(--ink-inverse)}
.band h2{color:var(--ink-inverse)}
.band .lead{color:var(--ink-inverse);opacity:.82}
.facts{display:grid;grid-template-columns:1fr;gap:0;margin-top:var(--space-6);
  border-top:1px solid rgba(246,241,232,.22)}
@media(min-width:820px){ .facts{grid-template-columns:repeat(2,1fr);column-gap:var(--space-7)} }
.fact{padding:var(--space-5) 0;border-bottom:1px solid rgba(246,241,232,.22)}
.fact .big{font-family:var(--font-display);font-size:clamp(32px,4vw,44px);line-height:1.05;
  font-variation-settings:'opsz' 72;display:block;margin-bottom:var(--space-2)}
.fact p{opacity:.82;font-size:16px;max-width:44ch}

/* ---------- cases ---------- */
.cases{margin-top:var(--space-6);border-top:1px solid var(--border)}
.case{display:grid;grid-template-columns:1fr;gap:var(--space-3);
  padding:var(--space-6) 0;border-bottom:1px solid var(--border)}
@media(min-width:900px){ .case{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:var(--space-7)} }
.case .kind{display:block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--copper-deep);margin-bottom:var(--space-2)}
.case h3{font-size:clamp(22px,2.4vw,28px)}
.case .where{font-size:15px;color:var(--ink-muted);margin-top:var(--space-2)}
.case p{color:var(--ink-muted);font-size:16px;max-width:62ch}
.case .spec{margin-top:var(--space-4)}
@media(min-width:620px){
  .case .spec{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--space-6)}
}

/* ---------- process ---------- */
.steps{counter-reset:s;margin-top:var(--space-6);border-top:1px solid var(--border)}
.step{display:grid;grid-template-columns:auto 1fr;gap:var(--space-4);
  padding:var(--space-5) 0;border-bottom:1px solid var(--border);align-items:start}
@media(min-width:820px){ .step{grid-template-columns:56px 300px 1fr;gap:var(--space-6)} }
.step .n{counter-increment:s;font-family:var(--font-display);font-size:30px;line-height:1;
  font-variation-settings:'opsz' 48;color:var(--copper);}
.step .n::before{content:counter(s,decimal-leading-zero)}
.step h3{font-size:24px;grid-column:2/-1}
@media(min-width:820px){ .step h3{grid-column:2/3} }
.step p{color:var(--ink-muted);font-size:16px;grid-column:2/-1}
@media(min-width:820px){ .step p{grid-column:3/4;max-width:52ch} }

/* ---------- handled list ---------- */
.two{display:grid;grid-template-columns:1fr;gap:var(--space-6)}
@media(min-width:900px){ .two{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:var(--space-8)} }
.handled{columns:1;column-gap:var(--space-6);margin:0;padding:0;list-style:none}
@media(min-width:620px){ .handled{columns:2} }
.handled li{break-inside:avoid;padding:10px 0 10px 24px;border-bottom:1px solid var(--border);
  position:relative;font-size:16px}
.handled li::before{content:"";position:absolute;left:0;top:19px;width:10px;height:10px;
  background:var(--copper);clip-path:polygon(50% 0,100% 100%,0 100%)}

/* ---------- budget panel ---------- */
.panel{background:var(--surface-sunken);padding:var(--space-6);border:1px solid var(--border)}
@media(min-width:900px){ .panel{padding:var(--space-7)} }
.panel h2{margin-bottom:var(--space-4)}
.panel p + p{margin-top:var(--space-3)}

/* ---------- faq ---------- */
.faq{margin-top:var(--space-6);border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{cursor:pointer;list-style:none;padding:var(--space-4) 36px var(--space-4) 0;
  font-family:var(--font-display);font-size:clamp(19px,2.2vw,23px);font-variation-settings:'opsz' 36;
  position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:13px;height:13px;
  border-right:1.5px solid var(--copper);border-bottom:1.5px solid var(--copper);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .a{padding:0 0 var(--space-5);color:var(--ink-muted);font-size:16px;max-width:66ch}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr;gap:var(--space-6)}
@media(min-width:900px){ .contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:var(--space-8)} }
.field{display:block;margin-bottom:var(--space-3)}
.field span{display:block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-muted);margin-bottom:var(--space-1)}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--font-text);font-size:16px;color:var(--ink);
  background:var(--surface-raised);border:1px solid var(--border);
  border-radius:var(--radius-control);padding:11px 13px}
.field textarea{min-height:110px;resize:vertical}
.row{display:grid;grid-template-columns:1fr;gap:var(--space-3)}
@media(min-width:560px){ .row{grid-template-columns:1fr 1fr} }
.direct dt{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-muted);margin-top:var(--space-4)}
.direct dd{margin:4px 0 0;font-size:17px}

/* ---------- footer ---------- */
footer{background:var(--surface-ink);color:var(--ink-inverse);padding:var(--space-7) 0 var(--space-6)}
footer a{color:var(--ink-inverse);opacity:.78;border:0}
footer a:hover{opacity:1}
.foot{display:grid;grid-template-columns:1fr;gap:var(--space-6)}
@media(min-width:820px){ .foot{grid-template-columns:minmax(0,1fr) auto auto;gap:var(--space-7)} }
.foot-nav{display:flex;flex-direction:column;gap:10px;font-size:15px}
.legal{margin-top:var(--space-6);padding-top:var(--space-4);
  border-top:1px solid rgba(246,241,232,.22);font-size:13px;opacity:.62;
  display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:space-between}

/* =====================================================================
   Additions for the multi-page build. Tokens only — no new colours,
   typefaces, shadows, gradients or radii.
   ===================================================================== */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--surface-raised);color:var(--ink);padding:var(--space-2) var(--space-3);border:1px solid var(--border)}
.skip:focus{left:var(--space-3);top:var(--space-3)}
nav.main a[aria-current="page"]{color:var(--ink)}
@media(max-width:400px){
  .bar{gap:var(--space-2)}
  .brand .wm{width:96px;height:auto}
  .bar .btn{padding:11px 14px}
}

.lead.after{margin-top:var(--space-3)}

/* breadcrumbs */
.crumbs{padding-top:var(--space-5);font-size:13px;color:var(--ink-muted)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--ink-muted)}
.crumbs a{color:var(--ink-muted);border:0}
.crumbs a:hover{color:var(--ink)}

/* child-page hero */
.page-hero{padding-top:var(--space-6);padding-bottom:var(--space-7)}
.page-hero-grid{display:grid;grid-template-columns:1fr;gap:var(--space-6);align-items:end}
@media(min-width:980px){ .page-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:var(--space-8)} }
.page-hero .eyebrow{display:block;color:var(--ink-muted);margin-bottom:var(--space-3)}
.page-hero h1{margin-bottom:var(--space-4)}
.page-hero .lead{color:var(--ink);max-width:40ch;margin-bottom:var(--space-5)}
.page-hero .lead:last-child{margin-bottom:0}
.hero-fig .arch{width:100%;max-width:300px;height:auto;display:block}
@media(max-width:979px){ .hero-fig{display:none} }

/* running text */
.prose{max-width:68ch}
.prose p+p{margin-top:var(--space-3)}
.prose + .prose, .prose + .tbc, .tbl-wrap + .prose{margin-top:var(--space-5)}
.cols{display:grid;grid-template-columns:1fr;gap:var(--space-6)}
@media(min-width:900px){ .cols{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:var(--space-8)} }
h3.sub{margin:var(--space-6) 0 var(--space-3)}

/* tables */
.tbl-wrap{overflow-x:auto;margin-top:var(--space-5);border-top:1px solid var(--border);-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:15px;line-height:1.55}
@media(max-width:560px){ .tbl{font-size:14px} .tbl th,.tbl td{padding-right:var(--space-2)} }
.tbl caption{text-align:left;caption-side:bottom;padding-top:var(--space-2)}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:12px var(--space-3) 12px 0;border-bottom:1px solid var(--border)}
.tbl thead th{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}
.tbl tbody th{font-weight:600}

/* placeholders: dashed copper-deep hairline, clearly not finished */
.tbc{border:1px dashed var(--copper-deep);background:var(--surface-raised);padding:var(--space-4);margin-top:var(--space-5);max-width:68ch}
.tbc .label{display:block;color:var(--copper-deep);margin-bottom:var(--space-1)}
.tbc p{font-size:15px;line-height:1.55;color:var(--ink-muted)}
.tbc .tbc-note{margin-top:var(--space-1)}
.tbc-i{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--copper-deep);border-bottom:1px dashed var(--copper-deep);cursor:help;white-space:nowrap}
footer .tbc-i{color:var(--ink-inverse);border-bottom-color:var(--ink-inverse)}

/* sample programmes */
.progs{display:grid;grid-template-columns:1fr;gap:var(--space-6);margin-top:var(--space-6)}
@media(min-width:900px){ .progs{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6) var(--space-7)} }
@media(min-width:1100px){ .progs.three{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6) var(--space-5)} }
.prog h3{margin-bottom:var(--space-1)}
.prog .meta{font-size:15px;color:var(--ink-muted);margin-bottom:var(--space-3)}
.days{margin:0;border-top:1px solid var(--border)}
.days div{display:grid;grid-template-columns:64px 1fr;gap:var(--space-3);padding:var(--space-2) 0;border-bottom:1px solid var(--border)}
.days dt{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);padding-top:4px}
.days dd{margin:0;font-size:16px}

/* cross-links in the strip pattern */
.onward{margin-top:var(--space-6)}
.onward h3 a{color:var(--ink);border-bottom:1px solid var(--border)}
.onward h3 a:hover{border-bottom-color:var(--copper-deep)}

/* ground cards: link titles */
.ground h3 a, .case h3 a{color:var(--ink);border-bottom:1px solid var(--border)}
.ground h3 a:hover, .case h3 a:hover{border-bottom-color:var(--copper-deep)}
.more{display:inline-block;margin-top:var(--space-4);font-size:15px}

/* closing call to action */
.close{display:grid;grid-template-columns:1fr;gap:var(--space-5);align-items:end}
@media(min-width:900px){ .close{grid-template-columns:minmax(0,1fr) auto;gap:var(--space-8)} }

/* footer column headings */
.foot-h{opacity:.62;margin-bottom:2px}
@media(min-width:820px){ .foot{grid-template-columns:minmax(0,1fr) auto auto auto} }

/* journal list */
.posts{margin-top:var(--space-6);border-top:1px solid var(--border);list-style:none;padding:0}
.posts li{padding:var(--space-4) 0;border-bottom:1px solid var(--border)}
.posts .label{color:var(--ink-muted);display:block;margin-bottom:var(--space-1)}

/* form status */
.form-status{margin-top:var(--space-3);font-size:15px}
.cols > *, .page-hero-grid > *, .progs > *{min-width:0}
/* Brand file §4: the mark is ink on light grounds (the reference header inherited link copper). */
.brand{color:var(--ink)}
h1.h1-sec{font-size:clamp(30px,4.2vw,44px);line-height:1.1;font-variation-settings:'opsz' 72;letter-spacing:-.018em}
.strip h3 a{color:var(--ink);border-bottom:1px solid var(--border)}
.strip h3 a:hover{border-bottom-color:var(--copper-deep)}
.tbl th.grp{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);padding-top:var(--space-4)}
.spec.landmarks{margin-top:var(--space-4);font-size:15px}
.spec.landmarks div{display:block;padding:var(--space-2) 0}
.spec.landmarks dt{color:var(--ink);font-weight:600}
.spec.landmarks dd{text-align:left;color:var(--ink-muted);margin-top:2px}
.spec.landmarks + .prose{margin-top:var(--space-4)}
/* photographs: square frame, hairline, caption below — never text over the image */
.photo{margin:var(--space-5) 0 0;max-width:420px}
.photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--border);background:var(--surface-sunken)}
.photo figcaption{font-size:13px;line-height:1.5;color:var(--ink-muted);margin-top:var(--space-1)}
.photo figcaption a{color:var(--ink-muted)}
@media(max-width:899px){ .photo{max-width:none} }
/* Arcade: align the four arches on one line; a two-line name (Turquoise Coast) wraps below its arch instead of lifting it. */
.arcade{align-items:start}
.ground .card-img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--border);background:var(--surface-sunken);margin-bottom:var(--space-3)}
.thumbs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);max-width:420px;margin-top:var(--space-3)}
.thumbs .photo{margin:0;max-width:none}
.thumbs .photo figcaption{font-size:12px}
@media(max-width:899px){ .thumbs{max-width:none} }
.thumbs.n3{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
.wide-photo{margin:0 0 var(--space-6)}
.wide-photo img{display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;border:1px solid var(--border);background:var(--surface-sunken)}
.wide-photo figcaption{font-size:13px;line-height:1.5;color:var(--ink-muted);margin-top:var(--space-1)}
.wide-photo figcaption a{color:var(--ink-muted)}
/* Arcade labels start at the arch's left edge (the arch is drawn from x=8 of an 80-wide viewBox = 10%). */
.portal .nm,.portal .sub{padding-left:10%}