/* =====================================================================
   1066 Firearms — main stylesheet
   Palette: gunmetal / parchment / oxblood / brass
   ===================================================================== */

:root {
  --ink:        #1B1E23;
  --ink-2:      #262A31;
  --ink-3:      #343941;
  --parchment:  #F6F2E9;
  --parchment-2:#EDE7DA;
  --card:       #FFFFFF;
  --text:       #23272E;
  --text-soft:  #5C6270;
  --line:       #DED6C4;
  --oxblood:    #7A1F23;
  --oxblood-lt: #93292E;
  --brass:      #A67C2F;
  --brass-lt:   #C39A4E;
  --brass-pale: #E7C783;
  --cream:      #F5EAD3;
  --green:      #2E6B45;
  --amber:      #96631A;
  --red:        #A3282D;

  --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --sans:  system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1180px;
  --radius: 3px;
  --shadow: 0 1px 2px rgba(27,30,35,.06), 0 6px 20px rgba(27,30,35,.07);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--parchment);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--oxblood); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--oxblood-lt); }

h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.18; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2rem, 4.2vw, 3rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
h3 { font-size: 1.25rem; }
p  { margin: 0 0 1.1em; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, 780px); margin-inline: auto; }

.section { padding: clamp(2.75rem, 6vw, 4.5rem) 0; }
.section--tint { background: var(--parchment-2); }
.section--dark { background: var(--ink); color: #D8D3C7; }
.section--dark h2, .section--dark h3 { color: var(--cream); }

.eyebrow {
  font-family: var(--sans);
  font-size: .74rem; letter-spacing: .19em; text-transform: uppercase;
  color: var(--brass); font-weight: 600; margin: 0 0 .7rem;
}
.lede { font-size: 1.12rem; color: var(--text-soft); }

.rule { height: 2px; width: 68px; background: var(--brass-lt); border: 0; margin: 0 0 1.4rem; }

/* ------------------------------ Buttons ------------------------------ */
.btn {
  display: inline-block; padding: .78rem 1.5rem; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: .93rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  border-radius: var(--radius); transition: background .15s, color .15s, border-color .15s;
}
.btn--primary { background: var(--oxblood); color: #fff; }
.btn--primary:hover { background: var(--oxblood-lt); color: #fff; }
.btn--ghost { background: transparent; color: var(--cream); border: 1.5px solid rgba(231,199,131,.55); }
.btn--ghost:hover { background: rgba(231,199,131,.13); color: var(--cream); }
.btn--outline { background: transparent; color: var(--oxblood); border: 1.5px solid var(--oxblood); }
.btn--outline:hover { background: var(--oxblood); color: #fff; }
.btn--sm { padding: .5rem 1rem; font-size: .8rem; }

/* WhatsApp. Darkened from the brand green so white text clears AA contrast. */
.btn--whatsapp {
  background: #107C6E; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; text-align: center;
}
.btn--whatsapp:hover { background: #0C6055; color: #fff; }
.btn--whatsapp svg { margin-top: -1px; }

/* --------------------------- Header / nav ---------------------------- */
.topbar {
  background: #14161A; color: #9AA0AC;
  font-size: .82rem; letter-spacing: .03em;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.topbar .wrap { display: flex; gap: 1.5rem; justify-content: space-between; align-items: center; min-height: 40px; flex-wrap: wrap; }
.topbar a { color: var(--brass-pale); text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.topbar__rfd { color: #7E848F; }

/* Section 5 authority, set beneath the RFD number. Brass rather than grey:
   it is the credential that matters most to the customers who need it, and
   it should read as a standing on the licence, not as a strapline. */
.topbar__s5 {
  display: block; margin-top: .15rem;
  color: var(--brass-pale); font-weight: 600;
  font-size: .78rem; letter-spacing: .05em;
}
.footer__s5 {
  color: var(--brass-pale); font-weight: 600;
  margin-top: .2rem;
}
@media (max-width: 560px) {
  /* The bar is already two rows on a phone; keep this from becoming a third
     line of its own by letting it sit tight under the number. */
  .topbar__s5 { margin-top: .1rem; font-size: .74rem; }
}

.site-header { background: var(--ink); border-bottom: 3px solid var(--brass); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1rem 0; }
.brand { display: block; line-height: 0; }
.brand img { width: 300px; max-width: 60vw; }

.nav-toggle {
  display: none; background: transparent; border: 1.5px solid rgba(231,199,131,.5);
  color: var(--cream); border-radius: var(--radius); padding: .5rem .8rem;
  font-size: .85rem; font-weight: 600; letter-spacing: .06em; cursor: pointer;
}

.nav ul { display: flex; gap: .35rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.nav a {
  display: block; padding: .55rem .8rem; color: #CFCABE; text-decoration: none;
  font-size: .88rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  border-radius: var(--radius); border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--cream); background: rgba(255,255,255,.05); }
.nav a.is-active { color: var(--brass-pale); border-bottom-color: var(--brass); }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav { display: none; width: 100%; order: 3; }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; gap: 0; padding-bottom: .75rem; }
  .nav a { padding: .7rem .3rem; border-bottom: 1px solid rgba(255,255,255,.07); border-radius: 0; }
  .site-header .wrap { flex-wrap: wrap; }

  /* An open menu needs a solid bed to sit on rather than being read through
     the tapestry. */
  .site-header--over:has(.nav.is-open) { background: rgba(14,16,19,.96); }
}

/* -------------------------------- Hero -------------------------------- */
.hero {
  background:
    linear-gradient(115deg, rgba(20,22,26,.97) 0%, rgba(20,22,26,.86) 45%, rgba(122,31,35,.55) 100%),
    radial-gradient(120% 90% at 80% 10%, rgba(166,124,47,.28), transparent 60%),
    #14161A;
  color: #DCD7CB;
  padding: clamp(3.5rem, 9vw, 6.5rem) 0;
  border-bottom: 1px solid rgba(231,199,131,.18);
}
.hero h1 { color: var(--cream); max-width: 21ch; }
.hero p { max-width: 58ch; font-size: 1.1rem; color: #C3BEB2; }
/* The eyebrow is a <p> too, so it picks up the measure above and wraps in the
   middle of "East Sussex". It is a label, not running text — let it be. */
.hero .eyebrow { max-width: none; font-size: .74rem; }
.hero__actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.6rem; }

/* ------------------- Hero with the tapestry behind it ------------------
   The header floats over this, so the banner has to start underneath it —
   hence the padding-top that matches the header's height, and the negative
   margin on the header itself further down.

   Everything sits in three layers: the picture, a scrim that makes the text
   readable, then the text. The scrim is doing real work — the tapestry is a
   pale cream, and cream type on cream linen is unreadable. --------------- */
.hero--image {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(420px, 52vw, 620px);
  padding: 0;
  background: #14161A;   /* shows through if the picture fails to load */
}
.hero__picture { position: absolute; inset: 0; z-index: -2; }
.hero__picture img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }

.hero--image::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(16,18,21,.92) 0%, rgba(16,18,21,.55) 26%, rgba(16,18,21,.18) 50%),
    linear-gradient(100deg, rgba(16,18,21,.94) 0%, rgba(16,18,21,.78) 34%, rgba(16,18,21,.30) 62%, rgba(122,31,35,.28) 100%);
}
/* Extra room at the top so the headline clears the floating logo rather than
   tucking up under it. */
.hero--image .hero__body { width: 100%; padding: clamp(3.75rem, 7vw, 5.5rem) 0 clamp(3.25rem, 6vw, 4.5rem); }

/* Type over a photograph needs a touch more help than type on flat colour. */
.hero--image h1       { color: #F7EFDD; text-shadow: 0 2px 18px rgba(0,0,0,.65); }
.hero--image .eyebrow { color: var(--brass-pale); text-shadow: 0 1px 8px rgba(0,0,0,.7); }
.hero--image p        { color: #E0DACD; text-shadow: 0 1px 10px rgba(0,0,0,.7); }

/* ---------------- Header floating over the banner ----------------
   The top bar stays solid. It sits above the banner rather than on it, so a
   translucent one would composite against the parchment page behind and go
   muddy — only the main header row wants to be see-through. */
.topbar--over { position: relative; z-index: 6; }
/* How far the banner is pulled up so it runs underneath the floating header.
   This has to equal the header's real height, and that changes with viewport,
   font size and whether the nav has wrapped — so main.js measures the header
   and writes the true value into this property. The figure below is only the
   starting guess and the no-JavaScript fallback; the hero's own top padding is
   generous enough that being a little out either way never collides. */
:root { --header-over: 118px; }
@media (max-width: 900px) { :root { --header-over: 100px; } }

.site-header--over {
  position: relative; z-index: 5;
  background: transparent; border-bottom: 0;
  margin-bottom: calc(-1 * var(--header-over));   /* pull the banner up underneath */
}
/* Not an adjacent-sibling selector: the hero lives inside <main>, so the header
   is a sibling of <main>, not of the hero. The body class is independent of how
   the page is nested. */
body.has-banner .hero--image { padding-top: var(--header-over); }
.site-header--over .nav a { text-shadow: 0 1px 6px rgba(0,0,0,.65); }
.site-header--over .nav-toggle { text-shadow: 0 1px 6px rgba(0,0,0,.65); }

/* ------------------------------ Grids -------------------------------- */
.grid { display: grid; gap: 1.5rem; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); }
.grid--cards { grid-template-columns: repeat(auto-fill, minmax(276px, 1fr)); }

/* ---------------------------- Category tiles -------------------------- */
.cat-tile {
  display: block; position: relative; overflow: hidden; text-decoration: none;
  background: var(--ink-2); color: var(--cream); border-radius: var(--radius);
  min-height: 210px; padding: 1.6rem 1.6rem 3.1rem; border: 1px solid rgba(231,199,131,.22);
  transition: transform .18s ease, border-color .18s;
}
.cat-tile:hover { transform: translateY(-3px); border-color: var(--brass); color: var(--cream); }
.cat-tile h3 { color: var(--cream); font-size: 1.5rem; margin-bottom: .35rem; }
.cat-tile p { color: #ABA598; font-size: .95rem; margin: 0; }
.cat-tile__count {
  position: absolute; right: 1.2rem; bottom: 1.2rem;
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-lt);
}
.cat-tile .badge { margin-bottom: .7rem; }
.cat-tile--restricted { background: #241417; border-color: #5A2226; }
.cat-tile--restricted:hover { border-color: var(--oxblood-lt); }
.cat-tile--restricted p { color: #B49B96; }

/* ------------------------------ Item card ----------------------------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(27,30,35,.09), 0 14px 34px rgba(27,30,35,.11); }
.card__media { position: relative; aspect-ratio: 4 / 3; background: var(--ink-2); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 1.1rem 1.15rem 1.25rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.card__ref { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-soft); }
.card__title { font-family: var(--serif); font-size: 1.14rem; font-weight: 700; margin: 0; line-height: 1.3; }
.card__title a { color: var(--text); text-decoration: none; }
.card__title a:hover { color: var(--oxblood); }
.card__meta { font-size: .87rem; color: var(--text-soft); margin: 0; }
.card__foot { margin-top: auto; padding-top: .8rem; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem .5rem; }
.card__price { font-family: var(--serif); font-size: 1.22rem; font-weight: 700; color: var(--oxblood); }

.badge {
  display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; padding: .25rem .55rem; border-radius: 2px; white-space: nowrap;
}
.badge--available { background: #E4EFE7; color: var(--green); }
.badge--reserved  { background: #FAEEDA; color: var(--amber); }
.badge--sold      { background: #F6E3E3; color: var(--red); }
.badge--licence   { background: var(--parchment-2); color: var(--text-soft); }
.badge--s5        { background: var(--oxblood); color: #fff; }
.badge--restricted{ background: #2A2E35; color: var(--brass-pale); }

/* Section 5 — prohibited weapons. Always visually separated from ordinary stock. */
.s5-notice {
  background: #1F1113; color: #E7D9CE; border: 1px solid #5A2226; border-left: 4px solid var(--oxblood-lt);
  border-radius: var(--radius); padding: 1.25rem 1.4rem; margin-bottom: 2rem;
}
.s5-notice h2, .s5-notice h3 { color: #F2DED4; margin-bottom: .45rem; font-size: 1.1rem; }
.s5-notice p { margin-bottom: .7rem; }
.s5-notice p:last-child { margin-bottom: 0; }
.s5-notice strong { color: #fff; }
.s5-notice a { color: var(--brass-pale); }
.card--s5 { border-color: #C9A7A9; }
.card--s5 .card__media::after {
  content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px var(--oxblood); pointer-events: none;
}
.card__media .badge { position: absolute; top: .7rem; left: .7rem; box-shadow: 0 1px 4px rgba(0,0,0,.25); }

/* --------------------------- Item detail page ------------------------- */
.item-layout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 2.5rem; align-items: start; }
@media (max-width: 860px) { .item-layout { grid-template-columns: 1fr; gap: 1.75rem; } }

.gallery__main { background: var(--ink-2); border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px,1fr)); gap: .55rem; margin-top: .6rem; }
.gallery__thumbs button {
  padding: 0; border: 2px solid transparent; background: var(--ink-2); cursor: pointer;
  border-radius: 2px; overflow: hidden; aspect-ratio: 4/3;
}
.gallery__thumbs button[aria-current="true"] { border-color: var(--brass); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.spec-table { width: 100%; border-collapse: collapse; margin: 1.2rem 0 1.6rem; font-size: .95rem; }
.spec-table th, .spec-table td { text-align: left; padding: .6rem .2rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table th { width: 42%; font-weight: 600; color: var(--text-soft); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }

.panel { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--brass); border-radius: var(--radius); padding: 1.25rem 1.35rem; }
.panel--warn { border-left-color: var(--oxblood); background: #FDF7F3; }
.panel--whatsapp { border-left-color: #107C6E; background: #F4FAF8; }
.panel h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.panel p:last-child, .panel ul:last-child { margin-bottom: 0; }

/* --------------------------- Contact channels -------------------------
   Telephone, WhatsApp and email in ONE card rather than three stacked
   panels. The contact sidebar was six near-identical boxes, so nothing
   could stand out; collapsing these three lets WhatsApp read instantly
   from its green badge, by contrast with its neighbours rather than by
   being louder than them.
   --------------------------------------------------------------------- */
.channels {
  background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--brass); border-radius: var(--radius);
  padding: 0 1.35rem;
}
.channel {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: 1.05rem 0; border-bottom: 1px solid var(--line);
}
.channel:last-child { border-bottom: 0; }

.channel__icon {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--parchment-2); color: var(--oxblood);
}
.channel__icon--whatsapp { background: #107C6E; color: #fff; }

.channel__body { min-width: 0; }   /* lets a long address wrap instead of overflowing */
.channel__label {
  font: 600 .74rem/1 var(--sans); letter-spacing: .11em; text-transform: uppercase;
  color: var(--text-soft); margin: 0 0 .3rem;
}
.channel__value {
  display: inline-block; font-size: 1.15rem; font-weight: 700; line-height: 1.25;
  color: var(--text); text-decoration: none; overflow-wrap: anywhere;
  /* Padding grows the tap target towards the ~44px phones want; the matching
     negative margin means the card looks exactly the same while doing it. */
  padding: .55rem 0; margin: -.55rem 0;
}
.channel__value:hover { color: var(--oxblood); text-decoration: underline; }
.channel__note { font-size: .84rem; color: var(--text-soft); margin: .25rem 0 0; }

/* The email address is longer than the other two — let it sit smaller so a
   narrow column never has to break it mid-word. */
.channel__value--email { font-size: 1rem; }

@media (max-width: 380px) {
  .channel__value { font-size: 1.05rem; }
}

/* ------------------------------ Filters ------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1.8rem; }
.chip {
  display: inline-block; padding: .45rem .95rem; border: 1px solid var(--line);
  background: var(--card); color: var(--text); text-decoration: none; border-radius: 100px;
  font-size: .87rem; font-weight: 600;
}
.chip:hover { border-color: var(--brass); color: var(--text); }
.chip.is-active { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.filters form { margin-left: auto; display: flex; gap: .4rem; }

/* -------------------------------- Forms ------------------------------- */
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: .84rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-soft); margin-bottom: .35rem; }
.field .hint { font-size: .84rem; color: var(--text-soft); text-transform: none; letter-spacing: 0; font-weight: 400; margin-top: .3rem; }
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=number],
input[type=password], input[type=search], input[type=file], select, textarea {
  width: 100%; padding: .68rem .8rem; font: inherit; font-size: .97rem; color: var(--text);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brass-lt); outline-offset: 1px; border-color: var(--brass); }
textarea { min-height: 150px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }
.hp { position: absolute !important; left: -9999px; }

.alert { padding: 1rem 1.15rem; border-radius: var(--radius); margin-bottom: 1.5rem; border: 1px solid; }
.alert--ok   { background: #E9F3EC; border-color: #BEDBC8; color: #23543A; }
.alert--err  { background: #FBECEC; border-color: #EEC9C9; color: #8C2226; }
.alert ul { margin: .4rem 0 0; padding-left: 1.15rem; }
.alert p:last-child { margin-bottom: 0; }

/* --------------------------- Licence checker -------------------------- */
.checker { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--shadow); }
.checker__result { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 1.5rem; }
.checker__headline { font-family: var(--serif); font-size: clamp(1.35rem,3vw,1.8rem); font-weight: 700; margin: 0 0 .35rem; }
.status-ok    { color: var(--green); }
.status-soon  { color: var(--amber); }
.status-late  { color: var(--red); }
.meter { height: 10px; background: var(--parchment-2); border-radius: 100px; overflow: hidden; margin: 1rem 0 .5rem; }
.meter__fill { height: 100%; border-radius: 100px; transition: width .4s ease; }
.meter__fill.status-ok   { background: var(--green); }
.meter__fill.status-soon { background: var(--amber); }
.meter__fill.status-late { background: var(--red); }
.timeline { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .1rem; }
.timeline li { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: .7rem .2rem; border-bottom: 1px solid var(--line); font-size: .95rem; }
.timeline li span:last-child { font-weight: 600; white-space: nowrap; }
.timeline li.is-now { background: #FFFBF0; }

/* --------------------------------- FAQ -------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 1.1rem .3rem; font-family: var(--serif); font-size: 1.1rem;
  font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.5rem; color: var(--brass); line-height: 1; font-family: var(--sans); }
.faq details[open] summary::after { content: '\2212'; }
.faq details > div { padding: 0 .3rem 1.2rem; color: var(--text-soft); }
.faq details > div p:last-child { margin-bottom: 0; }

/* ------------------------------- Footer ------------------------------- */
.site-footer { background: #14161A; color: #969CA8; font-size: .93rem; padding: 3rem 0 0; border-top: 3px solid var(--brass); }
.site-footer h4 { color: var(--cream); font-family: var(--sans); font-size: .78rem; letter-spacing: .17em; text-transform: uppercase; margin: 0 0 .9rem; }
.site-footer a { color: #C6C1B5; text-decoration: none; }
.site-footer a:hover { color: var(--brass-pale); text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2rem; padding-bottom: 2.5rem; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__logo img { width: 230px; margin-bottom: 1rem; }
.footer__legal { border-top: 1px solid rgba(255,255,255,.09); padding: 1.2rem 0; font-size: .84rem; color: #767C88; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer__legal a { color: #969CA8; }
/* The build credit sat in the same grey as the copyright beside it and read as
   plain text. Give it enough contrast to look clickable without shouting.
   Selector is deliberately three levels deep: `.site-footer a` and
   `.footer__legal a` both set colour and strip the underline, and a single
   class would lose to both. */
.site-footer .footer__legal .credit-link {
  color: var(--brass-lt);
  text-decoration: underline;
  text-decoration-color: rgba(195,154,78,.45);
  text-underline-offset: 3px;
}
.site-footer .footer__legal .credit-link:hover,
.site-footer .footer__legal .credit-link:focus-visible {
  color: var(--brass-pale);
  text-decoration-color: var(--brass-pale);
}

.notice-strip { background: var(--oxblood); color: #F6E9E1; font-size: .88rem; padding: .7rem 0; text-align: center; }
.notice-strip strong { color: #fff; }

/* ------------------------------ Utilities ----------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: 2rem; }
.stack > * + * { margin-top: 1.1rem; }
.muted { color: var(--text-soft); }
.small { font-size: .88rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.empty-state { text-align: center; padding: 3.5rem 1rem; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--text-soft); }

.breadcrumb { font-size: .84rem; color: var(--text-soft); padding: 1rem 0 0; }
.breadcrumb a { color: var(--text-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--oxblood); text-decoration: underline; }

.page-head { background: var(--ink); color: #CFCABE; padding: clamp(2rem,5vw,3.25rem) 0; border-bottom: 1px solid rgba(231,199,131,.2); }
.page-head h1 { color: var(--cream); margin-bottom: .35rem; }
.page-head p { color: #ABA598; margin: 0; max-width: 62ch; }

.prose h2 { margin-top: 2.2rem; }
.prose h3 { margin-top: 1.6rem; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1.2rem; }
.prose li { margin-bottom: .45rem; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: .65rem .6rem; border-bottom: 1px solid var(--line); }
.prose th { background: var(--parchment-2); font-size: .8rem; letter-spacing: .07em; text-transform: uppercase; }

/* =====================================================================
   Page backdrop — the tapestry behind a whole page, content on frosted cards.
   Switched on per page with $pageBackdrop = true (currently the contact page).

   The picture is a fixed layer, so it stays put while the content travels over
   it. Deliberately the 1600px file rather than the 2400: it is faded to 55% and
   largely covered, so the detail is wasted, and it is the same file most
   laptops already hold in cache from the home page banner.
   ===================================================================== */
body.has-backdrop { background: var(--parchment); }

body.has-backdrop::before,
body.has-backdrop::after {
  content: ''; position: fixed; inset: 0; pointer-events: none;
}
body.has-backdrop::before {
  z-index: -2;
  background-image: image-set(
    url('/assets/img/hero/tapestry-1600.webp') type('image/webp'),
    url('/assets/img/hero/tapestry-1600.jpg')  type('image/jpeg'));
  background-image: -webkit-image-set(
    url('/assets/img/hero/tapestry-1600.webp') type('image/webp'),
    url('/assets/img/hero/tapestry-1600.jpg')  type('image/jpeg'));
  background-position: center 38%;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: .55;
}
/* Older Safari ignores image-set() with type(); give it a plain JPEG first. */
@supports not (background-image: image-set(url('a.webp') type('image/webp'))) {
  body.has-backdrop::before { background-image: url('/assets/img/hero/tapestry-1600.jpg'); }
}
body.has-backdrop::after {
  z-index: -1;
  background: linear-gradient(180deg, rgba(246,242,233,.30), rgba(246,242,233,.45));
}

/* Let the backdrop through the page's own opaque layers. */
body.has-backdrop main,
body.has-backdrop .section { background: transparent; }
body.has-backdrop .page-head {
  background: linear-gradient(180deg, rgba(20,22,26,.88), rgba(20,22,26,.70));
}

/* Frosted cards. */
body.has-backdrop .panel {
  background: rgba(255,255,255,.82);
  border-color: rgba(222,214,196,.9);
}
body.has-backdrop .panel--warn     { background: rgba(253,247,243,.85); }
body.has-backdrop .panel--whatsapp { background: rgba(244,250,248,.85); }

/* The channels card is frosted like the panels. Its row dividers and the
   plain icon discs need a touch more opacity than they carry on parchment,
   or the tapestry reads straight through them. */
body.has-backdrop .channels {
  background: rgba(255,255,255,.82);
  border-color: rgba(222,214,196,.9);
}
body.has-backdrop .channel { border-bottom-color: rgba(222,214,196,.95); }
body.has-backdrop .channel__icon { background: rgba(237,231,218,.95); }
/* Must be restated here. `body.has-backdrop .channel__icon` scores higher than
   the bare `.channel__icon--whatsapp` modifier, so without this line the green
   disc silently reverts to parchment on the one page that has the backdrop —
   which is the only page the card appears on. */
body.has-backdrop .channel__icon--whatsapp { background: #107C6E; }

@supports (backdrop-filter: blur(7px)) or (-webkit-backdrop-filter: blur(7px)) {
  body.has-backdrop .panel,
  body.has-backdrop .channels,
  body.has-backdrop .backdrop-card {
    -webkit-backdrop-filter: blur(7px) saturate(1.05);
    backdrop-filter: blur(7px) saturate(1.05);
  }
}

/* The form column has no card of its own, so give it one — otherwise the
   labels sit straight on the weave and become hard work. */
body.has-backdrop .backdrop-card {
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(222,214,196,.9);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 3vw, 1.7rem);
}

/* Inputs stay solid. A picture behind a text field is where this stops being
   decoration and starts being an obstacle. */
body.has-backdrop input,
body.has-backdrop select,
body.has-backdrop textarea { background: #fff; }

/* Respect a reader who has asked their system for less transparency. */
@media (prefers-reduced-transparency: reduce) {
  body.has-backdrop::before { opacity: .12; }
  body.has-backdrop .panel,
  body.has-backdrop .backdrop-card { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.has-backdrop .page-head { background: var(--ink); }
}

@media print {
  body.has-backdrop::before, body.has-backdrop::after { display: none; }
  body.has-backdrop .panel, body.has-backdrop .backdrop-card { background: #fff; }
}

/* --------------------------- Small screens ---------------------------- */
@media (max-width: 560px) {
  body { font-size: 16px; }
  .topbar { font-size: .74rem; }
  .topbar .wrap { gap: .2rem 1rem; padding: .4rem 0; }
  .eyebrow { font-size: .68rem; letter-spacing: .13em; }
  .hero { padding: 2.75rem 0; }
  .hero__actions .btn { width: 100%; text-align: center; }

  /* A phone puts the headline right over the busiest part of the weave, so
     the scrim has to work considerably harder than it does on a wide screen. */
  /* No padding reset here — the padding-top is the header offset above, and
     re-declaring the shorthand would wipe it out. */
  .hero--image { min-height: 0; }
  .hero--image::after {
    background: linear-gradient(180deg,
      rgba(14,16,19,.95) 0%, rgba(14,16,19,.80) 30%,
      rgba(14,16,19,.74) 65%, rgba(20,22,26,.88) 100%);
  }
  .hero--image .hero__body { padding: 2.25rem 0 2.75rem; }
  .filters form { margin-left: 0; width: 100%; }
  .filters form input[type=search] { width: 100% !important; flex: 1; }
  .card__foot { flex-direction: column; align-items: flex-start; gap: .35rem; }
  .field-row { gap: 0; }
  .spec-table th { width: 45%; }
}

@media print {
  .site-header, .site-footer, .topbar, .nav, .notice-strip { display: none; }
  body { background: #fff; }
}