/* Blackdown Outdoor — brand tokens. Change a colour or font here and it changes everywhere.
   Palette follows the logo: near-black #202124 and warm grey #938C83, on stone and white.
   RAL finish hex values are approximations; check against a physical RAL card before print. */
:root {
  --black: #202124;        /* logo charcoal — dark sections, primary buttons */
  --black-soft: #2A2B2E;
  --taupe: #938C83;        /* logo warm grey — accents on dark */
  --taupe-light: #B9AFA4;  /* accents and outlines on dark */
  --taupe-dark: #6B645C;   /* accent text on light (AA on white/stone) */
  --stone: #EEEAE3;
  --stone-light: #F7F5F0;  /* logo background */
  --white: #FFFFFF;
  --ink: #202124;
  --muted: #5E5A55;
  --line: #DDD7CD;
  --anthracite: #383E42;   /* RAL 7016 finish */
  --white-finish: #F1F0EA; /* RAL 9016 finish */
  --moss: #2F4538;         /* RAL 6005 finish */
  --font-head: 'Bodoni Moda', 'Bodoni 72', Didot, Georgia, serif;
  --font-ui: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --radius: 0px;
  --gutter: 20px;
  --max: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.65; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, .head {
  font-family: var(--font-head);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* Small spaced label */
.label {
  display: inline-block;
  font-family: var(--font-ui); font-weight: 500;
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--taupe-dark);
  margin-bottom: 14px;
}
.label--light { color: var(--taupe-light); }

/* Centred section heading with a small text link */
.sec-head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.sec-head h2 { font-size: clamp(30px, 5vw, 44px); color: var(--ink); }
.sec-head p { color: var(--muted); margin: 0 auto; max-width: 560px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-family: var(--font-ui); font-weight: 500; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--taupe-dark); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; transition: color 0.2s, gap 0.2s; }
.text-link:hover { color: var(--ink); gap: 12px; }

.skip-link { position: absolute; left: -9999px; top: 8px; background: var(--black); color: #fff; padding: 8px 14px; z-index: 100; }
.skip-link:focus { left: 8px; }

/* Buttons: square, thin, quiet */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 12px 30px; border-radius: var(--radius);
  font-family: var(--font-ui); font-weight: 500; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.btn:focus-visible { outline: 2px solid var(--taupe); outline-offset: 3px; }
.btn--primary { background: var(--black); color: #fff; border-color: var(--black); }
.btn--primary:hover { background: transparent; color: var(--black); }
.btn--light { background: var(--stone-light); color: var(--black); border-color: var(--stone-light); }
.btn--light:hover { background: transparent; color: var(--stone-light); }
.btn--outline { background: transparent; color: var(--black); border-color: var(--black); }
.btn--outline:hover { background: var(--black); color: #fff; }
.btn--outline-light { background: transparent; color: var(--stone-light); border-color: rgba(247,245,240,0.6); }
.btn--outline-light:hover { background: var(--stone-light); color: var(--black); border-color: var(--stone-light); }

/* Forms */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field label { font-family: var(--font-ui); font-weight: 500; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 16px; padding: 14px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; color: var(--ink); width: 100%; transition: border-color 0.2s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--black); }
.field-row { display: grid; grid-template-columns: 1fr; gap: 0 18px; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
.form-note { font-size: 13px; color: var(--muted); margin: 14px 0 0; }
.form-success { background: #E7EDE8; border-left: 3px solid var(--moss); padding: 14px 16px; margin-bottom: 18px; }
.form-error { background: #F4E7E1; border-left: 3px solid #9A4B2B; padding: 14px 16px; margin-bottom: 18px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Logo */
.logo-svg { display: block; height: 46px; width: auto; overflow: visible; }
.logo-svg .logo-ink { fill: #202124; }
.logo-svg .logo-acc { fill: #938C83; }
.logo-svg .logo-word { font-family: var(--font-head); font-weight: 600; }
.logo-svg .logo-sub { font-family: var(--font-ui); font-weight: 500; }
.logo-svg--light .logo-ink { fill: #F1EEE8; }
.logo-svg--light .logo-acc { fill: #B9AFA4; }

/* Static site: spam trap and form states */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-error { background: #F4E6E1; border-left: 3px solid #A35A22; padding: 14px 16px; margin-bottom: 18px; }
.ho-form button[disabled] { opacity: 0.6; cursor: wait; }
/* Legal and 404 pages */
.legal { background: var(--stone-light, #F7F5F0); padding: 64px 0 80px; }
.legal-inner { max-width: 720px; }
.legal-kicker { font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--taupe-dark); margin: 0 0 10px; }
.legal h1 { font-family: var(--font-head); font-weight: 500; font-size: clamp(32px, 5vw, 44px); line-height: 1.1; margin: 0 0 8px; color: var(--ink); }
.legal-date { color: var(--muted); font-size: 14px; margin: 0 0 32px; }
.legal h2 { font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin: 32px 0 10px; color: var(--ink); }
.legal p, .legal li { font-size: 16px; line-height: 1.65; color: var(--ink); }
.legal ul { padding-left: 20px; margin: 0 0 12px; }
.legal a { color: var(--taupe-dark); }
.legal-back { margin-top: 40px; }
.legal .btn { color: #fff; }
.legal--center { text-align: center; padding: 96px 0; }
.legal--center .legal-inner { margin: 0 auto; }