/* Green Lotus Spices — modern minimal rebuild */

:root {
  --ink: #1a1f1c;
  --ink-soft: #5c655d;
  --green-dark: #0d3d20;
  --green: #116433;
  --green-bright: #0b9444;
  --sage: #eef4ea;
  --sage-2: #dde9d6;
  --line: #e3e1d8;
  --paper: #fefdfb;
  --white: #ffffff;
  --accent: #a85f0f;        /* white text on this passes AA at button sizes */
  --accent-dark: #8a4c0a;
  --accent-label: #9c570c;  /* small uppercase labels on light backgrounds */
  --accent-light: #f0c489;  /* decorative, only ever on the dark green */
  --radius: 3px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--green-dark);
  margin: 0 0 0.5em;
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 600; line-height: 1.04; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.7rem, 3vw, 2.25rem); }
h3 { font-size: 1.15rem; font-weight: 600; }

p { margin: 0 0 1em; color: var(--ink-soft); }

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-bright); }

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

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Header / Nav */
header.site-header {
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--line);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  max-width: 1180px;
  margin: 0 auto;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo img { height: 52px; width: auto; }

nav.main-nav > ul {
  list-style: none;
  display: flex;
  gap: 36px;
  margin: 0;
  padding: 0;
  align-items: center;
}

nav.main-nav > ul > li {
  position: relative;
}

nav.main-nav a {
  color: var(--ink);
  font-weight: 500;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

nav.main-nav > ul > li > a:hover,
nav.main-nav > ul > li.active > a {
  color: var(--green);
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: -20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 0;
  min-width: 210px;
  list-style: none;
  margin: 18px 0 0;
}

nav.main-nav li:hover .dropdown-menu { display: block; }

.dropdown-menu li a {
  display: block;
  padding: 10px 22px;
  font-size: 0.8rem;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0.02em;
}

.dropdown-menu li a:hover { background: var(--sage); }

.mobile-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 5px;
}

.mobile-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
}

/* Buttons */
.btn {
  display: inline-block;
  background: var(--green);
  color: var(--white);
  font-weight: 600;
  padding: 15px 34px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: background 0.2s ease;
}

.btn:hover {
  background: var(--green-dark);
  color: var(--white);
}

.btn-outline {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.65);
  color: var(--white);
}

.btn-outline:hover {
  background: rgba(255,255,255,0.12);
  border-color: var(--white);
  color: var(--white);
}

/* Hero */
.hero {
  position: relative;
  background: linear-gradient(95deg, rgba(10,45,24,0.88) 0%, rgba(10,45,24,0.66) 45%, rgba(10,45,24,0.30) 100%),
              url('https://images.unsplash.com/photo-1635355995448-77b02d33621d?q=80&w=1800&auto=format&fit=crop') center/cover no-repeat;
  color: var(--white);
  padding: 150px 24px 140px;
  text-align: left;
}

.hero h1 { color: var(--white); }
.hero p {
  color: rgba(255,255,255,0.92);
  max-width: 620px;
  margin: 0 0 2.2em;
  font-size: 1.2rem;
  line-height: 1.55;
}

.hero .eyebrow { color: var(--accent-light); }

.btn-accent { background: var(--accent); }
.btn-accent:hover { background: var(--accent-dark); color: var(--white); }

.card-link { color: var(--green); }


@media (max-width: 640px) {
  .hero { padding: 100px 20px 90px; }
  .hero h1 br { display: none; }
}

/* Sections */
section { padding: 100px 0; }

.section-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-label);
  margin-bottom: 14px;
  display: block;
}

/* Product grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 44px;
}

.card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.25s ease;
}

.card:hover { transform: translateY(-3px); }

.card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.card-body { padding: 22px 4px 4px; }

.card-body h3 { margin-bottom: 6px; }

.card-body a.card-link {
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--green);
}

/* Feature strip */
.features {
  background: var(--sage);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
}

.feature h3 { font-size: 1.05rem; margin-bottom: 10px; }
.feature p { color: var(--ink-soft); font-size: 0.95rem; }

/* Story split */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.split img {
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

@media (max-width: 800px) {
  .split { grid-template-columns: 1fr; }
}

/* Newsletter */
.newsletter {
  background: var(--green-dark);
  color: var(--white);
  text-align: center;
}

.newsletter h2 { color: var(--white); }
.newsletter p { color: rgba(255,255,255,0.75); }

.newsletter-form {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.newsletter-form input[type="email"] {
  padding: 14px 20px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.06);
  color: var(--white);
  min-width: 300px;
  font-size: 0.95rem;
}
.newsletter-form input[type="email"]::placeholder { color: rgba(255,255,255,0.5); }

/* Product detail page */
.product-hero {
  background: var(--sage);
  padding: 72px 0 48px;
}

.product-hero .eyebrow { color: var(--accent-label); }

.thumb-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 30px 0 6px;
}

.thumb-row img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px;
}

.enquiry {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 44px;
  margin-top: 24px;
}

form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}

@media (max-width: 640px) {
  form .form-row { grid-template-columns: 1fr; }
}

form label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  color: var(--ink-soft);
}

form input, form select, form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--paper);
  color: var(--ink);
}

form input:focus, form select:focus, form textarea:focus {
  outline: none;
  border-color: var(--green-bright);
}

form textarea { min-height: 120px; resize: vertical; }

.full-row { margin-bottom: 18px; }

/* Contact page */
.contact-info {
  text-align: center;
  margin-bottom: 44px;
}

.contact-info a { font-weight: 600; }

/* Footer */
footer.site-footer {
  background: var(--green-dark);
  color: rgba(255,255,255,0.7);
  padding: 60px 24px 34px;
  text-align: center;
}

footer.site-footer .logo { justify-content: center; margin-bottom: 6px; }
footer.site-footer .logo img { height: 40px; filter: brightness(0) invert(1); }

footer.site-footer .contact-line {
  margin: 18px 0 28px;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.85);
}

footer.site-footer .contact-line a { color: var(--white); border-bottom: 1px solid rgba(255,255,255,0.3); }

footer.site-footer .fine-print {
  font-size: 0.78rem;
  opacity: 0.55;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 24px;
}

@media (max-width: 860px) {
  .mobile-toggle { display: flex; }
  nav.main-nav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    max-height: 0;
    overflow-y: auto;
    transition: max-height 0.3s ease;
  }
  nav.main-nav.open { max-height: calc(100vh - 82px); }
  nav.main-nav > ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0;
  }
  nav.main-nav > ul > li { width: 100%; }
  nav.main-nav > ul > li > a { display: block; padding: 14px 32px; }
  .dropdown-menu {
    display: block;
    position: static;
    border: none;
    padding: 0;
    margin: 0 0 4px;
    min-width: 0;
    background: var(--sage);
  }
  .dropdown-menu li a { padding: 12px 48px; }
}

/* ==========================================================================
   Upgrade additions
   ========================================================================== */

/* Placeholder marker — every one of these must be replaced before merging.
   Search the repo for class="todo" to find them all. */
.todo {
  background: #fff3cd;
  color: #7a5b00;
  border-bottom: 1px dashed #c9a227;
  padding: 0 3px;
  font-style: normal;
}

/* Utility bar above the header */
.utility-bar {
  background: var(--green-dark);
  color: rgba(255,255,255,0.82);
  font-size: 0.8rem;
}

.utility-bar .inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.utility-bar a { color: var(--white); }
.utility-bar a:hover { color: var(--accent-light); }
.utility-bar .sep { opacity: 0.35; margin: 0 10px; }

.util-short { display: none; }

@media (max-width: 640px) {
  /* One row only: the tagline gives way to the phone and email, which are
     the useful part on a phone. */
  .utility-bar { font-size: 0.72rem; }
  .utility-bar .inner { justify-content: center; padding: 7px 14px; flex-wrap: nowrap; }
  .utility-bar .util-left { display: none; }
  .utility-bar .util-right { white-space: nowrap; }
  .utility-bar .sep { margin: 0 7px; }
}

/* Header quote button */
.nav-cta {
  display: inline-block;
  background: var(--accent);
  color: var(--white);
  font-weight: 600;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 11px 20px;
  border-radius: var(--radius);
  white-space: nowrap;
}

.nav-cta:hover { background: var(--accent-dark); color: var(--white); }

.nav-right { display: flex; align-items: center; gap: 18px; }

@media (max-width: 860px) {
  .nav-cta { font-size: 0.7rem; padding: 10px 14px; }
}

/* Credentials strip under the hero */
.credentials {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding: 0;
}

.credentials .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0;
}

.cred {
  padding: 30px 24px;
  text-align: center;
  border-right: 1px solid var(--line);
}

.cred:last-child { border-right: none; }

.cred .num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.7rem;
  color: var(--green-dark);
  line-height: 1.2;
  display: block;
  margin-bottom: 4px;
}

.cred .lbl {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  font-weight: 600;
}

@media (max-width: 760px) {
  .cred { border-right: none; border-bottom: 1px solid var(--line); padding: 22px; }
  .cred:last-child { border-bottom: none; }
}

/* Specification tables */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

table.spec {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
  font-size: 0.9rem;
  background: var(--white);
}

table.spec caption {
  caption-side: top;
  text-align: left;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--green);
  padding: 14px 16px 10px;
}

table.spec th,
table.spec td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  line-height: 1.5;
}

table.spec thead th {
  background: var(--sage);
  color: var(--green-dark);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  white-space: nowrap;
}

table.spec tbody tr:nth-child(even) td { background: #fbfcfa; }
table.spec tbody tr:last-child td { border-bottom: none; }
table.spec td:first-child { font-weight: 600; color: var(--green-dark); }

.table-note {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 0 0 32px;
}

/* Detail blocks — packaging, documents, lead time */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
  margin-top: 8px;
}

.detail-block {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 28px;
}

.detail-block h3 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color: var(--green);
  margin-bottom: 12px;
}

.detail-block ul {
  margin: 0;
  padding-left: 18px;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.detail-block ul li { margin-bottom: 7px; }
.detail-block p { font-size: 0.92rem; margin-bottom: 0; }

/* Section header alignment helper */
.section-head { margin-bottom: 34px; }
.section-head h2 { margin-bottom: 10px; }
.section-head p { max-width: 680px; }

/* Breadcrumbs */
.breadcrumb {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-bottom: 18px;
  letter-spacing: 0.02em;
}

.breadcrumb a { color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--green-bright); }
.breadcrumb span { opacity: 0.5; margin: 0 7px; }

/* Related products */
.related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 22px;
}

.related a {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  background: var(--white);
  transition: border-color 0.2s ease;
}

.related a:hover { border-color: var(--green-bright); }

.related strong {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.05rem;
  color: var(--green-dark);
  margin-bottom: 4px;
}

.related span { font-size: 0.84rem; color: var(--ink-soft); }

/* Call-to-action band */
.cta-band {
  background: var(--green-dark);
  color: var(--white);
  text-align: center;
  padding: 76px 0;
}

.cta-band h2 { color: var(--white); }
.cta-band p { color: rgba(255,255,255,0.78); max-width: 620px; margin: 0 auto 28px; }
.cta-band .btn { background: var(--accent); }
.cta-band .btn:hover { background: var(--white); color: var(--green-dark); }
.newsletter-form .btn { background: var(--accent); }
.newsletter-form .btn:hover { background: var(--accent-dark); }

/* Certification cards */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
}

.cert-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  background: var(--white);
}

.cert-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.cert-card p { font-size: 0.9rem; margin-bottom: 8px; }

.cert-card .meta {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green);
  font-weight: 600;
}

/* Key-value facts table (About page) */
table.facts {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95rem;
}

table.facts th,
table.facts td {
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

table.facts th {
  width: 42%;
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-right: 20px;
}

table.facts td { color: var(--green-dark); font-weight: 600; }

/* Contact detail list */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 34px;
  margin-bottom: 48px;
}

.contact-block h2 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color: var(--green);
  margin-bottom: 10px;
}

.contact-block p { font-size: 0.95rem; margin-bottom: 4px; }

/* Form helpers */
.form-note {
  font-size: 0.84rem;
  color: var(--ink-soft);
  margin: 14px 0 0;
}

.form-status {
  display: none;
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: 0.92rem;
}

.form-status.ok { display: block; background: var(--sage); color: var(--green-dark); }
.form-status.err { display: block; background: #fdecea; color: #8c2f24; }

.enquiry h3 {
  margin-bottom: 6px;
  font-size: 1.3rem;
}

.enquiry .lead-in {
  font-size: 0.9rem;
  margin-bottom: 26px;
}

/* Footer, multi-column */
footer.site-footer { text-align: left; padding: 68px 24px 30px; }

.footer-grid {
  max-width: 1180px;
  margin: 0 auto 44px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 44px;
}

.footer-grid .footer-head {
  color: var(--white);
  font-family: 'Inter', sans-serif;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 16px;
  font-weight: 700;
}

.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 9px; font-size: 0.88rem; }
.footer-grid a { color: rgba(255,255,255,0.72); }
.footer-grid a:hover { color: var(--white); }
.footer-grid p { color: rgba(255,255,255,0.72); font-size: 0.88rem; margin-bottom: 8px; }

footer.site-footer .logo { justify-content: flex-start; margin-bottom: 16px; }

footer.site-footer .fine-print {
  max-width: 1180px;
  margin: 0 auto;
  text-align: left;
}

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* Tighter section rhythm on small screens */
@media (max-width: 640px) {
  section { padding: 64px 0; }
  .container { padding: 0 20px; }
  .hero { padding: 110px 20px; }
  .enquiry { padding: 28px 22px; }
}

/* Newsletter form sizing */
.newsletter-form {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.newsletter-form input[type="email"] {
  flex: 1 1 260px;
  min-width: 0;
}

.newsletter-form .form-status { flex: 1 1 100%; text-align: left; }

/* Dropdown hover bridge — the 18px gap between the nav item and the menu
   used to drop hover before the cursor reached the menu, so the menu
   vanished on the way down. This invisible strip spans the gap. */
.dropdown-menu::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  height: 20px;
}

nav.main-nav > ul > li:hover > a { color: var(--green); }

@media (max-width: 860px) {
  .dropdown-menu::before { display: none; }
}

/* Keep the dropdown open briefly after the cursor leaves, so a slow or
   diagonal move from the nav item to a product does not close it. The
   .nav-open class is applied by assets/site.js. */
nav.main-nav > ul > li.nav-open > .dropdown-menu { display: block; }
nav.main-nav > ul > li.nav-open > a { color: var(--green); }

/* Product forms — description left, photograph right */
.form-row-block {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 52px;
  align-items: center;
  padding: 40px 0;
  border-top: 1px solid var(--line);
}

.form-row-block:first-of-type { border-top: none; padding-top: 8px; }

.form-row-block h3 {
  font-size: 1.35rem;
  margin-bottom: 12px;
}

.form-row-block p { margin-bottom: 12px; }

.form-row-block .best-for {
  font-size: 0.86rem;
  color: var(--green);
  font-weight: 600;
  margin-bottom: 0;
}

.form-row-block figure {
  margin: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}

.form-row-block figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

.form-row-block figcaption {
  margin-top: 12px;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  text-align: center;
  font-weight: 600;
}

@media (max-width: 820px) {
  .form-row-block {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .form-row-block figure { max-width: 320px; }
}

.form-row-block.no-photo { grid-template-columns: 1fr; }
.form-row-block.no-photo > div { max-width: 780px; }

/* Keyboard access — a visible focus ring and a skip link, neither of which
   the site had. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--accent);
  color: var(--white);
  padding: 12px 20px;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus {
  left: 0;
  color: var(--white);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.skip-link:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.hero a:focus-visible,
.cta-band a:focus-visible,
.newsletter a:focus-visible,
footer a:focus-visible {
  outline-color: #f0c489;
}

/* Tap targets — WCAG 2.5.8 wants 24px minimum, and several link rows were
   15 to 17px tall. Padding only; nothing moves visually. */
.utility-bar a,
.breadcrumb a,
.card-link,
.footer-grid a,
.contact-block a,
.related a strong {
  display: inline-block;
  padding-top: 4px;
  padding-bottom: 4px;
}

nav.main-nav > ul > li > a {
  display: inline-block;
  padding: 5px 0;
}

@media (max-width: 860px) {
  nav.main-nav > ul > li > a { padding: 14px 32px; }
}