/* =============================================
   ROMAN SOLUTIONS — Global Styles
   Palette: Cranberry | Gold | Royal Blue
   ============================================= */

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

:root {
  --cranberry:      #7D1A2E;
  --cranberry-dark: #5E1221;
  --cranberry-mid:  #8F2035;
  --gold:           #C4922A;
  --gold-light:     #D9A83C;
  /* Small-text gold. Darkened from #B8862A (3.24:1) to clear 4.5:1 on both
     white (4.81:1) and --off-white (4.52:1) at the 11.5px eyebrow size. */
  --gold-muted:     #936B22;
  /* --gold-light only reaches 3.87:1 on --royal-blue-dark; this clears 4.5:1. */
  --gold-on-blue:   #E8C77A;
  --royal-blue:     #3A6092;
  --royal-blue-dark:#2E4E7A;
  --white:          #FFFFFF;
  --off-white:      #FAF8F5;
  --warm-gray:      #F0EBE4;
  --charcoal:       #1C1C1C;
  --text-secondary: #4A4746;
  --border:         #DDD5CC;
  /* Form field outlines are the only thing delimiting an input, so they need
     3:1 as a non-text UI boundary. --border manages 1.45:1 and stays for rules. */
  --border-input:   #8C8680;
  --font-heading:   'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:      'Inter', system-ui, -apple-system, sans-serif;
  --max-width:      1100px;
}

/* ---- Base ---- */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--white);
  line-height: 1.7;
  font-size: 16px;
}

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

a { color: inherit; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Typography ---- */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.3;
}

/* =============================================
   NAVIGATION
   ============================================= */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 200;
  /* Royal blue accent bar at top */
  border-top: 4px solid var(--royal-blue);
}

.nav {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.nav-logo {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cranberry);
  text-decoration: none;
  letter-spacing: 0.01em;
  line-height: 1;
}

.nav-logo span {
  display: block;
  font-size: 0.6rem;
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: 2px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}

.nav-links a {
  text-decoration: none;
  color: var(--charcoal);
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.2s;
}

.nav-links a:hover,
.nav-links a.active { color: var(--cranberry); }

.nav-links a.nav-cta {
  background: var(--cranberry);
  color: var(--white) !important;
  padding: 9px 20px;
  border-radius: 3px;
  transition: background 0.2s;
}

.nav-links a.nav-cta:hover { background: var(--cranberry-dark); }

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

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--charcoal);
  border-radius: 2px;
  transition: all 0.3s;
}

/* =============================================
   HERO — Homepage
   ============================================= */
.hero {
  background: var(--cranberry-dark);
  color: var(--white);
  padding: 100px 24px 96px;
  text-align: center;
}

.hero-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  color: var(--gold-light);
  max-width: 820px;
  margin: 0 auto 22px;
}

.hero p {
  font-size: 1.05rem;
  max-width: 580px;
  margin: 0 auto 40px;
  opacity: 0.88;
  line-height: 1.8;
}

/* =============================================
   PAGE HERO — Inner Pages
   ============================================= */
.page-hero {
  background: var(--cranberry-dark);
  color: var(--white);
  padding: 64px 24px;
  text-align: center;
}

.page-hero .eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

.page-hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--gold-light);
  margin-bottom: 12px;
}

.page-hero p {
  opacity: 0.85;
  max-width: 560px;
  margin: 0 auto;
  font-size: 1rem;
}

/* =============================================
   BUTTONS
   ============================================= */
.btn-group {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  padding: 13px 28px;
  border-radius: 3px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
  border: none;
  font-family: var(--font-body);
  letter-spacing: 0.01em;
}

.btn-gold {
  background: var(--gold);
  color: var(--charcoal);
}
.btn-gold:hover { background: var(--gold-light); }

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

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

/* =============================================
   SECTION BASE
   ============================================= */
section { padding: 80px 24px; }

.section-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-muted);
  margin-bottom: 12px;
}

.section-title {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--cranberry-dark);
  margin-bottom: 14px;
}

.section-subtitle {
  font-size: 0.975rem;
  color: var(--text-secondary);
  max-width: 580px;
  line-height: 1.75;
  margin-bottom: 48px;
}

.section-alt { background: var(--off-white); }
.section-warm { background: var(--warm-gray); }

/* =============================================
   VALUE PROP CARDS
   ============================================= */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  padding: 28px;
  border-radius: 3px;
}

.card-icon {
  font-size: 1.4rem;
  margin-bottom: 14px;
  color: var(--cranberry);
}

.card h3 {
  font-size: 1rem;
  color: var(--cranberry-dark);
  margin-bottom: 8px;
}

.card p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* =============================================
   WHO WE WORK WITH
   ============================================= */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.category-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.category-tag {
  padding: 7px 15px;
  border: 1px solid var(--border);
  border-radius: 2px;
  font-size: 0.83rem;
  color: var(--text-secondary);
  background: var(--white);
}

/* =============================================
   REQUIREMENTS / CHECKLIST
   ============================================= */
.req-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.req-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.req-list li .check {
  color: var(--royal-blue);
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 1px;
}

/* =============================================
   PROCESS STEPS
   ============================================= */
.steps {
  display: flex;
  flex-direction: column;
}

.step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  padding: 36px 0;
  border-bottom: 1px solid var(--border);
}

.step:last-child { border-bottom: none; }

.step-num {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  /* Gold reached only 2.64:1 on --off-white; these are sequence indicators
     carrying meaning, not ornament, so they need 3:1. Cranberry gives 9.62:1. */
  color: var(--cranberry);
  line-height: 1;
  padding-top: 4px;
}

.step-body h3 {
  font-size: 1.05rem;
  color: var(--cranberry-dark);
  margin-bottom: 8px;
}

.step-body p {
  font-size: 0.925rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.step-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.tag {
  display: inline-block;
  background: var(--warm-gray);
  color: var(--text-secondary);
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: 99px;
  border: 1px solid var(--border);
}

/* =============================================
   COMMITMENT / BRAND PROTECTION
   ============================================= */
.commit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.commit-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--royal-blue);
  border-radius: 3px;
}

.commit-item .check {
  color: var(--royal-blue);
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.commit-item div h3,
.commit-item div h4 {
  font-size: 0.9rem;
  color: var(--charcoal);
  margin-bottom: 4px;
}

.commit-item div p {
  font-size: 0.83rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* =============================================
   FAQ
   ============================================= */
.faq-list { max-width: 780px; }

.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 24px 0;
}

.faq-item:first-child { padding-top: 0; }

.faq-item h3 {
  font-size: 0.975rem;
  color: var(--cranberry-dark);
  margin-bottom: 10px;
  font-family: var(--font-heading);
}

.faq-item p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.75;
}

/* =============================================
   CTA BANNER
   ============================================= */
.cta-banner {
  background: var(--cranberry-dark);
  color: var(--white);
  text-align: center;
  padding: 80px 24px;
}

.cta-banner h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--gold-light);
  margin-bottom: 14px;
}

.cta-banner p {
  margin-bottom: 32px;
  opacity: 0.88;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.975rem;
}

/* =============================================
   ABOUT PAGE
   ============================================= */
.about-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 64px;
  align-items: start;
}

.about-details {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 28px;
}

.about-details h3 {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.about-details dl { display: flex; flex-direction: column; gap: 14px; }

.about-details dt {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 2px;
}

.about-details dd {
  font-size: 0.9rem;
  color: var(--charcoal);
  font-weight: 500;
}

.about-details dd a {
  color: var(--royal-blue);
  text-decoration: none;
}

.mission-block {
  border-left: 3px solid var(--gold);
  padding-left: 20px;
  margin-top: 32px;
}

.mission-block p {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.8;
  font-style: italic;
}

/* =============================================
   PARTNER / CONTACT FORM
   ============================================= */
.partner-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.sidebar-block {
  margin-bottom: 32px;
}

.sidebar-block h2,
.sidebar-block h3 {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cranberry-dark);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--gold);
  margin-bottom: 14px;
}

.sidebar-block ul {
  list-style: none;
}

.sidebar-block li {
  font-size: 0.875rem;
  color: var(--text-secondary);
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-block li::before {
  content: "–";
  color: var(--gold);
  flex-shrink: 0;
}

.form-group {
  margin-bottom: 18px;
}

.form-group label {
  display: block;
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border-input);
  border-radius: 3px;
  font-size: 0.9rem;
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  /* The old rule killed the outline and replaced it with a 10%-alpha ring that
     composited to 1.17:1 — effectively invisible. Use a real outline instead. */
  outline: 2px solid var(--royal-blue);
  outline-offset: 2px;
  border-color: var(--royal-blue);
}

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

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

.form-note {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

.required-mark { color: var(--cranberry); }

.honeypot {
  position: absolute;
  left: -9999px;
  visibility: hidden;
}

.form-submit-btn {
  width: 100%;
  padding: 14px;
  background: var(--cranberry);
  color: var(--white);
  border: none;
  border-radius: 3px;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 8px;
}

.form-submit-btn:hover { background: var(--cranberry-dark); }

.form-success {
  display: none;
  background: #EBF5EB;
  border: 1px solid #4CAF50;
  border-radius: 3px;
  padding: 20px;
  text-align: center;
  color: #2E7D32;
  font-size: 0.95rem;
}

/* =============================================
   FOOTER
   ============================================= */
.site-footer {
  background: var(--charcoal);
  color: rgba(255,255,255,0.65);
  padding: 52px 24px 32px;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 40px;
}

.footer-logo {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--gold-light);
  text-decoration: none;
  display: block;
  margin-bottom: 12px;
}

.footer-brand p {
  font-size: 0.85rem;
  line-height: 1.75;
  max-width: 300px;
}

.footer-brand a {
  color: var(--gold-light);
  text-decoration: none;
}

.footer-brand a:hover { text-decoration: underline; }

.footer-col h3,
.footer-col h4 {
  color: var(--white);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-family: var(--font-body);
  font-weight: 600;
}

.footer-col ul { list-style: none; }

.footer-col li { margin-bottom: 10px; }

.footer-col a {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s;
}

.footer-col a:hover { color: var(--gold-light); }

.footer-bottom {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.78rem;
}

/* =============================================
   DIVIDER / ACCENT ELEMENTS
   ============================================= */
.gold-rule {
  width: 48px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 20px;
}

.blue-badge {
  display: inline-block;
  background: var(--royal-blue);
  color: var(--white);
  font-size: 0.72rem;
  padding: 3px 10px;
  border-radius: 99px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

/* =============================================
   HERO CAROUSEL
   ============================================= */
.hero {
  position: relative;
  overflow: hidden;
  padding: 0;
  min-height: 540px;
  display: flex;
  flex-direction: column;
}

.carousel {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.carousel-slides {
  width: 100%;
  height: 100%;
  position: relative;
}

.carousel-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease;
}

.carousel-slide.active { opacity: 1; }

/* Dark cranberry + muted blue gradient overlay over images */
.carousel-overlay {
  position: absolute;
  inset: 0;
  /* Alpha raised from .80/.60. The photos behind this are warehouse shots with
     bright ceiling lights and white cartons; at the old opacity the hero body
     text dropped to 2.74:1 over those regions. These values hold the text above
     4.5:1 regardless of what the slide underneath is doing. */
  background: linear-gradient(
    135deg,
    rgba(94, 18, 33, 0.90) 0%,
    rgba(46, 78, 122, 0.86) 100%
  );
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 100px 24px 96px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.carousel-prev,
.carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: rgba(27, 79, 191, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--white);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  backdrop-filter: blur(4px);
}

.carousel-prev { left: 18px; }
.carousel-next { right: 18px; }

.carousel-prev:hover,
.carousel-next:hover {
  background: rgba(27, 79, 191, 0.65);
}

.carousel-dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 0;
  align-items: center;
}

/* 44x44 hit area with an 8px visual dot drawn inside, so the touch target
   clears the minimum without changing how the control looks. The dots are the
   only carousel control on narrow screens, so they have to be reachable. */
.carousel-dot {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.carousel-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transition: background 0.2s, transform 0.2s;
}

.carousel-dot.active::before {
  background: var(--gold);
  transform: scale(1.3);
}


/* =============================================
   TRUST BAR (Royal Blue strip below carousel)
   ============================================= */
.trust-bar {
  background: #2E4E7A;
  color: var(--white);
  padding: 14px 24px;
}

.trust-bar-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.trust-item .ti-icon {
  font-size: 1rem;
  opacity: 0.85;
}

.trust-divider {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.3);
}

/* =============================================
   BLUE SECTION — used on FAQ
   ============================================= */
.section-blue {
  background: #2E4E7A;
  color: var(--white);
}

.section-blue .section-eyebrow { color: var(--gold-on-blue); }
.section-blue .section-title { color: var(--white); }
.section-blue .gold-rule { background: var(--gold-light); }

.section-blue .faq-item {
  border-bottom-color: rgba(255,255,255,0.15);
}

.section-blue .faq-item h3 { color: var(--gold-on-blue); }
.section-blue .faq-item p { color: rgba(255,255,255,0.85); }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; gap: 40px; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .partner-layout { grid-template-columns: 1fr; gap: 40px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .nav-toggle { display: flex; }

  .nav-links {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--white);
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    gap: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }

  .nav-links.open { display: flex; }

  .nav-links a.nav-cta { padding: 9px 18px; }

  section { padding: 60px 24px; }
  .hero { padding: 0; min-height: 420px; }
  .hero-content { padding: 72px 24px 68px; }
  .page-hero { padding: 52px 24px; }
  /* Kept visible: on narrow screens these are the primary carousel control. */
  .carousel-prev, .carousel-next { width: 38px; height: 38px; font-size: 1.2rem; }
  .trust-bar-inner { gap: 20px; }
  .trust-divider { display: none; }

  .step { grid-template-columns: 44px 1fr; gap: 16px; }
  .step-num { font-size: 2rem; }

  .form-row { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }

  .cards-grid { grid-template-columns: 1fr; }
  .commit-grid { grid-template-columns: 1fr; }
  .req-list { grid-template-columns: 1fr; }
}

/* =============================================
   ACCESSIBILITY
   ============================================= */

/* The .nav-cta rule sets colour with !important, so the current-page state
   needs its own hook to show through on the Partner page. */
.nav-links a.nav-cta.active,
.nav-links a.nav-cta[aria-current="page"] {
  background: var(--cranberry-dark);
  box-shadow: inset 0 -3px 0 var(--gold);
}

/* One visible focus ring for every interactive element. Previously only the
   browser default applied, and the form fields suppressed even that. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--royal-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Focus ring over the dark hero needs to be light to stay visible. */
.hero a:focus-visible,
.hero button:focus-visible,
.page-hero a:focus-visible {
  outline-color: var(--white);
}

/* The success banner receives focus after submit; it is a programmatic target,
   not a tab stop, so it should not show a ring of its own. */
.form-success:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Visible only once focused — first tab stop on every page. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--cranberry);
  color: var(--white);
  padding: 12px 20px;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0 0 3px 0;
}

.skip-link:focus {
  left: 0;
  top: 0;
}