/*
  Dokpa Garment - independent design study
  Direction: alpine technical
  Adapted implementation techniques, not copied markup or styling, from:
  fashion-next (MIT, Copyright (c) 2020 Mohammad Oftadeh) and
  fashion-react (MIT, Copyright (c) 2024 Aleksandar Kuzmanovic)
  See TECHNIQUE.md and SOURCES.md for the full list of what was read and adapted.
*/

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-width: 320px;
  overflow-x: hidden;
}

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

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

input,
textarea {
  font: inherit;
  color: inherit;
}

h1, h2, h3, h4, p, dl, dd {
  margin: 0;
}

/* ---------- Tokens ---------- */
:root {
  --bg: #0a0d11;
  --panel: #11151b;
  --panel-2: #161c24;
  --tinted: #1a222c;
  --border: rgba(230, 238, 246, 0.12);
  --border-strong: rgba(230, 238, 246, 0.22);
  --text: #e8edf3;
  --muted: #93a3b5;
  --muted-2: #78899d;
  --accent: #2f9ce0;
  --accent-dim: #1f7bb3;
  --accent-tint: #bfe3f8;
  --focus: #6cc4f4;
  --max: 1240px;
  --gap: 1.5rem;
  --radius: 3px;
  --ff: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* ---------- Focus ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  background: var(--accent);
  color: #04121c;
  font-weight: 700;
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  z-index: 1000;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 1rem;
}

/* ---------- Utility labels ---------- */
.eyebrow,
.label-sm {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}

/* ---------- Design study banner ---------- */
.study-banner {
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--accent);
}

.study-banner p {
  padding: 0.6rem 1.25rem;
  font-size: 0.8125rem;
  color: var(--muted);
  max-width: var(--max);
  margin-inline: auto;
}

.study-banner strong {
  color: var(--text);
}

/* ---------- Utility bar ---------- */
.utility-bar {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-size: 0.75rem;
}

.utility-bar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.5rem;
  flex-wrap: wrap;
}

.utility-list {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.utility-list a {
  color: var(--muted);
  letter-spacing: 0.04em;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.utility-list a:hover,
.utility-list a:focus-visible {
  color: var(--accent-tint);
  border-color: var(--accent-dim);
}

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(10, 13, 17, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1rem;
  gap: 1rem;
}

.wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.wordmark .name {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.wordmark .tag {
  margin-top: 0.3rem;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.primary-nav {
  display: none;
}

.primary-nav ul {
  display: flex;
  gap: 1.75rem;
}

.primary-nav a {
  position: relative;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding-block: 0.35rem;
  color: var(--muted);
  transition: color 0.15s ease;
}

.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.primary-nav a:hover,
.primary-nav a:focus-visible,
.primary-nav a[aria-current="page"] {
  color: var(--text);
}

.primary-nav a:hover::after,
.primary-nav a:focus-visible::after,
.primary-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--border-strong);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

.nav-toggle .bars {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--text);
  position: relative;
}

.nav-toggle .bars::before,
.nav-toggle .bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px;
  height: 2px;
  background: var(--text);
}

.nav-toggle .bars::before {
  top: -5px;
}

.nav-toggle .bars::after {
  top: 5px;
}

.mobile-nav {
  border-top: 1px solid var(--border);
  background: var(--panel);
}

.mobile-nav[hidden] {
  display: none;
}

/* Fail safe navigation.
   Below 800px the desktop .primary-nav is display:none, .mobile-nav ships with
   the hidden attribute, and .nav-toggle only does anything once site.js runs.
   Without this rule a phone with JavaScript disabled gets no navigation at all.
   So when the document never picks up the .js class, show the real nav list and
   drop the toggle that cannot work. */
html:not(.js) .primary-nav {
  display: block;
}

html:not(.js) .primary-nav ul {
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
}

html:not(.js) .nav-toggle {
  display: none;
}

.mobile-nav ul {
  display: flex;
  flex-direction: column;
}

.mobile-nav a {
  display: block;
  padding: 0.9rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

.mobile-nav a[aria-current="page"] {
  color: var(--accent-tint);
}

@media (min-width: 800px) {
  .primary-nav {
    display: block;
  }
  .nav-toggle {
    display: none;
  }
  .mobile-nav {
    display: none !important;
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.4rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #04121c;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--accent-tint);
  border-color: var(--accent-tint);
}

.btn-ghost {
  color: var(--text);
  background: transparent;
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  border-color: var(--accent);
  color: var(--accent-tint);
}

/* ---------- Hero ---------- */
.hero {
  border-bottom: 1px solid var(--border);
}

.hero-grid {
  display: grid;
  gap: 2.5rem;
  padding-block: 2.5rem 3rem;
}

.hero-copy h1 {
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}

.hero-copy p {
  color: var(--muted);
  max-width: 46ch;
  margin-bottom: 1.5rem;
}

.hero-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.hero-media {
  background: var(--tinted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    padding-block: 4rem;
  }
  .hero-copy h1 {
    font-size: 3rem;
  }
}

/* ---------- Section shell ---------- */
.section {
  padding-block: 3rem;
  border-bottom: 1px solid var(--border);
}

.section:last-of-type {
  border-bottom: 0;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 2rem;
  max-width: 60ch;
}

.section-head h2 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.section-head p {
  color: var(--muted);
}

/* ---------- Taxonomy tiles (home) ---------- */
.taxo-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, 1fr);
}

.taxo-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.taxo-card:hover,
.taxo-card:focus-within {
  border-color: var(--accent-dim);
}

.taxo-thumb {
  aspect-ratio: 4 / 3;
  background: var(--tinted);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.taxo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.taxo-card-body {
  padding: 1rem 1.1rem 1.2rem;
}

.taxo-card-body .label-sm {
  display: block;
  margin-bottom: 0.35rem;
}

.taxo-card-body a {
  font-weight: 700;
  font-size: 1rem;
}

.taxo-card-body a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.taxo-card-body {
  position: relative;
}

/* Lift the count label above the stretched link overlay so it stays
   selectable instead of being swallowed by the full-card click target. */
.taxo-card-body .label-sm {
  position: relative;
  z-index: 1;
}

@media (min-width: 700px) {
  .taxo-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- Detail band (label callout) ---------- */
.detail-band {
  display: grid;
  gap: 2rem;
  align-items: center;
}

.detail-media {
  background: var(--tinted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  max-width: 360px;
}

.detail-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.detail-copy .eyebrow {
  margin-bottom: 0.75rem;
}

.detail-copy h2 {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 0.75rem;
}

.detail-copy p {
  color: var(--muted);
  max-width: 56ch;
  margin-bottom: 0.75rem;
}

@media (min-width: 780px) {
  .detail-band {
    grid-template-columns: 320px 1fr;
  }
}

/* ---------- Fact strip ---------- */
.fact-strip {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.fact {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  background: var(--panel);
}

.fact dt {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 0.4rem;
}

.fact dd {
  font-size: 0.95rem;
}

.fact a {
  color: var(--accent-tint);
  border-bottom: 1px solid var(--accent-dim);
}

/* ---------- Collection layout ---------- */
.collection-layout {
  display: grid;
  gap: 2rem;
  padding-block: 2rem 4rem;
}

.filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.taxonomy {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 1.25rem;
  align-self: start;
}

.taxonomy-col {
  order: -1;
}

.taxonomy[hidden] {
  display: none;
}

.taxonomy h2 {
  font-size: 0.875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}

.taxonomy-list {
  display: flex;
  flex-direction: column;
}

.taxonomy-list li {
  border-top: 1px solid var(--border);
}

.taxonomy-list li:first-child {
  border-top: 0;
}

.filter-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.1rem;
  color: var(--muted);
  font-size: 0.9rem;
  text-align: left;
}

.filter-btn .count {
  font-size: 0.75rem;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}

.filter-btn:hover {
  color: var(--text);
}

.filter-btn[aria-pressed="true"] {
  color: var(--accent-tint);
  font-weight: 700;
}

.filter-btn[aria-pressed="true"] .count {
  color: var(--accent-tint);
}

.results-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.75rem;
}

.results-bar h1 {
  font-size: 1.5rem;
  font-weight: 800;
}

#result-count {
  color: var(--muted);
  font-size: 0.875rem;
}

.product-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1040px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .collection-layout {
    grid-template-columns: 260px 1fr;
  }
  .filter-toggle {
    display: none;
  }
}

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
}

.card-media {
  background: var(--tinted);
  aspect-ratio: 4 / 5;
  display: flex;
  overflow: hidden;
}

.card-media.two-up {
  gap: 2px;
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  flex: 1 1 0;
}

.card-body {
  padding: 1rem 1.1rem 1.2rem;
}

.card-cat {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--accent-tint);
}

.card-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.spec-list {
  border-top: 1px solid var(--border);
}

.spec-list .row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.8125rem;
}

.spec-list dt {
  color: var(--muted-2);
  flex: 0 0 auto;
}

.spec-list dd {
  text-align: right;
  color: var(--muted);
}

.spec-list dd.pending {
  font-style: italic;
  color: var(--muted-2);
}

/* ---------- Capabilities ---------- */
.list-plain {
  display: grid;
  gap: 0.6rem;
}

.list-plain li {
  border-top: 1px solid var(--border);
  padding-top: 0.6rem;
  color: var(--muted);
}

.two-col {
  display: grid;
  gap: 2rem;
}

@media (min-width: 800px) {
  .two-col {
    grid-template-columns: 1fr 1fr;
  }
}

.note-box {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: var(--panel);
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.9rem;
}

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  gap: 2.5rem;
}

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

.contact-list {
  display: grid;
  gap: 1rem;
}

.contact-list .row {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.contact-list dt {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 0.35rem;
}

.contact-list dd a {
  color: var(--accent-tint);
  border-bottom: 1px solid var(--accent-dim);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
}

.form-field label {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.form-field input,
.form-field textarea {
  background: var(--panel);
  /* Solid border, not the translucent --border-strong: WCAG 1.4.11 needs 3:1
     for a control boundary. var(--muted) computes to about 7.1:1 against
     --panel and about 7.55:1 against --bg, both well over the minimum. */
  border: 1px solid var(--muted);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  color: var(--text);
}

.form-note {
  font-size: 0.8125rem;
  color: var(--muted-2);
  margin-bottom: 1.25rem;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--panel);
  padding-block: 2.5rem 1.5rem;
}

.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  margin-bottom: 2rem;
}

.footer-col h3 {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 0.9rem;
}

.footer-col a,
.footer-col p {
  display: block;
  color: var(--muted);
  margin-bottom: 0.55rem;
  font-size: 0.9rem;
}

.footer-col a:hover,
.footer-col a:focus-visible {
  color: var(--accent-tint);
}

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--muted-2);
}

@media (min-width: 700px) {
  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- Reveal motion, fail safe ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.js .reveal.in {
  opacity: 1;
  transform: none;
}

.js .reveal-group .reveal:nth-child(2) { transition-delay: 0.06s; }
.js .reveal-group .reveal:nth-child(3) { transition-delay: 0.12s; }
.js .reveal-group .reveal:nth-child(4) { transition-delay: 0.18s; }
.js .reveal-group .reveal:nth-child(5) { transition-delay: 0.24s; }
.js .reveal-group .reveal:nth-child(6) { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .card {
    transition: none;
  }
}

/* ---------- Evidence key and grade pills ---------- */
.evidence-key {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}

.evidence-key h3 {
  font-size: 0.875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}

.evidence-key dl {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.grade-def {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
}

.grade-def dd {
  color: var(--muted);
  font-size: 0.9rem;
}

.evidence-key > p {
  color: var(--muted);
  font-size: 0.875rem;
  max-width: 68ch;
}

.grade-pill {
  display: inline-block;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  white-space: nowrap;
  color: var(--muted);
}

.grade-observed {
  color: var(--accent-tint);
  border-color: var(--accent);
}

.grade-corroborated {
  color: var(--accent-tint);
  border-color: var(--accent-dim);
}

.grade-supplied {
  color: var(--muted);
  border-color: var(--border-strong);
}

.grade-notvisible,
.grade-notpublished {
  color: var(--muted-2);
  font-style: italic;
}

/* ---------- Construction index matrix table ---------- */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.matrix-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.matrix-table caption {
  text-align: left;
  caption-side: top;
  padding: 1rem 1.1rem 0.75rem;
  color: var(--muted);
  font-size: 0.8125rem;
  max-width: 72ch;
}

.matrix-table th,
.matrix-table td {
  text-align: left;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.matrix-table thead th {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}

.matrix-table tbody tr:last-child td {
  border-bottom: 0;
}

.matrix-table td:first-child {
  color: var(--muted-2);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- Location context block ---------- */
.location-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .location-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.location-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 1.25rem;
}

.location-card .grade-pill {
  margin-bottom: 0.75rem;
}

.location-card h3 {
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.location-card p {
  color: var(--muted);
  font-size: 0.9rem;
}

.location-card a {
  color: var(--accent-tint);
  border-bottom: 1px solid var(--accent-dim);
}

/* ---------- Form fieldset (contact inquiry checklist fields) ---------- */
.form-fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.25rem 1.1rem 0.25rem;
  margin: 0 0 1.1rem;
}

.form-fieldset legend {
  padding: 0 0.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.form-fieldset > .form-note {
  margin-top: 0.75rem;
}

/* ---------- Taxonomy card note ---------- */
.taxo-note {
  position: relative;
  z-index: 1;
  color: var(--muted);
  font-size: 0.8125rem;
  margin-top: 0.4rem;
}

/* ---------- Utility ---------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}