/* =============================================================================
   DataConfo Academy — LAYOUT & PAGES
   Header, footer, hero, catalogue grid, product page, cart, checkout,
   overlays and the brand-system page.
   ============================================================================ */

/* ================================================================== HEADER */
.site-header {
  position: sticky;
  top: 0;
  z-index: 120;
  background: rgba(251, 252, 253, 0.92);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  box-shadow: var(--sh-header);
}
/* The header gets a wider well than the page content: at the larger type scale
   the six nav items, the tools and the CTA need the extra room. */
.site-header > .wrap { max-width: 1560px; }
.header-bar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: var(--header-h);
}
.site-header .logo__name { font-size: 1.45rem; }
.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: var(--s-3);
}
.nav a {
  padding: 9px 11px;
  border-radius: var(--r-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
  color: var(--ink-700);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav a:hover { color: var(--navy-800); background: var(--surface-3); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--navy-800); }
.nav a[aria-current="page"]::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 5px;
  border-radius: 2px;
  background: var(--teal-500);
}

.header-tools { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  background: transparent;
  color: var(--ink-700);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  position: relative;
}
.icon-btn:hover { background: var(--surface-3); color: var(--navy-800); }

.cart-count {
  position: absolute;
  top: 3px; right: 3px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--teal-500);
  color: var(--navy-950);
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.cart-count[hidden] { display: none !important; }

.langswitch {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--white);
}
.langswitch a,
.langswitch button {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border: 0;
  background: transparent;
  padding: 8px 11px;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--ink-500);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.langswitch a + a,
.langswitch button + button { border-left: 1px solid var(--line); }
.langswitch a:hover { color: var(--navy-800); text-decoration: none; }
.langswitch a[aria-current="true"],
.langswitch button[aria-pressed="true"] { background: var(--navy-800); color: var(--white); }

.burger { display: none; }

.header-tools > .btn { white-space: nowrap; }

/* Two-stage collapse: the CTA goes first, the nav second. */
@media (max-width: 1400px) { .header-tools > .btn { display: none; } }
@media (max-width: 1150px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
}
/* On a phone the language switch lives in the drawer and the footer, so the
   header keeps only logo · search · cart · menu. */
@media (max-width: 560px) {
  .header-tools > .langswitch { display: none; }
  .header-bar { gap: var(--s-2); }
  .logo__name { font-size: 1.1rem; }
  .logo__sub { letter-spacing: 0.18em; }
}

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--paper);
  animation: fade-in 180ms var(--ease);
}
.drawer[hidden] { display: none !important; }
.drawer__head {
  display: flex;
  align-items: center;
  min-height: var(--header-h);
  border-bottom: 1px solid var(--line);
  padding-inline: var(--gutter);
}
.drawer__body {
  overflow-y: auto;
  padding: var(--s-6) var(--gutter) var(--s-16);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.drawer__body a.drawer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--navy-800);
}
.drawer__body a.drawer-link:hover { text-decoration: none; color: var(--teal-700); }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Search overlay */
.searchbar {
  border-bottom: 1px solid var(--line);
  background: var(--white);
  padding-block: var(--s-4);
}
.searchbar[hidden] { display: none !important; }
.searchbar__inner { display: flex; align-items: center; gap: var(--s-3); }
.searchbar input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 0.9rem + 1vw, 1.6rem);
  color: var(--navy-800);
  padding: var(--s-2) 0;
}
.searchbar input:focus { outline: none; }
.searchbar input::placeholder { color: var(--ink-400); }
.search-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding-top: var(--s-3);
}

/* ==================================================================== HERO */
.hero {
  position: relative;
  background: var(--navy-800);
  color: var(--on-navy);
  overflow: hidden;
  isolation: isolate;
}
/* A faint engraved rule pattern — the security-print texture of a certificate,
   pitched low enough that it reads as paper, not decoration. */
.hero__engraving {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(115deg, rgba(95, 214, 206, 0.07) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(65deg,  rgba(95, 214, 206, 0.05) 0 1px, transparent 1px 13px),
    radial-gradient(90% 120% at 82% 8%, rgba(20, 169, 162, 0.20), transparent 62%);
  mask-image: radial-gradient(120% 100% at 70% 0%, #000 20%, transparent 82%);
  -webkit-mask-image: radial-gradient(120% 100% at 70% 0%, #000 20%, transparent 82%);
}
.hero__inner { padding-block: clamp(56px, 7vw, 112px); }
.hero__inner .lede { max-width: 54ch; }
.hero__title {
  color: var(--white);
  max-width: min(100%, 780px);   /* the headline sets over about three lines */
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }
.hero__note {
  font-size: var(--fs-xs);
  color: var(--on-navy-faint);
  letter-spacing: 0.02em;
  margin-top: var(--s-2);
}

/* ========================================================== DOMAIN BAR ====
   The eleven domains as one horizontal strip at the head of the catalogue.
   It replaces the card grid: same information, a fraction of the height, and
   it filters the results below instead of navigating away. */
.catbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding-bottom: var(--s-5);
  margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--line);
}
.catbar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 9px 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink-700);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.catbar__item svg { color: var(--teal-600); flex: none; }
.catbar__item:hover { border-color: var(--navy-600); color: var(--navy-800); }
.catbar__item[aria-pressed="true"] {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: var(--white);
}
.catbar__item[aria-pressed="true"] svg { color: var(--teal-300); }
.catbar__n {
  font-weight: 400;
  opacity: 0.62;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
}
.catbar__item--empty {
  border-style: dashed;
  color: var(--ink-400);
  background: transparent;
}
.catbar__item--empty svg { color: var(--ink-400); }
@media (max-width: 700px) {
  .catbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
}

/* ============================================================== TRUST GRID */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s-6);
}
.trust-item { display: flex; flex-direction: column; gap: var(--s-3); }
.trust-item h3 { font-size: var(--fs-h4); font-family: var(--font-ui); font-weight: 700; }
.trust-item p { font-size: var(--fs-sm); color: var(--ink-600); }

/* ========================================================== CATEGORY CARDS */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: var(--s-4);
}
.cat-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.cat-card:hover {
  text-decoration: none;
  border-color: var(--line-strong);
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
}
.cat-card:hover .icon-tile { background: var(--navy-800); color: var(--teal-300); }
.cat-card__name {
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.25;
  color: var(--navy-800);
  letter-spacing: -0.01em;
}
.cat-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--ink-500);
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-soft);
}
.cat-card__meta .arrow { color: var(--teal-600); transition: transform var(--dur) var(--ease); }
.cat-card:hover .arrow { transform: translateX(3px); }
.cat-card--empty { background: var(--surface-2); border-style: dashed; }
.cat-card--empty .cat-card__name { color: var(--ink-600); }
.cat-card--empty .icon-tile { background: var(--surface-3); color: var(--ink-500); }

/* ========================================================= CATALOGUE BLOCK */
.catalogue { display: grid; grid-template-columns: 262px minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); }
@media (max-width: 1000px) { .catalogue { grid-template-columns: 1fr; } }

.filters {
  align-self: start;
  position: sticky;
  top: calc(var(--header-h) + 16px);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  max-height: calc(100vh - var(--header-h) - 40px);
  overflow-y: auto;
  padding-right: var(--s-2);
  scrollbar-width: thin;
}
@media (max-width: 1000px) {
  .filters { display: none; position: static; max-height: none; }
  .filters.is-open { display: flex; }
}
.filter-group { display: flex; flex-direction: column; gap: var(--s-3); }
.filter-group__title {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-500);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}
.filter-opts { display: flex; flex-direction: column; gap: 2px; }
.filter-opt {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 7px 8px;
  margin-inline: -8px;
  border: 0;
  border-radius: var(--r-1);
  background: transparent;
  text-align: left;
  font-size: var(--fs-sm);
  color: var(--ink-700);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.filter-opt:hover { background: var(--surface-3); color: var(--navy-800); }
.filter-opt__box {
  flex: none;
  width: 17px; height: 17px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--white);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.filter-opt[aria-pressed="true"] { color: var(--navy-800); font-weight: 700; }
.filter-opt[aria-pressed="true"] .filter-opt__box {
  background: var(--navy-800) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
  border-color: var(--navy-800);
}
.filter-opt__n {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}
.filter-opt[disabled] { opacity: 0.38; pointer-events: none; }

.catalogue__toolbar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.catalogue__count {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--navy-800);
  font-variant-numeric: tabular-nums;
}
.filters-open-btn { display: none; }
@media (max-width: 1000px) { .filters-open-btn { display: inline-flex; } }
.select--sort { width: auto; min-width: 170px; }

/* Phone: search on its own row, then Filters + sort side by side, count last. */
@media (max-width: 640px) {
  .catalogue__toolbar { gap: var(--s-3); }
  .catalogue__toolbar .spacer { display: none; }
  .searchfield { flex: 1 0 100%; }
  .filters-open-btn { flex: 0 0 auto; }
  .select--sort { flex: 1 1 auto; min-width: 0; }
  .catalogue__count { order: 5; flex: 1 0 100%; color: var(--ink-600); }
}

.searchfield {
  position: relative;
  flex: 1 1 240px;
  min-width: 180px;
}
.searchfield input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  background: var(--white);
  font-size: var(--fs-sm);
}
.searchfield input:focus {
  outline: none;
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px rgba(20, 169, 162, 0.15);
}
.searchfield svg {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-400);
  pointer-events: none;
}

.active-filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); }
.active-filters:empty { display: none; }

/* ============================================================ PRODUCT GRID */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}
@media (max-width: 1180px) { .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .prod-grid { grid-template-columns: 1fr; } }
.prod-grid--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1380px) { .prod-grid--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1080px) { .prod-grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .prod-grid--wide { grid-template-columns: 1fr; } }

.prod {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.prod:hover { border-color: var(--line-strong); box-shadow: var(--sh-2); transform: translateY(-2px); }
.prod__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-5) 0;
}
.prod__cat {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--teal-600);
  line-height: 1.4;
}
.prod__star { color: var(--teal-500); flex: none; }
.prod__body {
  padding: var(--s-4) var(--s-5) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
}
.prod__anchor-wrap { display: flex; flex-direction: column; gap: 3px; }
.prod__qual {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-700);
  line-height: 1.3;
  min-height: calc(2 * 1.3em);
}
.prod__title {
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--ink-400);
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.4em);
}
.prod__blurb {
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--ink-600);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(3 * 1.55em);
}
.prod__meta {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding-top: var(--s-3);
  margin-top: auto;
  border-top: 1px solid var(--line-soft);
}
.prod__price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-soft);
}
.prod__price-row .price { font-size: 1.32rem; }
.prod__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
  padding: 0 var(--s-5) var(--s-4);
}
.prod__actions .btn--quiet { grid-column: 1 / -1; justify-content: flex-start; }
.prod--featured { border-color: #CFEBE9; }
.prod--featured .prod__top { background: linear-gradient(180deg, var(--teal-025), transparent); }

/* Compact row used in the finder results and the related list */
.prod-row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.prod-row:hover { border-color: var(--line-strong); box-shadow: var(--sh-1); text-decoration: none; }
.prod-row__anchor {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--navy-800);
  flex: none;
  min-width: 74px;
  letter-spacing: -0.01em;
}
.prod-row__mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.prod-row__t { font-size: var(--fs-sm); font-weight: 700; color: var(--navy-800); }
.prod-row__m { font-size: var(--fs-xs); color: var(--ink-500); }
.prod-row__p { flex: none; text-align: right; }
@media (max-width: 640px) {
  .prod-row { flex-wrap: wrap; }
  .prod-row__anchor { min-width: 0; }
  .prod-row__p { margin-left: auto; }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-12) var(--s-8);
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-3);
}

/* ================================================================== FINDER */
.finder {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.finder__qs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}
@media (max-width: 820px) { .finder__qs { grid-template-columns: 1fr; } }
.finder__q {
  background: var(--white);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.finder__q > .label { color: var(--teal-600); }
.finder__out {
  padding: var(--s-6);
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.finder__count { font-size: var(--fs-sm); font-weight: 700; color: var(--navy-800); }
.finder__list { display: flex; flex-direction: column; gap: var(--s-2); }

/* ================================================================== WHY US */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 1px;
  background: var(--navy-line);
  border: 1px solid var(--navy-line);
  border-radius: var(--r-3);
  overflow: hidden;
}
.why-item {
  background: var(--navy-800);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.why-item h3 { color: var(--white); font-family: var(--font-ui); font-size: var(--fs-h4); font-weight: 700; }
.why-item p { font-size: var(--fs-sm); color: var(--on-navy-dim); }

/* ================================================================ CTA BAND */
.ctaband {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-8);
  padding: clamp(32px, 4vw, 56px);
  background: var(--navy-800);
  border-radius: var(--r-4);
  color: var(--on-navy);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.ctaband::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    repeating-linear-gradient(115deg, rgba(95,214,206,0.06) 0 1px, transparent 1px 10px),
    radial-gradient(80% 140% at 96% 0%, rgba(20,169,162,0.22), transparent 60%);
}
@media (max-width: 820px) { .ctaband { grid-template-columns: 1fr; } }

/* ================================================================== FOOTER */
.site-footer { background: var(--navy-900); color: var(--on-navy-dim); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
  gap: clamp(28px, 4vw, 56px);
  padding-block: clamp(48px, 5vw, 76px);
}
@media (max-width: 940px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-col { display: flex; flex-direction: column; gap: var(--s-4); }
.footer-col h4 {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--on-navy-faint);
}
.footer-links { display: flex; flex-direction: column; gap: var(--s-3); }
.footer-links a { color: var(--on-navy-dim); font-size: var(--fs-sm); }
.footer-links a:hover { color: var(--white); text-decoration: none; }
.footer-contact { display: flex; flex-direction: column; gap: var(--s-3); font-size: var(--fs-sm); }
.footer-contact a { color: var(--on-navy-dim); }
.footer-contact a:hover { color: var(--white); }
.social { display: flex; gap: var(--s-2); }
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--navy-line);
  border-radius: var(--r-2);
  color: var(--on-navy-dim);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.social a:hover { border-color: var(--teal-400); color: var(--teal-300); background: rgba(47,192,184,0.08); text-decoration: none; }

.footer-bottom {
  border-top: 1px solid var(--navy-line);
  padding-block: var(--s-6);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--on-navy-faint);
}
.footer-bottom .langswitch { background: transparent; border-color: var(--navy-line); }
.footer-bottom .langswitch a,
.footer-bottom .langswitch button { color: var(--on-navy-faint); }
.footer-bottom .langswitch a:hover { color: var(--white); }
.footer-bottom .langswitch a + a,
.footer-bottom .langswitch button + button { border-left-color: var(--navy-line); }
.footer-bottom .langswitch a[aria-current="true"],
.footer-bottom .langswitch button[aria-pressed="true"] { background: var(--teal-400); color: var(--navy-950); }

/* ============================================================ BREADCRUMBS */
.crumbs {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--ink-500);
  padding-block: var(--s-5);
}
.crumbs a { color: var(--ink-500); }
.crumbs a:hover { color: var(--teal-700); }
.crumbs span[aria-current] { color: var(--navy-800); font-weight: 700; }

/* =========================================================== PRODUCT PAGE */
.pdp-hero {
  background: var(--navy-800);
  color: var(--on-navy);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.pdp-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    repeating-linear-gradient(115deg, rgba(95,214,206,0.055) 0 1px, transparent 1px 10px),
    radial-gradient(70% 120% at 90% 0%, rgba(20,169,162,0.20), transparent 62%);
}
.pdp-hero .crumbs { color: var(--on-navy-faint); }
.pdp-hero .crumbs a { color: var(--on-navy-faint); }
.pdp-hero .crumbs a:hover { color: var(--teal-300); }
.pdp-hero .crumbs span[aria-current] { color: var(--on-navy); }

.pdp-hero__inner {
  max-width: 78ch;
  padding-bottom: clamp(36px, 4.5vw, 64px);
}

.pdp-anchor {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.3rem);
  letter-spacing: 0.02em;
  color: var(--teal-300);
}
.pdp-title { color: var(--white); font-size: var(--fs-h1); }
.pdp-meta {
  display: flex;
  gap: var(--s-6);
  flex-wrap: wrap;
  padding-top: var(--s-5);
  margin-top: var(--s-5);
  border-top: 1px solid var(--navy-line);
}
.pdp-meta__item { display: flex; flex-direction: column; gap: 3px; }
.pdp-meta__l {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--on-navy-faint);
}
.pdp-meta__v { font-size: var(--fs-sm); color: var(--white); font-weight: 700; }

/* Purchase panel — sits in the body grid, sticky while the sections scroll */
.buybox {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  box-shadow: var(--sh-3);
  overflow: hidden;
  position: sticky;
  top: calc(var(--header-h) + 16px);
  align-self: start;
}
@media (max-width: 900px) { .buybox { position: static; order: -1; } }
.buybox__head {
  padding: var(--s-6);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.buybox__price { display: flex; align-items: baseline; gap: var(--s-3); }
.buybox__price .price { font-size: 2.1rem; }
.buybox__body { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.buybox__inc { display: flex; flex-direction: column; gap: var(--s-2); }
.buybox__inc li {
  display: flex;
  gap: var(--s-2);
  align-items: flex-start;
  font-size: var(--fs-xs);
  color: var(--ink-600);
  line-height: 1.5;
}
.buybox__inc svg { color: var(--teal-600); flex: none; margin-top: 3px; }
.buybox__inc ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }

.pdp-body {
  display: grid;
  grid-template-columns: 186px minmax(0, 1fr) 350px;
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
}
@media (max-width: 1180px) { .pdp-body { grid-template-columns: minmax(0, 1fr) 330px; } }
@media (max-width: 900px)  { .pdp-body { grid-template-columns: 1fr; } }
.pdp-toc {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
@media (max-width: 1180px) { .pdp-toc { display: none; } }
.pdp-toc a {
  font-size: var(--fs-xs);
  color: var(--ink-500);
  padding: 5px 0 5px 12px;
  border-left: 2px solid var(--line);
}
.pdp-toc a:hover { color: var(--navy-800); border-left-color: var(--teal-500); text-decoration: none; }

.pdp-section { padding-block: var(--s-8); border-bottom: 1px solid var(--line); }
.pdp-section:first-child { padding-top: 0; }
.pdp-section:last-child { border-bottom: 0; }
.pdp-section h2 { font-size: var(--fs-h3); margin-bottom: var(--s-4); }
.pdp-section p { color: var(--ink-700); }
.pdp-section p + p { margin-top: var(--s-3); }
.pdp-section ul { display: flex; flex-direction: column; gap: var(--s-2); color: var(--ink-700); font-size: var(--fs-sm); }

.spec-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
}
.spec {
  background: var(--white);
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.spec__l {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-500);
}
.spec__v { font-size: var(--fs-sm); font-weight: 700; color: var(--navy-800); }

/* Pathway strip — shows where this programme sits in its domain */
.pathway { display: flex; flex-direction: column; gap: var(--s-2); }
.pathway__item {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--white);
  font-size: var(--fs-sm);
}
.pathway__item:hover { border-color: var(--line-strong); text-decoration: none; }
.pathway__item--current { background: var(--navy-800); border-color: var(--navy-800); }
.pathway__item--current .pathway__t { color: var(--white); }
.pathway__item--current .badge { background: rgba(255,255,255,0.12); color: var(--on-navy); border-color: rgba(255,255,255,0.2); }
.pathway__t { flex: 1; color: var(--navy-800); font-weight: 700; }
.pathway__p { color: var(--ink-500); font-variant-numeric: tabular-nums; }
.pathway__item--current .pathway__p { color: var(--on-navy-dim); }

details.faq {
  border-bottom: 1px solid var(--line);
  padding-block: var(--s-4);
}
details.faq:last-of-type { border-bottom: 0; }
details.faq > summary {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: var(--navy-800);
  font-size: var(--fs-sm);
}
details.faq > summary::-webkit-details-marker { display: none; }
details.faq > summary::after {
  content: "";
  margin-left: auto;
  width: 12px; height: 12px;
  flex: none;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230B2545' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/12px no-repeat;
  transition: transform var(--dur) var(--ease);
}
details.faq[open] > summary::after { transform: rotate(180deg); }
details.faq > div { padding-top: var(--s-3); font-size: var(--fs-sm); color: var(--ink-600); line-height: 1.6; }

/* ==================================================================== CART */
.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 348px;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
@media (max-width: 940px) { .cart-layout { grid-template-columns: 1fr; } }

.cart-line {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line);
}
.cart-line:first-child { border-top: 1px solid var(--line); }
.cart-line__t { font-weight: 700; color: var(--navy-800); font-size: var(--fs-sm); }
.cart-line__m { font-size: var(--fs-xs); color: var(--ink-500); margin-top: 3px; }
.cart-line__price { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 620px) {
  .cart-line { grid-template-columns: 1fr auto; }
  .cart-line__price { grid-column: 2; }
}

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--white);
}
.qty button {
  width: 34px; height: 36px;
  border: 0;
  background: transparent;
  color: var(--ink-600);
  font-size: 1rem;
  line-height: 1;
}
.qty button:hover { background: var(--surface-3); color: var(--navy-800); }
.qty span {
  min-width: 34px;
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--navy-800);
}

.summary {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  position: sticky;
  top: calc(var(--header-h) + 16px);
}
@media (max-width: 940px) { .summary { position: static; } }
.summary__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--fs-sm);
  color: var(--ink-600);
}
.summary__row--total {
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-h4);
  color: var(--navy-800);
  font-weight: 700;
}
.summary__row .nums { font-variant-numeric: tabular-nums; }

/* ================================================================ CHECKOUT */
.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 980px) { .checkout-layout { grid-template-columns: 1fr; } }
.co-block {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.co-block h2 { font-size: var(--fs-h3); }
.co-steps {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--ink-400);
  padding-bottom: var(--s-6);
}
.co-steps b { color: var(--navy-800); }
.co-steps .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong); }

/* ========================================================== CONFIRMATION */
.confirm-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px; height: 74px;
  border-radius: 50%;
  background: var(--teal-050);
  color: var(--teal-700);
  border: 1px solid #CFEBE9;
}

/* ================================================================== MODAL */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: rgba(6, 26, 49, 0.52);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(16px, 4vh, 56px) var(--s-4);
  overflow-y: auto;
  animation: fade-in 160ms var(--ease);
}
.overlay[hidden] { display: none !important; }
.modal {
  width: 100%;
  max-width: 620px;
  background: var(--paper);
  border-radius: var(--r-4);
  box-shadow: var(--sh-3);
  overflow: hidden;
  animation: modal-in 220ms var(--ease);
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.modal__head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-6) var(--s-6) var(--s-4);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}
.modal__head h2 { font-size: var(--fs-h3); }
.modal__body { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-5); }
.modal__foot {
  padding: var(--s-5) var(--s-6);
  border-top: 1px solid var(--line);
  background: var(--white);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}

/* =========================================================== COOKIE BANNER */
.cookiebar {
  position: fixed;
  left: var(--s-4);
  right: var(--s-4);
  bottom: var(--s-4);
  z-index: 240;
  max-width: 680px;
  margin-inline: auto;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  box-shadow: var(--sh-3);
  padding: var(--s-5) var(--s-6);
  display: flex;
  gap: var(--s-5);
  align-items: center;
  animation: cookie-in 300ms var(--ease);
}
.cookiebar[hidden] { display: none !important; }
@keyframes cookie-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.cookiebar__txt { flex: 1; font-size: var(--fs-xs); color: var(--ink-600); line-height: 1.55; }
.cookiebar__txt b { color: var(--navy-800); display: block; margin-bottom: 3px; font-size: var(--fs-sm); }
.cookiebar__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; flex: none; }
@media (max-width: 720px) {
  .cookiebar { flex-direction: column; align-items: stretch; }
  .cookiebar__actions .btn { flex: 1; }
}
.cookie-pref-row {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}
.cookie-pref-row:last-child { border-bottom: 0; }
.cookie-pref-row__txt { flex: 1; }
.cookie-pref-row__t { font-weight: 700; font-size: var(--fs-sm); color: var(--navy-800); }
.cookie-pref-row__b { font-size: var(--fs-xs); color: var(--ink-500); line-height: 1.5; margin-top: 2px; }

/* ================================================== PROTOTYPE REVIEW TOGGLE */
.proto-btn {
  position: fixed;
  left: var(--s-4);
  bottom: var(--s-4);
  z-index: 230;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 8px 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink-600);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: var(--sh-2);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.proto-btn:hover { color: var(--navy-800); border-color: var(--navy-600); }
.proto-btn .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal-500); flex: none; }
body.no-notes .proto-btn .dot { background: var(--line-strong); }

/* ============================================================== ABOUT PAGE */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.prose h2 { font-size: var(--fs-h3); margin-bottom: var(--s-3); }
.prose p { color: var(--ink-700); }
.prose p + p, .prose h2 + p { margin-top: var(--s-3); }
.prose > * + h2 { margin-top: var(--s-8); }
.prose ul { margin-top: var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); color: var(--ink-700); }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

.pillar {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
}
.pillar h3 { font-size: var(--fs-h4); font-family: var(--font-ui); font-weight: 700; }
.pillar p { font-size: var(--fs-sm); color: var(--ink-600); }

/* ============================================================ CONTACT PAGE */
.contact-layout {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }
.contact-item {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line);
}
.contact-item:first-child { border-top: 1px solid var(--line); }
.contact-item__l {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-500);
}
.contact-item__v { font-size: var(--fs-sm); color: var(--navy-800); font-weight: 700; }

/* ========================================================= BRAND BOOK PAGE */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: var(--s-3); }
.swatch {
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--white);
}
.swatch__chip { height: 66px; }
.swatch__meta { padding: var(--s-3); display: flex; flex-direction: column; gap: 1px; }
.swatch__n { font-size: var(--fs-xs); font-weight: 700; color: var(--navy-800); }
.swatch__h { font-size: var(--fs-micro); color: var(--ink-500); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }

.typespec {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line);
}
.typespec:last-child { border-bottom: 0; }
.typespec__meta {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-400);
}

.brand-block {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  padding-block: var(--s-10);
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.brand-block:last-child { border-bottom: 0; }
@media (max-width: 820px) { .brand-block { grid-template-columns: 1fr; gap: var(--s-5); } }
.brand-block__side { display: flex; flex-direction: column; gap: var(--s-3); }
.brand-block__side p { font-size: var(--fs-sm); color: var(--ink-600); }

.demo-tile {
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--white);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}
.demo-tile--navy { background: var(--navy-800); border-color: var(--navy-line); }

/* =============================================================== PAGE HEAD */
.pagehead {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(36px, 4vw, 64px);
}
.pagehead__inner { display: flex; flex-direction: column; gap: var(--s-4); max-width: 68ch; }

/* ================================================================ PRINTING */
@media print {
  .site-header, .site-footer, .cookiebar, .proto-btn, .overlay { display: none !important; }
  body { background: #fff; }
}