/* Kurumsal Widget Kütüphanesi — birleşik stil (widgets:import ile üretilir; ELLE DÜZENLEME).
   Her widget kendi kök-class'ı altında izoledir → tek dosyada çakışmadan birleşir. */

/* Entegrasyon reset: widget kök-section'larından demo/sızan boşlukları temizle.
   Widget'lar standalone gösterim için <section> kullanır; CMS'in genel section{padding}
   kuralı bunlara sızar. Kendi padding'ini tanımlayan widget (footer/içerik) SONRAKİ kendi
   kuralıyla bunu geri alır (aynı özgüllük, sonra gelir); flush olması gereken (header) temiz kalır. */
.hero-split,.hero-center,.hero-immersive,.hero-gradient,.hero-lead,.hero-proof,.about-split,.about-stats,.about-mission,.about-mosaic,.about-approach,.about-story,.feature-split,.feature-trio,.feature-alt,.feature-media,.feature-bento,.feature-tiles,.feature-index,.feature-showcase,.service-cards,.service-split,.service-bento,.service-tabs,.service-panels,.service-caps,.stat-counters,.stat-band,.stat-split,.stat-bars,.stat-kpi,.process-steps,.process-vertical,.process-zigzag,.process-flow,.process-accordion,.tl-alt,.tl-h,.tl-rail,.tl-cards,.cta-band,.cta-split,.cta-subscribe,.cta-cover,.cta-actions,.cta-statement,.gal-masonry,.gal-filter,.gal-lb,.gal-ba,.prod-cards,.prod-spot,.prod-list,.prod-cats,.prod-feat,.prod-best,.price-tiers,.price-switch,.price-compare,.price-single,.price-promo,.price-calc,.faq-classic,.faq-grid,.faq-split,.faq-search,.faq-columns,.faq-cta,.team-cards,.team-lead,.team-overlay,.team-list,.team-circles,.tst-cards,.tst-spotlight,.tst-slider,.tst-wall,.tst-proof,.tst-video,.cl-strip,.cl-marquee,.cl-grid,.cl-band,.blog-cards,.blog-feat,.blog-list,.blog-mag,.contact-form,.contact-cards,.contact-map,.contact-dir,.contact-offices,.form-quote,.form-wizard,.form-book,.form-fb,.ft-cols,.ft-news,.ft-minimal,.ft-cta,.ft-dark,.ft-bigcta,.ft-social,.ft-app,.ft-contact,.ft-mega,.ft-brand,.ft-gradient,.ft-split,.ft-legal,.ft-cards,.ft-accordion,.ft-backtotop,.ft-badges,.ft-hours,.ft-lang,.ft-twotone,.ft-offices,.ft-sitemap,.ft-oneline,.ft-pattern,.ft-subscribe,.ft-ctaband,.ft-map,.ft-newsletter2,.ft-partners,.hd-classic,.hd-topbar,.hd-twotone,.hd-block,.hd-gradient,.hd-contact,.hd-diagonal,.h12-header,.h01-header,.h02-header,.h03-header,.h04-header,.h05-header,.h06-header,.h08-header,.h09-header,.h10-header,.h07-header,.h13-header,.h11-bar,.h14-header,.h15-header,.h16-header,.h17-header,.h18-header,.h19-header,.h20-header,.h21-header,.h22-header,.h23-header,.h24-header,.h25-header,.h26-header,.h27-header,.h28-header,.h29-header,.h30-header,.h31-header,.h32-header,.h33-header,.h34-header,.h35-header,.h36-header,.h37-header,.h38-header,.h39-header,.h40-header{margin:0;padding:0}

/* ===== hero-01 · .hero-split ===== */
/* ==========================================================================
   Hero 01 · Split  — self-contained, scoped under .hero-split
   ========================================================================== */

.hero-split {
  --primary: #1f3a28;
  --accent: #9a3324;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --radius: 26px;
  --shadow: 0 30px 70px -30px rgba(31, 58, 40, .35);
  --transition: .45s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
  overflow: hidden;
}

/* Eyebrow */
.hero-split__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1.4rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text, var(--primary));
}
.hero-split__eyebrow span {
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent, var(--primary));
}

/* Title */
.hero-split__title {
  margin: 0 0 1.4rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 4.4vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--text, var(--primary));
}
.hero-split__title em {
  font-style: normal;
  color: var(--accent);
}

.hero-split__lead {
  max-width: 32rem;
  margin: 0 0 2.2rem;
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.75;
  color: var(--muted);
}

/* Actions */
.hero-split__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-bottom: 2.6rem;
}
.hero-split__btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .95rem 1.7rem;
  border-radius: 100px;
  font-weight: 600;
  font-size: .98rem;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.hero-split__btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--transition);
}
.hero-split__btn--primary {
  background: var(--btn-bg, var(--primary));
  color: #fff;
  box-shadow: 0 16px 34px -14px rgba(31, 58, 40, .55);
}
.hero-split__btn--primary:hover {
  background: #285035;
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -14px rgba(31, 58, 40, .6);
}
.hero-split__btn--primary:hover svg { transform: translateX(4px); }
.hero-split__btn--ghost {
  background: transparent;
  color: var(--text, var(--primary));
  border: 1.5px solid rgba(31, 58, 40, .22);
}
.hero-split__btn--ghost:hover {
  background: rgba(31, 58, 40, .05);
  transform: translateY(-3px);
}

/* Trust row */
.hero-split__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 2.4rem;
  margin: 0;
  padding: 1.6rem 0 0;
  list-style: none;
  border-top: 1px solid rgba(31, 58, 40, .12);
  color: var(--muted);
  font-size: .92rem;
}
.hero-split__trust strong {
  display: block;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 1.35rem;
  color: var(--text, var(--primary));
  line-height: 1.1;
}

/* Media */
.hero-split__media {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: visible;
}
.hero-split__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  object-fit: cover;
}

/* Floating badge */
.hero-split__badge {
  position: absolute;
  left: -1.2rem;
  bottom: 1.8rem;
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem 1.3rem;
  background: var(--surface);
  border-radius: 18px;
  box-shadow: 0 20px 45px -20px rgba(31, 58, 40, .4);
  animation: heroSplitFloat 5s ease-in-out infinite;
}
.hero-split__badge-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
  background: #e4ede2;
  color: var(--text, var(--primary));
}
.hero-split__badge-icon svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.hero-split__badge-text {
  display: flex;
  flex-direction: column;
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.35;
}
.hero-split__badge-text strong {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: .98rem;
  color: var(--text);
}

@keyframes heroSplitFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* Load-in reveal */
.hero-split [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
}
.hero-split.is-revealed [data-reveal] {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--d, 0s);
}

@media (max-width: 991.98px) {
  .hero-split__badge { left: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-split__badge { animation: none; }
  .hero-split [data-reveal] { opacity: 1; transform: none; }
}

/* ===== hero-02 · .hero-center ===== */
/* ==========================================================================
   Hero 02 · Centered — self-contained, scoped under .hero-center
   ========================================================================== */

.hero-center {
  --primary: #1f3a28;
  --accent: #9a3324;
  --bg: #f5f0e6;
  --text: #2a2a24;
  --muted: #6e6e62;
  --transition: .45s cubic-bezier(.22, 1, .36, 1);

  position: relative;
  padding: clamp(4rem, 10vw, 8.5rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(60% 55% at 50% 0%, rgba(31, 58, 40, .07), transparent 70%),
    var(--bg);
}

.hero-center__inner {
  max-width: 46rem;
  margin: 0 auto;
}

/* Eyebrow with flanking rules */
.hero-center__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 1.6rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text, var(--primary));
}
.hero-center__eyebrow span {
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: .55;
}

.hero-center__title {
  margin: 0 auto 1.5rem;
  max-width: 20ch;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2.3rem, 5.4vw, 4rem);
  line-height: 1.06;
  letter-spacing: -.015em;
  color: var(--text, var(--primary));
}
.hero-center__title em {
  font-style: normal;
  color: var(--accent);
}

.hero-center__lead {
  max-width: 40rem;
  margin: 0 auto 2.4rem;
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.75;
  color: var(--muted);
}

/* Actions */
.hero-center__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.2rem 1.8rem;
}
.hero-center__btn {
  display: inline-flex;
  padding: 1rem 2rem;
  border-radius: 100px;
  background: var(--btn-bg, var(--primary));
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 18px 38px -16px rgba(31, 58, 40, .55);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.hero-center__btn:hover {
  background: #285035;
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -16px rgba(31, 58, 40, .6);
}
.hero-center__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--text, var(--primary));
  font-weight: 600;
  text-decoration: none;
}
.hero-center__link svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--transition);
}
.hero-center__link:hover svg { transform: translateX(5px); }

/* Proof strip */
.hero-center__proof {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 2.2rem;
  border-top: 1px solid rgba(31, 58, 40, .12);
}
.hero-center__proof-label {
  display: block;
  margin-bottom: 1.3rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-center__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem 3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero-center__logos li {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .04em;
  color: #9a9a8c;
  transition: color var(--transition), transform var(--transition);
  cursor: default;
}
.hero-center__logos li:hover {
  color: var(--text, var(--primary));
  transform: translateY(-2px);
}

/* Reveal */
.hero-center [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
}
.hero-center.is-revealed [data-reveal] {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--d, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .hero-center [data-reveal] { opacity: 1; transform: none; }
}

/* ===== hero-03 · .hero-immersive ===== */
/* ==========================================================================
   Hero 03 · Immersive — self-contained, scoped under .hero-immersive
   ========================================================================== */

.hero-immersive {
  --primary: #1f3a28;
  --gold: #b8945f;
  --transition: .45s cubic-bezier(.22, 1, .36, 1);

  position: relative;
  isolation: isolate;
  padding: clamp(4rem, 9vw, 7.5rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text, #f3efe6);
  overflow: hidden;
  background:
    linear-gradient(135deg, var(--grad-from, #1f3a28) 0%, color-mix(in srgb, var(--grad-from, #1f3a28), var(--grad-to, #4a5b34)) 45%, var(--grad-to, #4a5b34) 100%);
}

/* Ambient glow */
.hero-immersive__glow {
  position: absolute;
  inset: auto -10% -30% auto;
  width: 60vw;
  max-width: 720px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--grad-glow-1, #b8945f) 55%, transparent), transparent 62%);
  filter: blur(20px);
  z-index: -1;
  pointer-events: none;
}

.hero-immersive__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1.3rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text, #d9c9a6);
}
.hero-immersive__eyebrow span {
  width: 32px; height: 2px;
  border-radius: 2px;
  background: var(--accent, var(--gold));
}

.hero-immersive__title {
  margin: 0 0 1.4rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -.015em;
  color: var(--text, #fff);
}
.hero-immersive__title em {
  font-style: normal;
  color: var(--accent, var(--gold));
}

.hero-immersive__lead {
  max-width: 34rem;
  margin: 0 0 2.4rem;
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.75;
  color: rgba(243, 239, 230, .82);
}

.hero-immersive__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
}
.hero-immersive__btn {
  display: inline-flex;
  padding: 1rem 1.9rem;
  border-radius: 100px;
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
}
.hero-immersive__btn--solid {
  background: var(--btn-bg, var(--gold));
  color: #241c10;
  box-shadow: 0 18px 40px -16px rgba(184, 148, 95, .7);
}
.hero-immersive__btn--solid:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 52px -16px rgba(184, 148, 95, .8);
  background: #c6a26c;
}
.hero-immersive__btn--outline {
  background: rgba(255, 255, 255, .06);
  color: #f3efe6;
  border: 1.5px solid rgba(243, 239, 230, .3);
  backdrop-filter: blur(6px);
}
.hero-immersive__btn--outline:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, .12);
}

/* Stats — glass card grid */
.hero-immersive__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .55);
}
.hero-immersive__stat {
  padding: 1.9rem 1.5rem;
  background: rgba(31, 58, 40, .55);
  backdrop-filter: blur(10px);
  transition: background var(--transition);
}
.hero-immersive__stat:hover {
  background: rgba(31, 58, 40, .35);
}
.hero-immersive__num {
  display: block;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.hero-immersive__label {
  display: block;
  margin-top: .55rem;
  font-size: .84rem;
  color: rgba(243, 239, 230, .72);
}

@media (max-width: 575.98px) {
  .hero-immersive__stats { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-immersive__btn { transition: none; }
}

/* ===== hero-04 · .hero-gradient ===== */
/* ==========================================================================
   Hero 04 · Gradient — scoped under .hero-gradient
   ========================================================================== */

.hero-gradient {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(2rem, 5vw, 3.5rem) 0;
  font-family: "Inter", system-ui, sans-serif;
}

.hero-gradient__inner {
  position: relative; overflow: hidden;
  text-align: center;
  padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 4vw, 3rem);
  border-radius: 32px;
  background:
    radial-gradient(90% 120% at 85% 0%, color-mix(in srgb, var(--grad-glow-1, #b8945f) 35%, transparent), transparent 55%),
    radial-gradient(80% 120% at 0% 100%, color-mix(in srgb, var(--grad-glow-2, #9a3324) 28%, transparent), transparent 55%),
    linear-gradient(150deg, var(--grad-from, #274a31) 0%, color-mix(in srgb, var(--grad-from, #274a31), var(--grad-to, #16281c)) 50%, var(--grad-to, #16281c) 100%);
  box-shadow: 0 44px 100px -46px rgba(15, 28, 19, .85);
  color: var(--text, #f4efe5);
}
.hero-gradient__grid-lines {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(244, 239, 229, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 239, 229, .06) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(120% 100% at 50% 40%, #000 20%, transparent 75%);
}

.hero-gradient__badge {
  position: relative;
  display: inline-flex; align-items: center; gap: .5rem;
  margin: 0 0 1.5rem; padding: .4rem 1rem; border-radius: 999px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(244, 239, 229, .16);
  font-size: .82rem; font-weight: 500; color: var(--text, #f4efe5);
}
.hero-gradient__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent, var(--gold)); box-shadow: 0 0 0 0 rgba(184, 148, 95, .6); animation: hg-pulse 2.2s infinite; }
@keyframes hg-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(184,148,95,.6); } 50% { box-shadow: 0 0 0 7px rgba(184,148,95,0); } }

.hero-gradient__title {
  position: relative;
  margin: 0 auto 1.1rem; max-width: 18ch;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(2.2rem, 5.5vw, 3.8rem);
  line-height: 1.08; letter-spacing: -.02em; color: var(--text, #fff);
}
.hero-gradient__title em { font-style: normal; color: var(--accent, var(--gold)); }
.hero-gradient__sub { position: relative; margin: 0 auto 2rem; max-width: 52ch; font-size: clamp(1rem, 1.7vw, 1.18rem); line-height: 1.6; color: rgba(244, 239, 229, .82); }

.hero-gradient__cta { position: relative; display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-bottom: clamp(2.4rem, 5vw, 3.4rem); }
.hero-gradient__btn { display: inline-flex; align-items: center; gap: .55rem; padding: 1rem 1.9rem; border-radius: 999px; font-weight: 600; font-size: 1rem; text-decoration: none; transition: transform var(--transition), background var(--transition), gap var(--transition), border-color var(--transition); }
.hero-gradient__btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition); }
.hero-gradient__btn--primary { background: var(--btn-bg, var(--gold)); color: #241a0e; box-shadow: 0 22px 44px -18px rgba(184, 148, 95, .9); }
.hero-gradient__btn--primary:hover { transform: translateY(-3px); background: #c8a570; gap: .85rem; }
.hero-gradient__btn--primary:hover svg { transform: translateX(3px); }
.hero-gradient__btn--ghost { background: var(--btn2-bg, rgba(255, 255, 255, .08)); color: #fff; border: 1px solid rgba(244, 239, 229, .4); }
.hero-gradient__btn--ghost:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .16); }
.hero-gradient__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.hero-gradient__stats { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.hg-stat {
  display: flex; flex-direction: column; align-items: center;
  padding: 1.1rem 1.6rem; min-width: 130px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(244, 239, 229, .12);
  border-radius: 18px; backdrop-filter: blur(4px);
}
.hg-stat strong { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.7rem; color: var(--gold); line-height: 1; }
.hg-stat span { margin-top: .35rem; font-size: .84rem; color: rgba(244, 239, 229, .78); }

@media (prefers-reduced-motion: reduce) {
  .hero-gradient__dot { animation: none; }
  .hero-gradient__btn, .hero-gradient__btn svg { transition: none; }
}

/* ===== hero-05 · .hero-lead ===== */
/* ==========================================================================
   Hero 05 · Lead Gen — scoped under .hero-lead
   ========================================================================== */

.hero-lead {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .3s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3rem, 7vw, 6rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.hero-lead__grid { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }

/* Intro ------------------------------------------------------------------- */
.hero-lead__badge {
  display: inline-flex; align-items: center; gap: .55rem;
  margin: 0 0 1.2rem; padding: .35rem .9rem; border-radius: 999px;
  background: #f2e2df; color: var(--accent);
  font-size: .8rem; font-weight: 600;
}
.hero-lead__badge span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.hero-lead__title {
  margin: 0 0 1rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(2.1rem, 4.4vw, 3.2rem);
  line-height: 1.1; letter-spacing: -.02em; color: var(--text, var(--primary));
}
.hero-lead__title em { font-style: normal; color: var(--accent); }
.hero-lead__sub { margin: 0 0 1.6rem; font-size: 1.08rem; line-height: 1.6; color: var(--muted); max-width: 42ch; }
.hero-lead__perks { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.hero-lead__perks li { display: flex; align-items: center; gap: .6rem; font-size: .97rem; font-weight: 500; color: var(--text); }
.hero-lead__perks svg { flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: #2f6a3e; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* Form -------------------------------------------------------------------- */
.hero-lead__form {
  padding: clamp(1.8rem, 3.5vw, 2.5rem);
  background: var(--surface);
  border: 1px solid rgba(31, 58, 40, .06);
  border-radius: 26px;
  box-shadow: 0 40px 90px -46px rgba(31, 58, 40, .5);
}
.hero-lead__fh { margin: 0 0 1.3rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.25rem; color: var(--text, var(--primary)); }
.hl-field { display: flex; flex-direction: column; margin-bottom: 1.1rem; }
.hl-field label { margin-bottom: .4rem; font-size: .85rem; font-weight: 600; color: var(--text, var(--primary)); }
.hl-field input {
  padding: .85rem 1rem; border: 1.5px solid var(--line); border-radius: 12px;
  background: #faf7f0; color: var(--text); font: inherit; font-size: .95rem;
  transition: border-color var(--transition), background var(--transition);
}
.hl-field input:focus { outline: none; border-color: var(--gold); background: var(--surface); }

.hero-lead__btn {
  width: 100%; padding: .95rem 1.5rem; margin-top: .3rem; border: none; border-radius: 999px;
  background: var(--btn-bg, var(--primary)); color: #f3efe6;
  font: inherit; font-weight: 600; font-size: .98rem; cursor: pointer;
  box-shadow: 0 18px 34px -18px rgba(31, 58, 40, .7);
  transition: transform var(--transition), background var(--transition);
}
.hero-lead__btn:hover { transform: translateY(-2px); background: #26492f; }
.hero-lead__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.hero-lead__status { margin: .9rem 0 0; min-height: 1.1em; font-size: .86rem; font-weight: 500; }
.hero-lead__status.is-error { color: var(--accent); }
.hero-lead__status.is-ok { color: #2f6a3e; }
.hero-lead__fine { margin: .6rem 0 0; font-size: .8rem; color: var(--muted); }
.hero-lead__fine a { color: var(--accent); }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 861.98px) { .hero-lead__grid { grid-template-columns: 1fr; } .hero-lead__sub { max-width: none; } }
@media (prefers-reduced-motion: reduce) { .hl-field input, .hero-lead__btn { transition: none; } }

/* ===== hero-06 · .hero-proof ===== */
/* ==========================================================================
   Hero 06 · Social Proof — scoped under .hero-proof
   ========================================================================== */

.hero-proof {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background:
    radial-gradient(60% 60% at 50% 0%, rgba(184, 148, 95, .16), transparent 70%),
    var(--bg);
  padding: clamp(3.5rem, 9vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.hero-proof__inner { max-width: 46rem; margin: 0 auto; text-align: center; }

.hero-proof__rating { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.6rem; font-size: .9rem; font-weight: 500; color: var(--muted); }
.hero-proof__stars { color: var(--gold); letter-spacing: .1em; font-size: 1.05rem; }

.hero-proof__title {
  margin: 0 auto 1.1rem; max-width: 18ch;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(2.2rem, 5.5vw, 3.8rem);
  line-height: 1.08; letter-spacing: -.02em; color: var(--text, var(--primary));
}
.hero-proof__title em { font-style: normal; color: var(--accent); }
.hero-proof__sub { margin: 0 auto 2rem; max-width: 50ch; font-size: clamp(1rem, 1.7vw, 1.18rem); line-height: 1.62; color: var(--muted); }

.hero-proof__btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 1.05rem 2rem; border-radius: 999px;
  background: var(--btn-bg, var(--primary)); color: #f3efe6;
  font-weight: 600; font-size: 1.05rem; text-decoration: none;
  box-shadow: 0 22px 44px -18px rgba(31, 58, 40, .7);
  transition: transform var(--transition), background var(--transition), gap var(--transition);
}
.hero-proof__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition); }
.hero-proof__btn:hover { transform: translateY(-3px); background: #26492f; gap: .9rem; }
.hero-proof__btn:hover svg { transform: translateX(4px); }
.hero-proof__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.hero-proof__social { display: flex; align-items: center; justify-content: center; gap: .9rem; margin-top: 2.4rem; flex-wrap: wrap; }
.hero-proof__stack { display: flex; }
.hero-proof__stack img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 3px solid var(--bg); margin-left: -12px; background: #e4ede2; }
.hero-proof__stack img:first-child { margin-left: 0; }
.hero-proof__social p { margin: 0; font-size: .92rem; color: var(--muted); }
.hero-proof__social strong { color: var(--text, var(--primary)); font-weight: 600; }

@media (prefers-reduced-motion: reduce) { .hero-proof__btn, .hero-proof__btn svg { transition: none; } }

/* ===== about-01 · .about-split ===== */
/* ==========================================================================
   About 01 · Split Intro — scoped under .about-split
   ========================================================================== */

.about-split {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --radius: 26px;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

/* Container fallback (works with or without Bootstrap) */
.about-split .container { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: 1rem; box-sizing: border-box; }

.about-split__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* Media */
.about-split__media { position: relative; }
.about-split__photo {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(255,255,255,.35), transparent 55%),
    linear-gradient(150deg, #2c4d34, #1f3a28 60%, #4a5b34);
  box-shadow: 0 34px 70px -34px rgba(31, 58, 40, .5);
  overflow: hidden;
}
.about-split__photo svg {
  width: 40%; height: 40%;
  fill: none; stroke: rgba(217, 201, 166, .5);
  stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;
}
.about-split__badge {
  position: absolute;
  right: -1rem; bottom: 1.6rem;
  display: flex; align-items: center; gap: .7rem;
  padding: 1.1rem 1.4rem;
  background: var(--card-bg, var(--surface));
  border-radius: 18px;
  box-shadow: 0 22px 45px -20px rgba(31, 58, 40, .4);
}
.about-split__badge strong {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 2rem; line-height: 1; color: var(--accent);
}
.about-split__badge span { font-size: .82rem; line-height: 1.25; color: var(--muted); }

/* Copy */
.about-split__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1.2rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.about-split__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.about-split__title {
  margin: 0 0 1.2rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary));
}
.about-split__title em { font-style: normal; color: var(--accent); }
.about-split__text { margin: 0 0 1.6rem; font-size: 1.02rem; line-height: 1.75; color: var(--muted); }

.about-split__points {
  list-style: none; margin: 0 0 2rem; padding: 0;
  display: grid; gap: .7rem;
}
.about-split__points li {
  position: relative; padding-left: 1.9rem;
  font-size: .98rem; color: var(--text);
}
.about-split__points li::before {
  content: ""; position: absolute; left: 0; top: .1rem;
  width: 20px; height: 20px; border-radius: 50%;
  background: #e4ede2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f5a3a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.about-split__btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .95rem 1.7rem; border-radius: 100px;
  background: var(--btn-bg, var(--primary)); color: #fff; font-weight: 600; text-decoration: none;
  box-shadow: 0 16px 34px -14px rgba(31, 58, 40, .55);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.about-split__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition); }
.about-split__btn:hover { background: #285035; transform: translateY(-3px); box-shadow: 0 22px 44px -14px rgba(31,58,40,.6); }
.about-split__btn:hover svg { transform: translateX(4px); }

@media (max-width: 767.98px) {
  .about-split__inner { grid-template-columns: 1fr; }
  .about-split__badge { right: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .about-split__btn, .about-split__btn svg { transition: none; } }

/* ===== about-02 · .about-stats ===== */
/* ==========================================================================
   About 02 · Intro + Stats — scoped under .about-stats
   ========================================================================== */

.about-stats {
  --primary: #1f3a28;
  --accent: #9a3324;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --radius: 22px;
  --shadow: 0 26px 60px -34px rgba(31, 58, 40, .3);
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}
.about-stats .container { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: 1rem; box-sizing: border-box; }

.about-stats__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.about-stats__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1.2rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.about-stats__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.about-stats__title {
  margin: 0 0 1.1rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  line-height: 1.14; letter-spacing: -.01em; color: var(--text, var(--primary));
}
.about-stats__text { margin: 0 0 1.6rem; font-size: 1.02rem; line-height: 1.75; color: var(--muted); }
.about-stats__link {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--primary); font-weight: 600; text-decoration: none;
}
.about-stats__link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition); }
.about-stats__link:hover svg { transform: translateX(5px); }

.about-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}
.stat-box {
  background: var(--card-bg, var(--surface));
  border-radius: var(--radius);
  padding: 1.8rem 1.6rem;
  box-shadow: var(--shadow);
  border: 1px solid rgba(31, 58, 40, .04);
  transition: transform var(--transition), box-shadow var(--transition);
}
.stat-box:hover { transform: translateY(-5px); box-shadow: 0 34px 70px -30px rgba(31,58,40,.4); }
.stat-box strong {
  display: block;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: clamp(2rem, 3.4vw, 2.6rem); line-height: 1; color: var(--accent);
}
.stat-box span { display: block; margin-top: .5rem; font-size: .92rem; color: var(--muted); }

@media (max-width: 767.98px) { .about-stats__inner { grid-template-columns: 1fr; } }
@media (max-width: 359.98px) { .about-stats__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .stat-box, .about-stats__link svg { transition: none; } }

/* ===== about-03 · .about-mission ===== */
/* ==========================================================================
   About 03 · Mission Statement — scoped under .about-mission
   ========================================================================== */

.about-mission {
  --primary: #1f3a28;
  --accent: #9a3324;
  --bg: #f5f0e6;
  --text: #2a2a24;
  --muted: #6e6e62;

  background:
    radial-gradient(60% 50% at 50% 0%, rgba(31, 58, 40, .06), transparent 70%),
    var(--bg);
  padding: clamp(4rem, 9vw, 8rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
  text-align: center;
}
.about-mission .container { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: 1rem; box-sizing: border-box; }
.about-mission__inner { max-width: 52rem; margin: 0 auto; }

.about-mission__eyebrow {
  display: inline-flex; align-items: center; gap: .8rem;
  margin: 0 0 1.6rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.about-mission__eyebrow span { width: 26px; height: 2px; border-radius: 2px; background: currentColor; opacity: .55; }

.about-mission__title {
  margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  line-height: 1.28; letter-spacing: -.005em; color: var(--text, var(--primary));
}
.about-mission__title em { font-style: normal; color: var(--accent); }

.about-mission__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding-top: 2.4rem;
  border-top: 1px solid rgba(31, 58, 40, .12);
  text-align: left;
}
.pillar__no {
  display: inline-block;
  margin-bottom: .6rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600; font-size: .95rem;
  color: var(--accent);
  letter-spacing: .02em;
}
.pillar__text { margin: 0; font-size: .96rem; line-height: 1.65; color: var(--muted); }

@media (max-width: 767.98px) { .about-mission__pillars { grid-template-columns: 1fr; gap: 1.6rem; } }

/* ===== about-04 · .about-mosaic ===== */
/* ==========================================================================
   About 04 · Mosaic Intro — scoped under .about-mosaic
   ========================================================================== */

.about-mosaic {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --text: #2a2a24;
  --muted: #6e6e62;
  --radius: 22px;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}
.about-mosaic .container { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: 1rem; box-sizing: border-box; }

.about-mosaic__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.about-mosaic__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1.2rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.about-mosaic__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.about-mosaic__title {
  margin: 0 0 1.1rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  line-height: 1.14; letter-spacing: -.01em; color: var(--text, var(--primary));
}
.about-mosaic__title em { font-style: normal; color: var(--accent); }
.about-mosaic__text { margin: 0 0 1.5rem; font-size: 1.02rem; line-height: 1.75; color: var(--muted); }

.about-mosaic__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.about-mosaic__list li { position: relative; padding-left: 1.9rem; font-size: .98rem; color: var(--text); }
.about-mosaic__list li::before {
  content: ""; position: absolute; left: 0; top: .1rem;
  width: 20px; height: 20px; border-radius: 50%;
  background: #e4ede2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f5a3a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* Mosaic panels */
.about-mosaic__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 130px 130px;
  gap: 1rem;
}
.mosaic-panel { border-radius: var(--radius); box-shadow: 0 26px 55px -30px rgba(31,58,40,.4); transition: transform var(--transition); }
.mosaic-panel:hover { transform: translateY(-5px); }
.mosaic-panel--a { grid-row: span 2; background: linear-gradient(150deg, #2c4d34, #1f3a28); }
.mosaic-panel--b { background: linear-gradient(150deg, #cdb489, #b8945f); }
.mosaic-panel--c {
  display: grid; place-items: center;
  background: linear-gradient(150deg, #e7d9c2, #d8c39f);
}
.mosaic-panel--c svg { width: 40px; height: 40px; fill: none; stroke: #7a5a2c; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 767.98px) {
  .about-mosaic__inner { grid-template-columns: 1fr; }
  .about-mosaic__media { grid-template-rows: 120px 120px; }
}
@media (prefers-reduced-motion: reduce) { .mosaic-panel { transition: none; } }

/* ===== about-05 · .about-approach ===== */
/* ==========================================================================
   About 05 · Our Approach — scoped under .about-approach
   ========================================================================== */

.about-approach {
  --primary: #1f3a28;
  --accent: #9a3324;
  --bg: #f5f0e6;
  --text: #2a2a24;
  --muted: #6e6e62;
  --radius: 26px;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}
.about-approach .container { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: 1rem; box-sizing: border-box; }

.about-approach__inner {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.about-approach__photo {
  display: grid; place-items: center;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(255,255,255,.3), transparent 55%),
    linear-gradient(150deg, #b8945f, #a17a44 60%, #6f5326);
  box-shadow: 0 34px 70px -34px rgba(70, 50, 20, .5);
}
.about-approach__photo svg { width: 42%; height: 42%; fill: none; stroke: rgba(255,246,224,.55); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }

.about-approach__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.about-approach__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.about-approach__title {
  margin: 0 0 1.8rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  line-height: 1.14; letter-spacing: -.01em; color: var(--text, var(--primary));
}

.about-approach__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
.about-approach__list li { display: flex; gap: 1.2rem; align-items: flex-start; }
.approach-no {
  flex: none;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: 1.15rem;
  width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--icon-bg, #fff); color: var(--accent);
  box-shadow: 0 14px 30px -16px rgba(31,58,40,.35);
}
.about-approach__list h3 {
  margin: .3rem 0 .35rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600; font-size: 1.12rem; color: var(--text, var(--primary));
}
.about-approach__list p { margin: 0; font-size: .96rem; line-height: 1.6; color: var(--muted); }

@media (max-width: 767.98px) {
  .about-approach__inner { grid-template-columns: 1fr; }
  .about-approach__media { order: 2; }
}

/* ===== about-06 · .about-story ===== */
/* ==========================================================================
   About 06 · Story Band — scoped under .about-story
   ========================================================================== */

.about-story {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --radius: 30px;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}
.about-story .container { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: 1rem; box-sizing: border-box; }

.about-story__card {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  background: var(--card-bg, var(--surface));
  border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 3.5rem);
  box-shadow: 0 40px 90px -44px rgba(31, 58, 40, .4);
  border: 1px solid rgba(31, 58, 40, .04);
}

.about-story__year {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  border-radius: 22px;
  background: linear-gradient(155deg, #1f3a28, #2c4d34);
  color: #fff;
}
.about-story__year span {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1;
  color: var(--accent, var(--gold));
}
.about-story__year small {
  margin-top: .5rem;
  font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(243, 239, 230, .75);
}

.about-story__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.about-story__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.about-story__title {
  margin: 0 0 1rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.14; letter-spacing: -.01em; color: var(--text, var(--primary));
}
.about-story__text { margin: 0 0 1.6rem; font-size: 1.02rem; line-height: 1.75; color: var(--muted); }

.about-story__btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .9rem 1.6rem; border-radius: 100px;
  background: transparent; color: var(--primary);
  border: 1.5px solid rgba(31, 58, 40, .22);
  font-weight: 600; text-decoration: none;
  transition: background var(--transition), transform var(--transition);
}
.about-story__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition); }
.about-story__btn:hover { background: rgba(31,58,40,.05); transform: translateY(-3px); }
.about-story__btn:hover svg { transform: translateX(4px); }

@media (max-width: 767.98px) {
  .about-story__card { grid-template-columns: 1fr; }
  .about-story__year { flex-direction: row; align-items: baseline; gap: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .about-story__btn, .about-story__btn svg { transition: none; } }

/* ===== features-01 · .feature-split ===== */
/* ==========================================================================
   Features 01 · Split + Icon Cards — scoped under .feature-split
   ========================================================================== */

.feature-split {
  --primary: #1f3a28;
  --accent: #9a3324;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --radius: 22px;
  --shadow: 0 26px 60px -34px rgba(31, 58, 40, .3);
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.feature-split__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1.3rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text, var(--primary));
}
.feature-split__eyebrow span {
  width: 30px; height: 2px;
  border-radius: 2px;
  background: var(--accent, var(--primary));
}

.feature-split__title {
  margin: 0 0 1.3rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--text, var(--primary));
}
.feature-split__title em { font-style: normal; color: var(--accent); }

.feature-split__lead {
  max-width: 30rem;
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--muted);
}

/* Grid */
.feature-split__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
}

/* Card */
.feature-card {
  background: var(--card-bg, var(--surface));
  color: var(--card-ink, inherit);
  border-radius: var(--radius);
  padding: 1.9rem 1.7rem;
  box-shadow: var(--shadow);
  border: 1px solid rgba(31, 58, 40, .04);
  transition: transform var(--transition), box-shadow var(--transition);
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 70px -30px rgba(31, 58, 40, .4);
}

.feature-card__icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-bottom: 1.3rem;
  border-radius: 15px;
  transition: transform var(--transition);
}
.feature-card:hover .feature-card__icon { transform: scale(1.08) rotate(-3deg); }
.feature-card__icon svg {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.feature-card__icon--rose  { background: var(--icon-bg, #f2e2df); color: var(--icon-color, #9a3324); }
.feature-card__icon--green { background: var(--icon-bg, #e4ede2); color: var(--icon-color, #2f5a3a); }
.feature-card__icon--sand  { background: var(--icon-bg, #efe6d5); color: var(--icon-color, #a07a3c); }

.feature-card__title {
  margin: 0 0 .5rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.18rem;
  color: var(--text, var(--primary));
}
.feature-card__text {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--muted);
}

@media (max-width: 575.98px) {
  .feature-split__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .feature-card, .feature-card__icon { transition: none; }
}

/* ===== features-02 · .feature-trio ===== */
/* ==========================================================================
   Features 02 · Trio Columns — scoped under .feature-trio
   ========================================================================== */

.feature-trio {
  --primary: #1f3a28;
  --accent: #9a3324;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --muted: #6e6e62;
  --radius: 22px;
  --shadow: 0 26px 60px -34px rgba(31, 58, 40, .3);
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text, #2a2a24);
}

.feature-trio__head { max-width: 40rem; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); text-align: center; }
.feature-trio__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.feature-trio__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.feature-trio__title {
  margin: 0 0 1rem;
  font-family: "Poppins", system-ui, sans-serif; font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; letter-spacing: -.01em;
  color: var(--text, var(--primary));
}
.feature-trio__title em { font-style: normal; color: var(--accent); }
.feature-trio__lead { margin: 0; font-size: 1.05rem; line-height: 1.7; color: var(--muted); }

.feature-trio__grid {
  display: grid;
  grid-template-columns: repeat(var(--ftc, 3), 1fr);
  gap: 1.6rem;
}

.ftrio-card {
  background: var(--card-bg, var(--surface));
  color: var(--card-ink, inherit);
  border-radius: var(--radius);
  padding: 2.2rem 2rem;
  box-shadow: var(--shadow);
  border: 1px solid rgba(31, 58, 40, .04);
  transition: transform var(--transition), box-shadow var(--transition);
}
.ftrio-card:hover { transform: translateY(-6px); box-shadow: 0 34px 70px -30px rgba(31, 58, 40, .4); }

.ftrio-card__icon {
  display: grid; place-items: center;
  width: 56px; height: 56px; margin-bottom: 1.4rem;
  border-radius: 16px;
  transition: transform var(--transition);
}
.ftrio-card:hover .ftrio-card__icon { transform: scale(1.08) rotate(-3deg); }
.ftrio-card__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ftrio-card__icon--green { background: var(--icon-bg, #e4ede2); color: var(--icon-color, #2f5a3a); }
.ftrio-card__icon--rose  { background: var(--icon-bg, #f2e2df); color: var(--icon-color, #9a3324); }
.ftrio-card__icon--sand  { background: var(--icon-bg, #efe6d5); color: var(--icon-color, #a07a3c); }

.ftrio-card__title {
  margin: 0 0 .6rem;
  font-family: "Poppins", system-ui, sans-serif; font-weight: 600;
  font-size: 1.22rem; color: var(--text, var(--primary));
}
.ftrio-card__text { margin: 0 0 1.3rem; font-size: .97rem; line-height: 1.65; color: var(--muted); }

.ftrio-card__link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; font-size: .92rem; text-decoration: none; color: var(--primary);
}
.ftrio-card__link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition); }
.ftrio-card__link:hover svg { transform: translateX(4px); }

@media (max-width: 991.98px) { .feature-trio__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .feature-trio__grid { grid-template-columns: 1fr; max-width: 30rem; margin: 0 auto; } }
@media (prefers-reduced-motion: reduce) { .ftrio-card, .ftrio-card__icon, .ftrio-card__link svg { transition: none; } }

/* ===== features-03 · .feature-alt ===== */
/* ==========================================================================
   Features 03 · Alternating Rows — scoped under .feature-alt
   ========================================================================== */

.feature-alt {
  --primary: #1f3a28;
  --accent: #9a3324;
  --bg: #f5f0e6;
  --muted: #6e6e62;
  --radius: 28px;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text, #2a2a24);
}

.feature-alt .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;
}

.feature-alt__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.feature-alt__row + .feature-alt__row { margin-top: clamp(2.5rem, 5vw, 4rem); }
.feature-alt__row--reverse .feature-alt__media { order: 2; }

/* Media panel (CSS-built, swap in your own image) */
.feature-alt__media { position: relative; }
.feature-alt__panel {
  display: grid; place-items: center;
  aspect-ratio: 16 / 11;
  border-radius: var(--radius);
  box-shadow: 0 30px 70px -34px rgba(31, 58, 40, .4);
}
.feature-alt__panel svg { width: 92px; height: 92px; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.feature-alt__panel--green { background: linear-gradient(150deg, #e9f0e4, #d6e4cf); }
.feature-alt__panel--green svg { stroke: #2f5a3a; }
.feature-alt__panel--sand  { background: linear-gradient(150deg, #f1e7d4, #e6d4b4); }
.feature-alt__panel--sand svg { stroke: #a07a3c; }

.feature-alt__chip {
  position: absolute; left: -1rem; bottom: 1.4rem;
  display: inline-flex; align-items: baseline; gap: .4rem;
  padding: .75rem 1.1rem;
  background: var(--card-bg, #fff); border-radius: 14px;
  box-shadow: 0 18px 40px -18px rgba(31, 58, 40, .4);
  font-size: .85rem; color: var(--muted);
}
.feature-alt__chip strong { font-family: "Poppins", system-ui, sans-serif; font-size: 1.15rem; color: var(--card-ink, var(--primary)); }

/* Body */
.feature-alt__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1.1rem;
  font-size: .76rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.feature-alt__eyebrow span { width: 28px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.feature-alt__title {
  margin: 0 0 1rem;
  font-family: "Poppins", system-ui, sans-serif; font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.15; color: var(--text, var(--primary));
}
.feature-alt__text { margin: 0 0 1.4rem; font-size: 1.02rem; line-height: 1.75; color: var(--muted); }

.feature-alt__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.feature-alt__list li {
  position: relative; padding-left: 2rem;
  font-size: .98rem; color: var(--text, #2a2a24);
}
.feature-alt__list li::before {
  content: ""; position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #e4ede2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f5a3a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
}

@media (max-width: 767.98px) {
  .feature-alt__row { grid-template-columns: 1fr; gap: 1.8rem; }
  .feature-alt__row--reverse .feature-alt__media { order: 0; }
  .feature-alt__chip { left: 1rem; }
}

/* ===== features-04 · .feature-media ===== */
/* ==========================================================================
   Features 04 · Media List — scoped under .feature-media
   ========================================================================== */

.feature-media {
  --primary: #1f3a28;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --radius: 20px;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.feature-media__head { margin-bottom: clamp(2.2rem, 5vw, 3.2rem); max-width: 40rem; }
.feature-media__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.feature-media__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.feature-media__title {
  margin: 0;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.8rem, 3.6vw, 2.7rem);
  line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary));
}

.feature-media__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem 2rem;
}

.media-item {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 1.6rem;
  border-radius: var(--radius);
  background: transparent;
  border: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.media-item:hover {
  background: var(--card-bg, var(--surface));
  border-color: rgba(31, 58, 40, .06);
  transform: translateX(4px);
  box-shadow: 0 24px 50px -34px rgba(31, 58, 40, .35);
}

.media-item__icon {
  flex: none;
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border-radius: 15px;
  background: var(--icon-bg, #e4ede2);
  color: var(--icon-color, #2f5a3a);
  transition: transform var(--transition);
}
.media-item:hover .media-item__icon { transform: scale(1.06); }
.media-item__icon svg {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

.media-item__title {
  margin: .15rem 0 .4rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600; font-size: 1.12rem; color: var(--text, var(--primary));
}
.media-item__text {
  margin: 0; font-size: .95rem; line-height: 1.6; color: var(--muted);
}

@media (max-width: 767.98px) {
  .feature-media__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .media-item, .media-item__icon { transition: none; }
}

/* ===== features-05 · .feature-bento ===== */
/* ==========================================================================
   Features 05 · Bento Grid — scoped under .feature-bento
   ========================================================================== */

.feature-bento {
  --primary: #1f3a28;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --radius: 24px;
  --shadow: 0 26px 60px -34px rgba(31, 58, 40, .3);
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.feature-bento__head { text-align: center; margin-bottom: clamp(2.2rem, 5vw, 3.2rem); }
.feature-bento__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.feature-bento__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.feature-bento__title {
  margin: 0;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem);
  letter-spacing: -.01em; color: var(--text, var(--primary));
}

/* Grid: 3 columns x 2 rows bento */
.feature-bento__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 1.4rem;
}
.bento-tile--lg   { grid-row: span 2; }
.bento-tile--wide { grid-column: span 2; }

.bento-tile {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: 1.9rem;
  border-radius: var(--radius);
  background: var(--card-bg, var(--surface));
  box-shadow: var(--shadow);
  border: 1px solid rgba(31, 58, 40, .04);
  transition: transform var(--transition), box-shadow var(--transition);
}
.bento-tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 70px -30px rgba(31, 58, 40, .4);
}
.bento-tile--wide { flex-direction: row; align-items: center; gap: 1.3rem; }

.bento-tile__icon {
  display: grid; place-items: center;
  width: 52px; height: 52px; flex: none;
  border-radius: 15px;
  background: var(--icon-bg, #e4ede2); color: var(--icon-color, #2f5a3a);
  transition: transform var(--transition);
}
.bento-tile:hover .bento-tile__icon { transform: scale(1.08) rotate(-3deg); }
.bento-tile__icon svg {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

.bento-tile__title {
  margin: 0;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600; font-size: 1.18rem; color: var(--text, var(--primary));
}
.bento-tile__text { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--muted); }

.bento-tile__stat {
  margin-top: auto;
  padding-top: 1rem;
  font-size: .9rem; color: var(--muted);
}
.bento-tile__stat strong {
  display: block;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 1.7rem; color: var(--text, var(--primary)); line-height: 1.1;
}

/* Color variants */
.bento-tile--green .bento-tile__icon { background: var(--icon-bg, #e4ede2); color: var(--icon-color, #2f5a3a); }
.bento-tile--rose  .bento-tile__icon { background: var(--icon-bg, #f2e2df); color: var(--icon-color, #9a3324); }

.bento-tile--dark {
  background: linear-gradient(150deg, #1f3a28, #2c4d34);
  border: none;
}
.bento-tile--dark .bento-tile__title { color: #fff; }
.bento-tile--dark .bento-tile__text { color: rgba(243, 239, 230, .82); }
.bento-tile--dark .bento-tile__icon { background: rgba(255, 255, 255, .12); color: #d9c9a6; }
.bento-tile--dark .bento-tile__stat { color: rgba(243, 239, 230, .7); border-top: 1px solid rgba(255, 255, 255, .14); }
.bento-tile--dark .bento-tile__stat strong { color: var(--gold); }

@media (max-width: 767.98px) {
  .feature-bento__grid { grid-template-columns: 1fr; }
  .bento-tile--lg { grid-row: auto; }
  .bento-tile--wide { grid-column: auto; flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .bento-tile, .bento-tile__icon { transition: none; }
}

/* ===== features-06 · .feature-tiles ===== */
/* ==========================================================================
   Features 06 · Accent Tiles — scoped under .feature-tiles
   ========================================================================== */

.feature-tiles {
  --primary: #1f3a28;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --radius: 22px;
  --shadow: 0 26px 60px -34px rgba(31, 58, 40, .3);
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.feature-tiles__head { text-align: center; margin-bottom: clamp(2.2rem, 5vw, 3.2rem); }
.feature-tiles__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.feature-tiles__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.feature-tiles__title {
  margin: 0 auto; max-width: 24ch;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem);
  line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary));
}

.feature-tiles__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
}

.tile {
  text-align: center;
  padding: 2.2rem 1.6rem;
  border-radius: var(--radius);
  background: var(--card-bg, var(--surface));
  box-shadow: var(--shadow);
  border: 1px solid rgba(31, 58, 40, .04);
  transition: transform var(--transition), box-shadow var(--transition);
}
.tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 70px -30px rgba(31, 58, 40, .4);
}

.tile__icon {
  display: grid; place-items: center;
  width: 58px; height: 58px;
  margin: 0 auto 1.3rem;
  border-radius: 16px;
  background: var(--icon-bg, #e4ede2); color: var(--icon-color, #2f5a3a);
  transition: transform var(--transition);
}
.tile:hover .tile__icon { transform: scale(1.08) rotate(-3deg); }
.tile__icon svg {
  width: 26px; height: 26px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.tile__title {
  margin: 0 0 .5rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600; font-size: 1.15rem; color: var(--text, var(--primary));
}
.tile__text { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--muted); }

/* Accent (filled) tile */
.tile--accent {
  background: linear-gradient(155deg, #1f3a28, #2c4d34);
  border: none;
  box-shadow: 0 30px 60px -26px rgba(31, 58, 40, .55);
}
.tile--accent .tile__icon { background: rgba(255, 255, 255, .12); color: var(--gold); }
.tile--accent .tile__title { color: #fff; }
.tile--accent .tile__text { color: rgba(243, 239, 230, .82); }

@media (max-width: 991.98px) { .feature-tiles__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479.98px) { .feature-tiles__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .tile, .tile__icon { transition: none; }
}

/* ===== features-07 · .feature-index ===== */
/* ==========================================================================
   Features 07 · Indexed Grid — scoped under .feature-index
   ========================================================================== */

.feature-index {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.feature-index__head { text-align: center; margin-bottom: clamp(2.2rem, 5vw, 3.4rem); }
.feature-index__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.feature-index__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.feature-index__title { margin: 0 auto; max-width: 20ch; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem); line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary)); }
.feature-index__title em { font-style: normal; color: var(--accent); }

.feature-index__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }

.fidx {
  position: relative; overflow: hidden;
  padding: 1.9rem 1.7rem;
  background: var(--card-bg, var(--surface));
  border: 1px solid rgba(31, 58, 40, .06);
  border-radius: 20px;
  box-shadow: 0 22px 50px -34px rgba(31, 58, 40, .3);
  transition: transform var(--transition), box-shadow var(--transition);
}
.fidx:hover { transform: translateY(-6px); box-shadow: 0 38px 74px -34px rgba(31, 58, 40, .44); }

.fidx__num {
  position: absolute; top: -.6rem; right: .4rem;
  font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 4.5rem;
  line-height: 1; color: rgba(31, 58, 40, .05); pointer-events: none;
}
.fidx__icon {
  position: relative;
  display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 1.1rem;
  border-radius: 14px; background: var(--icon-bg, #e4ede2); color: var(--icon-color, #2f5a3a);
  transition: transform var(--transition), background var(--transition), color var(--transition);
}
.fidx:hover .fidx__icon { transform: scale(1.08) rotate(-4deg); background: var(--primary); color: var(--gold); }
.fidx__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fidx__title { position: relative; margin: 0 0 .45rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.14rem; color: var(--text, var(--primary)); }
.fidx__text { position: relative; margin: 0; font-size: .93rem; line-height: 1.55; color: var(--muted); }

@media (max-width: 861.98px) { .feature-index__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479.98px) { .feature-index__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .fidx, .fidx__icon { transition: none; } }

/* ===== features-08 · .feature-showcase ===== */
/* ==========================================================================
   Features 08 · Feature Tabs — scoped under .feature-showcase
   ========================================================================== */

.feature-showcase {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.feature-showcase__head { text-align: center; margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }
.feature-showcase__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.feature-showcase__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.feature-showcase__title { margin: 0 auto; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem); line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary)); }
.feature-showcase__title em { font-style: normal; color: var(--accent); }

/* Tabs -------------------------------------------------------------------- */
.feature-showcase__tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
  margin-bottom: clamp(1.6rem, 3vw, 2.2rem);
  padding: .4rem; background: var(--card-bg, var(--surface)); border: 1px solid var(--line); border-radius: 999px;
  width: fit-content; margin-inline: auto; box-shadow: 0 14px 34px -22px rgba(31, 58, 40, .5);
}
.fs-tab {
  padding: .65rem 1.35rem; border: none; border-radius: 999px;
  background: transparent; color: var(--muted);
  font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.fs-tab:hover { color: var(--primary); }
.fs-tab.is-active { background: var(--btn-bg, var(--primary)); color: #f3efe6; }
.fs-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Panels ------------------------------------------------------------------ */
.fs-panel {
  display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: clamp(1.6rem, 4vw, 3rem);
  background: var(--card-bg, var(--surface)); border: 1px solid rgba(31, 58, 40, .06);
  border-radius: 26px; overflow: hidden;
  box-shadow: 0 30px 70px -40px rgba(31, 58, 40, .4);
}
.fs-panel[hidden] { display: none; }
.fs-panel.is-active { animation: fs-in .4s cubic-bezier(.22, 1, .36, 1); }
@keyframes fs-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.fs-panel__body { padding: clamp(1.8rem, 3.5vw, 2.8rem); }
.fs-panel__title { margin: 0 0 .7rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: var(--text, var(--primary)); }
.fs-panel__text { margin: 0 0 1.3rem; font-size: .98rem; line-height: 1.6; color: var(--muted); }
.fs-panel__checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.fs-panel__checks li { position: relative; padding-left: 1.9rem; font-size: .94rem; color: var(--text); }
.fs-panel__checks li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%;
  background: #e4ede2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f5a3a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.fs-panel__media { position: relative; align-self: stretch; min-height: 260px; background: #e4ede2; }
.fs-panel__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .fs-panel { grid-template-columns: 1fr; }
  .fs-panel__media { order: -1; min-height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .fs-tab { transition: none; }
  .fs-panel.is-active { animation: none; }
}

/* ===== services-01 · .service-cards ===== */
/* ==========================================================================
   Services 01 · Image Service Cards — scoped under .service-cards
   ========================================================================== */

.service-cards {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --radius: 24px;
  --shadow: 0 26px 60px -34px rgba(31, 58, 40, .3);
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

/* Header ------------------------------------------------------------------ */
.service-cards__head { max-width: 46rem; margin: 0 auto clamp(2.4rem, 5vw, 3.6rem); text-align: center; }
.service-cards__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.service-cards__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.service-cards__title {
  margin: 0 auto; max-width: 20ch;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem);
  line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary));
}
.service-cards__title em { font-style: normal; color: var(--accent); }
.service-cards__lead { margin: 1.1rem auto 0; max-width: 44ch; font-size: 1rem; line-height: 1.65; color: var(--muted); }

/* Grid -------------------------------------------------------------------- */
.service-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
}

/* Card -------------------------------------------------------------------- */
.svc-card {
  display: flex; flex-direction: column;
  background: var(--card-bg, var(--surface));
  border-radius: var(--radius);
  border: 1px solid rgba(31, 58, 40, .05);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.svc-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 40px 80px -36px rgba(31, 58, 40, .48);
}

.svc-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--tint, #e4ede2);
  overflow: hidden;
}
.svc-card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.svc-card:hover .svc-card__media img { transform: scale(1.07); }

.svc-card__chip {
  position: absolute; left: 1.3rem; bottom: -1.4rem;
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--icon-bg, var(--surface)); color: var(--icon-color, var(--primary));
  box-shadow: 0 14px 30px -14px rgba(31, 58, 40, .5);
  transition: transform var(--transition), background var(--transition), color var(--transition);
}
.svc-card:hover .svc-card__chip {
  transform: translateY(-4px) rotate(-4deg);
  background: var(--primary); color: var(--gold);
}
.svc-card__chip svg {
  width: 26px; height: 26px;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

.svc-card__body { padding: 2.4rem 1.7rem 1.9rem; display: flex; flex-direction: column; flex: 1; }
.svc-card__title {
  margin: 0 0 .55rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600; font-size: 1.24rem; color: var(--text, var(--primary));
}
.svc-card__text { margin: 0 0 1.4rem; font-size: .95rem; line-height: 1.6; color: var(--muted); }

.svc-card__link {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: .9rem; letter-spacing: .01em;
  color: color-mix(in srgb, var(--accent) 74%, #000); text-decoration: none;
  transition: gap var(--transition), color var(--transition);
}
.svc-card__link svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--transition);
}
.svc-card__link:hover { gap: .85rem; color: var(--primary); }
.svc-card__link:hover svg { transform: translateX(3px); }
.svc-card__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 991.98px) { .service-cards__grid { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) {
  .svc-card, .svc-card__media img, .svc-card__chip, .svc-card__link, .svc-card__link svg { transition: none; }
}

/* ===== services-02 · .service-split ===== */
/* ==========================================================================
   Services 02 · Split & Numbered List — scoped under .service-split
   ========================================================================== */

.service-split {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --radius: 20px;
  --shadow: 0 26px 60px -34px rgba(31, 58, 40, .3);
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.service-split__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* Intro (left, sticky) ---------------------------------------------------- */
.service-split__intro { position: sticky; top: 2rem; }
.service-split__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1.1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.service-split__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.service-split__title {
  margin: 0 0 1.1rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.85rem, 3.6vw, 2.7rem);
  line-height: 1.14; letter-spacing: -.01em; color: var(--text, var(--primary));
}
.service-split__title em { font-style: normal; color: var(--accent); }
.service-split__text { margin: 0 0 1.9rem; font-size: 1rem; line-height: 1.68; color: var(--muted); max-width: 40ch; }

.service-split__cta {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  background: var(--btn-bg, var(--primary)); color: #f3efe6;
  font-weight: 600; font-size: .93rem; text-decoration: none;
  box-shadow: 0 18px 34px -18px rgba(31, 58, 40, .7);
  transition: transform var(--transition), background var(--transition), gap var(--transition);
}
.service-split__cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition); }
.service-split__cta:hover { transform: translateY(-3px); background: #26492f; gap: .85rem; }
.service-split__cta:hover svg { transform: translateX(3px); }
.service-split__cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.service-split__note { margin: 1.4rem 0 0; font-size: .82rem; color: var(--muted); letter-spacing: .01em; }

/* List (right) ------------------------------------------------------------ */
.service-split__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .9rem;
}
.svc-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 1.2rem;
  padding: 1.5rem 1.6rem;
  background: var(--card-bg, var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.svc-row:hover {
  transform: translateX(6px);
  border-color: transparent;
  box-shadow: var(--shadow);
}

.svc-row__num {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: 1rem; color: var(--accent, var(--gold));
  min-width: 1.8ch;
}
.svc-row__icon {
  display: grid; place-items: center;
  width: 50px; height: 50px;
  border-radius: 14px;
  background: var(--icon-bg, #e4ede2); color: var(--icon-color, #2f5a3a);
  transition: transform var(--transition), background var(--transition), color var(--transition);
}
.svc-row:hover .svc-row__icon { transform: rotate(-5deg) scale(1.06); background: var(--primary); color: var(--gold); }
.svc-row__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.svc-row__title { margin: 0 0 .25rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.1rem; color: var(--text, var(--primary)); }
.svc-row__text { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--muted); }

.svc-row__arrow {
  width: 22px; height: 22px;
  fill: none; stroke: var(--muted);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  opacity: .4;
  transition: transform var(--transition), opacity var(--transition), stroke var(--transition);
}
.svc-row:hover .svc-row__arrow { opacity: 1; transform: translateX(4px); stroke: var(--accent); }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 861.98px) {
  .service-split__grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .service-split__intro { position: static; }
}
@media (max-width: 479.98px) {
  .svc-row { padding: 1.2rem 1.15rem; gap: .9rem; }
  .svc-row__arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-row, .svc-row__icon, .svc-row__arrow, .service-split__cta, .service-split__cta svg { transition: none; }
}

/* ===== services-03 · .service-bento ===== */
/* ==========================================================================
   Services 03 · Bento Service Grid — scoped under .service-bento
   ========================================================================== */

.service-bento {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --radius: 24px;
  --shadow: 0 26px 60px -34px rgba(31, 58, 40, .3);
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

/* Header ------------------------------------------------------------------ */
.service-bento__head {
  display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.service-bento__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.service-bento__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.service-bento__title {
  margin: 0; max-width: 18ch;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem);
  line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary));
}
.service-bento__title em { font-style: normal; color: var(--accent); }
.service-bento__lead { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--muted); }

/* Grid -------------------------------------------------------------------- */
.service-bento__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 1.4rem;
}

/* Base card --------------------------------------------------------------- */
.bento {
  position: relative;
  display: flex; flex-direction: column;
  padding: 2rem 1.7rem;
  background: var(--card-bg, var(--surface));
  border: 1px solid rgba(31, 58, 40, .05);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.bento:hover { transform: translateY(-6px); box-shadow: 0 38px 74px -34px rgba(31, 58, 40, .46); }

.bento__icon {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  margin-bottom: 1.1rem;
  border-radius: 15px;
  background: var(--icon-bg, #e4ede2); color: var(--icon-color, #2f5a3a);
  transition: transform var(--transition);
}
.bento:hover .bento__icon { transform: scale(1.08) rotate(-4deg); }
.bento__icon--rose { background: var(--icon-bg, #f2e2df); color: var(--icon-color, var(--accent)); }
.bento__icon--sand { background: var(--icon-bg, #efe6d5); color: var(--icon-color, #8a6a2f); }
.bento__icon--green { background: var(--icon-bg, #e4ede2); color: var(--icon-color, #2f5a3a); }
.bento__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.bento__title { margin: 0 0 .45rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.14rem; color: var(--text, var(--primary)); }
.bento__text { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--muted); }

/* Feature (large, image) -------------------------------------------------- */
.bento--feature {
  grid-column: span 2;
  grid-row: span 2;
  justify-content: flex-end;
  padding: 2.4rem;
  border: none;
  color: #f4efe5;
  min-height: 340px;
}
.bento__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22, 1, .36, 1); }
.bento--feature:hover .bento__bg { transform: scale(1.06); }
.bento__overlay { position: absolute; inset: 0; background: linear-gradient(200deg, rgba(31, 58, 40, .35) 0%, rgba(20, 36, 25, .82) 68%, rgba(16, 30, 21, .94) 100%); }
.bento__content { position: relative; }
.bento--feature .bento__icon { background: rgba(255, 255, 255, .14); color: var(--gold); backdrop-filter: blur(2px); }
.bento--feature .bento__title { color: #fff; font-size: clamp(1.4rem, 2.6vw, 1.9rem); max-width: 16ch; }
.bento--feature .bento__text { color: rgba(244, 239, 229, .84); max-width: 42ch; font-size: .97rem; line-height: 1.62; }

.bento__link {
  margin-top: 1.4rem;
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: .93rem; color: var(--gold); text-decoration: none;
  transition: gap var(--transition), color var(--transition);
}
.bento__link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition); }
.bento__link:hover { gap: .85rem; color: #f4efe5; }
.bento__link:hover svg { transform: translateX(3px); }
.bento__link:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .service-bento__head { grid-template-columns: 1fr; }
  .service-bento__grid { grid-template-columns: repeat(2, 1fr); }
  .bento--feature { grid-column: span 2; grid-row: span 1; min-height: 300px; }
}
@media (max-width: 559.98px) {
  .service-bento__grid { grid-template-columns: 1fr; }
  .bento--feature { grid-column: span 1; }
}
@media (prefers-reduced-motion: reduce) {
  .bento, .bento__icon, .bento__bg, .bento__link, .bento__link svg { transition: none; }
}

/* ===== services-04 · .service-tabs ===== */
/* ==========================================================================
   Services 04 · Vertical Service Tabs — scoped under .service-tabs
   ========================================================================== */

.service-tabs {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --radius: 22px;
  --shadow: 0 26px 60px -34px rgba(31, 58, 40, .3);
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

/* Header ------------------------------------------------------------------ */
.service-tabs__head { text-align: center; margin-bottom: clamp(2.2rem, 5vw, 3.4rem); }
.service-tabs__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.service-tabs__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.service-tabs__title {
  margin: 0 auto; max-width: 20ch;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem);
  line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary));
}
.service-tabs__title em { font-style: normal; color: var(--accent); }

/* Layout ------------------------------------------------------------------ */
.service-tabs__panel-wrap {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 1.6rem;
  align-items: stretch;
}

/* Tab list ---------------------------------------------------------------- */
.service-tabs__list { display: flex; flex-direction: column; gap: .7rem; }
.tab-btn {
  display: flex; align-items: center; gap: 1rem;
  width: 100%;
  padding: 1.15rem 1.25rem;
  background: var(--card-bg, var(--surface));
  border: 1px solid var(--line);
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  position: relative;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition);
}
.tab-btn:hover { transform: translateX(4px); border-color: rgba(31, 58, 40, .22); }
.tab-btn.is-active {
  background: var(--btn-bg, var(--primary));
  border-color: transparent;
  box-shadow: 0 22px 44px -22px rgba(31, 58, 40, .6);
}
.tab-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.tab-btn__icon {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--icon-bg, #e4ede2); color: var(--icon-color, #2f5a3a);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.tab-btn.is-active .tab-btn__icon { background: rgba(255, 255, 255, .14); color: var(--gold); }
.tab-btn__icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.tab-btn__text { display: flex; flex-direction: column; gap: .12rem; }
.tab-btn__title { font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.02rem; color: var(--text, var(--primary)); transition: color var(--transition); }
.tab-btn__sub { font-size: .82rem; color: var(--muted); transition: color var(--transition); }
.tab-btn.is-active .tab-btn__title { color: #fff; }
.tab-btn.is-active .tab-btn__sub { color: rgba(244, 239, 229, .72); }

/* Panels ------------------------------------------------------------------ */
.service-tabs__panels { position: relative; }
.tab-panel {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  background: var(--card-bg, var(--surface));
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(31, 58, 40, .05);
  height: 100%;
}
.tab-panel[hidden] { display: none; }
.tab-panel.is-active { animation: svctab-in .5s cubic-bezier(.22, 1, .36, 1); }
@keyframes svctab-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.tab-panel__media { position: relative; min-height: 260px; background: #e4ede2; }
.tab-panel__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.tab-panel__body { padding: clamp(1.8rem, 3vw, 2.6rem); display: flex; flex-direction: column; }
.tab-panel__title { margin: 0 0 .7rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 1.6rem); color: var(--text, var(--primary)); }
.tab-panel__text { margin: 0 0 1.3rem; font-size: .97rem; line-height: 1.62; color: var(--muted); }

.tab-panel__checks { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .7rem; }
.tab-panel__checks li { position: relative; padding-left: 1.9rem; font-size: .93rem; line-height: 1.5; color: var(--text); }
.tab-panel__checks li::before {
  content: ""; position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 999px;
  background: #e4ede2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f5a3a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.tab-panel__cta {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: .93rem; color: var(--accent); text-decoration: none;
  transition: gap var(--transition), color var(--transition);
}
.tab-panel__cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition); }
.tab-panel__cta:hover { gap: .85rem; color: var(--primary); }
.tab-panel__cta:hover svg { transform: translateX(3px); }
.tab-panel__cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 861.98px) {
  .service-tabs__panel-wrap { grid-template-columns: 1fr; }
  .tab-panel { grid-template-columns: 1fr; }
  .tab-panel__media { min-height: 200px; }
}
@media (max-width: 559.98px) {
  .tab-btn__sub { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tab-btn, .tab-btn__icon, .tab-panel__cta, .tab-panel__cta svg { transition: none; }
  .tab-panel.is-active { animation: none; }
}

/* ===== services-05 · .service-panels ===== */
/* ==========================================================================
   Services 05 · Expanding Image Panels — scoped under .service-panels
   ========================================================================== */

.service-panels {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --transition: .55s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

/* Header ------------------------------------------------------------------ */
.service-panels__head {
  display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.service-panels__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.service-panels__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.service-panels__title {
  margin: 0; max-width: 16ch;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem);
  line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary));
}
.service-panels__title em { font-style: normal; color: var(--accent); }
.service-panels__lead { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--muted); }

/* Panel row --------------------------------------------------------------- */
.service-panels__row {
  display: flex;
  gap: 1rem;
  height: 440px;
}

.spanel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  border: none;
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
  color: #fff;
  font-family: inherit;
  text-align: left;
  background: #26492f var(--img) center / cover no-repeat;
  box-shadow: 0 26px 60px -34px rgba(31, 58, 40, .5);
  transition: flex-grow var(--transition), box-shadow var(--transition);
}
.spanel.is-active { flex-grow: 4.2; }
.spanel:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.spanel__shade {
  position: absolute; inset: 0;
  background: linear-gradient(185deg, rgba(20, 36, 25, .18) 0%, rgba(18, 32, 22, .55) 55%, rgba(15, 28, 19, .9) 100%);
  transition: background var(--transition);
}
.spanel.is-active .spanel__shade { background: linear-gradient(185deg, rgba(20, 36, 25, .12) 0%, rgba(18, 32, 22, .5) 50%, rgba(15, 28, 19, .92) 100%); }

.spanel__num {
  position: absolute; top: 1.3rem; left: 1.4rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: 1.05rem;
  color: var(--gold);
  z-index: 2;
}

.spanel__content {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex; flex-direction: column;
  padding: 1.5rem;
}
.spanel__icon {
  display: grid; place-items: center;
  width: 50px; height: 50px;
  margin-bottom: 1rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, .16);
  color: var(--gold);
  backdrop-filter: blur(3px);
  transition: transform var(--transition);
}
.spanel.is-active .spanel__icon { transform: translateY(-2px) scale(1.05); }
.spanel__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.spanel__title {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600; font-size: 1.2rem;
  white-space: nowrap;
}
.spanel__text {
  margin-top: .5rem;
  font-size: .92rem; line-height: 1.55;
  color: rgba(244, 239, 229, .88);
  max-width: 34ch;
  opacity: 0;
  max-height: 0;
  transform: translateY(8px);
  transition: opacity var(--transition), transform var(--transition), max-height var(--transition);
}
.spanel.is-active .spanel__text { opacity: 1; max-height: 6rem; transform: none; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .service-panels__head { grid-template-columns: 1fr; }
  .service-panels__row { flex-wrap: wrap; height: auto; }
  .spanel { flex: 1 1 calc(50% - .5rem); height: 240px; }
  .spanel.is-active { flex-grow: 1; }
  .spanel__text { opacity: 1; max-height: 6rem; transform: none; }
}
@media (max-width: 559.98px) {
  .spanel { flex: 1 1 100%; height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .spanel, .spanel__shade, .spanel__icon, .spanel__text { transition: none; }
}

/* ===== services-06 · .service-caps ===== */
/* ==========================================================================
   Services 06 · Capabilities Band — scoped under .service-caps
   ========================================================================== */

.service-caps {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.service-caps__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(2.4rem, 5vw, 4rem);
  border-radius: 30px;
  background: radial-gradient(120% 130% at 0% 0%, var(--grad-from, #274a31) 0%, #1f3a28 45%, var(--grad-to, #16281c) 100%);
  box-shadow: 0 40px 90px -46px rgba(15, 28, 19, .85);
  overflow: hidden;
}
/* Subtle gold aura in the corner */
.service-caps__inner::after {
  content: ""; position: absolute; right: -80px; top: -80px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 148, 95, .28), transparent 70%);
  pointer-events: none;
}

/* Head (left) ------------------------------------------------------------- */
.service-caps__head { position: relative; z-index: 1; }
.service-caps__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1.1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent, var(--gold));
}
.service-caps__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--gold)); }
.service-caps__title {
  margin: 0 0 1.1rem; max-width: 16ch;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.85rem, 3.6vw, 2.7rem);
  line-height: 1.14; letter-spacing: -.01em; color: var(--text, #fff);
}
.service-caps__title em { font-style: normal; color: var(--accent, var(--gold)); }
.service-caps__lead { margin: 0 0 1.9rem; font-size: 1rem; line-height: 1.68; color: rgba(244, 239, 229, .78); max-width: 42ch; }

.service-caps__cta {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  background: var(--btn-bg, var(--gold)); color: #241a0e;
  font-weight: 600; font-size: .93rem; text-decoration: none;
  box-shadow: 0 18px 34px -18px rgba(184, 148, 95, .8);
  transition: transform var(--transition), gap var(--transition), background var(--transition);
}
.service-caps__cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition); }
.service-caps__cta:hover { transform: translateY(-3px); gap: .85rem; background: #c8a570; }
.service-caps__cta:hover svg { transform: translateX(3px); }
.service-caps__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Grid (right) ------------------------------------------------------------ */
.service-caps__grid {
  position: relative; z-index: 1;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: .4rem 1.6rem;
}
.cap {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.35rem .6rem;
  border-top: 1px solid rgba(244, 239, 229, .12);
  transition: transform var(--transition);
}
.cap:hover { transform: translateX(4px); }

.cap__icon {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 13px;
  background: rgba(184, 148, 95, .16); color: var(--icon-color, var(--gold));
  transition: transform var(--transition), background var(--transition), color var(--transition);
}
.cap:hover .cap__icon { transform: rotate(-5deg) scale(1.08); background: var(--gold); color: #241a0e; }
.cap__icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.cap__title { margin: .1rem 0 .3rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--text, #fff); }
.cap__text { margin: 0; font-size: .9rem; line-height: 1.5; color: rgba(244, 239, 229, .68); }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 861.98px) {
  .service-caps__inner { grid-template-columns: 1fr; gap: 2rem; }
  .service-caps__title, .service-caps__lead { max-width: none; }
}
@media (max-width: 539.98px) {
  .service-caps__grid { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cap, .cap__icon, .service-caps__cta, .service-caps__cta svg { transition: none; }
}

/* ===== statistics-01 · .stat-counters ===== */
/* ==========================================================================
   Statistics 01 · Counter Row — scoped under .stat-counters
   ========================================================================== */

.stat-counters {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.stat-counters__head { text-align: center; margin-bottom: clamp(2.2rem, 5vw, 3.4rem); }
.stat-counters__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.stat-counters__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.stat-counters__title {
  margin: 0 auto; max-width: 22ch;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem);
  line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary));
}
.stat-counters__title em { font-style: normal; color: var(--accent); }

.stat-counters__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
}

.stat-count { text-align: center; position: relative; padding: .5rem 1rem; }
.stat-count:not(:last-child)::after {
  content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 56px; background: var(--line);
}
.stat-count__num {
  display: flex; align-items: baseline; justify-content: center;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(2.6rem, 6vw, 4rem);
  line-height: 1; color: var(--text, var(--primary)); letter-spacing: -.02em;
}
.stat-count__suffix { color: var(--accent, var(--gold)); }
.stat-count__label { margin: .8rem 0 0; font-size: .95rem; font-weight: 500; color: var(--muted); }

@media (max-width: 767.98px) {
  .stat-counters__grid { grid-template-columns: repeat(2, 1fr); gap: 2.4rem 1rem; }
  .stat-count:nth-child(2)::after { display: none; }
}
@media (max-width: 419.98px) {
  .stat-counters__grid { grid-template-columns: 1fr; }
  .stat-count::after { display: none !important; }
}

/* ===== statistics-02 · .stat-band ===== */
/* ==========================================================================
   Statistics 02 · Dark Stat Band — scoped under .stat-band
   ========================================================================== */

.stat-band {
  --primary: #1f3a28;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;

  background: var(--bg);
  padding: clamp(3rem, 7vw, 6rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text, var(--primary));
}

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

.stat-band__inner {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  padding: clamp(2.2rem, 4vw, 3.4rem) clamp(1.5rem, 3vw, 2.5rem);
  border-radius: 28px;
  background: radial-gradient(120% 130% at 0% 0%, var(--grad-from, #274a31) 0%, #1f3a28 50%, var(--grad-to, #16281c) 100%);
  box-shadow: 0 40px 90px -46px rgba(15, 28, 19, .85);
}
.stat-band__inner::after {
  content: ""; position: absolute; right: -70px; top: -70px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 148, 95, .22), transparent 70%);
  pointer-events: none;
}

.stat-band__item { position: relative; text-align: center; padding: 0 1rem; }
.stat-band__item:not(:last-child)::after {
  content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 54px; background: rgba(244, 239, 229, .16);
}

.stat-band__num {
  display: flex; align-items: baseline; justify-content: center;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1; color: var(--accent, var(--gold)); letter-spacing: -.02em;
}
.stat-band__num--static { color: var(--text, #fff); }
.stat-band__suffix { color: rgba(244, 239, 229, .6); }
.stat-band__label { margin: .8rem 0 0; font-size: .92rem; font-weight: 500; color: rgba(244, 239, 229, .78); }

@media (max-width: 767.98px) {
  .stat-band__inner { grid-template-columns: repeat(2, 1fr); gap: 2.2rem 1rem; }
  .stat-band__item:nth-child(2)::after { display: none; }
}
@media (max-width: 419.98px) {
  .stat-band__inner { grid-template-columns: 1fr; }
  .stat-band__item::after { display: none !important; }
}

/* ===== statistics-03 · .stat-split ===== */
/* ==========================================================================
   Statistics 03 · Split Stat Cards — scoped under .stat-split
   ========================================================================== */

.stat-split {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.stat-split__grid {
  display: grid; grid-template-columns: .9fr 1.1fr;
  align-items: center; gap: clamp(2rem, 5vw, 4rem);
}

/* Intro ------------------------------------------------------------------- */
.stat-split__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1.1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.stat-split__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.stat-split__title {
  margin: 0 0 1rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.85rem, 3.6vw, 2.7rem);
  line-height: 1.14; letter-spacing: -.01em; color: var(--text, var(--primary));
}
.stat-split__title em { font-style: normal; color: var(--accent); }
.stat-split__text { margin: 0 0 1.7rem; font-size: 1rem; line-height: 1.65; color: var(--muted); max-width: 40ch; }

.stat-split__cta {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 600; font-size: .95rem; color: var(--accent); text-decoration: none;
  transition: gap var(--transition), color var(--transition);
}
.stat-split__cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition); }
.stat-split__cta:hover { gap: .85rem; color: var(--primary); }
.stat-split__cta:hover svg { transform: translateX(3px); }
.stat-split__cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

/* Cards ------------------------------------------------------------------- */
.stat-split__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.3rem; }
.stat-mini {
  padding: 1.8rem 1.5rem;
  background: var(--card-bg, var(--surface));
  border: 1px solid rgba(31, 58, 40, .06);
  border-radius: 20px;
  box-shadow: 0 22px 50px -32px rgba(31, 58, 40, .34);
  transition: transform var(--transition), box-shadow var(--transition);
}
.stat-mini:hover { transform: translateY(-5px); box-shadow: 0 34px 66px -32px rgba(31, 58, 40, .46); }
.stat-mini__icon {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-bottom: 1rem;
  border-radius: 13px; background: var(--icon-bg, #e4ede2); color: var(--icon-color, #2f5a3a);
}
.stat-mini__icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.stat-mini__num {
  display: flex; align-items: baseline;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  line-height: 1; color: var(--text, var(--primary)); letter-spacing: -.02em;
}
.stat-mini__suffix { color: var(--accent, var(--gold)); }
.stat-mini__label { margin: .5rem 0 0; font-size: .9rem; font-weight: 500; color: var(--muted); }

@media (max-width: 861.98px) {
  .stat-split__grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .stat-split__text { max-width: none; }
}
@media (max-width: 439.98px) {
  .stat-split__cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .stat-mini, .stat-split__cta, .stat-split__cta svg { transition: none; } }

/* ===== statistics-04 · .stat-bars ===== */
/* ==========================================================================
   Statistics 04 · Progress Bars — scoped under .stat-bars
   ========================================================================== */

.stat-bars {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.stat-bars__grid {
  display: grid; grid-template-columns: .85fr 1.15fr;
  align-items: center; gap: clamp(2rem, 5vw, 4.5rem);
}

/* Intro ------------------------------------------------------------------- */
.stat-bars__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1.1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.stat-bars__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.stat-bars__title {
  margin: 0 0 1rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.85rem, 3.6vw, 2.7rem);
  line-height: 1.14; letter-spacing: -.01em; color: var(--text, var(--primary));
}
.stat-bars__title em { font-style: normal; color: var(--accent); }
.stat-bars__text { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--muted); max-width: 38ch; }

/* Bars -------------------------------------------------------------------- */
.stat-bars__list { display: grid; gap: 1.7rem; }
.stat-bar__top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .6rem; }
.stat-bar__label { font-size: .98rem; font-weight: 600; color: var(--text, var(--primary)); }
.stat-bar__pct { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--accent); }

.stat-bar__track { height: 12px; border-radius: 999px; background: #e7e0d0; overflow: hidden; }
.stat-bar__fill {
  display: block; height: 100%; width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--grad-from, #2f5a3a), var(--grad-to, #b8945f));
  transition: width 1.5s cubic-bezier(.22, 1, .36, 1);
}

@media (max-width: 861.98px) {
  .stat-bars__grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .stat-bars__text { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .stat-bar__fill { transition: none; }
}

/* ===== statistics-05 · .stat-kpi ===== */
/* ==========================================================================
   Statistics 05 · KPI Cards — scoped under .stat-kpi
   ========================================================================== */

.stat-kpi {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

/* Header ------------------------------------------------------------------ */
.stat-kpi__head { text-align: center; margin-bottom: clamp(2.2rem, 5vw, 3.2rem); }
.stat-kpi__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.stat-kpi__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.stat-kpi__title {
  margin: 0 auto; max-width: 22ch;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem);
  line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary));
}
.stat-kpi__title em { font-style: normal; color: var(--accent); }

/* Grid -------------------------------------------------------------------- */
.stat-kpi__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }

.kpi {
  display: flex; flex-direction: column;
  padding: 1.7rem 1.6rem;
  background: var(--card-bg, var(--surface));
  border: 1px solid rgba(31, 58, 40, .06);
  border-radius: 20px;
  box-shadow: 0 22px 50px -32px rgba(31, 58, 40, .32);
  transition: transform var(--transition), box-shadow var(--transition);
}
.kpi:hover { transform: translateY(-5px); box-shadow: 0 34px 66px -32px rgba(31, 58, 40, .44); }

.kpi__top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .9rem; }
.kpi__label { font-size: .86rem; font-weight: 500; color: var(--muted); }
.kpi__trend {
  display: inline-flex; align-items: center; gap: .2rem;
  padding: .2rem .5rem; border-radius: 999px;
  font-size: .76rem; font-weight: 600;
}
.kpi__trend svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.kpi__trend--up { background: #e4ede2; color: #2f6a3e; }
.kpi__trend--down { background: #f2e2df; color: var(--accent); }

.kpi__num {
  display: flex; align-items: baseline;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(2rem, 3.6vw, 2.7rem);
  line-height: 1; color: var(--text, var(--primary)); letter-spacing: -.02em;
}
.kpi__suffix { color: var(--accent, var(--gold)); font-size: .7em; }

.kpi__spark { width: 100%; height: 34px; margin: 1rem 0 .8rem; fill: none; stroke: var(--accent, var(--gold)); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.kpi__foot { margin: auto 0 0; font-size: .78rem; color: var(--muted); }

@media (max-width: 991.98px) { .stat-kpi__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479.98px) { .stat-kpi__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .kpi { transition: none; } }

/* ===== process-01 · .process-steps ===== */
/* ==========================================================================
   Process 01 · Numbered Steps — scoped under .process-steps
   ========================================================================== */

.process-steps {
  --primary: #1f3a28;
  --accent: #9a3324;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --radius: 22px;
  --shadow: 0 26px 60px -34px rgba(31, 58, 40, .3);
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

/* Head */
.process-steps__head { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.process-steps__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text, var(--primary));
}
.process-steps__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.process-steps__title {
  margin: 0;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -.01em;
  color: var(--text, var(--primary));
}

/* Grid */
.process-steps__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
}

/* Card */
.step-card {
  position: relative;
  background: var(--card-bg, var(--surface));
  border-radius: var(--radius);
  padding: 2rem 1.8rem;
  box-shadow: var(--shadow);
  border: 1px solid rgba(31, 58, 40, .04);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.step-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 70px -30px rgba(31, 58, 40, .4);
}

.step-card__num {
  position: absolute;
  top: 1.1rem;
  right: 1.4rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  color: #f0dcd6;
  transition: color var(--transition);
}
.step-card:hover .step-card__num { color: #e7c7bf; }

.step-card__icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-bottom: 1.3rem;
  border-radius: 15px;
  transition: transform var(--transition);
}
.step-card:hover .step-card__icon { transform: scale(1.08) rotate(-3deg); }
.step-card__icon svg {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.step-card__icon--rose  { background: var(--icon-bg, #f2e2df); color: var(--icon-color, #9a3324); }
.step-card__icon--green { background: var(--icon-bg, #e4ede2); color: var(--icon-color, #2f5a3a); }
.step-card__icon--sand  { background: var(--icon-bg, #efe6d5); color: var(--icon-color, #a07a3c); }

.step-card__title {
  margin: 0 0 .55rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--text, var(--primary));
}
.step-card__text {
  margin: 0;
  font-size: .95rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 26ch;
}

@media (max-width: 991.98px) { .process-steps__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .process-steps__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .step-card, .step-card__icon, .step-card__num { transition: none; }
}

/* ===== process-02 · .process-vertical ===== */
/* ==========================================================================
   Process 02 · Vertical Steps — scoped under .process-vertical
   ========================================================================== */

.process-vertical {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.process-vertical__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }

.process-vertical__intro { position: sticky; top: 2rem; }
.process-vertical__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1.1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.process-vertical__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.process-vertical__title { margin: 0 0 1rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.85rem, 3.6vw, 2.7rem); line-height: 1.14; letter-spacing: -.01em; color: var(--text, var(--primary)); }
.process-vertical__title em { font-style: normal; color: var(--accent); }
.process-vertical__text { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--muted); max-width: 38ch; }

.process-vertical__list { list-style: none; margin: 0; padding: 0; position: relative; }
.process-vertical__list::before { content: ""; position: absolute; left: 27px; top: 20px; bottom: 20px; width: 2px; background: linear-gradient(var(--gold), var(--line)); }

.pv-step { position: relative; display: flex; gap: 1.4rem; padding-bottom: 1.8rem; }
.pv-step:last-child { padding-bottom: 0; }
.pv-step__node {
  position: relative; z-index: 1; flex: 0 0 auto;
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--icon-bg, var(--primary)); color: var(--icon-color, var(--gold));
  font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.1rem;
  box-shadow: 0 0 0 6px var(--bg);
}
.pv-step__node--last { background: var(--accent); color: #fff; }
.pv-step__body {
  flex: 1; background: var(--card-bg, var(--surface)); border: 1px solid rgba(31, 58, 40, .06);
  border-radius: 18px; padding: 1.3rem 1.6rem;
  box-shadow: 0 22px 50px -34px rgba(31, 58, 40, .32);
  transition: transform var(--transition), box-shadow var(--transition);
}
.pv-step__body:hover { transform: translateX(4px); box-shadow: 0 30px 62px -34px rgba(31, 58, 40, .44); }
.pv-step__body h3 { margin: 0 0 .35rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.15rem; color: var(--text, var(--primary)); }
.pv-step__body p { margin: 0; font-size: .94rem; line-height: 1.55; color: var(--muted); }

@media (max-width: 861.98px) {
  .process-vertical__grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .process-vertical__intro { position: static; }
  .process-vertical__text { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .pv-step__body { transition: none; } }

/* ===== process-03 · .process-zigzag ===== */
/* ==========================================================================
   Process 03 · Zigzag Steps — scoped under .process-zigzag
   ========================================================================== */

.process-zigzag {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.process-zigzag__head { text-align: center; margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.process-zigzag__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.process-zigzag__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.process-zigzag__title { margin: 0 auto; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem); line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary)); }
.process-zigzag__title em { font-style: normal; color: var(--accent); }

.process-zigzag__list { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }

.pz-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); }
.pz-row--flip .pz-row__media { order: 2; }

.pz-row__media { position: relative; aspect-ratio: 16 / 11; border-radius: 24px; overflow: hidden; background: #e4ede2; box-shadow: 0 30px 70px -40px rgba(31, 58, 40, .5); }
.pz-row__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.pz-row:hover .pz-row__media img { transform: scale(1.05); }
.pz-row__badge {
  position: absolute; top: 1rem; left: 1rem;
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px;
  background: var(--icon-bg, var(--primary)); color: var(--icon-color, var(--gold));
  font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.15rem;
  box-shadow: 0 14px 30px -12px rgba(31, 58, 40, .6);
}
.pz-row__badge--last { background: var(--accent); color: #fff; }

.pz-row__kicker { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--accent, var(--gold)); font-weight: 600; }
.pz-row__title { margin: .5rem 0 .7rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: var(--text, var(--primary)); line-height: 1.18; }
.pz-row__text { margin: 0; font-size: 1rem; line-height: 1.62; color: var(--muted); max-width: 44ch; }

@media (max-width: 767.98px) {
  .pz-row, .pz-row--flip { grid-template-columns: 1fr; }
  .pz-row--flip .pz-row__media { order: 0; }
  .pz-row__text { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .pz-row__media img { transition: none; } }

/* ===== process-04 · .process-flow ===== */
/* ==========================================================================
   Process 04 · Horizontal Flow — scoped under .process-flow
   ========================================================================== */

.process-flow {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.process-flow__head { text-align: center; margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.process-flow__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.process-flow__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.process-flow__title { margin: 0 auto; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem); line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary)); }
.process-flow__title em { font-style: normal; color: var(--accent); }

.process-flow__track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }

.pf-step {
  position: relative; text-align: center;
  padding: 2rem 1.4rem 1.6rem;
  background: var(--card-bg, var(--surface)); border: 1px solid rgba(31, 58, 40, .06);
  border-radius: 20px;
  box-shadow: 0 22px 50px -34px rgba(31, 58, 40, .3);
  transition: transform var(--transition), box-shadow var(--transition);
}
.pf-step:hover { transform: translateY(-6px); box-shadow: 0 36px 70px -34px rgba(31, 58, 40, .44); }
/* connector arrow */
.pf-step:not(.pf-step--last)::after {
  content: ""; position: absolute; right: -1.15rem; top: 50%; transform: translateY(-50%);
  width: .95rem; height: 2px; background: var(--accent, var(--gold));
  z-index: 1;
}
.pf-step:not(.pf-step--last)::before {
  content: ""; position: absolute; right: -1.15rem; top: 50%; transform: translate(1px, -50%) rotate(45deg);
  width: 8px; height: 8px; border-top: 2px solid var(--accent, var(--gold)); border-right: 2px solid var(--accent, var(--gold));
  z-index: 1;
}

.pf-step__num {
  display: inline-grid; place-items: center; width: 30px; height: 30px; margin-bottom: .9rem;
  border-radius: 50%; background: var(--accent, var(--gold)); color: #241a0e;
  font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: .9rem;
}
.pf-step__icon {
  display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 1rem;
  border-radius: 16px; background: var(--icon-bg, #e4ede2); color: var(--icon-color, #2f5a3a);
  transition: transform var(--transition), background var(--transition), color var(--transition);
}
.pf-step:hover .pf-step__icon { transform: scale(1.08); background: var(--primary); color: var(--gold); }
.pf-step__icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pf-step__title { margin: 0 0 .4rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.1rem; color: var(--text, var(--primary)); }
.pf-step__text { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--muted); }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .process-flow__track { grid-template-columns: 1fr; gap: 2.2rem; }
  .pf-step:not(.pf-step--last)::after { right: auto; left: 50%; top: auto; bottom: -1.4rem; transform: translateX(-50%) rotate(90deg); }
  .pf-step:not(.pf-step--last)::before { right: auto; left: 50%; top: auto; bottom: -1.55rem; transform: translate(-50%, 0) rotate(135deg); }
}
@media (prefers-reduced-motion: reduce) { .pf-step, .pf-step__icon { transition: none; } }

/* ===== process-05 · .process-accordion ===== */
/* ==========================================================================
   Process 05 · Accordion Steps — scoped under .process-accordion
   ========================================================================== */

.process-accordion {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.process-accordion__head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.process-accordion__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.process-accordion__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.process-accordion__title { margin: 0 auto; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem); line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary)); }
.process-accordion__title em { font-style: normal; color: var(--accent); }

.process-accordion__list { max-width: 46rem; margin: 0 auto; display: grid; gap: .9rem; }

.pa-item {
  background: var(--card-bg, var(--surface));
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.pa-item.is-open { border-color: transparent; box-shadow: 0 26px 60px -36px rgba(31, 58, 40, .45); }

.pa-item__h { margin: 0; }
.pa-item__btn {
  display: flex; align-items: center; gap: 1.1rem; width: 100%;
  padding: 1.3rem 1.5rem; border: none; background: transparent; cursor: pointer;
  text-align: left; font: inherit;
}
.pa-item__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; border-radius: 12px; }
.pa-item__num {
  flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: var(--icon-bg, #e4ede2); color: var(--icon-color, #2f5a3a);
  font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: .95rem;
  transition: background var(--transition), color var(--transition);
}
.pa-item.is-open .pa-item__num { background: var(--primary); color: var(--gold); }
.pa-item__title { flex: 1; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.12rem; color: var(--text, var(--primary)); }
.pa-item__icon { flex: 0 0 auto; position: relative; width: 18px; height: 18px; }
.pa-item__icon::before, .pa-item__icon::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--primary); transition: transform var(--transition); }
.pa-item__icon::after { transform: rotate(90deg); }
.pa-item.is-open .pa-item__icon::after { transform: rotate(0); }

.pa-item__panel { max-height: 0; overflow: hidden; transition: max-height var(--transition); }
.pa-item__panel[hidden] { display: block; }
.pa-item__panel p { margin: 0; padding: 0 1.5rem 1.4rem 4.6rem; font-size: .96rem; line-height: 1.6; color: var(--muted); }

@media (max-width: 479.98px) {
  .pa-item__panel p { padding-left: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pa-item, .pa-item__num, .pa-item__icon::before, .pa-item__icon::after, .pa-item__panel { transition: none; }
}

/* ===== timeline-01 · .tl-alt ===== */
/* ==========================================================================
   Timeline 01 · Alternating Vertical — scoped under .tl-alt
   ========================================================================== */

.tl-alt {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.tl-alt__head { text-align: center; margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.tl-alt__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.tl-alt__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.tl-alt__title {
  margin: 0 auto;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem);
  line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary));
}
.tl-alt__title em { font-style: normal; color: var(--accent); }

/* Line -------------------------------------------------------------------- */
.tl-alt__line {
  list-style: none; margin: 0 auto; padding: 0; position: relative;
  max-width: 62rem;
}
.tl-alt__line::before {
  content: ""; position: absolute; top: 6px; bottom: 6px; left: 50%; transform: translateX(-50%);
  width: 2px; background: linear-gradient(var(--gold), var(--line));
}

.tl-alt__item { position: relative; width: 50%; padding: 0 3rem 2.4rem 0; }
.tl-alt__item:nth-child(even) { margin-left: 50%; padding: 0 0 2.4rem 3rem; }
.tl-alt__item:last-child { padding-bottom: 0; }

.tl-alt__dot {
  position: absolute; top: 6px; right: -7px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); border: 4px solid var(--accent, var(--gold));
  box-shadow: 0 0 0 4px var(--bg);
  z-index: 1;
}
.tl-alt__item:nth-child(even) .tl-alt__dot { right: auto; left: -9px; }
.tl-alt__dot--now { border-color: var(--accent); animation: tlalt-pulse 2.4s infinite; }
@keyframes tlalt-pulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--bg), 0 0 0 4px rgba(154, 51, 36, .4); }
  50% { box-shadow: 0 0 0 4px var(--bg), 0 0 0 12px rgba(154, 51, 36, 0); }
}

.tl-alt__card {
  background: var(--card-bg, var(--surface));
  border: 1px solid rgba(31, 58, 40, .06);
  border-radius: 18px;
  padding: 1.5rem 1.6rem;
  box-shadow: 0 22px 50px -32px rgba(31, 58, 40, .34);
  transition: transform var(--transition), box-shadow var(--transition);
}
.tl-alt__card:hover { transform: translateY(-4px); box-shadow: 0 32px 64px -32px rgba(31, 58, 40, .46); }
.tl-alt__card--now { border-color: rgba(154, 51, 36, .3); }

.tl-alt__year {
  display: inline-block; margin-bottom: .5rem;
  font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: .95rem;
  color: var(--accent, var(--gold)); letter-spacing: .04em;
}
.tl-alt__card--now .tl-alt__year { color: var(--accent); }
.tl-alt__h { margin: 0 0 .4rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.15rem; color: var(--text, var(--primary)); }
.tl-alt__text { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--muted); }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 640px) {
  .tl-alt__line::before { left: 8px; }
  .tl-alt__item, .tl-alt__item:nth-child(even) { width: 100%; margin-left: 0; padding: 0 0 1.8rem 2.4rem; }
  .tl-alt__dot, .tl-alt__item:nth-child(even) .tl-alt__dot { left: 1px; right: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-alt__card { transition: none; }
  .tl-alt__dot--now { animation: none; }
}

/* ===== timeline-02 · .tl-h ===== */
/* ==========================================================================
   Timeline 02 · Horizontal Steps — scoped under .tl-h
   ========================================================================== */

.tl-h {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.tl-h__head { text-align: center; margin-bottom: clamp(2.6rem, 5vw, 3.8rem); }
.tl-h__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.tl-h__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.tl-h__title {
  margin: 0 auto; max-width: 22ch;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem);
  line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary));
}
.tl-h__title em { font-style: normal; color: var(--accent); }

/* Track ------------------------------------------------------------------- */
.tl-h__track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; position: relative; }
.tl-h__track::before {
  content: ""; position: absolute; left: 0; right: 0; top: 46px; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--line));
}

.tl-h__step { position: relative; text-align: center; padding-top: 74px; }
.tl-h__year {
  position: absolute; top: 0; left: 0; right: 0;
  font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.35rem;
  color: var(--text, var(--primary)); letter-spacing: -.01em;
}
.tl-h__dot {
  position: absolute; top: 39px; left: 50%; transform: translateX(-50%);
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); border: 4px solid var(--accent, var(--gold));
  box-shadow: 0 0 0 5px var(--bg); z-index: 1;
}
.tl-h__step--now .tl-h__dot { border-color: var(--accent); animation: tlh-pulse 2.4s infinite; }
@keyframes tlh-pulse {
  0%, 100% { box-shadow: 0 0 0 5px var(--bg), 0 0 0 5px rgba(154, 51, 36, .4); }
  50% { box-shadow: 0 0 0 5px var(--bg), 0 0 0 13px rgba(154, 51, 36, 0); }
}

.tl-h__card {
  background: var(--card-bg, var(--surface));
  border: 1px solid rgba(31, 58, 40, .06);
  border-radius: 18px;
  padding: 1.4rem 1.3rem;
  box-shadow: 0 22px 50px -32px rgba(31, 58, 40, .34);
  transition: transform var(--transition), box-shadow var(--transition);
}
.tl-h__card:hover { transform: translateY(-5px); box-shadow: 0 32px 64px -32px rgba(31, 58, 40, .46); }
.tl-h__h { margin: 0 0 .4rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.08rem; color: var(--text, var(--primary)); }
.tl-h__text { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--muted); }

/* Responsive → vertical --------------------------------------------------- */
@media (max-width: 767.98px) {
  .tl-h__track { grid-template-columns: 1fr; gap: 0; }
  .tl-h__track::before { left: 8px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; }
  .tl-h__step { text-align: left; padding: 0 0 1.8rem 2.6rem; }
  .tl-h__year { position: static; margin-bottom: .5rem; display: block; }
  .tl-h__dot { top: 4px; left: 1px; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-h__card { transition: none; }
  .tl-h__step--now .tl-h__dot { animation: none; }
}

/* ===== timeline-03 · .tl-rail ===== */
/* ==========================================================================
   Timeline 03 · Roadmap Rail — scoped under .tl-rail
   ========================================================================== */

.tl-rail {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.tl-rail__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }

/* Intro ------------------------------------------------------------------- */
.tl-rail__intro { position: sticky; top: 2rem; }
.tl-rail__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1.1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.tl-rail__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.tl-rail__title {
  margin: 0 0 1rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.85rem, 3.6vw, 2.6rem);
  line-height: 1.14; letter-spacing: -.01em; color: var(--text, var(--primary));
}
.tl-rail__title em { font-style: normal; color: var(--accent); }
.tl-rail__text { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--muted); max-width: 38ch; }

/* List -------------------------------------------------------------------- */
.tl-rail__list { list-style: none; margin: 0; padding: 0; position: relative; }
.tl-rail__list::before {
  content: ""; position: absolute; left: 21px; top: 10px; bottom: 10px; width: 2px;
  background: var(--line);
}

.rail-item { position: relative; display: flex; gap: 1.3rem; padding-bottom: 1.8rem; }
.rail-item:last-child { padding-bottom: 0; }

.rail-item__node {
  position: relative; z-index: 1; flex: 0 0 auto;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 0 0 5px var(--bg);
}
.rail-item__node svg { width: 22px; height: 22px; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rail-item--done .rail-item__node { background: var(--primary); }
.rail-item--done .rail-item__node svg { stroke: var(--gold); }
.rail-item--active .rail-item__node { background: #fff; border: 2px solid var(--accent); }
.rail-item--active .rail-item__node svg { stroke: var(--accent); fill: var(--accent); }
.rail-item--planned .rail-item__node { background: #fff; border: 2px dashed #c4bba6; }
.rail-item--planned .rail-item__node svg { stroke: var(--muted); }

.rail-item__body {
  flex: 1;
  background: var(--card-bg, var(--surface));
  border: 1px solid rgba(31, 58, 40, .06);
  border-radius: 16px; padding: 1.3rem 1.5rem;
  box-shadow: 0 20px 46px -32px rgba(31, 58, 40, .32);
  transition: transform var(--transition), box-shadow var(--transition);
}
.rail-item__body:hover { transform: translateX(4px); box-shadow: 0 28px 58px -32px rgba(31, 58, 40, .44); }

.rail-item__tag {
  display: inline-block; margin-bottom: .55rem;
  padding: .25rem .7rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.rail-item--done .rail-item__tag { background: #e4ede2; color: #2f6a3e; }
.rail-item--active .rail-item__tag { background: #f2e2df; color: var(--accent); }
.rail-item--planned .rail-item__tag { background: #efe7db; color: #8a6a2f; }

.rail-item__h { margin: 0 0 .3rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.12rem; color: var(--text, var(--primary)); }
.rail-item__text { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--muted); }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 861.98px) {
  .tl-rail__grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .tl-rail__intro { position: static; }
  .tl-rail__text { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .rail-item__body { transition: none; } }

/* ===== timeline-04 · .tl-cards ===== */
/* ==========================================================================
   Timeline 04 · Milestone Cards — scoped under .tl-cards
   ========================================================================== */

.tl-cards {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.tl-cards__head { text-align: center; margin-bottom: clamp(2.4rem, 5vw, 3.4rem); }
.tl-cards__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.tl-cards__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.tl-cards__title {
  margin: 0 auto;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem);
  line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary));
}
.tl-cards__title em { font-style: normal; color: var(--accent); }

/* Grid -------------------------------------------------------------------- */
.tl-cards__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }

.ms-card {
  position: relative; overflow: hidden;
  padding: 1.9rem 1.6rem;
  background: var(--card-bg, var(--surface));
  border: 1px solid rgba(31, 58, 40, .06);
  border-radius: 22px;
  box-shadow: 0 22px 50px -32px rgba(31, 58, 40, .32);
  transition: transform var(--transition), box-shadow var(--transition);
}
.ms-card:hover { transform: translateY(-6px); box-shadow: 0 36px 70px -32px rgba(31, 58, 40, .46); }

.ms-card__ghost {
  position: absolute; top: -.5rem; right: .3rem;
  font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 5.5rem;
  line-height: 1; color: rgba(31, 58, 40, .05); pointer-events: none;
}
.ms-card__icon {
  position: relative;
  display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 1.1rem;
  border-radius: 14px; background: var(--icon-bg, #e4ede2); color: var(--icon-color, #2f5a3a);
  transition: transform var(--transition), background var(--transition), color var(--transition);
}
.ms-card:hover .ms-card__icon { transform: scale(1.08) rotate(-4deg); background: var(--primary); color: var(--gold); }
.ms-card__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.ms-card__year { position: relative; display: block; margin-bottom: .3rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: .95rem; color: var(--accent, var(--gold)); }
.ms-card__h { position: relative; margin: 0 0 .45rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.14rem; color: var(--text, var(--primary)); }
.ms-card__text { position: relative; margin: 0; font-size: .9rem; line-height: 1.55; color: var(--muted); }

.ms-card--now { background: radial-gradient(130% 130% at 100% 0%, #274a31, #1f3a28 55%, #16281c); border: none; }
.ms-card--now .ms-card__ghost { color: rgba(244, 239, 229, .08); }
.ms-card--now .ms-card__icon { background: rgba(184, 148, 95, .18); color: var(--gold); }
.ms-card--now .ms-card__year { color: var(--gold); }
.ms-card--now .ms-card__h { color: #fff; }
.ms-card--now .ms-card__text { color: rgba(244, 239, 229, .78); }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 991.98px) { .tl-cards__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479.98px) { .tl-cards__grid { grid-template-columns: 1fr; max-width: 22rem; margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) { .ms-card, .ms-card__icon { transition: none; } }

/* ===== cta-01 · .cta-band ===== */
/* ==========================================================================
   CTA 01 · Gradient Band — scoped under .cta-band
   ========================================================================== */

.cta-band {
  --primary: #1f3a28;
  --gold: #b8945f;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(3.5rem, 8vw, 6rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  text-align: center;
  background: linear-gradient(120deg, var(--grad-from, #a9895a) 0%, color-mix(in srgb, var(--grad-from, #a9895a), var(--grad-to, #b58f57)) 45%, var(--grad-to, #b58f57) 100%);
}

.cta-band__glow {
  position: absolute;
  inset: -40% 20% auto -10%;
  height: 120%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--grad-glow-1, #fff6e0) 35%, transparent), transparent 60%);
  z-index: -1;
  pointer-events: none;
}

.cta-band__inner { max-width: 42rem; margin: 0 auto; }

.cta-band__title {
  margin: 0 0 .9rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  letter-spacing: -.005em;
  color: var(--text, #fff);
  text-shadow: 0 2px 12px rgba(70, 50, 20, .18);
}

.cta-band__text {
  margin: 0 auto 2rem;
  max-width: 34rem;
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.6;
  color: rgba(255, 251, 243, .9);
}

.cta-band__btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: 1rem 2rem;
  border-radius: 100px;
  background: var(--btn-bg, var(--primary));
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 18px 40px -16px rgba(20, 35, 22, .6);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.cta-band__btn svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--transition);
}
.cta-band__btn:hover {
  background: #285035;
  transform: translateY(-3px);
  box-shadow: 0 26px 52px -16px rgba(20, 35, 22, .65);
}
.cta-band__btn:hover svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .cta-band__btn, .cta-band__btn svg { transition: none; }
}

/* ===== cta-02 · .cta-split ===== */
/* ==========================================================================
   CTA 02 · Split Band — scoped under .cta-split
   ========================================================================== */

.cta-split {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3rem, 7vw, 6rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.cta-split__inner {
  display: grid; grid-template-columns: 1.4fr auto;
  align-items: center; gap: clamp(1.6rem, 4vw, 3rem);
  padding: clamp(2rem, 4vw, 3.2rem) clamp(2rem, 4vw, 3.4rem);
  border-radius: 28px;
  background: linear-gradient(120deg, var(--grad-from, #c8a06a) 0%, color-mix(in srgb, var(--grad-from, #c8a06a), var(--grad-to, #a07c46)) 55%, var(--grad-to, #a07c46) 100%);
  box-shadow: 0 34px 74px -38px rgba(160, 124, 70, .8);
  position: relative; overflow: hidden;
}
/* decorative ring */
.cta-split__inner::after {
  content: ""; position: absolute; right: -60px; top: -80px;
  width: 240px; height: 240px; border-radius: 50%;
  border: 40px solid rgba(255, 255, 255, .1); pointer-events: none;
}

.cta-split__text { position: relative; z-index: 1; }
.cta-split__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 .8rem;
  font-size: .76rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, #3a2a12);
}
.cta-split__eyebrow span { width: 26px; height: 2px; border-radius: 2px; background: var(--accent, #3a2a12); }
.cta-split__title {
  margin: 0 0 .5rem; max-width: 22ch;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.6rem, 3.2vw, 2.35rem);
  line-height: 1.15; letter-spacing: -.01em; color: var(--text, #241a0e);
}
.cta-split__sub { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--text, rgba(36, 26, 14, .78)); max-width: 40ch; }

.cta-split__actions { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; }
.cta-split__btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 1rem 1.8rem; border-radius: 999px;
  background: var(--btn-bg, var(--primary)); color: #f3efe6;
  font-weight: 600; font-size: 1rem; text-decoration: none; white-space: nowrap;
  box-shadow: 0 20px 40px -18px rgba(20, 36, 25, .8);
  transition: transform var(--transition), background var(--transition), gap var(--transition);
}
.cta-split__btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition); }
.cta-split__btn:hover { transform: translateY(-3px); background: #16281c; gap: .85rem; }
.cta-split__btn:hover svg { transform: translateX(3px); }
.cta-split__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.cta-split__link { font-size: .9rem; font-weight: 600; color: #3a2a12; text-decoration: underline; text-underline-offset: 3px; }
.cta-split__link:hover { color: #241a0e; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .cta-split__inner { grid-template-columns: 1fr; }
  .cta-split__actions { align-items: stretch; }
  .cta-split__btn { justify-content: center; }
  .cta-split__link { text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .cta-split__btn, .cta-split__btn svg { transition: none; } }

/* ===== cta-03 · .cta-subscribe ===== */
/* ==========================================================================
   CTA 03 · Newsletter Capture — scoped under .cta-subscribe
   ========================================================================== */

.cta-subscribe {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.cta-subscribe__card {
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: clamp(1.8rem, 4vw, 3.5rem);
  max-width: 60rem; margin: 0 auto;
  padding: clamp(2.2rem, 4vw, 3.4rem);
  background: radial-gradient(130% 130% at 0% 0%, var(--grad-from, #274a31), #1f3a28 55%, var(--grad-to, #16281c));
  border-radius: 28px;
  box-shadow: 0 40px 90px -44px rgba(15, 28, 19, .8);
}

.cta-subscribe__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--gold));
}
.cta-subscribe__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--gold)); }
.cta-subscribe__title {
  margin: 0 0 .8rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.15; letter-spacing: -.01em; color: var(--text, #fff);
}
.cta-subscribe__sub { margin: 0; font-size: 1rem; line-height: 1.6; color: rgba(244, 239, 229, .78); }

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

/* Form -------------------------------------------------------------------- */
.cta-subscribe__field {
  display: flex; gap: .5rem; padding: .4rem;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(244, 239, 229, .18);
  border-radius: 999px;
  transition: border-color var(--transition), background var(--transition);
}
.cta-subscribe__field:focus-within { border-color: var(--gold); background: rgba(255, 255, 255, .14); }
.cta-subscribe__input {
  flex: 1; min-width: 0;
  padding: .75rem 1.1rem; border: none; background: transparent;
  color: #fff; font: inherit; font-size: .95rem;
}
.cta-subscribe__input::placeholder { color: rgba(244, 239, 229, .55); }
.cta-subscribe__input:focus { outline: none; }

.cta-subscribe__btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.4rem; border: none; border-radius: 999px;
  background: var(--btn-bg, var(--gold)); color: #241a0e;
  font: inherit; font-weight: 600; font-size: .93rem; cursor: pointer; white-space: nowrap;
  transition: transform var(--transition), background var(--transition);
}
.cta-subscribe__btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition); }
.cta-subscribe__btn:hover { transform: translateY(-1px); background: #c8a570; }
.cta-subscribe__btn:hover svg { transform: translateX(2px); }
.cta-subscribe__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.cta-subscribe__status { margin: .8rem .4rem 0; min-height: 1.2em; font-size: .86rem; font-weight: 500; }
.cta-subscribe__status.is-error { color: #f0b8ae; }
.cta-subscribe__status.is-ok { color: #bfe0c0; }
.cta-subscribe__fine { margin: .5rem .4rem 0; font-size: .78rem; color: rgba(244, 239, 229, .55); }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .cta-subscribe__card { grid-template-columns: 1fr; }
}
@media (max-width: 439.98px) {
  .cta-subscribe__field { flex-direction: column; border-radius: 20px; }
  .cta-subscribe__btn { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-subscribe__field, .cta-subscribe__btn, .cta-subscribe__btn svg { transition: none; }
}

/* ===== cta-04 · .cta-cover ===== */
/* ==========================================================================
   CTA 04 · Image Cover — scoped under .cta-cover
   ========================================================================== */

.cta-cover {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3rem, 7vw, 6rem) 0;
  font-family: "Inter", system-ui, sans-serif;
}

.cta-cover__card {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  min-height: clamp(340px, 46vw, 460px);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  box-shadow: 0 40px 90px -44px rgba(15, 28, 19, .7);
}
.cta-cover__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-cover__overlay {
  position: absolute; inset: 0;
  background: radial-gradient(120% 120% at 50% 20%, rgba(20, 36, 25, .55), rgba(15, 28, 19, .9));
}

.cta-cover__content {
  position: relative; z-index: 1;
  padding: clamp(2rem, 5vw, 3.5rem);
  max-width: 44rem;
  color: #f4efe5;
}
.cta-cover__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1.1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--gold));
}
.cta-cover__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--gold)); }
.cta-cover__title {
  margin: 0 auto .9rem; max-width: 20ch;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.12; letter-spacing: -.01em; color: var(--text, #fff);
}
.cta-cover__sub { margin: 0 auto 1.9rem; max-width: 46ch; font-size: 1.05rem; line-height: 1.6; color: rgba(244, 239, 229, .85); }

.cta-cover__actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }
.cta-cover__btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .95rem 1.7rem; border-radius: 999px;
  font-weight: 600; font-size: .98rem; text-decoration: none;
  transition: transform var(--transition), background var(--transition), gap var(--transition), border-color var(--transition);
}
.cta-cover__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition); }
.cta-cover__btn--primary { background: var(--btn-bg, var(--gold)); color: #241a0e; box-shadow: 0 18px 36px -16px rgba(184, 148, 95, .8); }
.cta-cover__btn--primary:hover { transform: translateY(-3px); background: #c8a570; gap: .8rem; }
.cta-cover__btn--primary:hover svg { transform: translateX(3px); }
.cta-cover__btn--ghost { background: var(--btn2-bg, rgba(255, 255, 255, .1)); color: #fff; border: 1px solid rgba(244, 239, 229, .4); }
.cta-cover__btn--ghost:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .18); border-color: rgba(244, 239, 229, .7); }
.cta-cover__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Responsive -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) { .cta-cover__btn, .cta-cover__btn svg { transition: none; } }

/* ===== cta-05 · .cta-actions ===== */
/* ==========================================================================
   CTA 05 · Dual Action Card — scoped under .cta-actions
   ========================================================================== */

.cta-actions {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.cta-actions__card {
  position: relative;
  overflow: hidden;
  max-width: 50rem; margin: 0 auto;
  padding: clamp(2.4rem, 5vw, 4rem) clamp(1.6rem, 4vw, 3rem);
  text-align: center;
  background: var(--card-bg, var(--surface));
  border: 1px solid rgba(31, 58, 40, .06);
  border-radius: 30px;
  box-shadow: 0 34px 80px -40px rgba(31, 58, 40, .4);
}
/* Decorative dotted texture */
.cta-actions__dots {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(31, 58, 40, .07) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 62%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 62%);
}

.cta-actions__eyebrow {
  position: relative;
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.cta-actions__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.cta-actions__title {
  position: relative;
  margin: 0 auto .8rem; max-width: 22ch;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  line-height: 1.14; letter-spacing: -.01em; color: var(--text, var(--primary));
}
.cta-actions__sub { position: relative; margin: 0 auto 1.9rem; max-width: 44ch; font-size: 1.02rem; line-height: 1.6; color: var(--muted); }

.cta-actions__buttons { position: relative; display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-bottom: 1.9rem; }
.cta-actions__btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .95rem 1.7rem; border-radius: 999px;
  font-weight: 600; font-size: .98rem; text-decoration: none;
  transition: transform var(--transition), background var(--transition), gap var(--transition), border-color var(--transition), color var(--transition);
}
.cta-actions__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition); }
.cta-actions__btn--primary { background: var(--btn-bg, var(--primary)); color: #f3efe6; box-shadow: 0 20px 40px -18px rgba(31, 58, 40, .7); }
.cta-actions__btn--primary:hover { transform: translateY(-3px); background: #26492f; gap: .8rem; }
.cta-actions__btn--primary:hover svg { transform: translateX(3px); }
.cta-actions__btn--ghost { background: transparent; color: var(--primary); border: 1.5px solid var(--line); }
.cta-actions__btn--ghost:hover { transform: translateY(-3px); border-color: var(--primary); }
.cta-actions__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.cta-actions__chips {
  position: relative;
  list-style: none; margin: 0; padding: 1.6rem 0 0;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: .8rem 1.8rem; justify-content: center;
}
.cta-actions__chips li { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; font-weight: 500; color: var(--muted); }
.cta-actions__chips svg { width: 18px; height: 18px; fill: none; stroke: var(--accent, var(--gold)); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 479.98px) {
  .cta-actions__buttons { flex-direction: column; }
  .cta-actions__btn { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .cta-actions__btn, .cta-actions__btn svg { transition: none; } }

/* ===== cta-06 · .cta-statement ===== */
/* ==========================================================================
   CTA 06 · Statement CTA — scoped under .cta-statement
   ========================================================================== */

.cta-statement {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3rem, 7vw, 6rem) 0;
  font-family: "Inter", system-ui, sans-serif;
}

.cta-statement__inner {
  position: relative;
  overflow: hidden;
  padding: clamp(2.8rem, 6vw, 5rem) clamp(1.6rem, 4vw, 3rem);
  text-align: center;
  border-radius: 32px;
  background:
    radial-gradient(90% 120% at 85% 0%, color-mix(in srgb, var(--grad-glow-1, #b8945f) 35%, transparent), transparent 55%),
    radial-gradient(80% 120% at 0% 100%, color-mix(in srgb, var(--grad-glow-2, #9a3324) 28%, transparent), transparent 55%),
    linear-gradient(140deg, var(--grad-from, #274a31) 0%, color-mix(in srgb, var(--grad-from, #274a31), var(--grad-to, #16281c)) 50%, var(--grad-to, #16281c) 100%);
  box-shadow: 0 44px 100px -46px rgba(15, 28, 19, .85);
  color: var(--text, #f4efe5);
}
/* faint grid lines */
.cta-statement__grid-lines {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(244, 239, 229, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 239, 229, .06) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, #000 20%, transparent 75%);
  mask-image: radial-gradient(120% 100% at 50% 50%, #000 20%, transparent 75%);
}

.cta-statement__title {
  position: relative;
  margin: 0 auto .9rem; max-width: 18ch;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(2.1rem, 5.2vw, 3.6rem);
  line-height: 1.08; letter-spacing: -.02em; color: var(--text, #fff);
}
.cta-statement__title em { font-style: normal; color: var(--accent, var(--gold)); }
.cta-statement__sub {
  position: relative;
  margin: 0 auto 2rem; max-width: 42ch;
  font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.6; color: rgba(244, 239, 229, .82);
}

.cta-statement__btn {
  position: relative;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 1.05rem 2rem; border-radius: 999px;
  background: var(--btn-bg, var(--gold)); color: #241a0e;
  font-weight: 600; font-size: 1.05rem; text-decoration: none;
  box-shadow: 0 22px 44px -18px rgba(184, 148, 95, .9);
  transition: transform var(--transition), background var(--transition), gap var(--transition);
}
.cta-statement__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition); }
.cta-statement__btn:hover { transform: translateY(-3px); background: #c8a570; gap: .9rem; }
.cta-statement__btn:hover svg { transform: translateX(4px); }
.cta-statement__btn:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

.cta-statement__proof { position: relative; display: inline-flex; align-items: center; gap: .9rem; margin-top: 2rem; flex-wrap: wrap; justify-content: center; }
.cta-statement__stack { display: flex; }
.cta-statement__stack img {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  border: 2px solid #21402a; margin-left: -12px; background: #e4ede2;
}
.cta-statement__stack img:first-child { margin-left: 0; }
.cta-statement__proof-text { margin: 0; font-size: .9rem; color: rgba(244, 239, 229, .82); }
.cta-statement__proof-text strong { color: #fff; font-weight: 600; }

/* Responsive -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) { .cta-statement__btn, .cta-statement__btn svg { transition: none; } }

/* ===== gallery-01 · .gal-masonry ===== */
/* ==========================================================================
   Gallery 01 · Masonry Grid — scoped under .gal-masonry
   ========================================================================== */

.gal-masonry {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --transition: .45s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: #2a2a24;
}

.gal-masonry__head { text-align: center; margin-bottom: clamp(2.2rem, 5vw, 3.2rem); }
.gal-masonry__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.gal-masonry__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.gal-masonry__title { margin: 0 auto; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem); line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary)); }
.gal-masonry__title em { font-style: normal; color: var(--accent); }

.gal-masonry__grid { column-count: 3; column-gap: 1.3rem; }

.gitem {
  position: relative; break-inside: avoid; margin: 0 0 1.3rem;
  border-radius: 18px; overflow: hidden; background: #e4ede2;
  box-shadow: 0 22px 50px -34px rgba(31, 58, 40, .4);
}
.gitem:nth-child(3n+1) img { aspect-ratio: 3 / 4; }
.gitem:nth-child(3n+2) img { aspect-ratio: 1; }
.gitem:nth-child(3n) img { aspect-ratio: 4 / 5; }
.gitem img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition); }
.gitem:hover img { transform: scale(1.06); }

.gitem__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.4rem 1.2rem 1.1rem;
  background: linear-gradient(to top, rgba(15, 28, 19, .85), transparent);
  transform: translateY(30%); opacity: 0;
  transition: transform var(--transition), opacity var(--transition);
}
.gitem:hover .gitem__cap, .gitem:focus-within .gitem__cap { transform: translateY(0); opacity: 1; }
.gitem__cat { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--accent, var(--gold)); font-weight: 600; margin-bottom: .2rem; }
.gitem__name { display: block; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.15rem; color: #fff; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 767.98px) { .gal-masonry__grid { column-count: 2; } }
@media (max-width: 439.98px) { .gal-masonry__grid { column-count: 1; } }
@media (prefers-reduced-motion: reduce) {
  .gitem img, .gitem__cap { transition: none; }
  .gitem__cap { transform: none; opacity: 1; }
}

/* ===== gallery-02 · .gal-filter ===== */
/* ==========================================================================
   Gallery 02 · Filterable — scoped under .gal-filter
   ========================================================================== */

.gal-filter {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: #2a2a24;
}

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

.gal-filter__head { text-align: center; margin-bottom: clamp(1.6rem, 4vw, 2.4rem); }
.gal-filter__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.gal-filter__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.gal-filter__title { margin: 0 auto; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem); line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary)); }
.gal-filter__title em { font-style: normal; color: var(--accent); }

/* Filter bar -------------------------------------------------------------- */
.gal-filter__bar { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }
.gal-filter__btn {
  padding: .6rem 1.3rem; border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--btn2-bg, var(--surface)); color: var(--muted);
  font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.gal-filter__btn:hover { transform: translateY(-2px); border-color: var(--primary); color: var(--primary); }
.gal-filter__btn.is-active { background: var(--btn-bg, var(--primary)); color: #f3efe6; border-color: transparent; }
.gal-filter__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Grid -------------------------------------------------------------------- */
.gal-filter__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }

.fitem {
  position: relative; margin: 0; border-radius: 18px; overflow: hidden; background: #e4ede2;
  box-shadow: 0 22px 50px -34px rgba(31, 58, 40, .4);
  transition: opacity var(--transition), transform var(--transition);
}
.fitem img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--transition); }
.fitem:hover img { transform: scale(1.06); }
.fitem figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.3rem 1.2rem 1rem;
  background: linear-gradient(to top, rgba(15, 28, 19, .85), transparent);
  color: #fff; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.08rem;
  transform: translateY(30%); opacity: 0; transition: transform var(--transition), opacity var(--transition);
}
.fitem figcaption span { display: block; font-family: "Inter", system-ui, sans-serif; font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--accent, var(--gold)); margin-bottom: .15rem; }
.fitem:hover figcaption, .fitem:focus-within figcaption { transform: translateY(0); opacity: 1; }

.fitem.is-hidden { display: none; }
.fitem.is-enter { animation: gfil-in .45s cubic-bezier(.22, 1, .36, 1); }
@keyframes gfil-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 767.98px) { .gal-filter__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 439.98px) { .gal-filter__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .gal-filter__btn, .fitem, .fitem img, .fitem figcaption { transition: none; }
  .fitem.is-enter { animation: none; }
  .fitem figcaption { transform: none; opacity: 1; }
}

/* ===== gallery-03 · .gal-lb ===== */
/* ==========================================================================
   Gallery 03 · Lightbox Grid — scoped under .gal-lb
   ========================================================================== */

.gal-lb {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: #2a2a24;
}

.gal-lb__head { text-align: center; margin-bottom: clamp(2.2rem, 5vw, 3.2rem); }
.gal-lb__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.gal-lb__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.gal-lb__title { margin: 0 auto; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem); line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary)); }
.gal-lb__title em { font-style: normal; color: var(--accent); }

/* Grid -------------------------------------------------------------------- */
.gal-lb__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.gal-lb__grid li { margin: 0; }

.lb-thumb {
  position: relative; display: block; width: 100%; padding: 0; border: none; cursor: pointer;
  border-radius: 18px; overflow: hidden; background: #e4ede2;
  box-shadow: 0 22px 50px -34px rgba(31, 58, 40, .4);
}
.lb-thumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--transition); }
.lb-thumb:hover img { transform: scale(1.06); }
.lb-thumb__zoom {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(15, 28, 19, .45); color: #fff;
  opacity: 0; transition: opacity var(--transition);
}
.lb-thumb:hover .lb-thumb__zoom, .lb-thumb:focus-visible .lb-thumb__zoom { opacity: 1; }
.lb-thumb__zoom svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lb-thumb:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* Overlay ----------------------------------------------------------------- */
.lb-overlay {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center; gap: clamp(.5rem, 2vw, 1.5rem);
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(13, 24, 17, .9); backdrop-filter: blur(4px);
  animation: lb-fade .3s ease;
}
.lb-overlay[hidden] { display: none; }
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }

.lb-figure { margin: 0; max-width: min(880px, 90vw); text-align: center; }
.lb-figure img { max-width: 100%; max-height: 78vh; border-radius: 14px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7); background: #16281c; }
.lb-figure figcaption { margin-top: .9rem; color: #f4efe5; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.05rem; }

.lb-close {
  position: absolute; top: 1.2rem; right: 1.2rem;
  display: grid; place-items: center; width: 46px; height: 46px;
  border: none; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.lb-close:hover { background: var(--accent); transform: rotate(90deg); }
.lb-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.lb-arrow {
  flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px;
  border: none; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.lb-arrow:hover { background: var(--gold); color: #241a0e; transform: scale(1.06); }
.lb-arrow svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb-close:focus-visible, .lb-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 767.98px) { .gal-lb__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .lb-arrow { position: absolute; bottom: 1.4rem; }
  .lb-arrow--prev { left: 30%; }
  .lb-arrow--next { right: 30%; }
}
@media (max-width: 439.98px) { .gal-lb__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .lb-thumb img, .lb-thumb__zoom, .lb-close, .lb-arrow { transition: none; }
  .lb-overlay { animation: none; }
}

/* ===== gallery-04 · .gal-ba ===== */
/* ==========================================================================
   Gallery 04 · Before / After — scoped under .gal-ba
   ========================================================================== */

.gal-ba {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --muted: #6e6e62;

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: #2a2a24;
}

.gal-ba__head { text-align: center; max-width: 44rem; margin: 0 auto clamp(2.2rem, 5vw, 3.2rem); }
.gal-ba__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.gal-ba__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.gal-ba__title { margin: 0 auto; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem); line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary)); }
.gal-ba__title em { font-style: normal; color: var(--accent); }
.gal-ba__lead { margin: 1.1rem auto 0; max-width: 42ch; font-size: 1rem; line-height: 1.6; color: var(--muted); }

/* Stage ------------------------------------------------------------------- */
.gal-ba__stage {
  position: relative; max-width: 62rem; margin: 0 auto;
  aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden;
  background: #16281c; user-select: none;
  box-shadow: 0 40px 90px -44px rgba(31, 58, 40, .5);
}
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__img--before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

.ba__label {
  position: absolute; top: 1rem; z-index: 2;
  padding: .35rem .85rem; border-radius: 999px;
  background: rgba(15, 28, 19, .6); backdrop-filter: blur(4px);
  color: #f4efe5; font-size: .76rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.ba__label--before { left: 1rem; }
.ba__label--after { right: 1rem; }

.ba__handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); transform: translateX(-50%);
  width: 3px; background: #f4efe5; z-index: 3; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.ba__handle::after {
  content: ""; position: absolute; width: 46px; height: 46px; border-radius: 50%;
  background: #f4efe5; box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .5);
}
.ba__handle svg { position: relative; z-index: 1; width: 24px; height: 24px; fill: none; stroke: var(--primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.ba__range {
  position: absolute; inset: 0; z-index: 4;
  width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.ba__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 46px; height: 100%; cursor: ew-resize; }
.ba__range::-moz-range-thumb { width: 46px; height: 100%; border: none; background: transparent; cursor: ew-resize; }
.ba__range:focus-visible { outline: none; }
.gal-ba__stage:focus-within .ba__handle::after { outline: 3px solid var(--gold); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { .ba__img { transition: none; } }

/* ===== products-01 · .prod-cards ===== */
/* ==========================================================================
   Products 01 · Product Cards — scoped under .prod-cards
   ========================================================================== */

.prod-cards {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.prod-cards__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.prod-cards__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.prod-cards__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.prod-cards__title { margin: 0; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem); line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary)); }
.prod-cards__title em { font-style: normal; color: var(--accent); }
.prod-cards__all { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .93rem; color: var(--accent); text-decoration: none; white-space: nowrap; transition: gap var(--transition); }
.prod-cards__all svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.prod-cards__all:hover { gap: .8rem; }

.prod-cards__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

/* Card -------------------------------------------------------------------- */
.pcard {
  display: flex; flex-direction: column;
  background: var(--card-bg, var(--surface));
  border: 1px solid rgba(31, 58, 40, .06);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 22px 50px -34px rgba(31, 58, 40, .3);
  transition: transform var(--transition), box-shadow var(--transition);
}
.pcard:hover { transform: translateY(-6px); box-shadow: 0 38px 74px -34px rgba(31, 58, 40, .44); }

.pcard__media { position: relative; aspect-ratio: 1; background: var(--tint, #e4ede2); overflow: hidden; }
.pcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.pcard:hover .pcard__media img { transform: scale(1.07); }

.pcard__badge {
  position: absolute; top: .8rem; left: .8rem; z-index: 2;
  padding: .28rem .7rem; border-radius: 999px;
  background: var(--primary); color: #f3efe6;
  font-size: .72rem; font-weight: 600; letter-spacing: .03em;
}
.pcard__badge--sale { background: var(--accent); }

.pcard__wish {
  position: absolute; top: .7rem; right: .7rem; z-index: 2;
  display: grid; place-items: center; width: 38px; height: 38px;
  border: none; border-radius: 50%;
  background: rgba(255, 255, 255, .85); color: var(--primary); cursor: pointer;
  backdrop-filter: blur(3px);
  opacity: 0; transform: translateY(-6px);
  transition: opacity var(--transition), transform var(--transition), background var(--transition), color var(--transition);
}
.pcard:hover .pcard__wish, .pcard:focus-within .pcard__wish { opacity: 1; transform: translateY(0); }
.pcard__wish:hover { background: var(--accent); color: #fff; }
.pcard__wish:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; opacity: 1; }
.pcard__wish svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.pcard__body { padding: 1.3rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.pcard__cat { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: .3rem; }
.pcard__name { margin: 0 0 .5rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.08rem; color: var(--text, var(--primary)); }
.pcard__stars { display: inline-flex; gap: .15rem; margin-bottom: 1rem; }
.pcard__stars svg { width: 15px; height: 15px; fill: var(--gold); }
.pcard__stars svg.is-empty { fill: #dcd3c0; }

.pcard__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.pcard__price { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.12rem; color: var(--text, var(--primary)); }
.pcard__price s { font-family: "Inter", system-ui, sans-serif; font-weight: 500; font-size: .82rem; color: var(--muted); margin-left: .2rem; }
.pcard__add {
  padding: .55rem .9rem; border: 1.5px solid var(--primary); border-radius: 999px;
  background: transparent; color: var(--primary);
  font: inherit; font-weight: 600; font-size: .82rem; cursor: pointer; white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.pcard__add:hover { background: var(--primary); color: #f3efe6; }
.pcard__add:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 991.98px) { .prod-cards__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479.98px) { .prod-cards__grid { grid-template-columns: 1fr; max-width: 20rem; margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) {
  .pcard, .pcard__media img, .pcard__wish, .pcard__add, .prod-cards__all { transition: none; }
}

/* ===== products-02 · .prod-spot ===== */
/* ==========================================================================
   Products 02 · Product Spotlight — scoped under .prod-spot
   ========================================================================== */

.prod-spot {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.prod-spot__card {
  display: grid; grid-template-columns: 1fr 1fr;
  max-width: 64rem; margin: 0 auto;
  background: var(--card-bg, var(--surface));
  border-radius: 28px; overflow: hidden;
  box-shadow: 0 40px 90px -46px rgba(31, 58, 40, .5);
  border: 1px solid rgba(31, 58, 40, .05);
}

.prod-spot__media { position: relative; min-height: 360px; background: #e4ede2; }
.prod-spot__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.prod-spot__flag {
  position: absolute; top: 1.1rem; left: 1.1rem;
  padding: .35rem .85rem; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: .75rem; font-weight: 600; letter-spacing: .03em;
}

.prod-spot__body { padding: clamp(1.8rem, 3.5vw, 2.8rem); display: flex; flex-direction: column; }
.prod-spot__cat { font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: var(--accent, var(--gold)); font-weight: 600; margin-bottom: .5rem; }
.prod-spot__name { margin: 0 0 .7rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--text, var(--primary)); line-height: 1.12; }
.prod-spot__name em { font-style: normal; color: var(--accent); }

.prod-spot__rating { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem; }
.prod-spot__stars { color: var(--gold); letter-spacing: .1em; font-size: 1.05rem; }
.prod-spot__count { font-size: .85rem; color: var(--muted); }

.prod-spot__desc { margin: 0 0 1.5rem; font-size: .98rem; line-height: 1.62; color: var(--muted); }

.prod-spot__opts { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.7rem; }
.prod-spot__opt-label { font-size: .85rem; font-weight: 600; color: var(--text, var(--primary)); margin-right: .3rem; }
.prod-spot__swatch { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8); outline: 2px solid transparent; outline-offset: 2px; transition: outline-color var(--transition); }
.prod-spot__swatch--a { background: #1f3a28; }
.prod-spot__swatch--b { background: #9a3324; }
.prod-spot__swatch--c { background: #d8c39a; }
.prod-spot__swatch.is-active { outline-color: var(--primary); }

.prod-spot__buy { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.6rem; }
.prod-spot__price { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.8rem; color: var(--text, var(--primary)); }
.prod-spot__add {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .9rem 1.7rem; border-radius: 999px;
  background: var(--btn-bg, var(--primary)); color: #f3efe6;
  font-weight: 600; font-size: .96rem; text-decoration: none;
  box-shadow: 0 18px 34px -18px rgba(31, 58, 40, .7);
  transition: transform var(--transition), background var(--transition), gap var(--transition);
}
.prod-spot__add svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.prod-spot__add:hover { transform: translateY(-2px); background: #26492f; gap: .8rem; }
.prod-spot__add:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.prod-spot__perks { list-style: none; margin: auto 0 0; padding: 1.4rem 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; }
.prod-spot__perks li { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; color: var(--muted); }
.prod-spot__perks svg { width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .prod-spot__card { grid-template-columns: 1fr; }
  .prod-spot__media { min-height: 280px; }
}
@media (prefers-reduced-motion: reduce) { .prod-spot__add, .prod-spot__swatch { transition: none; } }

/* ===== products-03 · .prod-list ===== */
/* ==========================================================================
   Products 03 · Product List — scoped under .prod-list
   ========================================================================== */

.prod-list {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.prod-list__head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.prod-list__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.prod-list__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.prod-list__title { margin: 0 auto; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem); line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary)); }
.prod-list__title em { font-style: normal; color: var(--accent); }

.prod-list__rows { list-style: none; margin: 0 auto; padding: 0; max-width: 52rem; display: grid; gap: 1rem; }
.prow {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 1.4rem;
  padding: 1rem 1.4rem;
  background: var(--card-bg, var(--surface));
  border: 1px solid var(--line);
  border-radius: 18px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.prow:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 28px 58px -34px rgba(31, 58, 40, .4); }

.prow__thumb { display: block; width: 76px; height: 76px; border-radius: 14px; overflow: hidden; background: var(--tint, #e4ede2); flex: 0 0 auto; }
.prow__thumb img { width: 100%; height: 100%; object-fit: cover; }

.prow__cat { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--accent, var(--gold)); font-weight: 600; }
.prow__name { margin: .15rem 0 .2rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.1rem; color: var(--text, var(--primary)); }
.prow__desc { margin: 0; font-size: .88rem; color: var(--muted); }

.prow__price { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--text, var(--primary)); white-space: nowrap; }
.prow__btn {
  padding: .6rem 1.3rem; border: 1.5px solid var(--primary); border-radius: 999px;
  background: transparent; color: var(--primary);
  font-weight: 600; font-size: .86rem; text-decoration: none; white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.prow__btn:hover { background: var(--primary); color: #f3efe6; }
.prow__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 639.98px) {
  .prow { grid-template-columns: auto 1fr; row-gap: .8rem; }
  .prow__price { grid-column: 2; justify-self: start; }
  .prow__btn { grid-column: 1 / -1; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .prow, .prow__btn { transition: none; } }

/* ===== products-04 · .prod-cats ===== */
/* ==========================================================================
   Products 04 · Category Tiles — scoped under .prod-cats
   ========================================================================== */

.prod-cats {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --transition: .45s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
}

.prod-cats__head { text-align: center; margin-bottom: clamp(2.2rem, 5vw, 3.2rem); }
.prod-cats__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.prod-cats__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.prod-cats__title { margin: 0 auto; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem); line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary)); }
.prod-cats__title em { font-style: normal; color: var(--accent); }

.prod-cats__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 220px; gap: 1.4rem;
}

.cat-tile {
  position: relative; overflow: hidden; border-radius: 22px;
  text-decoration: none; display: block;
  box-shadow: 0 24px 54px -34px rgba(31, 58, 40, .4);
}
.cat-tile--lg { grid-row: span 2; }
.cat-tile--wide { grid-column: span 2; }

.cat-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.cat-tile:hover img { transform: scale(1.07); }
.cat-tile__shade { position: absolute; inset: 0; background: linear-gradient(200deg, rgba(20, 36, 25, .1), rgba(15, 28, 19, .82)); }

.cat-tile__content { position: absolute; left: 0; bottom: 0; padding: 1.5rem; z-index: 1; }
.cat-tile__name { display: block; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.35rem; color: var(--text, #fff); }
.cat-tile__count { display: block; margin-top: .2rem; font-size: .88rem; color: rgba(244, 239, 229, .8); }

.cat-tile__go {
  position: absolute; right: 1.2rem; bottom: 1.4rem; z-index: 1;
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 50%; background: var(--icon-bg, var(--gold)); color: var(--icon-color, #241a0e);
  transform: translateY(8px) scale(.9); opacity: 0;
  transition: transform var(--transition), opacity var(--transition);
}
.cat-tile:hover .cat-tile__go, .cat-tile:focus-visible .cat-tile__go { transform: translateY(0) scale(1); opacity: 1; }
.cat-tile__go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cat-tile:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .prod-cats__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; }
  .cat-tile--lg { grid-row: span 1; }
  .cat-tile--wide { grid-column: span 2; }
}
@media (max-width: 439.98px) {
  .prod-cats__grid { grid-template-columns: 1fr; }
  .cat-tile--wide { grid-column: span 1; }
}
@media (prefers-reduced-motion: reduce) { .cat-tile img, .cat-tile__go { transition: none; } }

/* ===== products-05 · .prod-feat ===== */
/* ==========================================================================
   Products 05 · Feature Highlights — scoped under .prod-feat
   ========================================================================== */

.prod-feat {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.prod-feat__head { text-align: center; margin-bottom: clamp(2.2rem, 5vw, 3.4rem); }
.prod-feat__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.prod-feat__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.prod-feat__title { margin: 0 auto; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem); line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary)); }
.prod-feat__title em { font-style: normal; color: var(--accent); }

.prod-feat__stage { display: grid; grid-template-columns: 1fr 1.1fr 1fr; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); }

.prod-feat__col { display: grid; gap: 2rem; }

.prod-feat__media {
  position: relative; aspect-ratio: 1; border-radius: 30px; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #eef0e6, #e2e6d6);
  box-shadow: 0 40px 90px -44px rgba(31, 58, 40, .5);
}
.prod-feat__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.feat-point { display: flex; gap: .9rem; align-items: flex-start; }
.feat-point--right { flex-direction: row-reverse; text-align: right; }
.feat-point__ic {
  flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 14px; background: var(--icon-bg, var(--surface)); color: var(--icon-color, #2f5a3a);
  box-shadow: 0 16px 34px -20px rgba(31, 58, 40, .5);
  transition: transform var(--transition), background var(--transition), color var(--transition);
}
.feat-point:hover .feat-point__ic { transform: scale(1.08); background: var(--primary); color: var(--gold); }
.feat-point__ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.feat-point__h { margin: .2rem 0 .3rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--text, var(--primary)); }
.feat-point__t { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--muted); }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 861.98px) {
  .prod-feat__stage { grid-template-columns: 1fr; gap: 2rem; }
  .prod-feat__media { order: -1; max-width: 24rem; margin: 0 auto; }
  .feat-point--right { flex-direction: row; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .feat-point__ic { transition: none; } }

/* ===== products-06 · .prod-best ===== */
/* ==========================================================================
   Products 06 · Bestsellers — scoped under .prod-best
   ========================================================================== */

.prod-best {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.prod-best__head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.prod-best__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.prod-best__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.prod-best__title { margin: 0 auto; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem); line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary)); }
.prod-best__title em { font-style: normal; color: var(--accent); }

.prod-best__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }

.bprod {
  position: relative; overflow: hidden;
  background: var(--card-bg, var(--surface));
  border: 1px solid rgba(31, 58, 40, .06);
  border-radius: 20px;
  box-shadow: 0 22px 50px -34px rgba(31, 58, 40, .3);
  transition: transform var(--transition), box-shadow var(--transition);
}
.bprod:hover { transform: translateY(-6px); box-shadow: 0 38px 74px -34px rgba(31, 58, 40, .44); }

.bprod__ribbon {
  position: absolute; top: .9rem; left: .9rem; z-index: 2;
  padding: .28rem .7rem; border-radius: 999px;
  background: var(--gold); color: #241a0e;
  font-size: .72rem; font-weight: 700; letter-spacing: .03em;
}
.bprod__ribbon--top { background: var(--primary); color: var(--gold); }
.bprod__ribbon--sale { background: var(--accent); color: #fff; }

.bprod__media { aspect-ratio: 4 / 3; background: var(--tint, #e4ede2); overflow: hidden; }
.bprod__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.bprod:hover .bprod__media img { transform: scale(1.07); }

.bprod__body { padding: 1.1rem 1.2rem 1.2rem; }
.bprod__name { margin: 0 0 .8rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1rem; color: var(--text, var(--primary)); }
.bprod__foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.bprod__price { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.1rem; color: var(--text, var(--primary)); }
.bprod__add {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: none; border-radius: 50%; background: var(--btn-bg, var(--primary)); color: #f3efe6; cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.bprod__add:hover { background: var(--gold); color: #241a0e; transform: rotate(90deg); }
.bprod__add:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.bprod__add svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 991.98px) { .prod-best__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 419.98px) { .prod-best__grid { grid-template-columns: 1fr; max-width: 20rem; margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) { .bprod, .bprod__media img, .bprod__add { transition: none; } }

/* ===== pricing-01 · .price-tiers ===== */
/* ==========================================================================
   Pricing 01 · Three Tiers — scoped under .price-tiers
   ========================================================================== */

.price-tiers {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --radius: 24px;
  --shadow: 0 26px 60px -34px rgba(31, 58, 40, .3);
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

/* Header ------------------------------------------------------------------ */
.price-tiers__head { max-width: 46rem; margin: 0 auto clamp(2.4rem, 5vw, 3.6rem); text-align: center; }
.price-tiers__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.price-tiers__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.price-tiers__title {
  margin: 0 auto; max-width: 20ch;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem);
  line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary));
}
.price-tiers__title em { font-style: normal; color: var(--accent); }
.price-tiers__lead { margin: 1.1rem auto 0; max-width: 46ch; font-size: 1rem; line-height: 1.65; color: var(--muted); }

/* Grid -------------------------------------------------------------------- */
.price-tiers__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem;
  align-items: center;
}

/* Tier -------------------------------------------------------------------- */
.ptier {
  display: flex; flex-direction: column;
  padding: 2.4rem 1.9rem;
  background: var(--card-bg, var(--surface));
  border: 1px solid rgba(31, 58, 40, .07);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}
.ptier:hover { transform: translateY(-6px); box-shadow: 0 38px 74px -34px rgba(31, 58, 40, .42); }

.ptier__name { margin: 0 0 .4rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.25rem; color: var(--text, var(--primary)); }
.ptier__desc { margin: 0 0 1.4rem; font-size: .9rem; line-height: 1.5; color: var(--muted); min-height: 2.7em; }

.ptier__price { display: flex; align-items: baseline; gap: .35rem; margin-bottom: 1.5rem; }
.ptier__amount { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 2.5rem; line-height: 1; color: var(--text, var(--primary)); letter-spacing: -.02em; }
.ptier__period { font-size: .95rem; color: var(--muted); }

.ptier__cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .85rem 1.4rem; margin-bottom: 1.7rem;
  border-radius: 999px;
  border: 1.5px solid var(--primary);
  background: transparent; color: var(--primary);
  font-weight: 600; font-size: .95rem; text-decoration: none;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.ptier__cta:hover { background: var(--primary); color: #f3efe6; transform: translateY(-2px); }
.ptier__cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.ptier__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.ptier__list li { display: flex; align-items: flex-start; gap: .65rem; font-size: .93rem; line-height: 1.45; color: var(--text); }
.ptier__list svg {
  flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px;
  fill: none; stroke: #2f5a3a; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}

/* Featured ---------------------------------------------------------------- */
.ptier--featured {
  position: relative;
  background: radial-gradient(130% 130% at 0% 0%, #274a31, #1f3a28 55%, #16281c);
  border: none; color: #f4efe5;
  box-shadow: 0 40px 84px -36px rgba(15, 28, 19, .8);
  padding-top: 3rem;
  transform: scale(1.03);
}
.ptier--featured:hover { transform: scale(1.03) translateY(-6px); }
.ptier__badge {
  position: absolute; top: 1.2rem; right: 1.4rem;
  padding: .32rem .85rem; border-radius: 999px;
  background: var(--gold); color: #241a0e;
  font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.ptier--featured .ptier__name { color: #fff; }
.ptier--featured .ptier__desc { color: rgba(244, 239, 229, .72); }
.ptier--featured .ptier__amount { color: #fff; }
.ptier--featured .ptier__period { color: rgba(244, 239, 229, .7); }
.ptier--featured .ptier__list li { color: rgba(244, 239, 229, .92); }
.ptier--featured .ptier__list svg { stroke: var(--gold); }
.ptier--featured .ptier__cta { background: var(--btn-bg, var(--gold)); border-color: var(--gold); color: #241a0e; }
.ptier--featured .ptier__cta:hover { background: #c8a570; border-color: #c8a570; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .price-tiers__grid { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; }
  .ptier--featured, .ptier--featured:hover { transform: none; }
  .ptier__desc { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .ptier { transition: none; } }

/* ===== pricing-02 · .price-switch ===== */
/* ==========================================================================
   Pricing 02 · Billing Toggle — scoped under .price-switch
   ========================================================================== */

.price-switch {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --radius: 22px;
  --shadow: 0 26px 60px -34px rgba(31, 58, 40, .3);
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

/* Header ------------------------------------------------------------------ */
.price-switch__head { text-align: center; margin-bottom: clamp(2.2rem, 5vw, 3.2rem); }
.price-switch__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.price-switch__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.price-switch__title {
  margin: 0 auto 1.6rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem);
  line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary));
}

/* Toggle ------------------------------------------------------------------ */
.psw-toggle {
  display: inline-flex; gap: .3rem; padding: .35rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 12px 30px -20px rgba(31, 58, 40, .5);
}
.psw-toggle__btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.25rem; border: none; border-radius: 999px;
  background: transparent; color: var(--muted);
  font-family: inherit; font-weight: 600; font-size: .92rem; cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.psw-toggle__btn.is-active { background: var(--primary); color: #f3efe6; }
.psw-toggle__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.psw-toggle__save {
  padding: .18rem .5rem; border-radius: 999px;
  background: #f2e2df; color: var(--accent);
  font-size: .68rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.psw-toggle__btn.is-active .psw-toggle__save { background: rgba(184, 148, 95, .28); color: #f3efe6; }

/* Grid -------------------------------------------------------------------- */
.price-switch__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; align-items: start; }

/* Plan -------------------------------------------------------------------- */
.psw {
  position: relative;
  display: flex; flex-direction: column;
  padding: 2.2rem 1.8rem;
  background: var(--card-bg, var(--surface));
  border: 1px solid rgba(31, 58, 40, .07);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}
.psw:hover { transform: translateY(-6px); box-shadow: 0 38px 74px -34px rgba(31, 58, 40, .42); }

.psw__name { margin: 0 0 .3rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.2rem; color: var(--text, var(--primary)); }
.psw__desc { margin: 0 0 1.3rem; font-size: .88rem; color: var(--muted); }

.psw__price { display: flex; align-items: baseline; gap: .35rem; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.psw__amount { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 2.4rem; line-height: 1; color: var(--text, var(--primary)); letter-spacing: -.02em; transition: opacity var(--transition); }
.psw__period { font-size: .9rem; color: var(--muted); }

.psw__list { list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; gap: .7rem; flex: 1; }
.psw__list li { position: relative; padding-left: 1.7rem; font-size: .92rem; line-height: 1.45; color: var(--text); }
.psw__list li::before {
  content: ""; position: absolute; left: 0; top: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #e4ede2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f5a3a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.psw__cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .8rem 1.3rem; border-radius: 999px;
  border: 1.5px solid var(--primary); background: transparent; color: var(--primary);
  font-weight: 600; font-size: .93rem; text-decoration: none;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.psw__cta:hover { background: var(--primary); color: #f3efe6; transform: translateY(-2px); }
.psw__cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Featured ---------------------------------------------------------------- */
.psw--featured { border: 2px solid var(--gold); box-shadow: 0 34px 74px -32px rgba(184, 148, 95, .5); }
.psw__ribbon {
  position: absolute; top: -.9rem; left: 50%; transform: translateX(-50%);
  padding: .3rem .95rem; border-radius: 999px;
  background: var(--gold); color: #241a0e;
  font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 10px 24px -12px rgba(184, 148, 95, .8);
}
.psw--featured .psw__cta { background: var(--btn-bg, var(--primary)); color: #f3efe6; }
.psw--featured .psw__cta:hover { background: #26492f; }

/* Price fade on switch ---------------------------------------------------- */
.psw__amount.is-swapping { opacity: 0; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .price-switch__grid { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .psw, .psw-toggle__btn, .psw__cta, .psw__amount { transition: none; }
}

/* ===== pricing-03 · .price-compare ===== */
/* ==========================================================================
   Pricing 03 · Comparison Table — scoped under .price-compare
   ========================================================================== */

.price-compare {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

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

/* Header ------------------------------------------------------------------ */
.price-compare__head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.price-compare__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.price-compare__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.price-compare__title {
  margin: 0 auto;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem);
  line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary));
}
.price-compare__title em { font-style: normal; color: var(--accent); }

/* Scroll wrapper ---------------------------------------------------------- */
.price-compare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 1rem .25rem; margin: -1rem -.25rem; }

/* Table ------------------------------------------------------------------- */
.pcmp {
  width: 100%; min-width: 620px;
  border-collapse: separate; border-spacing: 0;
  background: var(--card-bg, var(--surface));
  border-radius: 22px;
  box-shadow: 0 26px 60px -34px rgba(31, 58, 40, .32);
  overflow: hidden;
}

.pcmp th, .pcmp td { text-align: center; padding: 1rem 1.2rem; font-size: .95rem; }
.pcmp tbody th[scope="row"] { text-align: left; font-family: "Inter", system-ui, sans-serif; font-weight: 600; color: var(--text, var(--primary)); }
.pcmp tbody tr:nth-child(even) { background: #faf7f0; }
.pcmp tbody td, .pcmp tbody th { border-top: 1px solid var(--line); }

/* Plan header cells ------------------------------------------------------- */
.pcmp__corner { background: var(--card-bg, var(--surface)); }
.pcmp__plan { vertical-align: bottom; padding: 1.6rem 1.2rem; }
.pcmp__pname { display: block; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.08rem; color: var(--text, var(--primary)); }
.pcmp__pprice { display: block; margin: .35rem 0 .9rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.5rem; color: var(--text, var(--primary)); }
.pcmp__pprice small { font-family: "Inter", system-ui, sans-serif; font-weight: 500; font-size: .72rem; color: var(--muted); margin-left: .3rem; }

.pcmp__cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .5rem 1.3rem; border-radius: 999px;
  border: 1.5px solid var(--primary); background: transparent; color: var(--primary);
  font-weight: 600; font-size: .85rem; text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.pcmp__cta:hover { background: var(--primary); color: #f3efe6; }
.pcmp__cta--solid { background: var(--btn-bg, var(--gold)); border-color: var(--gold); color: #241a0e; }
.pcmp__cta--solid:hover { background: #c8a570; border-color: #c8a570; color: #241a0e; }
.pcmp__cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Highlighted column ------------------------------------------------------ */
.pcmp__plan--hl { position: relative; background: rgba(31, 58, 40, .045); }
.pcmp__tag {
  display: inline-block; margin-bottom: .5rem;
  padding: .22rem .7rem; border-radius: 999px;
  background: var(--gold); color: #241a0e;
  font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.pcmp td.is-hl, .pcmp .pcmp__plan--hl { box-shadow: inset 1px 0 0 rgba(184, 148, 95, .35), inset -1px 0 0 rgba(184, 148, 95, .35); }
.pcmp tbody td.is-hl { background: rgba(31, 58, 40, .045); font-weight: 600; color: var(--primary); }
.pcmp tbody tr:last-child td.is-hl { box-shadow: inset 1px 0 0 rgba(184, 148, 95, .35), inset -1px 0 0 rgba(184, 148, 95, .35), inset 0 -1px 0 rgba(184, 148, 95, .35); }

/* Yes / No marks ---------------------------------------------------------- */
.pcmp__yes, .pcmp__no {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
}
.pcmp__yes { background: #e4ede2; }
.pcmp__yes svg { width: 15px; height: 15px; fill: none; stroke: #2f5a3a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pcmp__no { background: #efe7db; }
.pcmp__no svg { width: 13px; height: 13px; fill: none; stroke: #b9b09c; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* Responsive -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) { .pcmp__cta { transition: none; } }

/* ===== pricing-04 · .price-single ===== */
/* ==========================================================================
   Pricing 04 · All-in-One Plan — scoped under .price-single
   ========================================================================== */

.price-single {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

/* Header ------------------------------------------------------------------ */
.price-single__head { max-width: 44rem; margin: 0 auto clamp(2.2rem, 4vw, 3rem); text-align: center; }
.price-single__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.price-single__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.price-single__title {
  margin: 0 auto;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem);
  line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary));
}
.price-single__title em { font-style: normal; color: var(--accent); }
.price-single__lead { margin: 1.1rem auto 0; max-width: 42ch; font-size: 1rem; line-height: 1.65; color: var(--muted); }

/* Card -------------------------------------------------------------------- */
.price-single__card {
  display: grid; grid-template-columns: .82fr 1.18fr;
  max-width: 60rem; margin: 0 auto;
  background: var(--card-bg, var(--surface));
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 40px 90px -46px rgba(31, 58, 40, .5);
  border: 1px solid rgba(31, 58, 40, .05);
}

/* Aside (dark price panel) ------------------------------------------------ */
.price-single__aside {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(2rem, 4vw, 3rem);
  background: radial-gradient(130% 130% at 0% 0%, #274a31, #1f3a28 55%, #16281c);
  color: #f4efe5;
}
.price-single__tag {
  padding: .3rem .85rem; margin-bottom: 1.4rem; border-radius: 999px;
  background: rgba(184, 148, 95, .2); color: var(--gold);
  font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.price-single__price { display: flex; align-items: baseline; gap: .35rem; }
.price-single__amount { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(2.6rem, 5vw, 3.4rem); line-height: 1; color: #fff; letter-spacing: -.02em; }
.price-single__period { font-size: 1rem; color: rgba(244, 239, 229, .7); }
.price-single__note { margin: .7rem 0 1.6rem; font-size: .85rem; color: var(--gold); }

.price-single__cta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; padding: .95rem 1.4rem; border-radius: 999px;
  background: var(--btn-bg, var(--gold)); color: #241a0e;
  font-weight: 600; font-size: .98rem; text-decoration: none;
  box-shadow: 0 18px 34px -18px rgba(184, 148, 95, .8);
  transition: transform var(--transition), background var(--transition);
}
.price-single__cta:hover { transform: translateY(-3px); background: #c8a570; }
.price-single__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.price-single__trust { margin: 1rem 0 0; font-size: .8rem; color: rgba(244, 239, 229, .65); }

/* Features ---------------------------------------------------------------- */
.price-single__features { padding: clamp(2rem, 4vw, 3rem); }
.price-single__fh { margin: 0 0 1.4rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.1rem; color: var(--text, var(--primary)); }
.price-single__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .95rem 1.4rem; }
.price-single__list li { display: flex; align-items: flex-start; gap: .6rem; font-size: .93rem; line-height: 1.4; color: var(--text); }
.price-single__list svg {
  flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px;
  fill: none; stroke: #2f5a3a; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}

/* Responsive -------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .price-single__card { grid-template-columns: 1fr; }
  .price-single__list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .price-single__cta { transition: none; } }

/* ===== pricing-05 · .price-promo ===== */
/* ==========================================================================
   Pricing 05 · Value + Price Card — scoped under .price-promo
   ========================================================================== */

.price-promo {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.price-promo__grid {
  display: grid; grid-template-columns: 1.1fr .9fr;
  align-items: center; gap: clamp(2rem, 5vw, 4.5rem);
}

/* Intro (left) ------------------------------------------------------------ */
.price-promo__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1.1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.price-promo__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.price-promo__title {
  margin: 0 0 1rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem);
  line-height: 1.13; letter-spacing: -.01em; color: var(--text, var(--primary));
}
.price-promo__title em { font-style: normal; color: var(--accent); }
.price-promo__text { margin: 0 0 1.8rem; font-size: 1rem; line-height: 1.65; color: var(--muted); max-width: 44ch; }

.price-promo__perks { list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; gap: 1rem; }
.price-promo__perks li { display: flex; align-items: flex-start; gap: .8rem; font-size: .97rem; line-height: 1.5; color: var(--text); }
.price-promo__perks strong { color: var(--text, var(--primary)); font-weight: 600; }
.price-promo__ic {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%; background: var(--icon-bg, #e4ede2);
}
.price-promo__ic svg { width: 15px; height: 15px; fill: none; stroke: var(--icon-color, #2f5a3a); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.price-promo__badge {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .8rem 1.2rem; border-radius: 16px;
  background: var(--card-bg, var(--surface)); border: 1px solid var(--line);
  font-size: .92rem; color: var(--text);
}
.price-promo__badge strong { color: var(--text, var(--primary)); font-weight: 600; }
.price-promo__badge-ic { flex: 0 0 auto; color: var(--gold); }
.price-promo__badge-ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Price card (right) ------------------------------------------------------ */
.price-promo__card {
  padding: clamp(1.9rem, 3.5vw, 2.6rem);
  background: var(--card-bg, var(--surface));
  border-radius: 26px;
  border: 1px solid rgba(31, 58, 40, .06);
  box-shadow: 0 40px 90px -44px rgba(31, 58, 40, .5);
}
.price-promo__plan { margin: 0 0 .6rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.15rem; color: var(--text, var(--primary)); }
.price-promo__price { display: flex; align-items: baseline; gap: .35rem; }
.price-promo__amount { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(2.6rem, 5vw, 3.2rem); line-height: 1; color: var(--text, var(--primary)); letter-spacing: -.02em; }
.price-promo__period { font-size: 1rem; color: var(--muted); }
.price-promo__billing { margin: .6rem 0 1.4rem; font-size: .84rem; color: var(--muted); }

.price-promo__cta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; padding: .95rem 1.4rem; margin-bottom: 1.6rem; border-radius: 999px;
  background: var(--btn-bg, var(--primary)); color: #f3efe6;
  font-weight: 600; font-size: .98rem; text-decoration: none;
  box-shadow: 0 18px 34px -18px rgba(31, 58, 40, .7);
  transition: transform var(--transition), background var(--transition);
}
.price-promo__cta:hover { transform: translateY(-3px); background: #26492f; }
.price-promo__cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.price-promo__list { list-style: none; margin: 0; padding: 1.5rem 0 0; border-top: 1px solid var(--line); display: grid; gap: .8rem; }
.price-promo__list li { display: flex; align-items: flex-start; gap: .6rem; font-size: .93rem; line-height: 1.4; color: var(--text); }
.price-promo__list svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: #2f5a3a; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 861.98px) {
  .price-promo__grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .price-promo__text { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .price-promo__cta { transition: none; } }

/* ===== pricing-06 · .price-calc ===== */
/* ==========================================================================
   Pricing 06 · Seat Calculator — scoped under .price-calc
   ========================================================================== */

.price-calc {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

/* Header ------------------------------------------------------------------ */
.price-calc__head { max-width: 44rem; margin: 0 auto clamp(2.2rem, 4vw, 3rem); text-align: center; }
.price-calc__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.price-calc__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.price-calc__title {
  margin: 0 auto;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem);
  line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary));
}
.price-calc__title em { font-style: normal; color: var(--accent); }
.price-calc__lead { margin: 1.1rem auto 0; max-width: 42ch; font-size: 1rem; line-height: 1.65; color: var(--muted); }

/* Card -------------------------------------------------------------------- */
.price-calc__card {
  display: grid; grid-template-columns: 1.15fr .85fr;
  align-items: center; gap: clamp(1.8rem, 4vw, 3.2rem);
  max-width: 58rem; margin: 0 auto;
  padding: clamp(2rem, 4vw, 3rem);
  background: var(--card-bg, var(--surface));
  border-radius: 28px;
  border: 1px solid rgba(31, 58, 40, .06);
  box-shadow: 0 40px 90px -46px rgba(31, 58, 40, .5);
}

/* Control (slider) -------------------------------------------------------- */
.price-calc__seats { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.1rem; }
.price-calc__seats-label { font-size: .92rem; font-weight: 600; color: var(--muted); }
.price-calc__seats-val { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.9rem; color: var(--text, var(--primary)); line-height: 1; }

.price-calc__range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 8px; border-radius: 999px;
  background: linear-gradient(to right, var(--gold) 0%, var(--gold) 11%, var(--line) 11%, var(--line) 100%);
  outline: none; cursor: pointer;
}
.price-calc__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--primary); border: 4px solid var(--surface);
  box-shadow: 0 6px 16px -4px rgba(31, 58, 40, .6);
  transition: transform var(--transition);
}
.price-calc__range::-webkit-slider-thumb:hover { transform: scale(1.12); }
.price-calc__range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--primary); border: 4px solid var(--surface);
  box-shadow: 0 6px 16px -4px rgba(31, 58, 40, .6); cursor: pointer;
}
.price-calc__range:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 999px; }

.price-calc__scale { display: flex; justify-content: space-between; margin-top: .7rem; font-size: .8rem; color: var(--muted); }

/* Result ------------------------------------------------------------------ */
.price-calc__result {
  padding: clamp(1.4rem, 3vw, 2rem);
  background: radial-gradient(130% 130% at 100% 0%, #274a31, #1f3a28 55%, #16281c);
  border-radius: 22px; color: #f4efe5; text-align: center;
}
.price-calc__total { display: flex; align-items: baseline; justify-content: center; gap: .3rem; }
.price-calc__total-amount { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(2.2rem, 4.5vw, 3rem); line-height: 1; color: #fff; letter-spacing: -.02em; }
.price-calc__total-period { font-size: .95rem; color: rgba(244, 239, 229, .7); }
.price-calc__rate { margin: .7rem 0 1.4rem; font-size: .88rem; color: rgba(244, 239, 229, .82); }
.price-calc__save { color: var(--gold); font-weight: 600; }

.price-calc__cta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; padding: .9rem 1.4rem; border-radius: 999px;
  background: var(--btn-bg, var(--gold)); color: #241a0e;
  font-weight: 600; font-size: .96rem; text-decoration: none;
  box-shadow: 0 16px 30px -16px rgba(184, 148, 95, .8);
  transition: transform var(--transition), background var(--transition);
}
.price-calc__cta:hover { transform: translateY(-3px); background: #c8a570; }
.price-calc__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.price-calc__fine { margin: 1rem 0 0; font-size: .78rem; color: rgba(244, 239, 229, .6); }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .price-calc__card { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .price-calc__range::-webkit-slider-thumb, .price-calc__cta { transition: none; }
}

/* ===== faq-01 · .faq-classic ===== */
/* ==========================================================================
   FAQ 01 · Classic Accordion — scoped under .faq-classic
   ========================================================================== */

.faq-classic {
  --primary: #1f3a28;
  --accent: #9a3324;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --radius: 18px;
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.faq-classic__wrap {
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
  padding-inline: 1rem;
}

.faq-classic__head { text-align: center; margin-bottom: clamp(2rem, 5vw, 3rem); }
.faq-classic__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.faq-classic__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.faq-classic__title {
  margin: 0;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 4vw, 2.8rem);
  letter-spacing: -.01em; color: var(--text, var(--primary));
}

/* Items */
.faq-item {
  background: var(--card-bg, var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: .9rem;
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.faq-item.is-open {
  border-color: rgba(31, 58, 40, .18);
  box-shadow: 0 20px 44px -28px rgba(31, 58, 40, .35);
}

.faq-item__h { margin: 0; }
.faq-item__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text, var(--primary));
}
.faq-item__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
  border-radius: var(--radius);
}

/* Plus / minus icon */
.faq-item__icon {
  position: relative;
  flex: none;
  width: 22px; height: 22px;
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 13px; height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform var(--transition), opacity var(--transition);
}
.faq-item__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item.is-open .faq-item__icon::after { transform: translate(-50%, -50%) rotate(0); opacity: 0; }

/* Panel */
.faq-item__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition);
}
.faq-item__panel p {
  margin: 0;
  padding: 0 1.5rem 1.4rem;
  font-size: .98rem;
  line-height: 1.7;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .faq-item, .faq-item__panel, .faq-item__icon::before, .faq-item__icon::after { transition: none; }
}

/* ===== faq-02 · .faq-grid ===== */
/* ==========================================================================
   FAQ 02 · Two-column Grid — scoped under .faq-grid
   ========================================================================== */

.faq-grid {
  --primary: #1f3a28;
  --accent: #9a3324;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --radius: 18px;
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.faq-grid__wrap { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: 1rem; }

.faq-grid__head { text-align: center; margin-bottom: clamp(2.2rem, 5vw, 3.2rem); }
.faq-grid__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.faq-grid__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.faq-grid__title {
  margin: 0 0 .7rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 4vw, 2.8rem);
  letter-spacing: -.01em; color: var(--text, var(--primary));
}
.faq-grid__sub { margin: 0 auto; max-width: 34rem; color: var(--muted); font-size: 1rem; line-height: 1.6; }

.faq-grid__cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.6rem;
}

.faqg-item {
  background: var(--card-bg, var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  height: fit-content;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.faqg-item.is-open {
  border-color: rgba(31, 58, 40, .18);
  box-shadow: 0 20px 44px -28px rgba(31, 58, 40, .35);
}

.faqg-item__btn {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.2rem 1.4rem;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600; font-size: 1rem; color: var(--text, var(--primary));
}
.faqg-item__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: var(--radius); }

.faqg-item__icon { position: relative; flex: none; width: 20px; height: 20px; }
.faqg-item__icon::before,
.faqg-item__icon::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 12px; height: 2px; background: var(--accent); border-radius: 2px;
  transform: translate(-50%, -50%); transition: transform var(--transition), opacity var(--transition);
}
.faqg-item__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faqg-item.is-open .faqg-item__icon::after { transform: translate(-50%, -50%) rotate(0); opacity: 0; }

.faqg-item__panel { max-height: 0; overflow: hidden; transition: max-height var(--transition); }
.faqg-item__panel p {
  margin: 0; padding: 0 1.4rem 1.3rem;
  font-size: .95rem; line-height: 1.65; color: var(--muted);
}

@media (max-width: 767.98px) { .faq-grid__cols { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .faqg-item, .faqg-item__panel, .faqg-item__icon::before, .faqg-item__icon::after { transition: none; }
}

/* ===== faq-03 · .faq-split ===== */
/* ==========================================================================
   FAQ 03 · Split with CTA — scoped under .faq-split
   ========================================================================== */

.faq-split {
  --primary: #1f3a28;
  --accent: #9a3324;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --radius: 18px;
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.faq-split__wrap {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 992px) {
  .faq-split__wrap { grid-template-columns: 0.85fr 1.15fr; gap: 4rem; align-items: start; }
  .faq-split__aside { position: sticky; top: 2rem; }
}

/* Aside */
.faq-split__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.faq-split__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.faq-split__title {
  margin: 0 0 1rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary));
}
.faq-split__text { margin: 0 0 1.8rem; max-width: 26rem; color: var(--muted); line-height: 1.7; }
.faq-split__cta {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .95rem 1.7rem; border-radius: 100px;
  background: var(--btn-bg, var(--primary)); color: #fff; font-weight: 600; text-decoration: none;
  box-shadow: 0 16px 34px -14px rgba(31, 58, 40, .55);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.faq-split__cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition); }
.faq-split__cta:hover { background: #285035; transform: translateY(-3px); }
.faq-split__cta:hover svg { transform: translateX(4px); }

/* Accordion */
.faqs-item {
  background: var(--card-bg, var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: .9rem;
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.faqs-item.is-open { border-color: rgba(31, 58, 40, .18); box-shadow: 0 20px 44px -28px rgba(31, 58, 40, .35); }
.faqs-item__btn {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.02rem; color: var(--text, var(--primary));
}
.faqs-item__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: var(--radius); }
.faqs-item__icon { position: relative; flex: none; width: 22px; height: 22px; }
.faqs-item__icon::before,
.faqs-item__icon::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 13px; height: 2px; background: var(--accent); border-radius: 2px;
  transform: translate(-50%, -50%); transition: transform var(--transition), opacity var(--transition);
}
.faqs-item__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faqs-item.is-open .faqs-item__icon::after { transform: translate(-50%, -50%) rotate(0); opacity: 0; }
.faqs-item__panel { max-height: 0; overflow: hidden; transition: max-height var(--transition); }
.faqs-item__panel p { margin: 0; padding: 0 1.5rem 1.35rem; font-size: .97rem; line-height: 1.7; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .faqs-item, .faqs-item__panel, .faqs-item__icon::before, .faqs-item__icon::after, .faq-split__cta { transition: none; }
}

/* ===== faq-04 · .faq-search ===== */
/* ==========================================================================
   FAQ 04 · Searchable — scoped under .faq-search
   ========================================================================== */

.faq-search {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.faq-search__head { max-width: 42rem; margin: 0 auto clamp(2rem, 4vw, 2.8rem); text-align: center; }
.faq-search__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.faq-search__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.faq-search__title { margin: 0 auto 1.5rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem); line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary)); }
.faq-search__title em { font-style: normal; color: var(--accent); }

.faq-search__field {
  display: flex; align-items: center; gap: .7rem;
  padding: .3rem .3rem .3rem 1.1rem; border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--surface); box-shadow: 0 16px 40px -26px rgba(31, 58, 40, .5);
  transition: border-color var(--transition);
}
.faq-search__field:focus-within { border-color: var(--gold); }
.faq-search__field svg { flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.faq-search__field input { flex: 1; padding: .75rem .5rem; border: none; background: transparent; font: inherit; font-size: .97rem; color: var(--text); }
.faq-search__field input:focus { outline: none; }

.faq-search__list { max-width: 46rem; margin: 0 auto; display: grid; gap: .8rem; }

.fs-item { background: var(--card-bg, var(--surface)); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: box-shadow var(--transition), border-color var(--transition); }
.fs-item.is-open { border-color: transparent; box-shadow: 0 24px 54px -34px rgba(31, 58, 40, .42); }
.fs-item.is-hidden { display: none; }
.fs-item__h { margin: 0; }
.fs-item__btn { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 1.2rem 1.4rem; border: none; background: transparent; cursor: pointer; text-align: left; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--text, var(--primary)); }
.fs-item__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; border-radius: 12px; }
.fs-item__icon { flex: 0 0 auto; position: relative; width: 18px; height: 18px; }
.fs-item__icon::before, .fs-item__icon::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); transition: transform var(--transition); }
.fs-item__icon::after { transform: rotate(90deg); }
.fs-item.is-open .fs-item__icon::after { transform: rotate(0); }
.fs-item__panel { max-height: 0; overflow: hidden; transition: max-height var(--transition); }
.fs-item__panel[hidden] { display: block; }
.fs-item__panel p { margin: 0; padding: 0 1.4rem 1.3rem; font-size: .95rem; line-height: 1.6; color: var(--muted); }

.faq-search__empty { max-width: 46rem; margin: 1.2rem auto 0; text-align: center; font-size: .95rem; color: var(--muted); }
.faq-search__empty a { color: var(--accent); font-weight: 600; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .fs-item, .fs-item__icon::before, .fs-item__icon::after, .fs-item__panel, .faq-search__field { transition: none; }
}

/* ===== faq-05 · .faq-columns ===== */
/* ==========================================================================
   FAQ 05 · Two Column — scoped under .faq-columns
   ========================================================================== */

.faq-columns {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.faq-columns__head { text-align: center; margin-bottom: clamp(2.4rem, 5vw, 3.4rem); }
.faq-columns__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.faq-columns__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.faq-columns__title { margin: 0 auto; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem); line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary)); }
.faq-columns__title em { font-style: normal; color: var(--accent); }

.faq-columns__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.6rem); max-width: 60rem; margin: 0 auto; }

.fc-qa {
  padding: 1.6rem 1.7rem;
  background: var(--card-bg, var(--surface)); border: 1px solid rgba(31, 58, 40, .06);
  border-radius: 18px; box-shadow: 0 22px 50px -36px rgba(31, 58, 40, .3);
  transition: transform var(--transition), box-shadow var(--transition);
}
.fc-qa:hover { transform: translateY(-4px); box-shadow: 0 32px 64px -34px rgba(31, 58, 40, .44); }
.fc-qa__mark {
  display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: .9rem;
  border-radius: 10px; background: var(--icon-bg, #e4ede2); color: var(--icon-color, #2f5a3a);
  font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.05rem;
}
.fc-qa__q { margin: 0 0 .5rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.12rem; color: var(--text, var(--primary)); }
.fc-qa__a { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--muted); }

@media (max-width: 767.98px) { .faq-columns__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .fc-qa { transition: none; } }

/* ===== faq-06 · .faq-cta ===== */
/* ==========================================================================
   FAQ 06 · With Contact CTA — scoped under .faq-cta
   ========================================================================== */

.faq-cta {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.faq-cta__grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }

.faq-cta__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.faq-cta__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.faq-cta__title { margin: 0 0 1.6rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.85rem, 3.6vw, 2.6rem); line-height: 1.14; letter-spacing: -.01em; color: var(--text, var(--primary)); }
.faq-cta__title em { font-style: normal; color: var(--accent); }

/* Accordion --------------------------------------------------------------- */
.faq-cta__list { display: grid; gap: .8rem; }
.fc-item { background: var(--card-bg, var(--surface)); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: box-shadow var(--transition), border-color var(--transition); }
.fc-item.is-open { border-color: transparent; box-shadow: 0 24px 54px -34px rgba(31, 58, 40, .42); }
.fc-item__h { margin: 0; }
.fc-item__btn { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 1.2rem 1.4rem; border: none; background: transparent; cursor: pointer; text-align: left; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--text, var(--primary)); }
.fc-item__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; border-radius: 12px; }
.fc-item__icon { flex: 0 0 auto; position: relative; width: 18px; height: 18px; }
.fc-item__icon::before, .fc-item__icon::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); transition: transform var(--transition); }
.fc-item__icon::after { transform: rotate(90deg); }
.fc-item.is-open .fc-item__icon::after { transform: rotate(0); }
.fc-item__panel { max-height: 0; overflow: hidden; transition: max-height var(--transition); }
.fc-item__panel[hidden] { display: block; }
.fc-item__panel p { margin: 0; padding: 0 1.4rem 1.3rem; font-size: .95rem; line-height: 1.6; color: var(--muted); }

/* Contact card ------------------------------------------------------------ */
.faq-cta__card {
  position: sticky; top: 2rem;
  padding: clamp(1.8rem, 3vw, 2.4rem); text-align: center;
  background: radial-gradient(130% 130% at 100% 0%, #274a31, #1f3a28 55%, #16281c);
  border-radius: 24px; color: rgba(244, 239, 229, .82);
  box-shadow: 0 34px 74px -40px rgba(15, 28, 19, .8);
}
.faq-cta__ic { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 1.1rem; border-radius: 16px; background: rgba(184, 148, 95, .18); color: var(--gold); }
.faq-cta__ic svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.faq-cta__ch { margin: 0 0 .6rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.3rem; color: #fff; }
.faq-cta__ct { margin: 0 0 1.5rem; font-size: .95rem; line-height: 1.6; }
.faq-cta__btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .9rem 1.6rem; border-radius: 999px; background: var(--btn-bg, var(--gold)); color: #241a0e;
  font-weight: 600; font-size: .95rem; text-decoration: none;
  box-shadow: 0 16px 30px -16px rgba(184, 148, 95, .8);
  transition: transform var(--transition), background var(--transition), gap var(--transition);
}
.faq-cta__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition); }
.faq-cta__btn:hover { transform: translateY(-3px); background: #c8a570; gap: .8rem; }
.faq-cta__btn:hover svg { transform: translateX(3px); }
.faq-cta__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.faq-cta__note { margin: 1rem 0 0; font-size: .82rem; color: rgba(244, 239, 229, .6); }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 861.98px) {
  .faq-cta__grid { grid-template-columns: 1fr; }
  .faq-cta__card { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .fc-item, .fc-item__icon::before, .fc-item__icon::after, .fc-item__panel, .faq-cta__btn, .faq-cta__btn svg { transition: none; }
}

/* ===== team-01 · .team-cards ===== */
/* ==========================================================================
   Team 01 · Member Cards — scoped under .team-cards
   ========================================================================== */

.team-cards {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.team-cards__head { max-width: 44rem; margin: 0 auto clamp(2.4rem, 5vw, 3.4rem); text-align: center; }
.team-cards__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.team-cards__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.team-cards__title {
  margin: 0 auto;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem);
  line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary));
}
.team-cards__title em { font-style: normal; color: var(--accent); }
.team-cards__lead { margin: 1.1rem auto 0; max-width: 44ch; font-size: 1rem; line-height: 1.65; color: var(--muted); }

.team-cards__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }

.tmember { text-align: center; }
.tmember__photo {
  position: relative;
  aspect-ratio: 3 / 3.4;
  margin-bottom: 1.1rem;
  border-radius: 22px; overflow: hidden;
  background: #e4ede2;
  box-shadow: 0 24px 54px -34px rgba(31, 58, 40, .4);
}
.tmember__photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.tmember:hover .tmember__photo img { transform: scale(1.06); }

.tmember__social {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: center; gap: .6rem;
  padding: 1.4rem 1rem 1.1rem;
  background: linear-gradient(to top, rgba(15, 28, 19, .82), transparent);
  transform: translateY(100%); opacity: 0;
  transition: transform var(--transition), opacity var(--transition);
}
.tmember:hover .tmember__social, .tmember:focus-within .tmember__social { transform: translateY(0); opacity: 1; }
.tmember__social a {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff;
  backdrop-filter: blur(3px);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.tmember__social a:hover { background: var(--gold); color: #241a0e; transform: translateY(-3px); }
.tmember__social a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tmember__social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.tmember__name { margin: 0 0 .2rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.14rem; color: var(--text, var(--primary)); }
.tmember__role { margin: 0; font-size: .9rem; color: var(--muted); }

@media (max-width: 991.98px) { .team-cards__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479.98px) { .team-cards__grid { grid-template-columns: 1fr; max-width: 20rem; margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) {
  .tmember__photo img, .tmember__social, .tmember__social a { transition: none; }
}

/* ===== team-02 · .team-lead ===== */
/* ==========================================================================
   Team 02 · Featured Leader — scoped under .team-lead
   ========================================================================== */

.team-lead {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.team-lead__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.team-lead__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.team-lead__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.team-lead__title {
  margin: 0;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem);
  line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary));
}
.team-lead__title em { font-style: normal; color: var(--accent); }

.team-lead__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: stretch; }

/* Featured card ----------------------------------------------------------- */
.lead-card {
  display: grid; grid-template-columns: .82fr 1.18fr;
  background: var(--card-bg, var(--surface));
  border: 1px solid rgba(31, 58, 40, .05);
  border-radius: 24px; overflow: hidden;
  box-shadow: 0 34px 74px -38px rgba(31, 58, 40, .5);
}
.lead-card__photo { position: relative; min-height: 260px; background: #e4ede2; }
.lead-card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lead-card__body { padding: clamp(1.6rem, 3vw, 2.2rem); display: flex; flex-direction: column; }
.lead-card__tag {
  align-self: flex-start; margin-bottom: .8rem;
  padding: .28rem .75rem; border-radius: 999px;
  background: #f2e2df; color: var(--accent);
  font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.lead-card__name { margin: 0 0 .2rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.5rem; color: var(--text, var(--primary)); }
.lead-card__role { margin: 0 0 1rem; font-size: .95rem; color: var(--gold); font-weight: 600; }
.lead-card__bio { margin: 0 0 1.4rem; font-size: .95rem; line-height: 1.6; color: var(--muted); font-style: italic; }
.lead-card__social { margin-top: auto; display: flex; gap: .6rem; }
.lead-card__social a {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: #e4ede2; color: #2f5a3a;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.lead-card__social a:hover { background: var(--primary); color: var(--gold); transform: translateY(-3px); }
.lead-card__social a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lead-card__social svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Members ----------------------------------------------------------------- */
.team-lead__members { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.lead-mini {
  display: flex; align-items: center; gap: .9rem;
  padding: 1.1rem 1.2rem;
  background: var(--card-bg, var(--surface));
  border: 1px solid var(--line);
  border-radius: 18px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.lead-mini:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 24px 50px -30px rgba(31, 58, 40, .42); }
.lead-mini img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #e4ede2; flex: 0 0 auto; }
.lead-mini__name { margin: 0 0 .1rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1rem; color: var(--text, var(--primary)); }
.lead-mini__role { margin: 0; font-size: .82rem; color: var(--muted); }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .team-lead__grid { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .lead-card { grid-template-columns: 1fr; }
  .lead-card__photo { min-height: 300px; }
  .team-lead__members { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .lead-card__social a, .lead-mini { transition: none; }
}

/* ===== team-03 · .team-overlay ===== */
/* ==========================================================================
   Team 03 · Overlay Cards — scoped under .team-overlay
   ========================================================================== */

.team-overlay {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --transition: .45s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
}

.team-overlay__head { text-align: center; margin-bottom: clamp(2.2rem, 5vw, 3.2rem); }
.team-overlay__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.team-overlay__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.team-overlay__title {
  margin: 0 auto;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem);
  line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary));
}
.team-overlay__title em { font-style: normal; color: var(--accent); }

.team-overlay__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }

.ovl-card {
  position: relative;
  aspect-ratio: 3 / 3.8;
  border-radius: 24px; overflow: hidden;
  background: var(--card-bg, #16281c);
  box-shadow: 0 30px 66px -36px rgba(31, 58, 40, .5);
}
.ovl-card__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--transition);
}
.ovl-card:hover .ovl-card__img { transform: scale(1.06); }

.ovl-card__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem;
  background: linear-gradient(to top, rgba(13, 24, 17, .92) 40%, rgba(13, 24, 17, .5) 75%, transparent);
  color: #f4efe5;
}
.ovl-card__name { margin: 0 0 .15rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.3rem; color: var(--card-ink, #fff); }
.ovl-card__role { margin: 0; font-size: .9rem; font-weight: 600; color: var(--gold); }

.ovl-card__bio {
  margin: 0; font-size: .9rem; line-height: 1.5; color: rgba(244, 239, 229, .82);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height var(--transition), opacity var(--transition), margin var(--transition);
}
.ovl-card:hover .ovl-card__bio, .ovl-card:focus-within .ovl-card__bio { max-height: 6rem; opacity: 1; margin: .7rem 0 1rem; }

.ovl-card__social {
  display: flex; gap: .55rem;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height var(--transition), opacity var(--transition);
}
.ovl-card:hover .ovl-card__social, .ovl-card:focus-within .ovl-card__social { max-height: 4rem; opacity: 1; }
.ovl-card__social a {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff;
  backdrop-filter: blur(3px);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.ovl-card__social a:hover { background: var(--gold); color: #241a0e; transform: translateY(-3px); }
.ovl-card__social a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ovl-card__social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 767.98px) { .team-overlay__grid { grid-template-columns: 1fr; max-width: 22rem; margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) {
  .ovl-card__img, .ovl-card__bio, .ovl-card__social, .ovl-card__social a { transition: none; }
  .ovl-card__bio { max-height: 6rem; opacity: 1; margin: .7rem 0 1rem; }
  .ovl-card__social { max-height: 4rem; opacity: 1; }
}

/* ===== team-04 · .team-list ===== */
/* ==========================================================================
   Team 04 · Roster List — scoped under .team-list
   ========================================================================== */

.team-list {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.team-list__head {
  display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.team-list__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.team-list__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.team-list__title {
  margin: 0;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.7rem);
  line-height: 1.13; letter-spacing: -.01em; color: var(--text, var(--primary));
}
.team-list__title em { font-style: normal; color: var(--accent); }
.team-list__lead { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--muted); }

.team-list__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.trow {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 1.2rem;
  padding: 1.1rem 1.5rem;
  background: var(--card-bg, var(--surface));
  border: 1px solid var(--line);
  border-radius: 18px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.trow:hover { transform: translateX(5px); border-color: transparent; box-shadow: 0 24px 54px -32px rgba(31, 58, 40, .4); }

.trow__avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #e4ede2; }
.trow__id { display: flex; flex-direction: column; }
.trow__name { font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.08rem; color: var(--text, var(--primary)); }
.trow__role { font-size: .88rem; color: var(--muted); }
.trow__dept {
  padding: .32rem .85rem; border-radius: 999px;
  background: #e4ede2; color: #2f5a3a;
  font-size: .78rem; font-weight: 600; letter-spacing: .03em;
}

.trow__social { display: flex; gap: .5rem; }
.trow__social a {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 50%; background: #f7f2e9; color: var(--primary);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.trow__social a:hover { background: var(--primary); color: var(--gold); transform: translateY(-3px); }
.trow__social a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.trow__social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .team-list__head { grid-template-columns: 1fr; }
  .trow { grid-template-columns: auto 1fr auto; }
  .trow__dept { display: none; }
}
@media (max-width: 479.98px) {
  .trow { grid-template-columns: auto 1fr; row-gap: .6rem; padding: 1.1rem 1.2rem; }
  .trow__social { grid-column: 1 / -1; justify-content: flex-start; padding-left: 68px; }
}
@media (prefers-reduced-motion: reduce) { .trow, .trow__social a { transition: none; } }

/* ===== team-05 · .team-circles ===== */
/* ==========================================================================
   Team 05 · Circular Avatars — scoped under .team-circles
   ========================================================================== */

.team-circles {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.team-circles__head { max-width: 44rem; margin: 0 auto clamp(2.4rem, 5vw, 3.4rem); text-align: center; }
.team-circles__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.team-circles__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.team-circles__title {
  margin: 0 auto;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem);
  line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary));
}
.team-circles__title em { font-style: normal; color: var(--accent); }
.team-circles__lead { margin: 1.1rem auto 0; max-width: 44ch; font-size: 1rem; line-height: 1.65; color: var(--muted); }

.team-circles__grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.5rem 1rem;
  max-width: 60rem; margin: 0 auto;
}

.tcircle { text-align: center; margin: 0; text-decoration: none; }
.tcircle__ring {
  display: block; position: relative;
  width: 100%; max-width: 130px; aspect-ratio: 1; margin: 0 auto .9rem;
  border-radius: 50%; padding: 4px;
  background: var(--card-bg, var(--surface));
  box-shadow: 0 18px 40px -22px rgba(31, 58, 40, .5);
  transition: transform var(--transition), box-shadow var(--transition);
}
.tcircle__ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  padding: 3px; background: linear-gradient(140deg, var(--gold), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity var(--transition);
}
.tcircle__ring img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: #e4ede2; }
.tcircle:hover .tcircle__ring { transform: translateY(-6px); box-shadow: 0 28px 54px -22px rgba(31, 58, 40, .6); }
.tcircle:hover .tcircle__ring::before { opacity: 1; }

.tcircle__name { display: block; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1rem; color: var(--text, var(--primary)); }
.tcircle__role { display: block; font-size: .82rem; color: var(--muted); }

/* Join tile --------------------------------------------------------------- */
.tcircle--join:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 12px; }
.tcircle__ring--join {
  display: grid; place-items: center; padding: 0;
  background: transparent; border: 2px dashed #c4bba6; box-shadow: none;
  color: var(--primary);
  transition: transform var(--transition), border-color var(--transition), background var(--transition), color var(--transition);
}
.tcircle__ring--join svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tcircle--join:hover .tcircle__ring--join { transform: translateY(-6px); border-color: var(--primary); background: var(--primary); color: var(--gold); }
.tcircle--join .tcircle__name { color: var(--accent); }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 861.98px) { .team-circles__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 479.98px) { .team-circles__grid { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .tcircle__ring, .tcircle__ring::before, .tcircle__ring--join { transition: none; }
}

/* ===== testimonials-01 · .tst-cards ===== */
/* ==========================================================================
   Testimonials 01 · Quote Cards — scoped under .tst-cards
   ========================================================================== */

.tst-cards {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --radius: 22px;
  --shadow: 0 26px 60px -34px rgba(31, 58, 40, .3);
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

/* Header ------------------------------------------------------------------ */
.tst-cards__head { max-width: 46rem; margin: 0 auto clamp(2.4rem, 5vw, 3.6rem); text-align: center; }
.tst-cards__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.tst-cards__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.tst-cards__title {
  margin: 0 auto; max-width: 18ch;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem);
  line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary));
}
.tst-cards__title em { font-style: normal; color: var(--accent); }
.tst-cards__lead { margin: 1.1rem auto 0; max-width: 46ch; font-size: 1rem; line-height: 1.65; color: var(--muted); }

/* Grid -------------------------------------------------------------------- */
.tst-cards__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }

/* Card -------------------------------------------------------------------- */
.tcard {
  position: relative;
  display: flex; flex-direction: column;
  margin: 0;
  padding: 2.4rem 1.9rem 1.9rem;
  background: var(--card-bg, var(--surface));
  border: 1px solid rgba(31, 58, 40, .05);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}
.tcard:hover { transform: translateY(-6px); box-shadow: 0 38px 74px -34px rgba(31, 58, 40, .46); }

.tcard__quote {
  position: absolute; top: .7rem; right: 1.5rem;
  font-family: "Poppins", Georgia, serif;
  font-size: 5rem; line-height: 1; color: var(--gold);
  opacity: .22; pointer-events: none;
}

.tcard__stars { display: inline-flex; gap: .2rem; margin-bottom: 1.1rem; }
.tcard__stars svg { width: 18px; height: 18px; fill: var(--gold); }

.tcard__text { margin: 0 0 1.7rem; font-size: 1rem; line-height: 1.62; color: var(--text); }

.tcard__author { display: flex; align-items: center; gap: .9rem; margin-top: auto; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.tcard__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: #e4ede2; flex: 0 0 auto; }
.tcard__meta { display: flex; flex-direction: column; }
.tcard__name { font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: .98rem; color: var(--text, var(--primary)); }
.tcard__role { font-size: .82rem; color: var(--muted); }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 991.98px) { .tst-cards__grid { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) { .tcard { transition: none; } }

/* ===== testimonials-02 · .tst-spotlight ===== */
/* ==========================================================================
   Testimonials 02 · Spotlight Quote — scoped under .tst-spotlight
   ========================================================================== */

.tst-spotlight {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --shadow: 0 40px 90px -46px rgba(31, 58, 40, .5);
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.tst-spotlight__eyebrow {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  margin: 0 0 clamp(1.6rem, 4vw, 2.4rem);
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.tst-spotlight__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }

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

/* Card -------------------------------------------------------------------- */
.tst-spotlight__card {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  align-items: stretch;
  max-width: 62rem; margin: 0 auto;
  background: var(--card-bg, var(--surface));
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(31, 58, 40, .05);
}

.tst-spotlight__media { position: relative; min-height: 340px; background: #e4ede2; }
.tst-spotlight__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tst-spotlight__badge {
  position: absolute; right: -26px; bottom: 2rem;
  display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 20px;
  background: var(--icon-bg, var(--primary)); color: var(--icon-color, var(--gold));
  box-shadow: 0 20px 40px -18px rgba(31, 58, 40, .7);
  z-index: 2;
}
.tst-spotlight__badge svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.tst-spotlight__body { padding: clamp(2rem, 4vw, 3.4rem); display: flex; flex-direction: column; justify-content: center; }

.tst-spotlight__stars { display: inline-flex; gap: .25rem; margin-bottom: 1.4rem; }
.tst-spotlight__stars svg { width: 20px; height: 20px; fill: var(--gold); }

.tst-spotlight__quote {
  margin: 0 0 1.8rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600; font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  line-height: 1.45; letter-spacing: -.01em; color: var(--text, var(--primary));
}
.tst-spotlight__quote em { font-style: normal; color: var(--accent); }

.tst-spotlight__author { display: flex; flex-direction: column; gap: .15rem; }
.tst-spotlight__name { font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--text, var(--primary)); }
.tst-spotlight__role { font-size: .88rem; color: var(--muted); }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .tst-spotlight__card { grid-template-columns: 1fr; }
  .tst-spotlight__media { min-height: 260px; }
  .tst-spotlight__badge { right: 1.6rem; bottom: -26px; }
}

/* ===== testimonials-03 · .tst-slider ===== */
/* ==========================================================================
   Testimonials 03 · Quote Slider — scoped under .tst-slider
   ========================================================================== */

.tst-slider {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --shadow: 0 30px 70px -40px rgba(31, 58, 40, .45);
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

/* Header ------------------------------------------------------------------ */
.tst-slider__head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.tst-slider__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.tst-slider__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.tst-slider__title {
  margin: 0 auto; max-width: 20ch;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem);
  line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary));
}
.tst-slider__title em { font-style: normal; color: var(--accent); }

/* Viewport ---------------------------------------------------------------- */
.tst-slider__viewport {
  display: flex; align-items: center; gap: clamp(.5rem, 2vw, 1.4rem);
  max-width: 54rem; margin: 0 auto;
}

.tst-slider__track {
  flex: 1;
  background: var(--card-bg, var(--surface));
  border: 1px solid rgba(31, 58, 40, .05);
  border-radius: 26px;
  box-shadow: var(--shadow);
  padding: clamp(2rem, 4vw, 3.2rem);
  text-align: center;
}

.tslide { margin: 0; }
.tslide[hidden] { display: none; }
.tslide.is-active { animation: tslide-in .5s cubic-bezier(.22, 1, .36, 1); }
@keyframes tslide-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.tslide__quote {
  display: block;
  font-family: "Poppins", Georgia, serif;
  font-size: 3.6rem; line-height: .8; color: var(--gold);
  opacity: .3; margin-bottom: .4rem;
}
.tslide__text {
  margin: 0 auto 1.8rem; max-width: 44ch;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600; font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.5; letter-spacing: -.01em; color: var(--text, var(--primary));
}

.tslide__author { display: inline-flex; align-items: center; gap: .8rem; }
.tslide__avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; background: #e4ede2; }
.tslide__meta { display: flex; flex-direction: column; text-align: left; }
.tslide__name { font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: .98rem; color: var(--text, var(--primary)); }
.tslide__role { font-size: .82rem; color: var(--muted); }

/* Nav buttons ------------------------------------------------------------- */
.tst-slider__nav {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card-bg, var(--surface)); color: var(--primary);
  cursor: pointer;
  box-shadow: 0 14px 30px -18px rgba(31, 58, 40, .5);
  transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}
.tst-slider__nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tst-slider__nav:hover { background: var(--primary); color: var(--gold); border-color: transparent; transform: scale(1.06); }
.tst-slider__nav:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Dots -------------------------------------------------------------------- */
.tst-slider__dots { display: flex; justify-content: center; gap: .55rem; margin-top: 1.8rem; }
.tst-slider__dot {
  width: 9px; height: 9px; padding: 0;
  border: none; border-radius: 999px;
  background: rgba(31, 58, 40, .2); cursor: pointer;
  transition: width var(--transition), background var(--transition);
}
.tst-slider__dot.is-active { width: 26px; background: var(--accent, var(--gold)); }
.tst-slider__dot:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .tst-slider__nav { width: 44px; height: 44px; }
  .tslide__author { flex-direction: column; text-align: center; gap: .5rem; }
  .tslide__meta { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .tst-slider__nav, .tst-slider__dot { transition: none; }
  .tslide.is-active { animation: none; }
}

/* ===== testimonials-04 · .tst-wall ===== */
/* ==========================================================================
   Testimonials 04 · Quote Wall (masonry) — scoped under .tst-wall
   ========================================================================== */

.tst-wall {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --radius: 20px;
  --shadow: 0 24px 56px -34px rgba(31, 58, 40, .32);
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

/* Header ------------------------------------------------------------------ */
.tst-wall__head {
  display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.tst-wall__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.tst-wall__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.tst-wall__title {
  margin: 0; max-width: 16ch;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem);
  line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary));
}
.tst-wall__title em { font-style: normal; color: var(--accent); }
.tst-wall__lead { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--muted); }

/* Masonry grid via CSS columns ------------------------------------------- */
.tst-wall__grid { column-count: 3; column-gap: 1.5rem; }

.wcard {
  break-inside: avoid;
  margin: 0 0 1.5rem;
  padding: 1.7rem 1.6rem;
  background: var(--card-bg, var(--surface));
  border: 1px solid rgba(31, 58, 40, .05);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}
.wcard:hover { transform: translateY(-5px); box-shadow: 0 34px 66px -32px rgba(31, 58, 40, .44); }

.wcard__text { margin: 0 0 1.3rem; font-size: .97rem; line-height: 1.6; color: var(--text); }

.wcard__author { display: flex; align-items: center; gap: .8rem; }
.wcard__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #e4ede2; flex: 0 0 auto; }
.wcard__meta { display: flex; flex-direction: column; }
.wcard__name { font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: .94rem; color: var(--text, var(--primary)); }
.wcard__role { font-size: .8rem; color: var(--muted); }

/* Featured (dark) card ---------------------------------------------------- */
.wcard--feature {
  position: relative;
  background: radial-gradient(130% 130% at 0% 0%, #274a31, #1f3a28 55%, #16281c);
  border: none;
  color: #f4efe5;
  box-shadow: 0 34px 70px -36px rgba(15, 28, 19, .8);
  padding-top: 2.4rem;
}
.wcard--feature .wcard__quote {
  position: absolute; top: .6rem; left: 1.4rem;
  font-family: "Poppins", Georgia, serif;
  font-size: 3.4rem; line-height: 1; color: var(--gold); opacity: .5;
}
.wcard--feature .wcard__text { color: #f4efe5; font-family: "Poppins", system-ui, sans-serif; font-weight: 500; font-size: 1.06rem; line-height: 1.55; }
.wcard--feature .wcard__name { color: #fff; }
.wcard--feature .wcard__role { color: rgba(244, 239, 229, .7); }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 861.98px) {
  .tst-wall__head { grid-template-columns: 1fr; }
  .tst-wall__grid { column-count: 2; }
}
@media (max-width: 539.98px) {
  .tst-wall__grid { column-count: 1; }
}
@media (prefers-reduced-motion: reduce) { .wcard { transition: none; } }

/* ===== testimonials-05 · .tst-proof ===== */
/* ==========================================================================
   Testimonials 05 · Social Proof Band — scoped under .tst-proof
   ========================================================================== */

.tst-proof {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --shadow: 0 30px 70px -40px rgba(31, 58, 40, .4);
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.tst-proof__eyebrow {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  margin: 0 0 clamp(1.6rem, 4vw, 2.4rem);
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.tst-proof__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }

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

/* Card -------------------------------------------------------------------- */
.tst-proof__card {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  max-width: 60rem; margin: 0 auto;
  padding: clamp(2rem, 4vw, 3rem);
  background: var(--card-bg, var(--surface));
  border: 1px solid rgba(31, 58, 40, .05);
  border-radius: 28px;
  box-shadow: var(--shadow);
}

/* Rating (left) ----------------------------------------------------------- */
.tst-proof__score {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(3rem, 7vw, 4.4rem); line-height: 1;
  color: var(--text, var(--primary)); letter-spacing: -.02em;
}
.tst-proof__score span { font-size: .35em; color: var(--muted); font-weight: 600; }
.tst-proof__stars { display: inline-flex; gap: .2rem; margin: .7rem 0 1.2rem; }
.tst-proof__stars svg { width: 20px; height: 20px; fill: var(--gold); }

.tst-proof__stack { display: flex; align-items: center; margin-bottom: 1rem; }
.tst-proof__stack img {
  width: 42px; height: 42px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--surface); margin-left: -12px; background: #e4ede2;
}
.tst-proof__stack img:first-child { margin-left: 0; }
.tst-proof__more {
  display: grid; place-items: center;
  min-width: 42px; height: 42px; padding: 0 .5rem;
  margin-left: -12px; border-radius: 999px;
  border: 3px solid var(--surface);
  background: var(--icon-bg, var(--primary)); color: var(--icon-color, var(--gold));
  font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: .78rem;
}
.tst-proof__caption { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--muted); max-width: 26ch; }
.tst-proof__caption strong { color: var(--text, var(--primary)); font-weight: 600; }

/* Logos (right) ----------------------------------------------------------- */
.tst-proof__logos {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem 1.4rem;
  padding-left: clamp(0rem, 3vw, 2.5rem);
  border-left: 1px solid var(--line);
}
.tst-proof__logo {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: 1rem; letter-spacing: .06em;
  color: #9a9a8c;
  transition: color var(--transition), transform var(--transition);
}
.tst-proof__logo svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tst-proof__logo:hover { color: var(--primary); transform: translateY(-2px); }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .tst-proof__card { grid-template-columns: 1fr; text-align: center; }
  .tst-proof__stars, .tst-proof__stack { justify-content: center; }
  .tst-proof__caption { margin-inline: auto; }
  .tst-proof__logos { border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: 1.6rem; }
}
@media (max-width: 419.98px) {
  .tst-proof__logos { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .tst-proof__logo { transition: none; } }

/* ===== testimonials-06 · .tst-video ===== */
/* ==========================================================================
   Testimonials 06 · Video Spotlight — scoped under .tst-video
   ========================================================================== */

.tst-video {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: radial-gradient(120% 130% at 100% 0%, var(--grad-from, #274a31) 0%, #1f3a28 45%, var(--grad-to, #16281c) 100%);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: #f4efe5;
}

.tst-video__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  max-width: 66rem; margin: 0 auto;
}

/* Media ------------------------------------------------------------------- */
.tst-video__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 26px;
  overflow: hidden;
  background: #16281c;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .6);
}
.tst-video__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.tst-video__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 28, 20, .1), rgba(16, 28, 20, .5)); }

.tst-video__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 2;
  display: grid; place-items: center;
  width: 78px; height: 78px;
  border: none; border-radius: 50%;
  background: var(--btn-bg, var(--gold)); color: #241a0e;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(184, 148, 95, .55);
  animation: tstvid-pulse 2.6s infinite;
  transition: transform var(--transition), background var(--transition);
}
.tst-video__play svg { width: 30px; height: 30px; fill: currentColor; margin-left: 3px; }
.tst-video__play:hover { transform: translate(-50%, -50%) scale(1.08); background: #c8a570; }
.tst-video__play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@keyframes tstvid-pulse {
  0% { box-shadow: 0 0 0 0 rgba(184, 148, 95, .5); }
  70% { box-shadow: 0 0 0 22px rgba(184, 148, 95, 0); }
  100% { box-shadow: 0 0 0 0 rgba(184, 148, 95, 0); }
}

.tst-video__tag {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 2;
  padding: .35rem .8rem; border-radius: 999px;
  background: rgba(16, 28, 20, .6); backdrop-filter: blur(4px);
  color: #f4efe5; font-size: .78rem; font-weight: 500; letter-spacing: .02em;
}

/* Body -------------------------------------------------------------------- */
.tst-video__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1.2rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--gold));
}
.tst-video__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--gold)); }

.tst-video__quote {
  margin: 0 0 1.6rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600; font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.42; letter-spacing: -.01em; color: var(--text, #fff);
}

.tst-video__author { display: flex; flex-direction: column; gap: .15rem; }
.tst-video__name { font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--text, #fff); }
.tst-video__role { font-size: .9rem; color: rgba(244, 239, 229, .7); }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .tst-video__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .tst-video__play { animation: none; transition: none; }
}

/* ===== clients-01 · .cl-strip ===== */
/* ==========================================================================
   Clients 01 · Logo Strip — scoped under .cl-strip
   ========================================================================== */

.cl-strip {
  --primary: #1f3a28;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --muted: #6e6e62;
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(2.6rem, 6vw, 4.5rem) 0;
  font-family: "Inter", system-ui, sans-serif;
}

.cl-strip__eyebrow {
  margin: 0 0 clamp(1.6rem, 4vw, 2.4rem); text-align: center;
  font-size: .82rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}

.cl-strip__logos {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(1.5rem, 5vw, 3.5rem);
}
.cl-logo {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: 1.15rem; letter-spacing: .06em;
  color: var(--text, #9a9a8c);
  transition: color var(--transition), transform var(--transition);
}
.cl-logo svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cl-strip__logos li:hover .cl-logo { color: var(--primary); transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) { .cl-logo { transition: none; } }

/* ===== clients-02 · .cl-marquee ===== */
/* ==========================================================================
   Clients 02 · Logo Marquee — scoped under .cl-marquee
   ========================================================================== */

.cl-marquee {
  --primary: #1f3a28;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --muted: #6e6e62;

  background: var(--bg);
  padding: clamp(2.6rem, 6vw, 4.5rem) 0;
  font-family: "Inter", system-ui, sans-serif;
}

.cl-marquee__eyebrow {
  margin: 0 0 clamp(1.6rem, 4vw, 2.4rem); text-align: center;
  font-size: .82rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}

.cl-marquee__viewport {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.cl-marquee__track {
  display: flex; align-items: center; gap: clamp(2rem, 5vw, 4rem); width: max-content;
  animation: cl-scroll 32s linear infinite;
}
.cl-marquee__viewport:hover .cl-marquee__track { animation-play-state: paused; }
@keyframes cl-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.cl-marquee .cl-logo {
  display: inline-flex; align-items: center; gap: .5rem; flex: 0 0 auto;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: 1.2rem; letter-spacing: .06em;
  color: var(--text, #9a9a8c);
  transition: color .35s cubic-bezier(.22, 1, .36, 1);
}
.cl-marquee .cl-logo svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cl-marquee .cl-logo:hover { color: var(--primary); }

@media (prefers-reduced-motion: reduce) {
  .cl-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; gap: 1.5rem 3rem; padding: 0 1rem; }
  .cl-marquee__viewport { -webkit-mask-image: none; mask-image: none; }
}

/* ===== clients-03 · .cl-grid ===== */
/* ==========================================================================
   Clients 03 · Logo Grid — scoped under .cl-grid
   ========================================================================== */

.cl-grid {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
}

.cl-grid__head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.cl-grid__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.cl-grid__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.cl-grid__title { margin: 0 auto; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem); line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary)); }
.cl-grid__title strong { color: var(--accent, var(--gold)); }
.cl-grid__title em { font-style: normal; color: var(--accent); }

.cl-grid__box {
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: 60rem; margin: 0 auto;
  background: var(--card-bg, var(--surface));
  border: 1px solid var(--line);
  border-radius: 24px; overflow: hidden;
  box-shadow: 0 30px 70px -44px rgba(31, 58, 40, .4);
}
.cl-cell {
  display: grid; place-items: center;
  min-height: 130px; padding: 1rem;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transition: background var(--transition);
}
.cl-cell:hover { background: #faf7f0; }
/* remove trailing borders on last column / last row */
.cl-cell:nth-child(4n) { border-right: none; }
.cl-cell:nth-last-child(-n+4) { border-bottom: none; }

.cl-grid .cl-logo {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: 1.1rem; letter-spacing: .05em;
  color: var(--text, #9a9a8c);
  transition: color var(--transition), transform var(--transition);
}
.cl-grid .cl-logo svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cl-cell:hover .cl-logo { color: var(--primary); transform: scale(1.05); }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .cl-grid__box { grid-template-columns: repeat(2, 1fr); }
  .cl-cell { border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; }
  .cl-cell:nth-child(2n) { border-right: none !important; }
  .cl-cell:nth-last-child(-n+2) { border-bottom: none !important; }
}
@media (prefers-reduced-motion: reduce) { .cl-cell, .cl-grid .cl-logo { transition: none; } }

/* ===== clients-04 · .cl-band ===== */
/* ==========================================================================
   Clients 04 · Trust Band — scoped under .cl-band
   ========================================================================== */

.cl-band {
  --primary: #1f3a28;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3rem, 7vw, 6rem) 0;
  font-family: "Inter", system-ui, sans-serif;
}

.cl-band__inner {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: .95fr 1.05fr; align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(2.2rem, 5vw, 3.6rem);
  border-radius: 28px;
  background: radial-gradient(120% 130% at 0% 0%, var(--grad-from, #274a31) 0%, #1f3a28 50%, var(--grad-to, #16281c) 100%);
  box-shadow: 0 40px 90px -46px rgba(15, 28, 19, .85);
  color: rgba(244, 239, 229, .8);
}
.cl-band__inner::after {
  content: ""; position: absolute; right: -70px; top: -70px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 148, 95, .22), transparent 70%); pointer-events: none;
}

.cl-band__intro { position: relative; z-index: 1; }
.cl-band__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--gold));
}
.cl-band__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--gold)); }
.cl-band__title { margin: 0 0 1.5rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.14; color: var(--text, #fff); }
.cl-band__title em { font-style: normal; color: var(--accent, var(--gold)); }

.cl-band__stats { display: flex; flex-wrap: wrap; gap: 1.5rem 2.2rem; }
.cl-band__stats div { display: flex; flex-direction: column; }
.cl-band__stats strong { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.9rem; color: var(--gold); line-height: 1; }
.cl-band__stats span { margin-top: .3rem; font-size: .85rem; color: rgba(244, 239, 229, .7); }

.cl-band__logos {
  position: relative; z-index: 1;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem 1rem; align-items: center;
}
.cl-band .cl-logo {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: 1.02rem; letter-spacing: .05em;
  color: rgba(244, 239, 229, .55);
  transition: color var(--transition), transform var(--transition);
}
.cl-band .cl-logo svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cl-band__logos li:hover .cl-logo { color: #fff; transform: translateY(-2px); }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .cl-band__inner { grid-template-columns: 1fr; }
}
@media (max-width: 419.98px) {
  .cl-band__logos { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .cl-band .cl-logo { transition: none; } }

/* ===== blog-01 · .blog-cards ===== */
/* ==========================================================================
   Blog 01 · Post Cards — scoped under .blog-cards
   ========================================================================== */

.blog-cards {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.blog-cards__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.blog-cards__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.blog-cards__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.blog-cards__title { margin: 0; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem); line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary)); }
.blog-cards__title em { font-style: normal; color: var(--accent); }
.blog-cards__all { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .93rem; color: var(--accent); text-decoration: none; white-space: nowrap; transition: gap var(--transition); }
.blog-cards__all svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.blog-cards__all:hover { gap: .8rem; }

.blog-cards__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }

.bpost {
  display: flex; flex-direction: column;
  background: var(--card-bg, var(--surface));
  border: 1px solid rgba(31, 58, 40, .06);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 22px 50px -34px rgba(31, 58, 40, .3);
  transition: transform var(--transition), box-shadow var(--transition);
}
.bpost:hover { transform: translateY(-6px); box-shadow: 0 38px 74px -34px rgba(31, 58, 40, .44); }

.bpost__media { position: relative; display: block; aspect-ratio: 16 / 10; background: #e4ede2; overflow: hidden; }
.bpost__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.bpost:hover .bpost__media img { transform: scale(1.06); }
.bpost__cat {
  position: absolute; top: .9rem; left: .9rem;
  padding: .3rem .75rem; border-radius: 999px;
  background: rgba(255, 255, 255, .9); color: var(--text, var(--primary));
  font-size: .72rem; font-weight: 600; letter-spacing: .04em; backdrop-filter: blur(3px);
}

.bpost__body { padding: 1.4rem 1.5rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.bpost__meta { margin: 0 0 .6rem; font-size: .8rem; color: var(--muted); }
.bpost__title { margin: 0 0 .7rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.18rem; line-height: 1.3; }
.bpost__title a { color: var(--text, var(--primary)); text-decoration: none; transition: color var(--transition); }
.bpost__title a:hover { color: var(--accent); }
.bpost__excerpt { margin: 0 0 1.3rem; font-size: .93rem; line-height: 1.55; color: var(--muted); }

.bpost__author { margin-top: auto; display: flex; align-items: center; gap: .6rem; font-size: .88rem; font-weight: 500; color: var(--text); }
.bpost__avatar {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: #e4ede2; color: #2f5a3a; font-size: .72rem; font-weight: 700; letter-spacing: .02em;
}

@media (max-width: 991.98px) { .blog-cards__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639.98px) { .blog-cards__grid { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) { .bpost, .bpost__media img, .blog-cards__all, .bpost__title a { transition: none; } }

/* ===== blog-02 · .blog-feat ===== */
/* ==========================================================================
   Blog 02 · Featured + List — scoped under .blog-feat
   ========================================================================== */

.blog-feat {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.blog-feat__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.blog-feat__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.blog-feat__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.blog-feat__title { margin: 0; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem); line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary)); }
.blog-feat__title em { font-style: normal; color: var(--accent); }

.blog-feat__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.6rem, 3vw, 2.6rem); align-items: start; }

/* Featured post ----------------------------------------------------------- */
.feat-post {
  background: var(--card-bg, var(--surface)); border: 1px solid rgba(31, 58, 40, .06);
  border-radius: 22px; overflow: hidden;
  box-shadow: 0 26px 60px -36px rgba(31, 58, 40, .4);
  transition: transform var(--transition), box-shadow var(--transition);
}
.feat-post:hover { transform: translateY(-5px); box-shadow: 0 40px 78px -36px rgba(31, 58, 40, .5); }
.feat-post__media { position: relative; display: block; aspect-ratio: 16 / 9; background: #e4ede2; overflow: hidden; }
.feat-post__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.feat-post:hover .feat-post__media img { transform: scale(1.05); }
.feat-post__cat { position: absolute; top: 1rem; left: 1rem; padding: .32rem .8rem; border-radius: 999px; background: var(--accent); color: #fff; font-size: .74rem; font-weight: 600; }
.feat-post__body { padding: clamp(1.5rem, 3vw, 2.2rem); }
.feat-post__meta { margin: 0 0 .6rem; font-size: .82rem; color: var(--muted); }
.feat-post__title { margin: 0 0 .8rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.22; }
.feat-post__title a { color: var(--text, var(--primary)); text-decoration: none; transition: color var(--transition); }
.feat-post__title a:hover { color: var(--accent); }
.feat-post__excerpt { margin: 0 0 1.2rem; font-size: .97rem; line-height: 1.6; color: var(--muted); }
.feat-post__more { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .93rem; color: var(--accent); text-decoration: none; transition: gap var(--transition); }
.feat-post__more svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.feat-post__more:hover { gap: .8rem; }

/* Mini list --------------------------------------------------------------- */
.blog-feat__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.mini-post {
  display: flex; gap: 1rem; align-items: center;
  padding: .8rem; background: var(--card-bg, var(--surface)); border: 1px solid var(--line);
  border-radius: 16px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.mini-post:hover { transform: translateX(4px); border-color: transparent; box-shadow: 0 22px 48px -32px rgba(31, 58, 40, .4); }
.mini-post__thumb { flex: 0 0 auto; width: 84px; height: 72px; border-radius: 12px; overflow: hidden; background: #e4ede2; }
.mini-post__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mini-post__meta { margin: 0 0 .25rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent, var(--gold)); font-weight: 600; }
.mini-post__title { margin: 0; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1rem; line-height: 1.3; }
.mini-post__title a { color: var(--text, var(--primary)); text-decoration: none; transition: color var(--transition); }
.mini-post__title a:hover { color: var(--accent); }

@media (max-width: 861.98px) { .blog-feat__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .feat-post, .feat-post__media img, .feat-post__more, .mini-post, .feat-post__title a, .mini-post__title a { transition: none; }
}

/* ===== blog-03 · .blog-list ===== */
/* ==========================================================================
   Blog 03 · Minimal List — scoped under .blog-list
   ========================================================================== */

.blog-list {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.blog-list__head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.blog-list__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.blog-list__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.blog-list__title { margin: 0 auto; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem); line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary)); }
.blog-list__title em { font-style: normal; color: var(--accent); }

.blog-list__rows { list-style: none; margin: 0 auto; padding: 0; max-width: 52rem; }
.blog-list__rows li { border-top: 1px solid var(--line); }
.blog-list__rows li:last-child { border-bottom: 1px solid var(--line); }

.brow {
  display: grid; grid-template-columns: 6rem 6rem 1fr auto; align-items: center; gap: 1.2rem;
  padding: 1.35rem .5rem; text-decoration: none;
  transition: padding var(--transition), background var(--transition);
}
.brow:hover { padding-left: 1.2rem; padding-right: 1.2rem; background: var(--surface); border-radius: 14px; }
.brow:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 12px; }

.brow__date { font-size: .85rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.brow__cat {
  justify-self: start; padding: .25rem .7rem; border-radius: 999px;
  background: #e4ede2; color: #2f5a3a;
  font-size: .72rem; font-weight: 600; letter-spacing: .04em;
}
.brow__title { font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.1rem; color: var(--text, var(--primary)); transition: color var(--transition); }
.brow:hover .brow__title { color: var(--accent); }
.brow__arrow { width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .5; transition: transform var(--transition), opacity var(--transition), stroke var(--transition); }
.brow:hover .brow__arrow { opacity: 1; transform: translateX(4px); stroke: var(--accent); }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 639.98px) {
  .brow { grid-template-columns: auto 1fr; row-gap: .5rem; }
  .brow__cat { grid-row: 1; grid-column: 2; justify-self: end; }
  .brow__title { grid-column: 1 / -1; }
  .brow__arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) { .brow, .brow__title, .brow__arrow { transition: none; } }

/* ===== blog-04 · .blog-mag ===== */
/* ==========================================================================
   Blog 04 · Magazine Tiles — scoped under .blog-mag
   ========================================================================== */

.blog-mag {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --transition: .45s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
}

.blog-mag__head { text-align: center; margin-bottom: clamp(2.2rem, 5vw, 3.2rem); }
.blog-mag__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.blog-mag__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.blog-mag__title { margin: 0 auto; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem); line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary)); }
.blog-mag__title em { font-style: normal; color: var(--accent); }

.blog-mag__grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; gap: 1.4rem; }

.mag-tile {
  position: relative; overflow: hidden; border-radius: 22px; display: block; text-decoration: none;
  box-shadow: 0 24px 54px -34px rgba(31, 58, 40, .42);
}
.mag-tile--lg { grid-row: span 2; }
.mag-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.mag-tile:hover img { transform: scale(1.06); }
.mag-tile__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13, 24, 17, .9) 8%, rgba(13, 24, 17, .35) 55%, transparent); }

.mag-tile__content { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem; z-index: 1; }
.mag-tile__cat { display: inline-block; margin-bottom: .6rem; padding: .28rem .75rem; border-radius: 999px; background: var(--accent, var(--gold)); color: #241a0e; font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.mag-tile__title { display: block; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; color: var(--text, #fff); line-height: 1.2; }
.mag-tile--lg .mag-tile__title { font-size: clamp(1.4rem, 2.6vw, 2rem); max-width: 20ch; }
.mag-tile:not(.mag-tile--lg) .mag-tile__title { font-size: 1.2rem; }
.mag-tile__meta { display: block; margin-top: .6rem; font-size: .85rem; color: rgba(244, 239, 229, .82); }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 639.98px) {
  .blog-mag__grid { grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .mag-tile--lg { grid-row: span 1; grid-auto-rows: 260px; }
}
@media (prefers-reduced-motion: reduce) { .mag-tile img { transition: none; } }

/* ===== contact-01 · .contact-form ===== */
/* ==========================================================================
   Contact 01 · Form & Info Panel — scoped under .contact-form
   ========================================================================== */

.contact-form {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.contact-form__card {
  display: grid; grid-template-columns: .82fr 1.18fr;
  max-width: 62rem; margin: 0 auto;
  background: var(--card-bg, var(--surface));
  border-radius: 28px; overflow: hidden;
  box-shadow: 0 40px 90px -46px rgba(31, 58, 40, .5);
  border: 1px solid rgba(31, 58, 40, .05);
}

/* Info panel -------------------------------------------------------------- */
.contact-form__info {
  padding: clamp(2rem, 4vw, 3rem);
  background: radial-gradient(130% 130% at 0% 0%, #274a31, #1f3a28 55%, #16281c);
  color: #f4efe5;
}
.contact-form__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--gold));
}
.contact-form__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--gold)); }
.contact-form__title { margin: 0 0 .7rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--text, #fff); }
.contact-form__lead { margin: 0 0 2rem; font-size: .97rem; line-height: 1.6; color: rgba(244, 239, 229, .78); }

.contact-form__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3rem; }
.contact-form__list li { display: flex; align-items: center; gap: .9rem; font-size: .95rem; color: #f4efe5; }
.contact-form__ic { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(184, 148, 95, .18); color: var(--icon-color, var(--gold)); }
.contact-form__ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.contact-form__k { display: block; font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(244, 239, 229, .55); margin-bottom: .1rem; }

/* Form -------------------------------------------------------------------- */
.contact-form__form { padding: clamp(2rem, 4vw, 3rem); }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.contact-form__field { display: flex; flex-direction: column; margin-bottom: 1.1rem; }
.contact-form__field label { margin-bottom: .4rem; font-size: .85rem; font-weight: 600; color: var(--text, var(--primary)); }
.contact-form__field input, .contact-form__field textarea {
  padding: .8rem 1rem; border: 1.5px solid var(--line); border-radius: 12px;
  background: #faf7f0; color: var(--text); font: inherit; font-size: .95rem;
  transition: border-color var(--transition), background var(--transition);
}
.contact-form__field textarea { resize: vertical; min-height: 96px; }
.contact-form__field input::placeholder, .contact-form__field textarea::placeholder { color: #a9a390; }
.contact-form__field input:focus, .contact-form__field textarea:focus { outline: none; border-color: var(--gold); background: var(--surface); }
.contact-form__field input:user-invalid, .contact-form__field textarea:user-invalid { border-color: #d09b90; }

.contact-form__btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .9rem 1.7rem; border: none; border-radius: 999px;
  background: var(--btn-bg, var(--primary)); color: #f3efe6;
  font: inherit; font-weight: 600; font-size: .96rem; cursor: pointer;
  box-shadow: 0 18px 34px -18px rgba(31, 58, 40, .7);
  transition: transform var(--transition), background var(--transition), gap var(--transition);
}
.contact-form__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition); }
.contact-form__btn:hover { transform: translateY(-2px); background: #26492f; gap: .8rem; }
.contact-form__btn:hover svg { transform: translateX(3px); }
.contact-form__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.contact-form__status { margin: 1rem 0 0; min-height: 1.2em; font-size: .88rem; font-weight: 500; }
.contact-form__status.is-error { color: var(--accent); }
.contact-form__status.is-ok { color: #2f6a3e; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .contact-form__card { grid-template-columns: 1fr; }
  .contact-form__row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-form__field input, .contact-form__field textarea, .contact-form__btn, .contact-form__btn svg { transition: none; }
}

/* ===== contact-02 · .contact-cards ===== */
/* ==========================================================================
   Contact 02 · Info Cards — scoped under .contact-cards
   ========================================================================== */

.contact-cards {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.contact-cards__head { text-align: center; margin-bottom: clamp(2.2rem, 5vw, 3.2rem); }
.contact-cards__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.contact-cards__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.contact-cards__title {
  margin: 0 auto;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem);
  line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary));
}
.contact-cards__title em { font-style: normal; color: var(--accent); }

.contact-cards__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }

.ccard {
  text-align: center;
  padding: 2.2rem 1.5rem;
  background: var(--card-bg, var(--surface));
  border: 1px solid rgba(31, 58, 40, .06);
  border-radius: 22px;
  box-shadow: 0 22px 50px -32px rgba(31, 58, 40, .32);
  transition: transform var(--transition), box-shadow var(--transition);
}
.ccard:hover { transform: translateY(-6px); box-shadow: 0 36px 70px -32px rgba(31, 58, 40, .46); }

.ccard__icon {
  display: grid; place-items: center;
  width: 56px; height: 56px; margin: 0 auto 1.2rem;
  border-radius: 16px; background: var(--icon-bg, #e4ede2); color: var(--icon-color, #2f5a3a);
  transition: transform var(--transition), background var(--transition), color var(--transition);
}
.ccard:hover .ccard__icon { transform: scale(1.08) rotate(-4deg); background: var(--primary); color: var(--gold); }
.ccard__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.ccard__title { margin: 0 0 .4rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.15rem; color: var(--text, var(--primary)); }
.ccard__text { margin: 0 0 1rem; font-size: .9rem; line-height: 1.5; color: var(--muted); }
.ccard__link {
  display: inline-block;
  font-weight: 600; font-size: .92rem; color: var(--accent); text-decoration: none;
  border-bottom: 1.5px solid transparent; transition: border-color var(--transition), color var(--transition);
}
.ccard__link:hover { border-color: var(--accent); }
.ccard__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

@media (max-width: 991.98px) { .contact-cards__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479.98px) { .contact-cards__grid { grid-template-columns: 1fr; max-width: 22rem; margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) { .ccard, .ccard__icon { transition: none; } }

/* ===== contact-03 · .contact-map ===== */
/* ==========================================================================
   Contact 03 · Location Panel — scoped under .contact-map
   ========================================================================== */

.contact-map {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.contact-map__card {
  display: grid; grid-template-columns: 1.05fr .95fr;
  max-width: 62rem; margin: 0 auto;
  background: var(--card-bg, var(--surface));
  border-radius: 28px; overflow: hidden;
  box-shadow: 0 40px 90px -46px rgba(31, 58, 40, .5);
  border: 1px solid rgba(31, 58, 40, .05);
}

/* Map --------------------------------------------------------------------- */
.contact-map__map { position: relative; min-height: 320px; background: #eef3ea; }
.contact-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cm-road { fill: none; stroke: #fff; stroke-linecap: round; stroke-width: 6; }
.cm-road--major { stroke-width: 10; }
.cm-park { fill: #d8e6ce; }
.cm-river { fill: none; stroke: #cfe0e6; stroke-width: 12; stroke-linecap: round; }
.cm-halo { fill: rgba(184, 148, 95, .22); }

.contact-map__pin {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -100%);
  color: var(--accent);
  filter: drop-shadow(0 8px 10px rgba(31, 58, 40, .35));
  animation: cmap-bounce 2.4s ease-in-out infinite;
}
.contact-map__pin svg { width: 44px; height: 44px; fill: var(--accent); stroke: #fff; stroke-width: 1.2; }
.contact-map__pin svg circle { fill: #fff; stroke: none; }
@keyframes cmap-bounce {
  0%, 100% { transform: translate(-50%, -100%); }
  50% { transform: translate(-50%, -115%); }
}

/* Body -------------------------------------------------------------------- */
.contact-map__body { padding: clamp(2rem, 4vw, 3rem); display: flex; flex-direction: column; }
.contact-map__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.contact-map__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.contact-map__title { margin: 0 0 .7rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--text, var(--primary)); }
.contact-map__lead { margin: 0 0 1.8rem; font-size: .97rem; line-height: 1.6; color: var(--muted); }

.contact-map__list { list-style: none; margin: 0 0 1.9rem; padding: 0; display: grid; gap: 1.1rem; }
.contact-map__list li { font-size: .97rem; line-height: 1.5; color: var(--text); }
.contact-map__k { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: .2rem; }

.contact-map__btn {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .9rem 1.6rem; border-radius: 999px;
  background: var(--btn-bg, var(--primary)); color: #f3efe6;
  font-weight: 600; font-size: .95rem; text-decoration: none;
  box-shadow: 0 18px 34px -18px rgba(31, 58, 40, .7);
  transition: transform var(--transition), background var(--transition), gap var(--transition);
}
.contact-map__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition); }
.contact-map__btn:hover { transform: translateY(-2px); background: #26492f; gap: .8rem; }
.contact-map__btn:hover svg { transform: translateX(3px); }
.contact-map__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .contact-map__card { grid-template-columns: 1fr; }
  .contact-map__map { min-height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-map__pin { animation: none; }
  .contact-map__btn, .contact-map__btn svg { transition: none; }
}

/* ===== contact-04 · .contact-dir ===== */
/* ==========================================================================
   Contact 04 · Department Directory — scoped under .contact-dir
   ========================================================================== */

.contact-dir {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.contact-dir__grid {
  display: grid; grid-template-columns: .85fr 1.15fr;
  align-items: start; gap: clamp(2rem, 5vw, 4rem);
}

/* Intro ------------------------------------------------------------------- */
.contact-dir__intro { position: sticky; top: 2rem; }
.contact-dir__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1.1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.contact-dir__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.contact-dir__title {
  margin: 0 0 1rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.85rem, 3.6vw, 2.7rem);
  line-height: 1.14; letter-spacing: -.01em; color: var(--text, var(--primary));
}
.contact-dir__title em { font-style: normal; color: var(--accent); }
.contact-dir__text { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--muted); max-width: 38ch; }

/* Rows -------------------------------------------------------------------- */
.contact-dir__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.dir-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.1rem;
  padding: 1.4rem 1.5rem;
  background: var(--card-bg, var(--surface));
  border: 1px solid var(--line);
  border-radius: 18px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.dir-row:hover { transform: translateX(5px); border-color: transparent; box-shadow: 0 24px 54px -32px rgba(31, 58, 40, .4); }

.dir-row__icon {
  display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 13px; background: var(--icon-bg, #e4ede2); color: var(--icon-color, #2f5a3a);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.dir-row:hover .dir-row__icon { background: var(--primary); color: var(--gold); transform: rotate(-5deg); }
.dir-row__icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.dir-row__title { margin: 0 0 .2rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.08rem; color: var(--text, var(--primary)); }
.dir-row__meta { margin: 0; font-size: .88rem; color: var(--muted); }

.dir-row__go {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: #f2e2df; color: var(--accent);
  text-decoration: none;
  transition: transform var(--transition), background var(--transition), color var(--transition);
}
.dir-row__go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dir-row:hover .dir-row__go { background: var(--accent); color: #fff; transform: translateX(3px); }
.dir-row__go:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 861.98px) {
  .contact-dir__grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .contact-dir__intro { position: static; }
  .contact-dir__text { max-width: none; }
}
@media (max-width: 479.98px) {
  .dir-row { grid-template-columns: auto 1fr; }
  .dir-row__go { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dir-row, .dir-row__icon, .dir-row__go { transition: none; }
}

/* ===== contact-05 · .contact-offices ===== */
/* ==========================================================================
   Contact 05 · Global Offices — scoped under .contact-offices
   ========================================================================== */

.contact-offices {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.contact-offices__head { text-align: center; margin-bottom: clamp(2.2rem, 5vw, 3.2rem); }
.contact-offices__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.contact-offices__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.contact-offices__title {
  margin: 0 auto;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 2.8rem);
  line-height: 1.12; letter-spacing: -.01em; color: var(--text, var(--primary));
}
.contact-offices__title em { font-style: normal; color: var(--accent); }

.contact-offices__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }

.office {
  display: flex; flex-direction: column;
  padding: 2rem 1.8rem;
  background: var(--card-bg, var(--surface));
  border: 1px solid rgba(31, 58, 40, .06);
  border-radius: 22px;
  box-shadow: 0 24px 54px -34px rgba(31, 58, 40, .34);
  transition: transform var(--transition), box-shadow var(--transition);
}
.office:hover { transform: translateY(-6px); box-shadow: 0 38px 74px -34px rgba(31, 58, 40, .46); }

.office__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.office__city { margin: 0; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.4rem; color: var(--text, var(--primary)); }
.office__tag {
  padding: .28rem .75rem; border-radius: 999px;
  background: var(--icon-bg, #e4ede2); color: var(--icon-color, #2f5a3a);
  font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.office__addr { margin: 0 0 1.3rem; font-size: .95rem; line-height: 1.55; color: var(--text); }

.office__meta { margin: 0 0 1.5rem; padding: 1.2rem 0 0; border-top: 1px solid var(--line); display: grid; gap: .7rem; }
.office__meta div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.office__meta dt { margin: 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.office__meta dd { margin: 0; font-size: .9rem; font-weight: 500; color: var(--primary); text-align: right; }

.office__link {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: .92rem; color: var(--accent); text-decoration: none;
  transition: gap var(--transition), color var(--transition);
}
.office__link svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition); }
.office__link:hover { gap: .8rem; color: var(--primary); }
.office__link:hover svg { transform: translateX(3px); }
.office__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

@media (max-width: 861.98px) { .contact-offices__grid { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) { .office, .office__link, .office__link svg { transition: none; } }

/* ===== forms-01 · .form-quote ===== */
/* ==========================================================================
   Forms 01 · Quote Request — scoped under .form-quote
   ========================================================================== */

.form-quote {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .3s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.form-quote__card {
  max-width: 46rem; margin: 0 auto;
  padding: clamp(1.8rem, 4vw, 3rem);
  background: var(--card-bg, var(--surface));
  border: 1px solid rgba(31, 58, 40, .06);
  border-radius: 26px;
  box-shadow: 0 40px 90px -46px rgba(31, 58, 40, .5);
}

.form-quote__head { text-align: center; margin-bottom: 2rem; }
.form-quote__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.form-quote__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.form-quote__title { margin: 0 auto .6rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--text, var(--primary)); }
.form-quote__title em { font-style: normal; color: var(--accent); }
.form-quote__lead { margin: 0 auto; max-width: 40ch; font-size: .97rem; line-height: 1.6; color: var(--muted); }

/* Fields ------------------------------------------------------------------ */
.fq-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fq-field { display: flex; flex-direction: column; margin-bottom: 1.2rem; }
.fq-field label, .fq-legend { margin-bottom: .4rem; font-size: .85rem; font-weight: 600; color: var(--primary); }
.fq-field input, .fq-field select, .fq-field textarea {
  padding: .8rem 1rem; border: 1.5px solid var(--line); border-radius: 12px;
  background: #faf7f0; color: var(--text); font: inherit; font-size: .95rem;
  transition: border-color var(--transition), background var(--transition);
}
.fq-field textarea { resize: vertical; min-height: 100px; }
.fq-field input::placeholder, .fq-field textarea::placeholder { color: #a9a390; }
.fq-field input:focus, .fq-field select:focus, .fq-field textarea:focus { outline: none; border-color: var(--gold); background: var(--surface); }
.fq-field input:user-invalid, .fq-field textarea:user-invalid { border-color: #d09b90; }

/* Budget chips ------------------------------------------------------------ */
.fq-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.fq-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem 1rem; border: 1.5px solid var(--line); border-radius: 999px;
  font-size: .88rem; font-weight: 500; color: var(--text); cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.fq-chip input { accent-color: var(--primary); }
.fq-chip:has(input:checked) { border-color: var(--primary); background: var(--primary); color: #f3efe6; }
.fq-chip:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Consent ----------------------------------------------------------------- */
.fq-consent { display: flex; align-items: flex-start; gap: .6rem; margin: 0 0 1.6rem; font-size: .88rem; line-height: 1.5; color: var(--muted); cursor: pointer; }
.fq-consent input { margin-top: .2rem; accent-color: var(--primary); flex: 0 0 auto; }

.form-quote__btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .95rem 1.8rem; border: none; border-radius: 999px;
  background: var(--btn-bg, var(--primary)); color: #f3efe6;
  font: inherit; font-weight: 600; font-size: .98rem; cursor: pointer;
  box-shadow: 0 18px 34px -18px rgba(31, 58, 40, .7);
  transition: transform var(--transition), background var(--transition), gap var(--transition);
}
.form-quote__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition); }
.form-quote__btn:hover { transform: translateY(-2px); background: #26492f; gap: .8rem; }
.form-quote__btn:hover svg { transform: translateX(3px); }
.form-quote__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.form-quote__status { margin: 1rem 0 0; min-height: 1.2em; font-size: .9rem; font-weight: 500; }
.form-quote__status.is-error { color: var(--accent); }
.form-quote__status.is-ok { color: #2f6a3e; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 575.98px) { .fq-row { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .fq-field input, .fq-field select, .fq-field textarea, .fq-chip, .form-quote__btn, .form-quote__btn svg { transition: none; }
}

/* ===== forms-02 · .form-wizard ===== */
/* ==========================================================================
   Forms 02 · Multi-step Wizard — scoped under .form-wizard
   ========================================================================== */

.form-wizard {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .3s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.form-wizard__card {
  max-width: 40rem; margin: 0 auto;
  padding: clamp(1.8rem, 4vw, 2.8rem);
  background: var(--card-bg, var(--surface));
  border: 1px solid rgba(31, 58, 40, .06);
  border-radius: 26px;
  box-shadow: 0 40px 90px -46px rgba(31, 58, 40, .5);
}

.form-wizard__head { text-align: center; margin-bottom: 1.6rem; }
.form-wizard__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 .8rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.form-wizard__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.form-wizard__title { margin: 0; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--text, var(--primary)); }
.form-wizard__title em { font-style: normal; color: var(--accent); }

/* Stepper ----------------------------------------------------------------- */
.wiz-steps { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; justify-content: space-between; }
.wiz-step { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .85rem; font-weight: 600; }
.wiz-step__dot {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: #e7e0d0; color: var(--muted); font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: .85rem;
  transition: background var(--transition), color var(--transition);
}
.wiz-step.is-active .wiz-step__dot, .wiz-step.is-done .wiz-step__dot { background: var(--primary); color: #f3efe6; }
.wiz-step.is-active { color: var(--primary); }
.wiz-step__label { white-space: nowrap; }

.wiz-progress { height: 5px; border-radius: 999px; background: #e7e0d0; overflow: hidden; margin-bottom: 1.8rem; }
.wiz-progress span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2f5a3a, var(--gold)); transition: width var(--transition); }

/* Panels ------------------------------------------------------------------ */
.wiz-panel[hidden] { display: none; }
.wiz-panel { animation: wz-in .35s cubic-bezier(.22, 1, .36, 1); }
@keyframes wz-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }

.wz-field { display: flex; flex-direction: column; margin-bottom: 1.2rem; }
.wz-field label, .wz-legend { margin-bottom: .4rem; font-size: .85rem; font-weight: 600; color: var(--primary); }
.wz-field input, .wz-field select, .wz-field textarea {
  padding: .8rem 1rem; border: 1.5px solid var(--line); border-radius: 12px;
  background: #faf7f0; color: var(--text); font: inherit; font-size: .95rem;
  transition: border-color var(--transition), background var(--transition);
}
.wz-field textarea { resize: vertical; min-height: 100px; }
.wz-field input:focus, .wz-field select:focus, .wz-field textarea:focus { outline: none; border-color: var(--gold); background: var(--surface); }

.wz-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.wz-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1rem; border: 1.5px solid var(--line); border-radius: 999px; font-size: .88rem; cursor: pointer; transition: border-color var(--transition), background var(--transition), color var(--transition); }
.wz-chip input { accent-color: var(--primary); }
.wz-chip:has(input:checked) { border-color: var(--primary); background: var(--primary); color: #f3efe6; }
.wz-chip:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }

.wz-consent { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; color: var(--muted); cursor: pointer; }
.wz-consent input { margin-top: .15rem; accent-color: var(--primary); }

/* Nav --------------------------------------------------------------------- */
.wiz-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.8rem; }
.wiz-btn {
  padding: .85rem 1.7rem; border-radius: 999px; font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer;
  transition: background var(--transition), color var(--transition), transform var(--transition), border-color var(--transition);
}
.wiz-btn--primary { border: none; background: var(--btn-bg, var(--primary)); color: #f3efe6; margin-left: auto; box-shadow: 0 16px 30px -18px rgba(31, 58, 40, .7); }
.wiz-btn--primary:hover { background: #26492f; transform: translateY(-2px); }
.wiz-btn--ghost { border: 1.5px solid var(--line); background: transparent; color: var(--primary); }
.wiz-btn--ghost:hover { border-color: var(--primary); }
.wiz-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.form-wizard__status { margin: 1rem 0 0; min-height: 1.2em; font-size: .9rem; font-weight: 500; text-align: center; }
.form-wizard__status.is-error { color: var(--accent); }
.form-wizard__status.is-ok { color: #2f6a3e; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 479.98px) {
  .wiz-step__label { display: none; }
  .wiz-steps { justify-content: center; gap: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .wiz-step__dot, .wiz-progress span, .wiz-btn, .wz-chip, .wz-field input, .wz-field select, .wz-field textarea { transition: none; }
  .wiz-panel { animation: none; }
}

/* ===== forms-03 · .form-book ===== */
/* ==========================================================================
   Forms 03 · Appointment Booking — scoped under .form-book
   ========================================================================== */

.form-book {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .3s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.form-book__card {
  display: grid; grid-template-columns: .85fr 1.15fr;
  max-width: 58rem; margin: 0 auto;
  background: var(--card-bg, var(--surface));
  border-radius: 26px; overflow: hidden;
  box-shadow: 0 40px 90px -46px rgba(31, 58, 40, .5);
  border: 1px solid rgba(31, 58, 40, .05);
}

/* Aside ------------------------------------------------------------------- */
.form-book__aside {
  padding: clamp(1.8rem, 4vw, 2.6rem);
  background: radial-gradient(130% 130% at 0% 0%, #274a31, #1f3a28 55%, #16281c);
  color: rgba(244, 239, 229, .82);
}
.form-book__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent, var(--gold));
}
.form-book__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--gold)); }
.form-book__title { margin: 0 0 .7rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--text, #fff); }
.form-book__title em { font-style: normal; color: var(--accent, var(--gold)); }
.form-book__lead { margin: 0 0 1.6rem; font-size: .95rem; line-height: 1.6; }
.form-book__perks { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.form-book__perks li { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; }
.form-book__perks svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: var(--accent, var(--gold)); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Form -------------------------------------------------------------------- */
.form-book__form { padding: clamp(1.8rem, 4vw, 2.6rem); }
.fb-field { display: flex; flex-direction: column; margin-bottom: 1.3rem; }
.fb-field label, .fb-legend { margin-bottom: .4rem; font-size: .85rem; font-weight: 600; color: var(--primary); }
.fb-field input {
  padding: .8rem 1rem; border: 1.5px solid var(--line); border-radius: 12px;
  background: #faf7f0; color: var(--text); font: inherit; font-size: .95rem;
  transition: border-color var(--transition), background var(--transition);
}
.fb-field input:focus { outline: none; border-color: var(--gold); background: var(--surface); }

.fb-slots { display: flex; flex-wrap: wrap; gap: .6rem; }
.fb-slot {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .55rem 1rem; border: 1.5px solid var(--line); border-radius: 12px;
  font-size: .9rem; font-weight: 600; color: var(--text); cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.fb-slot input { position: absolute; opacity: 0; width: 0; height: 0; }
.fb-slot:has(input:checked) { border-color: var(--primary); background: var(--primary); color: #f3efe6; }
.fb-slot:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.fb-slot--full { opacity: .45; text-decoration: line-through; cursor: not-allowed; }

.fb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.form-book__btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .95rem 1.7rem; border: none; border-radius: 999px;
  background: var(--btn-bg, var(--primary)); color: #f3efe6;
  font: inherit; font-weight: 600; font-size: .96rem; cursor: pointer;
  box-shadow: 0 18px 34px -18px rgba(31, 58, 40, .7);
  transition: transform var(--transition), background var(--transition), gap var(--transition);
}
.form-book__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition); }
.form-book__btn:hover { transform: translateY(-2px); background: #26492f; gap: .8rem; }
.form-book__btn:hover svg { transform: translateX(3px); }
.form-book__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.form-book__status { margin: 1rem 0 0; min-height: 1.2em; font-size: .9rem; font-weight: 500; }
.form-book__status.is-error { color: var(--accent); }
.form-book__status.is-ok { color: #2f6a3e; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .form-book__card { grid-template-columns: 1fr; }
  .fb-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .fb-field input, .fb-slot, .form-book__btn, .form-book__btn svg { transition: none; }
}

/* ===== forms-04 · .form-fb ===== */
/* ==========================================================================
   Forms 04 · Feedback — scoped under .form-fb
   ========================================================================== */

.form-fb {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .25s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.form-fb__card {
  max-width: 36rem; margin: 0 auto;
  padding: clamp(1.8rem, 4vw, 2.8rem);
  background: var(--card-bg, var(--surface));
  border: 1px solid rgba(31, 58, 40, .06);
  border-radius: 26px;
  box-shadow: 0 40px 90px -46px rgba(31, 58, 40, .5);
}

.form-fb__head { text-align: center; margin-bottom: 1.8rem; }
.form-fb__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  margin: 0 0 .9rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text, var(--primary));
}
.form-fb__eyebrow span { width: 30px; height: 2px; border-radius: 2px; background: var(--accent, var(--primary)); }
.form-fb__title { margin: 0 auto .5rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--text, var(--primary)); }
.form-fb__title em { font-style: normal; color: var(--accent); }
.form-fb__lead { margin: 0 auto; max-width: 38ch; font-size: .95rem; line-height: 1.6; color: var(--muted); }

/* Fields ------------------------------------------------------------------ */
.ff-field { margin-bottom: 1.4rem; }
.ff-legend, .ff-field label { display: block; margin-bottom: .5rem; font-size: .85rem; font-weight: 600; color: var(--primary); }

/* Stars (reverse-order fill) --------------------------------------------- */
.ff-stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: .3rem; }
.ff-stars input { position: absolute; opacity: 0; width: 0; height: 0; }
.ff-stars label { cursor: pointer; color: #dcd3c0; transition: color var(--transition), transform var(--transition); }
.ff-stars label svg { width: 34px; height: 34px; fill: currentColor; display: block; }
.ff-stars label:hover, .ff-stars label:hover ~ label,
.ff-stars input:checked ~ label { color: var(--gold); }
.ff-stars label:hover { transform: scale(1.12); }
.ff-stars input:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* Topic chips ------------------------------------------------------------- */
.ff-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.ff-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1rem; border: 1.5px solid var(--line); border-radius: 999px;
  font-size: .88rem; font-weight: 500; cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.ff-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.ff-chip:has(input:checked) { border-color: var(--primary); background: var(--primary); color: #f3efe6; }
.ff-chip:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }

.ff-field textarea {
  width: 100%; padding: .8rem 1rem; border: 1.5px solid var(--line); border-radius: 12px;
  background: #faf7f0; color: var(--text); font: inherit; font-size: .95rem; resize: vertical; min-height: 100px;
  transition: border-color var(--transition), background var(--transition);
}
.ff-field textarea:focus { outline: none; border-color: var(--gold); background: var(--surface); }

.form-fb__btn {
  width: 100%; padding: .95rem 1.7rem; border: none; border-radius: 999px;
  background: var(--btn-bg, var(--primary)); color: #f3efe6;
  font: inherit; font-weight: 600; font-size: .96rem; cursor: pointer;
  box-shadow: 0 18px 34px -18px rgba(31, 58, 40, .7);
  transition: transform var(--transition), background var(--transition);
}
.form-fb__btn:hover { transform: translateY(-2px); background: #26492f; }
.form-fb__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.form-fb__status { margin: 1rem 0 0; min-height: 1.2em; font-size: .9rem; font-weight: 500; text-align: center; }
.form-fb__status.is-error { color: var(--accent); }
.form-fb__status.is-ok { color: #2f6a3e; }

@media (prefers-reduced-motion: reduce) {
  .ff-stars label, .ff-chip, .ff-field textarea, .form-fb__btn { transition: none; }
}

/* ===== footers-01 · .ft-cols ===== */
/* ==========================================================================
   Footers 01 · Multi-column — scoped under .ft-cols
   ========================================================================== */

.ft-cols {
  --primary: var(--primary,#1f3a28);
  --gold: var(--gold,#b8945f);
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--primary,#1f3a28) 90%, #fff) 0%, color-mix(in srgb, var(--primary,#1f3a28) 86%, #000) 55%, color-mix(in srgb, var(--primary,#1f3a28) 62%, #000) 100%);
  padding: clamp(3rem, 6vw, 5rem) 0 2rem;
  font-family: "Inter", system-ui, sans-serif;
  color: rgba(244, 239, 229, .78);
}

.ft-cols__main {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem;
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

/* Brand ------------------------------------------------------------------- */
.ft-cols__logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; margin-bottom: 1.1rem; }
.ft-cols__logo svg { width: 30px; height: 30px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ft-cols__logo span { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.3rem; color: #fff; }
.ft-cols__logo em { font-style: normal; color: var(--gold); }
.ft-cols__about { margin: 0 0 1.4rem; max-width: 38ch; font-size: .92rem; line-height: 1.6; }

.ft-cols__social { display: flex; gap: .6rem; }
.ft-cols__social a {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--bg,#f4efe5);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.ft-cols__social a:hover { background: var(--gold); color: color-mix(in srgb, var(--gold,#b8945f) 18%, #000); transform: translateY(-3px); }
.ft-cols__social a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ft-cols__social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Columns ----------------------------------------------------------------- */
.ft-cols__h { margin: 0 0 1.1rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: .95rem; color: #fff; letter-spacing: .02em; }
.ft-cols__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.ft-cols__col a {
  font-size: .92rem; color: rgba(244, 239, 229, .72); text-decoration: none;
  transition: color var(--transition), padding-left var(--transition);
}
.ft-cols__col a:hover { color: var(--gold); padding-left: 4px; }
.ft-cols__col a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }

/* Bottom ------------------------------------------------------------------ */
.ft-cols__bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(244, 239, 229, .12);
  font-size: .86rem;
}
.ft-cols__bottom p { margin: 0; }
.ft-cols__legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.4rem; }
.ft-cols__legal a { color: rgba(244, 239, 229, .7); text-decoration: none; transition: color var(--transition); }
.ft-cols__legal a:hover { color: var(--gold); }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 861.98px) {
  .ft-cols__main { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .ft-cols__brand { grid-column: 1 / -1; }
}
@media (max-width: 479.98px) {
  .ft-cols__main { grid-template-columns: 1fr; }
  .ft-cols__bottom { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-cols__social a, .ft-cols__col a, .ft-cols__legal a { transition: none; }
}

/* ===== footers-02 · .ft-news ===== */
/* ==========================================================================
   Footers 02 · Newsletter Footer — scoped under .ft-news
   ========================================================================== */

.ft-news {
  --primary: var(--primary,#1f3a28);
  --gold: var(--gold,#b8945f);
  --accent: var(--accent,#9a3324);
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--primary,#1f3a28) 90%, #fff) 0%, color-mix(in srgb, var(--primary,#1f3a28) 86%, #000) 55%, color-mix(in srgb, var(--primary,#1f3a28) 62%, #000) 100%);
  padding: clamp(2.6rem, 5vw, 4rem) 0 2rem;
  font-family: "Inter", system-ui, sans-serif;
  color: rgba(244, 239, 229, .78);
}

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

/* Newsletter band --------------------------------------------------------- */
.ft-news__top {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.5rem 2rem;
  padding-bottom: clamp(2rem, 4vw, 2.8rem);
  border-bottom: 1px solid rgba(244, 239, 229, .12);
}
.ft-news__h { margin: 0 0 .35rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: #fff; }
.ft-news__sub { margin: 0; font-size: .93rem; }

.ft-news__form { position: relative; }
.ft-news__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; padding: .4rem; background: rgba(255, 255, 255, .08); border: 1px solid rgba(244, 239, 229, .18); border-radius: 999px; min-width: min(360px, 80vw); }
.ft-news__form:focus-within { border-color: var(--gold); }
.ft-news__input { padding: .7rem 1.1rem; border: none; background: transparent; color: #fff; font: inherit; font-size: .93rem; min-width: 0; }
.ft-news__input::placeholder { color: rgba(244, 239, 229, .55); }
.ft-news__input:focus { outline: none; }
.ft-news__btn {
  padding: .7rem 1.4rem; border: none; border-radius: 999px;
  background: var(--gold); color: color-mix(in srgb, var(--gold,#b8945f) 18%, #000); font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.ft-news__btn:hover { background: color-mix(in srgb, var(--gold,#b8945f) 82%, #fff); transform: translateY(-1px); }
.ft-news__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ft-news__status { grid-column: 1 / -1; margin: .1rem .8rem; min-height: 1em; font-size: .82rem; font-weight: 500; }
.ft-news__status.is-error { color: color-mix(in srgb, var(--accent,#9a3324) 28%, #fff); }
.ft-news__status.is-ok { color: color-mix(in srgb, var(--primary,#1f3a28) 20%, #fff); }

/* Main columns ------------------------------------------------------------ */
.ft-news__main { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 2rem; padding: clamp(2rem, 4vw, 3rem) 0; }
.ft-news__logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; margin-bottom: .9rem; }
.ft-news__logo svg { width: 28px; height: 28px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ft-news__logo span { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.2rem; color: #fff; }
.ft-news__logo em { font-style: normal; color: var(--gold); }
.ft-news__about { margin: 0; max-width: 34ch; font-size: .9rem; line-height: 1.6; }

.ft-news__ch { margin: 0 0 1rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: .92rem; color: #fff; }
.ft-news__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.ft-news__col a { font-size: .9rem; color: rgba(244, 239, 229, .72); text-decoration: none; transition: color var(--transition), padding-left var(--transition); }
.ft-news__col a:hover { color: var(--gold); padding-left: 4px; }
.ft-news__col a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }

/* Bottom ------------------------------------------------------------------ */
.ft-news__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 1.6rem; border-top: 1px solid rgba(244, 239, 229, .12); font-size: .85rem; }
.ft-news__bottom p { margin: 0; }
.ft-news__social { display: flex; gap: .55rem; }
.ft-news__social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--bg,#f4efe5); transition: background var(--transition), color var(--transition), transform var(--transition); }
.ft-news__social a:hover { background: var(--gold); color: color-mix(in srgb, var(--gold,#b8945f) 18%, #000); transform: translateY(-3px); }
.ft-news__social a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ft-news__social svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 861.98px) {
  .ft-news__top { grid-template-columns: 1fr; }
  .ft-news__main { grid-template-columns: 1fr 1fr; }
  .ft-news__brand { grid-column: 1 / -1; }
}
@media (max-width: 479.98px) {
  .ft-news__form { grid-template-columns: 1fr; border-radius: 20px; }
  .ft-news__btn { justify-self: stretch; }
  .ft-news__main { grid-template-columns: 1fr; }
  .ft-news__bottom { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-news__btn, .ft-news__col a, .ft-news__social a { transition: none; }
}

/* ===== footers-03 · .ft-minimal ===== */
/* ==========================================================================
   Footers 03 · Minimal Centered — scoped under .ft-minimal
   ========================================================================== */

.ft-minimal {
  --primary: var(--primary,#1f3a28);
  --accent: var(--accent,#9a3324);
  --gold: var(--gold,#b8945f);
  --bg: var(--bg,#f5f0e6);
  --text: var(--text,#2a2a24);
  --muted: var(--muted,#6e6e62);
  --line: var(--line,#e6dfd1);
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding: clamp(3rem, 6vw, 5rem) 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.ft-minimal__inner { text-align: center; max-width: 60rem; margin: 0 auto; }

.ft-minimal__logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; margin-bottom: 1.6rem; }
.ft-minimal__logo svg { width: 30px; height: 30px; fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ft-minimal__logo span { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.35rem; color: var(--primary); }
.ft-minimal__logo em { font-style: normal; color: var(--accent); }

.ft-minimal__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2rem; margin-bottom: 1.7rem; }
.ft-minimal__nav a {
  font-size: .95rem; font-weight: 500; color: var(--text); text-decoration: none;
  transition: color var(--transition);
}
.ft-minimal__nav a:hover { color: var(--accent); }
.ft-minimal__nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 3px; }

.ft-minimal__social { display: flex; justify-content: center; gap: .7rem; margin-bottom: 2rem; }
.ft-minimal__social a {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 50%; background: #fff; color: var(--primary);
  border: 1px solid var(--line);
  transition: background var(--transition), color var(--transition), transform var(--transition), border-color var(--transition);
}
.ft-minimal__social a:hover { background: var(--primary); color: var(--gold); border-color: transparent; transform: translateY(-3px); }
.ft-minimal__social a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ft-minimal__social svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ft-minimal__line { height: 1px; background: var(--line); margin: 0 auto 1.5rem; max-width: 34rem; }
.ft-minimal__copy { margin: 0; font-size: .88rem; color: var(--muted); }
.ft-minimal__copy a { color: var(--muted); text-decoration: none; transition: color var(--transition); }
.ft-minimal__copy a:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .ft-minimal__nav a, .ft-minimal__social a, .ft-minimal__copy a { transition: none; }
}

/* ===== footers-04 · .ft-cta ===== */
/* ==========================================================================
   Footers 04 · CTA + Footer — scoped under .ft-cta
   ========================================================================== */

.ft-cta {
  --primary: var(--primary,#1f3a28);
  --gold: var(--gold,#b8945f);
  --accent: var(--accent,#9a3324);
  --bg: var(--bg,#f5f0e6);
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  background: var(--bg);
  padding-top: clamp(3rem, 6vw, 5rem);
  font-family: "Inter", system-ui, sans-serif;
}

/* CTA banner -------------------------------------------------------------- */
.ft-cta__banner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.5rem 2rem;
  padding: clamp(1.8rem, 4vw, 2.8rem) clamp(1.8rem, 4vw, 3.2rem);
  margin-bottom: -3.5rem;
  border-radius: 26px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--gold,#b8945f) 84%, #fff), var(--gold,#b8945f) 55%, color-mix(in srgb, var(--gold,#b8945f) 82%, #000));
  box-shadow: 0 34px 74px -38px rgba(160, 124, 70, .85);
}
.ft-cta__h { margin: 0 0 .3rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 2rem); color: color-mix(in srgb, var(--gold,#b8945f) 18%, #000); }
.ft-cta__sub { margin: 0; font-size: 1rem; color: rgba(36, 26, 14, .78); }
.ft-cta__btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .95rem 1.7rem; border-radius: 999px;
  background: var(--primary); color: var(--bg,#f3efe6);
  font-weight: 600; font-size: .98rem; text-decoration: none; white-space: nowrap;
  box-shadow: 0 20px 40px -18px rgba(20, 36, 25, .8);
  transition: transform var(--transition), background var(--transition), gap var(--transition);
}
.ft-cta__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition); }
.ft-cta__btn:hover { transform: translateY(-3px); background: color-mix(in srgb, var(--primary,#1f3a28) 72%, #000); gap: .8rem; }
.ft-cta__btn:hover svg { transform: translateX(3px); }
.ft-cta__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Footer body ------------------------------------------------------------- */
.ft-cta__foot {
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--primary,#1f3a28) 90%, #fff) 0%, color-mix(in srgb, var(--primary,#1f3a28) 86%, #000) 55%, color-mix(in srgb, var(--primary,#1f3a28) 62%, #000) 100%);
  padding: calc(3.5rem + 3rem) 0 2rem;
  color: rgba(244, 239, 229, .78);
}
.ft-cta__main { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: clamp(2rem, 4vw, 3rem); }

.ft-cta__logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; margin-bottom: .9rem; }
.ft-cta__logo img { height: auto; max-height: 48px; width: auto; }
.ft-cta__logo svg { width: 28px; height: 28px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ft-cta__logo span { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.2rem; color: #fff; }
.ft-cta__logo em { font-style: normal; color: var(--gold); }
.ft-cta__about { margin: 0 0 1.2rem; max-width: 34ch; font-size: .9rem; line-height: 1.6; }

.ft-cta__social { display: flex; gap: .55rem; }
.ft-cta__social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--bg,#f4efe5); transition: background var(--transition), color var(--transition), transform var(--transition); }
.ft-cta__social a:hover { background: var(--gold); color: color-mix(in srgb, var(--gold,#b8945f) 18%, #000); transform: translateY(-3px); }
.ft-cta__social a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ft-cta__social svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ft-cta__ch { margin: 0 0 1rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: .92rem; color: #fff; }
.ft-cta__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.ft-cta__col a { font-size: .9rem; color: rgba(244, 239, 229, .72); text-decoration: none; transition: color var(--transition), padding-left var(--transition); }
.ft-cta__col a:hover { color: var(--gold); padding-left: 4px; }
.ft-cta__col a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }

.ft-cta__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem; padding-top: 1.6rem; border-top: 1px solid rgba(244, 239, 229, .12); font-size: .85rem; }
.ft-cta__bottom p { margin: 0; }
.ft-cta__made { color: rgba(244, 239, 229, .55); }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .ft-cta__banner { grid-template-columns: 1fr; }
  .ft-cta__main { grid-template-columns: 1fr 1fr; }
  .ft-cta__brand { grid-column: 1 / -1; }
}
@media (max-width: 479.98px) {
  .ft-cta__main { grid-template-columns: 1fr; }
  .ft-cta__bottom { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-cta__btn, .ft-cta__btn svg, .ft-cta__social a, .ft-cta__col a { transition: none; }
}

/* ===== footers-05 · .ft-dark ===== */
/* ==========================================================================
   Footers 05 · Dark Multi-column — scoped under .ft-dark
   ========================================================================== */

.ft-dark {
  --primary: var(--primary,#1f3a28);
  --accent: var(--accent,#9a3324);
  --gold: var(--gold,#b8945f);
  --bg: var(--bg,#f5f0e6);
  --surface: #ffffff;
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  display: block;
  background: var(--bg);
  font-family: "Inter", system-ui, sans-serif;
}

.ft-dark__inner {
  background: radial-gradient(120% 130% at 100% 0%, color-mix(in srgb, var(--primary,#1f3a28) 85%, #fff) 0%, var(--primary,#1f3a28) 45%, color-mix(in srgb, var(--primary,#1f3a28) 72%, #000) 100%);
  color: rgba(244, 239, 229, .82);
}
.ft-dark__wrap { max-width: 1180px; margin: 0 auto; padding: clamp(3rem, 6vw, 4.5rem) 1.4rem 1.6rem; }

/* Main -------------------------------------------------------------------- */
.ft-dark__main {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem;
  padding-bottom: 2.5rem; border-bottom: 1px solid rgba(244, 239, 229, .14);
}

.ft-dark__logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; margin-bottom: 1.1rem; }
.ft-dark__logo svg { width: 30px; height: 30px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linejoin: round; }
.ft-dark__logo span { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.2rem; color: #fff; }
.ft-dark__logo em { font-style: normal; color: var(--gold); }
.ft-dark__about { margin: 0 0 1.4rem; font-size: .93rem; line-height: 1.65; max-width: 34ch; }

.ft-dark__social { display: flex; gap: .6rem; }
.ft-dark__social a {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 12px; background: rgba(244, 239, 229, .08); color: var(--bg,#f4efe5);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.ft-dark__social a:hover { background: var(--gold); color: color-mix(in srgb, var(--gold,#b8945f) 18%, #000); transform: translateY(-3px); }
.ft-dark__social a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ft-dark__social svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.ft-dark__h { margin: 0 0 1.1rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: .95rem; color: #fff; letter-spacing: .01em; }
.ft-dark__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.ft-dark__col a { font-size: .92rem; color: rgba(244, 239, 229, .72); text-decoration: none; transition: color var(--transition), padding var(--transition); }
.ft-dark__col a:hover { color: var(--gold); padding-left: 4px; }
.ft-dark__col a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

/* Bottom ------------------------------------------------------------------ */
.ft-dark__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-top: 1.6rem;
}
.ft-dark__copy { margin: 0; font-size: .86rem; color: rgba(244, 239, 229, .6); }
.ft-dark__legal { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.4rem; }
.ft-dark__legal a { font-size: .86rem; color: rgba(244, 239, 229, .7); text-decoration: none; transition: color var(--transition); }
.ft-dark__legal a:hover { color: var(--gold); }
.ft-dark__legal a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 859.98px) { .ft-dark__main { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 519.98px) {
  .ft-dark__main { grid-template-columns: 1fr; }
  .ft-dark__bottom { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-dark__social a, .ft-dark__col a, .ft-dark__legal a { transition: none; }
}

/* ===== footers-06 · .ft-bigcta ===== */
/* ==========================================================================
   Footers 06 · Big CTA — scoped under .ft-bigcta
   ========================================================================== */

.ft-bigcta {
  --primary: var(--primary,#1f3a28);
  --accent: var(--accent,#9a3324);
  --gold: var(--gold,#b8945f);
  --bg: var(--bg,#f5f0e6);
  --surface: #ffffff;
  --text: var(--text,#2a2a24);
  --muted: var(--muted,#6e6e62);
  --line: var(--line,#e6dfd1);
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  display: block;
  background: var(--bg);
  font-family: "Inter", system-ui, sans-serif;
}

.ft-bigcta__inner {
  position: relative;
  overflow: hidden;
  background: radial-gradient(130% 120% at 0% 0%, color-mix(in srgb, var(--primary,#1f3a28) 85%, #fff) 0%, var(--primary,#1f3a28) 48%, color-mix(in srgb, var(--primary,#1f3a28) 62%, #000) 100%);
  color: rgba(244, 239, 229, .82);
}
.ft-bigcta__inner::after {
  content: "";
  position: absolute;
  right: -12%;
  top: -30%;
  width: 46%;
  height: 120%;
  background: radial-gradient(circle at 50% 50%, rgba(184, 148, 95, .22), transparent 62%);
  pointer-events: none;
}
.ft-bigcta__wrap {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(3.5rem, 7vw, 6rem) 1.4rem 1.6rem;
}

/* CTA --------------------------------------------------------------------- */
.ft-bigcta__cta { max-width: 780px; }
.ft-bigcta__eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .76rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.1rem;
}
.ft-bigcta__eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--gold); }
.ft-bigcta__title {
  margin: 0 0 1.1rem;
  font-family: "Poppins", system-ui, sans-serif; font-weight: 700;
  font-size: clamp(2.2rem, 5.5vw, 3.9rem); line-height: 1.06; letter-spacing: -.02em;
  color: #fff;
}
.ft-bigcta__title em { font-style: normal; color: var(--gold); }
.ft-bigcta__lead { margin: 0 0 2rem; font-size: 1.02rem; line-height: 1.7; max-width: 52ch; color: rgba(244, 239, 229, .72); }

.ft-bigcta__actions { display: flex; flex-wrap: wrap; gap: .9rem; }
.ft-bigcta__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem 1.9rem; border-radius: 14px; font-weight: 600; font-size: .98rem;
  text-decoration: none;
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition), color var(--transition);
}
.ft-bigcta__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition); }
.ft-bigcta__btn--gold { background: var(--gold); color: color-mix(in srgb, var(--gold,#b8945f) 18%, #000); box-shadow: 0 18px 38px -20px rgba(184, 148, 95, .9); }
.ft-bigcta__btn--gold:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -20px rgba(184, 148, 95, 1); }
.ft-bigcta__btn--gold:hover svg { transform: translateX(4px); }
.ft-bigcta__btn--ghost { background: transparent; color: var(--bg,#f4efe5); box-shadow: inset 0 0 0 1.5px rgba(244, 239, 229, .28); }
.ft-bigcta__btn--ghost:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--gold); color: var(--gold); }
.ft-bigcta__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Bar --------------------------------------------------------------------- */
.ft-bigcta__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap;
  margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 1.8rem;
  border-top: 1px solid rgba(244, 239, 229, .14);
}
.ft-bigcta__logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.ft-bigcta__logo svg { width: 28px; height: 28px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linejoin: round; }
.ft-bigcta__logo span { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.12rem; color: #fff; }
.ft-bigcta__logo em { font-style: normal; color: var(--gold); }

.ft-bigcta__links { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.ft-bigcta__links a { font-size: .92rem; color: rgba(244, 239, 229, .72); text-decoration: none; transition: color var(--transition); }
.ft-bigcta__links a:hover { color: var(--gold); }
.ft-bigcta__links a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

.ft-bigcta__social { display: flex; gap: .55rem; }
.ft-bigcta__social a {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  background: rgba(244, 239, 229, .08); color: var(--bg,#f4efe5);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.ft-bigcta__social a:hover { background: var(--gold); color: color-mix(in srgb, var(--gold,#b8945f) 18%, #000); transform: translateY(-3px); }
.ft-bigcta__social a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ft-bigcta__social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Legal ------------------------------------------------------------------- */
.ft-bigcta__legal {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(244, 239, 229, .09);
}
.ft-bigcta__copy { margin: 0; font-size: .84rem; color: rgba(244, 239, 229, .55); }
.ft-bigcta__legal ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.3rem; }
.ft-bigcta__legal a { font-size: .84rem; color: rgba(244, 239, 229, .66); text-decoration: none; transition: color var(--transition); }
.ft-bigcta__legal a:hover { color: var(--gold); }
.ft-bigcta__legal a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 719.98px) {
  .ft-bigcta__bar { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .ft-bigcta__legal { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-bigcta__btn, .ft-bigcta__btn svg, .ft-bigcta__links a, .ft-bigcta__social a, .ft-bigcta__legal a { transition: none; }
}

/* ===== footers-07 · .ft-social ===== */
/* ==========================================================================
   Footers 07 · Social Follow — scoped under .ft-social
   ========================================================================== */

.ft-social {
  --primary: var(--primary,#1f3a28);
  --accent: var(--accent,#9a3324);
  --gold: var(--gold,#b8945f);
  --bg: var(--bg,#f5f0e6);
  --surface: #ffffff;
  --text: var(--text,#2a2a24);
  --muted: var(--muted,#6e6e62);
  --line: var(--line,#e6dfd1);
  --chip-green: color-mix(in srgb, var(--primary,#1f3a28) 10%, #fff);
  --chip-rose: color-mix(in srgb, var(--accent,#9a3324) 12%, #fff);
  --chip-sand: var(--bg,#efe6d5);
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  display: block;
  background: var(--bg);
  font-family: "Inter", system-ui, sans-serif;
}

.ft-social__inner { color: var(--text); }
.ft-social__wrap { max-width: 1120px; margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) 1.4rem 1.6rem; }

/* Heading ----------------------------------------------------------------- */
.ft-social__head { max-width: 620px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.ft-social__eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .76rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--primary); margin-bottom: .9rem;
}
.ft-social__eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--gold); }
.ft-social__title {
  margin: 0 0 .9rem;
  font-family: "Poppins", system-ui, sans-serif; font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.08; letter-spacing: -.02em;
  color: var(--primary);
}
.ft-social__title em { font-style: normal; color: var(--accent); }
.ft-social__lead { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--muted); }

/* Cards ------------------------------------------------------------------- */
.ft-social__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem;
  padding-bottom: clamp(2.2rem, 4vw, 3rem);
}
.ft-social__card {
  position: relative;
  display: flex; align-items: center; gap: 1rem;
  padding: 1.15rem 1.3rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  text-decoration: none;
  box-shadow: 0 20px 44px -34px rgba(31, 58, 40, .35);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.ft-social__card:hover { transform: translateY(-5px); border-color: transparent; box-shadow: 0 30px 56px -30px rgba(31, 58, 40, .4); }
.ft-social__card:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

.ft-social__icon {
  flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px;
  color: var(--primary);
  transition: transform var(--transition), background var(--transition), color var(--transition);
}
.ft-social__icon--a { background: var(--chip-green); }
.ft-social__icon--b { background: var(--chip-sand); }
.ft-social__icon--c { background: var(--chip-rose); }
.ft-social__icon--d { background: var(--chip-sand); }
.ft-social__card:hover .ft-social__icon { background: var(--primary); color: var(--bg,#f4efe5); transform: scale(1.06) rotate(-4deg); }
.ft-social__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.ft-social__meta { display: flex; flex-direction: column; gap: .15rem; }
.ft-social__name { font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--text); }
.ft-social__handle { font-size: .88rem; color: var(--muted); }

.ft-social__arrow {
  width: 20px; height: 20px; margin-left: auto; flex: none;
  fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--transition), stroke var(--transition);
}
.ft-social__card:hover .ft-social__arrow { stroke: var(--accent); transform: translate(3px, -3px); }

/* Bottom ------------------------------------------------------------------ */
.ft-social__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap;
  padding-top: 1.6rem; border-top: 1px solid var(--line);
}
.ft-social__logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.ft-social__logo svg { width: 28px; height: 28px; fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linejoin: round; }
.ft-social__logo span { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.12rem; color: var(--primary); }
.ft-social__logo em { font-style: normal; color: var(--accent); }

.ft-social__nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.ft-social__nav a { font-size: .9rem; color: var(--muted); text-decoration: none; transition: color var(--transition); }
.ft-social__nav a:hover { color: var(--accent); }
.ft-social__nav a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }

.ft-social__copy { margin: 0; font-size: .86rem; color: var(--muted); }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 639.98px) {
  .ft-social__grid { grid-template-columns: 1fr; }
  .ft-social__bottom { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-social__card, .ft-social__icon, .ft-social__arrow, .ft-social__nav a { transition: none; }
}

/* ===== footers-08 · .ft-app ===== */
/* ==========================================================================
   Footers 08 · App Download — scoped under .ft-app
   ========================================================================== */

.ft-app {
  --primary: var(--primary,#1f3a28);
  --accent: var(--accent,#9a3324);
  --gold: var(--gold,#b8945f);
  --bg: var(--bg,#f5f0e6);
  --surface: #ffffff;
  --text: var(--text,#2a2a24);
  --muted: var(--muted,#6e6e62);
  --line: var(--line,#e6dfd1);
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  display: block;
  background: var(--bg);
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.ft-app__inner { background: var(--surface); border-top: 1px solid var(--line); }
.ft-app__wrap { max-width: 1180px; margin: 0 auto; padding: clamp(2.6rem, 5vw, 4rem) 1.6rem 1.6rem; }

.ft-app__main { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 2.2rem; border-bottom: 1px solid var(--line); }

.ft-app__logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; margin-bottom: .8rem; }
.ft-app__logo svg { width: 28px; height: 28px; fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linejoin: round; }
.ft-app__logo span { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.18rem; color: var(--primary); }
.ft-app__logo em { font-style: normal; color: var(--accent); }
.ft-app__promo p { margin: 0 0 1.2rem; font-size: .95rem; line-height: 1.6; color: var(--muted); max-width: 34ch; }

.ft-app__badges { display: flex; gap: .7rem; flex-wrap: wrap; }
.ft-app__badge {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .6rem 1.1rem; border-radius: 14px;
  background: var(--primary); color: var(--bg,#f3efe6); text-decoration: none;
  transition: transform var(--transition), background var(--transition);
}
.ft-app__badge:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--primary,#1f3a28) 87%, #fff); }
.ft-app__badge:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.ft-app__badge svg { width: 24px; height: 24px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ft-app__badge span { display: flex; flex-direction: column; line-height: 1.1; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: .95rem; }
.ft-app__badge small { font-family: "Inter", system-ui, sans-serif; font-weight: 400; font-size: .68rem; color: rgba(244, 239, 229, .7); }

.ft-app__col h3 { margin: 0 0 1rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: .95rem; color: var(--primary); }
.ft-app__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ft-app__col a { font-size: .92rem; color: var(--muted); text-decoration: none; transition: color var(--transition), padding var(--transition); }
.ft-app__col a:hover { color: var(--primary); padding-left: 3px; }
.ft-app__col a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

.ft-app__bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.4rem; }
.ft-app__bottom p { margin: 0; font-size: .84rem; color: var(--muted); }
.ft-app__bottom ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.4rem; }
.ft-app__bottom a { font-size: .84rem; color: var(--muted); text-decoration: none; transition: color var(--transition); }
.ft-app__bottom a:hover { color: var(--primary); }

@media (max-width: 859.98px) { .ft-app__main { grid-template-columns: 1fr 1fr; } .ft-app__promo { grid-column: 1 / -1; } }
@media (max-width: 479.98px) { .ft-app__main { grid-template-columns: 1fr; } .ft-app__bottom { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .ft-app__badge, .ft-app__col a, .ft-app__bottom a { transition: none; } }

/* ===== footers-09 · .ft-contact ===== */
/* ==========================================================================
   Footers 09 · Contact Footer — scoped under .ft-contact
   ========================================================================== */

.ft-contact {
  --primary: var(--primary,#1f3a28);
  --accent: var(--accent,#9a3324);
  --gold: var(--gold,#b8945f);
  --bg: var(--bg,#f5f0e6);
  --surface: #ffffff;
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  display: block;
  background: var(--bg);
  font-family: "Inter", system-ui, sans-serif;
}

.ft-contact__inner { background: radial-gradient(120% 130% at 100% 0%, color-mix(in srgb, var(--primary,#1f3a28) 85%, #fff) 0%, var(--primary,#1f3a28) 45%, color-mix(in srgb, var(--primary,#1f3a28) 72%, #000) 100%); color: rgba(244, 239, 229, .82); }
.ft-contact__wrap { max-width: 1180px; margin: 0 auto; padding: clamp(2.8rem, 6vw, 4.2rem) 1.6rem 1.6rem; }
.ft-contact__vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.ft-contact__main { display: grid; grid-template-columns: 1fr 1.3fr .8fr; gap: 2.4rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(244, 239, 229, .14); }

.ft-contact__logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; margin-bottom: 1.2rem; }
.ft-contact__logo svg { width: 28px; height: 28px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linejoin: round; }
.ft-contact__logo span { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.18rem; color: #fff; }
.ft-contact__logo em { font-style: normal; color: var(--gold); }
.ft-contact__info { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.ft-contact__info li { display: flex; align-items: center; gap: .6rem; font-size: .92rem; }
.ft-contact__info svg { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Form -------------------------------------------------------------------- */
.ft-contact__form h3, .ft-contact__col h3 { margin: 0 0 1rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1rem; color: #fff; }
.ft-contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .6rem; }
.ft-contact__form input, .ft-contact__form textarea {
  width: 100%; padding: .7rem .9rem; border: 1px solid rgba(244, 239, 229, .18); border-radius: 10px;
  background: rgba(255, 255, 255, .06); color: #fff; font: inherit; font-size: .92rem;
  transition: border-color var(--transition), background var(--transition);
}
.ft-contact__form textarea { resize: vertical; min-height: 60px; margin-bottom: .7rem; }
.ft-contact__form input::placeholder, .ft-contact__form textarea::placeholder { color: rgba(244, 239, 229, .5); }
.ft-contact__form input:focus, .ft-contact__form textarea:focus { outline: none; border-color: var(--gold); background: rgba(255, 255, 255, .1); }
.ft-contact__form button {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .7rem 1.3rem; border: none; border-radius: 999px;
  background: var(--gold); color: color-mix(in srgb, var(--gold,#b8945f) 18%, #000); font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer;
  transition: transform var(--transition), background var(--transition), gap var(--transition);
}
.ft-contact__form button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition); }
.ft-contact__form button:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--gold,#b8945f) 82%, #fff); gap: .65rem; }
.ft-contact__form button:hover svg { transform: translateX(2px); }
.ft-contact__form button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ft-contact__status { margin: .7rem 0 0; min-height: 1.1em; font-size: .85rem; font-weight: 500; }
.ft-contact__status.is-error { color: color-mix(in srgb, var(--accent,#9a3324) 28%, #fff); }
.ft-contact__status.is-ok { color: color-mix(in srgb, var(--primary,#1f3a28) 20%, #fff); }

/* Links ------------------------------------------------------------------- */
.ft-contact__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ft-contact__col a { font-size: .92rem; color: rgba(244, 239, 229, .72); text-decoration: none; transition: color var(--transition); }
.ft-contact__col a:hover { color: var(--gold); }
.ft-contact__col a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

.ft-contact__copy { margin: 1.4rem 0 0; font-size: .84rem; color: rgba(244, 239, 229, .6); }

@media (max-width: 859.98px) { .ft-contact__main { grid-template-columns: 1fr 1fr; } .ft-contact__col { grid-column: 1 / -1; } }
@media (max-width: 519.98px) { .ft-contact__main { grid-template-columns: 1fr; } .ft-contact__row { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ft-contact__form input, .ft-contact__form textarea, .ft-contact__form button, .ft-contact__form button svg, .ft-contact__col a { transition: none; } }

/* ===== footers-10 · .ft-mega ===== */
/* ==========================================================================
   Footers 10 · Mega Footer — scoped under .ft-mega
   ========================================================================== */

.ft-mega {
  --primary: var(--primary,#1f3a28);
  --accent: var(--accent,#9a3324);
  --gold: var(--gold,#b8945f);
  --bg: var(--bg,#f5f0e6);
  --surface: #ffffff;
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  display: block;
  background: var(--bg);
  font-family: "Inter", system-ui, sans-serif;
}

.ft-mega__inner { background: radial-gradient(120% 130% at 100% 0%, color-mix(in srgb, var(--primary,#1f3a28) 85%, #fff) 0%, var(--primary,#1f3a28) 45%, color-mix(in srgb, var(--primary,#1f3a28) 72%, #000) 100%); color: rgba(244, 239, 229, .82); }
.ft-mega__wrap { max-width: 1180px; margin: 0 auto; padding: clamp(3rem, 6vw, 4.5rem) 1.6rem 1.6rem; }

.ft-mega__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 2.4rem; border-bottom: 1px solid rgba(244, 239, 229, .14); }

.ft-mega__logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; margin-bottom: 1rem; }
.ft-mega__logo svg { width: 28px; height: 28px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linejoin: round; }
.ft-mega__logo span { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.18rem; color: #fff; }
.ft-mega__logo em { font-style: normal; color: var(--gold); }
.ft-mega__brand p { margin: 0 0 1.2rem; font-size: .92rem; line-height: 1.62; max-width: 36ch; }
.ft-mega__social { display: flex; gap: .55rem; }
.ft-mega__social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(244, 239, 229, .08); color: var(--bg,#f4efe5); transition: background var(--transition), color var(--transition), transform var(--transition); }
.ft-mega__social a:hover { background: var(--gold); color: color-mix(in srgb, var(--gold,#b8945f) 18%, #000); transform: translateY(-2px); }
.ft-mega__social a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ft-mega__social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.ft-mega__col h3 { margin: 0 0 1rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: .92rem; color: #fff; }
.ft-mega__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ft-mega__col a { font-size: .9rem; color: rgba(244, 239, 229, .72); text-decoration: none; transition: color var(--transition), padding var(--transition); }
.ft-mega__col a:hover { color: var(--gold); padding-left: 3px; }
.ft-mega__col a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

.ft-mega__bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.5rem; }
.ft-mega__bottom p { margin: 0; font-size: .85rem; color: rgba(244, 239, 229, .6); }
.ft-mega__made { letter-spacing: .04em; }

@media (max-width: 991.98px) { .ft-mega__grid { grid-template-columns: 1fr 1fr 1fr; } .ft-mega__brand { grid-column: 1 / -1; } }
@media (max-width: 559.98px) { .ft-mega__grid { grid-template-columns: 1fr 1fr; } .ft-mega__bottom { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .ft-mega__social a, .ft-mega__col a { transition: none; } }

/* ===== footers-11 · .ft-brand ===== */
/* ==========================================================================
   Footers 11 · Centered Brand — scoped under .ft-brand
   ========================================================================== */

.ft-brand {
  --primary: var(--primary,#1f3a28);
  --accent: var(--accent,#9a3324);
  --gold: var(--gold,#b8945f);
  --bg: var(--bg,#f5f0e6);
  --surface: #ffffff;
  --text: var(--text,#2a2a24);
  --muted: var(--muted,#6e6e62);
  --line: var(--line,#e6dfd1);
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  display: block;
  background: var(--bg);
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.ft-brand__inner {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(3.2rem, 7vw, 5rem) 1.4rem clamp(2rem, 4vw, 2.6rem);
  text-align: center;
}

/* Brand -------------------------------------------------------------------- */
.ft-brand__logo {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  margin-bottom: 1.4rem;
}
.ft-brand__logo svg { width: 40px; height: 40px; fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linejoin: round; }
.ft-brand__logo span { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.7rem; color: var(--primary); }
.ft-brand__logo em { font-style: normal; color: var(--accent); }

.ft-brand__statement {
  max-width: 34ch;
  margin: 0 auto 2rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.1rem, 2.4vw, 1.42rem);
  line-height: 1.5;
  color: var(--text);
  letter-spacing: -.01em;
}
.ft-brand__statement em { font-style: normal; color: var(--accent); }

/* Nav row ------------------------------------------------------------------ */
.ft-brand__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem clamp(1.4rem, 4vw, 2.6rem);
  margin-bottom: 1.8rem;
}
.ft-brand__nav a {
  position: relative;
  padding: .3rem .1rem;
  font-size: .95rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: color var(--transition);
}
.ft-brand__nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: .05rem;
  width: 0; height: 2px;
  background: var(--gold);
  transition: width var(--transition);
}
.ft-brand__nav a:hover { color: var(--primary); }
.ft-brand__nav a:hover::after { width: 100%; }
.ft-brand__nav a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* Social ------------------------------------------------------------------- */
.ft-brand__social {
  display: flex;
  justify-content: center;
  gap: .7rem;
  margin-bottom: 2.4rem;
}
.ft-brand__social a {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--primary);
  transition: background var(--transition), color var(--transition), transform var(--transition), border-color var(--transition);
}
.ft-brand__social a:hover { background: var(--primary); color: #fff; border-color: var(--primary); transform: translateY(-3px); }
.ft-brand__social a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ft-brand__social svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Base --------------------------------------------------------------------- */
.ft-brand__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.7rem;
  border-top: 1px solid var(--line);
}
.ft-brand__copy { margin: 0; font-size: .85rem; color: var(--muted); }
.ft-brand__legal { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.3rem; }
.ft-brand__legal a { font-size: .85rem; color: var(--muted); text-decoration: none; transition: color var(--transition); }
.ft-brand__legal a:hover { color: var(--accent); }
.ft-brand__legal a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

/* Responsive --------------------------------------------------------------- */
@media (max-width: 519.98px) {
  .ft-brand__base { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-brand__nav a, .ft-brand__nav a::after, .ft-brand__social a, .ft-brand__legal a { transition: none; }
}

/* ===== footers-12 · .ft-gradient ===== */
/* ==========================================================================
   Footers 12 · Gradient Band — scoped under .ft-gradient
   ========================================================================== */

.ft-gradient {
  --primary: var(--primary,#1f3a28);
  --accent: var(--accent,#9a3324);
  --gold: var(--gold,#b8945f);
  --bg: var(--bg,#f5f0e6);
  --surface: #ffffff;
  --text: var(--text,#2a2a24);
  --muted: var(--muted,#6e6e62);
  --line: var(--line,#e6dfd1);
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  display: block;
  background: var(--bg);
  font-family: "Inter", system-ui, sans-serif;
}

.ft-gradient__inner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--primary,#1f3a28) 0%, color-mix(in srgb, var(--primary,#1f3a28) 85%, #fff) 42%, color-mix(in srgb, var(--gold,#b8945f) 54%, #000) 78%, var(--gold,#b8945f) 100%);
  color: rgba(245, 240, 230, .84);
}
/* Soft glow accents over the gradient */
.ft-gradient__inner::before {
  content: "";
  position: absolute;
  top: -30%; right: -8%;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(184, 148, 95, .35), transparent 62%);
  pointer-events: none;
}
.ft-gradient__inner::after {
  content: "";
  position: absolute;
  bottom: -40%; left: -6%;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(31, 58, 40, .5), transparent 60%);
  pointer-events: none;
}

.ft-gradient__wrap {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 4.6rem) 1.4rem 1.6rem;
}

/* Main --------------------------------------------------------------------- */
.ft-gradient__main {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 2.6rem;
  padding-bottom: 2.6rem;
  border-bottom: 1px solid rgba(245, 240, 230, .18);
}

.ft-gradient__logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; margin-bottom: 1.15rem; }
.ft-gradient__logo svg { width: 32px; height: 32px; fill: none; stroke: var(--bg,#f5f0e6); stroke-width: 1.6; stroke-linejoin: round; }
.ft-gradient__logo span { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.3rem; color: #fff; }
.ft-gradient__logo em { font-style: normal; color: color-mix(in srgb, var(--gold,#b8945f) 44%, #fff); }
.ft-gradient__about { margin: 0 0 1.5rem; font-size: .94rem; line-height: 1.68; max-width: 38ch; }

.ft-gradient__social { display: flex; gap: .6rem; }
.ft-gradient__social a {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 13px;
  background: rgba(245, 240, 230, .12);
  color: var(--bg,#f5f0e6);
  backdrop-filter: blur(2px);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.ft-gradient__social a:hover { background: #fff; color: var(--primary); transform: translateY(-3px); }
.ft-gradient__social a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ft-gradient__social svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.ft-gradient__h { margin: 0 0 1.1rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: .96rem; color: #fff; letter-spacing: .01em; }
.ft-gradient__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .72rem; }
.ft-gradient__col a { font-size: .92rem; color: rgba(245, 240, 230, .78); text-decoration: none; transition: color var(--transition), padding var(--transition); }
.ft-gradient__col a:hover { color: #fff; padding-left: 5px; }
.ft-gradient__col a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 3px; }

/* Bottom ------------------------------------------------------------------- */
.ft-gradient__bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-top: 1.6rem;
}
.ft-gradient__copy { margin: 0; font-size: .86rem; color: rgba(245, 240, 230, .68); }
.ft-gradient__legal { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.5rem; }
.ft-gradient__legal a { font-size: .86rem; color: rgba(245, 240, 230, .82); text-decoration: none; transition: color var(--transition); }
.ft-gradient__legal a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ft-gradient__legal a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 3px; }

/* Responsive --------------------------------------------------------------- */
@media (max-width: 859.98px) { .ft-gradient__main { grid-template-columns: 1fr 1fr; gap: 2.1rem; } }
@media (max-width: 519.98px) {
  .ft-gradient__main { grid-template-columns: 1fr; }
  .ft-gradient__bottom { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-gradient__social a, .ft-gradient__col a, .ft-gradient__legal a { transition: none; }
}

/* ===== footers-13 · .ft-split ===== */
/* ==========================================================================
   Footers 13 · Split Panel — scoped under .ft-split
   ========================================================================== */

.ft-split {
  --primary: var(--primary,#1f3a28);
  --accent: var(--accent,#9a3324);
  --gold: var(--gold,#b8945f);
  --bg: var(--bg,#f5f0e6);
  --surface: #ffffff;
  --text: var(--text,#2a2a24);
  --muted: var(--muted,#6e6e62);
  --line: var(--line,#e6dfd1);
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  display: block;
  background: var(--bg);
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.ft-split__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(2.4rem, 5vw, 3.4rem) 1.4rem clamp(1.6rem, 3vw, 2rem);
}

/* Grid --------------------------------------------------------------------- */
.ft-split__grid {
  display: grid;
  grid-template-columns: 1.05fr 1.25fr;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 26px 60px -34px rgba(31, 58, 40, .3);
}

/* Left brand panel --------------------------------------------------------- */
.ft-split__brand {
  background: radial-gradient(130% 120% at 0% 0%, color-mix(in srgb, var(--primary,#1f3a28) 85%, #fff) 0%, var(--primary,#1f3a28) 50%, color-mix(in srgb, var(--primary,#1f3a28) 72%, #000) 100%);
  color: rgba(245, 240, 230, .82);
  padding: clamp(2.2rem, 4vw, 3rem);
}
.ft-split__logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; margin-bottom: 1.2rem; }
.ft-split__logo svg { width: 32px; height: 32px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linejoin: round; }
.ft-split__logo span { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.3rem; color: #fff; }
.ft-split__logo em { font-style: normal; color: var(--gold); }
.ft-split__about { margin: 0 0 1.6rem; font-size: .95rem; line-height: 1.7; max-width: 40ch; }

.ft-split__cta {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.3rem;
  border-radius: 999px;
  background: var(--gold);
  color: color-mix(in srgb, var(--gold,#b8945f) 18%, #000);
  font-weight: 600; font-size: .92rem; text-decoration: none;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.ft-split__cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition); }
.ft-split__cta:hover { background: color-mix(in srgb, var(--gold,#b8945f) 82%, #fff); transform: translateY(-2px); box-shadow: 0 14px 28px -16px rgba(0, 0, 0, .55); }
.ft-split__cta:hover svg { transform: translateX(4px); }
.ft-split__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.ft-split__social { display: flex; gap: .6rem; margin-top: 1.8rem; }
.ft-split__social a {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 11px; background: rgba(245, 240, 230, .1); color: var(--bg,#f5f0e6);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.ft-split__social a:hover { background: var(--gold); color: color-mix(in srgb, var(--gold,#b8945f) 18%, #000); transform: translateY(-3px); }
.ft-split__social a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ft-split__social svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Right links panel -------------------------------------------------------- */
.ft-split__links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  background: var(--surface);
  padding: clamp(2.2rem, 4vw, 3rem);
}
.ft-split__h { margin: 0 0 1.1rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: .95rem; color: var(--primary); }
.ft-split__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .72rem; }
.ft-split__col a { font-size: .92rem; color: var(--muted); text-decoration: none; transition: color var(--transition), padding var(--transition); }
.ft-split__col a:hover { color: var(--accent); padding-left: 5px; }
.ft-split__col a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

/* Bottom ------------------------------------------------------------------- */
.ft-split__bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-top: 1.7rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.ft-split__copy { margin: 0; font-size: .85rem; color: var(--muted); }
.ft-split__legal { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.4rem; }
.ft-split__legal a { font-size: .85rem; color: var(--muted); text-decoration: none; transition: color var(--transition); }
.ft-split__legal a:hover { color: var(--accent); }
.ft-split__legal a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

/* Responsive --------------------------------------------------------------- */
@media (max-width: 859.98px) {
  .ft-split__grid { grid-template-columns: 1fr; }
}
@media (max-width: 519.98px) {
  .ft-split__links { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
  .ft-split__bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 359.98px) {
  .ft-split__links { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-split__cta, .ft-split__cta svg, .ft-split__social a, .ft-split__col a, .ft-split__legal a { transition: none; }
}

/* ===== footers-14 · .ft-legal ===== */
/* ==========================================================================
   Footers 14 · Legal & Compliance — scoped under .ft-legal
   ========================================================================== */

.ft-legal {
  --primary: var(--primary,#1f3a28);
  --accent: var(--accent,#9a3324);
  --gold: var(--gold,#b8945f);
  --bg: var(--bg,#f5f0e6);
  --surface: #ffffff;
  --text: var(--text,#2a2a24);
  --muted: var(--muted,#6e6e62);
  --line: var(--line,#e6dfd1);
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  display: block;
  background: var(--bg);
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.ft-legal__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 2.8rem) 1.4rem clamp(1.6rem, 3vw, 2rem);
}
.ft-legal__wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
  box-shadow: 0 20px 48px -34px rgba(31, 58, 40, .28);
}

/* Top ---------------------------------------------------------------------- */
.ft-legal__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
}
.ft-legal__logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.ft-legal__logo svg { width: 30px; height: 30px; fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linejoin: round; }
.ft-legal__logo span { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.22rem; color: var(--primary); }
.ft-legal__logo em { font-style: normal; color: var(--accent); }

/* Language switcher -------------------------------------------------------- */
.ft-legal__lang { position: relative; }
.ft-legal__lang-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit; font-size: .88rem; font-weight: 500;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.ft-legal__lang-btn:hover { border-color: var(--gold); background: var(--bg,#fbf7ee); }
.ft-legal__lang-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ft-legal__globe { width: 18px; height: 18px; fill: none; stroke: var(--primary); stroke-width: 1.5; }
.ft-legal__caret { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition); }
.ft-legal__lang-btn[aria-expanded="true"] .ft-legal__caret { transform: rotate(180deg); }

.ft-legal__lang-menu {
  position: absolute;
  right: 0; bottom: calc(100% + .5rem);
  min-width: 170px;
  margin: 0; padding: .4rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 22px 44px -22px rgba(31, 58, 40, .4);
  z-index: 5;
}
.ft-legal__lang-menu[hidden] { display: none; }
.ft-legal__lang-menu li {
  padding: .55rem .75rem;
  border-radius: 9px;
  font-size: .9rem;
  color: var(--text);
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  transition: background var(--transition), color var(--transition);
}
.ft-legal__lang-menu li:hover { background: var(--bg); color: var(--primary); }
.ft-legal__lang-menu li:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.ft-legal__lang-menu li[aria-selected="true"] { color: var(--primary); font-weight: 600; }
.ft-legal__lang-menu li[aria-selected="true"]::after { content: "✓"; color: var(--gold); font-weight: 700; }

/* Legal links -------------------------------------------------------------- */
.ft-legal__links {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  padding: 1.4rem 0;
}
.ft-legal__links a {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem .95rem;
  border-radius: 11px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: .88rem; font-weight: 500; text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.ft-legal__links a svg { width: 17px; height: 17px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--transition); }
.ft-legal__links a:hover { background: var(--primary); color: #fff; border-color: var(--primary); transform: translateY(-2px); }
.ft-legal__links a:hover svg { stroke: var(--gold); }
.ft-legal__links a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Bottom ------------------------------------------------------------------- */
.ft-legal__bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem 1.2rem; flex-wrap: wrap;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
}
.ft-legal__copy { margin: 0; font-size: .85rem; color: var(--text); font-weight: 500; }
.ft-legal__note { margin: 0; font-size: .8rem; color: var(--muted); }

/* Responsive --------------------------------------------------------------- */
@media (max-width: 519.98px) {
  .ft-legal__top { flex-direction: column; align-items: flex-start; }
  .ft-legal__lang-menu { right: auto; left: 0; }
  .ft-legal__links a { flex: 1 1 100%; justify-content: center; }
  .ft-legal__bottom { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-legal__lang-btn, .ft-legal__caret, .ft-legal__lang-menu li, .ft-legal__links a, .ft-legal__links a svg { transition: none; }
}

/* ===== footers-15 · .ft-cards ===== */
/* ==========================================================================
   Footers 15 · Card Blocks — scoped under .ft-cards
   ========================================================================== */

.ft-cards {
  --primary: var(--primary,#1f3a28);
  --accent: var(--accent,#9a3324);
  --gold: var(--gold,#b8945f);
  --bg: var(--bg,#f5f0e6);
  --surface: #ffffff;
  --text: var(--text,#2a2a24);
  --muted: var(--muted,#6e6e62);
  --line: var(--line,#e6dfd1);
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  display: block;
  background: var(--bg);
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.ft-cards__inner { background: var(--bg,#efe8d8); border-top: 1px solid var(--line); }
.ft-cards__wrap { max-width: 1180px; margin: 0 auto; padding: clamp(2.6rem, 5vw, 4rem) 1.6rem 1.6rem; }

.ft-cards__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 1.4rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(31, 58, 40, .12); }

.ft-cards__brand { align-self: center; }
.ft-cards__logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; margin-bottom: .8rem; }
.ft-cards__logo svg { width: 28px; height: 28px; fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linejoin: round; }
.ft-cards__logo span { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.18rem; color: var(--primary); }
.ft-cards__logo em { font-style: normal; color: var(--accent); }
.ft-cards__brand p { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--muted); max-width: 30ch; }

.ft-card { background: var(--surface); border: 1px solid rgba(31, 58, 40, .06); border-radius: 18px; padding: 1.4rem; box-shadow: 0 20px 44px -32px rgba(31, 58, 40, .5); transition: transform var(--transition), box-shadow var(--transition); }
.ft-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -34px rgba(31, 58, 40, .55); }
.ft-card__ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--primary,#1f3a28) 10%, #fff); color: color-mix(in srgb, var(--primary,#1f3a28) 78%, #fff); margin-bottom: .9rem; }
.ft-card__ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ft-card h3 { margin: 0 0 .35rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.02rem; color: var(--primary); }
.ft-card p { margin: 0 0 .9rem; font-size: .88rem; line-height: 1.5; color: var(--muted); }
.ft-card__link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .88rem; color: var(--accent); text-decoration: none; transition: gap var(--transition); }
.ft-card__link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ft-card__link:hover { gap: .65rem; }
.ft-card__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.ft-card__social { display: flex; gap: .5rem; }
.ft-card__social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--bg,#efe8da); color: var(--primary); transition: background var(--transition), color var(--transition), transform var(--transition); }
.ft-card__social a:hover { background: var(--primary); color: var(--gold); transform: translateY(-2px); }
.ft-card__social a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ft-card__social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.ft-cards__bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.4rem; }
.ft-cards__bottom p { margin: 0; font-size: .84rem; color: var(--muted); }
.ft-cards__bottom ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.3rem; }
.ft-cards__bottom a { font-size: .84rem; color: var(--muted); text-decoration: none; transition: color var(--transition); }
.ft-cards__bottom a:hover { color: var(--primary); }

@media (max-width: 991.98px) { .ft-cards__grid { grid-template-columns: 1fr 1fr; } .ft-cards__brand { grid-column: 1 / -1; } }
@media (max-width: 519.98px) { .ft-cards__grid { grid-template-columns: 1fr; } .ft-cards__bottom { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .ft-card, .ft-card__link, .ft-card__social a, .ft-cards__bottom a { transition: none; } }

/* ===== footers-16 · .ft-accordion ===== */
/* ==========================================================================
   Footers 16 · Accordion Columns — scoped under .ft-accordion
   Desktop: open link columns · Mobile: collapsible accordion
   ========================================================================== */

.ft-accordion {
  --primary: var(--primary,#1f3a28);
  --accent: var(--accent,#9a3324);
  --gold: var(--gold,#b8945f);
  --bg: var(--bg,#f5f0e6);
  --surface: #ffffff;
  --text: var(--text,#2a2a24);
  --muted: var(--muted,#6e6e62);
  --line: var(--line,#e6dfd1);
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  display: block;
  background: var(--bg);
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.ft-accordion__inner { background: var(--surface); border-top: 3px solid var(--primary); }
.ft-accordion__wrap { max-width: 1180px; margin: 0 auto; padding: clamp(2.8rem, 6vw, 4.4rem) 1.4rem 1.5rem; }

/* Top: brand + columns ---------------------------------------------------- */
.ft-accordion__top {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 2.4rem;
  padding-bottom: 2.4rem; border-bottom: 1px solid var(--line);
}

.ft-accordion__logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; margin-bottom: 1.1rem; }
.ft-accordion__logo svg { width: 30px; height: 30px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linejoin: round; }
.ft-accordion__logo span { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--primary); }
.ft-accordion__logo em { font-style: normal; color: var(--accent); }
.ft-accordion__about { margin: 0 0 1.4rem; font-size: .93rem; line-height: 1.65; color: var(--muted); max-width: 34ch; }

.ft-accordion__social { display: flex; gap: .55rem; }
.ft-accordion__social a {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: color-mix(in srgb, var(--primary,#1f3a28) 10%, #fff); color: var(--primary);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.ft-accordion__social a:hover { background: var(--primary); color: #fff; transform: translateY(-3px); }
.ft-accordion__social a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ft-accordion__social svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Columns ----------------------------------------------------------------- */
.ft-accordion__col { min-width: 0; }
.ft-accordion__hwrap { margin: 0; }
.ft-accordion__h {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%;
  padding: 0; border: 0; background: none; cursor: default; text-align: left;
  font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: .95rem;
  color: var(--primary); letter-spacing: .01em;
}
.ft-accordion__h:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
.ft-accordion__chevron {
  width: 18px; height: 18px; flex: none; display: none; fill: none; stroke: var(--accent);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--transition);
}

.ft-accordion__panel { overflow: hidden; }
.ft-accordion__panel ul { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .7rem; }
.ft-accordion__panel a { font-size: .92rem; color: var(--muted); text-decoration: none; transition: color var(--transition), padding var(--transition); }
.ft-accordion__panel a:hover { color: var(--accent); padding-left: 4px; }
.ft-accordion__panel a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

/* Bottom ------------------------------------------------------------------ */
.ft-accordion__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-top: 1.5rem;
}
.ft-accordion__copy { margin: 0; font-size: .86rem; color: var(--muted); }
.ft-accordion__legal { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.4rem; }
.ft-accordion__legal a { font-size: .86rem; color: var(--muted); text-decoration: none; transition: color var(--transition); }
.ft-accordion__legal a:hover { color: var(--accent); }
.ft-accordion__legal a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

/* Responsive: 5 -> 3 wide -> accordion ------------------------------------ */
@media (max-width: 991.98px) {
  .ft-accordion__top { grid-template-columns: 1fr 1fr 1fr; }
  .ft-accordion__brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .ft-accordion__top { grid-template-columns: 1fr; gap: 0; }
  .ft-accordion__brand { padding-bottom: 1.6rem; }
  .ft-accordion__col { border-top: 1px solid var(--line); }
  .ft-accordion__h { padding: 1.05rem 0; cursor: pointer; }
  .ft-accordion__chevron { display: block; }
  /* JS-driven collapse: panels start closed on mobile */
  .ft-accordion__panel { max-height: 0; transition: max-height var(--transition); }
  .ft-accordion__panel ul { margin: 0 0 1.1rem; }
  .ft-accordion__h[aria-expanded="true"] .ft-accordion__chevron { transform: rotate(180deg); }
  .ft-accordion__bottom { flex-direction: column; align-items: flex-start; padding-top: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ft-accordion__social a, .ft-accordion__panel a, .ft-accordion__legal a,
  .ft-accordion__chevron, .ft-accordion__panel { transition: none; }
}

/* ===== footers-17 · .ft-backtotop ===== */
/* ==========================================================================
   Footers 17 · Back to Top — scoped under .ft-backtotop
   ========================================================================== */

.ft-backtotop {
  --primary: var(--primary,#1f3a28);
  --accent: var(--accent,#9a3324);
  --gold: var(--gold,#b8945f);
  --bg: var(--bg,#f5f0e6);
  --surface: #ffffff;
  --text: var(--text,#2a2a24);
  --muted: var(--muted,#6e6e62);
  --line: var(--line,#e6dfd1);
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  display: block;
  background: var(--bg);
  font-family: "Inter", system-ui, sans-serif;
}

.ft-backtotop__inner {
  background: radial-gradient(120% 130% at 0% 0%, color-mix(in srgb, var(--primary,#1f3a28) 85%, #fff) 0%, var(--primary,#1f3a28) 46%, color-mix(in srgb, var(--primary,#1f3a28) 72%, #000) 100%);
  color: rgba(244, 239, 229, .82);
}
.ft-backtotop__wrap { max-width: 1180px; margin: 0 auto; padding: clamp(2rem, 5vw, 3rem) 1.4rem 1.6rem; }

/* Top strip --------------------------------------------------------------- */
.ft-backtotop__top {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap;
  padding-bottom: 2.2rem; margin-bottom: 2.4rem; border-bottom: 1px solid rgba(244, 239, 229, .14);
}
.ft-backtotop__tagline {
  margin: 0; font-family: "Poppins", system-ui, sans-serif; font-weight: 600;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem); color: #fff; letter-spacing: -.01em;
}
.ft-backtotop__btn {
  display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 1.25rem;
  border: 1px solid rgba(244, 239, 229, .24); border-radius: 999px; cursor: pointer;
  background: rgba(244, 239, 229, .06); color: var(--bg,#f4efe5);
  font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: .9rem;
  transition: background var(--transition), color var(--transition), transform var(--transition), border-color var(--transition);
}
.ft-backtotop__btn svg { width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--transition), transform var(--transition); }
.ft-backtotop__btn:hover { background: var(--gold); color: color-mix(in srgb, var(--gold,#b8945f) 18%, #000); border-color: var(--gold); transform: translateY(-2px); }
.ft-backtotop__btn:hover svg { stroke: color-mix(in srgb, var(--gold,#b8945f) 18%, #000); transform: translateY(-3px); }
.ft-backtotop__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Main -------------------------------------------------------------------- */
.ft-backtotop__main {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 2.4rem;
  padding-bottom: 2.4rem; border-bottom: 1px solid rgba(244, 239, 229, .14);
}

.ft-backtotop__logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; margin-bottom: 1.1rem; }
.ft-backtotop__logo svg { width: 30px; height: 30px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linejoin: round; }
.ft-backtotop__logo span { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.2rem; color: #fff; }
.ft-backtotop__logo em { font-style: normal; color: var(--gold); }
.ft-backtotop__about { margin: 0 0 1.4rem; font-size: .93rem; line-height: 1.65; max-width: 36ch; }

.ft-backtotop__social { display: flex; gap: .55rem; }
.ft-backtotop__social a {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: rgba(244, 239, 229, .08); color: var(--bg,#f4efe5);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.ft-backtotop__social a:hover { background: var(--gold); color: color-mix(in srgb, var(--gold,#b8945f) 18%, #000); transform: translateY(-3px); }
.ft-backtotop__social a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ft-backtotop__social svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.ft-backtotop__h { margin: 0 0 1.1rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: .95rem; color: #fff; letter-spacing: .01em; }
.ft-backtotop__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.ft-backtotop__col a { font-size: .92rem; color: rgba(244, 239, 229, .72); text-decoration: none; transition: color var(--transition), padding var(--transition); }
.ft-backtotop__col a:hover { color: var(--gold); padding-left: 4px; }
.ft-backtotop__col a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

/* Bottom ------------------------------------------------------------------ */
.ft-backtotop__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-top: 1.6rem;
}
.ft-backtotop__copy { margin: 0; font-size: .86rem; color: rgba(244, 239, 229, .6); }
.ft-backtotop__legal { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.4rem; }
.ft-backtotop__legal a { font-size: .86rem; color: rgba(244, 239, 229, .7); text-decoration: none; transition: color var(--transition); }
.ft-backtotop__legal a:hover { color: var(--gold); }
.ft-backtotop__legal a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .ft-backtotop__main { grid-template-columns: 1fr 1fr 1fr; }
  .ft-backtotop__brand { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
  .ft-backtotop__main { grid-template-columns: 1fr 1fr; }
  .ft-backtotop__brand { grid-column: 1 / -1; }
  .ft-backtotop__bottom { flex-direction: column; align-items: flex-start; }
  .ft-backtotop__btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-backtotop__btn, .ft-backtotop__btn svg, .ft-backtotop__social a,
  .ft-backtotop__col a, .ft-backtotop__legal a { transition: none; }
}

/* ===== footers-18 · .ft-badges ===== */
/* ==========================================================================
   Footers 18 · Trust Badges — scoped under .ft-badges
   ========================================================================== */

.ft-badges {
  --primary: var(--primary,#1f3a28);
  --accent: var(--accent,#9a3324);
  --gold: var(--gold,#b8945f);
  --bg: var(--bg,#f5f0e6);
  --surface: #ffffff;
  --text: var(--text,#2a2a24);
  --muted: var(--muted,#6e6e62);
  --line: var(--line,#e6dfd1);
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  display: block;
  background: var(--bg);
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.ft-badges__inner { background: var(--surface); border-top: 1px solid var(--line); }
.ft-badges__wrap { max-width: 1180px; margin: 0 auto; padding: clamp(2.6rem, 5vw, 4rem) 1.6rem 1.6rem; }

.ft-badges__main { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.ft-badges__logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; margin-bottom: .8rem; }
.ft-badges__logo svg { width: 28px; height: 28px; fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linejoin: round; }
.ft-badges__logo span { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.18rem; color: var(--primary); }
.ft-badges__logo em { font-style: normal; color: var(--accent); }
.ft-badges__brand p { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--muted); max-width: 34ch; }

.ft-badges__col h3 { margin: 0 0 1rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: .95rem; color: var(--primary); }
.ft-badges__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ft-badges__col a { font-size: .92rem; color: var(--muted); text-decoration: none; transition: color var(--transition), padding var(--transition); }
.ft-badges__col a:hover { color: var(--primary); padding-left: 3px; }
.ft-badges__col a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

.ft-badges__row { display: flex; flex-wrap: wrap; gap: .8rem; padding: 1.8rem 0; border-bottom: 1px solid var(--line); }
.ft-badges__badge {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .6rem 1rem; border-radius: 12px;
  background: var(--bg,#faf7f0); border: 1px solid var(--line);
  font-size: .88rem; font-weight: 600; color: var(--primary);
}
.ft-badges__badge svg { width: 20px; height: 20px; fill: none; stroke: var(--gold); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.ft-badges__copy { margin: 1.4rem 0 0; font-size: .84rem; color: var(--muted); }

@media (max-width: 859.98px) { .ft-badges__main { grid-template-columns: 1fr 1fr; } .ft-badges__brand { grid-column: 1 / -1; } }
@media (max-width: 479.98px) { .ft-badges__main { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ft-badges__col a { transition: none; } }

/* ===== footers-19 · .ft-hours ===== */
/* ==========================================================================
   Footers 19 · Hours & Contact — scoped under .ft-hours
   ========================================================================== */

.ft-hours {
  --primary: var(--primary,#1f3a28);
  --accent: var(--accent,#9a3324);
  --gold: var(--gold,#b8945f);
  --bg: var(--bg,#f5f0e6);
  --surface: #ffffff;
  --text: var(--text,#2a2a24);
  --muted: var(--muted,#6e6e62);
  --line: var(--line,#e6dfd1);
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  display: block;
  background: var(--bg);
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.ft-hours__inner { background: var(--surface); border-top: 1px solid var(--line); }
.ft-hours__wrap { max-width: 1180px; margin: 0 auto; padding: clamp(2.6rem, 5vw, 4rem) 1.6rem 1.6rem; }

.ft-hours__main { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }

.ft-hours__logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; margin-bottom: .9rem; }
.ft-hours__logo svg { width: 28px; height: 28px; fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linejoin: round; }
.ft-hours__logo span { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.18rem; color: var(--primary); }
.ft-hours__logo em { font-style: normal; color: var(--accent); }
.ft-hours__brand p { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--muted); max-width: 32ch; }

.ft-hours__card { background: var(--bg,#faf7f0); border: 1px solid var(--line); border-radius: 16px; padding: 1.3rem 1.4rem; }
.ft-hours__card h3, .ft-hours__contact h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1rem; color: var(--primary); }
.ft-hours__card h3 svg { width: 19px; height: 19px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ft-hours__card dl { margin: 0; display: grid; gap: .6rem; }
.ft-hours__card dl div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.ft-hours__card dt { margin: 0; font-size: .9rem; color: var(--muted); }
.ft-hours__card dd { margin: 0; font-size: .9rem; font-weight: 600; color: var(--primary); }
.ft-hours__card .is-closed { color: var(--accent); }

.ft-hours__contact ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.ft-hours__contact li { display: flex; align-items: center; gap: .6rem; font-size: .92rem; color: var(--text); }
.ft-hours__contact svg { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.ft-hours__bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.4rem; }
.ft-hours__bottom p { margin: 0; font-size: .84rem; color: var(--muted); }
.ft-hours__bottom ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.4rem; }
.ft-hours__bottom a { font-size: .84rem; color: var(--muted); text-decoration: none; transition: color var(--transition); }
.ft-hours__bottom a:hover { color: var(--primary); }

@media (max-width: 859.98px) { .ft-hours__main { grid-template-columns: 1fr 1fr; } .ft-hours__brand { grid-column: 1 / -1; } }
@media (max-width: 519.98px) { .ft-hours__main { grid-template-columns: 1fr; } .ft-hours__bottom { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .ft-hours__bottom a { transition: none; } }

/* ===== footers-20 · .ft-lang ===== */
/* ==========================================================================
   Footers 20 · Language Switcher — scoped under .ft-lang
   ========================================================================== */

.ft-lang {
  --primary: var(--primary,#1f3a28);
  --accent: var(--accent,#9a3324);
  --gold: var(--gold,#b8945f);
  --bg: var(--bg,#f5f0e6);
  --surface: #ffffff;
  --text: var(--text,#2a2a24);
  --muted: var(--muted,#6e6e62);
  --line: var(--line,#e6dfd1);
  --transition: .3s cubic-bezier(.22, 1, .36, 1);

  display: block;
  background: var(--bg);
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.ft-lang__inner { background: var(--surface); border-top: 1px solid var(--line); }
.ft-lang__wrap { max-width: 1180px; margin: 0 auto; padding: clamp(2.6rem, 5vw, 4rem) 1.6rem 1.6rem; }

.ft-lang__main { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.ft-lang__logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; margin-bottom: .8rem; }
.ft-lang__logo svg { width: 28px; height: 28px; fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linejoin: round; }
.ft-lang__logo span { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.18rem; color: var(--primary); }
.ft-lang__logo em { font-style: normal; color: var(--accent); }
.ft-lang__brand p { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--muted); max-width: 30ch; }
.ft-lang__col h3 { margin: 0 0 1rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: .95rem; color: var(--primary); }
.ft-lang__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ft-lang__col a { font-size: .92rem; color: var(--muted); text-decoration: none; transition: color var(--transition), padding var(--transition); }
.ft-lang__col a:hover { color: var(--primary); padding-left: 3px; }
.ft-lang__col a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

/* Bottom + switcher ------------------------------------------------------- */
.ft-lang__bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.4rem; }
.ft-lang__bottom > p { margin: 0; font-size: .84rem; color: var(--muted); }

.ft-lang__switch { position: relative; }
.ft-lang__btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--primary); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.ft-lang__btn:hover { border-color: var(--primary); }
.ft-lang__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ft-lang__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ft-lang__chev { width: 15px !important; height: 15px !important; stroke-width: 2 !important; transition: transform var(--transition); }
.ft-lang__btn[aria-expanded="true"] .ft-lang__chev { transform: rotate(180deg); }

.ft-lang__list {
  position: absolute; right: 0; bottom: calc(100% + 8px);
  min-width: 170px; list-style: none; margin: 0; padding: .4rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 24px 50px -24px rgba(31, 58, 40, .5); z-index: 10;
}
.ft-lang__list[hidden] { display: none; }
.ft-lang__list li { padding: .55rem .8rem; border-radius: 9px; font-size: .9rem; color: var(--text); cursor: pointer; transition: background var(--transition), color var(--transition); }
.ft-lang__list li:hover { background: var(--bg,#faf7f0); color: var(--primary); }
.ft-lang__list li[aria-selected="true"] { color: var(--primary); font-weight: 600; }
.ft-lang__list li:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

@media (max-width: 859.98px) { .ft-lang__main { grid-template-columns: 1fr 1fr; } .ft-lang__brand { grid-column: 1 / -1; } }
@media (max-width: 519.98px) { .ft-lang__main { grid-template-columns: 1fr; } .ft-lang__bottom { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .ft-lang__btn, .ft-lang__chev, .ft-lang__col a, .ft-lang__list li { transition: none; } }

/* ===== footers-21 · .ft-twotone ===== */
/* ==========================================================================
   Footers 21 · Two-tone Split — scoped under .ft-twotone
   Light link band on top, dark legal bar below.
   ========================================================================== */

.ft-twotone {
  --primary: var(--primary,#1f3a28);
  --accent: var(--accent,#9a3324);
  --gold: var(--gold,#b8945f);
  --bg: var(--bg,#f5f0e6);
  --surface: #ffffff;
  --text: var(--text,#2a2a24);
  --muted: var(--muted,#6e6e62);
  --line: var(--line,#e6dfd1);
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  display: block;
  font-family: "Inter", system-ui, sans-serif;
}

.ft-twotone__inner { display: block; }
.ft-twotone__wrap { max-width: 1180px; margin: 0 auto; padding-left: 1.4rem; padding-right: 1.4rem; }

/* Light band -------------------------------------------------------------- */
.ft-twotone__light {
  background: linear-gradient(180deg, var(--bg,#faf7f0) 0%, var(--bg) 100%);
  border-top: 3px solid var(--primary);
}
.ft-twotone__top {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 2.6rem;
  padding-top: clamp(2.8rem, 5.5vw, 4rem); padding-bottom: clamp(2.4rem, 5vw, 3.4rem);
}

.ft-twotone__logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; margin-bottom: 1.1rem; }
.ft-twotone__logo svg { width: 30px; height: 30px; fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linejoin: round; }
.ft-twotone__logo span { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--primary); }
.ft-twotone__logo em { font-style: normal; color: var(--accent); }
.ft-twotone__about { margin: 0 0 1.4rem; font-size: .93rem; line-height: 1.65; color: var(--muted); max-width: 36ch; }

.ft-twotone__social { display: flex; gap: .55rem; }
.ft-twotone__social a {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--primary);
  transition: background var(--transition), color var(--transition), transform var(--transition), border-color var(--transition);
}
.ft-twotone__social a:hover { background: var(--primary); color: var(--bg,#f4efe5); border-color: var(--primary); transform: translateY(-3px); }
.ft-twotone__social a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ft-twotone__social svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.ft-twotone__h {
  margin: 0 0 1.1rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--primary);
}
.ft-twotone__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .68rem; }
.ft-twotone__col a { font-size: .92rem; color: var(--muted); text-decoration: none; transition: color var(--transition), padding var(--transition); }
.ft-twotone__col a:hover { color: var(--accent); padding-left: 4px; }
.ft-twotone__col a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* Dark bar ---------------------------------------------------------------- */
.ft-twotone__dark { background: radial-gradient(120% 200% at 0% 0%, color-mix(in srgb, var(--primary,#1f3a28) 85%, #fff) 0%, var(--primary,#1f3a28) 55%, color-mix(in srgb, var(--primary,#1f3a28) 72%, #000) 100%); }
.ft-twotone__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-top: 1.2rem; padding-bottom: 1.2rem;
}
.ft-twotone__copy { margin: 0; font-size: .86rem; color: rgba(244, 239, 229, .62); }
.ft-twotone__legal { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.4rem; }
.ft-twotone__legal a { font-size: .86rem; color: rgba(244, 239, 229, .78); text-decoration: none; transition: color var(--transition); }
.ft-twotone__legal a:hover { color: var(--gold); }
.ft-twotone__legal a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 859.98px) {
  .ft-twotone__top { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .ft-twotone__brand { grid-column: 1 / -1; }
}
@media (max-width: 519.98px) {
  .ft-twotone__top { grid-template-columns: 1fr; }
  .ft-twotone__bottom { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-twotone__social a, .ft-twotone__col a, .ft-twotone__legal a { transition: none; }
}

/* ===== footers-22 · .ft-offices ===== */
/* ==========================================================================
   Footers 22 · Global Offices — scoped under .ft-offices
   ========================================================================== */

.ft-offices {
  --primary: var(--primary,#1f3a28);
  --accent: var(--accent,#9a3324);
  --gold: var(--gold,#b8945f);
  --bg: var(--bg,#f5f0e6);
  --surface: #ffffff;
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  display: block;
  background: var(--bg);
  font-family: "Inter", system-ui, sans-serif;
}

.ft-offices__inner { background: radial-gradient(120% 130% at 0% 0%, color-mix(in srgb, var(--primary,#1f3a28) 85%, #fff) 0%, var(--primary,#1f3a28) 50%, color-mix(in srgb, var(--primary,#1f3a28) 72%, #000) 100%); color: rgba(244, 239, 229, .82); }
.ft-offices__wrap { max-width: 1180px; margin: 0 auto; padding: clamp(2.8rem, 6vw, 4.2rem) 1.6rem 1.6rem; }

.ft-offices__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: 2rem; border-bottom: 1px solid rgba(244, 239, 229, .14); margin-bottom: 2.2rem; }
.ft-offices__logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.ft-offices__logo svg { width: 28px; height: 28px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linejoin: round; }
.ft-offices__logo span { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.18rem; color: #fff; }
.ft-offices__logo em { font-style: normal; color: var(--gold); }
.ft-offices__nav { display: flex; gap: .3rem 1.4rem; flex-wrap: wrap; }
.ft-offices__nav a { font-size: .92rem; color: rgba(244, 239, 229, .78); text-decoration: none; transition: color var(--transition); }
.ft-offices__nav a:hover { color: var(--gold); }
.ft-offices__nav a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }

.ft-offices__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(244, 239, 229, .14); }
.ft-office { font-style: normal; padding: 1.3rem 1.4rem; background: rgba(244, 239, 229, .05); border: 1px solid rgba(244, 239, 229, .12); border-radius: 16px; }
.ft-office h3 { margin: 0 0 .6rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.1rem; color: #fff; display: flex; align-items: center; gap: .5rem; }
.ft-office h3 span { font-family: "Inter", system-ui, sans-serif; font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--gold,#b8945f) 18%, #000); background: var(--gold); padding: .15rem .5rem; border-radius: 999px; }
.ft-office p { margin: 0 0 .7rem; font-size: .9rem; line-height: 1.55; color: rgba(244, 239, 229, .78); }
.ft-office a { font-size: .9rem; font-weight: 600; color: var(--gold); text-decoration: none; }
.ft-office a:hover { text-decoration: underline; }
.ft-office a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

.ft-offices__bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.5rem; }
.ft-offices__bottom p { margin: 0; font-size: .84rem; color: rgba(244, 239, 229, .6); }
.ft-offices__bottom ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.4rem; }
.ft-offices__bottom a { font-size: .84rem; color: rgba(244, 239, 229, .7); text-decoration: none; transition: color var(--transition); }
.ft-offices__bottom a:hover { color: var(--gold); }

@media (max-width: 767.98px) { .ft-offices__grid { grid-template-columns: 1fr; } }
@media (max-width: 519.98px) { .ft-offices__bottom { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .ft-offices__nav a, .ft-offices__bottom a { transition: none; } }

/* ===== footers-23 · .ft-sitemap ===== */
/* ==========================================================================
   Footers 23 · Sitemap — scoped under .ft-sitemap
   ========================================================================== */

.ft-sitemap {
  --primary: var(--primary,#1f3a28);
  --accent: var(--accent,#9a3324);
  --gold: var(--gold,#b8945f);
  --bg: var(--bg,#f5f0e6);
  --surface: #ffffff;
  --text: var(--text,#2a2a24);
  --muted: var(--muted,#6e6e62);
  --line: var(--line,#e6dfd1);
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  display: block;
  background: var(--bg);
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.ft-sitemap__inner { background: var(--surface); border-top: 1px solid var(--line); }
.ft-sitemap__wrap { max-width: 1180px; margin: 0 auto; padding: clamp(2.6rem, 5vw, 4rem) 1.6rem 1.6rem; }

.ft-sitemap__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1.8rem; margin-bottom: 2rem; border-bottom: 1px solid var(--line); }
.ft-sitemap__logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.ft-sitemap__logo svg { width: 28px; height: 28px; fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linejoin: round; }
.ft-sitemap__logo span { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.18rem; color: var(--primary); }
.ft-sitemap__logo em { font-style: normal; color: var(--accent); }
.ft-sitemap__social { display: flex; gap: .4rem; }
.ft-sitemap__social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--bg,#efe8da); color: var(--primary); transition: background var(--transition), color var(--transition), transform var(--transition); }
.ft-sitemap__social a:hover { background: var(--primary); color: var(--gold); transform: translateY(-2px); }
.ft-sitemap__social a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ft-sitemap__social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.ft-sitemap__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.6rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.ft-sitemap__grid h3 { margin: 0 0 .9rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: .84rem; letter-spacing: .04em; text-transform: uppercase; color: var(--primary); }
.ft-sitemap__grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ft-sitemap__grid a { font-size: .9rem; color: var(--muted); text-decoration: none; transition: color var(--transition), padding var(--transition); }
.ft-sitemap__grid a:hover { color: var(--primary); padding-left: 3px; }
.ft-sitemap__grid a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

.ft-sitemap__bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.4rem; }
.ft-sitemap__bottom p { margin: 0; font-size: .84rem; color: var(--muted); }
.ft-sitemap__bottom ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.3rem; flex-wrap: wrap; }
.ft-sitemap__bottom a { font-size: .84rem; color: var(--muted); text-decoration: none; transition: color var(--transition); }
.ft-sitemap__bottom a:hover { color: var(--primary); }

@media (max-width: 991.98px) { .ft-sitemap__grid { grid-template-columns: repeat(3, 1fr); gap: 1.6rem 1.2rem; } }
@media (max-width: 519.98px) { .ft-sitemap__grid { grid-template-columns: 1fr 1fr; } .ft-sitemap__bottom { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .ft-sitemap__social a, .ft-sitemap__grid a, .ft-sitemap__bottom a { transition: none; } }

/* ===== footers-24 · .ft-oneline ===== */
/* ==========================================================================
   Footers 24 · One-line Minimal — scoped under .ft-oneline
   ========================================================================== */

.ft-oneline {
  --primary: var(--primary,#1f3a28);
  --accent: var(--accent,#9a3324);
  --gold: var(--gold,#b8945f);
  --bg: var(--bg,#f5f0e6);
  --surface: #ffffff;
  --text: var(--text,#2a2a24);
  --muted: var(--muted,#6e6e62);
  --line: var(--line,#e6dfd1);
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  display: block;
  background: var(--bg);
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.ft-oneline__inner { max-width: 1180px; margin: 0 auto; padding: 1.6rem; }
.ft-oneline__wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; flex-wrap: wrap;
  padding-bottom: 1.2rem; border-bottom: 1px solid var(--line);
}

.ft-oneline__logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.ft-oneline__logo svg { width: 26px; height: 26px; fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linejoin: round; }
.ft-oneline__logo span { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.1rem; color: var(--primary); }
.ft-oneline__logo em { font-style: normal; color: var(--accent); }

.ft-oneline__nav { display: flex; align-items: center; gap: .3rem 1.4rem; flex-wrap: wrap; justify-content: center; }
.ft-oneline__nav a { font-size: .92rem; font-weight: 500; color: var(--muted); text-decoration: none; transition: color var(--transition); }
.ft-oneline__nav a:hover { color: var(--primary); }
.ft-oneline__nav a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }

.ft-oneline__social { display: flex; gap: .4rem; }
.ft-oneline__social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--bg,#efe8da); color: var(--primary); transition: background var(--transition), color var(--transition), transform var(--transition); }
.ft-oneline__social a:hover { background: var(--primary); color: var(--gold); transform: translateY(-2px); }
.ft-oneline__social a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ft-oneline__social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.ft-oneline__copy { margin: 1.1rem 0 0; text-align: center; font-size: .84rem; color: var(--muted); }

@media (max-width: 639.98px) {
  .ft-oneline__wrap { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-oneline__nav a, .ft-oneline__social a { transition: none; }
}

/* ===== footers-25 · .ft-pattern ===== */
/* ==========================================================================
   Footers 25 · Patterned — scoped under .ft-pattern
   ========================================================================== */

.ft-pattern {
  --primary: var(--primary,#1f3a28);
  --accent: var(--accent,#9a3324);
  --gold: var(--gold,#b8945f);
  --bg: var(--bg,#f5f0e6);
  --surface: #ffffff;
  --text: var(--text,#2a2a24);
  --muted: var(--muted,#6e6e62);
  --line: var(--line,#e6dfd1);
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  display: block;
  background: var(--bg);
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.ft-pattern__inner { position: relative; overflow: hidden; background: var(--bg,#efe8d8); border-top: 3px solid var(--gold); }
.ft-pattern__dots {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(31, 58, 40, .09) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(120% 100% at 100% 0%, #000 0%, transparent 60%);
  mask-image: radial-gradient(120% 100% at 100% 0%, #000 0%, transparent 60%);
}
.ft-pattern__wrap { position: relative; max-width: 1180px; margin: 0 auto; padding: clamp(2.6rem, 5vw, 4rem) 1.6rem 1.6rem; }

.ft-pattern__main { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(31, 58, 40, .12); }

.ft-pattern__logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; margin-bottom: .8rem; }
.ft-pattern__logo svg { width: 28px; height: 28px; fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linejoin: round; }
.ft-pattern__logo span { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.18rem; color: var(--primary); }
.ft-pattern__logo em { font-style: normal; color: var(--accent); }
.ft-pattern__brand p { margin: 0 0 1.1rem; font-size: .93rem; line-height: 1.6; color: var(--muted); max-width: 32ch; }
.ft-pattern__social { display: flex; gap: .5rem; }
.ft-pattern__social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--surface); color: var(--primary); box-shadow: 0 8px 20px -14px rgba(31, 58, 40, .6); transition: background var(--transition), color var(--transition), transform var(--transition); }
.ft-pattern__social a:hover { background: var(--primary); color: var(--gold); transform: translateY(-2px); }
.ft-pattern__social a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ft-pattern__social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.ft-pattern__col h3 { margin: 0 0 1rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: .95rem; color: var(--primary); }
.ft-pattern__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ft-pattern__col a { font-size: .92rem; color: var(--muted); text-decoration: none; transition: color var(--transition), padding var(--transition); }
.ft-pattern__col a:hover { color: var(--primary); padding-left: 3px; }
.ft-pattern__col a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

.ft-pattern__copy { margin: 1.4rem 0 0; font-size: .84rem; color: var(--muted); }

@media (max-width: 859.98px) { .ft-pattern__main { grid-template-columns: 1fr 1fr; } .ft-pattern__brand { grid-column: 1 / -1; } }
@media (max-width: 479.98px) { .ft-pattern__main { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ft-pattern__social a, .ft-pattern__col a { transition: none; } }

/* ===== footers-26 · .ft-subscribe ===== */
/* ==========================================================================
   Footers 26 · Subscribe & Social — scoped under .ft-subscribe
   ========================================================================== */

.ft-subscribe {
  --primary: var(--primary,#1f3a28);
  --accent: var(--accent,#9a3324);
  --gold: var(--gold,#b8945f);
  --bg: var(--bg,#f5f0e6);
  --surface: #ffffff;
  --text: var(--text,#2a2a24);
  --muted: var(--muted,#6e6e62);
  --line: var(--line,#e6dfd1);
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  display: block;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, sans-serif;
}

.ft-subscribe__inner { display: block; }
.ft-subscribe__wrap { max-width: 1180px; margin: 0 auto; padding: clamp(2.5rem, 5vw, 4rem) 1.4rem 1.6rem; }

/* Subscribe panel --------------------------------------------------------- */
.ft-subscribe__panel {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 2.5rem;
  background: radial-gradient(130% 140% at 100% 0%, color-mix(in srgb, var(--primary,#1f3a28) 85%, #fff) 0%, var(--primary,#1f3a28) 48%, color-mix(in srgb, var(--primary,#1f3a28) 72%, #000) 100%);
  border-radius: 26px; padding: clamp(2rem, 4vw, 3rem);
  box-shadow: 0 26px 60px -34px rgba(31, 58, 40, .55);
}
.ft-subscribe__panel::after {
  content: ""; position: absolute; right: -60px; bottom: -70px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 148, 95, .35), transparent 68%); pointer-events: none;
}
.ft-subscribe__eyebrow {
  display: inline-block; font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .18em; color: var(--gold); margin-bottom: .8rem;
}
.ft-subscribe__title {
  margin: 0 0 .7rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15; color: #fff;
}
.ft-subscribe__title em { font-style: normal; color: var(--gold); }
.ft-subscribe__lead { margin: 0; font-size: .95rem; line-height: 1.6; color: rgba(244, 239, 229, .8); max-width: 42ch; }

.ft-subscribe__form { position: relative; z-index: 1; }
.ft-subscribe__field {
  display: flex; gap: .5rem; background: rgba(244, 239, 229, .1);
  border: 1px solid rgba(244, 239, 229, .18); border-radius: 16px; padding: .5rem;
}
.ft-subscribe__input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: #fff;
  font-family: inherit; font-size: .95rem; padding: .7rem .9rem; border-radius: 12px;
}
.ft-subscribe__input::placeholder { color: rgba(244, 239, 229, .55); }
.ft-subscribe__input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ft-subscribe__btn {
  flex: 0 0 auto; border: 0; cursor: pointer; font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600; font-size: .9rem; color: color-mix(in srgb, var(--gold,#b8945f) 18%, #000); background: var(--gold);
  padding: .8rem 1.4rem; border-radius: 12px; transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
}
.ft-subscribe__btn:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--gold,#b8945f) 82%, #fff); box-shadow: 0 12px 26px -14px rgba(184, 148, 95, .8); }
.ft-subscribe__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ft-subscribe__status { margin: .8rem .2rem 0; min-height: 1.2em; font-size: .85rem; font-weight: 500; color: rgba(244, 239, 229, .7); }
.ft-subscribe__status.is-ok { color: color-mix(in srgb, var(--primary,#1f3a28) 16%, #fff); }
.ft-subscribe__status.is-error { color: color-mix(in srgb, var(--accent,#9a3324) 24%, #fff); }

/* Main -------------------------------------------------------------------- */
.ft-subscribe__main {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 2.5rem;
  padding: clamp(2.2rem, 4vw, 3rem) 0 2.2rem; border-bottom: 1px solid var(--line);
}
.ft-subscribe__logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; margin-bottom: 1rem; }
.ft-subscribe__logo svg { width: 30px; height: 30px; fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linejoin: round; }
.ft-subscribe__logo span { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--primary); }
.ft-subscribe__logo em { font-style: normal; color: var(--accent); }
.ft-subscribe__about { margin: 0 0 1.3rem; font-size: .93rem; line-height: 1.65; color: var(--muted); max-width: 34ch; }

.ft-subscribe__social { display: flex; gap: .55rem; }
.ft-subscribe__social a {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); color: var(--primary);
  transition: background var(--transition), color var(--transition), transform var(--transition), border-color var(--transition);
}
.ft-subscribe__social a:hover { background: var(--primary); color: #fff; border-color: var(--primary); transform: translateY(-3px); }
.ft-subscribe__social a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ft-subscribe__social svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.ft-subscribe__ch { margin: 0 0 1.1rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: .95rem; color: var(--primary); }
.ft-subscribe__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.ft-subscribe__col a { font-size: .92rem; color: var(--muted); text-decoration: none; transition: color var(--transition), padding var(--transition); }
.ft-subscribe__col a:hover { color: var(--accent); padding-left: 4px; }
.ft-subscribe__col a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

/* Bottom ------------------------------------------------------------------ */
.ft-subscribe__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-top: 1.5rem;
}
.ft-subscribe__copy { margin: 0; font-size: .85rem; color: var(--muted); }
.ft-subscribe__legal { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.4rem; }
.ft-subscribe__legal a { font-size: .85rem; color: var(--muted); text-decoration: none; transition: color var(--transition); }
.ft-subscribe__legal a:hover { color: var(--accent); }
.ft-subscribe__legal a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 859.98px) {
  .ft-subscribe__panel { grid-template-columns: 1fr; gap: 1.6rem; }
  .ft-subscribe__main { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 519.98px) {
  .ft-subscribe__field { flex-direction: column; }
  .ft-subscribe__btn { width: 100%; }
  .ft-subscribe__main { grid-template-columns: 1fr; }
  .ft-subscribe__bottom { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-subscribe__btn, .ft-subscribe__social a, .ft-subscribe__col a, .ft-subscribe__legal a { transition: none; }
}

/* ===== footers-27 · .ft-ctaband ===== */
/* ==========================================================================
   Footers 27 · CTA Band Footer — scoped under .ft-ctaband
   ========================================================================== */

.ft-ctaband {
  --primary: var(--primary,#1f3a28);
  --accent: var(--accent,#9a3324);
  --gold: var(--gold,#b8945f);
  --bg: var(--bg,#f5f0e6);
  --surface: #ffffff;
  --text: var(--text,#2a2a24);
  --muted: var(--muted,#6e6e62);
  --line: var(--line,#e6dfd1);
  --transition: .4s cubic-bezier(.22, 1, .36, 1);

  display: block;
  background: var(--bg);
  font-family: "Inter", system-ui, sans-serif;
}

.ft-ctaband__inner {
  background: radial-gradient(120% 130% at 0% 0%, color-mix(in srgb, var(--primary,#1f3a28) 85%, #fff) 0%, var(--primary,#1f3a28) 46%, color-mix(in srgb, var(--primary,#1f3a28) 72%, #000) 100%);
  color: rgba(244, 239, 229, .82);
}
.ft-ctaband__wrap { max-width: 1180px; margin: 0 auto; padding: clamp(2.6rem, 5vw, 4rem) 1.4rem 1.6rem; }

/* CTA band ---------------------------------------------------------------- */
.ft-ctaband__cta {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(154, 51, 36, .96), rgba(122, 40, 28, .96));
  border-radius: 24px; padding: clamp(1.8rem, 3.5vw, 2.8rem);
  box-shadow: 0 26px 60px -34px rgba(0, 0, 0, .55);
}
.ft-ctaband__cta::after {
  content: ""; position: absolute; right: -50px; top: -60px; width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 148, 95, .4), transparent 68%); pointer-events: none;
}
.ft-ctaband__eyebrow {
  display: inline-block; font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .18em; color: color-mix(in srgb, var(--gold,#b8945f) 46%, #fff); margin-bottom: .6rem;
}
.ft-ctaband__cta-title {
  margin: 0 0 .5rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.15rem); line-height: 1.14; color: #fff;
}
.ft-ctaband__cta-title em { font-style: normal; color: color-mix(in srgb, var(--gold,#b8945f) 46%, #fff); }
.ft-ctaband__cta-sub { margin: 0; font-size: .96rem; line-height: 1.55; color: rgba(255, 255, 255, .85); max-width: 44ch; }

.ft-ctaband__cta-actions { position: relative; z-index: 1; display: flex; gap: .8rem; flex-wrap: wrap; }
.ft-ctaband__btn {
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: .92rem;
  padding: .85rem 1.6rem; border-radius: 13px;
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition), color var(--transition);
}
.ft-ctaband__btn--gold { background: var(--gold); color: color-mix(in srgb, var(--gold,#b8945f) 18%, #000); }
.ft-ctaband__btn--gold:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--gold,#b8945f) 82%, #fff); box-shadow: 0 14px 30px -16px rgba(184, 148, 95, .9); }
.ft-ctaband__btn--ghost { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .3); }
.ft-ctaband__btn--ghost:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .18); }
.ft-ctaband__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Compact strip ----------------------------------------------------------- */
.ft-ctaband__strip {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  padding: clamp(2rem, 4vw, 2.8rem) 0 1.8rem; border-bottom: 1px solid rgba(244, 239, 229, .14);
}
.ft-ctaband__logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.ft-ctaband__logo svg { width: 28px; height: 28px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linejoin: round; }
.ft-ctaband__logo span { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.15rem; color: #fff; }
.ft-ctaband__logo em { font-style: normal; color: var(--gold); }

.ft-ctaband__nav { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.ft-ctaband__nav a { font-size: .92rem; color: rgba(244, 239, 229, .74); text-decoration: none; transition: color var(--transition); }
.ft-ctaband__nav a:hover { color: var(--gold); }
.ft-ctaband__nav a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }

.ft-ctaband__social { display: flex; gap: .55rem; }
.ft-ctaband__social a {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  background: rgba(244, 239, 229, .08); color: var(--bg,#f4efe5);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.ft-ctaband__social a:hover { background: var(--gold); color: color-mix(in srgb, var(--gold,#b8945f) 18%, #000); transform: translateY(-3px); }
.ft-ctaband__social a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ft-ctaband__social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Bottom ------------------------------------------------------------------ */
.ft-ctaband__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-top: 1.5rem;
}
.ft-ctaband__copy { margin: 0; font-size: .85rem; color: rgba(244, 239, 229, .6); }
.ft-ctaband__legal { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.4rem; }
.ft-ctaband__legal a { font-size: .85rem; color: rgba(244, 239, 229, .7); text-decoration: none; transition: color var(--transition); }
.ft-ctaband__legal a:hover { color: var(--gold); }
.ft-ctaband__legal a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .ft-ctaband__cta { flex-direction: column; align-items: flex-start; }
  .ft-ctaband__strip { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
}
@media (max-width: 519.98px) {
  .ft-ctaband__cta-actions { width: 100%; }
  .ft-ctaband__btn { flex: 1; }
  .ft-ctaband__bottom { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-ctaband__btn, .ft-ctaband__nav a, .ft-ctaband__social a, .ft-ctaband__legal a { transition: none; }
}

/* ===== footers-28 · .ft-map ===== */
/* ==========================================================================
   Footers 28 · Map & Address — scoped under .ft-map
   ========================================================================== */

.ft-map {
  --primary: var(--primary,#1f3a28);
  --accent: var(--accent,#9a3324);
  --gold: var(--gold,#b8945f);
  --bg: var(--bg,#f5f0e6);
  --surface: #ffffff;
  --text: var(--text,#2a2a24);
  --muted: var(--muted,#6e6e62);
  --line: var(--line,#e6dfd1);
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  display: block;
  background: var(--bg);
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.ft-map__inner { background: var(--surface); border-top: 1px solid var(--line); }
.ft-map__wrap { max-width: 1180px; margin: 0 auto; padding: clamp(2.6rem, 5vw, 4rem) 1.6rem 1.6rem; }

.ft-map__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.4rem; align-items: stretch; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }

.ft-map__logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; margin-bottom: 1.2rem; }
.ft-map__logo svg { width: 28px; height: 28px; fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linejoin: round; }
.ft-map__logo span { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.18rem; color: var(--primary); }
.ft-map__logo em { font-style: normal; color: var(--accent); }
.ft-map__info { list-style: none; margin: 0 0 1.3rem; padding: 0; display: grid; gap: .8rem; }
.ft-map__info li { display: flex; align-items: center; gap: .6rem; font-size: .92rem; color: var(--text); }
.ft-map__info svg { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ft-map__links { display: flex; gap: .3rem 1.4rem; flex-wrap: wrap; }
.ft-map__links a { font-size: .92rem; color: var(--muted); text-decoration: none; transition: color var(--transition); }
.ft-map__links a:hover { color: var(--primary); }
.ft-map__links a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }

/* Map --------------------------------------------------------------------- */
.ft-map__map { position: relative; min-height: 220px; border-radius: 18px; overflow: hidden; background: color-mix(in srgb, var(--primary,#1f3a28) 7%, #fff); border: 1px solid var(--line); }
.ft-map__map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ftm-road { fill: none; stroke: #fff; stroke-linecap: round; stroke-width: 6; }
.ftm-road--major { stroke-width: 9; }
.ftm-park { fill: color-mix(in srgb, var(--primary,#1f3a28) 15%, #fff); }
.ftm-river { fill: none; stroke: color-mix(in srgb, var(--primary,#1f3a28) 12%, #fff); stroke-width: 11; stroke-linecap: round; }
.ftm-halo { fill: rgba(184, 148, 95, .22); }
.ft-map__pin { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -100%); color: var(--accent); filter: drop-shadow(0 8px 10px rgba(31, 58, 40, .35)); }
.ft-map__pin svg { position: static; width: 40px; height: 40px; fill: var(--accent); stroke: #fff; stroke-width: 1.2; }
.ft-map__pin svg circle { fill: #fff; stroke: none; }
.ft-map__dir { position: absolute; left: 1rem; bottom: 1rem; display: inline-flex; align-items: center; padding: .55rem 1.1rem; border-radius: 999px; background: var(--primary); color: var(--bg,#f3efe6); font-weight: 600; font-size: .86rem; text-decoration: none; box-shadow: 0 14px 30px -16px rgba(31, 58, 40, .7); transition: transform var(--transition), background var(--transition); }
.ft-map__dir:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--primary,#1f3a28) 87%, #fff); }
.ft-map__dir:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.ft-map__copy { margin: 1.4rem 0 0; font-size: .84rem; color: var(--muted); }

@media (max-width: 767.98px) { .ft-map__grid { grid-template-columns: 1fr; } .ft-map__map { min-height: 200px; } }
@media (prefers-reduced-motion: reduce) { .ft-map__links a, .ft-map__dir { transition: none; } }

/* ===== footers-29 · .ft-newsletter2 ===== */
/* ==========================================================================
   Footers 29 · Newsletter Card — scoped under .ft-newsletter2
   ========================================================================== */

.ft-newsletter2 {
  --primary: var(--primary,#1f3a28);
  --accent: var(--accent,#9a3324);
  --gold: var(--gold,#b8945f);
  --bg: var(--bg,#f5f0e6);
  --surface: #ffffff;
  --text: var(--text,#2a2a24);
  --muted: var(--muted,#6e6e62);
  --line: var(--line,#e6dfd1);
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  display: block;
  background: var(--bg);
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.ft-newsletter2__inner { background: var(--surface); border-top: 1px solid var(--line); }
.ft-newsletter2__wrap { max-width: 1180px; margin: 0 auto; padding: clamp(2.6rem, 5vw, 4rem) 1.6rem 1.6rem; }
.ft-newsletter2__vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.ft-newsletter2__top { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.4rem; align-items: center; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }

.ft-newsletter2__logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; margin-bottom: .9rem; }
.ft-newsletter2__logo svg { width: 28px; height: 28px; fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linejoin: round; }
.ft-newsletter2__logo span { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.18rem; color: var(--primary); }
.ft-newsletter2__logo em { font-style: normal; color: var(--accent); }
.ft-newsletter2__brand p { margin: 0 0 1.1rem; font-size: .95rem; line-height: 1.6; color: var(--muted); max-width: 40ch; }
.ft-newsletter2__social { display: flex; gap: .5rem; }
.ft-newsletter2__social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--bg,#efe8da); color: var(--primary); transition: background var(--transition), color var(--transition), transform var(--transition); }
.ft-newsletter2__social a:hover { background: var(--primary); color: var(--gold); transform: translateY(-2px); }
.ft-newsletter2__social a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ft-newsletter2__social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Card -------------------------------------------------------------------- */
.ft-newsletter2__card { background: radial-gradient(130% 130% at 0% 0%, color-mix(in srgb, var(--primary,#1f3a28) 85%, #fff), var(--primary,#1f3a28) 55%, color-mix(in srgb, var(--primary,#1f3a28) 72%, #000)); color: var(--bg,#f4efe5); border-radius: 20px; padding: 1.8rem; }
.ft-newsletter2__card h3 { margin: 0 0 .4rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 1.2rem; color: #fff; }
.ft-newsletter2__card > p { margin: 0 0 1.1rem; font-size: .92rem; line-height: 1.55; color: rgba(244, 239, 229, .78); }
.ft-newsletter2__form { display: flex; gap: .5rem; padding: .35rem; background: rgba(255, 255, 255, .1); border: 1px solid rgba(244, 239, 229, .18); border-radius: 999px; }
.ft-newsletter2__form:focus-within { border-color: var(--gold); }
.ft-newsletter2__form input { flex: 1; min-width: 0; padding: .65rem 1rem; border: none; background: transparent; color: #fff; font: inherit; font-size: .93rem; }
.ft-newsletter2__form input::placeholder { color: rgba(244, 239, 229, .55); }
.ft-newsletter2__form input:focus { outline: none; }
.ft-newsletter2__form button { padding: .65rem 1.3rem; border: none; border-radius: 999px; background: var(--gold); color: color-mix(in srgb, var(--gold,#b8945f) 18%, #000); font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; white-space: nowrap; transition: background var(--transition); }
.ft-newsletter2__form button:hover { background: color-mix(in srgb, var(--gold,#b8945f) 82%, #fff); }
.ft-newsletter2__form button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ft-newsletter2__status { margin: .7rem .3rem 0; min-height: 1.1em; font-size: .84rem; font-weight: 500; }
.ft-newsletter2__status.is-error { color: color-mix(in srgb, var(--accent,#9a3324) 28%, #fff); }
.ft-newsletter2__status.is-ok { color: color-mix(in srgb, var(--primary,#1f3a28) 20%, #fff); }

.ft-newsletter2__bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.4rem; }
.ft-newsletter2__bottom p { margin: 0; font-size: .84rem; color: var(--muted); }
.ft-newsletter2__bottom ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.3rem; }
.ft-newsletter2__bottom a { font-size: .84rem; color: var(--muted); text-decoration: none; transition: color var(--transition); }
.ft-newsletter2__bottom a:hover { color: var(--primary); }

@media (max-width: 767.98px) { .ft-newsletter2__top { grid-template-columns: 1fr; } }
@media (max-width: 439.98px) { .ft-newsletter2__form { flex-direction: column; border-radius: 16px; } .ft-newsletter2__form button { justify-content: center; } .ft-newsletter2__bottom { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .ft-newsletter2__social a, .ft-newsletter2__form button, .ft-newsletter2__bottom a { transition: none; } }

/* ===== footers-30 · .ft-partners ===== */
/* ==========================================================================
   Footers 30 · Partner Logos — scoped under .ft-partners
   ========================================================================== */

.ft-partners {
  --primary: var(--primary,#1f3a28);
  --accent: var(--accent,#9a3324);
  --gold: var(--gold,#b8945f);
  --bg: var(--bg,#f5f0e6);
  --surface: #ffffff;
  --text: var(--text,#2a2a24);
  --muted: var(--muted,#6e6e62);
  --line: var(--line,#e6dfd1);
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  display: block;
  background: var(--bg);
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.ft-partners__inner { background: var(--surface); border-top: 1px solid var(--line); }
.ft-partners__wrap { max-width: 1180px; margin: 0 auto; padding: clamp(2.4rem, 5vw, 3.6rem) 1.6rem 1.6rem; }

/* Partner logos ----------------------------------------------------------- */
.ft-partners__logos { text-align: center; padding-bottom: 2.2rem; border-bottom: 1px solid var(--line); margin-bottom: 2.4rem; }
.ft-partners__lead { display: block; margin-bottom: 1.3rem; font-size: .76rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ft-partners__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.4rem 2.4rem; }
.ft-partners__logo { display: inline-flex; align-items: center; gap: .5rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.05rem; letter-spacing: .05em; color: color-mix(in srgb, var(--muted,#6e6e62) 68%, #fff); transition: color var(--transition), transform var(--transition); }
.ft-partners__logo svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ft-partners__logo:hover { color: var(--primary); transform: translateY(-2px); }

/* Main columns ------------------------------------------------------------ */
.ft-partners__main { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.ft-partners__blogo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; margin-bottom: .9rem; }
.ft-partners__blogo svg { width: 28px; height: 28px; fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linejoin: round; }
.ft-partners__blogo span { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--primary); }
.ft-partners__blogo em { font-style: normal; color: var(--accent); }
.ft-partners__brand p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--muted); max-width: 34ch; }

.ft-partners__col h3 { margin: 0 0 1rem; font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: .95rem; color: var(--primary); }
.ft-partners__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ft-partners__col a { font-size: .92rem; color: var(--muted); text-decoration: none; transition: color var(--transition), padding var(--transition); }
.ft-partners__col a:hover { color: var(--primary); padding-left: 3px; }
.ft-partners__col a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

.ft-partners__copy { margin: 1.4rem 0 0; font-size: .84rem; color: var(--muted); }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 859.98px) { .ft-partners__main { grid-template-columns: 1fr 1fr; gap: 1.8rem; } }
@media (max-width: 479.98px) { .ft-partners__main { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ft-partners__logo, .ft-partners__col a { transition: none; } }

/* ===== headers-01 · .hd-classic ===== */
/* ==========================================================================
   Headers 01 · Classic Sticky Nav — scoped under .hd-classic
   ========================================================================== */

.hd-classic {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  display: block;
  background: var(--bg);
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.hd-classic__bar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--transition), background var(--transition);
}
.hd-classic__bar.is-stuck { box-shadow: 0 14px 34px -22px rgba(31, 58, 40, .5); background: rgba(255, 255, 255, .96); }

.hd-classic__wrap {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: .9rem 1.4rem;
}

/* Logo -------------------------------------------------------------------- */
.hd-classic__logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.hd-classic__logo svg { width: 30px; height: 30px; fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linejoin: round; }
.hd-classic__logo span { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--primary); letter-spacing: -.01em; }
.hd-classic__logo em { font-style: normal; color: var(--accent); }

/* Nav --------------------------------------------------------------------- */
.hd-classic__nav { display: flex; align-items: center; gap: .3rem; }
.hd-classic__nav a {
  position: relative;
  padding: .5rem .85rem; border-radius: 999px;
  font-size: .95rem; font-weight: 500; color: var(--text); text-decoration: none;
  transition: color var(--transition), background var(--transition);
}
.hd-classic__nav a:hover { color: var(--primary); background: rgba(31, 58, 40, .06); }
.hd-classic__nav a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Actions ----------------------------------------------------------------- */
.hd-classic__actions { display: flex; align-items: center; gap: .8rem; }
.hd-classic__cta {
  display: inline-flex; align-items: center;
  padding: .6rem 1.3rem; border-radius: 999px;
  background: var(--primary); color: #f3efe6;
  font-weight: 600; font-size: .9rem; text-decoration: none; white-space: nowrap;
  box-shadow: 0 14px 28px -16px rgba(31, 58, 40, .7);
  transition: transform var(--transition), background var(--transition);
}
.hd-classic__cta:hover { transform: translateY(-2px); background: #26492f; }
.hd-classic__cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Hamburger --------------------------------------------------------------- */
.hd-classic__toggle {
  display: none;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.hd-classic__toggle span { width: 20px; height: 2px; border-radius: 2px; background: var(--primary); transition: transform var(--transition), opacity var(--transition); }
.hd-classic__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hd-classic__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hd-classic__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.hd-classic__toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Mobile ------------------------------------------------------------------ */
@media (max-width: 859.98px) {
  .hd-classic__toggle { display: inline-flex; }
  .hd-classic__nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: .2rem;
    padding: 1rem 1.4rem 1.4rem;
    background: var(--surface); border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -26px rgba(31, 58, 40, .5);
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
  }
  .hd-classic__bar.is-open .hd-classic__nav { transform: none; opacity: 1; visibility: visible; }
  .hd-classic__bar.is-open { box-shadow: 0 14px 34px -22px rgba(31, 58, 40, .5); }
  .hd-classic__nav a { padding: .8rem 1rem; border-radius: 12px; }
  .hd-classic__wrap { position: relative; }
}
@media (max-width: 479.98px) {
  .hd-classic__cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hd-classic__bar, .hd-classic__nav, .hd-classic__cta, .hd-classic__toggle span { transition: none; }
}

/* ===== headers-04 · .hd-topbar ===== */
/* ==========================================================================
   Headers 04 · Utility Top Bar — scoped under .hd-topbar
   ========================================================================== */

.hd-topbar {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  display: block;
  background: var(--bg);
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.hd-topbar__bar { position: sticky; top: 0; z-index: 50; }

/* Utility strip ----------------------------------------------------------- */
.hd-topbar__utility { background: var(--primary); color: rgba(243, 239, 230, .85); }
.hd-topbar__utility-wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-top: .5rem; padding-bottom: .5rem; font-size: .82rem;
}
.hd-topbar__contact { display: flex; align-items: center; gap: 1.4rem; }
.hd-topbar__uitem { display: inline-flex; align-items: center; gap: .45rem; color: rgba(243, 239, 230, .85); text-decoration: none; transition: color var(--transition); }
.hd-topbar__uitem svg { width: 15px; height: 15px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hd-topbar__uitem:hover { color: #fff; }
.hd-topbar__uitem:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

.hd-topbar__meta { display: flex; align-items: center; gap: 1.2rem; }
.hd-topbar__hours { color: rgba(243, 239, 230, .7); }
.hd-topbar__lang { display: inline-flex; align-items: center; gap: .1rem; padding: .12rem; border: 1px solid rgba(243, 239, 230, .28); border-radius: 999px; }
.hd-topbar__lang button, .hd-topbar__lang a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 26px; min-width: 30px; padding: .28rem .6rem; border: 0; border-radius: 999px;
  background: transparent; color: rgba(243, 239, 230, .8); text-decoration: none;
  font: 600 .74rem "Inter", sans-serif; cursor: pointer; letter-spacing: .04em;
  transition: background var(--transition), color var(--transition);
}
.hd-topbar__lang button.is-active, .hd-topbar__lang a.is-active { background: var(--gold); color: #2a2013; }
.hd-topbar__lang button:focus-visible, .hd-topbar__lang a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Main row ---------------------------------------------------------------- */
.hd-topbar__main {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--transition);
}
.hd-topbar__bar.is-stuck .hd-topbar__main { box-shadow: 0 16px 38px -26px rgba(31, 58, 40, .55); }
.hd-topbar__main-wrap {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-top: .85rem; padding-bottom: .85rem;
}
/* Logo: yükseklik otomatik, en fazla 48px (orantılı + okunaklı) */
.hd-topbar__logo img { height: auto; max-height: 48px; width: auto; }

/* Logo -------------------------------------------------------------------- */
.hd-topbar__logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.hd-topbar__logo svg { width: 30px; height: 30px; fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linejoin: round; }
.hd-topbar__logo span { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--primary); letter-spacing: -.01em; }
.hd-topbar__logo em { font-style: normal; color: var(--accent); }

/* Nav --------------------------------------------------------------------- */
.hd-topbar__nav { display: flex; align-items: center; gap: .25rem; }
.hd-topbar__nav a {
  position: relative;
  padding: .55rem .75rem;
  font-size: .95rem; font-weight: 500; color: var(--text); text-decoration: none;
  transition: color var(--transition);
}
.hd-topbar__nav a::before {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: -.9rem; height: 3px;
  background: var(--accent); border-radius: 3px 3px 0 0;
  transition: left var(--transition), right var(--transition);
}
.hd-topbar__nav a:hover { color: var(--primary); }
.hd-topbar__nav a:hover::before { left: .75rem; right: .75rem; }
.hd-topbar__nav a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }

/* Actions ----------------------------------------------------------------- */
.hd-topbar__actions { display: flex; align-items: center; gap: .8rem; }
.hd-topbar__cta {
  display: inline-flex; align-items: center;
  padding: .6rem 1.3rem; border-radius: 999px;
  background: var(--primary); color: #f3efe6;
  font-weight: 600; font-size: .9rem; text-decoration: none; white-space: nowrap;
  box-shadow: 0 14px 28px -16px rgba(31, 58, 40, .7);
  transition: transform var(--transition), background var(--transition);
}
.hd-topbar__cta:hover { transform: translateY(-2px); background: #26492f; }
.hd-topbar__cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Hamburger --------------------------------------------------------------- */
.hd-topbar__toggle {
  display: none;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.hd-topbar__toggle span { width: 20px; height: 2px; border-radius: 2px; background: var(--primary); transition: transform var(--transition), opacity var(--transition); }
.hd-topbar__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hd-topbar__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hd-topbar__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.hd-topbar__toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .hd-topbar__hours { display: none; }
}
@media (max-width: 859.98px) {
  .hd-topbar__toggle { display: inline-flex; }
  .hd-topbar__nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: .2rem;
    padding: 1rem 1.4rem 1.4rem;
    background: var(--surface); border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -26px rgba(31, 58, 40, .5);
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
  }
  .hd-topbar__main.is-open-panel .hd-topbar__nav,
  .hd-topbar__bar.is-open .hd-topbar__nav { transform: none; opacity: 1; visibility: visible; }
  .hd-topbar__nav a { padding: .8rem 1rem; border-radius: 12px; }
  .hd-topbar__nav a::before { display: none; }
  .hd-topbar__nav a:hover { background: rgba(31, 58, 40, .06); }
}
@media (max-width: 599.98px) {
  .hd-topbar__contact { gap: .9rem; }
  .hd-topbar__uitem span { display: none; }
  .hd-topbar__cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hd-topbar__nav, .hd-topbar__nav a::before, .hd-topbar__cta, .hd-topbar__toggle span, .hd-topbar__main { transition: none; }
}

/* ===== headers-05 · .hd-twotone ===== */
/* ==========================================================================
   Headers 05 · Two-tone Split — scoped under .hd-twotone
   ========================================================================== */

.hd-twotone {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  display: block;
  background: var(--bg);
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.hd-twotone__bar {
  position: sticky; top: 0; z-index: 50;
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: stretch;
  background: var(--surface);
  border-radius: 0 0 18px 18px;
  box-shadow: 0 16px 34px -24px rgba(31, 58, 40, .5);
  overflow: hidden;
}

/* Colored logo block ------------------------------------------------------ */
.hd-twotone__brand {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 1.15rem 2.4rem 1.15rem 1.6rem;
  background: radial-gradient(120% 140% at 0% 0%, #274a31, #1f3a28 60%, #16281c);
  color: #fff; text-decoration: none;
  clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%);
}
.hd-twotone__brand svg { width: 30px; height: 30px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linejoin: round; }
.hd-twotone__brand span { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em; }
.hd-twotone__brand em { font-style: normal; color: var(--gold); }

/* Light nav area ---------------------------------------------------------- */
.hd-twotone__panel {
  flex: 1;
  display: flex; align-items: center; justify-content: flex-end; gap: 1rem;
  padding: 0 1.4rem;
}
.hd-twotone__nav { display: flex; align-items: center; gap: .25rem; margin-right: auto; padding-left: 1rem; }
.hd-twotone__nav a {
  padding: .5rem .8rem; border-radius: 999px;
  font-size: .94rem; font-weight: 500; color: var(--text); text-decoration: none;
  transition: color var(--transition), background var(--transition);
}
.hd-twotone__nav a:hover { color: var(--primary); background: rgba(31, 58, 40, .06); }
.hd-twotone__nav a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.hd-twotone__cta {
  display: inline-flex; align-items: center;
  padding: .6rem 1.3rem; border-radius: 999px;
  background: var(--gold); color: #241a0e;
  font-weight: 600; font-size: .9rem; text-decoration: none; white-space: nowrap;
  transition: transform var(--transition), background var(--transition);
}
.hd-twotone__cta:hover { transform: translateY(-2px); background: #c8a570; }
.hd-twotone__cta:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* Hamburger --------------------------------------------------------------- */
.hd-twotone__toggle {
  display: none; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.hd-twotone__toggle span { width: 20px; height: 2px; border-radius: 2px; background: var(--primary); transition: transform var(--transition), opacity var(--transition); }
.hd-twotone__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hd-twotone__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hd-twotone__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.hd-twotone__toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Mobile ------------------------------------------------------------------ */
@media (max-width: 879.98px) {
  .hd-twotone__bar { position: relative; flex-wrap: wrap; }
  .hd-twotone__toggle { display: inline-flex; }
  .hd-twotone__panel { position: static; }
  .hd-twotone__nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: .2rem; margin: 0; padding: 1rem 1.4rem 1.4rem;
    background: var(--surface); border-top: 1px solid var(--line);
    box-shadow: 0 24px 40px -26px rgba(31, 58, 40, .5);
    transform: translateY(-10px); opacity: 0; visibility: hidden;
    transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
    z-index: 5;
  }
  .hd-twotone__bar.is-open .hd-twotone__nav { transform: none; opacity: 1; visibility: visible; }
  .hd-twotone__nav a { padding: .8rem 1rem; border-radius: 12px; }
}
@media (max-width: 479.98px) {
  .hd-twotone__brand { padding-right: 1.8rem; clip-path: none; }
  .hd-twotone__cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hd-twotone__nav, .hd-twotone__cta, .hd-twotone__toggle span { transition: none; }
}

/* ===== headers-13 · .hd-block ===== */
/* ==========================================================================
   Headers 13 · Bold Dark Block — scoped under .hd-block
   ========================================================================== */

.hd-block {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  display: block;
  background: var(--bg);
  font-family: "Inter", system-ui, sans-serif;
}

.hd-block__bar {
  position: sticky; top: 0; z-index: 50;
  background: radial-gradient(120% 180% at 100% 0%, #274a31 0%, #1f3a28 45%, #12211a 100%);
  color: #f4efe5;
}
.hd-block__wrap {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.15rem 1.6rem;
}

/* Oversized wordmark ------------------------------------------------------ */
.hd-block__brand {
  position: relative;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -.02em;
  color: #fff; text-decoration: none; line-height: 1;
}
.hd-block__brand em { font-style: normal; color: var(--gold); }
.hd-block__brand i { font-style: normal; font-size: .5em; vertical-align: super; color: rgba(244, 239, 229, .5); margin-left: 2px; }

/* Nav --------------------------------------------------------------------- */
.hd-block__nav { display: flex; align-items: center; gap: .1rem; }
.hd-block__nav a {
  position: relative; padding: .5rem .9rem;
  font-size: .95rem; font-weight: 500; color: rgba(244, 239, 229, .82); text-decoration: none;
  transition: color var(--transition);
}
.hd-block__nav a::after {
  content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .2rem; height: 2px;
  background: var(--gold); border-radius: 2px; transform: scaleX(0); transform-origin: left;
  transition: transform var(--transition);
}
.hd-block__nav a:hover { color: #fff; }
.hd-block__nav a:hover::after { transform: scaleX(1); }
.hd-block__nav a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Actions ----------------------------------------------------------------- */
.hd-block__actions { display: flex; align-items: center; gap: .8rem; }
.hd-block__cta {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem 1.3rem; border-radius: 999px;
  background: var(--gold); color: #241a0e;
  font-weight: 600; font-size: .9rem; text-decoration: none; white-space: nowrap;
  transition: transform var(--transition), background var(--transition), gap var(--transition);
}
.hd-block__cta svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition); }
.hd-block__cta:hover { transform: translateY(-2px); background: #c8a570; gap: .7rem; }
.hd-block__cta:hover svg { transform: translateX(2px); }
.hd-block__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Hamburger --------------------------------------------------------------- */
.hd-block__toggle {
  display: none; width: 44px; height: 44px; padding: 0;
  border: 1px solid rgba(244, 239, 229, .28); border-radius: 12px; background: rgba(255, 255, 255, .06); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.hd-block__toggle span { width: 20px; height: 2px; border-radius: 2px; background: #f4efe5; transition: transform var(--transition), opacity var(--transition); }
.hd-block__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hd-block__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hd-block__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.hd-block__toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Mobile ------------------------------------------------------------------ */
@media (max-width: 879.98px) {
  .hd-block__wrap { position: relative; }
  .hd-block__toggle { display: inline-flex; }
  .hd-block__nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: .1rem; padding: 1rem 1.6rem 1.4rem;
    background: #16281c; border-top: 1px solid rgba(244, 239, 229, .14);
    box-shadow: 0 24px 40px -26px rgba(0, 0, 0, .6);
    transform: translateY(-10px); opacity: 0; visibility: hidden;
    transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
  }
  .hd-block__bar.is-open .hd-block__nav { transform: none; opacity: 1; visibility: visible; }
  .hd-block__nav a { padding: .8rem 1rem; border-radius: 10px; }
  .hd-block__nav a::after { display: none; }
}
@media (max-width: 479.98px) { .hd-block__cta { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .hd-block__nav a, .hd-block__nav a::after, .hd-block__cta, .hd-block__cta svg, .hd-block__toggle span { transition: none; }
}

/* ===== headers-14 · .hd-gradient ===== */
/* ==========================================================================
   Headers 14 · Gradient Brand Bar — scoped under .hd-gradient
   ========================================================================== */

.hd-gradient {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  display: block;
  background: var(--bg);
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.hd-gradient__bar {
  position: sticky; top: 0; z-index: 50;
  background:
    linear-gradient(120deg, rgba(228, 237, 226, .95) 0%, rgba(245, 240, 230, .92) 46%, rgba(239, 230, 213, .95) 100%);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--transition);
}
.hd-gradient__bar.is-stuck { box-shadow: 0 16px 38px -26px rgba(31, 58, 40, .55); }

.hd-gradient__wrap {
  position: relative;
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1rem 1.4rem;
}

/* Logo -------------------------------------------------------------------- */
.hd-gradient__logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.hd-gradient__logo svg { width: 30px; height: 30px; fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linejoin: round; }
.hd-gradient__logo span { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--primary); letter-spacing: -.01em; }
.hd-gradient__logo em { font-style: normal; color: var(--accent); }

/* Nav (open, underline reveal) ------------------------------------------- */
.hd-gradient__nav { display: flex; align-items: center; gap: 1.6rem; }
.hd-gradient__nav a {
  position: relative;
  padding: .35rem .1rem;
  font-size: .95rem; font-weight: 500; color: var(--text); text-decoration: none;
  transition: color var(--transition);
}
.hd-gradient__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  border-radius: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--transition);
}
.hd-gradient__nav a:hover { color: var(--primary); }
.hd-gradient__nav a:hover::after { transform: scaleX(1); }
.hd-gradient__nav a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* Actions ----------------------------------------------------------------- */
.hd-gradient__actions { display: flex; align-items: center; gap: .8rem; }
.hd-gradient__cta {
  display: inline-flex; align-items: center;
  padding: .62rem 1.35rem; border-radius: 999px;
  background: linear-gradient(120deg, var(--gold), #c9a877);
  color: #2a2118; font-weight: 600; font-size: .9rem; text-decoration: none; white-space: nowrap;
  box-shadow: 0 16px 30px -18px rgba(184, 148, 95, .9);
  transition: transform var(--transition), box-shadow var(--transition);
}
.hd-gradient__cta:hover { transform: translateY(-2px); box-shadow: 0 22px 36px -18px rgba(184, 148, 95, .95); }
.hd-gradient__cta:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* Hamburger --------------------------------------------------------------- */
.hd-gradient__toggle {
  display: none;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(255, 255, 255, .7); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.hd-gradient__toggle span { width: 20px; height: 2px; border-radius: 2px; background: var(--primary); transition: transform var(--transition), opacity var(--transition); }
.hd-gradient__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hd-gradient__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hd-gradient__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.hd-gradient__toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Mobile ------------------------------------------------------------------ */
@media (max-width: 859.98px) {
  .hd-gradient__toggle { display: inline-flex; }
  .hd-gradient__nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: .2rem;
    padding: 1rem 1.4rem 1.4rem;
    background: var(--surface); border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -26px rgba(31, 58, 40, .5);
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
  }
  .hd-gradient__bar.is-open .hd-gradient__nav { transform: none; opacity: 1; visibility: visible; }
  .hd-gradient__nav a { padding: .8rem 1rem; border-radius: 12px; }
  .hd-gradient__nav a::after { display: none; }
  .hd-gradient__nav a:hover { background: rgba(31, 58, 40, .06); }
}
@media (max-width: 479.98px) {
  .hd-gradient__cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hd-gradient__bar, .hd-gradient__nav, .hd-gradient__cta, .hd-gradient__toggle span, .hd-gradient__nav a::after { transition: none; }
}

/* ===== headers-20 · .hd-contact ===== */
/* ==========================================================================
   Headers 20 · Contact Highlight Bar — scoped under .hd-contact
   ========================================================================== */

.hd-contact {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  display: block;
  background: var(--bg);
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.hd-contact__bar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--transition), background var(--transition);
}
.hd-contact__bar.is-stuck { box-shadow: 0 14px 34px -22px rgba(31, 58, 40, .5); background: rgba(255, 255, 255, .97); }

.hd-contact__wrap {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 1.6rem;
  padding: .85rem 1.4rem;
}

/* Logo -------------------------------------------------------------------- */
.hd-contact__logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; margin-right: auto; }
.hd-contact__logo svg { width: 30px; height: 30px; fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linejoin: round; }
.hd-contact__logo span { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--primary); letter-spacing: -.01em; }
.hd-contact__logo em { font-style: normal; color: var(--accent); }

/* Nav --------------------------------------------------------------------- */
.hd-contact__nav { display: flex; align-items: center; gap: .25rem; }
.hd-contact__nav a {
  padding: .5rem .85rem; border-radius: 999px;
  font-size: .95rem; font-weight: 500; color: var(--text); text-decoration: none;
  transition: color var(--transition), background var(--transition);
}
.hd-contact__nav a:hover { color: var(--primary); background: rgba(31, 58, 40, .06); }
.hd-contact__nav a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Actions ----------------------------------------------------------------- */
.hd-contact__actions { display: flex; align-items: center; gap: .8rem; }

/* Prominent phone block */
.hd-contact__phone {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .5rem 1.1rem .5rem .55rem; border-radius: 999px;
  background: linear-gradient(120deg, rgba(184, 148, 95, .16), rgba(31, 58, 40, .06));
  border: 1px solid var(--line);
  text-decoration: none; white-space: nowrap;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.hd-contact__phone:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -20px rgba(31, 58, 40, .55); border-color: var(--gold); }
.hd-contact__phone:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.hd-contact__phone-ico {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--gold); color: #fff; flex: none;
  box-shadow: 0 10px 22px -12px rgba(184, 148, 95, .9);
  transition: transform var(--transition);
}
.hd-contact__phone:hover .hd-contact__phone-ico { transform: rotate(-10deg) scale(1.05); }
.hd-contact__phone-ico svg { width: 19px; height: 19px; fill: currentColor; }
.hd-contact__phone-txt { display: flex; flex-direction: column; line-height: 1.15; }
.hd-contact__phone-txt small { font-size: .72rem; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.hd-contact__phone-txt strong { font-family: "Poppins", system-ui, sans-serif; font-size: .98rem; font-weight: 600; color: var(--primary); }

/* Hamburger --------------------------------------------------------------- */
.hd-contact__toggle {
  display: none;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.hd-contact__toggle span { width: 20px; height: 2px; border-radius: 2px; background: var(--primary); transition: transform var(--transition), opacity var(--transition); }
.hd-contact__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hd-contact__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hd-contact__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.hd-contact__toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Mobile ------------------------------------------------------------------ */
@media (max-width: 899.98px) {
  .hd-contact__wrap { position: relative; }
  .hd-contact__toggle { display: inline-flex; }
  .hd-contact__nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: .2rem;
    padding: 1rem 1.4rem 1.4rem;
    background: var(--surface); border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -26px rgba(31, 58, 40, .5);
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
  }
  .hd-contact__bar.is-open .hd-contact__nav { transform: none; opacity: 1; visibility: visible; }
  .hd-contact__bar.is-open { box-shadow: 0 14px 34px -22px rgba(31, 58, 40, .5); }
  .hd-contact__nav a { padding: .8rem 1rem; border-radius: 12px; }
}
@media (max-width: 539.98px) {
  .hd-contact__phone-txt { display: none; }
  .hd-contact__phone { padding: .45rem; border-radius: 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .hd-contact__bar, .hd-contact__nav, .hd-contact__phone, .hd-contact__phone-ico, .hd-contact__toggle span { transition: none; }
}

/* ===== headers-30 · .hd-diagonal ===== */
/* ==========================================================================
   Headers 30 · Diagonal Accent — scoped under .hd-diagonal
   ========================================================================== */

.hd-diagonal {
  --primary: #1f3a28;
  --accent: #9a3324;
  --gold: #b8945f;
  --bg: #f5f0e6;
  --surface: #ffffff;
  --text: #2a2a24;
  --muted: #6e6e62;
  --line: #e6dfd1;
  --transition: .35s cubic-bezier(.22, 1, .36, 1);

  display: block;
  background: var(--bg);
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
}

.hd-diagonal__bar { position: relative; background: var(--surface); border-bottom: 1px solid var(--line); overflow: hidden; }

/* Diagonal color block ---------------------------------------------------- */
.hd-diagonal__slash {
  position: absolute; left: 0; top: 0; bottom: 0; width: 42%;
  background: radial-gradient(120% 200% at 0% 0%, #2c5238, #1f3a28 60%, #16281c);
  clip-path: polygon(0 0, 100% 0, calc(100% - 64px) 100%, 0 100%);
}
.hd-diagonal__slash::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: -6px; width: 46px;
  background: var(--gold);
  clip-path: polygon(100% 0, 100% 0, calc(100% - 46px) 100%, calc(100% - 40px) 100%);
  opacity: .9;
}

.hd-diagonal__wrap {
  position: relative; z-index: 1;
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.05rem 1.6rem;
}

/* Logo (on dark) ---------------------------------------------------------- */
.hd-diagonal__logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.hd-diagonal__logo svg { width: 30px; height: 30px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linejoin: round; }
.hd-diagonal__logo span { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; font-size: 1.2rem; color: #fff; }
.hd-diagonal__logo em { font-style: normal; color: var(--gold); }

/* Nav (on light) ---------------------------------------------------------- */
.hd-diagonal__nav { display: flex; align-items: center; gap: .1rem; margin-left: auto; }
.hd-diagonal__nav a {
  padding: .5rem .85rem; border-radius: 999px;
  font-size: .94rem; font-weight: 500; color: var(--text); text-decoration: none;
  transition: color var(--transition), background var(--transition);
}
.hd-diagonal__nav a:hover { color: var(--primary); background: rgba(31, 58, 40, .06); }
.hd-diagonal__nav a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Actions ----------------------------------------------------------------- */
.hd-diagonal__actions { display: flex; align-items: center; gap: .7rem; }
.hd-diagonal__cta {
  display: inline-flex; align-items: center; padding: .6rem 1.3rem; border-radius: 999px;
  background: var(--gold); color: #241a0e; font-weight: 600; font-size: .9rem; text-decoration: none; white-space: nowrap;
  transition: transform var(--transition), background var(--transition);
}
.hd-diagonal__cta:hover { transform: translateY(-2px); background: #c8a570; }
.hd-diagonal__cta:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* Hamburger --------------------------------------------------------------- */
.hd-diagonal__toggle { display: none; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.hd-diagonal__toggle span { width: 18px; height: 2px; border-radius: 2px; background: var(--primary); transition: transform var(--transition), opacity var(--transition); }
.hd-diagonal__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hd-diagonal__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hd-diagonal__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.hd-diagonal__toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Mobile ------------------------------------------------------------------ */
@media (max-width: 859.98px) {
  .hd-diagonal__slash { width: 62%; }
  .hd-diagonal__wrap { position: relative; }
  .hd-diagonal__toggle { display: inline-flex; }
  .hd-diagonal__nav {
    position: absolute; left: -1.6rem; right: -1.6rem; top: 100%; margin: 0;
    flex-direction: column; align-items: stretch; gap: .1rem; padding: 1rem 1.6rem 1.4rem;
    background: var(--surface); border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -26px rgba(31, 58, 40, .5);
    transform: translateY(-10px); opacity: 0; visibility: hidden; z-index: 5;
    transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
  }
  .hd-diagonal__bar.is-open .hd-diagonal__nav { transform: none; opacity: 1; visibility: visible; }
  .hd-diagonal__nav a { padding: .8rem 1rem; border-radius: 10px; }
}
@media (max-width: 479.98px) { .hd-diagonal__slash { width: 70%; } .hd-diagonal__cta { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .hd-diagonal__nav a, .hd-diagonal__cta, .hd-diagonal__toggle span { transition: none; }
}

/* ===== header-12 · .h12-header ===== */
/* ==========================================================================
   HEADER 12 — MINIMAL (APPLE-INSPIRED)
   Self-contained. Tokens namespaced --h12-. 8px spacing rhythm.
   Palette: near-monochrome ink + ONE subtle blue accent, used sparingly.
   Motion: <200ms, cubic-bezier(.4,0,.2,1). Extreme restraint, quiet type.
   ========================================================================== */

:root {
  --h12-ink: #1d1d1f;
  --h12-body: #424245;      /* nav resting */
  --h12-muted: #6e6e73;
  --h12-line: #ededef;
  --h12-line-soft: #f5f5f7;
  --h12-bg: #ffffff;
  --h12-hover: #f5f5f7;

  /* Single subtle accent */
  --h12-accent: #0071e3;
  --h12-accent-700: #0060c0;

  --h12-shadow-panel: 0 20px 40px -24px rgba(0, 0, 0, .22);

  --h12-radius: 14px;
  --h12-radius-sm: 8px;
  --h12-ease: cubic-bezier(.4, 0, .2, 1);
  --h12-dur: 180ms;
  --h12-h: 52px;
  --h12-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
.h12-header { font-family: var(--h12-font); }

/* Skip link */
.h12-skip {
  position: absolute; left: 16px; top: -60px; z-index: 1100;
  padding: 10px 16px; border-radius: 8px; background: var(--h12-ink); color: #fff;
  font-size: .875rem; font-weight: 500; text-decoration: none;
  transition: top var(--h12-dur) var(--h12-ease);
}
.h12-skip:focus { top: 12px; }

/* ==========================================================================
   HEADER SHELL — thin translucent blurred bar
   ========================================================================== */
.h12-header {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--h12-line-soft);
  transition: background var(--h12-dur) var(--h12-ease), border-color var(--h12-dur) var(--h12-ease);
}
.h12-header.is-panel-open {
  background: rgba(255, 255, 255, .96);
  border-bottom-color: var(--h12-line);
}

.h12-nav__inner {
  position: relative; z-index: 2;
  max-width: 1080px; margin: 0 auto; padding: 0 22px;
  height: var(--h12-h); display: flex; align-items: center; gap: 20px;
}

/* Tiny mark */
.h12-brand {
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none; color: var(--h12-ink); flex: 0 0 auto;
}
.h12-brand svg { color: var(--h12-ink); display: block; }
.h12-brand__name { font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; }

/* Centered link row */
.h12-menu {
  display: flex; align-items: center; justify-content: center; gap: 2px;
  list-style: none; margin: 0 auto; padding: 0; flex: 1 1 auto;
}
.h12-item { position: relative; }
.h12-link {
  display: inline-flex; align-items: center;
  height: 34px; padding: 0 13px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .8125rem; font-weight: 500; letter-spacing: -.01em;
  color: var(--h12-body); text-decoration: none; border-radius: 999px;
  transition: color var(--h12-dur) var(--h12-ease), background var(--h12-dur) var(--h12-ease);
}
.h12-link:hover { color: var(--h12-ink); }
.h12-item.is-open > .h12-trigger { color: var(--h12-ink); background: var(--h12-hover); }

/* Utilities */
.h12-utils { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.h12-signin {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
  font-size: .8125rem; font-weight: 600; color: #fff; text-decoration: none;
  background: var(--h12-accent); border-radius: 999px;
  transition: background var(--h12-dur) var(--h12-ease), transform var(--h12-dur) var(--h12-ease);
}
.h12-signin:hover { background: var(--h12-accent-700); }
.h12-signin:active { transform: translateY(1px); }

/* Keyboard focus */
:where(.h12-link, .h12-plink, .h12-drop__link, .h12-signin, .h12-mtoggle, .h12-spot, .h12-macc__btn, .h12-macc__link, .h12-macc__solo, .h12-msignin):focus-visible {
  outline: 2px solid var(--h12-accent); outline-offset: 3px;
}

/* ==========================================================================
   FULL-WIDTH PANELS — gently expand downward (height animates)
   ========================================================================== */
.h12-panels { position: relative; z-index: 1; }
.h12-panel {
  max-height: 0; overflow: hidden; opacity: 0;
  background: rgba(255, 255, 255, .98);
  border-bottom: 1px solid var(--h12-line);
  transition: max-height 340ms var(--h12-ease), opacity 200ms var(--h12-ease);
}
.h12-panel.is-open { max-height: 440px; opacity: 1; box-shadow: var(--h12-shadow-panel); }
.h12-panel__inner {
  max-width: 1080px; margin: 0 auto; padding: 34px 22px 40px;
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)) 1.15fr; gap: 32px;
}
.h12-col { display: flex; flex-direction: column; gap: 2px; }
.h12-col__label {
  margin: 0 0 12px; font-size: .75rem; font-weight: 600; color: var(--h12-muted);
  letter-spacing: -.01em;
}
.h12-plink {
  font-size: 1rem; font-weight: 500; line-height: 1.9; letter-spacing: -.01em;
  color: var(--h12-ink); text-decoration: none; width: fit-content;
  transition: color var(--h12-dur) var(--h12-ease);
}
.h12-plink:hover { color: var(--h12-accent); }

/* One subtle promo */
.h12-spot {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px; border-radius: var(--h12-radius);
  background: var(--h12-line-soft); text-decoration: none; color: var(--h12-ink);
  transition: background var(--h12-dur) var(--h12-ease);
}
.h12-spot:hover { background: #eeeef1; }
.h12-spot__eyebrow { font-size: .75rem; font-weight: 600; color: var(--h12-accent); }
.h12-spot__title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; }
.h12-spot__desc { font-size: .875rem; color: var(--h12-muted); line-height: 1.5; }
.h12-spot__cta {
  margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: .875rem; font-weight: 600; color: var(--h12-accent);
}
.h12-spot__cta i { transition: transform var(--h12-dur) var(--h12-ease); }
.h12-spot:hover .h12-spot__cta i { transform: translateX(3px); }

/* ==========================================================================
   COMPACT MULTI-LEVEL NESTED DROPDOWN (Company)
   ========================================================================== */
.h12-drop {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 210px; padding: 6px;
  background: #fff; border: 1px solid var(--h12-line); border-radius: var(--h12-radius);
  box-shadow: var(--h12-shadow-panel);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--h12-dur) var(--h12-ease), transform var(--h12-dur) var(--h12-ease), visibility var(--h12-dur) var(--h12-ease);
}
.h12-item--drop.is-open > .h12-drop { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.h12-drop__link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 9px 12px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .875rem; font-weight: 500; text-align: left;
  color: var(--h12-body); text-decoration: none; border-radius: var(--h12-radius-sm);
  transition: color var(--h12-dur) var(--h12-ease), background var(--h12-dur) var(--h12-ease);
}
.h12-drop__link:hover { color: var(--h12-ink); background: var(--h12-hover); }
.h12-drop__caret { font-size: .7rem; opacity: .5; }
.h12-drop__sub { position: relative; }
.h12-drop--flyout {
  top: -7px; left: calc(100% + 6px); transform: translateY(6px);
}
.h12-drop__sub.is-open > .h12-drop--flyout {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}

/* ==========================================================================
   MOBILE TOGGLE + FULL-SCREEN MENU
   ========================================================================== */
.h12-mtoggle {
  display: none; position: relative; width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 999px; background: var(--h12-hover); cursor: pointer;
}
.h12-mtoggle span {
  position: absolute; left: 9px; width: 16px; height: 1.6px; border-radius: 2px;
  background: var(--h12-ink);
  transition: transform var(--h12-dur) var(--h12-ease), opacity var(--h12-dur) var(--h12-ease);
}
.h12-mtoggle span:nth-child(1) { top: 13px; }
.h12-mtoggle span:nth-child(2) { bottom: 13px; }
.h12-mtoggle[aria-expanded="true"] span:nth-child(1) { top: 16px; transform: rotate(45deg); }
.h12-mtoggle[aria-expanded="true"] span:nth-child(2) { bottom: 16px; transform: rotate(-45deg); }

.h12-mobile {
  position: fixed; inset: var(--h12-h) 0 0; z-index: 1029;
  background: #fff; padding: 8px 22px 32px; overflow-y: auto;
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity 200ms var(--h12-ease), transform 240ms var(--h12-ease);
}
.h12-mobile.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.h12-macc { list-style: none; margin: 0; padding: 0; }
.h12-macc__node { border-bottom: 1px solid var(--h12-line-soft); }
.h12-macc__btn, .h12-macc__solo {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 18px 4px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em;
  text-align: left; color: var(--h12-ink); text-decoration: none;
}
.h12-macc__btn i { font-size: 1rem; color: var(--h12-muted); transition: transform var(--h12-dur) var(--h12-ease); }
.h12-macc__node.is-open .h12-macc__btn i { transform: rotate(45deg); }
.h12-macc__body { max-height: 0; overflow: hidden; transition: max-height 300ms var(--h12-ease); }
.h12-macc__node.is-open .h12-macc__body { max-height: 420px; }
.h12-macc__link {
  display: block; padding: 11px 4px; font-size: 1.0625rem; font-weight: 500;
  color: var(--h12-body); text-decoration: none;
}
.h12-macc__link:hover { color: var(--h12-accent); }
.h12-macc__body a:last-child { padding-bottom: 16px; }
.h12-msignin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 50px; margin-top: 24px;
  font-size: 1rem; font-weight: 600; color: #fff; text-decoration: none;
  background: var(--h12-accent); border-radius: 999px;
}

/* Panel scrim (desktop) */
.h12-scrim {
  position: fixed; inset: 0; z-index: 1020;
  background: rgba(0, 0, 0, .18); opacity: 0;
  transition: opacity var(--h12-dur) var(--h12-ease);
}
.h12-scrim.is-shown { opacity: 1; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 833.98px) {
  .h12-menu, .h12-signin, .h12-panels { display: none; }
  .h12-mtoggle { display: block; }
  .h12-nav__inner { justify-content: space-between; gap: 12px; }
}

/* ==========================================================================
   DEMO (not part of the component)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ===== header-01 · .h01-header ===== */
/* ==========================================================================
   HEADER 01 — MINIMAL SaaS  ·  Reference standard
   Self-contained. Tokens namespaced --h01-. 8px spacing rhythm.
   Palette: near-monochrome ink + one restrained indigo accent.
   Motion: <200ms, cubic-bezier(.4,0,.2,1). No gimmicks.
   ========================================================================== */

:root {
  /* Ink / neutrals */
  --h01-ink: #0b0d12;
  --h01-body: #454b57;      /* nav resting */
  --h01-muted: #6b7280;
  --h01-line: #ececf1;
  --h01-line-soft: #f2f3f6;
  --h01-bg: #ffffff;
  --h01-hover: #f6f7f9;

  /* Single accent */
  --h01-accent: #4b45e6;
  --h01-accent-700: #3a34c9;
  --h01-accent-tint: #eeedfd;

  /* Elevation */
  --h01-shadow-pop: 0 1px 2px rgba(11, 13, 18, .04), 0 12px 32px -12px rgba(11, 13, 18, .16);
  --h01-shadow-bar: 0 1px 0 rgba(11, 13, 18, .06);

  /* System */
  --h01-radius: 12px;
  --h01-radius-sm: 9px;
  --h01-ease: cubic-bezier(.4, 0, .2, 1);
  --h01-dur: 180ms;
  --h01-h: 68px;
  --h01-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
.h01-header { font-family: var(--h01-font); }

/* Accessible skip link */
.h01-skip {
  position: absolute; left: 16px; top: -60px; z-index: 1100;
  padding: 10px 16px; border-radius: 8px; background: var(--h01-ink); color: #fff;
  font-size: .875rem; font-weight: 500; text-decoration: none;
  transition: top var(--h01-dur) var(--h01-ease);
}
.h01-skip:focus { top: 12px; }

/* ==========================================================================
   HEADER SHELL
   ========================================================================== */
.h01-header {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255, 255, 255, .8);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--h01-dur) var(--h01-ease), box-shadow var(--h01-dur) var(--h01-ease), background var(--h01-dur) var(--h01-ease);
}
/* Hairline appears only after scroll — quiet, not theatrical */
.h01-header.is-stuck {
  background: rgba(255, 255, 255, .92);
  border-bottom-color: var(--h01-line);
  box-shadow: var(--h01-shadow-bar);
}

.h01-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.h01-nav { display: flex; align-items: center; gap: 40px; height: var(--h01-h); }

/* --- Brand ------------------------------------------------------------- */
.h01-brand {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--h01-ink); flex: 0 0 auto;
}
.h01-brand__logo { color: var(--h01-accent); display: block; }
.h01-brand__name { font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; }

/* ==========================================================================
   PRIMARY MENU
   ========================================================================== */
.h01-collapse { flex: 1 1 auto; }
.h01-menu {
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: 0;
}
.h01-item { position: relative; }

.h01-link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 12px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .9375rem; font-weight: 500;
  color: var(--h01-body); text-decoration: none;
  border-radius: var(--h01-radius-sm);
  transition: color var(--h01-dur) var(--h01-ease), background var(--h01-dur) var(--h01-ease);
}
.h01-link:hover { color: var(--h01-ink); background: var(--h01-hover); }
.h01-chevron { color: currentColor; opacity: .55; transition: transform var(--h01-dur) var(--h01-ease); }
.h01-item.is-open > .h01-trigger { color: var(--h01-ink); background: var(--h01-hover); }
.h01-item.is-open > .h01-trigger .h01-chevron { transform: rotate(180deg); }

/* Keyboard focus */
:where(.h01-link, .h01-drop__link, .h01-cta, .h01-signin, .h01-burger, .h01-mega__link, .h01-feature):focus-visible {
  outline: 2px solid var(--h01-accent); outline-offset: 2px;
}

/* ==========================================================================
   MEGA MENU
   ========================================================================== */
.h01-mega, .h01-drop {
  position: absolute; top: calc(100% + 10px); left: 0;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--h01-dur) var(--h01-ease), transform var(--h01-dur) var(--h01-ease), visibility var(--h01-dur) var(--h01-ease);
  pointer-events: none;
}
.h01-item.is-open > .h01-mega, .h01-item.is-open > .h01-drop {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

.h01-mega {
  width: 720px;
  background: var(--h01-bg);
  border: 1px solid var(--h01-line);
  border-radius: var(--h01-radius);
  box-shadow: var(--h01-shadow-pop);
  padding: 20px;
}
.h01-mega__body { display: grid; grid-template-columns: 1fr 1fr 1.05fr; gap: 8px; }
.h01-mega__group { padding-right: 8px; }
.h01-mega__label {
  margin: 4px 8px 8px; font-size: .6875rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--h01-muted);
}
.h01-mega__link {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 9px 8px; border-radius: var(--h01-radius-sm);
  text-decoration: none; color: var(--h01-ink);
  transition: background var(--h01-dur) var(--h01-ease);
}
.h01-mega__link:hover { background: var(--h01-hover); }
.h01-mega__ic {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--h01-accent-tint); color: var(--h01-accent); font-size: .95rem;
}
.h01-mega__text { display: flex; flex-direction: column; gap: 2px; }
.h01-mega__text strong { font-size: .875rem; font-weight: 600; line-height: 1.3; }
.h01-mega__text span { font-size: .8125rem; color: var(--h01-muted); line-height: 1.4; }

/* Featured aside — restrained, no loud gradient */
.h01-mega__aside {
  padding-left: 16px; border-left: 1px solid var(--h01-line-soft);
}
.h01-feature {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px; border-radius: var(--h01-radius);
  background: var(--h01-line-soft); text-decoration: none; color: var(--h01-ink);
  height: calc(100% - 26px);
  transition: background var(--h01-dur) var(--h01-ease);
}
.h01-feature:hover { background: #eceef2; }
.h01-feature__tag {
  align-self: flex-start; font-size: .6875rem; font-weight: 600; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 999px; background: var(--h01-accent); color: #fff;
}
.h01-feature__title { font-size: .9375rem; font-weight: 600; line-height: 1.35; margin-top: 4px; }
.h01-feature__desc { font-size: .8125rem; color: var(--h01-muted); line-height: 1.45; }
.h01-feature__cta {
  margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: .8125rem; font-weight: 600; color: var(--h01-accent);
}
.h01-feature__cta i { transition: transform var(--h01-dur) var(--h01-ease); }
.h01-feature:hover .h01-feature__cta i { transform: translateX(3px); }

/* ==========================================================================
   DROPDOWN + NESTED
   ========================================================================== */
.h01-drop {
  min-width: 220px; list-style: none; margin: 0; padding: 6px;
  background: var(--h01-bg); border: 1px solid var(--h01-line);
  border-radius: var(--h01-radius); box-shadow: var(--h01-shadow-pop);
}
.h01-drop__item { position: relative; }
.h01-drop__link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 9px 12px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .875rem; font-weight: 500; text-align: left;
  color: var(--h01-body); text-decoration: none; border-radius: var(--h01-radius-sm);
  transition: color var(--h01-dur) var(--h01-ease), background var(--h01-dur) var(--h01-ease);
}
.h01-drop__link:hover { color: var(--h01-ink); background: var(--h01-hover); }
.h01-drop__caret { font-size: .7rem; opacity: .5; }
.h01-drop--sub { top: -7px; left: calc(100% + 6px); }
.h01-drop__item--sub.is-open > .h01-drop--sub {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

/* ==========================================================================
   ACTIONS
   ========================================================================== */
.h01-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }
.h01-signin {
  padding: 0 12px; height: 40px; display: inline-flex; align-items: center;
  font-size: .9375rem; font-weight: 500; color: var(--h01-body); text-decoration: none;
  border-radius: var(--h01-radius-sm);
  transition: color var(--h01-dur) var(--h01-ease), background var(--h01-dur) var(--h01-ease);
}
.h01-signin:hover { color: var(--h01-ink); background: var(--h01-hover); }
.h01-cta {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px;
  font-size: .9375rem; font-weight: 600; color: #fff; text-decoration: none;
  background: var(--h01-accent); border-radius: var(--h01-radius-sm);
  transition: background var(--h01-dur) var(--h01-ease), transform var(--h01-dur) var(--h01-ease);
}
.h01-cta:hover { background: var(--h01-accent-700); }
.h01-cta:active { transform: translateY(1px); }

/* --- Hamburger (two-line, morphs to X) --------------------------------- */
.h01-burger {
  display: none; position: relative; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--h01-line); border-radius: var(--h01-radius-sm);
  background: #fff; cursor: pointer;
}
.h01-burger span {
  position: absolute; left: 11px; width: 18px; height: 1.8px; border-radius: 2px;
  background: var(--h01-ink);
  transition: transform var(--h01-dur) var(--h01-ease), opacity var(--h01-dur) var(--h01-ease);
}
.h01-burger span:nth-child(1) { top: 16px; }
.h01-burger span:nth-child(2) { bottom: 16px; }
.h01-burger[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.h01-burger[aria-expanded="true"] span:nth-child(2) { bottom: 19px; transform: rotate(-45deg); }

/* Mobile scrim */
.h01-scrim {
  position: fixed; inset: 0; z-index: 1029;
  background: rgba(11, 13, 18, .32); opacity: 0;
  transition: opacity var(--h01-dur) var(--h01-ease);
}
.h01-scrim.is-shown { opacity: 1; }

/* ==========================================================================
   RESPONSIVE — mobile slide-over (redesigned, not shrunk)
   ========================================================================== */
@media (max-width: 991.98px) {
  .h01-nav { gap: 0; }
  .h01-burger { display: block; }
  .h01-signin, .h01-cta { display: none; }
  .h01-actions { margin-left: auto; }

  .h01-collapse {
    position: fixed; top: 0; right: 0; z-index: 1031;
    width: min(400px, 88vw); height: 100dvh;
    background: #fff; border-left: 1px solid var(--h01-line);
    box-shadow: -24px 0 60px -30px rgba(11, 13, 18, .3);
    padding: 84px 16px 24px; overflow-y: auto;
    transform: translateX(100%);
    transition: transform 320ms var(--h01-ease);
  }
  .h01-collapse.is-open { transform: translateX(0); }

  .h01-menu { flex-direction: column; align-items: stretch; gap: 2px; }
  .h01-link { height: 48px; width: 100%; justify-content: space-between; font-size: 1rem; padding: 0 14px; }
  .h01-item { border-bottom: 1px solid var(--h01-line-soft); }
  .h01-item:last-child { border-bottom: 0; }

  /* Mega + dropdowns become inline accordions */
  .h01-mega, .h01-drop {
    position: static; width: auto; opacity: 1; visibility: visible; transform: none;
    pointer-events: auto; border: 0; box-shadow: none; padding: 0;
    max-height: 0; overflow: hidden;
    transition: max-height 300ms var(--h01-ease);
  }
  .h01-item.is-open > .h01-mega,
  .h01-item.is-open > .h01-drop,
  .h01-drop__item--sub.is-open > .h01-drop--sub { max-height: 760px; }

  .h01-mega { padding: 0 0 8px; }
  .h01-mega__body { grid-template-columns: 1fr; gap: 0; }
  .h01-mega__group { padding: 0 0 8px; }
  .h01-mega__aside { display: none; }
  .h01-drop--sub { padding-left: 14px; }

  /* CTA row pinned inside the drawer */
  .h01-collapse::after { content: ""; }
  .h01-mobile-cta {
    display: flex; flex-direction: column; gap: 8px; margin-top: 20px;
    padding-top: 20px; border-top: 1px solid var(--h01-line);
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ===== header-02 · .h02-header ===== */
/* ==========================================================================
   HEADER 02 — GLASSMORPHISM (REFINED)
   Self-contained. Tokens namespaced --h02-. 8px spacing rhythm.
   Palette: near-monochrome slate ink + one restrained violet accent,
   read through translucent frosted glass. Motion <200ms, cubic-bezier(.4,0,.2,1).
   ========================================================================== */

:root {
  /* Ink / neutrals */
  --h02-ink: #14161f;
  --h02-body: #3f4453;      /* nav resting */
  --h02-muted: #6a7080;
  --h02-bg: #f4f5fb;        /* page base under the mesh */

  /* Glass surfaces */
  --h02-glass: rgba(255, 255, 255, .55);
  --h02-glass-strong: rgba(255, 255, 255, .72);
  --h02-glass-panel: rgba(255, 255, 255, .9);
  --h02-glass-hover: rgba(255, 255, 255, .6);
  --h02-border: rgba(255, 255, 255, .7);
  --h02-border-soft: rgba(20, 22, 31, .07);
  --h02-hairline: rgba(20, 22, 31, .08);

  /* Single accent */
  --h02-accent: #6d5ef0;
  --h02-accent-700: #574ad6;
  --h02-accent-tint: rgba(109, 94, 240, .12);

  /* Elevation — soft, glassy */
  --h02-shadow-pop: 0 2px 6px rgba(20, 22, 31, .05), 0 24px 48px -20px rgba(48, 40, 120, .28);
  --h02-shadow-bar: 0 8px 30px -18px rgba(48, 40, 120, .35);

  /* System */
  --h02-radius: 16px;
  --h02-radius-sm: 11px;
  --h02-ease: cubic-bezier(.4, 0, .2, 1);
  --h02-dur: 180ms;
  --h02-h: 70px;
  --h02-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
.h02-header { font-family: var(--h02-font); }

/* Accessible skip link */
.h02-skip {
  position: absolute; left: 16px; top: -60px; z-index: 1100;
  padding: 10px 16px; border-radius: 10px; background: var(--h02-ink); color: #fff;
  font-size: .875rem; font-weight: 500; text-decoration: none;
  transition: top var(--h02-dur) var(--h02-ease);
}
.h02-skip:focus { top: 12px; }

/* ==========================================================================
   GRADIENT-MESH BACKDROP — muted, tasteful, not rainbow
   ========================================================================== */
.h02-mesh {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
.h02-mesh__blob {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55;
}
.h02-mesh__blob--a { width: 44vw; height: 44vw; top: -12vw; left: -8vw;  background: #cfd6ff; }
.h02-mesh__blob--b { width: 40vw; height: 40vw; top: -6vw;  right: -10vw; background: #e6d6f5; }
.h02-mesh__blob--c { width: 38vw; height: 38vw; top: 24vh;  left: 34vw;  background: #d7ecf0; opacity: .4; }

/* ==========================================================================
   HEADER SHELL — frosted, translucent
   ========================================================================== */
.h02-header {
  position: sticky; top: 0; z-index: 1030;
  background: var(--h02-glass);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: background var(--h02-dur) var(--h02-ease),
              border-color var(--h02-dur) var(--h02-ease),
              box-shadow var(--h02-dur) var(--h02-ease);
}
/* On scroll: a touch more opaque + soft floating shadow */
.h02-header.is-stuck {
  background: var(--h02-glass-strong);
  border-bottom-color: var(--h02-border);
  box-shadow: var(--h02-shadow-bar);
}

.h02-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
.h02-nav { display: flex; align-items: center; gap: 32px; height: var(--h02-h); }

/* --- Brand ------------------------------------------------------------- */
.h02-brand {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--h02-ink); flex: 0 0 auto;
}
.h02-brand__logo { color: var(--h02-accent); display: block; }
.h02-brand__name { font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; }

/* ==========================================================================
   PRIMARY MENU — centered
   ========================================================================== */
.h02-collapse { flex: 1 1 auto; display: flex; justify-content: center; }
.h02-menu {
  display: flex; align-items: center; gap: 4px;
  list-style: none; margin: 0; padding: 0;
}
.h02-item { position: relative; }

.h02-link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 14px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .9375rem; font-weight: 500;
  color: var(--h02-body); text-decoration: none;
  border-radius: var(--h02-radius-sm);
  transition: color var(--h02-dur) var(--h02-ease), background var(--h02-dur) var(--h02-ease);
}
.h02-link:hover { color: var(--h02-ink); background: var(--h02-glass-hover); }
.h02-chevron { color: currentColor; opacity: .55; transition: transform var(--h02-dur) var(--h02-ease); }
.h02-item.is-open > .h02-trigger { color: var(--h02-ink); background: var(--h02-glass-hover); }
.h02-item.is-open > .h02-trigger .h02-chevron { transform: rotate(180deg); }

/* Keyboard focus */
:where(.h02-link, .h02-drop__link, .h02-cta, .h02-signin, .h02-burger, .h02-card,
       .h02-mega__foot, .h02-m-link, .h02-m-sub):focus-visible {
  outline: 2px solid var(--h02-accent); outline-offset: 2px;
}

/* ==========================================================================
   MEGA MENU — frosted glass panel with clean cards
   ========================================================================== */
.h02-mega, .h02-drop {
  position: absolute; top: calc(100% + 12px);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--h02-dur) var(--h02-ease), transform var(--h02-dur) var(--h02-ease), visibility var(--h02-dur) var(--h02-ease);
  pointer-events: none;
}
.h02-item.is-open > .h02-mega, .h02-item.is-open > .h02-drop {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

.h02-mega {
  left: 50%; transform: translate(-50%, 6px);
  width: 680px;
  background: var(--h02-glass-panel);
  backdrop-filter: saturate(170%) blur(22px);
  -webkit-backdrop-filter: saturate(170%) blur(22px);
  border: 1px solid var(--h02-border);
  border-radius: var(--h02-radius);
  box-shadow: var(--h02-shadow-pop);
  padding: 16px;
}
.h02-item.is-open > .h02-mega { transform: translate(-50%, 0); }
.h02-mega__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }

.h02-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px; border-radius: var(--h02-radius-sm);
  text-decoration: none; color: var(--h02-ink);
  border: 1px solid transparent;
  transition: background var(--h02-dur) var(--h02-ease), border-color var(--h02-dur) var(--h02-ease);
}
.h02-card:hover { background: var(--h02-glass-hover); border-color: var(--h02-border); }
.h02-card__ic {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 9px; background: var(--h02-accent-tint); color: var(--h02-accent);
  font-size: 1rem; margin-bottom: 2px;
}
.h02-card__title { font-size: .9rem; font-weight: 600; line-height: 1.3; }
.h02-card__desc { font-size: .8125rem; color: var(--h02-muted); line-height: 1.45; }

.h02-mega__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 10px; padding: 12px 14px;
  border-radius: var(--h02-radius-sm);
  background: var(--h02-accent-tint); color: var(--h02-ink);
  text-decoration: none; font-size: .875rem;
  transition: background var(--h02-dur) var(--h02-ease);
}
.h02-mega__foot strong { font-weight: 600; }
.h02-mega__foot i { color: var(--h02-accent); transition: transform var(--h02-dur) var(--h02-ease); }
.h02-mega__foot:hover { background: rgba(109, 94, 240, .18); }
.h02-mega__foot:hover i { transform: translateX(3px); }

/* ==========================================================================
   DROPDOWN + NESTED — frosted
   ========================================================================== */
.h02-drop {
  left: 0; min-width: 224px; list-style: none; margin: 0; padding: 6px;
  background: var(--h02-glass-panel);
  backdrop-filter: saturate(170%) blur(22px);
  -webkit-backdrop-filter: saturate(170%) blur(22px);
  border: 1px solid var(--h02-border);
  border-radius: var(--h02-radius); box-shadow: var(--h02-shadow-pop);
}
.h02-drop__item { position: relative; }
.h02-drop__link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 10px 12px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .875rem; font-weight: 500; text-align: left;
  color: var(--h02-body); text-decoration: none; border-radius: var(--h02-radius-sm);
  transition: color var(--h02-dur) var(--h02-ease), background var(--h02-dur) var(--h02-ease);
}
.h02-drop__link:hover { color: var(--h02-ink); background: var(--h02-glass-hover); }
.h02-drop__caret { font-size: .7rem; opacity: .5; }
.h02-drop--sub { top: -7px; left: calc(100% + 6px); }
.h02-drop__item--sub.is-open > .h02-drop--sub {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

/* ==========================================================================
   ACTIONS
   ========================================================================== */
.h02-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.h02-signin {
  padding: 0 12px; height: 40px; display: inline-flex; align-items: center;
  font-size: .9375rem; font-weight: 500; color: var(--h02-body); text-decoration: none;
  border-radius: var(--h02-radius-sm);
  transition: color var(--h02-dur) var(--h02-ease), background var(--h02-dur) var(--h02-ease);
}
.h02-signin:hover { color: var(--h02-ink); background: var(--h02-glass-hover); }
.h02-cta {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px;
  font-size: .9375rem; font-weight: 600; color: #fff; text-decoration: none;
  background: var(--h02-accent); border-radius: var(--h02-radius-sm);
  box-shadow: 0 8px 18px -8px rgba(109, 94, 240, .6);
  transition: background var(--h02-dur) var(--h02-ease), transform var(--h02-dur) var(--h02-ease);
}
.h02-cta:hover { background: var(--h02-accent-700); }
.h02-cta:active { transform: translateY(1px); }

/* --- Hamburger (three-line, morphs to X) ------------------------------- */
.h02-burger {
  display: none; position: relative; width: 42px; height: 42px; padding: 0;
  border: 1px solid var(--h02-border); border-radius: var(--h02-radius-sm);
  background: var(--h02-glass-strong);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}
.h02-burger span {
  position: absolute; left: 12px; width: 18px; height: 1.8px; border-radius: 2px;
  background: var(--h02-ink);
  transition: transform var(--h02-dur) var(--h02-ease), opacity var(--h02-dur) var(--h02-ease);
}
.h02-burger span:nth-child(1) { top: 15px; }
.h02-burger span:nth-child(2) { top: 20px; }
.h02-burger span:nth-child(3) { top: 25px; }
.h02-burger[aria-expanded="true"] span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.h02-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.h02-burger[aria-expanded="true"] span:nth-child(3) { top: 20px; transform: rotate(-45deg); }

/* ==========================================================================
   MOBILE — frosted full-screen overlay that fades in
   ========================================================================== */
.h02-overlay {
  position: fixed; inset: 0; z-index: 1029;
  padding: calc(var(--h02-h) + 24px) 24px 32px;
  background: rgba(244, 245, 251, .72);
  backdrop-filter: saturate(160%) blur(26px);
  -webkit-backdrop-filter: saturate(160%) blur(26px);
  opacity: 0; transform: translateY(-8px);
  transition: opacity var(--h02-dur) var(--h02-ease), transform var(--h02-dur) var(--h02-ease);
  overflow-y: auto;
}
.h02-overlay.is-open { opacity: 1; transform: translateY(0); }

.h02-mobile { list-style: none; margin: 0; padding: 0; }
.h02-m-item { border-bottom: 1px solid var(--h02-hairline); }
.h02-m-link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; height: 56px; padding: 0 4px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 1.15rem; font-weight: 500; text-align: left;
  color: var(--h02-ink); text-decoration: none;
}
.h02-m-plus { font-size: 1rem; color: var(--h02-muted); transition: transform var(--h02-dur) var(--h02-ease); }
.h02-m-item--acc.is-open .h02-m-plus { transform: rotate(45deg); }

.h02-m-panel {
  max-height: 0; overflow: hidden;
  transition: max-height 300ms var(--h02-ease);
}
.h02-m-item--acc.is-open .h02-m-panel { max-height: 460px; }
.h02-m-sub {
  display: block; padding: 12px 4px 12px 16px;
  font-size: 1rem; color: var(--h02-body); text-decoration: none;
}
.h02-m-sub:hover { color: var(--h02-ink); }

.h02-mobile-cta {
  display: flex; flex-direction: column; gap: 10px; margin-top: 24px;
}
.h02-signin--m {
  justify-content: center; height: 48px; border: 1px solid var(--h02-border-soft);
  background: var(--h02-glass-strong);
}
.h02-cta--m { justify-content: center; height: 48px; font-size: 1rem; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 991.98px) {
  .h02-collapse { display: none; }
  .h02-signin, .h02-cta { display: none; }
  .h02-signin--m, .h02-cta--m { display: inline-flex; }
  .h02-burger { display: block; margin-left: auto; }
  .h02-nav { gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ===== header-03 · .h03-header ===== */
/* ==========================================================================
   HEADER 03 — FLOATING CAPSULE NAV
   Self-contained. Tokens namespaced --h03-. 8px spacing rhythm.
   A detached rounded-full pill navbar with ONE soft shadow, pill menu items,
   a sliding highlight, a floating mega card, and an expanding mobile sheet.
   Palette: near-monochrome ink + one restrained teal accent. Motion <200ms.
   ========================================================================== */

:root {
  /* Ink / neutrals */
  --h03-ink: #0d1117;
  --h03-body: #464c58;
  --h03-muted: #6b7280;
  --h03-line: #eceef2;
  --h03-line-soft: #f3f4f7;
  --h03-surface: #ffffff;
  --h03-page: #f6f7f9;
  --h03-pill-bg: #f1f2f5;   /* sliding highlight fill */

  /* Single accent */
  --h03-accent: #0d9488;
  --h03-accent-700: #0b7d73;
  --h03-accent-tint: #d9f2ef;

  /* Elevation — ONE soft shadow */
  --h03-shadow-cap: 0 10px 34px -14px rgba(13, 17, 23, .28);
  --h03-shadow-pop: 0 2px 6px rgba(13, 17, 23, .05), 0 20px 44px -18px rgba(13, 17, 23, .26);

  /* System */
  --h03-radius-cap: 999px;
  --h03-radius: 18px;
  --h03-radius-sm: 12px;
  --h03-ease: cubic-bezier(.4, 0, .2, 1);
  --h03-spring: cubic-bezier(.34, 1.4, .5, 1);
  --h03-dur: 180ms;
  --h03-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
.h03-header { font-family: var(--h03-font); }

/* Accessible skip link */
.h03-skip {
  position: absolute; left: 16px; top: -60px; z-index: 1100;
  padding: 10px 16px; border-radius: 999px; background: var(--h03-ink); color: #fff;
  font-size: .875rem; font-weight: 500; text-decoration: none;
  transition: top var(--h03-dur) var(--h03-ease);
}
.h03-skip:focus { top: 12px; }

/* ==========================================================================
   DOCK — fixes the capsule with margin from top and sides, centered
   ========================================================================== */
.h03-dock {
  position: fixed; top: 18px; left: 0; right: 0; z-index: 1030;
  display: flex; justify-content: center;
  padding: 0 20px; pointer-events: none;
  transition: top var(--h03-dur) var(--h03-ease);
}
.h03-dock.is-stuck { top: 10px; }

/* ==========================================================================
   HEADER CAPSULE
   ========================================================================== */
.h03-header {
  pointer-events: auto;
  width: 100%; max-width: 1080px;
  background: var(--h03-surface);
  border: 1px solid var(--h03-line);
  border-radius: var(--h03-radius-cap);
  box-shadow: var(--h03-shadow-cap);
  transition: border-radius var(--h03-dur) var(--h03-ease), box-shadow var(--h03-dur) var(--h03-ease);
}
.h03-nav {
  display: flex; align-items: center; gap: 24px;
  height: 60px; padding: 0 12px 0 22px;
}

/* --- Brand ------------------------------------------------------------- */
.h03-brand {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--h03-ink); flex: 0 0 auto;
}
.h03-brand__logo { color: var(--h03-accent); display: block; }
.h03-brand__name { font-size: 1.1rem; font-weight: 600; letter-spacing: -.02em; }

/* ==========================================================================
   PRIMARY MENU — pills + sliding highlight
   ========================================================================== */
.h03-collapse { flex: 1 1 auto; display: flex; justify-content: center; }
.h03-menu {
  position: relative;
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: 0;
}
.h03-item { position: relative; }

/* The gliding highlight — positioned by JS */
.h03-pill {
  position: absolute; top: 0; left: 0; height: 38px; width: 0;
  border-radius: var(--h03-radius-cap);
  background: var(--h03-pill-bg);
  opacity: 0; z-index: 0;
  transition: transform var(--h03-dur) var(--h03-ease),
              width var(--h03-dur) var(--h03-ease),
              opacity var(--h03-dur) var(--h03-ease);
  will-change: transform, width;
}

.h03-link {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 15px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .9125rem; font-weight: 500;
  color: var(--h03-body); text-decoration: none;
  border-radius: var(--h03-radius-cap);
  transition: color var(--h03-dur) var(--h03-ease);
}
.h03-link:hover { color: var(--h03-ink); }
.h03-chevron { color: currentColor; opacity: .55; transition: transform var(--h03-dur) var(--h03-ease); }
.h03-item.is-open > .h03-trigger { color: var(--h03-ink); }
.h03-item.is-open > .h03-trigger .h03-chevron { transform: rotate(180deg); }

/* Keyboard focus */
:where(.h03-link, .h03-drop__link, .h03-cta, .h03-burger, .h03-tile, .h03-promo,
       .h03-m-link, .h03-m-sub):focus-visible {
  outline: 2px solid var(--h03-accent); outline-offset: 2px;
}

/* ==========================================================================
   MEGA MENU — separate floating rounded card
   ========================================================================== */
.h03-mega, .h03-drop {
  position: absolute; top: calc(100% + 16px);
  opacity: 0; visibility: hidden; transform: translateY(8px) scale(.985);
  transition: opacity var(--h03-dur) var(--h03-ease), transform var(--h03-dur) var(--h03-spring), visibility var(--h03-dur) var(--h03-ease);
  pointer-events: none; transform-origin: top center;
}
.h03-item.is-open > .h03-mega, .h03-item.is-open > .h03-drop {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto;
}

.h03-mega {
  left: 50%; margin-left: -320px;
  width: 640px;
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 10px;
  background: var(--h03-surface);
  border: 1px solid var(--h03-line);
  border-radius: var(--h03-radius);
  box-shadow: var(--h03-shadow-pop);
  padding: 14px;
}
.h03-item.is-open > .h03-mega { transform: translateY(0) scale(1); }
.h03-mega__main { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }

.h03-tile {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px; border-radius: var(--h03-radius-sm);
  text-decoration: none; color: var(--h03-ink);
  transition: background var(--h03-dur) var(--h03-ease);
}
.h03-tile:hover { background: var(--h03-line-soft); }
.h03-tile__ic {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--h03-accent-tint); color: var(--h03-accent); font-size: 1rem;
}
.h03-tile__body { display: flex; flex-direction: column; gap: 2px; }
.h03-tile__body strong { font-size: .875rem; font-weight: 600; line-height: 1.3; }
.h03-tile__body span { font-size: .8125rem; color: var(--h03-muted); line-height: 1.4; }

/* Promo card */
.h03-promo {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px; border-radius: var(--h03-radius-sm);
  background: linear-gradient(160deg, #0d9488, #0b7d73);
  color: #fff; text-decoration: none;
}
.h03-promo__tag {
  align-self: flex-start; font-size: .6875rem; font-weight: 600; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .2); color: #fff;
}
.h03-promo__title { font-size: 1rem; font-weight: 600; margin-top: 4px; }
.h03-promo__desc { font-size: .8125rem; line-height: 1.5; color: rgba(255, 255, 255, .85); }
.h03-promo__cta {
  margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: .8125rem; font-weight: 600;
}
.h03-promo__cta i { transition: transform var(--h03-dur) var(--h03-ease); }
.h03-promo:hover .h03-promo__cta i { transform: translateX(3px); }

/* ==========================================================================
   DROPDOWN + NESTED — floating rounded card
   ========================================================================== */
.h03-drop {
  left: 50%; margin-left: -112px;
  min-width: 224px; list-style: none; margin-top: 0; padding: 6px;
  background: var(--h03-surface); border: 1px solid var(--h03-line);
  border-radius: var(--h03-radius); box-shadow: var(--h03-shadow-pop);
}
.h03-drop__item { position: relative; }
.h03-drop__link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 10px 12px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .875rem; font-weight: 500; text-align: left;
  color: var(--h03-body); text-decoration: none; border-radius: var(--h03-radius-sm);
  transition: color var(--h03-dur) var(--h03-ease), background var(--h03-dur) var(--h03-ease);
}
.h03-drop__link:hover { color: var(--h03-ink); background: var(--h03-line-soft); }
.h03-drop__caret { font-size: .7rem; opacity: .5; }
.h03-drop--sub { top: -7px; left: calc(100% + 6px); margin-left: 0; }
.h03-drop__item--sub.is-open > .h03-drop--sub {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto;
}

/* ==========================================================================
   ACTIONS
   ========================================================================== */
.h03-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.h03-cta {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px;
  font-size: .9125rem; font-weight: 600; color: #fff; text-decoration: none;
  background: var(--h03-accent); border-radius: var(--h03-radius-cap);
  transition: background var(--h03-dur) var(--h03-ease), transform var(--h03-dur) var(--h03-ease);
}
.h03-cta:hover { background: var(--h03-accent-700); }
.h03-cta:active { transform: translateY(1px); }

/* --- Hamburger (two-line, morphs to X) --------------------------------- */
.h03-burger {
  display: none; position: relative; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--h03-line); border-radius: var(--h03-radius-cap);
  background: #fff; cursor: pointer;
}
.h03-burger span {
  position: absolute; left: 11px; width: 18px; height: 1.8px; border-radius: 2px;
  background: var(--h03-ink);
  transition: transform var(--h03-dur) var(--h03-ease), opacity var(--h03-dur) var(--h03-ease);
}
.h03-burger span:nth-child(1) { top: 16px; }
.h03-burger span:nth-child(2) { bottom: 16px; }
.h03-burger[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.h03-burger[aria-expanded="true"] span:nth-child(2) { bottom: 19px; transform: rotate(-45deg); }

/* ==========================================================================
   MOBILE — the capsule expands into a rounded sheet
   ========================================================================== */
.h03-sheet {
  max-height: 0; overflow: hidden;
  transition: max-height 320ms var(--h03-ease);
}
.h03-header.is-expanded { border-radius: var(--h03-radius); }
.h03-header.is-expanded .h03-sheet { max-height: 78vh; overflow-y: auto; }

.h03-m-menu { list-style: none; margin: 0; padding: 8px 14px 4px; }
.h03-m-item { border-top: 1px solid var(--h03-line-soft); }
.h03-m-item:first-child { border-top: 0; }
.h03-m-link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; height: 50px; padding: 0 6px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 1rem; font-weight: 500; text-align: left;
  color: var(--h03-ink); text-decoration: none;
}
.h03-m-caret { font-size: .8rem; color: var(--h03-muted); transition: transform var(--h03-dur) var(--h03-ease); }
.h03-m-item--acc.is-open .h03-m-caret { transform: rotate(180deg); }
.h03-m-panel { max-height: 0; overflow: hidden; transition: max-height 280ms var(--h03-ease); }
.h03-m-item--acc.is-open .h03-m-panel { max-height: 320px; }
.h03-m-sub {
  display: block; padding: 10px 6px 10px 14px;
  font-size: .9375rem; color: var(--h03-body); text-decoration: none;
}
.h03-m-sub:hover { color: var(--h03-ink); }
.h03-cta--m {
  display: none; justify-content: center; margin: 8px 14px 16px; height: 46px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 991.98px) {
  .h03-dock { top: 12px; padding: 0 14px; }
  .h03-collapse { display: none; }
  .h03-actions .h03-cta { display: none; }
  .h03-cta--m { display: inline-flex; }
  .h03-burger { display: block; }
  .h03-nav { gap: 0; justify-content: space-between; }
  .h03-brand { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ===== header-04 · .h04-header ===== */
/* ==========================================================================
   HEADER 04 — LUXURY EDITORIAL
   Self-contained. Tokens namespaced --h04-. 8px spacing rhythm.
   Palette: ivory + charcoal with a single restrained gold accent.
   Type: Playfair Display wordmark / titles, letter-spaced uppercase Inter nav.
   Motion <200ms, cubic-bezier(.4,0,.2,1). Timeless, understated.
   ========================================================================== */

:root {
  /* Charcoal / ivory */
  --h04-ink: #201d1a;
  --h04-body: #3c3833;
  --h04-muted: #8a8178;
  --h04-line: #e7e1d8;
  --h04-line-soft: #efe9e0;
  --h04-ivory: #faf7f2;
  --h04-ivory-2: #f3eee6;
  --h04-surface: #fffdfa;

  /* Single gold accent */
  --h04-gold: #a9884e;
  --h04-gold-700: #927338;

  /* Elevation — soft, editorial */
  --h04-shadow-pop: 0 2px 8px rgba(32, 29, 26, .04), 0 24px 50px -22px rgba(32, 29, 26, .22);
  --h04-shadow-bar: 0 1px 0 rgba(32, 29, 26, .07);

  /* System */
  --h04-ease: cubic-bezier(.4, 0, .2, 1);
  --h04-dur: 200ms;
  --h04-h: 76px;
  --h04-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --h04-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
.h04-header { font-family: var(--h04-sans); }

/* Accessible skip link */
.h04-skip {
  position: absolute; left: 16px; top: -60px; z-index: 1100;
  padding: 10px 16px; background: var(--h04-ink); color: var(--h04-ivory);
  font-size: .8125rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; transition: top var(--h04-dur) var(--h04-ease);
}
.h04-skip:focus { top: 12px; }

/* ==========================================================================
   HEADER SHELL
   ========================================================================== */
.h04-header {
  position: sticky; top: 0; z-index: 1030;
  background: var(--h04-ivory);
  border-bottom: 1px solid var(--h04-line-soft);
  transition: box-shadow var(--h04-dur) var(--h04-ease), border-color var(--h04-dur) var(--h04-ease), background var(--h04-dur) var(--h04-ease);
}
.h04-header.is-stuck {
  background: rgba(250, 247, 242, .94);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: var(--h04-line);
  box-shadow: var(--h04-shadow-bar);
}

.h04-container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.h04-nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: var(--h04-h);
}

/* --- Brand (centered wordmark) ----------------------------------------- */
.h04-brand {
  grid-column: 2; justify-self: center;
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  text-decoration: none; color: var(--h04-ink);
}
.h04-brand__name {
  font-family: var(--h04-serif); font-size: 1.7rem; font-weight: 600;
  letter-spacing: .01em; line-height: 1;
}
.h04-brand__tag {
  font-size: .625rem; font-weight: 500; letter-spacing: .34em; text-transform: uppercase;
  color: var(--h04-gold);
}

/* ==========================================================================
   PRIMARY MENU — letter-spaced uppercase, underline reveal
   ========================================================================== */
.h04-side { display: flex; align-items: center; }
.h04-side--left { grid-column: 1; justify-content: flex-start; }
.h04-side--right { grid-column: 3; justify-content: flex-end; gap: 20px; }

.h04-menu {
  display: flex; align-items: center; gap: 30px;
  list-style: none; margin: 0; padding: 0;
}
.h04-item { position: relative; }

.h04-link {
  position: relative;
  display: inline-flex; align-items: center;
  height: var(--h04-h);
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .75rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--h04-body); text-decoration: none;
  transition: color var(--h04-dur) var(--h04-ease);
}
/* Thin animated underline */
.h04-link::after {
  content: ""; position: absolute; left: 0; bottom: 26px;
  width: 100%; height: 1px; background: var(--h04-gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--h04-dur) var(--h04-ease);
}
.h04-link:hover { color: var(--h04-ink); }
.h04-link:hover::after,
.h04-item.is-open > .h04-link::after { transform: scaleX(1); }
.h04-item.is-open > .h04-trigger { color: var(--h04-ink); }

/* Keyboard focus */
:where(.h04-link, .h04-drop__link, .h04-cta, .h04-util, .h04-burger, .h04-coll,
       .h04-m-link, .h04-m-sub):focus-visible {
  outline: 2px solid var(--h04-gold); outline-offset: 3px;
}

/* ==========================================================================
   MEGA MENU — editorial collections, image placeholders, white space
   ========================================================================== */
.h04-mega, .h04-drop {
  position: absolute; top: 100%;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--h04-dur) var(--h04-ease), transform var(--h04-dur) var(--h04-ease), visibility var(--h04-dur) var(--h04-ease);
  pointer-events: none;
}
.h04-item.is-open > .h04-mega, .h04-item.is-open > .h04-drop {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

.h04-mega {
  left: 0;
  width: 720px;
  background: var(--h04-surface);
  border: 1px solid var(--h04-line);
  box-shadow: var(--h04-shadow-pop);
  padding: 36px 40px 40px;
}
.h04-mega__eyebrow {
  margin: 0 0 24px; font-size: .6875rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--h04-gold);
}
.h04-mega__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.h04-coll { text-decoration: none; color: var(--h04-ink); display: block; }
.h04-coll__img {
  display: block; width: 100%; aspect-ratio: 3 / 4; margin-bottom: 14px;
  border: 1px solid var(--h04-line-soft);
  transition: transform var(--h04-dur) var(--h04-ease), filter var(--h04-dur) var(--h04-ease);
}
.h04-coll__img--1 { background: linear-gradient(150deg, #e9e0d2, #d3c3ab); }
.h04-coll__img--2 { background: linear-gradient(150deg, #e3ded6, #c3bab0); }
.h04-coll__img--3 { background: linear-gradient(150deg, #e8ddd6, #cbb7ab); }
.h04-coll__img--4 { background: linear-gradient(150deg, #e2e2dc, #bfc0b4); }
.h04-coll:hover .h04-coll__img { transform: translateY(-2px); filter: brightness(.97); }
.h04-coll__title {
  display: block; font-family: var(--h04-serif); font-size: 1.15rem; font-weight: 500;
  line-height: 1.2; margin-bottom: 4px;
}
.h04-coll__desc { display: block; font-size: .8125rem; color: var(--h04-muted); line-height: 1.5; }

/* ==========================================================================
   DROPDOWN + NESTED
   ========================================================================== */
.h04-drop {
  left: 0; min-width: 250px; list-style: none; margin: 0; padding: 10px;
  background: var(--h04-surface); border: 1px solid var(--h04-line);
  box-shadow: var(--h04-shadow-pop);
}
.h04-drop__item { position: relative; }
.h04-drop__link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 11px 14px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .8125rem; font-weight: 500; letter-spacing: .04em; text-align: left;
  color: var(--h04-body); text-decoration: none;
  transition: color var(--h04-dur) var(--h04-ease), background var(--h04-dur) var(--h04-ease);
}
.h04-drop__link:hover { color: var(--h04-ink); background: var(--h04-ivory-2); }
.h04-drop__caret { font-size: .7rem; opacity: .5; }
.h04-drop--sub { top: -11px; left: calc(100% + 8px); min-width: 260px; }
.h04-drop__item--sub.is-open > .h04-drop--sub {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

/* ==========================================================================
   RIGHT UTILITIES + CTA
   ========================================================================== */
.h04-util {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem; color: var(--h04-body); text-decoration: none;
  transition: color var(--h04-dur) var(--h04-ease);
}
.h04-util:hover { color: var(--h04-gold); }
.h04-cta {
  display: inline-flex; align-items: center; height: 42px; padding: 0 22px;
  font-size: .6875rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--h04-ivory); text-decoration: none;
  background: var(--h04-ink); border: 1px solid var(--h04-ink);
  transition: background var(--h04-dur) var(--h04-ease), color var(--h04-dur) var(--h04-ease);
}
.h04-cta:hover { background: transparent; color: var(--h04-ink); }

/* --- Hamburger (two-line, morphs to X) --------------------------------- */
.h04-burger {
  display: none; position: relative; width: 40px; height: 40px; padding: 0;
  border: 0; background: none; cursor: pointer;
}
.h04-burger span {
  position: absolute; left: 10px; width: 20px; height: 1.4px;
  background: var(--h04-ink);
  transition: transform var(--h04-dur) var(--h04-ease), opacity var(--h04-dur) var(--h04-ease);
}
.h04-burger span:nth-child(1) { top: 17px; }
.h04-burger span:nth-child(2) { bottom: 17px; }
.h04-burger[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.h04-burger[aria-expanded="true"] span:nth-child(2) { bottom: 20px; transform: rotate(-45deg); }

/* ==========================================================================
   MOBILE — elegant full-screen fade menu
   ========================================================================== */
.h04-overlay {
  position: fixed; inset: 0; z-index: 1029;
  padding: calc(var(--h04-h) + 40px) 32px 40px;
  background: var(--h04-ivory);
  display: flex; flex-direction: column;
  opacity: 0; transition: opacity var(--h04-dur) var(--h04-ease);
  overflow-y: auto;
}
.h04-overlay.is-open { opacity: 1; }

.h04-mobile { list-style: none; margin: 0; padding: 0; }
.h04-m-item { border-bottom: 1px solid var(--h04-line); }
.h04-m-link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 22px 2px;
  border: 0; background: none; cursor: pointer;
  font-family: var(--h04-serif); font-size: 1.6rem; font-weight: 500; text-align: left;
  color: var(--h04-ink); text-decoration: none;
}
.h04-m-plus { font-size: 1.2rem; color: var(--h04-gold); transition: transform var(--h04-dur) var(--h04-ease); }
.h04-m-item--acc.is-open .h04-m-plus { transform: rotate(45deg); }
.h04-m-panel { max-height: 0; overflow: hidden; transition: max-height 300ms var(--h04-ease); }
.h04-m-item--acc.is-open .h04-m-panel { max-height: 320px; }
.h04-m-sub {
  display: block; padding: 10px 2px 10px 4px;
  font-size: .8125rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--h04-body); text-decoration: none;
}
.h04-m-sub:last-child { padding-bottom: 20px; }
.h04-m-sub:hover { color: var(--h04-gold); }

.h04-mobile-foot { margin-top: auto; padding-top: 32px; }
.h04-cta--m { display: none; justify-content: center; width: 100%; height: 50px; }
.h04-mobile-util {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 20px; font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--h04-muted);
}
.h04-mobile-util a { color: var(--h04-body); text-decoration: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 991.98px) {
  .h04-container { padding: 0 20px; }
  .h04-nav { grid-template-columns: 1fr auto 1fr; }
  .h04-side--left .h04-menu { display: none; }
  .h04-side--right .h04-cta,
  .h04-side--right .h04-util { display: none; }
  .h04-burger { display: block; }
  .h04-side--left { justify-content: flex-start; }
  .h04-burger { margin-left: -8px; }
  .h04-cta--m { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ===== header-05 · .h05-header ===== */
/* ==========================================================================
   HEADER 05 — CORPORATE ENTERPRISE
   Self-contained. Tokens --h05-. Utility top bar + solid main nav.
   Trustworthy corporate blue, 8px rhythm, motion <200ms.
   ========================================================================== */

:root {
  --h05-ink: #0d1526;
  --h05-body: #414a5c;
  --h05-muted: #6a7386;
  --h05-line: #e6e9f0;
  --h05-line-soft: #f1f3f7;
  --h05-bg: #ffffff;
  --h05-hover: #f4f6fa;
  --h05-navy: #10233f;
  --h05-accent: #1c56d6;
  --h05-accent-700: #1546b3;
  --h05-accent-tint: #e9f0fd;
  --h05-shadow-pop: 0 1px 2px rgba(13,21,38,.05), 0 16px 40px -16px rgba(13,21,38,.22);
  --h05-radius: 12px;
  --h05-radius-sm: 9px;
  --h05-ease: cubic-bezier(.4,0,.2,1);
  --h05-dur: 180ms;
  --h05-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
.h05-header { font-family: var(--h05-font); color: var(--h05-ink); -webkit-font-smoothing: antialiased; }
.h05-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

.h05-skip { position: absolute; left: 16px; top: -60px; z-index: 1100; padding: 10px 16px; border-radius: 8px; background: var(--h05-navy); color: #fff; font-size: .875rem; font-weight: 500; text-decoration: none; transition: top var(--h05-dur) var(--h05-ease); }
.h05-skip:focus { top: 12px; }

/* ===== Header shell ===== */
.h05-header { position: sticky; top: 0; z-index: 1030; background: var(--h05-bg); }

/* ===== Utility top bar (recedes on scroll) ===== */
.h05-topbar { background: var(--h05-navy); color: #c7d2e4; overflow: hidden; max-height: 44px; transition: max-height var(--h05-dur) var(--h05-ease), opacity var(--h05-dur) var(--h05-ease); }
.h05-header.is-stuck .h05-topbar { max-height: 0; opacity: 0; }
.h05-topbar__row { display: flex; align-items: center; justify-content: space-between; height: 44px; font-size: .8125rem; }
.h05-topbar a { color: #c7d2e4; text-decoration: none; transition: color var(--h05-dur) var(--h05-ease); }
.h05-topbar a:hover { color: #fff; }
.h05-topbar__contact { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.h05-topbar__contact i { color: var(--h05-accent); margin-right: 5px; }
.h05-topbar__meta { display: flex; align-items: center; gap: 14px; }
.h05-lang { display: inline-flex; align-items: center; gap: 5px; color: #c7d2e4; }
.h05-lang__select { background: transparent; border: 0; color: #c7d2e4; font: inherit; font-size: .8125rem; cursor: pointer; padding: 2px; }
.h05-lang__select option { color: #10233f; }
.h05-topbar__divider { width: 1px; height: 16px; background: rgba(255,255,255,.18); }
.h05-social { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0; font-size: .95rem; }
.h05-topbar__signin { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }

/* ===== Main nav ===== */
.h05-main { border-bottom: 1px solid var(--h05-line); background: var(--h05-bg); transition: box-shadow var(--h05-dur) var(--h05-ease); }
.h05-header.is-stuck .h05-main { box-shadow: 0 1px 0 var(--h05-line), 0 6px 20px -14px rgba(13,21,38,.3); }
.h05-nav { display: flex; align-items: center; gap: 36px; height: 72px; }
.h05-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--h05-ink); flex: 0 0 auto; }
.h05-brand__logo { color: var(--h05-navy); display: block; }
.h05-brand__name { font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; }

.h05-collapse { flex: 1 1 auto; }
.h05-menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.h05-item { position: relative; }
.h05-link { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: .9375rem; font-weight: 500; color: var(--h05-body); text-decoration: none; border-radius: var(--h05-radius-sm); transition: color var(--h05-dur) var(--h05-ease), background var(--h05-dur) var(--h05-ease); }
.h05-link:hover { color: var(--h05-navy); background: var(--h05-hover); }
.h05-chevron { opacity: .55; transition: transform var(--h05-dur) var(--h05-ease); }
.h05-item.is-open > .h05-trigger { color: var(--h05-navy); background: var(--h05-hover); }
.h05-item.is-open > .h05-trigger .h05-chevron { transform: rotate(180deg); }

:where(.h05-link,.h05-drop__link,.h05-cta,.h05-burger,.h05-panel__cta,.h05-m-link,.h05-m-sub):focus-visible { outline: 2px solid var(--h05-accent); outline-offset: 2px; }

/* ===== Mega menu ===== */
.h05-mega, .h05-drop { position: absolute; top: calc(100% + 10px); left: 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--h05-dur) var(--h05-ease), transform var(--h05-dur) var(--h05-ease), visibility var(--h05-dur) var(--h05-ease); pointer-events: none; }
.h05-item.is-open > .h05-mega, .h05-item.is-open > .h05-drop { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.h05-mega { width: 860px; background: var(--h05-bg); border: 1px solid var(--h05-line); border-radius: var(--h05-radius); box-shadow: var(--h05-shadow-pop); padding: 22px; }
.h05-mega__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.h05-mega__label { margin: 0 0 12px; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--h05-muted); }
.h05-mega__label--light { color: rgba(255,255,255,.7); }
.h05-mega__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.h05-mega__list a { display: flex; align-items: flex-start; gap: 11px; padding: 9px 8px; border-radius: var(--h05-radius-sm); text-decoration: none; color: var(--h05-ink); transition: background var(--h05-dur) var(--h05-ease); }
.h05-mega__list a:hover { background: var(--h05-hover); }
.h05-mega__list i { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--h05-accent-tint); color: var(--h05-accent); font-size: .95rem; }
.h05-mega__list span { display: flex; flex-direction: column; gap: 1px; font-size: .8125rem; color: var(--h05-muted); line-height: 1.35; }
.h05-mega__list strong { font-size: .875rem; font-weight: 600; color: var(--h05-ink); }
.h05-mega__panel { background: var(--h05-navy); border-radius: var(--h05-radius); padding: 18px; color: #fff; display: flex; flex-direction: column; gap: 10px; }
.h05-stat { display: flex; flex-direction: column; }
.h05-stat__num { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.h05-stat__cap { font-size: .78rem; color: rgba(255,255,255,.65); }
.h05-panel__cta { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600; color: #fff; text-decoration: none; }
.h05-panel__cta i { transition: transform var(--h05-dur) var(--h05-ease); }
.h05-panel__cta:hover i { transform: translateX(3px); }

/* ===== Dropdown (multi-level) ===== */
.h05-drop { min-width: 224px; list-style: none; margin: 0; padding: 6px; background: var(--h05-bg); border: 1px solid var(--h05-line); border-radius: var(--h05-radius); box-shadow: var(--h05-shadow-pop); }
.h05-drop__item { position: relative; }
.h05-drop__link { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 9px 12px; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: .875rem; font-weight: 500; text-align: left; color: var(--h05-body); text-decoration: none; border-radius: var(--h05-radius-sm); transition: color var(--h05-dur) var(--h05-ease), background var(--h05-dur) var(--h05-ease); }
.h05-drop__link:hover { color: var(--h05-navy); background: var(--h05-hover); }
.h05-drop__caret { font-size: .7rem; opacity: .5; }
.h05-drop--sub { top: -7px; left: calc(100% + 6px); }
.h05-drop__item--sub.is-open > .h05-drop--sub { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }

/* ===== Actions ===== */
.h05-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: 0 0 auto; }
.h05-cta { display: inline-flex; align-items: center; height: 42px; padding: 0 20px; font-size: .9375rem; font-weight: 600; color: #fff; text-decoration: none; background: var(--h05-accent); border-radius: var(--h05-radius-sm); transition: background var(--h05-dur) var(--h05-ease); }
.h05-cta:hover { background: var(--h05-accent-700); }
.h05-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 0; border: 1px solid var(--h05-line); border-radius: var(--h05-radius-sm); background: #fff; cursor: pointer; }
.h05-burger span { width: 18px; height: 1.8px; margin: 0 auto; border-radius: 2px; background: var(--h05-ink); transition: transform var(--h05-dur) var(--h05-ease), opacity var(--h05-dur) var(--h05-ease); }
.h05-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.h05-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.h05-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== Mobile drawer ===== */
.h05-scrim { position: fixed; inset: 0; z-index: 1039; background: rgba(13,21,38,.4); opacity: 0; transition: opacity var(--h05-dur) var(--h05-ease); }
.h05-scrim.is-shown { opacity: 1; }
.h05-drawer { position: fixed; top: 0; right: 0; z-index: 1040; width: min(400px, 90vw); height: 100dvh; background: #fff; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 320ms var(--h05-ease); }
.h05-drawer.is-open { transform: translateX(0); }
.h05-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--h05-line); }
.h05-drawer__title { font-weight: 600; }
.h05-drawer__close { width: 38px; height: 38px; border: 1px solid var(--h05-line); border-radius: 9px; background: #fff; cursor: pointer; }
.h05-drawer__nav { flex: 1 1 auto; overflow-y: auto; padding: 12px 16px; }
.h05-m-menu { list-style: none; margin: 0; padding: 0; }
.h05-m-item { border-bottom: 1px solid var(--h05-line-soft); }
.h05-m-link { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 8px; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: 1rem; font-weight: 500; color: var(--h05-ink); text-decoration: none; }
.h05-m-caret { transition: transform var(--h05-dur) var(--h05-ease); opacity: .55; }
.h05-m-item--acc.is-open > .h05-m-link .h05-m-caret, .h05-m-nested.is-open > .h05-m-trigger--sub .h05-m-caret { transform: rotate(180deg); }
.h05-m-panel { max-height: 0; overflow: hidden; transition: max-height 300ms var(--h05-ease); }
.h05-m-item--acc.is-open > .h05-m-panel, .h05-m-nested.is-open > .h05-m-panel { max-height: 700px; }
.h05-m-sub { display: flex; align-items: center; justify-content: space-between; padding: 11px 8px 11px 18px; border: 0; background: none; width: 100%; cursor: pointer; font-family: inherit; font-size: .9375rem; font-weight: 500; color: var(--h05-body); text-decoration: none; }
.h05-m-sub--deep { padding-left: 30px; font-size: .9rem; color: var(--h05-muted); }
.h05-m-nested { padding-left: 0; }
.h05-m-utility { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--h05-line); display: flex; flex-direction: column; gap: 4px; }
.h05-m-util { display: flex; align-items: center; gap: 9px; justify-content: flex-start; padding: 10px 8px; font-size: .9rem; color: var(--h05-body); text-decoration: none; }
.h05-m-util i { color: var(--h05-accent); }
.h05-m-lang { justify-content: space-between; }
.h05-m-lang select { border: 1px solid var(--h05-line); border-radius: 8px; padding: 5px 8px; font: inherit; font-size: .85rem; }
.h05-m-social { display: flex; gap: 16px; list-style: none; margin: 8px 0 0; padding: 8px; font-size: 1.1rem; }
.h05-m-social a { color: var(--h05-body); }
.h05-drawer__foot { padding: 16px 20px; border-top: 1px solid var(--h05-line); }
.h05-cta--m { width: 100%; justify-content: center; height: 46px; }

/* ===== Responsive ===== */
@media (max-width: 991.98px) {
  .h05-burger { display: flex; }
  .h05-collapse { display: none; }
  .h05-cta:not(.h05-cta--m):not(.h05-cta--block) { display: none; }
  .h05-nav { height: 64px; gap: 0; }
  .h05-topbar { display: none; }
}
@media (min-width: 992px) { .h05-drawer, .h05-scrim { display: none; } }

@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; } }

/* ===== header-06 · .h06-header ===== */
/* ==========================================================================
   HEADER 06 — CREATIVE AGENCY (Confident, restrained)
   Self-contained. Tokens namespaced --h06-. 8px spacing rhythm.
   Palette: high-contrast near-black ink on white + ONE bold accent (amber),
   used sparingly. Motion: <200ms, cubic-bezier(.4,0,.2,1). No gimmicks.
   ========================================================================== */

:root {
  /* Ink / neutrals — deliberately high-contrast */
  --h06-ink: #0a0a0b;
  --h06-body: #3d3d42;
  --h06-muted: #7a7a82;
  --h06-line: #e9e9ec;
  --h06-line-soft: #f3f3f5;
  --h06-bg: #ffffff;
  --h06-hover: #f5f5f4;

  /* Single bold accent */
  --h06-accent: #ff5a1f;
  --h06-accent-700: #e04413;
  --h06-accent-tint: #fff0ea;

  /* Elevation */
  --h06-shadow-pop: 0 2px 4px rgba(10, 10, 11, .04), 0 24px 48px -20px rgba(10, 10, 11, .24);
  --h06-shadow-bar: 0 1px 0 rgba(10, 10, 11, .07);

  /* System */
  --h06-radius: 14px;
  --h06-radius-sm: 10px;
  --h06-ease: cubic-bezier(.4, 0, .2, 1);
  --h06-dur: 180ms;
  --h06-h: 76px;
  --h06-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
.h06-header { font-family: var(--h06-font); }

/* Accessible skip link */
.h06-skip {
  position: absolute; left: 16px; top: -60px; z-index: 1100;
  padding: 10px 16px; border-radius: 8px; background: var(--h06-ink); color: #fff;
  font-size: .875rem; font-weight: 600; text-decoration: none;
  transition: top var(--h06-dur) var(--h06-ease);
}
.h06-skip:focus { top: 12px; }

/* ==========================================================================
   HEADER SHELL
   ========================================================================== */
.h06-header {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--h06-dur) var(--h06-ease), box-shadow var(--h06-dur) var(--h06-ease), background var(--h06-dur) var(--h06-ease);
}
.h06-header.is-stuck {
  background: rgba(255, 255, 255, .94);
  border-bottom-color: var(--h06-line);
  box-shadow: var(--h06-shadow-bar);
}

.h06-container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
/* Asymmetric: brand | menu (flex-grow) | actions */
.h06-nav { display: flex; align-items: center; gap: 48px; height: var(--h06-h); }

/* --- Brand — oversized display treatment ------------------------------- */
.h06-brand {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; color: var(--h06-ink); flex: 0 0 auto;
}
.h06-brand__mark { color: var(--h06-ink); display: block; line-height: 0; }
.h06-brand__name { font-size: 1.5rem; font-weight: 800; letter-spacing: -.04em; }
.h06-brand__dot { color: var(--h06-accent); }

/* ==========================================================================
   PRIMARY MENU
   ========================================================================== */
.h06-collapse { flex: 1 1 auto; }
.h06-menu {
  display: flex; align-items: center; gap: 6px;
  list-style: none; margin: 0; padding: 0; position: relative;
}
.h06-item { position: relative; }

.h06-link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 42px; padding: 0 14px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 1rem; font-weight: 500;
  color: var(--h06-body); text-decoration: none;
  border-radius: var(--h06-radius-sm);
  transition: color var(--h06-dur) var(--h06-ease);
}
/* Refined hover: an animated underline that grows from the left */
.h06-link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px;
  height: 2px; background: var(--h06-ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--h06-dur) var(--h06-ease);
}
.h06-link:hover { color: var(--h06-ink); }
.h06-link:hover::after { transform: scaleX(1); }
.h06-chevron { color: currentColor; opacity: .5; transition: transform var(--h06-dur) var(--h06-ease); }
.h06-item.is-open > .h06-trigger { color: var(--h06-ink); }
.h06-item.is-open > .h06-trigger::after { transform: scaleX(1); background: var(--h06-accent); }
.h06-item.is-open > .h06-trigger .h06-chevron { transform: rotate(180deg); }

/* Keyboard focus */
:where(.h06-link, .h06-drop__link, .h06-cta, .h06-burger, .h06-card, .h06-mega__all):focus-visible {
  outline: 2px solid var(--h06-accent); outline-offset: 3px;
}

/* ==========================================================================
   HOVER THUMBNAIL PREVIEW (desktop) — small, refined gradient placeholder
   ========================================================================== */
.h06-preview {
  position: absolute; top: calc(100% + 14px); left: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 10px; width: 240px;
  background: var(--h06-bg); border: 1px solid var(--h06-line);
  border-radius: var(--h06-radius); box-shadow: var(--h06-shadow-pop);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--h06-dur) var(--h06-ease), transform var(--h06-dur) var(--h06-ease), visibility var(--h06-dur) var(--h06-ease), left var(--h06-dur) var(--h06-ease);
  pointer-events: none;
}
.h06-preview.is-shown { opacity: 1; visibility: visible; transform: translateY(0); }
.h06-preview__thumb {
  flex: 0 0 auto; width: 64px; height: 44px; border-radius: 8px;
  background: linear-gradient(135deg, #c9c9cf, #ececed);
}
.h06-preview__thumb.is-work    { background: linear-gradient(135deg, #ff5a1f, #ffb38c); }
.h06-preview__thumb.is-services{ background: linear-gradient(135deg, #0a0a0b, #55555c); }
.h06-preview__thumb.is-studio  { background: linear-gradient(135deg, #3a6df0, #9fc0ff); }
.h06-preview__thumb.is-journal { background: linear-gradient(135deg, #12a37f, #8fe6cf); }
.h06-preview__label {
  display: flex; flex-direction: column; gap: 2px;
  font-size: .8125rem; color: var(--h06-muted); line-height: 1.35;
}

/* ==========================================================================
   MEGA MENU — Work showcase (intro + project cards)
   ========================================================================== */
.h06-mega, .h06-drop {
  position: absolute; top: calc(100% + 12px); left: 0;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--h06-dur) var(--h06-ease), transform var(--h06-dur) var(--h06-ease), visibility var(--h06-dur) var(--h06-ease);
  pointer-events: none;
}
.h06-item.is-open > .h06-mega, .h06-item.is-open > .h06-drop {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

.h06-mega {
  width: 760px;
  display: grid; grid-template-columns: .82fr 1.18fr; gap: 28px;
  background: var(--h06-bg); border: 1px solid var(--h06-line);
  border-radius: var(--h06-radius); box-shadow: var(--h06-shadow-pop);
  padding: 28px;
}
.h06-mega__eyebrow {
  margin: 0 0 10px; font-size: .6875rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--h06-accent);
}
.h06-mega__head { margin: 0 0 10px; font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.h06-mega__sub { margin: 0 0 20px; font-size: .9375rem; color: var(--h06-muted); line-height: 1.5; }
.h06-mega__all {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .875rem; font-weight: 600; color: var(--h06-ink); text-decoration: none;
}
.h06-mega__all i { transition: transform var(--h06-dur) var(--h06-ease); }
.h06-mega__all:hover i { transform: translateX(4px); }

.h06-mega__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.h06-card {
  display: flex; flex-direction: column; gap: 10px;
  text-decoration: none; color: var(--h06-ink);
}
.h06-card__thumb {
  aspect-ratio: 4 / 3; border-radius: var(--h06-radius-sm);
  transition: transform var(--h06-dur) var(--h06-ease); transform-origin: center;
}
.h06-card__thumb--a { background: linear-gradient(140deg, #ff5a1f 0%, #ffce7a 100%); }
.h06-card__thumb--b { background: linear-gradient(140deg, #0a0a0b 0%, #4a4a52 100%); }
.h06-card__thumb--c { background: linear-gradient(140deg, #3a6df0 0%, #8fd0ff 100%); }
.h06-card:hover .h06-card__thumb { transform: scale(1.03); }
.h06-card__meta { display: flex; flex-direction: column; gap: 1px; }
.h06-card__meta strong { font-size: .875rem; font-weight: 600; }
.h06-card__meta span { font-size: .75rem; color: var(--h06-muted); }

/* ==========================================================================
   DROPDOWN + NESTED
   ========================================================================== */
.h06-drop {
  min-width: 246px; list-style: none; margin: 0; padding: 8px;
  background: var(--h06-bg); border: 1px solid var(--h06-line);
  border-radius: var(--h06-radius); box-shadow: var(--h06-shadow-pop);
}
.h06-drop__item { position: relative; }
.h06-drop__link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 10px 12px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .9375rem; font-weight: 500; text-align: left;
  color: var(--h06-body); text-decoration: none; border-radius: var(--h06-radius-sm);
  transition: color var(--h06-dur) var(--h06-ease), background var(--h06-dur) var(--h06-ease);
}
.h06-drop__link > span { display: inline-flex; align-items: center; gap: 10px; }
.h06-drop__link i:first-child { color: var(--h06-muted); font-size: .95rem; }
.h06-drop__link:hover { color: var(--h06-ink); background: var(--h06-hover); }
.h06-drop__link:hover i:first-child { color: var(--h06-accent); }
.h06-drop__caret { font-size: .7rem; opacity: .5; }
.h06-drop--sub { top: -8px; left: calc(100% + 8px); }
.h06-drop__item--sub.is-open > .h06-drop--sub {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

/* ==========================================================================
   ACTIONS
   ========================================================================== */
.h06-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; flex: 0 0 auto; }
.h06-cta {
  display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px;
  font-size: .9375rem; font-weight: 600; color: #fff; text-decoration: none;
  background: var(--h06-ink); border-radius: 999px;
  transition: background var(--h06-dur) var(--h06-ease), transform var(--h06-dur) var(--h06-ease);
}
.h06-cta i { font-size: 1rem; transition: transform var(--h06-dur) var(--h06-ease); }
.h06-cta:hover { background: var(--h06-accent); }
.h06-cta:hover i { transform: translate(2px, -2px); }
.h06-cta:active { transform: translateY(1px); }

/* --- Hamburger (three-line, morphs to X) ------------------------------- */
.h06-burger {
  display: none; position: relative; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--h06-line); border-radius: var(--h06-radius-sm);
  background: #fff; cursor: pointer;
}
.h06-burger span {
  position: absolute; left: 13px; width: 18px; height: 2px; border-radius: 2px;
  background: var(--h06-ink);
  transition: transform var(--h06-dur) var(--h06-ease), opacity var(--h06-dur) var(--h06-ease);
}
.h06-burger span:nth-child(1) { top: 15px; }
.h06-burger span:nth-child(2) { top: 21px; }
.h06-burger span:nth-child(3) { top: 27px; }
.h06-burger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.h06-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.h06-burger[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* Full-screen scrim */
.h06-scrim {
  position: fixed; inset: 0; z-index: 1029;
  background: rgba(10, 10, 11, .4); opacity: 0;
  transition: opacity var(--h06-dur) var(--h06-ease);
}
.h06-scrim.is-shown { opacity: 1; }

/* Mobile CTA is hidden on desktop; only shown inside the mobile drawer */
.h06-mobile-cta { display: none; }

/* ==========================================================================
   RESPONSIVE — bold full-screen menu with large, calm, staggered items
   ========================================================================== */
@media (max-width: 991.98px) {
  .h06-container { padding: 0 22px; }
  .h06-nav { gap: 0; }
  .h06-burger { display: block; }
  .h06-cta { display: none; }
  .h06-actions { margin-left: auto; }
  .h06-preview { display: none; }

  .h06-collapse {
    position: fixed; inset: 0; z-index: 1031;
    background: #fff; padding: calc(var(--h06-h) + 24px) 28px 32px;
    overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 260ms var(--h06-ease), transform 320ms var(--h06-ease), visibility 260ms var(--h06-ease);
  }
  .h06-collapse.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

  .h06-menu { flex-direction: column; align-items: stretch; gap: 4px; }
  .h06-link {
    height: auto; width: 100%; justify-content: space-between;
    font-size: 2rem; font-weight: 700; letter-spacing: -.03em;
    padding: 14px 0; color: var(--h06-ink);
  }
  .h06-link::after { display: none; }
  .h06-item { border-bottom: 1px solid var(--h06-line-soft); }

  /* Staggered entrance for calm reveal */
  .h06-collapse.is-open .h06-item {
    animation: h06-rise 420ms var(--h06-ease) both;
  }
  .h06-collapse.is-open .h06-item:nth-child(1) { animation-delay: 60ms; }
  .h06-collapse.is-open .h06-item:nth-child(2) { animation-delay: 110ms; }
  .h06-collapse.is-open .h06-item:nth-child(3) { animation-delay: 160ms; }
  .h06-collapse.is-open .h06-item:nth-child(4) { animation-delay: 210ms; }
  @keyframes h06-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Mega + dropdowns become inline accordions */
  .h06-mega, .h06-drop {
    position: static; width: auto; opacity: 1; visibility: visible; transform: none;
    pointer-events: auto; border: 0; box-shadow: none; padding: 0;
    display: block; max-height: 0; overflow: hidden;
    transition: max-height 320ms var(--h06-ease);
  }
  .h06-item.is-open > .h06-mega,
  .h06-item.is-open > .h06-drop,
  .h06-drop__item--sub.is-open > .h06-drop--sub { max-height: 900px; }

  .h06-mega { padding: 0 0 14px; }
  .h06-mega__intro { display: none; }
  .h06-mega__grid { grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 4px; }
  .h06-card__thumb { aspect-ratio: 16 / 9; }
  .h06-drop { padding-left: 2px; }
  .h06-drop__link { font-size: 1.0625rem; padding: 12px 0; }
  .h06-drop--sub { padding-left: 16px; }

  /* Mobile CTA pinned below the list */
  .h06-collapse::after { content: none; }
  .h06-mobile-cta {
    display: flex; margin-top: 28px;
  }
  .h06-mobile-cta a {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 56px; border-radius: 999px; background: var(--h06-ink); color: #fff;
    font-size: 1.0625rem; font-weight: 600; text-decoration: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ===== header-08 · .h08-header ===== */
/* ==========================================================================
   HEADER 08 — CENTER-LOGO MULTI-ROW
   Self-contained. Tokens --h08-. Two centred rows that reflow into a single
   compact row (logo left, menu centre, actions right) on scroll via
   `display: contents` + grid. Editorial, symmetric, motion <200ms.
   ========================================================================== */

:root {
  --h08-ink: #14110e;
  --h08-body: #4a453f;
  --h08-muted: #857d73;
  --h08-line: #ece7e0;
  --h08-line-soft: #f5f1eb;
  --h08-bg: #ffffff;
  --h08-hover: #f6f2ec;
  --h08-accent: #9a6a3c;       /* warm bronze */
  --h08-accent-700: #7f5730;
  --h08-accent-tint: #f3ebe1;
  --h08-shadow-pop: 0 1px 2px rgba(20,17,14,.05), 0 18px 44px -18px rgba(20,17,14,.22);
  --h08-radius: 12px;
  --h08-radius-sm: 9px;
  --h08-ease: cubic-bezier(.4,0,.2,1);
  --h08-dur: 200ms;
  --h08-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
.h08-header { font-family: var(--h08-font); }
.h08-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.h08-skip { position: absolute; left: 16px; top: -60px; z-index: 1100; padding: 10px 16px; border-radius: 8px; background: var(--h08-ink); color: #fff; font-size: .875rem; text-decoration: none; transition: top var(--h08-dur) var(--h08-ease); }
.h08-skip:focus { top: 12px; }

/* ===== Shell ===== */
.h08-header { position: sticky; top: 0; z-index: 1030; background: rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--h08-dur) var(--h08-ease), box-shadow var(--h08-dur) var(--h08-ease); }
.h08-header.is-stuck { border-bottom-color: var(--h08-line); box-shadow: 0 1px 0 var(--h08-line); background: rgba(255,255,255,.96); }

.h08-nav { display: flex; flex-direction: column; }

/* Row 1 — centred brand between flanking utilities */
.h08-row--brand { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 68px; transition: height var(--h08-dur) var(--h08-ease); }
.h08-utility { display: flex; align-items: center; gap: 12px; }
.h08-utility--right { justify-content: flex-end; }
.h08-util { display: inline-flex; align-items: center; gap: 7px; font-size: .875rem; font-weight: 500; color: var(--h08-body); text-decoration: none; padding: 8px 6px; border-radius: 8px; transition: color var(--h08-dur) var(--h08-ease); }
.h08-util:hover { color: var(--h08-ink); }
.h08-brand { display: inline-flex; align-items: center; gap: 9px; justify-self: center; text-decoration: none; color: var(--h08-ink); transition: transform var(--h08-dur) var(--h08-ease); }
.h08-brand__logo { color: var(--h08-accent); display: block; }
.h08-brand__name { font-size: 1.3rem; font-weight: 700; letter-spacing: .01em; }
.h08-cta { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; font-size: .9375rem; font-weight: 600; color: #fff; text-decoration: none; background: var(--h08-accent); border-radius: var(--h08-radius-sm); transition: background var(--h08-dur) var(--h08-ease); }
.h08-cta:hover { background: var(--h08-accent-700); }

/* Row 2 — centred menu */
.h08-row--menu { display: flex; justify-content: center; border-top: 1px solid var(--h08-line-soft); height: 52px; align-items: center; transition: height var(--h08-dur) var(--h08-ease); }
.h08-menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.h08-item { position: relative; }
.h08-link { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: .9375rem; font-weight: 500; color: var(--h08-body); text-decoration: none; border-radius: var(--h08-radius-sm); transition: color var(--h08-dur) var(--h08-ease), background var(--h08-dur) var(--h08-ease); }
.h08-link:hover { color: var(--h08-ink); background: var(--h08-hover); }
.h08-chevron { opacity: .55; transition: transform var(--h08-dur) var(--h08-ease); }
.h08-item.is-open > .h08-trigger { color: var(--h08-ink); background: var(--h08-hover); }
.h08-item.is-open > .h08-trigger .h08-chevron { transform: rotate(180deg); }

:where(.h08-link,.h08-drop__link,.h08-cta,.h08-util,.h08-burger,.h08-mega__link,.h08-feature):focus-visible { outline: 2px solid var(--h08-accent); outline-offset: 2px; }

/* ===== CONDENSE: reflow two rows into one on scroll (desktop) ===== */
@media (min-width: 992px) {
  .h08-header.is-stuck .h08-nav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; height: 62px; column-gap: 24px; }
  .h08-header.is-stuck .h08-row { display: contents; }
  .h08-header.is-stuck .h08-row--brand,
  .h08-header.is-stuck .h08-row--menu { height: auto; border: 0; }
  .h08-header.is-stuck .h08-utility--left { display: none; }
  .h08-header.is-stuck .h08-brand { grid-column: 1; grid-row: 1; justify-self: start; }
  .h08-header.is-stuck .h08-brand__name { font-size: 1.15rem; }
  .h08-header.is-stuck .h08-menu { grid-column: 2; grid-row: 1; justify-self: center; }
  .h08-header.is-stuck .h08-utility--right { grid-column: 3; grid-row: 1; }
}

/* ===== Mega menu (centred) ===== */
.h08-mega, .h08-drop { position: absolute; top: calc(100% + 10px); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--h08-dur) var(--h08-ease), transform var(--h08-dur) var(--h08-ease), visibility var(--h08-dur) var(--h08-ease); pointer-events: none; }
.h08-item.is-open > .h08-mega, .h08-item.is-open > .h08-drop { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.h08-mega { left: 50%; transform: translate(-50%, 6px); width: 720px; background: var(--h08-bg); border: 1px solid var(--h08-line); border-radius: var(--h08-radius); box-shadow: var(--h08-shadow-pop); padding: 20px; display: grid; grid-template-columns: 1fr .8fr; gap: 18px; }
.h08-item.is-open > .h08-mega { transform: translate(-50%, 0); }
.h08-mega__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.h08-mega__label { margin: 4px 8px 8px; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--h08-muted); }
.h08-mega__link { display: flex; align-items: flex-start; gap: 11px; padding: 9px 8px; border-radius: var(--h08-radius-sm); text-decoration: none; color: var(--h08-ink); transition: background var(--h08-dur) var(--h08-ease); }
.h08-mega__link:hover { background: var(--h08-hover); }
.h08-mega__ic { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--h08-accent-tint); color: var(--h08-accent); }
.h08-mega__text { display: flex; flex-direction: column; gap: 2px; }
.h08-mega__text strong { font-size: .875rem; font-weight: 600; }
.h08-mega__text span { font-size: .8125rem; color: var(--h08-muted); }
.h08-feature { display: flex; flex-direction: column; border-radius: var(--h08-radius); overflow: hidden; background: var(--h08-line-soft); text-decoration: none; color: var(--h08-ink); transition: background var(--h08-dur) var(--h08-ease); }
.h08-feature:hover { background: #efe8df; }
.h08-feature__thumb { height: 120px; background: linear-gradient(135deg, #c9a887, #9a6a3c); }
.h08-feature__body { padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.h08-feature__tag { font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--h08-accent); }
.h08-feature__title { font-size: 1rem; font-weight: 600; }
.h08-feature__cta { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600; color: var(--h08-accent); }
.h08-feature__cta i { transition: transform var(--h08-dur) var(--h08-ease); }
.h08-feature:hover .h08-feature__cta i { transform: translateX(3px); }

/* ===== Dropdown + nested ===== */
.h08-drop { left: 50%; transform: translate(-50%, 6px); min-width: 220px; list-style: none; margin: 0; padding: 6px; background: var(--h08-bg); border: 1px solid var(--h08-line); border-radius: var(--h08-radius); box-shadow: var(--h08-shadow-pop); }
.h08-item.is-open > .h08-drop { transform: translate(-50%, 0); }
.h08-drop__item { position: relative; }
.h08-drop__link { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 9px 12px; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: .875rem; font-weight: 500; text-align: left; color: var(--h08-body); text-decoration: none; border-radius: var(--h08-radius-sm); transition: color var(--h08-dur) var(--h08-ease), background var(--h08-dur) var(--h08-ease); }
.h08-drop__link:hover { color: var(--h08-ink); background: var(--h08-hover); }
.h08-drop__caret { font-size: .7rem; opacity: .5; }
.h08-drop--sub { top: -7px; left: calc(100% + 6px); transform: translateX(6px); }
.h08-drop__item--sub.is-open > .h08-drop--sub { opacity: 1; visibility: visible; transform: translateX(0); pointer-events: auto; }

/* ===== Hamburger ===== */
.h08-burger { display: none; position: absolute; top: 20px; right: 24px; width: 40px; height: 40px; padding: 0; border: 1px solid var(--h08-line); border-radius: var(--h08-radius-sm); background: #fff; cursor: pointer; }
.h08-burger span { position: absolute; left: 11px; width: 18px; height: 1.8px; border-radius: 2px; background: var(--h08-ink); transition: transform var(--h08-dur) var(--h08-ease); }
.h08-burger span:nth-child(1) { top: 16px; } .h08-burger span:nth-child(2) { bottom: 16px; }
.h08-burger[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.h08-burger[aria-expanded="true"] span:nth-child(2) { bottom: 19px; transform: rotate(-45deg); }

.h08-scrim { position: fixed; inset: 0; z-index: 1029; background: rgba(20,17,14,.34); opacity: 0; transition: opacity var(--h08-dur) var(--h08-ease); }
.h08-scrim.is-shown { opacity: 1; }

/* ===== Responsive ===== */
@media (max-width: 991.98px) {
  .h08-burger { display: block; }
  .h08-row--brand { grid-template-columns: auto 1fr; height: 62px; }
  .h08-utility--left { display: none; }
  .h08-brand { justify-self: start; grid-column: 1; }
  .h08-utility--right { display: none; }
  .h08-row--menu {
    position: fixed; top: 0; right: 0; z-index: 1031;
    width: min(380px, 88vw); height: 100dvh; border: 0;
    background: #fff; box-shadow: -24px 0 60px -30px rgba(20,17,14,.3);
    padding: 84px 16px 24px; display: block; overflow-y: auto;
    transform: translateX(100%); transition: transform 320ms var(--h08-ease);
  }
  .h08-row--menu.is-open { transform: translateX(0); }
  .h08-menu { flex-direction: column; align-items: stretch; gap: 2px; }
  .h08-link { height: 48px; justify-content: space-between; font-size: 1rem; }
  .h08-item { border-bottom: 1px solid var(--h08-line-soft); }
  .h08-mega, .h08-drop { position: static; transform: none; width: auto; opacity: 1; visibility: visible; pointer-events: auto; border: 0; box-shadow: none; padding: 0; display: block; max-height: 0; overflow: hidden; transition: max-height 300ms var(--h08-ease); }
  .h08-item.is-open > .h08-mega, .h08-item.is-open > .h08-drop, .h08-drop__item--sub.is-open > .h08-drop--sub { max-height: 900px; }
  .h08-mega__cols { grid-template-columns: 1fr; }
  .h08-feature { display: none; }
}

@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; } }

/* ===== header-09 · .h09-header ===== */
/* ==========================================================================
   HEADER 09 — ANNOUNCEMENT BAR + NAV
   Self-contained. Tokens --h09-. Dismissible strip + docking sticky nav.
   ========================================================================== */
:root {
  --h09-ink:#0e1118; --h09-body:#454c5a; --h09-muted:#6b7280;
  --h09-line:#e8eaf0; --h09-line-soft:#f2f3f7; --h09-bg:#fff; --h09-hover:#f5f6f9;
  --h09-accent:#e8542a; --h09-accent-700:#c8421e; --h09-tint:#fdeee8;
  --h09-navy:#141a2a;
  --h09-shadow:0 1px 2px rgba(14,17,24,.05),0 16px 40px -16px rgba(14,17,24,.22);
  --h09-radius:12px; --h09-radius-sm:9px; --h09-ease:cubic-bezier(.4,0,.2,1); --h09-dur:180ms;
  --h09-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;}
.h09-header{font-family:var(--h09-font);color:var(--h09-ink);-webkit-font-smoothing:antialiased;}
.h09-container{max-width:1200px;margin:0 auto;padding:0 24px;}
.h09-skip{position:absolute;left:16px;top:-60px;z-index:1100;padding:10px 16px;border-radius:8px;background:var(--h09-ink);color:#fff;font-size:.875rem;text-decoration:none;transition:top var(--h09-dur) var(--h09-ease);} .h09-skip:focus{top:12px;}

.h09-header{position:sticky;top:0;z-index:1030;background:var(--h09-bg);}
/* Announce strip */
.h09-announce{background:var(--h09-navy);color:#c4ccdb;overflow:hidden;max-height:44px;transition:max-height var(--h09-dur) var(--h09-ease),opacity var(--h09-dur) var(--h09-ease);}
.h09-announce.is-hidden{max-height:0;opacity:0;}
.h09-announce__row{display:flex;align-items:center;justify-content:space-between;gap:16px;height:44px;font-size:.8125rem;}
.h09-announce a{color:#c4ccdb;text-decoration:none;} .h09-announce a:hover{color:#fff;}
.h09-announce__left{display:flex;gap:18px;} .h09-announce__left i{color:var(--h09-accent);margin-right:5px;}
.h09-announce__msg{margin:0;font-weight:500;color:#eef1f6;} .h09-announce__msg i{color:var(--h09-accent);margin-right:6px;} .h09-announce__msg a{color:#fff;text-decoration:underline;text-underline-offset:2px;}
.h09-announce__right{display:flex;align-items:center;gap:14px;}
.h09-social{display:flex;gap:12px;list-style:none;margin:0;padding:0;font-size:.95rem;}
.h09-announce__close{width:26px;height:26px;border:0;border-radius:6px;background:rgba(255,255,255,.08);color:#c4ccdb;cursor:pointer;font-size:.7rem;transition:background var(--h09-dur) var(--h09-ease);} .h09-announce__close:hover{background:rgba(255,255,255,.16);color:#fff;}

/* Main bar */
.h09-bar{border-bottom:1px solid var(--h09-line);background:var(--h09-bg);transition:box-shadow var(--h09-dur) var(--h09-ease);}
.h09-header.is-stuck .h09-bar{box-shadow:0 1px 0 var(--h09-line),0 6px 20px -14px rgba(14,17,24,.28);}
.h09-nav{display:flex;align-items:center;gap:34px;height:66px;}
.h09-brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--h09-ink);flex:0 0 auto;}
.h09-brand__mark{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--h09-accent);color:#fff;font-size:.85rem;}
.h09-brand__name{font-size:1.2rem;font-weight:700;letter-spacing:-.02em;}
.h09-collapse{flex:1 1 auto;}
.h09-menu{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;}
.h09-item{position:relative;}
.h09-link{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 14px;border:0;background:none;cursor:pointer;font:inherit;font-size:.9375rem;font-weight:500;color:var(--h09-body);text-decoration:none;border-radius:var(--h09-radius-sm);transition:color var(--h09-dur) var(--h09-ease),background var(--h09-dur) var(--h09-ease);}
.h09-link:hover{color:var(--h09-ink);background:var(--h09-hover);}
.h09-chevron{opacity:.55;transition:transform var(--h09-dur) var(--h09-ease);}
.h09-item.is-open>.h09-trigger{color:var(--h09-ink);background:var(--h09-hover);} .h09-item.is-open>.h09-trigger .h09-chevron{transform:rotate(180deg);}
:where(.h09-link,.h09-drop__link,.h09-cta,.h09-signin,.h09-burger,.h09-mlink,.h09-promo):focus-visible{outline:2px solid var(--h09-accent);outline-offset:2px;}

.h09-mega,.h09-drop{position:absolute;top:calc(100% + 10px);left:0;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity var(--h09-dur) var(--h09-ease),transform var(--h09-dur) var(--h09-ease),visibility var(--h09-dur) var(--h09-ease);pointer-events:none;}
.h09-item.is-open>.h09-mega,.h09-item.is-open>.h09-drop{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
.h09-mega{width:660px;background:var(--h09-bg);border:1px solid var(--h09-line);border-radius:var(--h09-radius);box-shadow:var(--h09-shadow);padding:20px;display:grid;grid-template-columns:1.5fr 1fr;gap:18px;}
.h09-mega__cols{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.h09-mega__label{margin:0 0 10px;font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--h09-muted);}
.h09-mlink{display:flex;align-items:flex-start;gap:11px;padding:9px 8px;border-radius:var(--h09-radius-sm);text-decoration:none;color:var(--h09-ink);transition:background var(--h09-dur) var(--h09-ease);}
.h09-mlink:hover{background:var(--h09-hover);}
.h09-mlink__ic{flex:0 0 auto;display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--h09-tint);color:var(--h09-accent);}
.h09-mlink span span{font-size:.78rem;color:var(--h09-muted);} .h09-mlink strong{display:block;font-size:.875rem;font-weight:600;}
.h09-promo{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:var(--h09-radius);background:var(--h09-navy);color:#fff;text-decoration:none;}
.h09-promo__tag{align-self:flex-start;font-size:.6875rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--h09-accent);}
.h09-promo__title{font-size:1rem;font-weight:700;margin-top:6px;} .h09-promo__cta{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:600;color:#fff;}
.h09-promo__cta i{transition:transform var(--h09-dur) var(--h09-ease);} .h09-promo:hover .h09-promo__cta i{transform:translateX(3px);}

.h09-drop{min-width:220px;list-style:none;margin:0;padding:6px;background:var(--h09-bg);border:1px solid var(--h09-line);border-radius:var(--h09-radius);box-shadow:var(--h09-shadow);}
.h09-drop__item{position:relative;}
.h09-drop__link{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:9px 12px;border:0;background:none;cursor:pointer;font:inherit;font-size:.875rem;font-weight:500;text-align:left;color:var(--h09-body);text-decoration:none;border-radius:var(--h09-radius-sm);transition:color var(--h09-dur) var(--h09-ease),background var(--h09-dur) var(--h09-ease);}
.h09-drop__link:hover{color:var(--h09-ink);background:var(--h09-hover);}
.h09-drop__caret{font-size:.7rem;opacity:.5;}
.h09-drop--sub{top:-7px;left:calc(100% + 6px);}
.h09-drop__item--sub.is-open>.h09-drop--sub{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}

.h09-actions{display:flex;align-items:center;gap:10px;margin-left:auto;flex:0 0 auto;}
.h09-signin{font-size:.9375rem;font-weight:500;color:var(--h09-body);text-decoration:none;padding:0 8px;} .h09-signin:hover{color:var(--h09-ink);}
.h09-cta{display:inline-flex;align-items:center;height:40px;padding:0 18px;font-size:.9375rem;font-weight:600;color:#fff;text-decoration:none;background:var(--h09-accent);border-radius:var(--h09-radius-sm);transition:background var(--h09-dur) var(--h09-ease);} .h09-cta:hover{background:var(--h09-accent-700);}
.h09-burger{display:none;position:relative;width:40px;height:40px;padding:0;border:1px solid var(--h09-line);border-radius:var(--h09-radius-sm);background:#fff;cursor:pointer;}
.h09-burger span{position:absolute;left:11px;width:18px;height:1.8px;border-radius:2px;background:var(--h09-ink);transition:transform var(--h09-dur) var(--h09-ease);} .h09-burger span:nth-child(1){top:16px;} .h09-burger span:nth-child(2){bottom:16px;}
.h09-burger[aria-expanded="true"] span:nth-child(1){top:19px;transform:rotate(45deg);} .h09-burger[aria-expanded="true"] span:nth-child(2){bottom:19px;transform:rotate(-45deg);}
.h09-scrim{position:fixed;inset:0;z-index:1029;background:rgba(14,17,24,.34);opacity:0;transition:opacity var(--h09-dur) var(--h09-ease);} .h09-scrim.is-shown{opacity:1;}

@media (max-width:991.98px){
  .h09-burger{display:block;} .h09-signin,.h09-actions>.h09-cta{display:none;}
  .h09-announce__left,.h09-social{display:none;} .h09-announce__row{justify-content:space-between;}
  .h09-collapse{position:fixed;top:0;right:0;z-index:1031;width:min(390px,90vw);height:100dvh;background:#fff;box-shadow:-24px 0 60px -30px rgba(14,17,24,.3);padding:84px 16px 24px;overflow-y:auto;transform:translateX(100%);transition:transform 320ms var(--h09-ease);}
  .h09-collapse.is-open{transform:translateX(0);}
  .h09-menu{flex-direction:column;align-items:stretch;gap:2px;} .h09-link{height:48px;justify-content:space-between;font-size:1rem;} .h09-item{border-bottom:1px solid var(--h09-line-soft);}
  .h09-mega,.h09-drop{position:static;width:auto;opacity:1;visibility:visible;transform:none;pointer-events:auto;border:0;box-shadow:none;padding:0;display:block;max-height:0;overflow:hidden;transition:max-height 300ms var(--h09-ease);}
  .h09-item.is-open>.h09-mega,.h09-item.is-open>.h09-drop,.h09-drop__item--sub.is-open>.h09-drop--sub{max-height:800px;}
  .h09-mega__cols{grid-template-columns:1fr;} .h09-promo{display:none;}
  .h09-collapse::after{content:"Get started";display:block;text-align:center;margin-top:18px;padding:13px;border-radius:var(--h09-radius-sm);background:var(--h09-accent);color:#fff;font-weight:600;}
}
@media (min-width:992px){.h09-scrim{display:none;}}

@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important;}}

/* ===== header-10 · .h10-header ===== */
/* ==========================================================================
   HEADER 10 — DARK PREMIUM (REFINED)
   Self-contained. Tokens namespaced --h10-. 8px spacing rhythm.
   Palette: deep charcoal ink + hairline whites + ONE restrained violet accent.
   Motion: <200ms, cubic-bezier(.4,0,.2,1). Soft depth, no glow, no neon.
   ========================================================================== */

:root {
  /* Dark surfaces */
  --h10-bg: #0c0d10;          /* page */
  --h10-surface: #131418;     /* bar */
  --h10-surface-2: #17181d;   /* panels */
  --h10-raised: #1d1f26;      /* hover fill */
  --h10-tint: #1a1b21;        /* tile rest */

  /* Hairlines — light catching an edge */
  --h10-line: rgba(255, 255, 255, .08);
  --h10-line-2: rgba(255, 255, 255, .06);
  --h10-line-strong: rgba(255, 255, 255, .14);

  /* Text */
  --h10-fg: #f4f5f7;          /* primary */
  --h10-fg-2: #a7abb5;        /* nav resting */
  --h10-muted: #7b808c;       /* secondary */

  /* Single restrained accent */
  --h10-accent: #8b82ff;
  --h10-accent-600: #7b71f7;
  --h10-accent-tint: rgba(139, 130, 255, .14);

  /* Elevation — soft, diffuse, no glow */
  --h10-shadow: 0 1px 0 rgba(255,255,255,.03), 0 20px 44px -20px rgba(0, 0, 0, .8);
  --h10-shadow-bar: 0 1px 0 rgba(0, 0, 0, .5);

  /* System */
  --h10-radius: 14px;
  --h10-radius-sm: 10px;
  --h10-ease: cubic-bezier(.4, 0, .2, 1);
  --h10-dur: 180ms;
  --h10-h: 68px;
  --h10-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
.h10-header { font-family: var(--h10-font); }

/* Accessible skip link */
.h10-skip {
  position: absolute; left: 16px; top: -60px; z-index: 1100;
  padding: 10px 16px; border-radius: 8px; background: var(--h10-accent); color: #fff;
  font-size: .875rem; font-weight: 600; text-decoration: none;
  transition: top var(--h10-dur) var(--h10-ease);
}
.h10-skip:focus { top: 12px; }

/* ==========================================================================
   HEADER SHELL
   ========================================================================== */
.h10-header {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(19, 20, 24, .72);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--h10-dur) var(--h10-ease), box-shadow var(--h10-dur) var(--h10-ease), background var(--h10-dur) var(--h10-ease);
}
/* Hairline settles in on scroll — quiet, not theatrical */
.h10-header.is-stuck {
  background: rgba(19, 20, 24, .9);
  border-bottom-color: var(--h10-line);
  box-shadow: var(--h10-shadow-bar);
}

.h10-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.h10-nav { display: flex; align-items: center; gap: 40px; height: var(--h10-h); }

/* --- Brand ------------------------------------------------------------- */
.h10-brand {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--h10-fg); flex: 0 0 auto;
}
.h10-brand__logo { color: var(--h10-accent); display: block; }
.h10-brand__name { font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; }

/* ==========================================================================
   PRIMARY MENU
   ========================================================================== */
.h10-collapse { flex: 1 1 auto; }
.h10-menu {
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: 0;
}
.h10-item { position: relative; }

.h10-link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 12px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .9375rem; font-weight: 500;
  color: var(--h10-fg-2); text-decoration: none;
  border-radius: var(--h10-radius-sm);
  transition: color var(--h10-dur) var(--h10-ease), background var(--h10-dur) var(--h10-ease);
}
.h10-link:hover { color: var(--h10-fg); background: var(--h10-raised); }
.h10-chevron { color: currentColor; opacity: .5; transition: transform var(--h10-dur) var(--h10-ease); }
.h10-item.is-open > .h10-trigger { color: var(--h10-fg); background: var(--h10-raised); }
.h10-item.is-open > .h10-trigger .h10-chevron { transform: rotate(180deg); }

/* Keyboard focus */
:where(.h10-link, .h10-drop__link, .h10-cta, .h10-signin, .h10-burger, .h10-tile, .h10-feat):focus-visible {
  outline: 2px solid var(--h10-accent); outline-offset: 2px;
}

/* ==========================================================================
   MEGA MENU — dark panel: icon-tile grid + one featured card
   ========================================================================== */
.h10-mega, .h10-drop {
  position: absolute; top: calc(100% + 10px); left: 0;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--h10-dur) var(--h10-ease), transform var(--h10-dur) var(--h10-ease), visibility var(--h10-dur) var(--h10-ease);
  pointer-events: none;
}
.h10-item.is-open > .h10-mega, .h10-item.is-open > .h10-drop {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

.h10-mega {
  display: grid; grid-template-columns: 1.6fr .95fr; gap: 16px;
  width: 760px;
  background: var(--h10-surface-2);
  border: 1px solid var(--h10-line);
  border-radius: var(--h10-radius);
  box-shadow: var(--h10-shadow);
  padding: 16px;
}
.h10-mega__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
}
.h10-tile {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 12px; border-radius: var(--h10-radius-sm);
  text-decoration: none; color: var(--h10-fg);
  border: 1px solid transparent;
  transition: background var(--h10-dur) var(--h10-ease), border-color var(--h10-dur) var(--h10-ease);
}
.h10-tile:hover { background: var(--h10-raised); border-color: var(--h10-line-2); }
.h10-tile__ic {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--h10-accent-tint); color: var(--h10-accent); font-size: 1rem;
}
.h10-tile__text { display: flex; flex-direction: column; gap: 2px; }
.h10-tile__text strong { font-size: .875rem; font-weight: 600; line-height: 1.3; }
.h10-tile__text span { font-size: .8125rem; color: var(--h10-muted); line-height: 1.4; }

/* Featured card — soft depth, no gradient theatrics */
.h10-feat {
  display: flex; flex-direction: column; gap: 7px;
  padding: 18px; border-radius: var(--h10-radius);
  background: var(--h10-tint);
  border: 1px solid var(--h10-line-2);
  text-decoration: none; color: var(--h10-fg);
  transition: border-color var(--h10-dur) var(--h10-ease), background var(--h10-dur) var(--h10-ease);
}
.h10-feat:hover { border-color: var(--h10-line-strong); background: var(--h10-raised); }
.h10-feat__tag {
  align-self: flex-start; font-size: .6875rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: var(--h10-accent-tint); color: var(--h10-accent);
}
.h10-feat__title { font-size: 1rem; font-weight: 600; line-height: 1.3; margin-top: 4px; letter-spacing: -.01em; }
.h10-feat__desc { font-size: .8125rem; color: var(--h10-muted); line-height: 1.5; }
.h10-feat__cta {
  margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: .8125rem; font-weight: 600; color: var(--h10-accent);
}
.h10-feat__cta i { transition: transform var(--h10-dur) var(--h10-ease); }
.h10-feat:hover .h10-feat__cta i { transform: translateX(3px); }

/* ==========================================================================
   DROPDOWN + NESTED
   ========================================================================== */
.h10-drop {
  min-width: 224px; list-style: none; margin: 0; padding: 6px;
  background: var(--h10-surface-2); border: 1px solid var(--h10-line);
  border-radius: var(--h10-radius); box-shadow: var(--h10-shadow);
}
.h10-drop__item { position: relative; }
.h10-drop__link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 9px 12px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .875rem; font-weight: 500; text-align: left;
  color: var(--h10-fg-2); text-decoration: none; border-radius: var(--h10-radius-sm);
  transition: color var(--h10-dur) var(--h10-ease), background var(--h10-dur) var(--h10-ease);
}
.h10-drop__link:hover { color: var(--h10-fg); background: var(--h10-raised); }
.h10-drop__caret { font-size: .7rem; opacity: .5; }
.h10-drop--sub { top: -7px; left: calc(100% + 6px); }
.h10-drop__item--sub.is-open > .h10-drop--sub {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

/* ==========================================================================
   ACTIONS
   ========================================================================== */
.h10-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }
.h10-signin {
  padding: 0 12px; height: 38px; display: inline-flex; align-items: center;
  font-size: .9375rem; font-weight: 500; color: var(--h10-fg-2); text-decoration: none;
  border-radius: var(--h10-radius-sm);
  transition: color var(--h10-dur) var(--h10-ease), background var(--h10-dur) var(--h10-ease);
}
.h10-signin:hover { color: var(--h10-fg); background: var(--h10-raised); }
.h10-cta {
  display: inline-flex; align-items: center; height: 38px; padding: 0 18px;
  font-size: .9375rem; font-weight: 600; color: #fff; text-decoration: none;
  background: var(--h10-accent); border-radius: var(--h10-radius-sm);
  border: 1px solid rgba(255,255,255,.14);
  transition: background var(--h10-dur) var(--h10-ease), transform var(--h10-dur) var(--h10-ease);
}
.h10-cta:hover { background: var(--h10-accent-600); }
.h10-cta:active { transform: translateY(1px); }

/* --- Hamburger (two-line, morphs to X) --------------------------------- */
.h10-burger {
  display: none; position: relative; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--h10-line-strong); border-radius: var(--h10-radius-sm);
  background: var(--h10-raised); cursor: pointer;
}
.h10-burger span {
  position: absolute; left: 11px; width: 18px; height: 1.8px; border-radius: 2px;
  background: var(--h10-fg);
  transition: transform var(--h10-dur) var(--h10-ease), opacity var(--h10-dur) var(--h10-ease);
}
.h10-burger span:nth-child(1) { top: 16px; }
.h10-burger span:nth-child(2) { bottom: 16px; }
.h10-burger[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.h10-burger[aria-expanded="true"] span:nth-child(2) { bottom: 19px; transform: rotate(-45deg); }

/* Mobile scrim */
.h10-scrim {
  position: fixed; inset: 0; z-index: 1029;
  background: rgba(0, 0, 0, .55); opacity: 0;
  transition: opacity var(--h10-dur) var(--h10-ease);
}
.h10-scrim.is-shown { opacity: 1; }

/* Mobile CTA row lives only inside the drawer */
.h10-mobile-cta { display: none; }

/* ==========================================================================
   RESPONSIVE — dark slide-in drawer (redesigned, not shrunk)
   ========================================================================== */
@media (max-width: 991.98px) {
  .h10-nav { gap: 0; }
  .h10-burger { display: block; }
  .h10-signin, .h10-cta { display: none; }
  .h10-actions { margin-left: auto; }

  .h10-collapse {
    position: fixed; top: 0; right: 0; z-index: 1031;
    width: min(400px, 88vw); height: 100dvh;
    background: var(--h10-surface);
    border-left: 1px solid var(--h10-line);
    box-shadow: -30px 0 70px -30px rgba(0, 0, 0, .8);
    padding: 84px 16px 24px; overflow-y: auto;
    transform: translateX(100%);
    transition: transform 320ms var(--h10-ease);
  }
  .h10-collapse.is-open { transform: translateX(0); }

  .h10-menu { flex-direction: column; align-items: stretch; gap: 2px; }
  .h10-link { height: 50px; width: 100%; justify-content: space-between; font-size: 1rem; padding: 0 14px; }
  .h10-item { border-bottom: 1px solid var(--h10-line-2); }
  .h10-item:last-child { border-bottom: 0; }

  /* Mega + dropdowns become inline accordions */
  .h10-mega, .h10-drop {
    position: static; width: auto; opacity: 1; visibility: visible; transform: none;
    pointer-events: auto; border: 0; box-shadow: none; padding: 0; background: none;
    display: block;
    max-height: 0; overflow: hidden;
    transition: max-height 300ms var(--h10-ease);
  }
  .h10-item.is-open > .h10-mega,
  .h10-item.is-open > .h10-drop,
  .h10-drop__item--sub.is-open > .h10-drop--sub { max-height: 900px; }

  .h10-mega { padding: 0 0 8px; }
  .h10-mega__grid { grid-template-columns: 1fr; gap: 0; }
  .h10-feat { display: none; }
  .h10-drop--sub { padding-left: 14px; }

  /* Drawer CTA row */
  .h10-mobile-cta {
    display: flex; flex-direction: column; gap: 8px; margin-top: 20px;
    padding-top: 20px; border-top: 1px solid var(--h10-line);
  }
  .h10-mobile-cta .h10-cta,
  .h10-mobile-cta .h10-signin {
    display: inline-flex; width: 100%; justify-content: center; height: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ===== header-07 · .h07-header ===== */
/* ==========================================================================
   HEADER 07 — SPLIT NAVIGATION
   Self-contained. Tokens namespaced --h07-. 8px spacing rhythm.
   Palette: near-monochrome slate + one restrained teal accent.
   Motion: <200ms, cubic-bezier(.4,0,.2,1). No gimmicks.
   Geometry: three-column grid — left group | centred brand | right group.
   ========================================================================== */

:root {
  --h07-ink: #0c1116;
  --h07-body: #48505b;
  --h07-muted: #6c7480;
  --h07-line: #e8eaee;
  --h07-line-soft: #f2f4f6;
  --h07-bg: #ffffff;
  --h07-hover: #f4f6f7;

  /* Single accent */
  --h07-accent: #0d9488;
  --h07-accent-700: #0b7f75;
  --h07-accent-tint: #e5f6f4;

  --h07-shadow-pop: 0 1px 2px rgba(12, 17, 22, .04), 0 16px 40px -14px rgba(12, 17, 22, .18);
  --h07-shadow-bar: 0 1px 0 rgba(12, 17, 22, .06);

  --h07-radius: 12px;
  --h07-radius-sm: 9px;
  --h07-ease: cubic-bezier(.4, 0, .2, 1);
  --h07-dur: 180ms;
  --h07-h: 72px;
  --h07-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
.h07-header { font-family: var(--h07-font); }

.h07-skip {
  position: absolute; left: 16px; top: -60px; z-index: 1100;
  padding: 10px 16px; border-radius: 8px; background: var(--h07-ink); color: #fff;
  font-size: .875rem; font-weight: 500; text-decoration: none;
  transition: top var(--h07-dur) var(--h07-ease);
}
.h07-skip:focus { top: 12px; }

/* ==========================================================================
   HEADER SHELL
   ========================================================================== */
.h07-header {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--h07-dur) var(--h07-ease), box-shadow var(--h07-dur) var(--h07-ease), background var(--h07-dur) var(--h07-ease);
}
.h07-header.is-stuck {
  background: rgba(255, 255, 255, .93);
  border-bottom-color: var(--h07-line);
  box-shadow: var(--h07-shadow-bar);
}

.h07-container { max-width: 1240px; margin: 0 auto; padding: 0 28px; }

/* The defining geometry: symmetric 3-column grid */
.h07-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--h07-h);
  gap: 24px;
}
.h07-group { display: flex; align-items: center; }
.h07-group--left { justify-self: start; }
.h07-group--right { justify-self: end; gap: 18px; }

/* --- Brand (centred) --------------------------------------------------- */
.h07-brand {
  display: inline-flex; align-items: center; gap: 9px;
  justify-self: center; text-decoration: none; color: var(--h07-ink);
}
.h07-brand__logo { color: var(--h07-accent); display: block; }
.h07-brand__name { font-size: 1.1875rem; font-weight: 700; letter-spacing: -.02em; }

/* ==========================================================================
   MENU
   ========================================================================== */
.h07-menu {
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: 0;
}
.h07-item { position: relative; }
.h07-link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 13px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .9375rem; font-weight: 500;
  color: var(--h07-body); text-decoration: none;
  border-radius: var(--h07-radius-sm);
  transition: color var(--h07-dur) var(--h07-ease), background var(--h07-dur) var(--h07-ease);
}
.h07-link:hover { color: var(--h07-ink); background: var(--h07-hover); }
.h07-chevron { color: currentColor; opacity: .5; transition: transform var(--h07-dur) var(--h07-ease); }
.h07-item.is-open > .h07-trigger { color: var(--h07-ink); background: var(--h07-hover); }
.h07-item.is-open > .h07-trigger .h07-chevron { transform: rotate(180deg); }

:where(.h07-link, .h07-drop__link, .h07-cta, .h07-burger, .h07-mega__link, .h07-mega__feature, .h07-drawer__trigger, .h07-drawer__link):focus-visible {
  outline: 2px solid var(--h07-accent); outline-offset: 2px;
}

/* ==========================================================================
   MEGA MENU (left group) — aligned to start of nav
   ========================================================================== */
.h07-mega, .h07-drop {
  position: absolute; top: calc(100% + 10px);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--h07-dur) var(--h07-ease), transform var(--h07-dur) var(--h07-ease), visibility var(--h07-dur) var(--h07-ease);
  pointer-events: none;
}
.h07-item.is-open > .h07-mega, .h07-item.is-open > .h07-drop {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

.h07-mega {
  left: 0; width: 660px;
  display: grid; grid-template-columns: 1fr auto; gap: 20px;
  background: var(--h07-bg); border: 1px solid var(--h07-line);
  border-radius: var(--h07-radius); box-shadow: var(--h07-shadow-pop);
  padding: 22px;
}
.h07-mega__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.h07-mega__col { padding-right: 8px; }
.h07-mega__label {
  margin: 4px 8px 8px; font-size: .6875rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--h07-muted);
}
.h07-mega__link {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 9px 8px; border-radius: var(--h07-radius-sm);
  text-decoration: none; color: var(--h07-ink);
  transition: background var(--h07-dur) var(--h07-ease);
}
.h07-mega__link:hover { background: var(--h07-hover); }
.h07-mega__ic {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--h07-accent-tint); color: var(--h07-accent); font-size: .95rem;
}
.h07-mega__text { display: flex; flex-direction: column; gap: 2px; }
.h07-mega__text strong { font-size: .875rem; font-weight: 600; line-height: 1.3; }
.h07-mega__text span { font-size: .8125rem; color: var(--h07-muted); line-height: 1.4; }

/* Featured — subtle inked tile */
.h07-mega__feature {
  display: flex; flex-direction: column; gap: 8px; width: 190px;
  padding: 18px; border-radius: var(--h07-radius);
  background: var(--h07-ink); color: #fff; text-decoration: none;
  justify-content: flex-end;
  transition: transform var(--h07-dur) var(--h07-ease);
}
.h07-mega__feature:hover { transform: translateY(-2px); }
.h07-mega__feature-tag {
  align-self: flex-start; font-size: .625rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
  background: var(--h07-accent); color: #fff;
}
.h07-mega__feature-title { font-size: 1rem; font-weight: 600; line-height: 1.3; margin-top: auto; }
.h07-mega__feature-cta { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600; color: #b9f0ea; }

/* ==========================================================================
   DROPDOWN + NESTED (right group) — aligned to end
   ========================================================================== */
.h07-drop {
  right: 0; min-width: 220px; list-style: none; margin: 0; padding: 6px;
  background: var(--h07-bg); border: 1px solid var(--h07-line);
  border-radius: var(--h07-radius); box-shadow: var(--h07-shadow-pop);
}
.h07-drop__item { position: relative; }
.h07-drop__link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 9px 12px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .875rem; font-weight: 500; text-align: left;
  color: var(--h07-body); text-decoration: none; border-radius: var(--h07-radius-sm);
  transition: color var(--h07-dur) var(--h07-ease), background var(--h07-dur) var(--h07-ease);
}
.h07-drop__link:hover { color: var(--h07-ink); background: var(--h07-hover); }
.h07-drop__caret { font-size: .7rem; opacity: .5; }
/* Nested opens to the LEFT (right group sits near the edge) */
.h07-drop--sub { top: -7px; right: calc(100% + 6px); left: auto; }
.h07-drop__item--sub.is-open > .h07-drop--sub {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

/* ==========================================================================
   CTA + BURGER
   ========================================================================== */
.h07-cta {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px;
  font-size: .9375rem; font-weight: 600; color: #fff; text-decoration: none;
  background: var(--h07-accent); border-radius: var(--h07-radius-sm);
  transition: background var(--h07-dur) var(--h07-ease), transform var(--h07-dur) var(--h07-ease);
}
.h07-cta:hover { background: var(--h07-accent-700); }
.h07-cta:active { transform: translateY(1px); }

.h07-burger {
  display: none; position: relative; width: 42px; height: 42px; padding: 0;
  justify-self: end; grid-column: 3;
  border: 1px solid var(--h07-line); border-radius: var(--h07-radius-sm);
  background: #fff; cursor: pointer;
}
.h07-burger span {
  position: absolute; left: 12px; width: 18px; height: 1.8px; border-radius: 2px;
  background: var(--h07-ink);
  transition: transform var(--h07-dur) var(--h07-ease), opacity var(--h07-dur) var(--h07-ease);
}
.h07-burger span:nth-child(1) { top: 17px; }
.h07-burger span:nth-child(2) { bottom: 17px; }
.h07-burger[aria-expanded="true"] span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.h07-burger[aria-expanded="true"] span:nth-child(2) { bottom: 20px; transform: rotate(-45deg); }

/* ==========================================================================
   MOBILE DRAWER — both groups folded into one accordion
   ========================================================================== */
.h07-drawer {
  position: fixed; top: 0; right: 0; z-index: 1031;
  width: min(400px, 88vw); height: 100dvh;
  background: #fff; border-left: 1px solid var(--h07-line);
  box-shadow: -24px 0 60px -30px rgba(12, 17, 22, .3);
  padding: calc(var(--h07-h) + 12px) 16px 24px; overflow-y: auto;
  transform: translateX(100%);
  transition: transform 320ms var(--h07-ease);
  display: none;
}
.h07-drawer.is-open { transform: translateX(0); }
.h07-drawer__menu { list-style: none; margin: 0; padding: 0; }
.h07-drawer__menu > .h07-item { border-bottom: 1px solid var(--h07-line-soft); }
.h07-drawer__link, .h07-drawer__trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; height: 50px; padding: 0 8px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 1rem; font-weight: 500; text-align: left;
  color: var(--h07-ink); text-decoration: none;
}
.h07-drawer__trigger i { transition: transform var(--h07-dur) var(--h07-ease); opacity: .6; }
.h07-item.is-open > .h07-drawer__trigger i { transform: rotate(180deg); }
.h07-drawer__cta { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--h07-line); }
.h07-drawer__cta .h07-cta { width: 100%; justify-content: center; height: 50px; }

.h07-scrim {
  position: fixed; inset: 0; z-index: 1029;
  background: rgba(12, 17, 22, .32); opacity: 0;
  transition: opacity var(--h07-dur) var(--h07-ease);
}
.h07-scrim.is-shown { opacity: 1; }

/* ==========================================================================
   RESPONSIVE SWITCH
   ========================================================================== */
@media (max-width: 991.98px) {
  .h07-nav { grid-template-columns: auto 1fr auto; gap: 0; }
  .h07-group { display: none; }
  .h07-brand { justify-self: start; grid-column: 1; }
  .h07-burger { display: block; }
  .h07-drawer { display: block; }

  /* Inside drawer: mega + dropdowns become accordions */
  .h07-drawer .h07-mega, .h07-drawer .h07-drop {
    position: static; width: auto; opacity: 1; visibility: visible; transform: none;
    pointer-events: auto; border: 0; box-shadow: none; padding: 0; display: block;
    max-height: 0; overflow: hidden;
    transition: max-height 300ms var(--h07-ease);
  }
  .h07-drawer .h07-item.is-open > .h07-mega,
  .h07-drawer .h07-item.is-open > .h07-drop,
  .h07-drawer .h07-drop__item--sub.is-open > .h07-drop--sub { max-height: 720px; }
  .h07-drawer .h07-mega { padding: 0 0 10px; }
  .h07-drawer .h07-mega__cols { grid-template-columns: 1fr; gap: 0; }
  .h07-drawer .h07-drop { padding-left: 8px; }
  .h07-drawer .h07-drop--sub { padding-left: 14px; }
  .h07-drawer .h07-drop__link { font-size: .9375rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ===== header-13 · .h13-header ===== */
/* ==========================================================================
   HEADER 13 — FLUENT / ACRYLIC
   Self-contained. Tokens --h13-. Acrylic surfaces + cursor reveal highlight.
   ========================================================================== */
:root{
  --h13-ink:#1b1a19; --h13-body:#484644; --h13-muted:#6e6c6a;
  --h13-line:#e6e6e6; --h13-line-soft:#f2f2f2; --h13-bg:#ffffff; --h13-hover:#f4f4f6;
  --h13-accent:#0f6cbd; --h13-accent-700:#0c5a9e; --h13-tint:#e9f2fb;
  --h13-shadow:0 1px 2px rgba(0,0,0,.06),0 16px 40px -14px rgba(0,0,0,.22);
  --h13-radius:8px; --h13-radius-sm:6px; --h13-ease:cubic-bezier(.33,0,.1,1); --h13-dur:170ms;
  --h13-font:"Inter","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
}
*{box-sizing:border-box;} .h13-header { font-family: var(--h13-font); }
.h13-container{max-width:1200px;margin:0 auto;padding:0 24px;}
.h13-skip{position:absolute;left:16px;top:-60px;z-index:1100;padding:10px 16px;border-radius:6px;background:var(--h13-ink);color:#fff;font-size:.875rem;text-decoration:none;transition:top var(--h13-dur) var(--h13-ease);} .h13-skip:focus{top:12px;}

.h13-header{position:sticky;top:0;z-index:1030;background:rgba(255,255,255,.72);backdrop-filter:saturate(150%) blur(20px);-webkit-backdrop-filter:saturate(150%) blur(20px);border-bottom:1px solid rgba(0,0,0,.06);}
.h13-header.is-stuck{background:rgba(255,255,255,.9);box-shadow:0 2px 10px -6px rgba(0,0,0,.25);}
.h13-nav{display:flex;align-items:center;gap:32px;height:64px;}
.h13-brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--h13-ink);flex:0 0 auto;}
.h13-brand__mark{color:var(--h13-accent);font-size:1.25rem;display:grid;place-items:center;}
.h13-brand__name{font-size:1.15rem;font-weight:600;letter-spacing:-.01em;}

.h13-collapse{flex:1 1 auto;}
.h13-menu{position:relative;display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;}
/* Reveal highlight that follows the cursor */
.h13-menu[data-h13-reveal]::before{content:"";position:absolute;top:50%;left:var(--rx,50%);width:120px;height:80px;transform:translate(-50%,-50%);border-radius:12px;background:radial-gradient(circle,rgba(15,108,189,.10),transparent 70%);opacity:0;transition:opacity var(--h13-dur) var(--h13-ease);pointer-events:none;}
.h13-menu[data-h13-reveal].is-revealing::before{opacity:1;}
.h13-item{position:relative;z-index:1;}
.h13-link{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border:0;background:none;cursor:pointer;font:inherit;font-size:.9rem;font-weight:500;color:var(--h13-body);text-decoration:none;border-radius:var(--h13-radius-sm);transition:color var(--h13-dur) var(--h13-ease),background var(--h13-dur) var(--h13-ease);}
.h13-link:hover{color:var(--h13-ink);background:var(--h13-hover);}
.h13-chevron{opacity:.55;transition:transform var(--h13-dur) var(--h13-ease);}
.h13-item.is-open>.h13-trigger{color:var(--h13-accent);background:var(--h13-tint);} .h13-item.is-open>.h13-trigger .h13-chevron{transform:rotate(180deg);}
:where(.h13-link,.h13-drop__link,.h13-cta,.h13-signin,.h13-burger,.h13-app):focus-visible{outline:2px solid var(--h13-accent);outline-offset:2px;}

.h13-mega,.h13-drop{position:absolute;top:calc(100% + 8px);left:0;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity var(--h13-dur) var(--h13-ease),transform var(--h13-dur) var(--h13-ease),visibility var(--h13-dur) var(--h13-ease);pointer-events:none;}
.h13-item.is-open>.h13-mega,.h13-item.is-open>.h13-drop{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
.h13-mega{width:420px;background:rgba(255,255,255,.94);backdrop-filter:blur(20px);border:1px solid var(--h13-line);border-radius:var(--h13-radius);box-shadow:var(--h13-shadow);padding:16px;}
.h13-mega__label{margin:0 0 12px;font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--h13-muted);}
.h13-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;}
.h13-app{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 6px;border-radius:var(--h13-radius-sm);text-decoration:none;font-size:.75rem;font-weight:500;color:var(--h13-body);transition:background var(--h13-dur) var(--h13-ease);}
.h13-app:hover{background:var(--h13-hover);color:var(--h13-ink);}
.h13-app__ic{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--c);font-size:1.2rem;}
.h13-mega__foot{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:8px 6px;font-size:.8125rem;font-weight:600;color:var(--h13-accent);text-decoration:none;} .h13-mega__foot i{transition:transform var(--h13-dur) var(--h13-ease);} .h13-mega__foot:hover i{transform:translateX(3px);}

.h13-drop{min-width:220px;list-style:none;margin:0;padding:6px;background:rgba(255,255,255,.94);backdrop-filter:blur(20px);border:1px solid var(--h13-line);border-radius:var(--h13-radius);box-shadow:var(--h13-shadow);}
.h13-drop__item{position:relative;}
.h13-drop__link{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:0;background:none;cursor:pointer;font:inherit;font-size:.875rem;font-weight:500;text-align:left;color:var(--h13-body);text-decoration:none;border-radius:var(--h13-radius-sm);transition:color var(--h13-dur) var(--h13-ease),background var(--h13-dur) var(--h13-ease);}
.h13-drop__link>i:first-child{color:var(--h13-accent);} .h13-drop__link:hover{color:var(--h13-ink);background:var(--h13-hover);}
.h13-drop__caret{margin-left:auto;font-size:.7rem;opacity:.5;}
.h13-drop--sub{top:-7px;left:calc(100% + 6px);} .h13-drop__item--sub.is-open>.h13-drop--sub{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}

.h13-actions{display:flex;align-items:center;gap:10px;margin-left:auto;flex:0 0 auto;}
.h13-signin{font-size:.9rem;font-weight:500;color:var(--h13-body);text-decoration:none;padding:0 8px;} .h13-signin:hover{color:var(--h13-ink);}
.h13-cta{display:inline-flex;align-items:center;height:38px;padding:0 18px;font-size:.9rem;font-weight:600;color:#fff;text-decoration:none;background:var(--h13-accent);border-radius:var(--h13-radius-sm);transition:background var(--h13-dur) var(--h13-ease);} .h13-cta:hover{background:var(--h13-accent-700);}
.h13-burger{display:none;position:relative;width:38px;height:38px;padding:0;border:1px solid var(--h13-line);border-radius:var(--h13-radius-sm);background:#fff;cursor:pointer;}
.h13-burger span{position:absolute;left:10px;width:18px;height:1.8px;border-radius:2px;background:var(--h13-ink);transition:transform var(--h13-dur) var(--h13-ease);} .h13-burger span:nth-child(1){top:15px;} .h13-burger span:nth-child(2){bottom:15px;}
.h13-burger[aria-expanded="true"] span:nth-child(1){top:18px;transform:rotate(45deg);} .h13-burger[aria-expanded="true"] span:nth-child(2){bottom:18px;transform:rotate(-45deg);}
.h13-scrim{position:fixed;inset:0;z-index:1029;background:rgba(0,0,0,.3);opacity:0;transition:opacity var(--h13-dur) var(--h13-ease);} .h13-scrim.is-shown{opacity:1;}

@media (max-width:991.98px){
  .h13-burger{display:block;} .h13-signin,.h13-actions>.h13-cta{display:none;}
  .h13-menu[data-h13-reveal]::before{display:none;}
  .h13-collapse{position:fixed;top:0;right:0;z-index:1031;width:min(380px,90vw);height:100dvh;background:#fff;box-shadow:-24px 0 60px -30px rgba(0,0,0,.3);padding:80px 16px 24px;overflow-y:auto;transform:translateX(100%);transition:transform 320ms var(--h13-ease);}
  .h13-collapse.is-open{transform:translateX(0);}
  .h13-menu{flex-direction:column;align-items:stretch;gap:2px;} .h13-link{height:46px;justify-content:space-between;font-size:1rem;} .h13-item{border-bottom:1px solid var(--h13-line-soft);}
  .h13-mega,.h13-drop{position:static;width:auto;opacity:1;visibility:visible;transform:none;pointer-events:auto;border:0;box-shadow:none;background:transparent;padding:0;max-height:0;overflow:hidden;transition:max-height 300ms var(--h13-ease);}
  .h13-item.is-open>.h13-mega,.h13-item.is-open>.h13-drop,.h13-drop__item--sub.is-open>.h13-drop--sub{max-height:600px;}
  .h13-drop--sub{padding-left:14px;}
  .h13-collapse::after{content:"Get Fluenta";display:block;text-align:center;margin-top:18px;padding:13px;border-radius:var(--h13-radius-sm);background:var(--h13-accent);color:#fff;font-weight:600;}
}
@media (min-width:992px){.h13-scrim{display:none;}}

@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important;}}

/* ===== header-11 · .h11-bar ===== */
/* ==========================================================================
   HEADER 11 — SIDEBAR / OFF-CANVAS VERTICAL NAV
   Self-contained. Tokens namespaced --h11-. 8px spacing rhythm.
   Palette: near-monochrome ink + ONE restrained emerald accent.
   Motion: <200ms, cubic-bezier(.4,0,.2,1). Spacious, quiet, vertical-first.
   ========================================================================== */

:root {
  /* Ink / neutrals */
  --h11-ink: #0d1015;
  --h11-body: #454b57;
  --h11-muted: #6b7280;
  --h11-line: #e9eaef;
  --h11-line-soft: #f1f2f6;
  --h11-bg: #ffffff;
  --h11-hover: #f5f7f6;

  /* Single restrained accent — emerald */
  --h11-accent: #0f9d76;
  --h11-accent-700: #0c8062;
  --h11-accent-tint: #e6f5f0;

  /* Elevation */
  --h11-shadow-panel: 0 0 0 1px rgba(13,16,21,.03), 30px 0 80px -30px rgba(13, 16, 21, .35);
  --h11-shadow-bar: 0 1px 0 rgba(13, 16, 21, .06);

  /* System */
  --h11-radius: 12px;
  --h11-radius-sm: 9px;
  --h11-ease: cubic-bezier(.4, 0, .2, 1);
  --h11-dur: 180ms;
  --h11-h: 60px;
  --h11-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
.h11-bar { font-family: var(--h11-font); }

/* Accessible skip link */
.h11-skip {
  position: absolute; left: 16px; top: -60px; z-index: 1100;
  padding: 10px 16px; border-radius: 8px; background: var(--h11-ink); color: #fff;
  font-size: .875rem; font-weight: 500; text-decoration: none;
  transition: top var(--h11-dur) var(--h11-ease);
}
.h11-skip:focus { top: 12px; }

/* ==========================================================================
   SLIM TOP BAR
   ========================================================================== */
.h11-bar {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--h11-dur) var(--h11-ease), box-shadow var(--h11-dur) var(--h11-ease), background var(--h11-dur) var(--h11-ease);
}
.h11-bar.is-stuck {
  background: rgba(255, 255, 255, .93);
  border-bottom-color: var(--h11-line);
  box-shadow: var(--h11-shadow-bar);
}
.h11-bar__inner {
  max-width: 1200px; margin: 0 auto; padding: 0 20px;
  height: var(--h11-h); display: flex; align-items: center; gap: 16px;
}

/* Menu toggle — three lines that morph to an X */
.h11-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 12px 0 10px;
  border: 1px solid var(--h11-line); border-radius: var(--h11-radius-sm);
  background: #fff; cursor: pointer; color: var(--h11-ink);
  font-family: inherit; font-size: .875rem; font-weight: 600;
  transition: background var(--h11-dur) var(--h11-ease), border-color var(--h11-dur) var(--h11-ease);
}
.h11-toggle:hover { background: var(--h11-hover); border-color: #dcdee6; }
.h11-toggle__box { position: relative; width: 16px; height: 12px; }
.h11-toggle__box span {
  position: absolute; left: 0; width: 16px; height: 1.8px; border-radius: 2px;
  background: currentColor;
  transition: transform var(--h11-dur) var(--h11-ease), opacity var(--h11-dur) var(--h11-ease);
}
.h11-toggle__box span:nth-child(1) { top: 0; }
.h11-toggle__box span:nth-child(2) { top: 5px; }
.h11-toggle__box span:nth-child(3) { top: 10px; }
.h11-toggle[aria-expanded="true"] .h11-toggle__box span:nth-child(1) { top: 5px; transform: rotate(45deg); }
.h11-toggle[aria-expanded="true"] .h11-toggle__box span:nth-child(2) { opacity: 0; }
.h11-toggle[aria-expanded="true"] .h11-toggle__box span:nth-child(3) { top: 5px; transform: rotate(-45deg); }
.h11-toggle__label { line-height: 1; }

/* Brand */
.h11-brand {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--h11-ink);
}
.h11-brand__logo { color: var(--h11-accent); display: block; }
.h11-brand__name { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; }

.h11-bar__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Sign in / CTA (shared) */
.h11-signin {
  padding: 0 12px; height: 40px; display: inline-flex; align-items: center;
  font-size: .9375rem; font-weight: 500; color: var(--h11-body); text-decoration: none;
  border-radius: var(--h11-radius-sm);
  transition: color var(--h11-dur) var(--h11-ease), background var(--h11-dur) var(--h11-ease);
}
.h11-signin:hover { color: var(--h11-ink); background: var(--h11-hover); }
.h11-cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 18px;
  font-size: .9375rem; font-weight: 600; color: #fff; text-decoration: none;
  background: var(--h11-accent); border-radius: var(--h11-radius-sm);
  transition: background var(--h11-dur) var(--h11-ease), transform var(--h11-dur) var(--h11-ease);
}
.h11-cta:hover { background: var(--h11-accent-700); }
.h11-cta:active { transform: translateY(1px); }

/* Keyboard focus */
:where(.h11-toggle, .h11-close, .h11-node__btn, .h11-node__link, .h11-sub__link, .h11-card, .h11-promo, .h11-cta, .h11-signin):focus-visible {
  outline: 2px solid var(--h11-accent); outline-offset: 2px;
}

/* ==========================================================================
   OFF-CANVAS VERTICAL PANEL
   ========================================================================== */
.h11-panel {
  position: fixed; top: 0; left: 0; z-index: 1041;
  width: min(392px, 92vw); height: 100dvh;
  background: var(--h11-bg);
  border-right: 1px solid var(--h11-line);
  box-shadow: var(--h11-shadow-panel);
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform 320ms var(--h11-ease);
}
.h11-panel.is-open { transform: translateX(0); }

.h11-panel__head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  height: var(--h11-h); padding: 0 16px 0 20px;
  border-bottom: 1px solid var(--h11-line-soft);
}
.h11-close {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--h11-line); border-radius: var(--h11-radius-sm);
  background: #fff; color: var(--h11-ink); cursor: pointer; font-size: .95rem;
  transition: background var(--h11-dur) var(--h11-ease);
}
.h11-close:hover { background: var(--h11-hover); }

.h11-nav { flex: 1 1 auto; overflow-y: auto; padding: 12px; }
.h11-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

/* Node — a row (link or expandable button) */
.h11-node__link, .h11-node__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; height: 48px; padding: 0 14px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .9375rem; font-weight: 500; text-align: left;
  color: var(--h11-body); text-decoration: none; border-radius: var(--h11-radius-sm);
  transition: color var(--h11-dur) var(--h11-ease), background var(--h11-dur) var(--h11-ease);
}
.h11-node__link:hover, .h11-node__btn:hover { color: var(--h11-ink); background: var(--h11-hover); }
.h11-node__lead { display: inline-flex; align-items: center; gap: 11px; }
.h11-node__ic { color: var(--h11-muted); font-size: 1rem; width: 20px; text-align: center; }
.h11-node__caret { font-size: .72rem; opacity: .55; transition: transform var(--h11-dur) var(--h11-ease); }
.h11-node.is-open > .h11-node__btn { color: var(--h11-ink); background: var(--h11-hover); }
.h11-node.is-open > .h11-node__btn .h11-node__caret { transform: rotate(180deg); }
.h11-node.is-open > .h11-node__btn .h11-node__ic { color: var(--h11-accent); }

/* Collapsible panel body */
.h11-node__panel {
  max-height: 0; overflow: hidden;
  transition: max-height 300ms var(--h11-ease);
}
.h11-node.is-open > .h11-node__panel { max-height: 720px; }

/* Rich content region (mega-style) — tile grid + promo */
.h11-rich {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 8px 6px 6px;
}
.h11-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px; border-radius: var(--h11-radius);
  background: var(--h11-line-soft); text-decoration: none; color: var(--h11-ink);
  border: 1px solid transparent;
  transition: background var(--h11-dur) var(--h11-ease), border-color var(--h11-dur) var(--h11-ease);
}
.h11-card:hover { background: #fff; border-color: var(--h11-line); }
.h11-card__ic {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
  background: var(--h11-accent-tint); color: var(--h11-accent); font-size: .9rem; margin-bottom: 2px;
}
.h11-card__t { font-size: .8125rem; font-weight: 600; }
.h11-card__d { font-size: .75rem; color: var(--h11-muted); line-height: 1.35; }

.h11-promo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 2px 6px 8px; padding: 12px 14px;
  border-radius: var(--h11-radius); text-decoration: none;
  background: var(--h11-accent-tint); color: var(--h11-accent-700);
  transition: background var(--h11-dur) var(--h11-ease);
}
.h11-promo:hover { background: #d7efe7; }
.h11-promo__t { font-size: .8125rem; font-weight: 600; }
.h11-promo__cta { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600; }

/* Nested sub-lists */
.h11-sub { list-style: none; margin: 0; padding: 2px 0 6px 18px; display: flex; flex-direction: column; gap: 1px; position: relative; }
.h11-sub::before {
  content: ""; position: absolute; left: 20px; top: 4px; bottom: 8px; width: 1px;
  background: var(--h11-line);
}
.h11-sub__link {
  display: block; padding: 9px 14px 9px 22px;
  font-size: .875rem; font-weight: 500; color: var(--h11-body); text-decoration: none;
  border-radius: var(--h11-radius-sm);
  transition: color var(--h11-dur) var(--h11-ease), background var(--h11-dur) var(--h11-ease);
}
.h11-sub__link:hover { color: var(--h11-ink); background: var(--h11-hover); }
.h11-node__btn--sub { height: 44px; padding-left: 22px; font-size: .875rem; }
.h11-node--nested { position: relative; }
.h11-sub--deep { padding-left: 28px; }

/* Panel footer */
.h11-panel__foot {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px;
  padding: 16px; border-top: 1px solid var(--h11-line-soft);
}
.h11-signin--panel { justify-content: center; border: 1px solid var(--h11-line); height: 44px; }
.h11-cta--block { width: 100%; height: 46px; }

/* Scrim */
.h11-scrim {
  position: fixed; inset: 0; z-index: 1040;
  background: rgba(13, 16, 21, .38); opacity: 0;
  transition: opacity var(--h11-dur) var(--h11-ease);
}
.h11-scrim.is-shown { opacity: 1; }

/* ==========================================================================
   RESPONSIVE — vertical-first, so it degrades naturally
   ========================================================================== */
@media (max-width: 767.98px) {
  .h11-bar__actions .h11-signin { display: none; }
  .h11-toggle__label { display: none; }
  .h11-toggle { padding: 0 11px; }
  .h11-panel { width: 100vw; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ===== header-14 · .h14-header ===== */
/* ==========================================================================
   HEADER 14 — MATERIAL 3 (REFINED)
   Self-contained. Tokens namespaced --h14-. 8px spacing rhythm, Inter.
   Palette: Material neutral surfaces + one restrained tonal primary.
   Motion: <200ms, cubic-bezier(.4,0,.2,1) (Material standard easing).
   Signatures: elevation tiers, ink ripple, pill active indicator, tonal CTA.
   ========================================================================== */

:root {
  /* Material neutral surface roles */
  --h14-ink: #1b1b1f;         /* on-surface */
  --h14-body: #45464f;        /* on-surface-variant (resting nav) */
  --h14-muted: #74757d;
  --h14-surface: #ffffff;
  --h14-surface-2: #f5f3fb;   /* elevated container tint */
  --h14-line: #e5e2ec;

  /* One tonal primary (Material You seed) */
  --h14-primary: #4a4ae0;
  --h14-primary-strong: #3a34c9;
  --h14-primary-ink: #ffffff;
  --h14-tonal: #e3e0ff;       /* secondary-container: filled tonal CTA */
  --h14-tonal-ink: #1a1a4e;   /* on-secondary-container */
  --h14-tint-2: #eeedfd;       /* primary-container tint */

  /* Material elevation tiers (soft, dual-shadow) */
  --h14-elev-1: 0 1px 2px rgba(27,27,31,.06), 0 1px 3px rgba(27,27,31,.10);
  --h14-elev-2: 0 1px 2px rgba(27,27,31,.06), 0 2px 6px rgba(27,27,31,.10);
  --h14-elev-3: 0 4px 8px -2px rgba(27,27,31,.10), 0 16px 32px -12px rgba(27,27,31,.22);

  /* System */
  --h14-radius: 16px;         /* Material large corner */
  --h14-radius-sm: 12px;
  --h14-radius-pill: 999px;
  --h14-ease: cubic-bezier(.4, 0, .2, 1);
  --h14-emph: cubic-bezier(.2, 0, 0, 1);   /* emphasized */
  --h14-dur: 180ms;
  --h14-h: 68px;
  --h14-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.h14-header, .h14-header * { box-sizing: border-box; }
.h14-header {
  font-family: var(--h14-font);
  color: var(--h14-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Accessible skip link */
.h14-skip {
  position: absolute; left: 16px; top: -60px; z-index: 1100;
  padding: 10px 16px; border-radius: var(--h14-radius-pill);
  background: var(--h14-ink); color: #fff;
  font-size: .875rem; font-weight: 500; text-decoration: none;
  transition: top var(--h14-dur) var(--h14-ease);
}
.h14-skip:focus { top: 12px; }

/* ==========================================================================
   APP BAR SHELL — elevation on scroll (Material "on-scroll" surface)
   ========================================================================== */
.h14-header {
  position: sticky; top: 0; z-index: 1030;
  background: var(--h14-surface);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--h14-dur) var(--h14-ease),
              background var(--h14-dur) var(--h14-ease),
              border-color var(--h14-dur) var(--h14-ease);
}
/* Elevated surface tint + shadow appear only after scroll */
.h14-header.is-stuck {
  background: var(--h14-surface-2);
  box-shadow: var(--h14-elev-2);
  border-bottom-color: transparent;
}

.h14-container { max-width: 1220px; margin: 0 auto; padding: 0 24px; }
.h14-nav { display: flex; align-items: center; gap: 32px; height: var(--h14-h); }

/* --- Brand ------------------------------------------------------------- */
.h14-brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--h14-ink); flex: 0 0 auto;
}
.h14-brand__mark {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px; background: var(--h14-primary); color: #fff; font-size: .95rem;
}
.h14-brand__name { font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; }

/* ==========================================================================
   PRIMARY MENU + SLIDING PILL INDICATOR
   ========================================================================== */
.h14-collapse { flex: 1 1 auto; }
.h14-menu {
  position: relative;
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: 0;
}
.h14-item { position: relative; }

/* Mobile-only CTA block hidden on desktop */
.h14-mobile-cta { display: none; }

/* The pill rides behind the hovered / active nav item */
.h14-pill {
  position: absolute; top: 50%; left: 0; height: 40px; width: 0;
  transform: translateY(-50%);
  background: var(--h14-tint-2);
  border-radius: var(--h14-radius-pill);
  opacity: 0; pointer-events: none; z-index: 0;
  transition: transform 220ms var(--h14-emph),
              width 220ms var(--h14-emph),
              opacity var(--h14-dur) var(--h14-ease);
}
.h14-pill.is-active { opacity: 1; }

.h14-link {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 16px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .9375rem; font-weight: 500;
  color: var(--h14-body); text-decoration: none;
  border-radius: var(--h14-radius-pill);
  transition: color var(--h14-dur) var(--h14-ease);
}
.h14-link:hover { color: var(--h14-ink); }
.h14-chev { font-size: .7rem; opacity: .6; transition: transform var(--h14-dur) var(--h14-ease); }
.h14-item.is-open > .h14-trigger { color: var(--h14-primary); }
.h14-item.is-open > .h14-trigger .h14-chev { transform: rotate(180deg); }

/* Keyboard focus (Material visible focus ring) */
:where(.h14-link, .h14-drop__link, .h14-cta, .h14-signin, .h14-burger, .h14-tile, .h14-mega__promo):focus-visible {
  outline: 3px solid var(--h14-primary); outline-offset: 2px;
}

/* ==========================================================================
   INK RIPPLE — subtle state layer expansion (added by JS)
   ========================================================================== */
.h14-ripple { position: relative; overflow: hidden; }
.h14-ripple__ink {
  position: absolute; border-radius: 50%; pointer-events: none;
  transform: scale(0); opacity: .28;
  background: currentColor;
  animation: h14-ripple 480ms var(--h14-ease) forwards;
}
@keyframes h14-ripple {
  to { transform: scale(2.4); opacity: 0; }
}

/* ==========================================================================
   MEGA — MATERIAL CARD SHEET (elevation 3)
   ========================================================================== */
.h14-mega, .h14-drop {
  position: absolute; top: calc(100% + 12px); left: 0;
  opacity: 0; visibility: hidden; transform: translateY(6px) scale(.99);
  transition: opacity var(--h14-dur) var(--h14-ease),
              transform var(--h14-dur) var(--h14-emph),
              visibility var(--h14-dur) var(--h14-ease);
  pointer-events: none; z-index: 20;
}
.h14-item.is-open > .h14-mega, .h14-item.is-open > .h14-drop {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto;
}

.h14-mega {
  width: 640px;
  display: grid; grid-template-columns: 1fr 240px; gap: 12px;
  background: var(--h14-surface);
  border-radius: var(--h14-radius);
  box-shadow: var(--h14-elev-3);
  padding: 16px;
}
.h14-mega__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.h14-tile {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px; border-radius: var(--h14-radius-sm);
  text-decoration: none; color: var(--h14-ink);
  transition: background var(--h14-dur) var(--h14-ease);
}
.h14-tile:hover { background: var(--h14-surface-2); }
.h14-tile__ic {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--h14-tint-2); color: var(--h14-primary); font-size: 1.05rem;
}
.h14-tile__tx { display: flex; flex-direction: column; gap: 2px; padding-top: 1px; }
.h14-tile__tx strong { font-size: .875rem; font-weight: 600; line-height: 1.3; }
.h14-tile__tx span { font-size: .8125rem; color: var(--h14-muted); line-height: 1.4; }

/* Promo panel — filled tonal card */
.h14-mega__promo {
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px; border-radius: var(--h14-radius);
  background: var(--h14-tonal); color: var(--h14-tonal-ink);
  text-decoration: none;
  transition: box-shadow var(--h14-dur) var(--h14-ease);
}
.h14-mega__promo:hover { box-shadow: var(--h14-elev-1); }
.h14-mega__promo-tag {
  align-self: flex-start; font-size: .6875rem; font-weight: 600; letter-spacing: .04em;
  padding: 3px 10px; border-radius: var(--h14-radius-pill);
  background: rgba(255,255,255,.6); color: var(--h14-primary-strong);
}
.h14-mega__promo-title { font-size: 1rem; font-weight: 600; line-height: 1.3; margin-top: auto; }
.h14-mega__promo-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8125rem; font-weight: 600; color: var(--h14-primary-strong);
}
.h14-mega__promo-cta i { transition: transform var(--h14-dur) var(--h14-ease); }
.h14-mega__promo:hover .h14-mega__promo-cta i { transform: translateX(3px); }

/* ==========================================================================
   DROPDOWN + NESTED — Material menu surface (elevation 2)
   ========================================================================== */
.h14-drop {
  min-width: 232px; list-style: none; margin: 0; padding: 8px;
  background: var(--h14-surface);
  border-radius: var(--h14-radius-sm);
  box-shadow: var(--h14-elev-3);
}
.h14-drop__item { position: relative; }
.h14-drop__link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 11px 14px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .875rem; font-weight: 500; text-align: left;
  color: var(--h14-body); text-decoration: none; border-radius: 10px;
  transition: color var(--h14-dur) var(--h14-ease), background var(--h14-dur) var(--h14-ease);
}
.h14-drop__link > span { display: inline-flex; align-items: center; gap: 10px; }
.h14-drop__link i:first-child { font-size: .95rem; opacity: .7; }
.h14-drop__link:hover { color: var(--h14-ink); background: var(--h14-surface-2); }
.h14-drop__caret { font-size: .7rem; opacity: .5; }
.h14-drop--sub { top: -8px; left: calc(100% + 8px); }
.h14-drop__item--sub.is-open > .h14-drop--sub {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto;
}

/* ==========================================================================
   ACTIONS — filled tonal CTA
   ========================================================================== */
.h14-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }
.h14-signin {
  padding: 0 16px; height: 40px; display: inline-flex; align-items: center;
  font-size: .9375rem; font-weight: 500; color: var(--h14-body); text-decoration: none;
  border-radius: var(--h14-radius-pill);
  transition: color var(--h14-dur) var(--h14-ease), background var(--h14-dur) var(--h14-ease);
}
.h14-signin:hover { color: var(--h14-ink); background: var(--h14-surface-2); }
.h14-cta {
  display: inline-flex; align-items: center; height: 40px; padding: 0 22px;
  font-size: .9375rem; font-weight: 600; color: var(--h14-tonal-ink); text-decoration: none;
  background: var(--h14-tonal); border-radius: var(--h14-radius-pill);
  transition: box-shadow var(--h14-dur) var(--h14-ease), background var(--h14-dur) var(--h14-ease);
}
.h14-cta:hover { box-shadow: var(--h14-elev-2); background: #d7d3ff; }
.h14-cta:active { box-shadow: none; }

/* --- Hamburger (three-line, morphs to X) ------------------------------- */
.h14-burger {
  display: none; position: relative; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%;
  background: transparent; cursor: pointer;
  transition: background var(--h14-dur) var(--h14-ease);
}
.h14-burger:hover { background: var(--h14-surface-2); }
.h14-burger span {
  position: absolute; left: 13px; width: 18px; height: 2px; border-radius: 2px;
  background: var(--h14-ink);
  transition: transform var(--h14-dur) var(--h14-ease), opacity var(--h14-dur) var(--h14-ease);
}
.h14-burger span:nth-child(1) { top: 16px; }
.h14-burger span:nth-child(2) { top: 21px; }
.h14-burger span:nth-child(3) { top: 26px; }
.h14-burger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.h14-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.h14-burger[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* Navigation drawer scrim */
.h14-scrim {
  position: fixed; inset: 0; z-index: 1029;
  background: rgba(27, 27, 31, .38); opacity: 0;
  transition: opacity var(--h14-dur) var(--h14-ease);
}
.h14-scrim.is-shown { opacity: 1; }

/* ==========================================================================
   RESPONSIVE — MATERIAL NAVIGATION DRAWER
   ========================================================================== */
@media (max-width: 991.98px) {
  .h14-nav { gap: 0; }
  .h14-burger { display: block; }
  .h14-signin, .h14-cta { display: none; }
  .h14-actions { margin-left: auto; }
  .h14-pill { display: none; }

  .h14-collapse {
    position: fixed; top: 0; left: 0; z-index: 1031;
    width: min(360px, 86vw); height: 100dvh;
    background: var(--h14-surface);
    border-top-right-radius: 24px; border-bottom-right-radius: 24px;
    box-shadow: var(--h14-elev-3);
    padding: 80px 12px 24px; overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 300ms var(--h14-emph);
  }
  .h14-collapse.is-open { transform: translateX(0); }

  .h14-menu { flex-direction: column; align-items: stretch; gap: 2px; }
  .h14-link {
    height: 52px; width: 100%; justify-content: space-between; font-size: 1rem;
    padding: 0 18px; border-radius: var(--h14-radius-pill);
  }
  .h14-link:hover, .h14-item.is-open > .h14-trigger { background: var(--h14-surface-2); }

  /* Mega + dropdowns become inline accordions */
  .h14-mega, .h14-drop {
    position: static; width: auto; display: block;
    opacity: 1; visibility: visible; transform: none;
    pointer-events: auto; box-shadow: none; padding: 0;
    background: transparent;
    max-height: 0; overflow: hidden;
    transition: max-height 300ms var(--h14-ease);
  }
  .h14-item.is-open > .h14-mega,
  .h14-item.is-open > .h14-drop,
  .h14-drop__item--sub.is-open > .h14-drop--sub { max-height: 900px; }

  .h14-mega { padding: 4px 6px 8px; }
  .h14-mega__grid { grid-template-columns: 1fr; gap: 0; }
  .h14-mega__promo { display: none; }
  .h14-drop { padding: 0 0 0 6px; }
  .h14-drop--sub { padding-left: 18px; }

  /* CTA row pinned inside the drawer */
  .h14-mobile-cta {
    display: flex; flex-direction: column; gap: 10px; margin-top: 20px;
    padding-top: 20px; border-top: 1px solid var(--h14-line);
  }
  .h14-mobile-cta .h14-m-primary {
    display: inline-flex; align-items: center; justify-content: center; height: 48px;
    border-radius: var(--h14-radius-pill); background: var(--h14-tonal); color: var(--h14-tonal-ink);
    font-weight: 600; text-decoration: none; font-size: .9375rem;
  }
  .h14-mobile-cta .h14-m-ghost {
    display: inline-flex; align-items: center; justify-content: center; height: 48px;
    border-radius: var(--h14-radius-pill); border: 1px solid var(--h14-line);
    color: var(--h14-ink); font-weight: 600; text-decoration: none; font-size: .9375rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .h14-ripple__ink { display: none; }
}

/* ===== header-15 · .h15-header ===== */
/* ==========================================================================
   HEADER 15 — SLIDING UNDERLINE INDICATOR
   Self-contained. Tokens namespaced --h15-. 8px spacing rhythm, Inter.
   Palette: near-monochrome ink + one emerald accent.
   Motion: <200ms, cubic-bezier(.4,0,.2,1). Signature: one moving underline.
   ========================================================================== */

:root {
  --h15-ink: #0c0f14;
  --h15-body: #4a515e;
  --h15-muted: #6b7280;
  --h15-line: #eceef1;
  --h15-line-soft: #f3f4f6;
  --h15-bg: #ffffff;
  --h15-hover: #f6f8f7;

  /* One accent */
  --h15-accent: #0f9d76;
  --h15-accent-700: #0b7d5e;
  --h15-accent-tint: #e6f6f0;

  --h15-shadow-pop: 0 1px 2px rgba(12,15,20,.05), 0 14px 34px -12px rgba(12,15,20,.18);
  --h15-shadow-bar: 0 1px 0 rgba(12,15,20,.06);

  --h15-radius: 12px;
  --h15-radius-sm: 9px;
  --h15-ease: cubic-bezier(.4, 0, .2, 1);
  --h15-spring: cubic-bezier(.34, 1.3, .5, 1);   /* subtle overshoot for the slide */
  --h15-dur: 180ms;
  --h15-h: 68px;
  --h15-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.h15-header, .h15-header * { box-sizing: border-box; }
.h15-header {
  font-family: var(--h15-font);
  color: var(--h15-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.h15-skip {
  position: absolute; left: 16px; top: -60px; z-index: 1100;
  padding: 10px 16px; border-radius: 8px; background: var(--h15-ink); color: #fff;
  font-size: .875rem; font-weight: 500; text-decoration: none;
  transition: top var(--h15-dur) var(--h15-ease);
}
.h15-skip:focus { top: 12px; }

/* ==========================================================================
   HEADER SHELL — hairline on scroll
   ========================================================================== */
.h15-header {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--h15-dur) var(--h15-ease),
              box-shadow var(--h15-dur) var(--h15-ease),
              background var(--h15-dur) var(--h15-ease);
}
.h15-header.is-stuck {
  background: rgba(255,255,255,.93);
  border-bottom-color: var(--h15-line);
  box-shadow: var(--h15-shadow-bar);
}

.h15-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.h15-nav { display: flex; align-items: center; gap: 40px; height: var(--h15-h); }

/* --- Brand ------------------------------------------------------------- */
.h15-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--h15-ink); flex: 0 0 auto; }
.h15-brand__logo { color: var(--h15-accent); display: block; }
.h15-brand__name { font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; }

/* ==========================================================================
   PRIMARY MENU + THE SLIDING UNDERLINE
   ========================================================================== */
.h15-collapse { flex: 1 1 auto; }
.h15-menu {
  position: relative;
  display: flex; align-items: center; gap: 4px;
  list-style: none; margin: 0; padding: 0;
}
.h15-item { position: relative; }

.h15-link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 14px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .9375rem; font-weight: 500;
  color: var(--h15-body); text-decoration: none;
  border-radius: var(--h15-radius-sm);
  transition: color var(--h15-dur) var(--h15-ease);
}
.h15-link:hover { color: var(--h15-ink); }
.h15-chev { font-size: .7rem; opacity: .55; transition: transform var(--h15-dur) var(--h15-ease); }
.h15-item.is-open > .h15-trigger { color: var(--h15-ink); }
.h15-item.is-open > .h15-trigger .h15-chev { transform: rotate(180deg); }
/* The active link keeps ink colour so the underline reads as "home base" */
.h15-link.is-active { color: var(--h15-ink); }

/* The single moving element */
.h15-underline {
  position: absolute; left: 0; bottom: 6px; height: 2.5px; width: 0;
  background: var(--h15-accent); border-radius: 2px;
  opacity: 0; pointer-events: none;
  transform: translateX(0);
  transition: transform 260ms var(--h15-spring),
              width 260ms var(--h15-spring),
              opacity var(--h15-dur) var(--h15-ease),
              background var(--h15-dur) var(--h15-ease);
}
.h15-underline.is-shown { opacity: 1; }

:where(.h15-link, .h15-drop__link, .h15-cta, .h15-signin, .h15-burger, .h15-mega__link, .h15-mega__feature):focus-visible {
  outline: 2px solid var(--h15-accent); outline-offset: 2px;
}

/* ==========================================================================
   MEGA MENU — three columns, opaque card
   ========================================================================== */
.h15-mega, .h15-drop {
  position: absolute; top: calc(100% + 10px); left: 0;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--h15-dur) var(--h15-ease),
              transform var(--h15-dur) var(--h15-ease),
              visibility var(--h15-dur) var(--h15-ease);
  pointer-events: none; z-index: 20;
}
.h15-item.is-open > .h15-mega, .h15-item.is-open > .h15-drop {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

.h15-mega {
  width: 680px;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
  background: var(--h15-bg); border: 1px solid var(--h15-line);
  border-radius: var(--h15-radius); box-shadow: var(--h15-shadow-pop);
  padding: 20px;
}
.h15-mega__label {
  margin: 2px 8px 8px; font-size: .6875rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--h15-muted);
}
.h15-mega__link {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 9px 8px; border-radius: var(--h15-radius-sm);
  text-decoration: none; color: var(--h15-ink);
  transition: background var(--h15-dur) var(--h15-ease);
}
.h15-mega__link:hover { background: var(--h15-hover); }
.h15-mega__link > i {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--h15-accent-tint); color: var(--h15-accent); font-size: .95rem;
}
.h15-mega__link > span { display: flex; flex-direction: column; gap: 2px; }
.h15-mega__link strong { font-size: .875rem; font-weight: 600; line-height: 1.3; }
.h15-mega__link span span, .h15-mega__link > span > span { font-size: .8125rem; color: var(--h15-muted); line-height: 1.4; }

.h15-mega__aside { padding-left: 16px; border-left: 1px solid var(--h15-line-soft); }
.h15-mega__feature {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px; border-radius: var(--h15-radius);
  background: var(--h15-accent-tint); text-decoration: none; color: var(--h15-ink);
  height: calc(100% - 30px);
  transition: background var(--h15-dur) var(--h15-ease);
}
.h15-mega__feature:hover { background: #d9f0e7; }
.h15-mega__feature-tag {
  align-self: flex-start; font-size: .6875rem; font-weight: 600; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 999px; background: var(--h15-accent); color: #fff;
}
.h15-mega__feature-title { font-size: .9375rem; font-weight: 600; line-height: 1.35; margin-top: auto; }
.h15-mega__feature-cta { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600; color: var(--h15-accent-700); }
.h15-mega__feature-cta i { transition: transform var(--h15-dur) var(--h15-ease); }
.h15-mega__feature:hover .h15-mega__feature-cta i { transform: translateX(3px); }

/* ==========================================================================
   DROPDOWN + NESTED
   ========================================================================== */
.h15-drop {
  min-width: 216px; list-style: none; margin: 0; padding: 6px;
  background: var(--h15-bg); border: 1px solid var(--h15-line);
  border-radius: var(--h15-radius); box-shadow: var(--h15-shadow-pop);
}
.h15-drop__item { position: relative; }
.h15-drop__link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 9px 12px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .875rem; font-weight: 500; text-align: left;
  color: var(--h15-body); text-decoration: none; border-radius: var(--h15-radius-sm);
  transition: color var(--h15-dur) var(--h15-ease), background var(--h15-dur) var(--h15-ease);
}
.h15-drop__link:hover { color: var(--h15-ink); background: var(--h15-hover); }
.h15-drop__caret { font-size: .7rem; opacity: .5; }
.h15-drop--sub { top: -7px; left: calc(100% + 6px); }
.h15-drop__item--sub.is-open > .h15-drop--sub {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

/* ==========================================================================
   ACTIONS
   ========================================================================== */
.h15-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }
.h15-signin {
  padding: 0 12px; height: 40px; display: inline-flex; align-items: center;
  font-size: .9375rem; font-weight: 500; color: var(--h15-body); text-decoration: none;
  border-radius: var(--h15-radius-sm);
  transition: color var(--h15-dur) var(--h15-ease), background var(--h15-dur) var(--h15-ease);
}
.h15-signin:hover { color: var(--h15-ink); background: var(--h15-hover); }
.h15-cta {
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 18px;
  font-size: .9375rem; font-weight: 600; color: #fff; text-decoration: none;
  background: var(--h15-accent); border-radius: var(--h15-radius-sm);
  transition: background var(--h15-dur) var(--h15-ease), transform var(--h15-dur) var(--h15-ease);
}
.h15-cta i { transition: transform var(--h15-dur) var(--h15-ease); }
.h15-cta:hover { background: var(--h15-accent-700); }
.h15-cta:hover i { transform: translateX(3px); }
.h15-cta:active { transform: translateY(1px); }

/* --- Hamburger --------------------------------------------------------- */
.h15-burger {
  display: none; position: relative; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--h15-line); border-radius: var(--h15-radius-sm);
  background: #fff; cursor: pointer;
}
.h15-burger span {
  position: absolute; left: 11px; width: 18px; height: 1.8px; border-radius: 2px;
  background: var(--h15-ink);
  transition: transform var(--h15-dur) var(--h15-ease), opacity var(--h15-dur) var(--h15-ease);
}
.h15-burger span:nth-child(1) { top: 16px; }
.h15-burger span:nth-child(2) { bottom: 16px; }
.h15-burger[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.h15-burger[aria-expanded="true"] span:nth-child(2) { bottom: 19px; transform: rotate(-45deg); }

.h15-scrim {
  position: fixed; inset: 0; z-index: 1029;
  background: rgba(12,15,20,.32); opacity: 0;
  transition: opacity var(--h15-dur) var(--h15-ease);
}
.h15-scrim.is-shown { opacity: 1; }

.h15-mobile-cta { display: none; }

/* ==========================================================================
   RESPONSIVE — mobile drawer; underline becomes a vertical accent
   ========================================================================== */
@media (max-width: 991.98px) {
  .h15-nav { gap: 0; }
  .h15-burger { display: block; }
  .h15-signin, .h15-cta { display: none; }
  .h15-actions { margin-left: auto; }

  .h15-collapse {
    position: fixed; top: 0; right: 0; z-index: 1031;
    width: min(400px, 88vw); height: 100dvh;
    background: #fff; border-left: 1px solid var(--h15-line);
    box-shadow: -24px 0 60px -30px rgba(12,15,20,.3);
    padding: 84px 16px 24px; overflow-y: auto;
    transform: translateX(100%);
    transition: transform 320ms var(--h15-ease);
  }
  .h15-collapse.is-open { transform: translateX(0); }

  .h15-menu { flex-direction: column; align-items: stretch; gap: 0; padding-left: 14px; }
  .h15-link { height: 50px; width: 100%; justify-content: space-between; font-size: 1rem; padding: 0 12px; }
  .h15-item { border-bottom: 1px solid var(--h15-line-soft); }
  .h15-item:last-of-type { border-bottom: 0; }

  /* Underline reorients to a vertical accent tracking the hovered row */
  .h15-underline {
    left: 0; bottom: auto; top: 0; width: 3px !important; height: 50px;
    border-radius: 3px;
    transition: transform 260ms var(--h15-spring), height 200ms var(--h15-ease), opacity var(--h15-dur) var(--h15-ease);
  }

  /* Mega + dropdowns become inline accordions */
  .h15-mega, .h15-drop {
    position: static; width: auto; display: block;
    opacity: 1; visibility: visible; transform: none;
    pointer-events: auto; border: 0; box-shadow: none; padding: 0;
    max-height: 0; overflow: hidden;
    transition: max-height 300ms var(--h15-ease);
  }
  .h15-item.is-open > .h15-mega,
  .h15-item.is-open > .h15-drop,
  .h15-drop__item--sub.is-open > .h15-drop--sub { max-height: 820px; }

  .h15-mega { grid-template-columns: 1fr; gap: 0; padding: 0 0 8px; }
  .h15-mega__aside { display: none; }
  .h15-drop { padding-left: 12px; }
  .h15-drop--sub { padding-left: 16px; }

  .h15-mobile-cta {
    display: flex; flex-direction: column; gap: 10px; margin: 20px 0 0 -14px;
    padding-top: 20px; border-top: 1px solid var(--h15-line);
  }
  .h15-m-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 48px;
    border-radius: var(--h15-radius-sm); background: var(--h15-accent); color: #fff;
    font-weight: 600; text-decoration: none; font-size: .9375rem;
  }
  .h15-m-ghost {
    display: inline-flex; align-items: center; justify-content: center; height: 48px;
    border-radius: var(--h15-radius-sm); border: 1px solid var(--h15-line);
    color: var(--h15-ink); font-weight: 600; text-decoration: none; font-size: .9375rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ===== header-16 · .h16-header ===== */
/* ==========================================================================
   HEADER 16 — FULL-WIDTH CATALOG MEGA
   Self-contained. Tokens --h16-. Top items open full-bleed fixed panels that
   span the viewport; "Resources" is a compact multi-level dropdown.
   ========================================================================== */

:root {
  --h16-ink: #0d1117;
  --h16-body: #444c59;
  --h16-muted: #6b7280;
  --h16-line: #e9ebf0;
  --h16-line-soft: #f3f4f7;
  --h16-bg: #ffffff;
  --h16-hover: #f5f6f9;
  --h16-accent: #0a7d5a;        /* deep emerald */
  --h16-accent-700: #086045;
  --h16-accent-tint: #e6f4ef;
  --h16-shadow: 0 1px 2px rgba(13,17,23,.05), 0 24px 48px -22px rgba(13,17,23,.24);
  --h16-radius: 12px;
  --h16-radius-sm: 9px;
  --h16-ease: cubic-bezier(.4,0,.2,1);
  --h16-dur: 180ms;
  --h16-h: 68px;
  --h16-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.h16-header, .h16-header * { box-sizing: border-box; }
.h16-header { font-family: var(--h16-font); color: var(--h16-ink); -webkit-font-smoothing: antialiased; }
.h16-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

.h16-skip { position: absolute; left: 16px; top: -60px; z-index: 1100; padding: 10px 16px; border-radius: 8px; background: var(--h16-ink); color: #fff; font-size: .875rem; text-decoration: none; transition: top var(--h16-dur) var(--h16-ease); }
.h16-skip:focus { top: 12px; }

/* ===== Shell ===== */
.h16-header { position: sticky; top: 0; z-index: 1030; background: rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--h16-dur) var(--h16-ease), box-shadow var(--h16-dur) var(--h16-ease); }
.h16-header.is-stuck { border-bottom-color: var(--h16-line); box-shadow: 0 1px 0 var(--h16-line); background: rgba(255,255,255,.96); }
.h16-nav { display: flex; align-items: center; gap: 32px; height: var(--h16-h); }

/* ===== Brand ===== */
.h16-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--h16-ink); flex: 0 0 auto; }
.h16-brand__mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--h16-accent); color: #fff; font-size: 1.05rem; }
.h16-brand__name { font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; }

/* ===== Menu ===== */
.h16-collapse { flex: 1 1 auto; display: flex; align-items: center; }
.h16-menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.h16-item { position: relative; }
.h16-link { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: .9375rem; font-weight: 500; color: var(--h16-body); text-decoration: none; border-radius: var(--h16-radius-sm); transition: color var(--h16-dur) var(--h16-ease), background var(--h16-dur) var(--h16-ease); }
.h16-link:hover { color: var(--h16-ink); background: var(--h16-hover); }
.h16-chev { font-size: .7rem; opacity: .55; transition: transform var(--h16-dur) var(--h16-ease); }
.h16-item.is-open > .h16-trigger { color: var(--h16-ink); background: var(--h16-hover); }
.h16-item.is-open > .h16-trigger .h16-chev { transform: rotate(180deg); }

:where(.h16-link,.h16-drop__link,.h16-cta,.h16-signin,.h16-burger,.h16-group__link,.h16-card,.h16-m-primary,.h16-m-ghost):focus-visible { outline: 2px solid var(--h16-accent); outline-offset: 2px; }

/* ===== Full-width panels ===== */
.h16-panel {
  position: fixed; left: 0; right: 0; top: var(--h16-h);
  background: var(--h16-bg); border-top: 1px solid var(--h16-line);
  box-shadow: var(--h16-shadow);
  opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none;
  transition: opacity var(--h16-dur) var(--h16-ease), transform var(--h16-dur) var(--h16-ease), visibility var(--h16-dur) var(--h16-ease);
}
.h16-item.is-open > .h16-panel { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.h16-panel__inner { max-width: 1240px; margin: 0 auto; padding: 28px 24px; }
.h16-panel__cols { display: grid; grid-template-columns: repeat(3, 1fr) 1.2fr; gap: 28px; }
.h16-group__label { margin: 0 0 12px; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--h16-muted); }
.h16-group__link { display: flex; align-items: flex-start; gap: 12px; padding: 9px 8px; border-radius: var(--h16-radius-sm); text-decoration: none; color: var(--h16-ink); transition: background var(--h16-dur) var(--h16-ease); }
.h16-group__link:hover { background: var(--h16-hover); }
.h16-group__link > i { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--h16-accent-tint); color: var(--h16-accent); font-size: 1rem; }
.h16-group__link span { display: flex; flex-direction: column; gap: 2px; font-size: .8125rem; color: var(--h16-muted); line-height: 1.4; }
.h16-group__link strong { font-size: .875rem; font-weight: 600; color: var(--h16-ink); }

.h16-featured { display: flex; flex-direction: column; gap: 12px; }
.h16-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--h16-radius); text-decoration: none; color: #fff; background: linear-gradient(150deg, var(--h16-accent), var(--h16-accent-700)); transition: transform var(--h16-dur) var(--h16-ease); }
.h16-card:hover { transform: translateY(-2px); }
.h16-card--soft { background: var(--h16-line-soft); color: var(--h16-ink); }
.h16-card__tag { font-size: .6875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; opacity: .9; }
.h16-card__title { font-size: 1rem; font-weight: 700; }
.h16-card--soft .h16-card__title { color: var(--h16-ink); }
.h16-card__desc { font-size: .8125rem; opacity: .85; line-height: 1.4; }
.h16-card--soft .h16-card__desc { color: var(--h16-muted); opacity: 1; }
.h16-card__cta { margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600; }
.h16-card--soft .h16-card__cta { color: var(--h16-accent); }
.h16-card__cta i { transition: transform var(--h16-dur) var(--h16-ease); }
.h16-card:hover .h16-card__cta i { transform: translateX(3px); }

.h16-promo { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding: 14px 18px; border-radius: var(--h16-radius); background: var(--h16-accent-tint); }
.h16-promo__text { font-size: .875rem; font-weight: 500; color: var(--h16-ink); }
.h16-promo__text i { color: var(--h16-accent); margin-right: 6px; }
.h16-promo__link { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 600; color: var(--h16-accent); text-decoration: none; white-space: nowrap; }

.h16-backdrop { position: fixed; inset: var(--h16-h) 0 0 0; z-index: 1020; background: rgba(13,17,23,.24); opacity: 0; transition: opacity var(--h16-dur) var(--h16-ease); }
.h16-backdrop.is-shown { opacity: 1; }

/* ===== Resources dropdown (multi-level) ===== */
.h16-drop { position: absolute; top: calc(100% + 8px); left: 0; min-width: 220px; list-style: none; margin: 0; padding: 6px; background: var(--h16-bg); border: 1px solid var(--h16-line); border-radius: var(--h16-radius); box-shadow: var(--h16-shadow); opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none; transition: opacity var(--h16-dur) var(--h16-ease), transform var(--h16-dur) var(--h16-ease), visibility var(--h16-dur) var(--h16-ease); }
.h16-item.is-open > .h16-drop { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.h16-drop__item { position: relative; }
.h16-drop__link { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 9px 12px; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: .875rem; font-weight: 500; text-align: left; color: var(--h16-body); text-decoration: none; border-radius: var(--h16-radius-sm); transition: color var(--h16-dur) var(--h16-ease), background var(--h16-dur) var(--h16-ease); }
.h16-drop__link:hover { color: var(--h16-ink); background: var(--h16-hover); }
.h16-drop__caret { font-size: .7rem; opacity: .5; }
.h16-drop--sub { top: -7px; left: calc(100% + 6px); transform: translateX(6px); }
.h16-drop__item--sub.is-open > .h16-drop--sub { opacity: 1; visibility: visible; transform: translateX(0); pointer-events: auto; }

/* ===== Actions ===== */
.h16-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: 0 0 auto; }
.h16-signin { font-size: .9375rem; font-weight: 500; color: var(--h16-body); text-decoration: none; padding: 0 8px; }
.h16-signin:hover { color: var(--h16-ink); }
.h16-cta { display: inline-flex; align-items: center; height: 42px; padding: 0 18px; font-size: .9375rem; font-weight: 600; color: #fff; text-decoration: none; background: var(--h16-accent); border-radius: var(--h16-radius-sm); transition: background var(--h16-dur) var(--h16-ease); }
.h16-cta:hover { background: var(--h16-accent-700); }
.h16-burger { display: none; position: relative; width: 40px; height: 40px; padding: 0; border: 1px solid var(--h16-line); border-radius: var(--h16-radius-sm); background: #fff; cursor: pointer; }
.h16-burger span { position: absolute; left: 11px; width: 18px; height: 1.8px; border-radius: 2px; background: var(--h16-ink); transition: transform var(--h16-dur) var(--h16-ease); }
.h16-burger span:nth-child(1) { top: 16px; } .h16-burger span:nth-child(2) { bottom: 16px; }
.h16-burger[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.h16-burger[aria-expanded="true"] span:nth-child(2) { bottom: 19px; transform: rotate(-45deg); }

.h16-mobile-cta { display: none; }
.h16-scrim { position: fixed; inset: 0; z-index: 1031; background: rgba(13,17,23,.34); opacity: 0; transition: opacity var(--h16-dur) var(--h16-ease); }
.h16-scrim.is-shown { opacity: 1; }

/* ===== Responsive ===== */
@media (max-width: 991.98px) {
  .h16-burger { display: block; }
  .h16-signin, .h16-cta { display: none; }
  .h16-collapse {
    position: fixed; top: 0; right: 0; z-index: 1032;
    width: min(400px, 90vw); height: 100dvh; display: block;
    background: #fff; box-shadow: -24px 0 60px -30px rgba(13,17,23,.3);
    padding: 84px 16px 24px; overflow-y: auto;
    transform: translateX(100%); transition: transform 320ms var(--h16-ease);
  }
  .h16-collapse.is-open { transform: translateX(0); }
  .h16-menu { flex-direction: column; align-items: stretch; gap: 2px; }
  .h16-link { height: 48px; width: 100%; justify-content: space-between; font-size: 1rem; }
  .h16-item { border-bottom: 1px solid var(--h16-line-soft); }

  .h16-panel, .h16-drop {
    position: static; inset: auto; width: auto; opacity: 1; visibility: visible; transform: none; pointer-events: auto;
    border: 0; box-shadow: none; background: transparent;
    max-height: 0; overflow: hidden; transition: max-height 300ms var(--h16-ease);
  }
  .h16-item.is-open > .h16-panel, .h16-item.is-open > .h16-drop, .h16-drop__item--sub.is-open > .h16-drop--sub { max-height: 1600px; }
  .h16-panel__inner { padding: 4px 0 10px; }
  .h16-panel__cols { grid-template-columns: 1fr; gap: 8px; }
  .h16-featured { display: none; }
  .h16-promo { display: none; }
  .h16-backdrop { display: none; }
  .h16-drop--sub { padding-left: 14px; }

  .h16-mobile-cta { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--h16-line); }
  .h16-m-ghost { text-align: center; padding: 12px; border: 1px solid var(--h16-line); border-radius: var(--h16-radius-sm); color: var(--h16-ink); text-decoration: none; font-weight: 600; }
  .h16-m-primary { text-align: center; padding: 12px; border-radius: var(--h16-radius-sm); background: var(--h16-accent); color: #fff; text-decoration: none; font-weight: 600; }
}

@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; } }

/* ===== header-17 · .h17-header ===== */
/* ==========================================================================
   HEADER 17 — TRANSPARENT HERO -> SOLID
   Self-contained. Tokens --h17-. Transparent over hero, solid on scroll.
   ========================================================================== */
:root{
  --h17-ink:#12100e; --h17-body:#4a4640; --h17-muted:#6f6a62;
  --h17-line:#eae6df; --h17-line-soft:#f4f1ea; --h17-bg:#fff; --h17-hover:#f5f2ec;
  --h17-accent:#b8894b; --h17-accent-700:#9c7038; --h17-tint:#f4ebdd;
  --h17-shadow:0 1px 2px rgba(18,16,14,.05),0 18px 44px -18px rgba(18,16,14,.24);
  --h17-radius:12px; --h17-radius-sm:9px; --h17-ease:cubic-bezier(.4,0,.2,1); --h17-dur:220ms;
  --h17-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.h17-header,.h17-header *{box-sizing:border-box;} .h17-header{font-family:var(--h17-font);color:var(--h17-ink);-webkit-font-smoothing:antialiased;}
.h17-container{max-width:1200px;margin:0 auto;padding:0 24px;}
.h17-skip{position:absolute;left:16px;top:-60px;z-index:1100;padding:10px 16px;border-radius:8px;background:var(--h17-ink);color:#fff;font-size:.875rem;text-decoration:none;transition:top var(--h17-dur) var(--h17-ease);} .h17-skip:focus{top:12px;}

/* Header — transparent by default (over hero), solid when .is-solid */
.h17-header{position:fixed;top:0;left:0;right:0;z-index:1030;background:transparent;border-bottom:1px solid transparent;transition:background var(--h17-dur) var(--h17-ease),border-color var(--h17-dur) var(--h17-ease),box-shadow var(--h17-dur) var(--h17-ease);--fg:#fff;--fg-muted:rgba(255,255,255,.82);}
.h17-header.is-solid{background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border-bottom-color:var(--h17-line);box-shadow:0 1px 0 var(--h17-line);--fg:var(--h17-ink);--fg-muted:var(--h17-body);}
.h17-nav{display:flex;align-items:center;gap:34px;height:74px;transition:height var(--h17-dur) var(--h17-ease);}
.h17-header.is-solid .h17-nav{height:64px;}

.h17-brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--fg);flex:0 0 auto;}
.h17-brand__mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--h17-accent);color:#fff;font-size:1.05rem;}
.h17-brand__name{font-size:1.2rem;font-weight:700;letter-spacing:-.02em;}

.h17-collapse{flex:1 1 auto;}
.h17-menu{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;}
.h17-item{position:relative;}
.h17-link{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border:0;background:none;cursor:pointer;font:inherit;font-size:.9375rem;font-weight:500;color:var(--fg-muted);text-decoration:none;border-radius:var(--h17-radius-sm);transition:color var(--h17-dur) var(--h17-ease),background var(--h17-dur) var(--h17-ease);}
.h17-link:hover{color:var(--fg);background:color-mix(in srgb,currentColor 10%,transparent);}
.h17-header.is-solid .h17-link:hover{background:var(--h17-hover);}
.h17-chevron{opacity:.6;transition:transform var(--h17-dur) var(--h17-ease);}
.h17-item.is-open>.h17-trigger{color:var(--fg);} .h17-item.is-open>.h17-trigger .h17-chevron{transform:rotate(180deg);}
:where(.h17-link,.h17-drop__link,.h17-cta,.h17-signin,.h17-burger,.h17-mlink,.h17-feature):focus-visible{outline:2px solid var(--h17-accent);outline-offset:2px;}

/* Panels always render on a solid light surface for legibility */
.h17-mega,.h17-drop{position:absolute;top:calc(100% + 10px);left:0;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity var(--h17-dur) var(--h17-ease),transform var(--h17-dur) var(--h17-ease),visibility var(--h17-dur) var(--h17-ease);pointer-events:none;color:var(--h17-ink);}
.h17-item.is-open>.h17-mega,.h17-item.is-open>.h17-drop{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
.h17-mega{width:660px;background:var(--h17-bg);border:1px solid var(--h17-line);border-radius:var(--h17-radius);box-shadow:var(--h17-shadow);padding:20px;display:grid;grid-template-columns:1.4fr 1fr;gap:18px;}
.h17-mega__cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.h17-mega__label{margin:0 0 8px;font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--h17-muted);}
.h17-mlink{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:var(--h17-radius-sm);text-decoration:none;color:var(--h17-ink);font-size:.875rem;font-weight:500;transition:background var(--h17-dur) var(--h17-ease);}
.h17-mlink i{color:var(--h17-accent);} .h17-mlink:hover{background:var(--h17-hover);}
.h17-feature{display:flex;flex-direction:column;border-radius:var(--h17-radius);overflow:hidden;background:var(--h17-line-soft);text-decoration:none;color:var(--h17-ink);}
.h17-feature__img{height:110px;background:linear-gradient(135deg,#d8b98a,#b8894b);}
.h17-feature__body{padding:14px;display:flex;flex-direction:column;gap:5px;}
.h17-feature__tag{font-size:.6875rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--h17-accent);}
.h17-feature__title{font-size:1rem;font-weight:700;} .h17-feature__cta{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:600;color:var(--h17-accent);}
.h17-feature__cta i{transition:transform var(--h17-dur) var(--h17-ease);} .h17-feature:hover .h17-feature__cta i{transform:translateX(3px);}

.h17-drop{min-width:220px;list-style:none;margin:0;padding:6px;background:var(--h17-bg);border:1px solid var(--h17-line);border-radius:var(--h17-radius);box-shadow:var(--h17-shadow);}
.h17-drop__item{position:relative;}
.h17-drop__link{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:9px 12px;border:0;background:none;cursor:pointer;font:inherit;font-size:.875rem;font-weight:500;text-align:left;color:var(--h17-body);text-decoration:none;border-radius:var(--h17-radius-sm);transition:color var(--h17-dur) var(--h17-ease),background var(--h17-dur) var(--h17-ease);}
.h17-drop__link:hover{color:var(--h17-ink);background:var(--h17-hover);} .h17-drop__caret{font-size:.7rem;opacity:.5;}
.h17-drop--sub{top:-7px;left:calc(100% + 6px);} .h17-drop__item--sub.is-open>.h17-drop--sub{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}

.h17-actions{display:flex;align-items:center;gap:12px;margin-left:auto;flex:0 0 auto;}
.h17-signin{font-size:.9375rem;font-weight:500;color:var(--fg-muted);text-decoration:none;padding:0 6px;transition:color var(--h17-dur) var(--h17-ease);} .h17-signin:hover{color:var(--fg);}
.h17-cta{display:inline-flex;align-items:center;height:40px;padding:0 18px;font-size:.9375rem;font-weight:600;text-decoration:none;border-radius:var(--h17-radius-sm);background:#fff;color:var(--h17-ink);transition:background var(--h17-dur) var(--h17-ease),color var(--h17-dur) var(--h17-ease);}
.h17-header.is-solid .h17-cta{background:var(--h17-accent);color:#fff;} .h17-header.is-solid .h17-cta:hover{background:var(--h17-accent-700);}
.h17-burger{display:none;position:relative;width:40px;height:40px;padding:0;border:1px solid color-mix(in srgb,var(--fg) 40%,transparent);border-radius:var(--h17-radius-sm);background:transparent;cursor:pointer;}
.h17-burger span{position:absolute;left:11px;width:18px;height:1.8px;border-radius:2px;background:var(--fg);transition:transform var(--h17-dur) var(--h17-ease);} .h17-burger span:nth-child(1){top:16px;} .h17-burger span:nth-child(2){bottom:16px;}
.h17-burger[aria-expanded="true"] span:nth-child(1){top:19px;transform:rotate(45deg);} .h17-burger[aria-expanded="true"] span:nth-child(2){bottom:19px;transform:rotate(-45deg);}
.h17-scrim{position:fixed;inset:0;z-index:1029;background:rgba(18,16,14,.4);opacity:0;transition:opacity var(--h17-dur) var(--h17-ease);} .h17-scrim.is-shown{opacity:1;}

@media (max-width:991.98px){
  .h17-burger{display:block;} .h17-signin,.h17-actions>.h17-cta{display:none;}
  .h17-collapse{position:fixed;top:0;right:0;z-index:1031;width:min(390px,90vw);height:100dvh;background:#fff;color:var(--h17-ink);box-shadow:-24px 0 60px -30px rgba(18,16,14,.3);padding:84px 16px 24px;overflow-y:auto;transform:translateX(100%);transition:transform 320ms var(--h17-ease);}
  .h17-collapse.is-open{transform:translateX(0);}
  .h17-menu{flex-direction:column;align-items:stretch;gap:2px;} .h17-link{height:48px;justify-content:space-between;font-size:1rem;color:var(--h17-body);} .h17-link:hover{background:var(--h17-hover);} .h17-item{border-bottom:1px solid var(--h17-line-soft);}
  .h17-mega,.h17-drop{position:static;width:auto;opacity:1;visibility:visible;transform:none;pointer-events:auto;border:0;box-shadow:none;padding:0;display:block;max-height:0;overflow:hidden;transition:max-height 300ms var(--h17-ease);}
  .h17-item.is-open>.h17-mega,.h17-item.is-open>.h17-drop,.h17-drop__item--sub.is-open>.h17-drop--sub{max-height:800px;}
  .h17-mega__cols{grid-template-columns:1fr;} .h17-feature{display:none;}
  .h17-collapse::after{content:"Plan a trip";display:block;text-align:center;margin-top:18px;padding:13px;border-radius:var(--h17-radius-sm);background:var(--h17-accent);color:#fff;font-weight:600;}
}
@media (min-width:992px){.h17-scrim{display:none;}}

@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important;}}

/* ===== header-18 · .h18-header ===== */
/* ==========================================================================
   HEADER 18 — AUTO-HIDE SMART HEADER
   Self-contained. Tokens namespaced --h18-. 8px spacing rhythm.
   Palette: near-monochrome ink + one restrained emerald accent.
   Motion: <200ms, cubic-bezier(.4,0,.2,1). Signature: scroll-aware hide/reveal.
   ========================================================================== */

:root {
  /* Ink / neutrals */
  --h18-ink: #0c0f14;
  --h18-body: #474d59;
  --h18-muted: #6b7280;
  --h18-line: #eceef1;
  --h18-line-soft: #f3f4f6;
  --h18-bg: #ffffff;
  --h18-hover: #f5f7f6;

  /* Single accent — emerald */
  --h18-accent: #0f9d6b;
  --h18-accent-700: #0b8259;
  --h18-accent-tint: #e6f6ef;

  /* Elevation */
  --h18-shadow-pop: 0 1px 2px rgba(12, 15, 20, .04), 0 12px 32px -12px rgba(12, 15, 20, .16);
  --h18-shadow-bar: 0 4px 20px -14px rgba(12, 15, 20, .35);

  /* System */
  --h18-radius: 12px;
  --h18-radius-sm: 9px;
  --h18-ease: cubic-bezier(.4, 0, .2, 1);
  --h18-dur: 180ms;
  --h18-h: 68px;
  --h18-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.h18-header, .h18-header * { box-sizing: border-box; }
.h18-header {
  font-family: var(--h18-font);
  color: var(--h18-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Accessible skip link */
.h18-skip {
  position: absolute; left: 16px; top: -60px; z-index: 1100;
  padding: 10px 16px; border-radius: 8px; background: var(--h18-ink); color: #fff;
  font-size: .875rem; font-weight: 500; text-decoration: none;
  transition: top var(--h18-dur) var(--h18-ease);
}
.h18-skip:focus { top: 12px; }

/* ==========================================================================
   HEADER SHELL — the auto-hide behaviour lives here
   ========================================================================== */
.h18-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  /* transform drives the hide/reveal; separate transition from the solid state */
  transform: translateY(0);
  transition:
    transform 320ms var(--h18-ease),
    background var(--h18-dur) var(--h18-ease),
    border-color var(--h18-dur) var(--h18-ease),
    box-shadow var(--h18-dur) var(--h18-ease);
}
/* Hidden: slid fully out of view (extra px hides shadow bleed) */
.h18-header.is-hidden { transform: translateY(calc(-100% - 8px)); }
/* Revealed while scrolled down — subtle solid state */
.h18-header.is-solid {
  background: rgba(255, 255, 255, .96);
  border-bottom-color: var(--h18-line);
  box-shadow: var(--h18-shadow-bar);
}

.h18-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.h18-nav { display: flex; align-items: center; gap: 40px; height: var(--h18-h); }

/* --- Brand ------------------------------------------------------------- */
.h18-brand {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--h18-ink); flex: 0 0 auto;
}
.h18-brand__logo { color: var(--h18-accent); display: block; }
.h18-brand__name { font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; }

/* ==========================================================================
   PRIMARY MENU
   ========================================================================== */
.h18-collapse { flex: 1 1 auto; display: flex; align-items: center; }
.h18-menu {
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: 0;
}
.h18-item { position: relative; }

.h18-link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 12px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .9375rem; font-weight: 500;
  color: var(--h18-body); text-decoration: none;
  border-radius: var(--h18-radius-sm);
  transition: color var(--h18-dur) var(--h18-ease), background var(--h18-dur) var(--h18-ease);
}
.h18-link:hover { color: var(--h18-ink); background: var(--h18-hover); }
.h18-chevron { color: currentColor; opacity: .55; transition: transform var(--h18-dur) var(--h18-ease); }
.h18-item.is-open > .h18-trigger { color: var(--h18-ink); background: var(--h18-hover); }
.h18-item.is-open > .h18-trigger .h18-chevron { transform: rotate(180deg); }

/* Keyboard focus */
:where(.h18-link, .h18-drop__link, .h18-cta, .h18-signin, .h18-burger, .h18-mega__link, .h18-promo):focus-visible {
  outline: 2px solid var(--h18-accent); outline-offset: 2px;
}

/* ==========================================================================
   MEGA MENU — two columns of capabilities + a live promo rail
   ========================================================================== */
.h18-mega, .h18-drop {
  position: absolute; top: calc(100% + 10px); left: 0;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--h18-dur) var(--h18-ease), transform var(--h18-dur) var(--h18-ease), visibility var(--h18-dur) var(--h18-ease);
  pointer-events: none;
}
.h18-item.is-open > .h18-mega, .h18-item.is-open > .h18-drop {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

.h18-mega {
  width: 680px;
  background: var(--h18-bg);
  border: 1px solid var(--h18-line);
  border-radius: var(--h18-radius);
  box-shadow: var(--h18-shadow-pop);
  padding: 20px;
}
.h18-mega__body { display: grid; grid-template-columns: 1.4fr .9fr; gap: 20px; }
.h18-mega__main { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.h18-mega__label {
  margin: 4px 8px 8px; font-size: .6875rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--h18-muted);
}
.h18-mega__link {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 9px 8px; border-radius: var(--h18-radius-sm);
  text-decoration: none; color: var(--h18-ink);
  transition: background var(--h18-dur) var(--h18-ease);
}
.h18-mega__link:hover { background: var(--h18-hover); }
.h18-mega__ic {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--h18-accent-tint); color: var(--h18-accent); font-size: .95rem;
}
.h18-mega__text { display: flex; flex-direction: column; gap: 2px; }
.h18-mega__text strong { font-size: .875rem; font-weight: 600; line-height: 1.3; }
.h18-mega__text span { font-size: .8125rem; color: var(--h18-muted); line-height: 1.4; }

/* Live promo rail */
.h18-promo {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px; border-radius: var(--h18-radius);
  background: var(--h18-line-soft); text-decoration: none; color: var(--h18-ink);
  transition: background var(--h18-dur) var(--h18-ease);
}
.h18-promo:hover { background: #edeff2; }
.h18-promo__tag {
  align-self: flex-start; font-size: .6875rem; font-weight: 600; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 999px; background: var(--h18-accent); color: #fff;
}
.h18-promo__title { font-size: .9375rem; font-weight: 600; line-height: 1.35; margin-top: 4px; }
.h18-promo__desc { font-size: .8125rem; color: var(--h18-muted); line-height: 1.45; }
.h18-promo__cta {
  margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: .8125rem; font-weight: 600; color: var(--h18-accent);
}
.h18-promo__cta i { transition: transform var(--h18-dur) var(--h18-ease); }
.h18-promo:hover .h18-promo__cta i { transform: translateX(3px); }

/* ==========================================================================
   DROPDOWN + NESTED
   ========================================================================== */
.h18-drop {
  min-width: 220px; list-style: none; margin: 0; padding: 6px;
  background: var(--h18-bg); border: 1px solid var(--h18-line);
  border-radius: var(--h18-radius); box-shadow: var(--h18-shadow-pop);
}
.h18-drop__item { position: relative; }
.h18-drop__link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 9px 12px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .875rem; font-weight: 500; text-align: left;
  color: var(--h18-body); text-decoration: none; border-radius: var(--h18-radius-sm);
  transition: color var(--h18-dur) var(--h18-ease), background var(--h18-dur) var(--h18-ease);
}
.h18-drop__link:hover { color: var(--h18-ink); background: var(--h18-hover); }
.h18-drop__caret { font-size: .7rem; opacity: .5; transition: transform var(--h18-dur) var(--h18-ease); }
.h18-drop--sub { top: -7px; left: calc(100% + 6px); }
.h18-drop__item--sub.is-open > .h18-drop--sub {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

/* ==========================================================================
   ACTIONS
   ========================================================================== */
.h18-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }
.h18-signin {
  padding: 0 12px; height: 40px; display: inline-flex; align-items: center;
  font-size: .9375rem; font-weight: 500; color: var(--h18-body); text-decoration: none;
  border-radius: var(--h18-radius-sm);
  transition: color var(--h18-dur) var(--h18-ease), background var(--h18-dur) var(--h18-ease);
}
.h18-signin:hover { color: var(--h18-ink); background: var(--h18-hover); }
.h18-cta {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px;
  font-size: .9375rem; font-weight: 600; color: #fff; text-decoration: none;
  background: var(--h18-accent); border-radius: var(--h18-radius-sm);
  transition: background var(--h18-dur) var(--h18-ease), transform var(--h18-dur) var(--h18-ease);
}
.h18-cta:hover { background: var(--h18-accent-700); }
.h18-cta:active { transform: translateY(1px); }
.h18-mobile-cta { display: none; }

/* --- Hamburger (three-line, morphs to X) ------------------------------- */
.h18-burger {
  display: none; position: relative; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--h18-line); border-radius: var(--h18-radius-sm);
  background: #fff; cursor: pointer;
}
.h18-burger span {
  position: absolute; left: 11px; width: 18px; height: 1.8px; border-radius: 2px;
  background: var(--h18-ink);
  transition: transform var(--h18-dur) var(--h18-ease), opacity var(--h18-dur) var(--h18-ease);
}
.h18-burger span:nth-child(1) { top: 14px; }
.h18-burger span:nth-child(2) { top: 19px; }
.h18-burger span:nth-child(3) { top: 24px; }
.h18-burger[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.h18-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.h18-burger[aria-expanded="true"] span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

/* Mobile scrim */
.h18-scrim {
  position: fixed; inset: 0; z-index: 1029;
  background: rgba(12, 15, 20, .32); opacity: 0;
  transition: opacity var(--h18-dur) var(--h18-ease);
}
.h18-scrim.is-shown { opacity: 1; }

/* ==========================================================================
   RESPONSIVE — mobile slide-over (redesigned) + smart hide preserved
   ========================================================================== */
@media (max-width: 991.98px) {
  .h18-nav { gap: 0; }
  .h18-burger { display: block; }
  .h18-actions .h18-signin, .h18-actions .h18-cta { display: none; }
  .h18-actions { margin-left: auto; }

  .h18-collapse {
    position: fixed; top: 0; right: 0; z-index: 1031;
    width: min(400px, 88vw); height: 100dvh;
    display: block;
    background: #fff; border-left: 1px solid var(--h18-line);
    box-shadow: -24px 0 60px -30px rgba(12, 15, 20, .3);
    padding: 84px 16px 24px; overflow-y: auto;
    transform: translateX(100%);
    transition: transform 320ms var(--h18-ease);
  }
  .h18-collapse.is-open { transform: translateX(0); }

  .h18-menu { flex-direction: column; align-items: stretch; gap: 2px; }
  .h18-link { height: 48px; width: 100%; justify-content: space-between; font-size: 1rem; padding: 0 14px; }
  .h18-item { border-bottom: 1px solid var(--h18-line-soft); }

  /* Mega + dropdowns become inline accordions */
  .h18-mega, .h18-drop {
    position: static; width: auto; opacity: 1; visibility: visible; transform: none;
    pointer-events: auto; border: 0; box-shadow: none; padding: 0;
    max-height: 0; overflow: hidden;
    transition: max-height 300ms var(--h18-ease);
  }
  .h18-item.is-open > .h18-mega,
  .h18-item.is-open > .h18-drop,
  .h18-drop__item--sub.is-open > .h18-drop--sub { max-height: 900px; }

  .h18-mega { padding: 0 0 8px; }
  .h18-mega__body { grid-template-columns: 1fr; gap: 0; }
  .h18-mega__main { grid-template-columns: 1fr; gap: 0; }
  .h18-promo { display: none; }
  .h18-drop--sub { padding-left: 14px; }

  /* CTA row pinned inside the drawer */
  .h18-mobile-cta {
    display: flex; flex-direction: column; gap: 8px; margin-top: 20px;
    padding-top: 20px; border-top: 1px solid var(--h18-line);
  }
  .h18-signin--mobile {
    justify-content: center; height: 48px; border: 1px solid var(--h18-line);
    border-radius: var(--h18-radius-sm);
  }
  .h18-cta--mobile { justify-content: center; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  /* When motion is reduced, never hide the bar — keep it accessible */
  .h18-header.is-hidden { transform: translateY(0); }
}

/* ===== header-19 · .h19-header ===== */
/* ==========================================================================
   HEADER 19 — FULLSCREEN OVERLAY NAVIGATION
   Self-contained. Tokens namespaced --h19-. 8px spacing rhythm.
   Palette: near-monochrome ink + one restrained amber accent.
   Motion: <200ms micro / gentle staggered reveal. cubic-bezier(.4,0,.2,1).
   ========================================================================== */

:root {
  --h19-ink: #0d0f13;
  --h19-body: #464c57;
  --h19-muted: #6b7280;
  --h19-line: #ececef;
  --h19-line-soft: #f3f4f6;
  --h19-bg: #ffffff;
  --h19-hover: #f6f7f9;

  /* Single accent — amber */
  --h19-accent: #d9822b;
  --h19-accent-700: #bd6d1e;
  --h19-accent-tint: #fbeedd;

  --h19-shadow-bar: 0 1px 0 rgba(13, 15, 19, .06);
  --h19-radius: 12px;
  --h19-radius-sm: 9px;
  --h19-ease: cubic-bezier(.4, 0, .2, 1);
  --h19-dur: 180ms;
  --h19-h: 72px;
  --h19-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.h19-header, .h19-header *, .h19-overlay, .h19-overlay * { box-sizing: border-box; }
.h19-header, .h19-overlay {
  font-family: var(--h19-font);
  color: var(--h19-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.h19-skip {
  position: absolute; left: 16px; top: -60px; z-index: 1100;
  padding: 10px 16px; border-radius: 8px; background: var(--h19-ink); color: #fff;
  font-size: .875rem; font-weight: 500; text-decoration: none;
  transition: top var(--h19-dur) var(--h19-ease);
}
.h19-skip:focus { top: 12px; }

/* ==========================================================================
   TOP BAR — minimal
   ========================================================================== */
.h19-header {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--h19-line);
}
.h19-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.h19-bar { display: flex; align-items: center; justify-content: space-between; height: var(--h19-h); }

.h19-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--h19-ink); }
.h19-brand__logo { color: var(--h19-accent); display: block; }
.h19-brand__name { font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; }

.h19-actions { display: flex; align-items: center; gap: 12px; }
.h19-cta {
  display: inline-flex; align-items: center; height: 42px; padding: 0 18px;
  font-size: .9375rem; font-weight: 600; color: #fff; text-decoration: none;
  background: var(--h19-ink); border-radius: var(--h19-radius-sm);
  transition: background var(--h19-dur) var(--h19-ease), transform var(--h19-dur) var(--h19-ease);
}
.h19-cta:hover { background: #23262d; }
.h19-cta:active { transform: translateY(1px); }

/* Refined menu toggle — label + morphing glyph */
.h19-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  height: 42px; padding: 0 14px 0 16px;
  border: 1px solid var(--h19-line); border-radius: var(--h19-radius-sm);
  background: #fff; cursor: pointer; color: var(--h19-ink);
  font-family: inherit; font-size: .9375rem; font-weight: 600;
  transition: border-color var(--h19-dur) var(--h19-ease), background var(--h19-dur) var(--h19-ease);
}
.h19-toggle:hover { background: var(--h19-hover); border-color: #dcdee3; }
.h19-toggle__label { min-width: 34px; text-align: left; }
.h19-toggle__glyph { position: relative; width: 18px; height: 12px; }
.h19-toggle__glyph span {
  position: absolute; left: 0; width: 18px; height: 1.8px; border-radius: 2px;
  background: var(--h19-ink);
  transition: transform var(--h19-dur) var(--h19-ease), opacity var(--h19-dur) var(--h19-ease);
}
.h19-toggle__glyph span:nth-child(1) { top: 2px; }
.h19-toggle__glyph span:nth-child(2) { bottom: 2px; }
.h19-toggle[aria-expanded="true"] .h19-toggle__glyph span:nth-child(1) { top: 5px; transform: rotate(45deg); }
.h19-toggle[aria-expanded="true"] .h19-toggle__glyph span:nth-child(2) { bottom: 5px; transform: rotate(-45deg); }

:where(.h19-cta, .h19-toggle, .h19-nav__link, .h19-sub__link, .h19-card, .h19-contact, .h19-social a):focus-visible {
  outline: 2px solid var(--h19-accent); outline-offset: 2px;
}

/* ==========================================================================
   FULLSCREEN OVERLAY
   ========================================================================== */
.h19-overlay {
  position: fixed; inset: 0; z-index: 1040;
  background: #fff;
  opacity: 0; visibility: hidden;
  /* subtle iris-style clip reveal from the toggle corner */
  clip-path: inset(0 0 100% 0);
  transition: opacity 320ms var(--h19-ease), visibility 320ms var(--h19-ease), clip-path 420ms var(--h19-ease);
  overflow-y: auto;
}
.h19-overlay.is-open {
  opacity: 1; visibility: visible; clip-path: inset(0 0 0 0);
}
.h19-overlay__inner {
  max-width: 1240px; margin: 0 auto;
  padding: calc(var(--h19-h) + 56px) 24px 64px;
  min-height: 100%;
  display: flex; align-items: center;
}
.h19-overlay__grid {
  width: 100%;
  display: grid; grid-template-columns: 1.35fr .9fr; gap: 56px;
}

/* Staggered reveal — children translate up + fade */
.h19-nav__item, .h19-aside__block {
  opacity: 0; transform: translateY(18px);
}
.h19-overlay.is-open .h19-nav__item,
.h19-overlay.is-open .h19-aside__block {
  opacity: 1; transform: translateY(0);
  transition: opacity 420ms var(--h19-ease), transform 420ms var(--h19-ease);
  transition-delay: calc(var(--i, 0) * 60ms + 120ms);
}

/* Primary typographic links */
.h19-nav { list-style: none; margin: 0; padding: 0; }
.h19-nav__item { border-bottom: 1px solid var(--h19-line-soft); }
.h19-nav__link {
  display: flex; align-items: center; gap: 18px; width: 100%;
  padding: 16px 4px; border: 0; background: none; cursor: pointer;
  font-family: inherit; text-align: left; text-decoration: none;
  color: var(--h19-ink);
  font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.05;
  transition: color var(--h19-dur) var(--h19-ease), padding-left var(--h19-dur) var(--h19-ease);
}
.h19-nav__link:hover { color: var(--h19-accent); padding-left: 12px; }
.h19-nav__idx {
  font-size: .8125rem; font-weight: 600; letter-spacing: .06em; color: var(--h19-muted);
  font-feature-settings: "tnum"; padding-top: .6em;
}
.h19-nav__plus {
  margin-left: auto; font-size: 1.4rem; color: var(--h19-muted);
  transition: transform var(--h19-dur) var(--h19-ease), color var(--h19-dur) var(--h19-ease);
}
.h19-nav__item--sub[data-open] .h19-nav__plus { transform: rotate(45deg); color: var(--h19-accent); }

/* Nested expandable */
.h19-sub {
  list-style: none; margin: 0; padding: 0;
  max-height: 0; overflow: hidden;
  transition: max-height 320ms var(--h19-ease);
}
.h19-nav__item--sub[data-open] .h19-sub { max-height: 320px; }
.h19-sub li { opacity: .001; }
.h19-nav__item--sub[data-open] .h19-sub li {
  opacity: 1; transition: opacity 240ms var(--h19-ease); transition-delay: 120ms;
}
.h19-sub__link {
  display: inline-block; padding: 9px 4px 9px 46px;
  font-size: 1.05rem; font-weight: 500; color: var(--h19-body); text-decoration: none;
  transition: color var(--h19-dur) var(--h19-ease), transform var(--h19-dur) var(--h19-ease);
}
.h19-sub__link:hover { color: var(--h19-accent); transform: translateX(4px); }

/* Secondary column */
.h19-aside { display: flex; flex-direction: column; gap: 40px; padding-top: 8px; }
.h19-aside__label {
  margin: 0 0 16px; font-size: .6875rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--h19-muted);
}
.h19-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.h19-card {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  border: 1px solid var(--h19-line); border-radius: var(--h19-radius);
  text-decoration: none; color: var(--h19-ink);
  transition: border-color var(--h19-dur) var(--h19-ease), background var(--h19-dur) var(--h19-ease), transform var(--h19-dur) var(--h19-ease);
}
.h19-card:hover { border-color: #dcdee3; background: var(--h19-hover); transform: translateY(-2px); }
.h19-card__ic {
  flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 9px; background: var(--h19-accent-tint); color: var(--h19-accent); font-size: 1.05rem;
}
.h19-card__text { display: flex; flex-direction: column; gap: 1px; }
.h19-card__text strong { font-size: .875rem; font-weight: 600; }
.h19-card__text span { font-size: .75rem; color: var(--h19-muted); }

.h19-contact {
  display: block; font-size: 1.05rem; font-weight: 500; color: var(--h19-ink);
  text-decoration: none; margin-bottom: 8px;
  transition: color var(--h19-dur) var(--h19-ease);
}
.h19-contact:hover { color: var(--h19-accent); }
.h19-social { display: flex; gap: 8px; list-style: none; margin: 16px 0 0; padding: 0; }
.h19-social a {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--h19-line); border-radius: 50%; color: var(--h19-body); font-size: 1.05rem;
  transition: border-color var(--h19-dur) var(--h19-ease), color var(--h19-dur) var(--h19-ease), background var(--h19-dur) var(--h19-ease);
}
.h19-social a:hover { border-color: var(--h19-accent); color: var(--h19-accent); background: var(--h19-accent-tint); }

/* Lock body scroll while overlay open */
body.h19-locked { overflow: hidden; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 860px) {
  .h19-overlay__grid { grid-template-columns: 1fr; gap: 40px; }
  .h19-overlay__inner { align-items: flex-start; padding-top: calc(var(--h19-h) + 32px); }
  .h19-cards { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .h19-cta { display: none; } /* CTA preserved inside overlay via primary flow; keep bar clean */
  .h19-toggle__label { display: none; }
  .h19-toggle { padding: 0 12px; width: 44px; justify-content: center; }
}

/* Provide the CTA inside the overlay on small screens where the bar hides it */
.h19-overlay__cta {
  display: none; margin-top: 8px;
}
@media (max-width: 560px) {
  .h19-overlay__cta {
    display: inline-flex; align-items: center; justify-content: center;
    height: 48px; padding: 0 20px; background: var(--h19-ink); color: #fff;
    border-radius: var(--h19-radius-sm); font-weight: 600; text-decoration: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .h19-overlay { clip-path: none; }
  .h19-nav__item, .h19-aside__block { opacity: 1; transform: none; }
}

/* ===== header-20 · .h20-header ===== */
/* ==========================================================================
   HEADER 20 — SEARCH-PROMINENT HEADER
   Self-contained. Tokens namespaced --h20-. 8px spacing rhythm.
   Palette: near-monochrome ink + one restrained blue accent.
   Motion: <200ms, cubic-bezier(.4,0,.2,1). Signature: first-class search.
   ========================================================================== */

:root {
  --h20-ink: #0c0e13;
  --h20-body: #464c57;
  --h20-muted: #6b7280;
  --h20-line: #e9ebef;
  --h20-line-soft: #f2f3f6;
  --h20-bg: #ffffff;
  --h20-hover: #f5f6f8;

  /* Single accent — blue */
  --h20-accent: #2563eb;
  --h20-accent-700: #1d4fd0;
  --h20-accent-tint: #e8effe;

  --h20-shadow-pop: 0 1px 2px rgba(12, 14, 19, .04), 0 12px 32px -12px rgba(12, 14, 19, .16);
  --h20-shadow-bar: 0 1px 0 rgba(12, 14, 19, .06);
  --h20-shadow-search: 0 0 0 4px rgba(37, 99, 235, .10);

  --h20-radius: 12px;
  --h20-radius-sm: 9px;
  --h20-ease: cubic-bezier(.4, 0, .2, 1);
  --h20-dur: 180ms;
  --h20-h: 68px;
  --h20-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.h20-header, .h20-header *, .h20-drawer, .h20-drawer * { box-sizing: border-box; }
.h20-header, .h20-drawer {
  font-family: var(--h20-font);
  color: var(--h20-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.h20-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;
}

.h20-skip {
  position: absolute; left: 16px; top: -60px; z-index: 1100;
  padding: 10px 16px; border-radius: 8px; background: var(--h20-ink); color: #fff;
  font-size: .875rem; font-weight: 500; text-decoration: none;
  transition: top var(--h20-dur) var(--h20-ease);
}
.h20-skip:focus { top: 12px; }

/* ==========================================================================
   HEADER SHELL
   ========================================================================== */
.h20-header {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--h20-dur) var(--h20-ease), box-shadow var(--h20-dur) var(--h20-ease), background var(--h20-dur) var(--h20-ease);
}
.h20-header.is-stuck {
  background: rgba(255, 255, 255, .94);
  border-bottom-color: var(--h20-line);
  box-shadow: var(--h20-shadow-bar);
}

.h20-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.h20-bar { display: flex; align-items: center; gap: 24px; height: var(--h20-h); }

.h20-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--h20-ink); flex: 0 0 auto; }
.h20-brand__logo { color: var(--h20-accent); display: block; }
.h20-brand__name { font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; }

/* ==========================================================================
   PROMINENT SEARCH — the signature element
   ========================================================================== */
.h20-search {
  position: relative; flex: 1 1 auto; max-width: 520px; margin: 0 auto;
}
.h20-search__form {
  position: relative; display: flex; align-items: center;
  height: 44px; padding: 0 12px;
  background: var(--h20-line-soft);
  border: 1px solid transparent; border-radius: var(--h20-radius);
  transition: background var(--h20-dur) var(--h20-ease), border-color var(--h20-dur) var(--h20-ease), box-shadow var(--h20-dur) var(--h20-ease), max-width var(--h20-dur) var(--h20-ease);
}
.h20-search.is-focused .h20-search__form {
  background: #fff; border-color: var(--h20-accent); box-shadow: var(--h20-shadow-search);
}
.h20-search__icon { color: var(--h20-muted); font-size: .95rem; margin-right: 8px; }
.h20-search__input {
  flex: 1 1 auto; height: 100%; border: 0; background: none; outline: 0;
  font-family: inherit; font-size: .9375rem; color: var(--h20-ink);
}
.h20-search__input::placeholder { color: var(--h20-muted); }
.h20-search__input::-webkit-search-cancel-button { display: none; }
.h20-search__kbd {
  flex: 0 0 auto; display: grid; place-items: center; min-width: 22px; height: 22px;
  padding: 0 6px; border: 1px solid var(--h20-line); border-radius: 6px;
  background: #fff; color: var(--h20-muted); font-size: .75rem; font-family: inherit;
  transition: opacity var(--h20-dur) var(--h20-ease);
}
.h20-search.is-focused .h20-search__kbd { opacity: 0; pointer-events: none; }
.h20-search__clear {
  flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px;
  border: 0; background: none; color: var(--h20-muted); cursor: pointer; border-radius: 6px;
  transition: color var(--h20-dur) var(--h20-ease), background var(--h20-dur) var(--h20-ease);
}
.h20-search__clear:hover { color: var(--h20-ink); background: var(--h20-hover); }

/* Suggestions panel */
.h20-suggest {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40;
  background: #fff; border: 1px solid var(--h20-line); border-radius: var(--h20-radius);
  box-shadow: var(--h20-shadow-pop); padding: 8px;
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity var(--h20-dur) var(--h20-ease), transform var(--h20-dur) var(--h20-ease);
}
.h20-search.is-focused .h20-suggest {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.h20-suggest__section { padding: 4px; }
.h20-suggest__section + .h20-suggest__section { border-top: 1px solid var(--h20-line-soft); margin-top: 4px; padding-top: 8px; }
.h20-suggest__label {
  margin: 4px 8px 6px; font-size: .6875rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--h20-muted);
}
.h20-suggest__item {
  display: flex; align-items: center; gap: 10px; padding: 9px 8px;
  border-radius: var(--h20-radius-sm); text-decoration: none; color: var(--h20-ink);
  font-size: .9375rem; transition: background var(--h20-dur) var(--h20-ease);
}
.h20-suggest__item > i { color: var(--h20-muted); font-size: .95rem; }
.h20-suggest__item:hover, .h20-suggest__item.is-active { background: var(--h20-hover); }
.h20-suggest__meta { margin-left: auto; font-size: .75rem; color: var(--h20-muted); }
.h20-suggest__foot {
  display: flex; gap: 16px; padding: 8px 10px 4px; margin-top: 4px;
  border-top: 1px solid var(--h20-line-soft); font-size: .75rem; color: var(--h20-muted);
}
.h20-suggest__foot kbd {
  padding: 1px 6px; border: 1px solid var(--h20-line); border-radius: 5px;
  background: var(--h20-line-soft); font-family: inherit; font-size: .7rem;
}

/* ==========================================================================
   COMPACT MENU
   ========================================================================== */
.h20-nav { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.h20-menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.h20-item { position: relative; }

.h20-link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 12px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .9375rem; font-weight: 500;
  color: var(--h20-body); text-decoration: none; border-radius: var(--h20-radius-sm);
  transition: color var(--h20-dur) var(--h20-ease), background var(--h20-dur) var(--h20-ease);
}
.h20-link:hover { color: var(--h20-ink); background: var(--h20-hover); }
.h20-chevron { color: currentColor; opacity: .55; transition: transform var(--h20-dur) var(--h20-ease); }
.h20-item.is-open > .h20-trigger { color: var(--h20-ink); background: var(--h20-hover); }
.h20-item.is-open > .h20-trigger .h20-chevron { transform: rotate(180deg); }

:where(.h20-link, .h20-drop__link, .h20-cta, .h20-iconbtn, .h20-burger, .h20-tile, .h20-search__input, .h20-suggest__item, .h20-macc__link):focus-visible {
  outline: 2px solid var(--h20-accent); outline-offset: 2px;
}

/* ==========================================================================
   MEGA MENU — even tile grid
   ========================================================================== */
.h20-mega, .h20-drop {
  position: absolute; top: calc(100% + 10px); right: 0;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--h20-dur) var(--h20-ease), transform var(--h20-dur) var(--h20-ease), visibility var(--h20-dur) var(--h20-ease);
  pointer-events: none;
}
.h20-item.is-open > .h20-mega, .h20-item.is-open > .h20-drop {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
.h20-mega {
  width: 560px;
  background: var(--h20-bg); border: 1px solid var(--h20-line);
  border-radius: var(--h20-radius); box-shadow: var(--h20-shadow-pop); padding: 12px;
}
.h20-mega__body { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.h20-tile {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 12px; row-gap: 2px; align-items: center;
  padding: 12px; border-radius: var(--h20-radius-sm);
  text-decoration: none; color: var(--h20-ink);
  transition: background var(--h20-dur) var(--h20-ease);
}
.h20-tile:hover { background: var(--h20-hover); }
.h20-tile__ic {
  grid-row: 1 / 3; display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 9px; background: var(--h20-accent-tint); color: var(--h20-accent); font-size: 1.05rem;
}
.h20-tile strong { font-size: .875rem; font-weight: 600; line-height: 1.3; }
.h20-tile span { font-size: .8125rem; color: var(--h20-muted); line-height: 1.35; }

/* ==========================================================================
   DROPDOWN + NESTED
   ========================================================================== */
.h20-drop {
  min-width: 220px; list-style: none; margin: 0; padding: 6px;
  background: var(--h20-bg); border: 1px solid var(--h20-line);
  border-radius: var(--h20-radius); box-shadow: var(--h20-shadow-pop);
}
.h20-drop__item { position: relative; }
.h20-drop__link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 9px 12px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .875rem; font-weight: 500; text-align: left;
  color: var(--h20-body); text-decoration: none; border-radius: var(--h20-radius-sm);
  transition: color var(--h20-dur) var(--h20-ease), background var(--h20-dur) var(--h20-ease);
}
.h20-drop__link:hover { color: var(--h20-ink); background: var(--h20-hover); }
.h20-drop__caret { font-size: .7rem; opacity: .5; transition: transform var(--h20-dur) var(--h20-ease); }
.h20-drop--sub { top: -7px; right: calc(100% + 6px); left: auto; }
.h20-drop__item--sub.is-open > .h20-drop--sub {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

/* ==========================================================================
   ACTIONS
   ========================================================================== */
.h20-actions { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
.h20-iconbtn {
  display: none; width: 40px; height: 40px; place-items: center;
  border: 1px solid var(--h20-line); border-radius: var(--h20-radius-sm);
  background: #fff; color: var(--h20-ink); cursor: pointer; font-size: 1rem;
  transition: background var(--h20-dur) var(--h20-ease);
}
.h20-iconbtn:hover { background: var(--h20-hover); }
.h20-cta {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px;
  font-size: .9375rem; font-weight: 600; color: #fff; text-decoration: none;
  background: var(--h20-accent); border-radius: var(--h20-radius-sm);
  transition: background var(--h20-dur) var(--h20-ease), transform var(--h20-dur) var(--h20-ease);
}
.h20-cta:hover { background: var(--h20-accent-700); }
.h20-cta:active { transform: translateY(1px); }
.h20-cta--block { display: flex; justify-content: center; height: 48px; margin-top: 8px; }

.h20-burger {
  display: none; position: relative; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--h20-line); border-radius: var(--h20-radius-sm);
  background: #fff; cursor: pointer;
}
.h20-burger span {
  position: absolute; left: 11px; width: 18px; height: 1.8px; border-radius: 2px;
  background: var(--h20-ink);
  transition: transform var(--h20-dur) var(--h20-ease), opacity var(--h20-dur) var(--h20-ease);
}
.h20-burger span:nth-child(1) { top: 14px; }
.h20-burger span:nth-child(2) { top: 19px; }
.h20-burger span:nth-child(3) { top: 24px; }
.h20-burger[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.h20-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.h20-burger[aria-expanded="true"] span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

/* ==========================================================================
   MOBILE DRAWER — search first
   ========================================================================== */
.h20-drawer {
  position: fixed; top: 0; right: 0; z-index: 1041;
  width: min(420px, 90vw); height: 100dvh;
  background: #fff; border-left: 1px solid var(--h20-line);
  box-shadow: -24px 0 60px -30px rgba(12, 14, 19, .3);
  padding: 16px; overflow-y: auto;
  transform: translateX(100%);
  transition: transform 320ms var(--h20-ease);
  display: flex; flex-direction: column; gap: 16px;
}
.h20-drawer.is-open { transform: translateX(0); }
.h20-drawer__head { display: flex; align-items: center; justify-content: space-between; }
.h20-drawer__title { font-size: 1rem; font-weight: 600; }
.h20-drawer__close {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--h20-line); border-radius: var(--h20-radius-sm);
  background: #fff; color: var(--h20-ink); cursor: pointer; font-size: 1rem;
}
.h20-drawer__close:hover { background: var(--h20-hover); }
.h20-drawer__search {
  display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 12px;
  background: var(--h20-line-soft); border-radius: var(--h20-radius);
}
.h20-drawer__search i { color: var(--h20-muted); }
.h20-drawer__search input {
  flex: 1; border: 0; background: none; outline: 0; font-family: inherit; font-size: .9375rem; color: var(--h20-ink);
}
.h20-drawer__nav { display: flex; flex-direction: column; }
.h20-macc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.h20-macc__item { border-bottom: 1px solid var(--h20-line-soft); }
.h20-macc__link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; height: 50px; padding: 0 6px;
  border: 0; background: none; cursor: pointer; text-align: left; text-decoration: none;
  font-family: inherit; font-size: 1rem; font-weight: 500; color: var(--h20-ink);
}
.h20-macc__link i { transition: transform var(--h20-dur) var(--h20-ease); color: var(--h20-muted); }
.h20-macc__item.is-open > .h20-macc__link > i { transform: rotate(180deg); }

/* Drawer accordion mega / drop */
.h20-drawer .h20-mega,
.h20-drawer .h20-drop {
  position: static; width: auto; opacity: 1; visibility: visible; transform: none;
  pointer-events: auto; border: 0; box-shadow: none; padding: 0;
  max-height: 0; overflow: hidden;
  transition: max-height 300ms var(--h20-ease);
}
.h20-drawer .h20-item.is-open > .h20-mega,
.h20-drawer .h20-item.is-open > .h20-drop,
.h20-drawer .h20-drop__item--sub.is-open > .h20-drop--sub { max-height: 700px; }
.h20-drawer .h20-mega { padding: 0 0 8px; }
.h20-drawer .h20-mega__body { grid-template-columns: 1fr; }
.h20-drawer .h20-drop--sub { padding-left: 12px; }

/* Scrim */
.h20-scrim {
  position: fixed; inset: 0; z-index: 1040;
  background: rgba(12, 14, 19, .32); opacity: 0;
  transition: opacity var(--h20-dur) var(--h20-ease);
}
.h20-scrim.is-shown { opacity: 1; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 991.98px) {
  .h20-search { display: none; }             /* collapse inline search */
  .h20-menu { display: none; }               /* compact menu → drawer */
  .h20-item--hide-sm { display: none; }
  .h20-iconbtn { display: grid; }            /* search icon opens drawer (search-first) */
  .h20-burger { display: block; }
  .h20-cta { display: none; }                /* CTA preserved in drawer */
  .h20-bar { gap: 12px; }
  .h20-brand { margin-right: auto; }
}
@media (min-width: 992px) {
  .h20-drawer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ===== header-21 · .h21-header ===== */
/* ==========================================================================
   HEADER 21 — MINIMAL OUTLINE / STROKE
   Self-contained. Tokens --h21-. Line-driven; hairline strokes, no heavy fills.
   ========================================================================== */
:root{
  --h21-ink:#111111; --h21-body:#555555; --h21-muted:#8a8a8a;
  --h21-line:#111111; --h21-hair:#e2e2e2; --h21-hair-soft:#eee; --h21-bg:#fff; --h21-hover:#f6f6f6;
  --h21-radius:11px; --h21-radius-sm:999px; --h21-ease:cubic-bezier(.4,0,.2,1); --h21-dur:180ms;
  --h21-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.h21-header,.h21-header *{box-sizing:border-box;} .h21-header{font-family:var(--h21-font);color:var(--h21-ink);-webkit-font-smoothing:antialiased;}
.h21-container{max-width:1200px;margin:0 auto;padding:0 24px;}
.h21-skip{position:absolute;left:16px;top:-60px;z-index:1100;padding:10px 16px;border:1px solid var(--h21-line);border-radius:8px;background:#fff;color:var(--h21-ink);font-size:.875rem;text-decoration:none;transition:top var(--h21-dur) var(--h21-ease);} .h21-skip:focus{top:12px;}

.h21-header{position:sticky;top:0;z-index:1030;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color var(--h21-dur) var(--h21-ease);}
.h21-header.is-stuck{border-bottom-color:var(--h21-hair);}
.h21-nav{display:flex;align-items:center;gap:32px;height:70px;}
.h21-brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--h21-ink);flex:0 0 auto;}
.h21-brand__mark{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--h21-line);border-radius:9px;font-size:1rem;}
.h21-brand__name{font-size:1.15rem;font-weight:600;letter-spacing:.01em;}

.h21-collapse{flex:1 1 auto;}
.h21-menu{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0;}
.h21-item{position:relative;}
.h21-link{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 15px;border:1px solid transparent;background:none;cursor:pointer;font:inherit;font-size:.9rem;font-weight:500;color:var(--h21-body);text-decoration:none;border-radius:var(--h21-radius-sm);transition:color var(--h21-dur) var(--h21-ease),border-color var(--h21-dur) var(--h21-ease);}
.h21-link:hover{color:var(--h21-ink);border-color:var(--h21-hair);}
.h21-chevron{opacity:.6;transition:transform var(--h21-dur) var(--h21-ease);}
.h21-item.is-open>.h21-trigger{color:var(--h21-ink);border-color:var(--h21-line);} .h21-item.is-open>.h21-trigger .h21-chevron{transform:rotate(180deg);}
:where(.h21-link,.h21-drop__link,.h21-cta,.h21-signin,.h21-burger,.h21-mlink,.h21-note):focus-visible{outline:2px solid var(--h21-ink);outline-offset:2px;}

.h21-mega,.h21-drop{position:absolute;top:calc(100% + 10px);left:0;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity var(--h21-dur) var(--h21-ease),transform var(--h21-dur) var(--h21-ease),visibility var(--h21-dur) var(--h21-ease);pointer-events:none;}
.h21-item.is-open>.h21-mega,.h21-item.is-open>.h21-drop{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
.h21-mega{width:620px;background:var(--h21-bg);border:1px solid var(--h21-line);border-radius:var(--h21-radius);padding:0;display:grid;grid-template-columns:1.5fr 1fr;}
.h21-mega__cols{display:grid;grid-template-columns:1fr 1fr;padding:18px;gap:10px;}
.h21-mega__label{margin:0 0 8px;font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--h21-muted);}
.h21-mlink{display:flex;align-items:flex-start;gap:11px;padding:9px 8px;border-radius:8px;text-decoration:none;color:var(--h21-ink);transition:background var(--h21-dur) var(--h21-ease);}
.h21-mlink:hover{background:var(--h21-hover);} .h21-mlink i{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--h21-hair);border-radius:8px;font-size:.9rem;}
.h21-mlink strong{display:block;font-size:.875rem;font-weight:600;} .h21-mlink span span{font-size:.78rem;color:var(--h21-muted);}
.h21-note{display:flex;flex-direction:column;gap:6px;padding:18px;border-left:1px solid var(--h21-line);text-decoration:none;color:var(--h21-ink);}
.h21-note__k{font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--h21-muted);}
.h21-note__title{font-size:1.05rem;font-weight:600;margin-top:auto;} .h21-note__cta{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:600;}
.h21-note__cta i{transition:transform var(--h21-dur) var(--h21-ease);} .h21-note:hover .h21-note__cta i{transform:translate(2px,-2px);}

.h21-drop{min-width:210px;list-style:none;margin:0;padding:6px;background:var(--h21-bg);border:1px solid var(--h21-line);border-radius:var(--h21-radius);}
.h21-drop__item{position:relative;} .h21-drop__item+.h21-drop__item,.h21-drop li+li{border-top:1px solid var(--h21-hair-soft);}
.h21-drop__link{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:10px 12px;border:0;background:none;cursor:pointer;font:inherit;font-size:.875rem;font-weight:500;text-align:left;color:var(--h21-body);text-decoration:none;border-radius:7px;transition:color var(--h21-dur) var(--h21-ease),background var(--h21-dur) var(--h21-ease);}
.h21-drop__link:hover{color:var(--h21-ink);background:var(--h21-hover);} .h21-drop__caret{font-size:.7rem;opacity:.5;}
.h21-drop--sub{top:-7px;left:calc(100% + 6px);} .h21-drop__item--sub.is-open>.h21-drop--sub{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}

.h21-actions{display:flex;align-items:center;gap:12px;margin-left:auto;flex:0 0 auto;}
.h21-signin{font-size:.9rem;font-weight:500;color:var(--h21-body);text-decoration:none;padding:0 6px;} .h21-signin:hover{color:var(--h21-ink);}
.h21-cta{display:inline-flex;align-items:center;height:38px;padding:0 18px;font-size:.9rem;font-weight:600;color:var(--h21-ink);text-decoration:none;border:1px solid var(--h21-line);background:transparent;border-radius:var(--h21-radius-sm);transition:background var(--h21-dur) var(--h21-ease),color var(--h21-dur) var(--h21-ease);}
.h21-cta:hover{background:var(--h21-ink);color:#fff;}
.h21-burger{display:none;position:relative;width:38px;height:38px;padding:0;border:1px solid var(--h21-line);border-radius:9px;background:#fff;cursor:pointer;}
.h21-burger span{position:absolute;left:10px;width:18px;height:1.5px;background:var(--h21-ink);transition:transform var(--h21-dur) var(--h21-ease);} .h21-burger span:nth-child(1){top:15px;} .h21-burger span:nth-child(2){bottom:15px;}
.h21-burger[aria-expanded="true"] span:nth-child(1){top:18px;transform:rotate(45deg);} .h21-burger[aria-expanded="true"] span:nth-child(2){bottom:18px;transform:rotate(-45deg);}
.h21-scrim{position:fixed;inset:0;z-index:1029;background:rgba(0,0,0,.25);opacity:0;transition:opacity var(--h21-dur) var(--h21-ease);} .h21-scrim.is-shown{opacity:1;}

@media (max-width:991.98px){
  .h21-burger{display:block;} .h21-signin,.h21-actions>.h21-cta{display:none;}
  .h21-collapse{position:fixed;top:0;right:0;z-index:1031;width:min(380px,90vw);height:100dvh;background:#fff;border-left:1px solid var(--h21-line);padding:80px 16px 24px;overflow-y:auto;transform:translateX(100%);transition:transform 320ms var(--h21-ease);}
  .h21-collapse.is-open{transform:translateX(0);}
  .h21-menu{flex-direction:column;align-items:stretch;gap:0;} .h21-link{height:48px;justify-content:space-between;font-size:1rem;border:0;border-bottom:1px solid var(--h21-hair-soft);border-radius:0;}
  .h21-mega,.h21-drop{position:static;width:auto;opacity:1;visibility:visible;transform:none;pointer-events:auto;border:0;padding:0;display:block;max-height:0;overflow:hidden;transition:max-height 300ms var(--h21-ease);}
  .h21-item.is-open>.h21-mega,.h21-item.is-open>.h21-drop,.h21-drop__item--sub.is-open>.h21-drop--sub{max-height:700px;}
  .h21-mega__cols{grid-template-columns:1fr;padding:8px 0;} .h21-note{display:none;} .h21-drop--sub{padding-left:14px;}
}
@media (min-width:992px){.h21-scrim{display:none;}}

@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important;}}

/* ===== header-22 · .h22-header ===== */
/* ==========================================================================
   HEADER 22 — MULTI-LEVEL ENTERPRISE DIRECTORY
   Self-contained. Tokens namespaced --h22-. 8px spacing rhythm.
   Palette: near-monochrome slate ink + one steel-blue accent.
   Motion: <200ms, cubic-bezier(.4,0,.2,1). Density without clutter.
   ========================================================================== */

:root {
  /* Ink / neutrals */
  --h22-ink: #0e1420;
  --h22-body: #48505f;
  --h22-muted: #6a7284;
  --h22-line: #e7e9ef;
  --h22-line-soft: #f1f3f7;
  --h22-bg: #ffffff;
  --h22-hover: #f4f6f9;

  /* Single accent — steel blue */
  --h22-accent: #2f5bd0;
  --h22-accent-700: #244aad;
  --h22-accent-tint: #eaf0fd;

  /* Elevation */
  --h22-shadow-pop: 0 1px 2px rgba(14, 20, 32, .05), 0 16px 40px -14px rgba(14, 20, 32, .20);
  --h22-shadow-bar: 0 1px 0 rgba(14, 20, 32, .07);

  /* System */
  --h22-radius: 12px;
  --h22-radius-sm: 9px;
  --h22-ease: cubic-bezier(.4, 0, .2, 1);
  --h22-dur: 170ms;
  --h22-h: 70px;
  --h22-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.h22-header, .h22-header * { box-sizing: border-box; }
.h22-header {
  font-family: var(--h22-font);
  color: var(--h22-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Accessible skip link */
.h22-skip {
  position: absolute; left: 16px; top: -60px; z-index: 1100;
  padding: 10px 16px; border-radius: 8px; background: var(--h22-ink); color: #fff;
  font-size: .875rem; font-weight: 500; text-decoration: none;
  transition: top var(--h22-dur) var(--h22-ease);
}
.h22-skip:focus { top: 12px; }

/* ==========================================================================
   HEADER SHELL — opaque, hairline on scroll
   ========================================================================== */
.h22-header {
  position: sticky; top: 0; z-index: 1030;
  background: var(--h22-bg);
  border-bottom: 1px solid var(--h22-line-soft);
  transition: border-color var(--h22-dur) var(--h22-ease), box-shadow var(--h22-dur) var(--h22-ease);
}
.h22-header.is-stuck {
  border-bottom-color: var(--h22-line);
  box-shadow: var(--h22-shadow-bar);
}

.h22-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.h22-nav { display: flex; align-items: center; gap: 32px; height: var(--h22-h); }

/* --- Brand ------------------------------------------------------------- */
.h22-brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--h22-ink); flex: 0 0 auto;
}
.h22-brand__logo { color: var(--h22-accent); display: block; }
.h22-brand__name { font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; }
.h22-brand__sub { font-weight: 400; color: var(--h22-muted); }

/* ==========================================================================
   PRIMARY MENU
   ========================================================================== */
.h22-collapse { flex: 1 1 auto; }
.h22-menu {
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: 0;
}
.h22-item { position: relative; }

.h22-link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 12px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .9375rem; font-weight: 500;
  color: var(--h22-body); text-decoration: none;
  border-radius: var(--h22-radius-sm);
  transition: color var(--h22-dur) var(--h22-ease), background var(--h22-dur) var(--h22-ease);
}
.h22-link:hover { color: var(--h22-ink); background: var(--h22-hover); }
.h22-chevron { color: currentColor; opacity: .55; transition: transform var(--h22-dur) var(--h22-ease); }
.h22-item.is-open > .h22-trigger { color: var(--h22-accent); background: var(--h22-accent-tint); }
.h22-item.is-open > .h22-trigger .h22-chevron { transform: rotate(180deg); }

/* Keyboard focus */
:where(.h22-link, .h22-drop__link, .h22-cta, .h22-signin, .h22-burger, .h22-mega__link, .h22-mega__all, .h22-search__input):focus-visible {
  outline: 2px solid var(--h22-accent); outline-offset: 2px;
}

/* ==========================================================================
   DIRECTORY MEGA MENU — many neat columns
   ========================================================================== */
.h22-mega, .h22-drop {
  position: absolute; top: calc(100% + 10px); left: 0;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--h22-dur) var(--h22-ease), transform var(--h22-dur) var(--h22-ease), visibility var(--h22-dur) var(--h22-ease);
  pointer-events: none;
}
.h22-item.is-open > .h22-mega, .h22-item.is-open > .h22-drop {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

.h22-mega {
  width: 860px;
  background: var(--h22-bg);
  border: 1px solid var(--h22-line);
  border-radius: var(--h22-radius);
  box-shadow: var(--h22-shadow-pop);
  padding: 24px;
}
.h22-mega__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 24px;
}
.h22-mega__col { min-width: 0; }
.h22-mega__label {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 8px; padding: 0 8px 10px; border-bottom: 1px solid var(--h22-line-soft);
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--h22-muted);
}
.h22-mega__label i { color: var(--h22-accent); font-size: .85rem; }
.h22-mega__link {
  display: block; padding: 8px; border-radius: var(--h22-radius-sm);
  font-size: .875rem; font-weight: 500; color: var(--h22-body); text-decoration: none;
  transition: color var(--h22-dur) var(--h22-ease), background var(--h22-dur) var(--h22-ease), padding-left var(--h22-dur) var(--h22-ease);
}
.h22-mega__link:hover { color: var(--h22-accent); background: var(--h22-hover); padding-left: 12px; }

.h22-mega__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--h22-line-soft);
  font-size: .8125rem; color: var(--h22-muted);
}
.h22-mega__foot i { color: var(--h22-accent); }
.h22-mega__all {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .8125rem; font-weight: 600; color: var(--h22-accent); text-decoration: none;
}
.h22-mega__all i { transition: transform var(--h22-dur) var(--h22-ease); }
.h22-mega__all:hover i { transform: translateX(3px); }

/* ==========================================================================
   DROPDOWN + THREE-LEVEL NESTING
   ========================================================================== */
.h22-drop {
  min-width: 232px; list-style: none; margin: 0; padding: 6px;
  background: var(--h22-bg); border: 1px solid var(--h22-line);
  border-radius: var(--h22-radius); box-shadow: var(--h22-shadow-pop);
}
.h22-drop__item { position: relative; }
.h22-drop__link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 9px 12px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .875rem; font-weight: 500; text-align: left;
  color: var(--h22-body); text-decoration: none; border-radius: var(--h22-radius-sm);
  transition: color var(--h22-dur) var(--h22-ease), background var(--h22-dur) var(--h22-ease);
}
.h22-drop__link:hover { color: var(--h22-ink); background: var(--h22-hover); }
.h22-drop__caret { font-size: .7rem; opacity: .5; }
.h22-drop__item--sub.is-open > .h22-drop__trigger { color: var(--h22-accent); background: var(--h22-accent-tint); }
.h22-drop--sub { top: -7px; left: calc(100% + 6px); }
.h22-drop__item--sub.is-open > .h22-drop--sub {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

/* ==========================================================================
   ACTIONS — search + auth + CTA
   ========================================================================== */
.h22-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: 0 0 auto; }

.h22-search {
  position: relative; display: flex; align-items: center;
}
.h22-search__icon {
  position: absolute; left: 11px; font-size: .85rem; color: var(--h22-muted);
  pointer-events: none;
}
.h22-search__input {
  width: 190px; height: 40px; padding: 0 12px 0 32px;
  border: 1px solid var(--h22-line); border-radius: var(--h22-radius-sm);
  background: var(--h22-line-soft);
  font-family: inherit; font-size: .875rem; color: var(--h22-ink);
  transition: width var(--h22-dur) var(--h22-ease), border-color var(--h22-dur) var(--h22-ease), background var(--h22-dur) var(--h22-ease);
}
.h22-search__input::placeholder { color: var(--h22-muted); }
.h22-search__input:focus {
  outline: none; width: 220px; background: #fff; border-color: var(--h22-accent);
}

.h22-signin {
  padding: 0 12px; height: 40px; display: inline-flex; align-items: center;
  font-size: .9375rem; font-weight: 500; color: var(--h22-body); text-decoration: none;
  border-radius: var(--h22-radius-sm);
  transition: color var(--h22-dur) var(--h22-ease), background var(--h22-dur) var(--h22-ease);
}
.h22-signin:hover { color: var(--h22-ink); background: var(--h22-hover); }
.h22-cta {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px;
  font-size: .9375rem; font-weight: 600; color: #fff; text-decoration: none;
  background: var(--h22-accent); border-radius: var(--h22-radius-sm);
  transition: background var(--h22-dur) var(--h22-ease), transform var(--h22-dur) var(--h22-ease);
}
.h22-cta:hover { background: var(--h22-accent-700); }
.h22-cta:active { transform: translateY(1px); }

/* --- Hamburger (three-line, morphs to X) ------------------------------- */
.h22-burger {
  display: none; position: relative; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--h22-line); border-radius: var(--h22-radius-sm);
  background: #fff; cursor: pointer;
}
.h22-burger span {
  position: absolute; left: 11px; width: 18px; height: 1.8px; border-radius: 2px;
  background: var(--h22-ink);
  transition: transform var(--h22-dur) var(--h22-ease), opacity var(--h22-dur) var(--h22-ease);
}
.h22-burger span:nth-child(1) { top: 14px; }
.h22-burger span:nth-child(2) { top: 19px; }
.h22-burger span:nth-child(3) { top: 24px; }
.h22-burger[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.h22-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.h22-burger[aria-expanded="true"] span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

/* Mobile-only search hidden on desktop */
.h22-mobile-search { display: none; }

/* Mobile scrim */
.h22-scrim {
  position: fixed; inset: 0; z-index: 1029;
  background: rgba(14, 20, 32, .34); opacity: 0;
  transition: opacity var(--h22-dur) var(--h22-ease);
}
.h22-scrim.is-shown { opacity: 1; }

/* ==========================================================================
   RESPONSIVE — mobile slide-over with deep nested accordion
   ========================================================================== */
@media (max-width: 991.98px) {
  .h22-nav { gap: 0; }
  .h22-burger { display: block; }
  .h22-signin, .h22-cta { display: none; }
  .h22-actions { margin-left: auto; gap: 8px; }
  .h22-search { display: none; }

  .h22-collapse {
    position: fixed; top: 0; right: 0; z-index: 1031;
    width: min(420px, 90vw); height: 100dvh;
    background: #fff; border-left: 1px solid var(--h22-line);
    box-shadow: -24px 0 60px -30px rgba(14, 20, 32, .32);
    padding: 84px 16px 24px; overflow-y: auto;
    transform: translateX(100%);
    transition: transform 320ms var(--h22-ease);
  }
  .h22-collapse.is-open { transform: translateX(0); }

  /* Mobile search pinned at top of drawer */
  .h22-mobile-search {
    display: flex; position: relative; align-items: center; margin-bottom: 12px;
  }
  .h22-mobile-search .bi { position: absolute; left: 12px; color: var(--h22-muted); font-size: .9rem; }
  .h22-mobile-search input {
    width: 100%; height: 44px; padding: 0 12px 0 34px;
    border: 1px solid var(--h22-line); border-radius: var(--h22-radius-sm);
    background: var(--h22-line-soft); font-family: inherit; font-size: .9375rem;
  }
  .h22-mobile-search input:focus { outline: none; border-color: var(--h22-accent); background: #fff; }

  .h22-menu { flex-direction: column; align-items: stretch; gap: 2px; }
  .h22-link { height: 48px; width: 100%; justify-content: space-between; font-size: 1rem; padding: 0 14px; }
  .h22-item { border-bottom: 1px solid var(--h22-line-soft); }
  .h22-item:last-child { border-bottom: 0; }

  /* Mega + dropdowns become inline accordions at every depth */
  .h22-mega, .h22-drop {
    position: static; width: auto; opacity: 1; visibility: visible; transform: none;
    pointer-events: auto; border: 0; box-shadow: none; padding: 0;
    max-height: 0; overflow: hidden;
    transition: max-height 300ms var(--h22-ease);
  }
  .h22-item.is-open > .h22-mega,
  .h22-item.is-open > .h22-drop,
  .h22-drop__item--sub.is-open > .h22-drop--sub { max-height: 1400px; }

  .h22-mega { padding: 0 0 8px; }
  .h22-mega__grid { grid-template-columns: 1fr; gap: 0; }
  .h22-mega__col { padding: 4px 0; }
  .h22-mega__label { border-bottom: 0; padding-bottom: 6px; margin-bottom: 2px; }
  .h22-mega__foot { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 8px; padding: 12px 8px 0; }

  /* Nested indentation cues */
  .h22-drop { padding-left: 12px; }
  .h22-drop--sub { top: 0; left: 0; }
  .h22-drop__link { font-size: .9375rem; padding: 11px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .h22-header * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ===== header-23 · .h23-header ===== */
/* ==========================================================================
   HEADER 23 — BANKING / FINANCE
   Self-contained. Tokens namespaced --h23-. 8px spacing rhythm.
   Palette: deep navy ink + one restrained gold-amber accent for trust.
   Motion: <200ms, cubic-bezier(.4,0,.2,1). Calm, precise, institutional.
   ========================================================================== */

:root {
  /* Navy ink / neutrals */
  --h23-navy: #0a2540;        /* deep brand navy */
  --h23-navy-700: #0e3050;
  --h23-ink: #10223a;
  --h23-body: #435269;
  --h23-muted: #6b7890;
  --h23-line: #e3e8ef;
  --h23-line-soft: #eef1f6;
  --h23-bg: #ffffff;
  --h23-hover: #f2f5f9;

  /* Restrained accent — refined amber/gold, used sparingly for CTA/highlight */
  --h23-accent: #b8842a;
  --h23-accent-700: #9c6f1f;
  --h23-accent-tint: #f7efe0;
  /* Secondary trust blue for icon tiles */
  --h23-blue: #1c5fb0;
  --h23-blue-tint: #e8f0fa;

  /* Elevation */
  --h23-shadow-pop: 0 1px 2px rgba(10, 37, 64, .06), 0 18px 44px -16px rgba(10, 37, 64, .24);
  --h23-shadow-bar: 0 1px 0 rgba(10, 37, 64, .08);

  /* System */
  --h23-radius: 12px;
  --h23-radius-sm: 9px;
  --h23-ease: cubic-bezier(.4, 0, .2, 1);
  --h23-dur: 175ms;
  --h23-h: 68px;
  --h23-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.h23-header, .h23-header *,
.h23-scrim, .h23-scrim * { box-sizing: border-box; }
.h23-header {
  font-family: var(--h23-font);
  color: var(--h23-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Accessible skip link */
.h23-skip {
  position: absolute; left: 16px; top: -60px; z-index: 1100;
  padding: 10px 16px; border-radius: 8px; background: var(--h23-navy); color: #fff;
  font-size: .875rem; font-weight: 500; text-decoration: none;
  transition: top var(--h23-dur) var(--h23-ease);
}
.h23-skip:focus { top: 12px; }

.h23-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* ==========================================================================
   HEADER SHELL — utility strip + main bar; sticky collapses the strip away
   ========================================================================== */
.h23-header { position: sticky; top: 0; z-index: 1030; }

/* Slim secure utility strip on deep navy */
.h23-utility {
  background: var(--h23-navy);
  color: #cdd8e6;
  overflow: hidden;
  max-height: 40px;
  transition: max-height var(--h23-dur) var(--h23-ease), opacity var(--h23-dur) var(--h23-ease);
}
.h23-utility__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 40px; font-size: .8125rem;
}
.h23-utility__secure { margin: 0; display: inline-flex; align-items: center; gap: 7px; font-weight: 500; }
.h23-utility__secure i { color: #7fb0e6; }
.h23-utility__links { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; }
.h23-utility__links a {
  display: inline-flex; align-items: center; gap: 6px;
  color: #cdd8e6; text-decoration: none; font-weight: 500;
  transition: color var(--h23-dur) var(--h23-ease);
}
.h23-utility__links a:hover { color: #fff; }
.h23-utility__links i { opacity: .8; }

/* On scroll, tuck the utility strip away for a compact, focused bar */
.h23-header.is-stuck .h23-utility { max-height: 0; opacity: 0; }

/* Main bar */
.h23-bar {
  background: var(--h23-bg);
  border-bottom: 1px solid var(--h23-line-soft);
  transition: border-color var(--h23-dur) var(--h23-ease), box-shadow var(--h23-dur) var(--h23-ease);
}
.h23-header.is-stuck .h23-bar {
  border-bottom-color: var(--h23-line);
  box-shadow: var(--h23-shadow-bar);
}

.h23-nav { display: flex; align-items: center; gap: 36px; height: var(--h23-h); }

/* --- Brand ------------------------------------------------------------- */
.h23-brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--h23-navy); flex: 0 0 auto;
}
.h23-brand__logo { color: var(--h23-navy); display: block; }
.h23-brand__name { font-size: 1.1875rem; font-weight: 700; letter-spacing: -.02em; }
.h23-brand__sub { font-weight: 400; color: var(--h23-muted); }

/* ==========================================================================
   PRIMARY MENU
   ========================================================================== */
.h23-collapse { flex: 1 1 auto; }
.h23-menu {
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: 0;
}
.h23-item { position: relative; }

.h23-link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 14px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .9375rem; font-weight: 500;
  color: var(--h23-body); text-decoration: none;
  border-radius: var(--h23-radius-sm);
  transition: color var(--h23-dur) var(--h23-ease), background var(--h23-dur) var(--h23-ease);
}
.h23-link:hover { color: var(--h23-navy); background: var(--h23-hover); }
.h23-chevron { color: currentColor; opacity: .55; transition: transform var(--h23-dur) var(--h23-ease); }
.h23-item.is-open > .h23-trigger { color: var(--h23-navy); background: var(--h23-hover); }
.h23-item.is-open > .h23-trigger .h23-chevron { transform: rotate(180deg); }

/* Keyboard focus */
:where(.h23-link, .h23-drop__link, .h23-cta, .h23-login, .h23-burger, .h23-tile, .h23-rate__cta, .h23-utility__links a):focus-visible {
  outline: 2px solid var(--h23-blue); outline-offset: 2px;
}

/* ==========================================================================
   MEGA MENU — product tiles + rate highlight
   ========================================================================== */
.h23-mega, .h23-drop {
  position: absolute; top: calc(100% + 12px); left: 0;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--h23-dur) var(--h23-ease), transform var(--h23-dur) var(--h23-ease), visibility var(--h23-dur) var(--h23-ease);
  pointer-events: none;
}
.h23-item.is-open > .h23-mega, .h23-item.is-open > .h23-drop {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

.h23-mega {
  width: 900px;
  display: grid; grid-template-columns: 1fr 236px; gap: 24px;
  background: var(--h23-bg);
  border: 1px solid var(--h23-line);
  border-radius: var(--h23-radius);
  box-shadow: var(--h23-shadow-pop);
  padding: 24px;
}
.h23-mega__cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.h23-mega__label {
  margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--h23-line-soft);
  font-size: .6875rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--h23-navy);
}
.h23-tiles { display: flex; flex-direction: column; gap: 4px; }
.h23-tile {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: var(--h23-radius-sm);
  text-decoration: none; color: var(--h23-ink);
  transition: background var(--h23-dur) var(--h23-ease);
}
.h23-tile:hover { background: var(--h23-hover); }
.h23-tile__ic {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--h23-blue-tint); color: var(--h23-blue); font-size: 1rem;
}
.h23-tile__t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.h23-tile__t strong { font-size: .875rem; font-weight: 600; line-height: 1.25; }
.h23-tile__t span { font-size: .78125rem; color: var(--h23-muted); line-height: 1.35; }

/* Rate highlight — calm, single accent */
.h23-rate {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px; border-radius: var(--h23-radius);
  background: linear-gradient(160deg, #0a2540, #123657);
  color: #eaf1f9;
}
.h23-rate__label { margin: 0; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #9db8d4; }
.h23-rate__num { margin: 2px 0 0; font-size: 2.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; color: #fff; }
.h23-rate__num span { font-size: .9375rem; font-weight: 500; color: #c8d6e6; margin-left: 4px; }
.h23-rate__note { margin: 4px 0 0; font-size: .78125rem; color: #a9bdd5; line-height: 1.4; }
.h23-rate__cta {
  margin-top: auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: var(--h23-radius-sm);
  background: var(--h23-accent); color: #fff; text-decoration: none;
  font-size: .875rem; font-weight: 600;
  transition: background var(--h23-dur) var(--h23-ease);
}
.h23-rate__cta:hover { background: var(--h23-accent-700); }
.h23-rate__cta i { transition: transform var(--h23-dur) var(--h23-ease); }
.h23-rate__cta:hover i { transform: translateX(3px); }

/* ==========================================================================
   DROPDOWN + NESTED (support)
   ========================================================================== */
.h23-drop {
  min-width: 244px; list-style: none; margin: 0; padding: 6px;
  background: var(--h23-bg); border: 1px solid var(--h23-line);
  border-radius: var(--h23-radius); box-shadow: var(--h23-shadow-pop);
}
.h23-drop__item { position: relative; }
.h23-drop__link {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 9px 12px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .875rem; font-weight: 500; text-align: left;
  color: var(--h23-body); text-decoration: none; border-radius: var(--h23-radius-sm);
  transition: color var(--h23-dur) var(--h23-ease), background var(--h23-dur) var(--h23-ease);
}
.h23-drop__link > i:first-child { color: var(--h23-blue); font-size: .95rem; width: 18px; }
.h23-drop__link:hover { color: var(--h23-navy); background: var(--h23-hover); }
.h23-drop__caret { margin-left: auto; font-size: .7rem; opacity: .5; }
.h23-drop__item--sub.is-open > .h23-drop__trigger { color: var(--h23-navy); background: var(--h23-hover); }
.h23-drop--sub { top: -7px; left: calc(100% + 6px); }
.h23-drop__item--sub.is-open > .h23-drop--sub {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
.h23-drop--sub .h23-drop__link { padding-left: 34px; }

/* ==========================================================================
   ACTIONS — login + open account
   ========================================================================== */
.h23-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: 0 0 auto; }
.h23-login {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0 14px; height: 40px;
  font-size: .9375rem; font-weight: 600; color: var(--h23-navy); text-decoration: none;
  border: 1px solid var(--h23-line); border-radius: var(--h23-radius-sm);
  transition: border-color var(--h23-dur) var(--h23-ease), background var(--h23-dur) var(--h23-ease);
}
.h23-login i { font-size: .85rem; }
.h23-login:hover { border-color: var(--h23-navy); background: var(--h23-hover); }
.h23-cta {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px;
  font-size: .9375rem; font-weight: 600; color: #fff; text-decoration: none;
  background: var(--h23-navy); border-radius: var(--h23-radius-sm);
  transition: background var(--h23-dur) var(--h23-ease), transform var(--h23-dur) var(--h23-ease);
}
.h23-cta:hover { background: var(--h23-navy-700); }
.h23-cta:active { transform: translateY(1px); }

/* --- Hamburger --------------------------------------------------------- */
.h23-burger {
  display: none; position: relative; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--h23-line); border-radius: var(--h23-radius-sm);
  background: #fff; cursor: pointer;
}
.h23-burger span {
  position: absolute; left: 11px; width: 18px; height: 1.8px; border-radius: 2px;
  background: var(--h23-navy);
  transition: transform var(--h23-dur) var(--h23-ease), opacity var(--h23-dur) var(--h23-ease);
}
.h23-burger span:nth-child(1) { top: 14px; }
.h23-burger span:nth-child(2) { top: 19px; }
.h23-burger span:nth-child(3) { top: 24px; }
.h23-burger[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.h23-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.h23-burger[aria-expanded="true"] span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

/* Mobile scrim */
.h23-scrim {
  position: fixed; inset: 0; z-index: 1029;
  background: rgba(10, 37, 64, .38); opacity: 0;
  transition: opacity var(--h23-dur) var(--h23-ease);
}
.h23-scrim.is-shown { opacity: 1; }

/* Pinned login shown only in the mobile drawer */
.h23-drawer-login { display: none; }

/* ==========================================================================
   RESPONSIVE — reassuring drawer with pinned login
   ========================================================================== */
@media (max-width: 991.98px) {
  .h23-nav { gap: 0; }
  .h23-burger { display: block; }
  .h23-login, .h23-cta { display: none; }
  .h23-actions { margin-left: auto; }
  .h23-utility__links li:first-child,
  .h23-utility__links li:nth-child(3) { display: none; }

  .h23-collapse {
    position: fixed; top: 0; right: 0; z-index: 1031;
    width: min(400px, 90vw); height: 100dvh;
    background: #fff; border-left: 1px solid var(--h23-line);
    box-shadow: -24px 0 60px -30px rgba(10, 37, 64, .34);
    padding: 84px 16px 120px; overflow-y: auto;
    transform: translateX(100%);
    transition: transform 320ms var(--h23-ease);
  }
  .h23-collapse.is-open { transform: translateX(0); }

  .h23-menu { flex-direction: column; align-items: stretch; gap: 2px; }
  .h23-link { height: 50px; width: 100%; justify-content: space-between; font-size: 1rem; padding: 0 14px; }
  .h23-item { border-bottom: 1px solid var(--h23-line-soft); }
  .h23-item:last-child { border-bottom: 0; }

  /* Mega + dropdowns become inline accordions */
  .h23-mega, .h23-drop {
    position: static; width: auto; opacity: 1; visibility: visible; transform: none;
    pointer-events: auto; border: 0; box-shadow: none; padding: 0;
    max-height: 0; overflow: hidden; display: block;
    transition: max-height 320ms var(--h23-ease);
  }
  .h23-item.is-open > .h23-mega,
  .h23-item.is-open > .h23-drop,
  .h23-drop__item--sub.is-open > .h23-drop--sub { max-height: 1600px; }

  .h23-mega { padding: 0 0 8px; }
  .h23-mega__cols { grid-template-columns: 1fr; gap: 4px; }
  .h23-mega__label { border-bottom: 0; margin-bottom: 4px; padding-bottom: 4px; }
  .h23-rate { display: none; }  /* keep the mobile accordion calm and uncluttered */
  .h23-drop--sub { top: 0; left: 0; }
  .h23-drop--sub .h23-drop__link { padding-left: 30px; }

  /* Pinned login block at the foot of the drawer */
  .h23-drawer-login {
    display: flex; flex-direction: column; gap: 10px;
    position: absolute; left: 16px; right: 16px; bottom: 24px;
    padding-top: 18px; border-top: 1px solid var(--h23-line);
  }
  .h23-drawer-login .h23-d-login {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 46px; border-radius: var(--h23-radius-sm);
    border: 1px solid var(--h23-navy); color: var(--h23-navy);
    font-size: .9375rem; font-weight: 600; text-decoration: none;
  }
  .h23-drawer-login .h23-d-cta {
    display: inline-flex; align-items: center; justify-content: center;
    height: 46px; border-radius: var(--h23-radius-sm);
    background: var(--h23-navy); color: #fff;
    font-size: .9375rem; font-weight: 600; text-decoration: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .h23-header, .h23-header *, .h23-scrim { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ===== header-24 · .h24-header ===== */
/* ==========================================================================
   HEADER 24 — HEALTHCARE / MEDICAL
   Self-contained. Tokens --h24-. Emergency strip + calm teal main bar.
   Clinical clarity, 8px rhythm, motion <200ms.
   ========================================================================== */

:root {
  --h24-ink: #0e2a2b;
  --h24-body: #3f5658;
  --h24-muted: #6a8082;
  --h24-line: #e2edec;
  --h24-line-soft: #eef5f4;
  --h24-bg: #ffffff;
  --h24-hover: #eef7f6;
  --h24-teal: #0e8f86;
  --h24-teal-700: #0a726b;
  --h24-tint: #e4f3f1;
  --h24-emerg: #b23a3a;
  --h24-shadow: 0 1px 2px rgba(14,42,43,.05), 0 18px 44px -18px rgba(14,42,43,.2);
  --h24-radius: 14px;
  --h24-radius-sm: 10px;
  --h24-ease: cubic-bezier(.4,0,.2,1);
  --h24-dur: 180ms;
  --h24-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.h24-header, .h24-header * { box-sizing: border-box; }
.h24-header { font-family: var(--h24-font); color: var(--h24-ink); -webkit-font-smoothing: antialiased; }
.h24-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

.h24-skip { position: absolute; left: 16px; top: -60px; z-index: 1100; padding: 10px 16px; border-radius: 8px; background: var(--h24-teal); color: #fff; font-size: .875rem; text-decoration: none; transition: top var(--h24-dur) var(--h24-ease); }
.h24-skip:focus { top: 12px; }

/* ===== Shell ===== */
.h24-header { position: sticky; top: 0; z-index: 1030; background: var(--h24-bg); }

/* Emergency strip (recedes on scroll) */
.h24-emergency { background: #fbeceb; color: #7d2b2b; overflow: hidden; max-height: 40px; transition: max-height var(--h24-dur) var(--h24-ease), opacity var(--h24-dur) var(--h24-ease); }
.h24-header.is-stuck .h24-emergency { max-height: 0; opacity: 0; }
.h24-emergency__inner { display: flex; align-items: center; justify-content: space-between; height: 40px; font-size: .8125rem; font-weight: 500; }
.h24-emergency__msg { margin: 0; }
.h24-emergency__msg i { color: var(--h24-emerg); margin-right: 6px; }
.h24-emergency__call { color: #7d2b2b; text-decoration: none; font-weight: 600; }
.h24-emergency__call:hover { color: var(--h24-emerg); }

/* Main bar */
.h24-bar { border-bottom: 1px solid var(--h24-line); background: var(--h24-bg); transition: box-shadow var(--h24-dur) var(--h24-ease); }
.h24-header.is-stuck .h24-bar { box-shadow: 0 1px 0 var(--h24-line), 0 6px 20px -14px rgba(14,42,43,.28); }
.h24-nav { display: flex; align-items: center; gap: 34px; height: 74px; }
.h24-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--h24-ink); flex: 0 0 auto; }
.h24-brand__mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--h24-teal); color: #fff; font-size: 1.1rem; }
.h24-brand__name { font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; }
.h24-brand__sub { color: var(--h24-teal); }

.h24-collapse { flex: 1 1 auto; }
.h24-menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.h24-item { position: relative; }
.h24-link { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: .9375rem; font-weight: 500; color: var(--h24-body); text-decoration: none; border-radius: var(--h24-radius-sm); transition: color var(--h24-dur) var(--h24-ease), background var(--h24-dur) var(--h24-ease); }
.h24-link:hover { color: var(--h24-teal); background: var(--h24-hover); }
.h24-chevron { opacity: .55; transition: transform var(--h24-dur) var(--h24-ease); }
.h24-item.is-open > .h24-trigger { color: var(--h24-teal); background: var(--h24-hover); }
.h24-item.is-open > .h24-trigger .h24-chevron { transform: rotate(180deg); }

:where(.h24-link,.h24-drop__link,.h24-cta,.h24-portal,.h24-burger,.h24-card,.h24-spec,.h24-find__cta):focus-visible { outline: 2px solid var(--h24-teal); outline-offset: 2px; }

/* ===== Mega ===== */
.h24-mega, .h24-drop { position: absolute; top: calc(100% + 10px); left: 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--h24-dur) var(--h24-ease), transform var(--h24-dur) var(--h24-ease), visibility var(--h24-dur) var(--h24-ease); pointer-events: none; }
.h24-item.is-open > .h24-mega, .h24-item.is-open > .h24-drop { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.h24-mega { width: 820px; background: var(--h24-bg); border: 1px solid var(--h24-line); border-radius: var(--h24-radius); box-shadow: var(--h24-shadow); padding: 22px; display: grid; grid-template-columns: 1fr 1fr .9fr; gap: 22px; }
.h24-mega__label { margin: 0 0 12px; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--h24-muted); }
.h24-card { display: flex; align-items: flex-start; gap: 12px; padding: 10px 8px; border-radius: var(--h24-radius-sm); text-decoration: none; color: var(--h24-ink); transition: background var(--h24-dur) var(--h24-ease); }
.h24-card:hover { background: var(--h24-hover); }
.h24-card__ic { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--h24-tint); color: var(--h24-teal); font-size: 1.05rem; }
.h24-card__t { display: flex; flex-direction: column; gap: 2px; }
.h24-card__t strong { font-size: .9rem; font-weight: 600; }
.h24-card__t span { font-size: .8125rem; color: var(--h24-muted); }
.h24-specialties { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.h24-spec { display: flex; align-items: center; gap: 9px; padding: 10px; border-radius: var(--h24-radius-sm); font-size: .875rem; font-weight: 500; color: var(--h24-ink); text-decoration: none; transition: background var(--h24-dur) var(--h24-ease); }
.h24-spec i { color: var(--h24-teal); }
.h24-spec:hover { background: var(--h24-hover); }
.h24-find { background: var(--h24-line-soft); border-radius: var(--h24-radius); padding: 18px; }
.h24-find__desc { font-size: .8125rem; color: var(--h24-muted); margin: 0 0 12px; line-height: 1.5; }
.h24-find__form { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--h24-line); border-radius: var(--h24-radius-sm); padding: 0 12px; height: 42px; margin-bottom: 12px; }
.h24-find__form i { color: var(--h24-muted); }
.h24-find__form input { flex: 1; border: 0; outline: none; font: inherit; font-size: .875rem; background: transparent; }
.h24-find__cta { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 600; color: var(--h24-teal); text-decoration: none; }
.h24-find__cta i { transition: transform var(--h24-dur) var(--h24-ease); }
.h24-find__cta:hover i { transform: translateX(3px); }

/* ===== Dropdown + nested ===== */
.h24-drop { min-width: 240px; list-style: none; margin: 0; padding: 6px; background: var(--h24-bg); border: 1px solid var(--h24-line); border-radius: var(--h24-radius); box-shadow: var(--h24-shadow); }
.h24-drop__item { position: relative; }
.h24-drop__link { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: .875rem; font-weight: 500; text-align: left; color: var(--h24-body); text-decoration: none; border-radius: var(--h24-radius-sm); transition: color var(--h24-dur) var(--h24-ease), background var(--h24-dur) var(--h24-ease); }
.h24-drop__link > i:first-child { color: var(--h24-teal); }
.h24-drop__link:hover { color: var(--h24-teal); background: var(--h24-hover); }
.h24-drop__caret { margin-left: auto; font-size: .7rem; opacity: .5; }
.h24-drop--sub { top: -7px; left: calc(100% + 6px); }
.h24-drop__item--sub.is-open > .h24-drop--sub { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }

/* ===== Actions ===== */
.h24-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: 0 0 auto; }
.h24-portal { display: inline-flex; align-items: center; gap: 7px; font-size: .9375rem; font-weight: 500; color: var(--h24-body); text-decoration: none; }
.h24-portal:hover { color: var(--h24-teal); }
.h24-cta { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; font-size: .9375rem; font-weight: 600; color: #fff; text-decoration: none; background: var(--h24-teal); border-radius: 999px; transition: background var(--h24-dur) var(--h24-ease); }
.h24-cta:hover { background: var(--h24-teal-700); }
.h24-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 0; border: 1px solid var(--h24-line); border-radius: var(--h24-radius-sm); background: #fff; cursor: pointer; }
.h24-burger span { width: 18px; height: 1.8px; margin: 0 auto; border-radius: 2px; background: var(--h24-ink); transition: transform var(--h24-dur) var(--h24-ease), opacity var(--h24-dur) var(--h24-ease); }
.h24-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.h24-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.h24-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.h24-scrim { position: fixed; inset: 0; z-index: 1029; background: rgba(14,42,43,.34); opacity: 0; transition: opacity var(--h24-dur) var(--h24-ease); }
.h24-scrim.is-shown { opacity: 1; }

/* ===== Responsive ===== */
@media (max-width: 991.98px) {
  .h24-burger { display: flex; }
  .h24-portal, .h24-actions > .h24-cta { display: none; }
  .h24-emergency__msg { display: none; }
  .h24-emergency__inner { justify-content: center; }
  .h24-nav { height: 64px; }

  .h24-collapse {
    position: fixed; top: 0; right: 0; z-index: 1031;
    width: min(400px, 90vw); height: 100dvh;
    background: #fff; box-shadow: -24px 0 60px -30px rgba(14,42,43,.3);
    padding: 84px 16px 24px; overflow-y: auto;
    transform: translateX(100%); transition: transform 320ms var(--h24-ease);
  }
  .h24-collapse.is-open { transform: translateX(0); }
  .h24-menu { flex-direction: column; align-items: stretch; gap: 2px; }
  .h24-link { height: 48px; justify-content: space-between; font-size: 1rem; }
  .h24-item { border-bottom: 1px solid var(--h24-line-soft); }
  .h24-mega, .h24-drop { position: static; width: auto; opacity: 1; visibility: visible; transform: none; pointer-events: auto; border: 0; box-shadow: none; padding: 0; display: block; max-height: 0; overflow: hidden; transition: max-height 300ms var(--h24-ease); }
  .h24-item.is-open > .h24-mega, .h24-item.is-open > .h24-drop, .h24-drop__item--sub.is-open > .h24-drop--sub { max-height: 1000px; }
  .h24-mega { grid-template-columns: 1fr; gap: 8px; }
  .h24-find { display: none; }
  .h24-specialties { grid-template-columns: 1fr 1fr; }
  .h24-drop--sub { padding-left: 14px; }
  /* Appointment CTA pinned in drawer */
  .h24-menu::after { content: ""; display: block; }
  .h24-collapse::after { content: "Book appointment"; display: block; text-align: center; margin-top: 18px; padding: 14px; border-radius: 999px; background: var(--h24-teal); color: #fff; font-weight: 600; }
}
@media (min-width: 992px) { .h24-scrim { display: none; } }

@media (prefers-reduced-motion: reduce) { .h24-header * { transition-duration: .01ms !important; } }

/* ===== header-25 · .h25-header ===== */
/* ==========================================================================
   HEADER 25 — EDUCATION / UNIVERSITY
   Self-contained. Tokens --h25-. Top bar + main nav, programs mega, search.
   ========================================================================== */
:root{
  --h25-ink:#101a2e; --h25-body:#43506a; --h25-muted:#6c778c;
  --h25-line:#e6e9f1; --h25-line-soft:#f1f3f8; --h25-bg:#fff; --h25-hover:#eef3fb;
  --h25-accent:#1e4fb0; --h25-accent-700:#173e8c; --h25-tint:#e7effb; --h25-gold:#c98a1e;
  --h25-shadow:0 1px 2px rgba(16,26,46,.05),0 18px 44px -18px rgba(16,26,46,.22);
  --h25-radius:12px; --h25-radius-sm:9px; --h25-ease:cubic-bezier(.4,0,.2,1); --h25-dur:180ms;
  --h25-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.h25-header,.h25-header *{box-sizing:border-box;} .h25-header{font-family:var(--h25-font);color:var(--h25-ink);-webkit-font-smoothing:antialiased;}
.h25-container{max-width:1240px;margin:0 auto;padding:0 24px;}
.h25-skip{position:absolute;left:16px;top:-60px;z-index:1100;padding:10px 16px;border-radius:8px;background:var(--h25-accent);color:#fff;font-size:.875rem;text-decoration:none;transition:top var(--h25-dur) var(--h25-ease);} .h25-skip:focus{top:12px;}

.h25-header{position:sticky;top:0;z-index:1030;background:var(--h25-bg);}
.h25-top{background:var(--h25-ink);color:#c7d1e4;overflow:hidden;max-height:40px;transition:max-height var(--h25-dur) var(--h25-ease),opacity var(--h25-dur) var(--h25-ease);}
.h25-header.is-stuck .h25-top{max-height:0;opacity:0;}
.h25-top__row{display:flex;align-items:center;justify-content:space-between;height:40px;font-size:.8125rem;}
.h25-top__right{display:flex;gap:18px;} .h25-top a{color:#c7d1e4;text-decoration:none;} .h25-top a:hover{color:#fff;} .h25-top i{margin-right:5px;color:#8fa6cf;}

.h25-bar{border-bottom:1px solid var(--h25-line);transition:box-shadow var(--h25-dur) var(--h25-ease);}
.h25-header.is-stuck .h25-bar{box-shadow:0 1px 0 var(--h25-line),0 6px 20px -14px rgba(16,26,46,.28);}
.h25-nav{display:flex;align-items:center;gap:30px;height:72px;}
.h25-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--h25-ink);flex:0 0 auto;}
.h25-brand__mark{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--h25-accent);color:#fff;font-size:1.1rem;}
.h25-brand__name{font-size:1.15rem;font-weight:700;letter-spacing:-.01em;line-height:1;} .h25-brand__sub{display:block;font-size:.72rem;font-weight:500;color:var(--h25-muted);letter-spacing:.06em;text-transform:uppercase;}

.h25-collapse{flex:1 1 auto;}
.h25-menu{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;}
.h25-item{position:relative;}
.h25-link{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 14px;border:0;background:none;cursor:pointer;font:inherit;font-size:.9375rem;font-weight:500;color:var(--h25-body);text-decoration:none;border-radius:var(--h25-radius-sm);transition:color var(--h25-dur) var(--h25-ease),background var(--h25-dur) var(--h25-ease);}
.h25-link:hover{color:var(--h25-accent);background:var(--h25-hover);}
.h25-chevron{opacity:.55;transition:transform var(--h25-dur) var(--h25-ease);}
.h25-item.is-open>.h25-trigger{color:var(--h25-accent);background:var(--h25-hover);} .h25-item.is-open>.h25-trigger .h25-chevron{transform:rotate(180deg);}
:where(.h25-link,.h25-drop__link,.h25-cta,.h25-burger,.h25-mlink,.h25-feat):focus-visible{outline:2px solid var(--h25-accent);outline-offset:2px;}

.h25-mega,.h25-drop{position:absolute;top:calc(100% + 10px);left:0;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity var(--h25-dur) var(--h25-ease),transform var(--h25-dur) var(--h25-ease),visibility var(--h25-dur) var(--h25-ease);pointer-events:none;}
.h25-item.is-open>.h25-mega,.h25-item.is-open>.h25-drop{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
.h25-mega{width:680px;background:var(--h25-bg);border:1px solid var(--h25-line);border-radius:var(--h25-radius);box-shadow:var(--h25-shadow);padding:20px;display:grid;grid-template-columns:1.5fr 1fr;gap:18px;}
.h25-mega__cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.h25-mega__label{margin:0 0 8px;font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--h25-muted);}
.h25-mlink{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:var(--h25-radius-sm);text-decoration:none;color:var(--h25-ink);font-size:.875rem;font-weight:500;transition:background var(--h25-dur) var(--h25-ease);}
.h25-mlink i{color:var(--h25-accent);} .h25-mlink:hover{background:var(--h25-hover);}
.h25-mega__side{display:flex;flex-direction:column;gap:12px;}
.h25-feat{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:var(--h25-radius);background:var(--h25-accent);color:#fff;text-decoration:none;}
.h25-feat__tag{align-self:flex-start;font-size:.6875rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.2);}
.h25-feat__title{font-size:1.05rem;font-weight:700;margin-top:4px;} .h25-feat__cta{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:600;}
.h25-feat__cta i{transition:transform var(--h25-dur) var(--h25-ease);} .h25-feat:hover .h25-feat__cta i{transform:translateX(3px);}
.h25-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.h25-stat{border:1px solid var(--h25-line);border-radius:var(--h25-radius-sm);padding:10px 12px;} .h25-stat strong{display:block;font-size:1.25rem;color:var(--h25-gold);} .h25-stat span{font-size:.72rem;color:var(--h25-muted);}

.h25-drop{min-width:220px;list-style:none;margin:0;padding:6px;background:var(--h25-bg);border:1px solid var(--h25-line);border-radius:var(--h25-radius);box-shadow:var(--h25-shadow);}
.h25-drop__item{position:relative;}
.h25-drop__link{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:9px 12px;border:0;background:none;cursor:pointer;font:inherit;font-size:.875rem;font-weight:500;text-align:left;color:var(--h25-body);text-decoration:none;border-radius:var(--h25-radius-sm);transition:color var(--h25-dur) var(--h25-ease),background var(--h25-dur) var(--h25-ease);}
.h25-drop__link:hover{color:var(--h25-accent);background:var(--h25-hover);} .h25-drop__caret{font-size:.7rem;opacity:.5;}
.h25-drop--sub{top:-7px;left:calc(100% + 6px);} .h25-drop__item--sub.is-open>.h25-drop--sub{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}

.h25-actions{display:flex;align-items:center;gap:12px;margin-left:auto;flex:0 0 auto;}
.h25-search{display:flex;align-items:center;gap:8px;width:180px;height:40px;padding:0 12px;background:var(--h25-line-soft);border:1px solid transparent;border-radius:999px;transition:border-color var(--h25-dur) var(--h25-ease),background var(--h25-dur) var(--h25-ease);}
.h25-search:focus-within{background:#fff;border-color:var(--h25-accent);} .h25-search i{color:var(--h25-muted);} .h25-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:.875rem;}
.h25-cta{display:inline-flex;align-items:center;height:42px;padding:0 20px;font-size:.9375rem;font-weight:600;color:#fff;text-decoration:none;background:var(--h25-gold);border-radius:999px;transition:filter var(--h25-dur) var(--h25-ease);} .h25-cta:hover{filter:brightness(.94);}
.h25-burger{display:none;position:relative;width:40px;height:40px;padding:0;border:1px solid var(--h25-line);border-radius:var(--h25-radius-sm);background:#fff;cursor:pointer;}
.h25-burger span{position:absolute;left:11px;width:18px;height:1.8px;border-radius:2px;background:var(--h25-ink);transition:transform var(--h25-dur) var(--h25-ease);} .h25-burger span:nth-child(1){top:16px;} .h25-burger span:nth-child(2){bottom:16px;}
.h25-burger[aria-expanded="true"] span:nth-child(1){top:19px;transform:rotate(45deg);} .h25-burger[aria-expanded="true"] span:nth-child(2){bottom:19px;transform:rotate(-45deg);}
.h25-scrim{position:fixed;inset:0;z-index:1029;background:rgba(16,26,46,.34);opacity:0;transition:opacity var(--h25-dur) var(--h25-ease);} .h25-scrim.is-shown{opacity:1;}

@media (max-width:991.98px){
  .h25-burger{display:block;} .h25-search,.h25-actions>.h25-cta{display:none;} .h25-top{display:none;}
  .h25-collapse{position:fixed;top:0;right:0;z-index:1031;width:min(390px,90vw);height:100dvh;background:#fff;box-shadow:-24px 0 60px -30px rgba(16,26,46,.3);padding:84px 16px 24px;overflow-y:auto;transform:translateX(100%);transition:transform 320ms var(--h25-ease);}
  .h25-collapse.is-open{transform:translateX(0);}
  .h25-menu{flex-direction:column;align-items:stretch;gap:2px;} .h25-link{height:48px;justify-content:space-between;font-size:1rem;} .h25-item{border-bottom:1px solid var(--h25-line-soft);}
  .h25-mega,.h25-drop{position:static;width:auto;opacity:1;visibility:visible;transform:none;pointer-events:auto;border:0;box-shadow:none;padding:0;display:block;max-height:0;overflow:hidden;transition:max-height 300ms var(--h25-ease);}
  .h25-item.is-open>.h25-mega,.h25-item.is-open>.h25-drop,.h25-drop__item--sub.is-open>.h25-drop--sub{max-height:900px;}
  .h25-mega__cols{grid-template-columns:1fr;} .h25-mega__side{display:none;} .h25-drop--sub{padding-left:14px;}
  .h25-collapse::after{content:"Apply now";display:block;text-align:center;margin-top:18px;padding:13px;border-radius:999px;background:var(--h25-gold);color:#fff;font-weight:600;}
}
@media (min-width:992px){.h25-scrim{display:none;}}

@media (prefers-reduced-motion:reduce){.h25-header *{transition-duration:.01ms !important;}}

/* ===== header-26 · .h26-header ===== */
/* ==========================================================================
   HEADER 26 — LAW FIRM  ·  Authority, understated
   Self-contained. Tokens namespaced --h26-. 8px spacing rhythm.
   Palette: deep navy ink + one restrained gold accent, warm paper neutrals.
   Type: Playfair Display for the wordmark + section headings (gravitas),
   Inter for navigation and UI. Motion <200ms, cubic-bezier(.4,0,.2,1).
   ========================================================================== */

:root {
  /* Ink / neutrals — deep navy family */
  --h26-navy: #16233c;        /* primary ink */
  --h26-navy-800: #1e2f4d;
  --h26-body: #47526a;        /* nav resting */
  --h26-muted: #79839a;
  --h26-line: #e6e3db;        /* warm hairline */
  --h26-line-soft: #f0eee7;
  --h26-bg: #ffffff;
  --h26-paper: #faf9f5;       /* warm off-white surface */
  --h26-hover: #f3f1ea;

  /* Single accent — restrained gold */
  --h26-gold: #a67c34;
  --h26-gold-700: #8a6526;
  --h26-gold-tint: #f5eede;

  /* Elevation */
  --h26-shadow-pop: 0 1px 2px rgba(22, 35, 60, .05), 0 18px 44px -18px rgba(22, 35, 60, .28);
  --h26-shadow-bar: 0 1px 0 rgba(22, 35, 60, .07);

  /* System */
  --h26-radius: 4px;          /* squared, formal */
  --h26-radius-sm: 3px;
  --h26-ease: cubic-bezier(.4, 0, .2, 1);
  --h26-dur: 180ms;
  --h26-h: 74px;
  --h26-util-h: 40px;
  /* Serif: self-host Fraunces (dış Google Font eklenmez; Playfair yerine) */
  --h26-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --h26-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.h26-header, .h26-header * { box-sizing: border-box; }
.h26-header {
  font-family: var(--h26-sans);
  color: var(--h26-navy);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Accessible skip link */
.h26-skip {
  position: absolute; left: 16px; top: -60px; z-index: 1100;
  padding: 10px 16px; border-radius: var(--h26-radius); background: var(--h26-navy); color: #fff;
  font-size: .875rem; font-weight: 500; text-decoration: none;
  transition: top var(--h26-dur) var(--h26-ease);
}
.h26-skip:focus { top: 12px; }

/* ==========================================================================
   HEADER SHELL — two tier
   ========================================================================== */
.h26-header {
  position: sticky; top: 0; z-index: 1030;
  background: var(--h26-bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--h26-dur) var(--h26-ease), box-shadow var(--h26-dur) var(--h26-ease);
}
.h26-header.is-stuck {
  border-bottom-color: var(--h26-line);
  box-shadow: var(--h26-shadow-bar);
}

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

/* --- Utility strip (retracts on scroll) -------------------------------- */
.h26-utility {
  background: var(--h26-navy);
  color: #cfd6e3;
  max-height: var(--h26-util-h);
  overflow: hidden;
  transition: max-height var(--h26-dur) var(--h26-ease), opacity var(--h26-dur) var(--h26-ease);
}
.h26-header.is-stuck .h26-utility { max-height: 0; opacity: 0; }
.h26-utility__row {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--h26-util-h); font-size: .8125rem;
}
.h26-utility__note { margin: 0; color: #aab4c6; letter-spacing: .01em; }
.h26-utility__note i { color: var(--h26-gold); margin-right: 4px; }
.h26-utility__links { display: flex; align-items: center; gap: 16px; }
.h26-utility__links a {
  color: #cfd6e3; text-decoration: none; font-weight: 500;
  transition: color var(--h26-dur) var(--h26-ease);
}
.h26-utility__links a:hover { color: #fff; }
.h26-utility__links i { color: var(--h26-gold); margin-right: 5px; }
.h26-utility__sep { width: 1px; height: 14px; background: rgba(255,255,255,.18); }

/* --- Main nav row ------------------------------------------------------ */
.h26-nav { display: flex; align-items: center; gap: 44px; height: var(--h26-h); }

/* --- Brand ------------------------------------------------------------- */
.h26-brand {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--h26-navy); flex: 0 0 auto;
}
.h26-brand__mark { color: var(--h26-gold); display: block; }
.h26-brand__name {
  font-family: var(--h26-serif); font-size: 1.4rem; font-weight: 600;
  letter-spacing: .005em; line-height: 1;
}

/* ==========================================================================
   PRIMARY MENU
   ========================================================================== */
.h26-collapse { flex: 1 1 auto; display: flex; align-items: center; }
.h26-drawer__eyebrow, .h26-drawer__cta { display: none; }
.h26-menu {
  display: flex; align-items: center; gap: 6px;
  list-style: none; margin: 0; padding: 0;
}
.h26-item { position: relative; }

.h26-link {
  display: inline-flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 14px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .9375rem; font-weight: 500;
  color: var(--h26-body); text-decoration: none;
  border-radius: var(--h26-radius-sm); position: relative;
  transition: color var(--h26-dur) var(--h26-ease);
}
/* Gold underline that grows from center — refined, formal hover */
.h26-link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 8px;
  height: 1.5px; background: var(--h26-gold); transform: scaleX(0); transform-origin: center;
  transition: transform var(--h26-dur) var(--h26-ease);
}
.h26-link:hover { color: var(--h26-navy); }
.h26-link:hover::after { transform: scaleX(1); }
.h26-chevron { color: var(--h26-gold); opacity: .8; transition: transform var(--h26-dur) var(--h26-ease); }
.h26-item.is-open > .h26-trigger { color: var(--h26-navy); }
.h26-item.is-open > .h26-trigger::after { transform: scaleX(1); }
.h26-item.is-open > .h26-trigger .h26-chevron { transform: rotate(180deg); }

/* Keyboard focus */
:where(.h26-link, .h26-drop__link, .h26-cta, .h26-phone, .h26-burger, .h26-mega__link, .h26-consult__btn, .h26-utility__links a):focus-visible {
  outline: 2px solid var(--h26-gold); outline-offset: 2px; border-radius: var(--h26-radius-sm);
}

/* ==========================================================================
   MEGA MENU — grouped legal specialties + consultation card
   ========================================================================== */
.h26-mega, .h26-drop {
  position: absolute; top: calc(100% + 8px); left: 0;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--h26-dur) var(--h26-ease), transform var(--h26-dur) var(--h26-ease), visibility var(--h26-dur) var(--h26-ease);
  pointer-events: none;
}
.h26-item.is-open > .h26-mega, .h26-item.is-open > .h26-drop {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

.h26-mega {
  width: 780px;
  background: var(--h26-bg);
  border: 1px solid var(--h26-line);
  border-top: 3px solid var(--h26-gold);   /* gold rule signals authority */
  border-radius: 0 0 var(--h26-radius) var(--h26-radius);
  box-shadow: var(--h26-shadow-pop);
  padding: 28px;
}
.h26-mega__body { display: grid; grid-template-columns: 1fr 290px; gap: 28px; }
.h26-mega__groups { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.h26-mega__group { display: flex; flex-direction: column; }
.h26-mega__group:first-child { grid-column: 1 / -1; }  /* Corporate spans; visual hierarchy */
.h26-mega__group:first-child { display: block; }
.h26-mega__label {
  margin: 0 0 8px; padding-bottom: 8px; font-family: var(--h26-serif);
  font-size: .95rem; font-weight: 600; color: var(--h26-navy);
  border-bottom: 1px solid var(--h26-line-soft);
}
.h26-mega__group:first-child .h26-mega__link { display: inline-flex; width: calc(50% - 8px); }
.h26-mega__link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--h26-radius-sm);
  text-decoration: none; color: var(--h26-body); font-size: .875rem; font-weight: 500;
  transition: background var(--h26-dur) var(--h26-ease), color var(--h26-dur) var(--h26-ease);
}
.h26-mega__link:hover { background: var(--h26-hover); color: var(--h26-navy); }
.h26-mega__link i { color: var(--h26-gold); font-size: .95rem; width: 18px; text-align: center; }

/* Consultation card */
.h26-consult {
  background: var(--h26-navy);
  border-radius: var(--h26-radius);
  padding: 24px; color: #dfe4ec;
  display: flex; flex-direction: column;
}
.h26-consult__eyebrow {
  margin: 0 0 8px; font-size: .6875rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--h26-gold);
}
.h26-consult__title {
  margin: 0 0 8px; font-family: var(--h26-serif); font-size: 1.2rem;
  font-weight: 600; line-height: 1.3; color: #fff;
}
.h26-consult__desc { margin: 0 0 18px; font-size: .8125rem; line-height: 1.55; color: #aab4c6; }
.h26-consult__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 16px; background: var(--h26-gold); color: #fff;
  font-size: .875rem; font-weight: 600; text-decoration: none;
  border-radius: var(--h26-radius-sm);
  transition: background var(--h26-dur) var(--h26-ease);
}
.h26-consult__btn:hover { background: var(--h26-gold-700); }
.h26-consult__btn i { transition: transform var(--h26-dur) var(--h26-ease); }
.h26-consult__btn:hover i { transform: translateX(3px); }
.h26-consult__meta {
  margin: 14px 0 0; font-size: .6875rem; color: #8792a8; display: flex; align-items: center; gap: 6px;
}
.h26-consult__meta i { color: var(--h26-gold); }

/* ==========================================================================
   DROPDOWN + NESTED — Firm
   ========================================================================== */
.h26-drop {
  min-width: 230px; list-style: none; margin: 0; padding: 8px;
  background: var(--h26-bg); border: 1px solid var(--h26-line);
  border-top: 3px solid var(--h26-gold);
  border-radius: 0 0 var(--h26-radius) var(--h26-radius); box-shadow: var(--h26-shadow-pop);
}
.h26-drop__item { position: relative; }
.h26-drop__link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 10px 12px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .875rem; font-weight: 500; text-align: left;
  color: var(--h26-body); text-decoration: none; border-radius: var(--h26-radius-sm);
  transition: color var(--h26-dur) var(--h26-ease), background var(--h26-dur) var(--h26-ease);
}
.h26-drop__link:hover { color: var(--h26-navy); background: var(--h26-hover); }
.h26-drop__caret { font-size: .7rem; color: var(--h26-gold); }
.h26-drop--sub { top: -11px; left: calc(100% + 8px); border-top-width: 3px; }
.h26-drop__item--sub.is-open > .h26-drop--sub {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

/* ==========================================================================
   ACTIONS
   ========================================================================== */
.h26-actions { display: flex; align-items: center; gap: 18px; margin-left: auto; flex: 0 0 auto; }
.h26-phone {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .9375rem; font-weight: 600; color: var(--h26-navy); text-decoration: none;
  transition: color var(--h26-dur) var(--h26-ease);
}
.h26-phone i { color: var(--h26-gold); font-size: 1rem; }
.h26-phone:hover { color: var(--h26-gold-700); }
.h26-cta {
  display: inline-flex; align-items: center; height: 44px; padding: 0 22px;
  font-size: .9375rem; font-weight: 600; color: #fff; text-decoration: none;
  background: var(--h26-navy); border: 1px solid var(--h26-navy);
  border-radius: var(--h26-radius-sm); letter-spacing: .01em;
  transition: background var(--h26-dur) var(--h26-ease), transform var(--h26-dur) var(--h26-ease);
}
.h26-cta:hover { background: var(--h26-navy-800); }
.h26-cta:active { transform: translateY(1px); }

/* --- Hamburger (three-line, morphs to X) ------------------------------- */
.h26-burger {
  display: none; position: relative; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--h26-line); border-radius: var(--h26-radius-sm);
  background: #fff; cursor: pointer;
}
.h26-burger span {
  position: absolute; left: 13px; width: 18px; height: 1.8px; border-radius: 2px;
  background: var(--h26-navy);
  transition: transform var(--h26-dur) var(--h26-ease), opacity var(--h26-dur) var(--h26-ease);
}
.h26-burger span:nth-child(1) { top: 15px; }
.h26-burger span:nth-child(2) { top: 21px; }
.h26-burger span:nth-child(3) { top: 27px; }
.h26-burger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.h26-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.h26-burger[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* Mobile scrim */
.h26-scrim {
  position: fixed; inset: 0; z-index: 1029;
  background: rgba(22, 35, 60, .42); opacity: 0;
  transition: opacity var(--h26-dur) var(--h26-ease);
}
.h26-scrim.is-shown { opacity: 1; }

/* ==========================================================================
   RESPONSIVE — formal accordion drawer
   ========================================================================== */
@media (max-width: 991.98px) {
  .h26-container { padding: 0 20px; }
  .h26-nav { gap: 0; }
  .h26-burger { display: block; }
  .h26-actions > .h26-phone, .h26-actions > .h26-cta { display: none; }
  .h26-actions { margin-left: auto; }

  .h26-collapse {
    position: fixed; top: 0; right: 0; z-index: 1031;
    width: min(408px, 90vw); height: 100dvh;
    background: var(--h26-paper); border-left: 1px solid var(--h26-line);
    box-shadow: -24px 0 60px -30px rgba(22, 35, 60, .35);
    padding: 28px 20px 28px; overflow-y: auto;
    flex-direction: column; align-items: stretch;
    transform: translateX(100%);
    transition: transform 320ms var(--h26-ease);
  }
  .h26-collapse.is-open { transform: translateX(0); }

  .h26-drawer__eyebrow {
    display: block; margin: 0 0 12px; padding-bottom: 12px;
    font-family: var(--h26-serif); font-size: 1.1rem; font-weight: 600; color: var(--h26-navy);
    border-bottom: 1px solid var(--h26-line);
  }

  .h26-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .h26-link { height: 52px; width: 100%; justify-content: space-between; font-size: 1rem; padding: 0 4px; }
  .h26-link::after { display: none; }  /* no underline in drawer */
  .h26-item { border-bottom: 1px solid var(--h26-line); }

  /* Mega + dropdowns become inline accordions */
  .h26-mega, .h26-drop {
    position: static; width: auto; opacity: 1; visibility: visible; transform: none;
    pointer-events: auto; border: 0; box-shadow: none; padding: 0;
    max-height: 0; overflow: hidden;
    transition: max-height 320ms var(--h26-ease);
  }
  .h26-item.is-open > .h26-mega,
  .h26-item.is-open > .h26-drop,
  .h26-drop__item--sub.is-open > .h26-drop--sub { max-height: 900px; }

  .h26-mega { padding: 0 0 12px; border-radius: 0; }
  .h26-mega__body { grid-template-columns: 1fr; gap: 8px; }
  .h26-mega__groups { grid-template-columns: 1fr; gap: 8px; }
  .h26-mega__group:first-child .h26-mega__link { width: 100%; }
  .h26-mega__label { padding-left: 4px; }
  .h26-consult { display: none; }  /* keep drawer focused; CTA pinned below */
  .h26-drop { padding: 0 0 8px 12px; }
  .h26-drop--sub { padding-left: 20px; }

  /* CTA pinned inside the drawer */
  .h26-drawer__cta {
    display: flex; flex-direction: column; gap: 12px; margin-top: 24px;
    padding-top: 24px; border-top: 1px solid var(--h26-line);
  }
  .h26-phone--drawer {
    justify-content: center; height: 48px; border: 1px solid var(--h26-line);
    border-radius: var(--h26-radius-sm); background: #fff;
  }
  .h26-cta--drawer { justify-content: center; height: 50px; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .h26-header * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ===== header-27 · .h27-header ===== */
/* ==========================================================================
   HEADER 27 — REAL ESTATE  ·  Property portal, search-first
   Self-contained. Tokens namespaced --h27-. 8px spacing rhythm.
   Palette: warm neutral paper + deep ink, one restrained emerald accent.
   Two-tier: search bar row above a nav strip that retracts on scroll.
   Motion <200ms, cubic-bezier(.4,0,.2,1). Inter throughout.
   ========================================================================== */

:root {
  /* Ink / neutrals */
  --h27-ink: #142019;
  --h27-body: #4a554e;
  --h27-muted: #7b857e;
  --h27-line: #e7e6e1;
  --h27-line-soft: #f1f0eb;
  --h27-bg: #ffffff;
  --h27-paper: #f8f7f3;
  --h27-hover: #f2f4f1;

  /* Single accent — emerald */
  --h27-accent: #1f7a54;
  --h27-accent-700: #185f42;
  --h27-accent-tint: #e6f2ec;

  /* Elevation */
  --h27-shadow-pop: 0 1px 2px rgba(20, 32, 25, .05), 0 20px 48px -20px rgba(20, 32, 25, .26);
  --h27-shadow-bar: 0 1px 0 rgba(20, 32, 25, .07);
  --h27-shadow-search: 0 1px 2px rgba(20, 32, 25, .04);

  /* System */
  --h27-radius: 14px;
  --h27-radius-sm: 10px;
  --h27-radius-pill: 999px;
  --h27-ease: cubic-bezier(.4, 0, .2, 1);
  --h27-dur: 180ms;
  --h27-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.h27-header, .h27-header *, .h27-drawer, .h27-drawer * { box-sizing: border-box; }
.h27-header, .h27-drawer {
  font-family: var(--h27-font);
  color: var(--h27-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.h27-skip {
  position: absolute; left: 16px; top: -60px; z-index: 1100;
  padding: 10px 16px; border-radius: 8px; background: var(--h27-ink); color: #fff;
  font-size: .875rem; font-weight: 500; text-decoration: none;
  transition: top var(--h27-dur) var(--h27-ease);
}
.h27-skip:focus { top: 12px; }

/* ==========================================================================
   HEADER SHELL
   ========================================================================== */
.h27-header {
  position: sticky; top: 0; z-index: 1030;
  background: var(--h27-bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--h27-dur) var(--h27-ease), box-shadow var(--h27-dur) var(--h27-ease);
}
.h27-header.is-stuck {
  border-bottom-color: var(--h27-line);
  box-shadow: var(--h27-shadow-bar);
}
.h27-container { max-width: 1260px; margin: 0 auto; padding: 0 28px; }

/* --- Tier 1: search bar row -------------------------------------------- */
.h27-bar {
  display: flex; align-items: center; gap: 24px; height: 76px;
  transition: height var(--h27-dur) var(--h27-ease);
}
.h27-header.is-stuck .h27-bar { height: 66px; }

/* --- Brand ------------------------------------------------------------- */
.h27-brand {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--h27-ink); flex: 0 0 auto;
}
.h27-brand__mark { color: var(--h27-accent); display: block; }
.h27-brand__name { font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; }
.h27-brand__accent { font-weight: 500; color: var(--h27-muted); }

/* --- Integrated search ------------------------------------------------- */
.h27-search {
  flex: 1 1 auto; max-width: 620px; margin: 0 auto;
  display: flex; align-items: center; gap: 6px;
  height: 48px; padding: 5px 6px 5px 8px;
  background: var(--h27-bg); border: 1px solid var(--h27-line);
  border-radius: var(--h27-radius-pill); box-shadow: var(--h27-shadow-search);
  transition: border-color var(--h27-dur) var(--h27-ease), box-shadow var(--h27-dur) var(--h27-ease), height var(--h27-dur) var(--h27-ease);
}
.h27-search:focus-within { border-color: var(--h27-accent); box-shadow: 0 0 0 3px var(--h27-accent-tint); }
.h27-header.is-stuck .h27-search { height: 44px; }

.h27-toggle {
  display: inline-flex; background: var(--h27-paper); border-radius: var(--h27-radius-pill);
  padding: 3px; flex: 0 0 auto;
}
.h27-toggle__btn {
  border: 0; background: none; cursor: pointer;
  padding: 6px 15px; border-radius: var(--h27-radius-pill);
  font-family: inherit; font-size: .8125rem; font-weight: 600; color: var(--h27-body);
  transition: color var(--h27-dur) var(--h27-ease), background var(--h27-dur) var(--h27-ease), box-shadow var(--h27-dur) var(--h27-ease);
}
.h27-toggle__btn.is-active {
  background: var(--h27-bg); color: var(--h27-accent);
  box-shadow: 0 1px 2px rgba(20,32,25,.12);
}
.h27-search__divider { width: 1px; height: 22px; background: var(--h27-line); flex: 0 0 auto; }
.h27-search__field {
  flex: 1 1 auto; display: flex; align-items: center; gap: 8px; padding: 0 8px; min-width: 0;
}
.h27-search__field > i { color: var(--h27-accent); font-size: 1rem; flex: 0 0 auto; }
.h27-search__input {
  flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none;
  font-family: inherit; font-size: .9375rem; color: var(--h27-ink);
}
.h27-search__input::placeholder { color: var(--h27-muted); }
.h27-search__go {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 18px; border: 0; cursor: pointer;
  background: var(--h27-accent); color: #fff; border-radius: var(--h27-radius-pill);
  font-family: inherit; font-size: .875rem; font-weight: 600;
  transition: background var(--h27-dur) var(--h27-ease);
}
.h27-search__go:hover { background: var(--h27-accent-700); }

/* --- Actions ----------------------------------------------------------- */
.h27-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; flex: 0 0 auto; }
.h27-saved {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .9375rem; font-weight: 500; color: var(--h27-body); text-decoration: none;
  transition: color var(--h27-dur) var(--h27-ease);
}
.h27-saved i { font-size: 1.05rem; }
.h27-saved:hover { color: var(--h27-accent); }
.h27-cta {
  display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 20px;
  font-size: .9375rem; font-weight: 600; color: #fff; text-decoration: none;
  background: var(--h27-ink); border-radius: var(--h27-radius-sm);
  transition: background var(--h27-dur) var(--h27-ease), transform var(--h27-dur) var(--h27-ease);
}
.h27-cta:hover { background: #232f28; }
.h27-cta:active { transform: translateY(1px); }

/* ==========================================================================
   TIER 2 — NAV STRIP (retracts on scroll)
   ========================================================================== */
.h27-navstrip {
  border-top: 1px solid var(--h27-line-soft);
  max-height: 56px; overflow: visible;
  transition: max-height var(--h27-dur) var(--h27-ease), opacity var(--h27-dur) var(--h27-ease);
}
.h27-header.is-stuck .h27-navstrip { max-height: 0; opacity: 0; overflow: hidden; }
.h27-nav { height: 56px; display: flex; align-items: center; }
.h27-menu {
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: 0;
}
.h27-item { position: relative; }

.h27-link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 14px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .9375rem; font-weight: 500;
  color: var(--h27-body); text-decoration: none; border-radius: var(--h27-radius-sm);
  transition: color var(--h27-dur) var(--h27-ease), background var(--h27-dur) var(--h27-ease);
}
.h27-link:hover { color: var(--h27-ink); background: var(--h27-hover); }
.h27-chevron { color: currentColor; opacity: .55; transition: transform var(--h27-dur) var(--h27-ease); }
.h27-item.is-open > .h27-trigger { color: var(--h27-accent); background: var(--h27-accent-tint); }
.h27-item.is-open > .h27-trigger .h27-chevron { transform: rotate(180deg); }

:where(.h27-link, .h27-drop__link, .h27-cta, .h27-saved, .h27-burger, .h27-mega__link, .h27-card, .h27-feature, .h27-search__go, .h27-toggle__btn, .h27-dlink, .h27-dsub):focus-visible {
  outline: 2px solid var(--h27-accent); outline-offset: 2px; border-radius: var(--h27-radius-sm);
}

/* ==========================================================================
   MEGA MENU — Buy / Rent / Sell with cards + featured listing
   ========================================================================== */
.h27-mega, .h27-drop {
  position: absolute; top: calc(100% + 8px); left: 0;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--h27-dur) var(--h27-ease), transform var(--h27-dur) var(--h27-ease), visibility var(--h27-dur) var(--h27-ease);
  pointer-events: none;
}
.h27-item.is-open > .h27-mega, .h27-item.is-open > .h27-drop {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

.h27-mega {
  width: 840px;
  background: var(--h27-bg); border: 1px solid var(--h27-line);
  border-radius: var(--h27-radius); box-shadow: var(--h27-shadow-pop); padding: 22px;
}
.h27-mega__body { display: grid; grid-template-columns: 1.55fr 1fr; gap: 22px; }
.h27-mega__cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.h27-mega__col { display: flex; flex-direction: column; gap: 6px; }
.h27-mega__label {
  margin: 0 0 6px; font-size: .6875rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--h27-accent);
}

/* Property-type cards with subtle image placeholders */
.h27-card {
  display: flex; align-items: center; gap: 11px;
  padding: 9px; border-radius: var(--h27-radius-sm);
  text-decoration: none; color: var(--h27-ink);
  transition: background var(--h27-dur) var(--h27-ease);
}
.h27-card:hover { background: var(--h27-hover); }
.h27-card__thumb {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 9px;
  display: grid; place-items: center; font-size: 1.15rem; color: var(--h27-accent-700);
  background:
    linear-gradient(135deg, var(--h27-accent-tint), #dfeee7);
  position: relative; overflow: hidden;
}
.h27-card__thumb::after {  /* faint horizon line for image feel */
  content: ""; position: absolute; left: 0; right: 0; bottom: 12px;
  height: 1px; background: rgba(31,122,84,.18);
}
.h27-card__text { display: flex; flex-direction: column; gap: 3px; }
.h27-card__text strong { font-size: .875rem; font-weight: 600; }
.h27-card__chip {
  align-self: flex-start; font-size: .6875rem; font-weight: 600; color: var(--h27-body);
  background: var(--h27-paper); border: 1px solid var(--h27-line);
  padding: 2px 8px; border-radius: var(--h27-radius-pill);
}
.h27-mega__link {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 9px; border-radius: var(--h27-radius-sm);
  text-decoration: none; color: var(--h27-body); font-size: .8375rem; font-weight: 500;
  transition: background var(--h27-dur) var(--h27-ease), color var(--h27-dur) var(--h27-ease);
}
.h27-mega__link:hover { background: var(--h27-hover); color: var(--h27-ink); }
.h27-mega__link i { color: var(--h27-accent); }

/* Featured listing */
.h27-feature {
  display: flex; flex-direction: column;
  border-radius: var(--h27-radius); overflow: hidden;
  border: 1px solid var(--h27-line); text-decoration: none; color: var(--h27-ink);
  background: var(--h27-paper);
  transition: box-shadow var(--h27-dur) var(--h27-ease), transform var(--h27-dur) var(--h27-ease);
}
.h27-feature:hover { box-shadow: var(--h27-shadow-pop); transform: translateY(-2px); }
.h27-feature__img {
  position: relative; height: 118px; display: block;
  background:
    radial-gradient(120% 80% at 70% 20%, #bfe0cf 0%, transparent 55%),
    linear-gradient(160deg, #cfe6da 0%, #a9cdba 100%);
}
.h27-feature__tag {
  position: absolute; top: 10px; left: 10px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .03em; color: #fff;
  background: var(--h27-accent); padding: 4px 10px; border-radius: var(--h27-radius-pill);
}
.h27-feature__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.h27-feature__price { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.h27-feature__addr { font-size: .8125rem; color: var(--h27-muted); }
.h27-feature__stats { display: flex; gap: 12px; margin-top: 4px; font-size: .75rem; color: var(--h27-body); }
.h27-feature__stats i { color: var(--h27-accent); margin-right: 3px; }

/* ==========================================================================
   DROPDOWN + NESTED — Neighborhoods
   ========================================================================== */
.h27-drop {
  min-width: 236px; list-style: none; margin: 0; padding: 6px;
  background: var(--h27-bg); border: 1px solid var(--h27-line);
  border-radius: var(--h27-radius); box-shadow: var(--h27-shadow-pop);
}
.h27-drop__item { position: relative; }
.h27-drop__link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 9px 12px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .875rem; font-weight: 500; text-align: left;
  color: var(--h27-body); text-decoration: none; border-radius: var(--h27-radius-sm);
  transition: color var(--h27-dur) var(--h27-ease), background var(--h27-dur) var(--h27-ease);
}
.h27-drop__link:hover { color: var(--h27-ink); background: var(--h27-hover); }
.h27-drop__caret { font-size: .7rem; opacity: .5; }
.h27-drop--sub { top: -7px; left: calc(100% + 6px); }
.h27-drop__item--sub.is-open > .h27-drop--sub {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

/* --- Hamburger --------------------------------------------------------- */
.h27-burger {
  display: none; position: relative; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--h27-line); border-radius: var(--h27-radius-sm);
  background: #fff; cursor: pointer;
}
.h27-burger span {
  position: absolute; left: 13px; width: 18px; height: 1.8px; border-radius: 2px;
  background: var(--h27-ink);
  transition: transform var(--h27-dur) var(--h27-ease), opacity var(--h27-dur) var(--h27-ease);
}
.h27-burger span:nth-child(1) { top: 15px; }
.h27-burger span:nth-child(2) { top: 21px; }
.h27-burger span:nth-child(3) { top: 27px; }
.h27-burger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.h27-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.h27-burger[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* ==========================================================================
   MOBILE DRAWER (search-first)
   ========================================================================== */
.h27-drawer {
  position: fixed; top: 0; right: 0; z-index: 1031;
  width: min(420px, 92vw); height: 100dvh;
  background: #fff; border-left: 1px solid var(--h27-line);
  box-shadow: -24px 0 60px -30px rgba(20, 32, 25, .3);
  padding: 20px 18px 24px; overflow-y: auto;
  transform: translateX(100%);
  transition: transform 320ms var(--h27-ease);
  display: none;
}
.h27-drawer.is-open { transform: translateX(0); }
.h27-drawer__search {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px; background: var(--h27-paper); border-radius: var(--h27-radius);
  margin-bottom: 18px;
}
.h27-drawer__search .h27-toggle { align-self: stretch; }
.h27-drawer__search .h27-toggle__btn { flex: 1 1 0; }
.h27-drawer__search .h27-search__field {
  background: #fff; border: 1px solid var(--h27-line); border-radius: var(--h27-radius-sm);
  height: 46px; padding: 0 12px;
}
.h27-drawer__search .h27-search__go { justify-content: center; height: 46px; }

.h27-menu--drawer { flex-direction: column; align-items: stretch; gap: 0; }
.h27-ditem { border-bottom: 1px solid var(--h27-line-soft); }
.h27-dlink {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; height: 52px; padding: 0 6px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 1rem; font-weight: 500; text-align: left;
  color: var(--h27-ink); text-decoration: none;
}
.h27-dcaret { transition: transform var(--h27-dur) var(--h27-ease); color: var(--h27-muted); }
.h27-ditem--sub.is-open .h27-dcaret { transform: rotate(180deg); }
.h27-dpanel {
  max-height: 0; overflow: hidden;
  transition: max-height 300ms var(--h27-ease);
}
.h27-ditem--sub.is-open .h27-dpanel { max-height: 400px; }
.h27-dsub {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 6px 11px 16px; text-decoration: none;
  font-size: .9375rem; color: var(--h27-body);
}
.h27-dsub span { font-size: .75rem; color: var(--h27-muted); }
.h27-dsub:hover { color: var(--h27-accent); }

.h27-drawer__cta {
  display: flex; flex-direction: column; gap: 10px; margin-top: 22px;
  padding-top: 22px; border-top: 1px solid var(--h27-line);
}
.h27-saved--drawer { justify-content: center; height: 48px; border: 1px solid var(--h27-line); border-radius: var(--h27-radius-sm); }
.h27-cta--drawer { justify-content: center; height: 50px; font-size: 1rem; }

/* Mobile scrim */
.h27-scrim {
  position: fixed; inset: 0; z-index: 1030;
  background: rgba(20, 32, 25, .38); opacity: 0;
  transition: opacity var(--h27-dur) var(--h27-ease);
}
.h27-scrim.is-shown { opacity: 1; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 991.98px) {
  .h27-container { padding: 0 18px; }
  .h27-search, .h27-saved, .h27-cta, .h27-navstrip { display: none; }
  .h27-burger { display: block; }
  .h27-drawer { display: block; }
  .h27-bar { gap: 12px; height: 64px; }
  .h27-header.is-stuck .h27-bar { height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .h27-header *, .h27-drawer * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ===== header-28 · .h28-header ===== */
/* ==========================================================================
   HEADER 28 — MANUFACTURING / INDUSTRIAL (PREMIUM)
   Self-contained. Tokens --h28-. Steel palette + one amber accent.
   ========================================================================== */
:root{
  --h28-ink:#171a1d; --h28-body:#464b52; --h28-muted:#6c727b;
  --h28-line:#e4e6e9; --h28-line-soft:#eff0f2; --h28-bg:#fff; --h28-hover:#f2f3f5;
  --h28-steel:#20262c; --h28-amber:#e08a1e; --h28-amber-700:#c2740f; --h28-tint:#fbf1e2;
  --h28-shadow:0 1px 2px rgba(23,26,29,.05),0 18px 44px -18px rgba(23,26,29,.24);
  --h28-radius:10px; --h28-radius-sm:7px; --h28-ease:cubic-bezier(.4,0,.2,1); --h28-dur:170ms;
  --h28-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.h28-header,.h28-header *{box-sizing:border-box;} .h28-header{font-family:var(--h28-font);color:var(--h28-ink);-webkit-font-smoothing:antialiased;}
.h28-container{max-width:1240px;margin:0 auto;padding:0 24px;}
.h28-skip{position:absolute;left:16px;top:-60px;z-index:1100;padding:10px 16px;border-radius:6px;background:var(--h28-steel);color:#fff;font-size:.875rem;text-decoration:none;transition:top var(--h28-dur) var(--h28-ease);} .h28-skip:focus{top:12px;}

.h28-header{position:sticky;top:0;z-index:1030;background:#fff;border-bottom:1px solid var(--h28-line);transition:box-shadow var(--h28-dur) var(--h28-ease);}
.h28-header.is-stuck{box-shadow:0 6px 20px -14px rgba(23,26,29,.3);}
.h28-nav{display:flex;align-items:center;gap:32px;height:72px;}
.h28-brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--h28-ink);flex:0 0 auto;}
.h28-brand__mark{display:grid;place-items:center;width:38px;height:38px;border-radius:8px;background:var(--h28-steel);color:var(--h28-amber);font-size:1.15rem;}
.h28-brand__name{font-size:1.2rem;font-weight:700;letter-spacing:.02em;} .h28-brand__sub{font-weight:500;color:var(--h28-muted);letter-spacing:0;text-transform:none;font-size:1.05rem;margin-left:2px;}

.h28-collapse{flex:1 1 auto;}
.h28-menu{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;}
.h28-item{position:relative;}
.h28-link{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 14px;border:0;background:none;cursor:pointer;font:inherit;font-size:.9375rem;font-weight:600;color:var(--h28-body);text-decoration:none;border-radius:var(--h28-radius-sm);transition:color var(--h28-dur) var(--h28-ease),background var(--h28-dur) var(--h28-ease);}
.h28-link:hover{color:var(--h28-ink);background:var(--h28-hover);}
.h28-chevron{opacity:.55;transition:transform var(--h28-dur) var(--h28-ease);}
.h28-item.is-open>.h28-trigger{color:var(--h28-ink);background:var(--h28-hover);} .h28-item.is-open>.h28-trigger .h28-chevron{transform:rotate(180deg);}
:where(.h28-link,.h28-drop__link,.h28-cta,.h28-phone,.h28-burger,.h28-mlink,.h28-stat__cta):focus-visible{outline:2px solid var(--h28-amber);outline-offset:2px;}

.h28-mega,.h28-drop{position:absolute;top:calc(100% + 10px);left:0;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity var(--h28-dur) var(--h28-ease),transform var(--h28-dur) var(--h28-ease),visibility var(--h28-dur) var(--h28-ease);pointer-events:none;}
.h28-item.is-open>.h28-mega,.h28-item.is-open>.h28-drop{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
.h28-mega{width:660px;background:#fff;border:1px solid var(--h28-line);border-radius:var(--h28-radius);box-shadow:var(--h28-shadow);padding:0;display:grid;grid-template-columns:1.5fr 1fr;}
.h28-mega__cols{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:18px;}
.h28-mega__label{margin:0 0 8px;font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--h28-muted);} .h28-mega__label--light{color:rgba(255,255,255,.6);}
.h28-mlink{display:flex;align-items:flex-start;gap:11px;padding:9px 8px;border-radius:var(--h28-radius-sm);text-decoration:none;color:var(--h28-ink);transition:background var(--h28-dur) var(--h28-ease);}
.h28-mlink:hover{background:var(--h28-hover);} .h28-mlink__ic{flex:0 0 auto;display:grid;place-items:center;width:32px;height:32px;border-radius:7px;background:var(--h28-tint);color:var(--h28-amber);}
.h28-mlink strong{display:block;font-size:.875rem;font-weight:600;} .h28-mlink span span{font-size:.78rem;color:var(--h28-muted);}
.h28-mega__stats{background:var(--h28-steel);color:#fff;padding:18px;border-radius:0 var(--h28-radius) var(--h28-radius) 0;display:flex;flex-direction:column;gap:10px;}
.h28-stat strong{font-size:1.4rem;font-weight:700;color:var(--h28-amber);} .h28-stat span{font-size:.78rem;color:rgba(255,255,255,.65);}
.h28-stat__cta{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:600;color:#fff;text-decoration:none;} .h28-stat__cta i{transition:transform var(--h28-dur) var(--h28-ease);} .h28-stat__cta:hover i{transform:translateX(3px);}

.h28-drop{min-width:210px;list-style:none;margin:0;padding:6px;background:#fff;border:1px solid var(--h28-line);border-radius:var(--h28-radius);box-shadow:var(--h28-shadow);}
.h28-drop__item{position:relative;}
.h28-drop__link{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:9px 12px;border:0;background:none;cursor:pointer;font:inherit;font-size:.875rem;font-weight:600;text-align:left;color:var(--h28-body);text-decoration:none;border-radius:var(--h28-radius-sm);transition:color var(--h28-dur) var(--h28-ease),background var(--h28-dur) var(--h28-ease);}
.h28-drop__link:hover{color:var(--h28-ink);background:var(--h28-hover);} .h28-drop__caret{font-size:.7rem;opacity:.5;}
.h28-drop--sub{top:-7px;left:calc(100% + 6px);} .h28-drop__item--sub.is-open>.h28-drop--sub{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}

.h28-actions{display:flex;align-items:center;gap:14px;margin-left:auto;flex:0 0 auto;}
.h28-phone{display:inline-flex;align-items:center;gap:7px;font-size:.9rem;font-weight:600;color:var(--h28-ink);text-decoration:none;} .h28-phone i{color:var(--h28-amber);} .h28-phone:hover{color:var(--h28-amber-700);}
.h28-cta{display:inline-flex;align-items:center;height:42px;padding:0 20px;font-size:.9375rem;font-weight:700;color:#fff;text-decoration:none;background:var(--h28-amber);border-radius:var(--h28-radius-sm);transition:background var(--h28-dur) var(--h28-ease);} .h28-cta:hover{background:var(--h28-amber-700);}
.h28-burger{display:none;position:relative;width:40px;height:40px;padding:0;border:1px solid var(--h28-line);border-radius:var(--h28-radius-sm);background:#fff;cursor:pointer;}
.h28-burger span{position:absolute;left:11px;width:18px;height:2px;background:var(--h28-ink);transition:transform var(--h28-dur) var(--h28-ease);} .h28-burger span:nth-child(1){top:16px;} .h28-burger span:nth-child(2){bottom:16px;}
.h28-burger[aria-expanded="true"] span:nth-child(1){top:19px;transform:rotate(45deg);} .h28-burger[aria-expanded="true"] span:nth-child(2){bottom:19px;transform:rotate(-45deg);}
.h28-scrim{position:fixed;inset:0;z-index:1029;background:rgba(23,26,29,.4);opacity:0;transition:opacity var(--h28-dur) var(--h28-ease);} .h28-scrim.is-shown{opacity:1;}

@media (max-width:991.98px){
  .h28-burger{display:block;} .h28-phone,.h28-actions>.h28-cta{display:none;}
  .h28-collapse{position:fixed;top:0;right:0;z-index:1031;width:min(390px,90vw);height:100dvh;background:#fff;box-shadow:-24px 0 60px -30px rgba(23,26,29,.3);padding:84px 16px 24px;overflow-y:auto;transform:translateX(100%);transition:transform 320ms var(--h28-ease);}
  .h28-collapse.is-open{transform:translateX(0);}
  .h28-menu{flex-direction:column;align-items:stretch;gap:2px;} .h28-link{height:48px;justify-content:space-between;font-size:1rem;} .h28-item{border-bottom:1px solid var(--h28-line-soft);}
  .h28-mega,.h28-drop{position:static;width:auto;opacity:1;visibility:visible;transform:none;pointer-events:auto;border:0;box-shadow:none;padding:0;display:block;max-height:0;overflow:hidden;transition:max-height 300ms var(--h28-ease);}
  .h28-item.is-open>.h28-mega,.h28-item.is-open>.h28-drop,.h28-drop__item--sub.is-open>.h28-drop--sub{max-height:900px;}
  .h28-mega__cols{grid-template-columns:1fr;} .h28-mega__stats{display:none;} .h28-drop--sub{padding-left:14px;}
  .h28-collapse::after{content:"Request a quote";display:block;text-align:center;margin-top:18px;padding:13px;border-radius:var(--h28-radius-sm);background:var(--h28-amber);color:#fff;font-weight:700;}
}
@media (min-width:992px){.h28-scrim{display:none;}}

@media (prefers-reduced-motion:reduce){.h28-header *{transition-duration:.01ms !important;}}

/* ===== header-29 · .h29-header ===== */
/* ==========================================================================
   HEADER 29 — AUTOMOTIVE
   Self-contained. Tokens --h29-. Dark showroom shell + one electric accent.
   ========================================================================== */
:root{
  --h29-ink:#f2f4f7; --h29-body:#a9b0bd; --h29-muted:#7d838f;
  --h29-bg:#0d0f14; --h29-surface:#151922; --h29-surface-2:#1c2230; --h29-line:#242b39;
  --h29-accent:#2f6bff; --h29-accent-700:#2657d6; --h29-tint:rgba(47,107,255,.14);
  --h29-shadow:0 24px 60px -24px rgba(0,0,0,.8);
  --h29-radius:14px; --h29-radius-sm:9px; --h29-ease:cubic-bezier(.4,0,.2,1); --h29-dur:180ms;
  --h29-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.h29-header,.h29-header *{box-sizing:border-box;}
.h29-header{font-family:var(--h29-font);color:var(--h29-ink);-webkit-font-smoothing:antialiased;}
.h29-container{max-width:1240px;margin:0 auto;padding:0 24px;}
.h29-skip{position:absolute;left:16px;top:-60px;z-index:1100;padding:10px 16px;border-radius:8px;background:var(--h29-accent);color:#fff;font-size:.875rem;text-decoration:none;transition:top var(--h29-dur) var(--h29-ease);} .h29-skip:focus{top:12px;}

.h29-header{position:sticky;top:0;z-index:1030;background:rgba(13,15,20,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid transparent;transition:border-color var(--h29-dur) var(--h29-ease),background var(--h29-dur) var(--h29-ease);}
.h29-header.is-stuck{border-bottom-color:var(--h29-line);background:rgba(13,15,20,.94);}
.h29-nav{display:flex;align-items:center;gap:34px;height:70px;}
.h29-brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--h29-ink);flex:0 0 auto;}
.h29-brand__mark{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--h29-accent);color:#fff;font-size:1rem;}
.h29-brand__name{font-size:1.2rem;font-weight:700;letter-spacing:.14em;}

.h29-collapse{flex:1 1 auto;}
.h29-menu{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;}
.h29-item{position:relative;}
.h29-link{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border:0;background:none;cursor:pointer;font:inherit;font-size:.9375rem;font-weight:500;color:var(--h29-body);text-decoration:none;border-radius:var(--h29-radius-sm);transition:color var(--h29-dur) var(--h29-ease),background var(--h29-dur) var(--h29-ease);}
.h29-link:hover{color:var(--h29-ink);background:var(--h29-surface-2);}
.h29-chevron{opacity:.6;transition:transform var(--h29-dur) var(--h29-ease);}
.h29-item.is-open>.h29-trigger{color:var(--h29-ink);background:var(--h29-surface-2);} .h29-item.is-open>.h29-trigger .h29-chevron{transform:rotate(180deg);}
:where(.h29-link,.h29-drop__link,.h29-cta,.h29-login,.h29-burger,.h29-car,.h29-tab):focus-visible{outline:2px solid var(--h29-accent);outline-offset:2px;}

.h29-mega,.h29-drop{position:absolute;top:calc(100% + 12px);left:0;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity var(--h29-dur) var(--h29-ease),transform var(--h29-dur) var(--h29-ease),visibility var(--h29-dur) var(--h29-ease);pointer-events:none;}
.h29-item.is-open>.h29-mega,.h29-item.is-open>.h29-drop{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
.h29-mega{width:720px;background:var(--h29-surface);border:1px solid var(--h29-line);border-radius:var(--h29-radius);box-shadow:var(--h29-shadow);padding:18px;}
.h29-tabs{display:flex;gap:6px;margin-bottom:16px;}
.h29-tab{padding:7px 14px;border:1px solid var(--h29-line);background:transparent;color:var(--h29-body);border-radius:999px;font:inherit;font-size:.8125rem;font-weight:600;cursor:pointer;transition:all var(--h29-dur) var(--h29-ease);}
.h29-tab:hover{color:var(--h29-ink);} .h29-tab.is-active{background:var(--h29-accent);border-color:var(--h29-accent);color:#fff;}
.h29-cars{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.h29-car{display:flex;flex-direction:column;padding:12px;border-radius:var(--h29-radius-sm);background:var(--h29-surface-2);text-decoration:none;color:var(--h29-ink);border:1px solid transparent;transition:border-color var(--h29-dur) var(--h29-ease),transform var(--h29-dur) var(--h29-ease);}
.h29-car:hover{border-color:var(--h29-accent);transform:translateY(-2px);}
.h29-car.is-hidden{display:none;}
.h29-car__img{height:56px;border-radius:7px;margin-bottom:10px;background:linear-gradient(135deg,#2b3346,#1a2030);}
.h29-car__img--1{background:linear-gradient(135deg,#2f6bff55,#1a2030);} .h29-car__img--2{background:linear-gradient(135deg,#3a4a6b,#1a2030);}
.h29-car__img--3{background:linear-gradient(135deg,#5842c9,#1a2030);} .h29-car__img--4{background:linear-gradient(135deg,#1f6b5a,#1a2030);}
.h29-car__name{font-size:.9rem;font-weight:700;} .h29-car__meta{font-size:.72rem;color:var(--h29-muted);margin-top:2px;} .h29-car__price{font-size:.78rem;color:var(--h29-accent);font-weight:600;margin-top:6px;}

.h29-drop{min-width:210px;list-style:none;margin:0;padding:6px;background:var(--h29-surface);border:1px solid var(--h29-line);border-radius:var(--h29-radius);box-shadow:var(--h29-shadow);}
.h29-drop__item{position:relative;}
.h29-drop__link{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:9px 12px;border:0;background:none;cursor:pointer;font:inherit;font-size:.875rem;font-weight:500;text-align:left;color:var(--h29-body);text-decoration:none;border-radius:var(--h29-radius-sm);transition:color var(--h29-dur) var(--h29-ease),background var(--h29-dur) var(--h29-ease);}
.h29-drop__link:hover{color:var(--h29-ink);background:var(--h29-surface-2);} .h29-drop__caret{font-size:.7rem;opacity:.5;}
.h29-drop--sub{top:-7px;left:calc(100% + 6px);} .h29-drop__item--sub.is-open>.h29-drop--sub{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}

.h29-actions{display:flex;align-items:center;gap:12px;margin-left:auto;flex:0 0 auto;}
.h29-login{display:grid;place-items:center;width:40px;height:40px;border-radius:999px;color:var(--h29-body);text-decoration:none;font-size:1.1rem;transition:background var(--h29-dur) var(--h29-ease),color var(--h29-dur) var(--h29-ease);} .h29-login:hover{background:var(--h29-surface-2);color:var(--h29-ink);}
.h29-cta{display:inline-flex;align-items:center;height:40px;padding:0 18px;font-size:.9375rem;font-weight:600;color:#fff;text-decoration:none;background:var(--h29-accent);border-radius:999px;transition:background var(--h29-dur) var(--h29-ease);} .h29-cta:hover{background:var(--h29-accent-700);}
.h29-mobile-cta{display:none;}
.h29-m-cta{display:block;text-align:center;margin-top:18px;padding:13px;border-radius:999px;background:var(--h29-accent);color:#fff;font-weight:600;text-decoration:none;} .h29-m-cta:hover{background:var(--h29-accent-700);color:#fff;}
.h29-burger{display:none;position:relative;width:40px;height:40px;padding:0;border:1px solid var(--h29-line);border-radius:var(--h29-radius-sm);background:var(--h29-surface-2);cursor:pointer;}
.h29-burger span{position:absolute;left:11px;width:18px;height:1.8px;background:var(--h29-ink);transition:transform var(--h29-dur) var(--h29-ease);} .h29-burger span:nth-child(1){top:16px;} .h29-burger span:nth-child(2){bottom:16px;}
.h29-burger[aria-expanded="true"] span:nth-child(1){top:19px;transform:rotate(45deg);} .h29-burger[aria-expanded="true"] span:nth-child(2){bottom:19px;transform:rotate(-45deg);}
.h29-scrim{position:fixed;inset:0;z-index:1029;background:rgba(0,0,0,.6);opacity:0;transition:opacity var(--h29-dur) var(--h29-ease);} .h29-scrim.is-shown{opacity:1;}

@media (max-width:991.98px){
  .h29-burger{display:block;} .h29-actions>.h29-cta,.h29-login{display:none;}
  .h29-collapse{position:fixed;top:0;right:0;z-index:1031;width:min(390px,90vw);height:100dvh;background:var(--h29-surface);border-left:1px solid var(--h29-line);padding:84px 16px 24px;overflow-y:auto;transform:translateX(100%);transition:transform 320ms var(--h29-ease);}
  .h29-collapse.is-open{transform:translateX(0);}
  .h29-menu{flex-direction:column;align-items:stretch;gap:2px;} .h29-link{height:48px;justify-content:space-between;font-size:1rem;} .h29-item{border-bottom:1px solid var(--h29-line);}
  .h29-mega,.h29-drop{position:static;width:auto;opacity:1;visibility:visible;transform:none;pointer-events:auto;border:0;box-shadow:none;background:transparent;padding:0;max-height:0;overflow:hidden;transition:max-height 300ms var(--h29-ease);}
  .h29-item.is-open>.h29-mega,.h29-item.is-open>.h29-drop,.h29-drop__item--sub.is-open>.h29-drop--sub{max-height:1200px;}
  .h29-cars{grid-template-columns:1fr 1fr;} .h29-drop--sub{padding-left:14px;}
  .h29-mobile-cta{display:block;}
}
@media (min-width:992px){.h29-scrim{display:none;}}

@media (prefers-reduced-motion:reduce){.h29-header *{transition-duration:.01ms !important;}}

/* ===== header-30 · .h30-header ===== */
/* ==========================================================================
   HEADER 30 — TRAVEL / TOURISM
   Self-contained. Tokens namespaced --h30-. 8px spacing rhythm.
   Palette: near-monochrome ink + one restrained sky/teal accent.
   Motion: <200ms, cubic-bezier(.4,0,.2,1). Airy, disciplined, no gimmicks.
   Distinct: a slim trip-search chip row collapses on scroll.
   ========================================================================== */

:root {
  /* Ink / neutrals */
  --h30-ink: #0c1116;
  --h30-body: #46505c;
  --h30-muted: #6b7684;
  --h30-line: #e7ecf0;
  --h30-line-soft: #f1f4f7;
  --h30-bg: #ffffff;
  --h30-hover: #f2f7f9;

  /* Single accent — sky/teal */
  --h30-accent: #0e9aa7;
  --h30-accent-700: #0b7c87;
  --h30-accent-tint: #e2f4f5;

  /* Elevation */
  --h30-shadow-pop: 0 1px 2px rgba(12, 17, 22, .04), 0 16px 40px -14px rgba(12, 17, 22, .18);
  --h30-shadow-bar: 0 1px 0 rgba(12, 17, 22, .06);

  /* System */
  --h30-radius: 14px;
  --h30-radius-sm: 10px;
  --h30-ease: cubic-bezier(.4, 0, .2, 1);
  --h30-dur: 180ms;
  --h30-h: 70px;
  --h30-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.h30-header, .h30-header * { box-sizing: border-box; }
.h30-header {
  font-family: var(--h30-font);
  color: var(--h30-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Accessible skip link */
.h30-skip {
  position: absolute; left: 16px; top: -60px; z-index: 1100;
  padding: 10px 16px; border-radius: 8px; background: var(--h30-ink); color: #fff;
  font-size: .875rem; font-weight: 500; text-decoration: none;
  transition: top var(--h30-dur) var(--h30-ease);
}
.h30-skip:focus { top: 12px; }

/* ==========================================================================
   HEADER SHELL
   ========================================================================== */
.h30-header {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--h30-dur) var(--h30-ease), box-shadow var(--h30-dur) var(--h30-ease), background var(--h30-dur) var(--h30-ease);
}
.h30-header.is-stuck {
  background: rgba(255, 255, 255, .94);
  border-bottom-color: var(--h30-line);
  box-shadow: var(--h30-shadow-bar);
}

.h30-container { max-width: 1220px; margin: 0 auto; padding: 0 24px; }
.h30-nav { display: flex; align-items: center; gap: 36px; height: var(--h30-h); }

/* --- Brand ------------------------------------------------------------- */
.h30-brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--h30-ink); flex: 0 0 auto;
}
.h30-brand__logo { color: var(--h30-accent); display: block; }
.h30-brand__name { font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; }

/* ==========================================================================
   PRIMARY MENU
   ========================================================================== */
.h30-collapse { flex: 1 1 auto; }
.h30-menu {
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: 0;
}
.h30-item { position: relative; }

.h30-link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 14px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .9375rem; font-weight: 500;
  color: var(--h30-body); text-decoration: none;
  border-radius: var(--h30-radius-sm);
  transition: color var(--h30-dur) var(--h30-ease), background var(--h30-dur) var(--h30-ease);
}
.h30-link:hover { color: var(--h30-ink); background: var(--h30-hover); }
.h30-chevron { color: currentColor; opacity: .55; transition: transform var(--h30-dur) var(--h30-ease); }
.h30-item.is-open > .h30-trigger { color: var(--h30-ink); background: var(--h30-hover); }
.h30-item.is-open > .h30-trigger .h30-chevron { transform: rotate(180deg); }

/* Keyboard focus */
:where(.h30-link, .h30-drop__link, .h30-cta, .h30-signin, .h30-burger, .h30-region, .h30-dcard, .h30-promo, .h30-chip, .h30-chip__go, .h30-chip__input):focus-visible {
  outline: 2px solid var(--h30-accent); outline-offset: 2px;
}

/* ==========================================================================
   MEGA MENU — Destinations (regions + image cards + deals promo)
   ========================================================================== */
.h30-mega, .h30-drop {
  position: absolute; top: calc(100% + 12px); left: 0;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--h30-dur) var(--h30-ease), transform var(--h30-dur) var(--h30-ease), visibility var(--h30-dur) var(--h30-ease);
  pointer-events: none;
}
.h30-item.is-open > .h30-mega, .h30-item.is-open > .h30-drop {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

.h30-mega {
  width: 860px;
  background: var(--h30-bg);
  border: 1px solid var(--h30-line);
  border-radius: var(--h30-radius);
  box-shadow: var(--h30-shadow-pop);
  padding: 22px;
}
.h30-mega__body { display: grid; grid-template-columns: 0.85fr 1.7fr 1fr; gap: 22px; }
.h30-mega__label {
  margin: 0 0 12px; font-size: .6875rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--h30-muted);
}

/* Region column */
.h30-region {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: var(--h30-radius-sm);
  font-size: .875rem; font-weight: 500; color: var(--h30-body); text-decoration: none;
  transition: background var(--h30-dur) var(--h30-ease), color var(--h30-dur) var(--h30-ease), transform var(--h30-dur) var(--h30-ease);
}
.h30-region i { color: var(--h30-accent); font-size: .95rem; }
.h30-region:hover { background: var(--h30-hover); color: var(--h30-ink); transform: translateX(3px); }

/* Destination cards */
.h30-cardgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.h30-dcard {
  display: flex; flex-direction: column; gap: 8px;
  text-decoration: none; color: var(--h30-ink);
  border-radius: var(--h30-radius-sm); padding: 6px; margin: -6px;
  transition: background var(--h30-dur) var(--h30-ease);
}
.h30-dcard:hover { background: var(--h30-hover); }
.h30-dcard__img {
  display: block; height: 86px; border-radius: var(--h30-radius-sm);
  background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px rgba(12, 17, 22, .05);
  transition: transform var(--h30-dur) var(--h30-ease);
}
.h30-dcard:hover .h30-dcard__img { transform: scale(1.015); }
/* Subtle gradient image placeholders */
.h30-dcard__img--santorini { background-image: linear-gradient(135deg, #3b82f6 0%, #a7dbe6 100%); }
.h30-dcard__img--kyoto { background-image: linear-gradient(135deg, #d98f8f 0%, #f4d29c 100%); }
.h30-dcard__img--patagonia { background-image: linear-gradient(135deg, #1f8a8f 0%, #9fd8b8 100%); }
.h30-dcard__img--maldives { background-image: linear-gradient(135deg, #12a3b4 0%, #cdeef0 100%); }
.h30-dcard__meta { display: flex; flex-direction: column; gap: 1px; padding: 0 2px; }
.h30-dcard__meta strong { font-size: .875rem; font-weight: 600; }
.h30-dcard__meta span { font-size: .78rem; color: var(--h30-muted); }

/* Deals promo */
.h30-mega__promo { display: flex; }
.h30-promo {
  display: flex; flex-direction: column; gap: 7px;
  padding: 18px; border-radius: var(--h30-radius); width: 100%;
  background: linear-gradient(160deg, var(--h30-accent-tint), #f3faf9);
  text-decoration: none; color: var(--h30-ink);
  border: 1px solid var(--h30-line-soft);
  transition: transform var(--h30-dur) var(--h30-ease), box-shadow var(--h30-dur) var(--h30-ease);
}
.h30-promo:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -16px rgba(14, 154, 167, .5); }
.h30-promo__tag {
  align-self: flex-start; font-size: .6875rem; font-weight: 600; letter-spacing: .05em;
  padding: 3px 9px; border-radius: 999px; background: var(--h30-accent); color: #fff;
}
.h30-promo__title { font-size: 1rem; font-weight: 700; line-height: 1.3; margin-top: 4px; }
.h30-promo__desc { font-size: .8125rem; color: var(--h30-body); line-height: 1.5; }
.h30-promo__cta {
  margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: .8125rem; font-weight: 600; color: var(--h30-accent-700);
}
.h30-promo__cta i { transition: transform var(--h30-dur) var(--h30-ease); }
.h30-promo:hover .h30-promo__cta i { transform: translateX(3px); }

/* ==========================================================================
   DROPDOWN + NESTED — Experiences
   ========================================================================== */
.h30-drop {
  min-width: 244px; list-style: none; margin: 0; padding: 6px;
  background: var(--h30-bg); border: 1px solid var(--h30-line);
  border-radius: var(--h30-radius); box-shadow: var(--h30-shadow-pop);
}
.h30-drop__item { position: relative; }
.h30-drop__link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 10px 12px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .875rem; font-weight: 500; text-align: left;
  color: var(--h30-body); text-decoration: none; border-radius: var(--h30-radius-sm);
  transition: color var(--h30-dur) var(--h30-ease), background var(--h30-dur) var(--h30-ease);
}
.h30-drop__link > span { display: inline-flex; align-items: center; gap: 9px; }
.h30-drop__link i:first-child { color: var(--h30-accent); }
.h30-drop__link:hover { color: var(--h30-ink); background: var(--h30-hover); }
.h30-drop__caret { font-size: .7rem; opacity: .5; }
.h30-drop--sub { top: -7px; left: calc(100% + 6px); }
.h30-drop__item--sub.is-open > .h30-drop--sub {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

/* ==========================================================================
   ACTIONS
   ========================================================================== */
.h30-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: 0 0 auto; }
.h30-signin {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 12px; height: 40px;
  font-size: .9375rem; font-weight: 500; color: var(--h30-body); text-decoration: none;
  border-radius: var(--h30-radius-sm);
  transition: color var(--h30-dur) var(--h30-ease), background var(--h30-dur) var(--h30-ease);
}
.h30-signin:hover { color: var(--h30-ink); background: var(--h30-hover); }
.h30-cta {
  display: inline-flex; align-items: center; height: 40px; padding: 0 20px;
  font-size: .9375rem; font-weight: 600; color: #fff; text-decoration: none;
  background: var(--h30-accent); border-radius: 999px;
  box-shadow: 0 8px 18px -10px rgba(14, 154, 167, .8);
  transition: background var(--h30-dur) var(--h30-ease), transform var(--h30-dur) var(--h30-ease), box-shadow var(--h30-dur) var(--h30-ease);
}
.h30-cta:hover { background: var(--h30-accent-700); transform: translateY(-1px); box-shadow: 0 12px 22px -10px rgba(14, 154, 167, .9); }
.h30-cta:active { transform: translateY(0); }

/* --- Hamburger (three-line, morphs to X) ------------------------------- */
.h30-burger {
  display: none; position: relative; width: 42px; height: 42px; padding: 0;
  border: 1px solid var(--h30-line); border-radius: var(--h30-radius-sm);
  background: #fff; cursor: pointer;
}
.h30-burger span {
  position: absolute; left: 12px; width: 18px; height: 1.8px; border-radius: 2px;
  background: var(--h30-ink);
  transition: transform var(--h30-dur) var(--h30-ease), opacity var(--h30-dur) var(--h30-ease);
}
.h30-burger span:nth-child(1) { top: 15px; }
.h30-burger span:nth-child(2) { top: 20px; }
.h30-burger span:nth-child(3) { top: 25px; }
.h30-burger[aria-expanded="true"] span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.h30-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.h30-burger[aria-expanded="true"] span:nth-child(3) { top: 20px; transform: rotate(-45deg); }

/* ==========================================================================
   TRIP-SEARCH CHIP ROW — collapses on scroll (distinct sticky behaviour)
   ========================================================================== */
.h30-searchbar {
  border-top: 1px solid var(--h30-line-soft);
  overflow: hidden;
  max-height: 64px; opacity: 1;
  transition: max-height 260ms var(--h30-ease), opacity 200ms var(--h30-ease), border-color 200ms var(--h30-ease);
}
.h30-header.is-stuck .h30-searchbar { max-height: 0; opacity: 0; border-top-color: transparent; }
.h30-chips {
  display: flex; align-items: center; gap: 4px;
  height: 64px;
}
.h30-chip {
  display: inline-flex; align-items: center; gap: 10px;
  height: 42px; padding: 0 16px; border: 0; background: none; cursor: pointer;
  border-radius: 999px; font-family: inherit; color: var(--h30-ink);
  transition: background var(--h30-dur) var(--h30-ease);
}
.h30-chip:hover { background: var(--h30-hover); }
.h30-chip i { color: var(--h30-accent); font-size: 1rem; }
.h30-chip__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.h30-chip__label { font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--h30-muted); }
.h30-chip__value { font-size: .875rem; font-weight: 500; }
.h30-chip__div { width: 1px; height: 22px; background: var(--h30-line); }

/* Real search input styled as a chip value */
.h30-chip--search { flex: 1 1 auto; cursor: text; }
.h30-chip__input {
  border: 0; background: none; padding: 0; margin: 0;
  font-family: inherit; font-size: .875rem; font-weight: 500;
  color: var(--h30-ink); width: 100%; min-width: 180px;
}
.h30-chip__input::placeholder { color: var(--h30-muted); font-weight: 500; }
.h30-chip__input:focus { outline: none; }

.h30-chip__go {
  margin-left: 8px; width: 42px; height: 42px; border: 0; cursor: pointer;
  border-radius: 999px; background: var(--h30-accent); color: #fff; font-size: 1rem;
  display: inline-grid; place-items: center;
  transition: background var(--h30-dur) var(--h30-ease), transform var(--h30-dur) var(--h30-ease);
}
.h30-chip__go:hover { background: var(--h30-accent-700); transform: scale(1.05); }

/* Mobile scrim */
.h30-scrim {
  position: fixed; inset: 0; z-index: 1029;
  background: rgba(12, 17, 22, .34); opacity: 0;
  transition: opacity var(--h30-dur) var(--h30-ease);
}
.h30-scrim.is-shown { opacity: 1; }

/* Mobile-only CTA hidden on desktop */
.h30-mobile-cta { display: none; }
.h30-cta--block { width: 100%; justify-content: center; }

/* ==========================================================================
   RESPONSIVE — mobile destination-browsing drawer (redesigned)
   ========================================================================== */
@media (max-width: 991.98px) {
  .h30-nav { gap: 0; }
  .h30-burger { display: block; }
  .h30-signin, .h30-actions > .h30-cta { display: none; }
  .h30-searchbar { display: none; }

  .h30-collapse {
    position: fixed; top: 0; right: 0; z-index: 1031;
    width: min(420px, 90vw); height: 100dvh;
    background: #fff; border-left: 1px solid var(--h30-line);
    box-shadow: -24px 0 60px -30px rgba(12, 17, 22, .3);
    padding: 88px 16px 24px; overflow-y: auto;
    transform: translateX(100%);
    transition: transform 320ms var(--h30-ease);
  }
  .h30-collapse.is-open { transform: translateX(0); }

  .h30-menu { flex-direction: column; align-items: stretch; gap: 2px; }
  .h30-link { height: 50px; width: 100%; justify-content: space-between; font-size: 1rem; padding: 0 14px; }
  .h30-item { border-bottom: 1px solid var(--h30-line-soft); }
  .h30-item.h30-mobile-cta { border-bottom: 0; }

  /* Mega + dropdowns become accordions */
  .h30-mega, .h30-drop {
    position: static; width: auto; opacity: 1; visibility: visible; transform: none;
    pointer-events: auto; border: 0; box-shadow: none; padding: 0;
    max-height: 0; overflow: hidden;
    transition: max-height 320ms var(--h30-ease);
  }
  .h30-item.is-open > .h30-mega,
  .h30-item.is-open > .h30-drop,
  .h30-drop__item--sub.is-open > .h30-drop--sub { max-height: 1200px; }

  .h30-mega { padding: 4px 0 12px; }
  .h30-mega__body { grid-template-columns: 1fr; gap: 16px; }
  .h30-cardgrid { grid-template-columns: 1fr 1fr; }
  .h30-drop--sub { padding-left: 12px; }

  .h30-mobile-cta { display: block; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--h30-line); }
  .h30-cta { height: 50px; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .h30-header * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ===== header-31 · .h31-header ===== */
/* ==========================================================================
   HEADER 31 — LUXURY HOTEL / RESORT
   Self-contained. Tokens namespaced --h31-. 8px spacing rhythm.
   Palette: warm neutrals + one restrained gold. Cormorant serif display + Inter UI.
   Motion: <200ms, cubic-bezier(.4,0,.2,1). Understated five-star calm.
   Distinct: concierge bar + centred serif wordmark + centred nav row that
   condenses on scroll.
   ========================================================================== */

:root {
  /* Warm ink / neutrals */
  --h31-ink: #26211c;
  --h31-body: #5c544b;
  --h31-muted: #8a8177;
  --h31-line: #e8e2d8;
  --h31-line-soft: #f1ece3;
  --h31-bg: #ffffff;
  --h31-cream: #faf7f2;
  --h31-hover: #f5f1ea;

  /* Single accent — restrained gold */
  --h31-gold: #a4854e;
  --h31-gold-700: #8a6f3e;
  --h31-gold-tint: #f4ecdd;

  /* Elevation */
  --h31-shadow-pop: 0 1px 2px rgba(38, 33, 28, .05), 0 22px 48px -18px rgba(38, 33, 28, .22);
  --h31-shadow-bar: 0 1px 0 rgba(38, 33, 28, .06);

  /* System */
  --h31-radius: 4px;
  --h31-radius-sm: 3px;
  --h31-ease: cubic-bezier(.4, 0, .2, 1);
  --h31-dur: 180ms;
  /* Serif: self-host Fraunces (dış Google Font eklenmez; Cormorant yerine) */
  --h31-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --h31-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.h31-header, .h31-header * { box-sizing: border-box; }
.h31-header {
  font-family: var(--h31-ui);
  color: var(--h31-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Accessible skip link */
.h31-skip {
  position: absolute; left: 16px; top: -60px; z-index: 1100;
  padding: 10px 16px; border-radius: 3px; background: var(--h31-ink); color: #fff;
  font-size: .875rem; font-weight: 500; text-decoration: none;
  transition: top var(--h31-dur) var(--h31-ease);
}
.h31-skip:focus { top: 12px; }

/* ==========================================================================
   HEADER SHELL
   ========================================================================== */
.h31-header {
  position: sticky; top: 0; z-index: 1030;
  background: var(--h31-cream);
  border-bottom: 1px solid transparent;
  transition: border-color var(--h31-dur) var(--h31-ease), box-shadow var(--h31-dur) var(--h31-ease);
}
.h31-header.is-stuck {
  background: rgba(250, 247, 242, .95);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom-color: var(--h31-line);
  box-shadow: var(--h31-shadow-bar);
}

.h31-container { max-width: 1200px; margin: 0 auto; padding: 0 28px; }

/* --- Concierge utility bar (scrolls away) ------------------------------ */
.h31-utility {
  border-bottom: 1px solid var(--h31-line-soft);
  max-height: 44px; overflow: hidden;
  transition: max-height 260ms var(--h31-ease), opacity 200ms var(--h31-ease);
}
.h31-header.is-stuck .h31-utility { max-height: 0; opacity: 0; }
.h31-utility__row { display: flex; align-items: center; justify-content: space-between; height: 44px; }
.h31-concierge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; letter-spacing: .06em; color: var(--h31-body); text-decoration: none;
  transition: color var(--h31-dur) var(--h31-ease);
}
.h31-concierge:hover { color: var(--h31-gold-700); }
.h31-concierge i { color: var(--h31-gold); }
.h31-utility__links { display: inline-flex; align-items: center; gap: 14px; }
.h31-utility__links a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .78rem; letter-spacing: .06em; color: var(--h31-body); text-decoration: none;
  transition: color var(--h31-dur) var(--h31-ease);
}
.h31-utility__links a:hover { color: var(--h31-gold-700); }
.h31-utility__links i { color: var(--h31-gold); }
.h31-utility__sep { width: 1px; height: 14px; background: var(--h31-line); }

/* --- Brand row -------------------------------------------------------- */
.h31-brandrow {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 88px;
  transition: height var(--h31-dur) var(--h31-ease);
}
.h31-header.is-stuck .h31-brandrow { height: 72px; }
.h31-brand {
  grid-column: 2; justify-self: center; text-align: center;
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  text-decoration: none; color: var(--h31-ink); line-height: 1;
}
.h31-brand__mark { color: var(--h31-gold); display: block; margin-bottom: 2px; }
.h31-brand__name { font-family: var(--h31-serif); font-size: 1.9rem; font-weight: 600; letter-spacing: .01em; }
.h31-brand__sub { font-size: .62rem; letter-spacing: .32em; color: var(--h31-muted); font-weight: 500; }

.h31-brandrow__actions { grid-column: 3; justify-self: end; display: flex; align-items: center; }

/* --- Nav row (centred, condenses on scroll) --------------------------- */
.h31-navrow {
  border-top: 1px solid var(--h31-line-soft);
  max-height: 56px; overflow: visible;
  transition: max-height var(--h31-dur) var(--h31-ease), opacity var(--h31-dur) var(--h31-ease);
}
.h31-header.is-stuck .h31-navrow { max-height: 50px; }
.h31-collapse { display: flex; justify-content: center; }

.h31-menu {
  display: flex; align-items: center; gap: 6px;
  list-style: none; margin: 0; padding: 0; height: 56px;
  transition: height var(--h31-dur) var(--h31-ease);
}
.h31-header.is-stuck .h31-menu { height: 50px; }
.h31-item { position: relative; }

.h31-link {
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 16px;
  border: 0; background: none; cursor: pointer;
  font-family: var(--h31-ui); font-size: .74rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--h31-body); text-decoration: none;
  position: relative;
  transition: color var(--h31-dur) var(--h31-ease);
}
/* Gold underline grows from centre on hover/open */
.h31-link::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: 6px; height: 1px;
  background: var(--h31-gold);
  transition: left var(--h31-dur) var(--h31-ease), right var(--h31-dur) var(--h31-ease);
}
.h31-link:hover { color: var(--h31-ink); }
.h31-link:hover::after { left: 16px; right: 16px; }
.h31-chevron { color: var(--h31-gold); opacity: .8; transition: transform var(--h31-dur) var(--h31-ease); }
.h31-item.is-open > .h31-trigger { color: var(--h31-ink); }
.h31-item.is-open > .h31-trigger::after { left: 16px; right: 16px; }
.h31-item.is-open > .h31-trigger .h31-chevron { transform: rotate(180deg); }

/* Keyboard focus */
:where(.h31-link, .h31-drop__link, .h31-cta, .h31-burger, .h31-suite, .h31-reserve__btn, .h31-concierge, .h31-utility__links a):focus-visible {
  outline: 2px solid var(--h31-gold); outline-offset: 3px;
}

/* ==========================================================================
   MEGA MENU — Rooms & Suites (centred; suites + amenities + reserve)
   ========================================================================== */
.h31-mega, .h31-drop {
  position: absolute; top: calc(100% + 8px);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--h31-dur) var(--h31-ease), transform var(--h31-dur) var(--h31-ease), visibility var(--h31-dur) var(--h31-ease);
  pointer-events: none;
}
.h31-mega { left: 50%; transform: translate(-50%, 6px); }
.h31-item.is-open > .h31-mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; }
.h31-drop { left: 0; }
.h31-item.is-open > .h31-drop { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }

.h31-mega {
  width: 880px;
  background: var(--h31-bg);
  border: 1px solid var(--h31-line);
  border-radius: var(--h31-radius);
  box-shadow: var(--h31-shadow-pop);
  padding: 26px;
}
.h31-mega__body { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 28px; }
.h31-mega__label {
  margin: 0 0 14px; font-size: .66rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--h31-muted);
}

/* Suite cards */
.h31-suitegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.h31-suite { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--h31-ink); }
.h31-suite__img {
  display: block; height: 96px; border-radius: var(--h31-radius);
  background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px rgba(38, 33, 28, .06);
  filter: saturate(.92);
  transition: transform var(--h31-dur) var(--h31-ease);
}
.h31-suite:hover .h31-suite__img { transform: scale(1.02); }
.h31-suite__img--garden { background-image: linear-gradient(150deg, #9fae8f 0%, #d9dcc4 100%); }
.h31-suite__img--sea { background-image: linear-gradient(150deg, #7fa3b0 0%, #cfe0e2 100%); }
.h31-suite__img--terrace { background-image: linear-gradient(150deg, #c7a98a 0%, #ecdcc4 100%); }
.h31-suite__img--penthouse { background-image: linear-gradient(150deg, #a4854e 0%, #e4cfa5 100%); }
.h31-suite__meta { display: flex; flex-direction: column; gap: 2px; }
.h31-suite__meta strong { font-family: var(--h31-serif); font-size: 1.25rem; font-weight: 600; line-height: 1.1; }
.h31-suite__meta span { font-size: .8rem; color: var(--h31-muted); letter-spacing: .02em; }

/* Amenities column */
.h31-mega__amen { border-left: 1px solid var(--h31-line-soft); padding-left: 28px; }
.h31-amen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.h31-amen li { display: flex; align-items: center; gap: 11px; font-size: .875rem; color: var(--h31-body); }
.h31-amen i { color: var(--h31-gold); font-size: 1rem; width: 18px; text-align: center; }

/* Reserve panel */
.h31-mega__reserve {
  background: var(--h31-cream); border: 1px solid var(--h31-line-soft);
  border-radius: var(--h31-radius); padding: 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.h31-reserve__eyebrow { margin: 0; font-size: .66rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--h31-gold-700); }
.h31-reserve__title { margin: 0 0 6px; font-family: var(--h31-serif); font-size: 1.5rem; font-weight: 600; }
.h31-reserve__dates { display: flex; align-items: center; gap: 12px; }
.h31-reserve__date {
  flex: 1; display: flex; flex-direction: column; gap: 2px;
  background: #fff; border: 1px solid var(--h31-line); border-radius: var(--h31-radius);
  padding: 9px 12px;
}
.h31-reserve__k { font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--h31-muted); }
.h31-reserve__v { font-size: .84rem; font-weight: 500; color: var(--h31-ink); }
.h31-reserve__arrow { color: var(--h31-gold); font-size: .85rem; }
.h31-reserve__btn {
  margin-top: 6px; display: inline-flex; align-items: center; justify-content: center;
  height: 44px; text-decoration: none;
  background: var(--h31-gold); color: #fff;
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  border-radius: var(--h31-radius);
  transition: background var(--h31-dur) var(--h31-ease);
}
.h31-reserve__btn:hover { background: var(--h31-gold-700); }

/* ==========================================================================
   DROPDOWN + NESTED — Dining & Spa
   ========================================================================== */
.h31-drop {
  min-width: 258px; list-style: none; margin: 0; padding: 8px;
  background: var(--h31-bg); border: 1px solid var(--h31-line);
  border-radius: var(--h31-radius); box-shadow: var(--h31-shadow-pop);
}
.h31-drop__item { position: relative; }
.h31-drop__link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 11px 14px;
  border: 0; background: none; cursor: pointer;
  font-family: var(--h31-ui); font-size: .84rem; font-weight: 500; text-align: left;
  color: var(--h31-body); text-decoration: none; border-radius: var(--h31-radius-sm);
  transition: color var(--h31-dur) var(--h31-ease), background var(--h31-dur) var(--h31-ease);
}
.h31-drop__link:hover { color: var(--h31-ink); background: var(--h31-hover); }
.h31-drop__caret { font-size: .7rem; color: var(--h31-gold); }
.h31-drop--sub { top: -9px; left: calc(100% + 8px); }
.h31-drop__item--sub.is-open > .h31-drop--sub { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }

/* ==========================================================================
   ACTIONS — Reserve CTA
   ========================================================================== */
.h31-cta {
  display: inline-flex; align-items: center; height: 44px; padding: 0 26px;
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; text-decoration: none;
  background: var(--h31-gold); border: 1px solid var(--h31-gold);
  border-radius: var(--h31-radius);
  transition: background var(--h31-dur) var(--h31-ease), color var(--h31-dur) var(--h31-ease);
}
.h31-cta:hover { background: var(--h31-gold-700); border-color: var(--h31-gold-700); }

/* --- Hamburger -------------------------------------------------------- */
.h31-burger {
  grid-column: 1; justify-self: start;
  display: none; position: relative; width: 42px; height: 42px; padding: 0;
  border: 1px solid var(--h31-line); border-radius: var(--h31-radius);
  background: #fff; cursor: pointer;
}
.h31-burger span {
  position: absolute; left: 12px; width: 18px; height: 1.5px; border-radius: 2px;
  background: var(--h31-ink);
  transition: transform var(--h31-dur) var(--h31-ease), opacity var(--h31-dur) var(--h31-ease);
}
.h31-burger span:nth-child(1) { top: 15px; }
.h31-burger span:nth-child(2) { top: 20px; }
.h31-burger span:nth-child(3) { top: 25px; }
.h31-burger[aria-expanded="true"] span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.h31-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.h31-burger[aria-expanded="true"] span:nth-child(3) { top: 20px; transform: rotate(-45deg); }

/* Mobile scrim */
.h31-scrim {
  position: fixed; inset: 0; z-index: 1029;
  background: rgba(38, 33, 28, .38); opacity: 0;
  transition: opacity var(--h31-dur) var(--h31-ease);
}
.h31-scrim.is-shown { opacity: 1; }

/* Mobile-only block */
.h31-mobile-cta { display: none; }
.h31-cta--block { width: 100%; justify-content: center; }
.h31-mobile-concierge {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: .8rem; letter-spacing: .04em; color: var(--h31-body); text-decoration: none;
}
.h31-mobile-concierge i { color: var(--h31-gold); }

/* ==========================================================================
   RESPONSIVE — mobile reservation drawer (redesigned)
   ========================================================================== */
@media (max-width: 991.98px) {
  .h31-burger { display: block; }
  .h31-brandrow { height: 72px; grid-template-columns: 42px 1fr 42px; }
  .h31-brand__name { font-size: 1.55rem; }
  .h31-brandrow__actions { display: none; }
  .h31-navrow { display: none; }

  .h31-collapse {
    position: fixed; top: 0; left: 0; z-index: 1031;
    width: min(400px, 90vw); height: 100dvh;
    background: var(--h31-cream); border-right: 1px solid var(--h31-line);
    box-shadow: 24px 0 60px -30px rgba(38, 33, 28, .3);
    padding: 40px 20px 28px; overflow-y: auto; display: block;
    transform: translateX(-100%);
    transition: transform 320ms var(--h31-ease);
  }
  .h31-collapse.is-open { transform: translateX(0); }

  .h31-menu { flex-direction: column; align-items: stretch; gap: 0; height: auto; }
  .h31-header.is-stuck .h31-menu { height: auto; }
  .h31-link {
    height: 54px; width: 100%; justify-content: space-between;
    font-size: .82rem; padding: 0 6px; letter-spacing: .1em;
  }
  .h31-link::after { display: none; }
  .h31-item { border-bottom: 1px solid var(--h31-line-soft); }
  .h31-item.h31-mobile-cta { border-bottom: 0; }

  /* Mega + dropdowns become accordions */
  .h31-mega, .h31-drop {
    position: static; width: auto; opacity: 1; visibility: visible; transform: none;
    pointer-events: auto; border: 0; box-shadow: none; padding: 0; background: none;
    max-height: 0; overflow: hidden;
    transition: max-height 320ms var(--h31-ease);
  }
  .h31-item.is-open > .h31-mega,
  .h31-item.is-open > .h31-drop,
  .h31-drop__item--sub.is-open > .h31-drop--sub { max-height: 1400px; }

  .h31-mega { padding: 4px 0 14px; }
  .h31-mega__body { grid-template-columns: 1fr; gap: 20px; }
  .h31-suitegrid { grid-template-columns: 1fr 1fr; }
  .h31-mega__amen { border-left: 0; padding-left: 0; }
  .h31-drop--sub { padding-left: 12px; }

  .h31-mobile-cta { display: flex; flex-direction: column; align-items: flex-start; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--h31-line); }
}

@media (prefers-reduced-motion: reduce) {
  .h31-header * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ===== header-32 · .h32-header ===== */
/* ==========================================================================
   HEADER 32 — RESTAURANT / CULINARY
   Self-contained. Tokens --h32-. Warm palette, Fraunces display used sparingly.
   ========================================================================== */
:root{
  --h32-ink:#241a12; --h32-body:#5a4a3c; --h32-muted:#8a7867;
  --h32-line:#eae0d4; --h32-line-soft:#f4ede2; --h32-bg:#fffdf9; --h32-hover:#f6efe4;
  --h32-accent:#8a3a2a; --h32-accent-700:#6f2d20; --h32-gold:#a9803f; --h32-tint:#f3e6dc;
  --h32-shadow:0 1px 2px rgba(36,26,18,.05),0 18px 44px -18px rgba(36,26,18,.24);
  --h32-radius:12px; --h32-radius-sm:9px; --h32-ease:cubic-bezier(.4,0,.2,1); --h32-dur:190ms;
  --h32-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --h32-display:"Fraunces",Georgia,"Times New Roman",serif;
}
.h32-header,.h32-header *{box-sizing:border-box;} .h32-header{font-family:var(--h32-font);color:var(--h32-ink);-webkit-font-smoothing:antialiased;}
.h32-container{max-width:1200px;margin:0 auto;padding:0 24px;}
.h32-skip{position:absolute;left:16px;top:-60px;z-index:1100;padding:10px 16px;border-radius:8px;background:var(--h32-accent);color:#fff;font-size:.875rem;text-decoration:none;transition:top var(--h32-dur) var(--h32-ease);} .h32-skip:focus{top:12px;}

.h32-header{position:sticky;top:0;z-index:1030;background:rgba(255,253,249,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color var(--h32-dur) var(--h32-ease),box-shadow var(--h32-dur) var(--h32-ease);}
.h32-header.is-stuck{border-bottom-color:var(--h32-line);box-shadow:0 1px 0 var(--h32-line);}
.h32-nav{display:flex;align-items:center;gap:32px;height:74px;}
.h32-brand{text-decoration:none;color:var(--h32-ink);flex:0 0 auto;}
.h32-brand__name{font-family:var(--h32-display);font-size:1.5rem;font-weight:600;letter-spacing:.01em;}

.h32-collapse{flex:1 1 auto;}
.h32-menu{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;}
.h32-item{position:relative;}
.h32-link{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border:0;background:none;cursor:pointer;font:inherit;font-size:.95rem;font-weight:500;color:var(--h32-body);text-decoration:none;border-radius:var(--h32-radius-sm);transition:color var(--h32-dur) var(--h32-ease),background var(--h32-dur) var(--h32-ease);}
.h32-link:hover{color:var(--h32-accent);background:var(--h32-hover);}
.h32-chevron{opacity:.55;transition:transform var(--h32-dur) var(--h32-ease);}
.h32-item.is-open>.h32-trigger{color:var(--h32-accent);background:var(--h32-hover);} .h32-item.is-open>.h32-trigger .h32-chevron{transform:rotate(180deg);}
:where(.h32-link,.h32-drop__link,.h32-cta,.h32-burger,.h32-dish,.h32-special):focus-visible{outline:2px solid var(--h32-accent);outline-offset:2px;}

.h32-mega,.h32-drop{position:absolute;top:calc(100% + 10px);left:0;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity var(--h32-dur) var(--h32-ease),transform var(--h32-dur) var(--h32-ease),visibility var(--h32-dur) var(--h32-ease);pointer-events:none;}
.h32-item.is-open>.h32-mega,.h32-item.is-open>.h32-drop{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
.h32-mega{width:660px;background:var(--h32-bg);border:1px solid var(--h32-line);border-radius:var(--h32-radius);box-shadow:var(--h32-shadow);padding:20px;display:grid;grid-template-columns:1.6fr 1fr;gap:18px;}
.h32-courses{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
.h32-course__label{margin:0 0 8px;font-family:var(--h32-display);font-size:.95rem;font-weight:600;color:var(--h32-accent);}
.h32-dish{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:7px 6px;border-radius:7px;text-decoration:none;color:var(--h32-ink);font-size:.85rem;transition:background var(--h32-dur) var(--h32-ease);}
.h32-dish:hover{background:var(--h32-hover);} .h32-dish em{font-style:normal;color:var(--h32-gold);font-weight:600;}
.h32-special{display:flex;flex-direction:column;gap:6px;border-radius:var(--h32-radius);overflow:hidden;text-decoration:none;color:var(--h32-ink);background:var(--h32-tint);}
.h32-special__img{height:96px;background:linear-gradient(135deg,#c58a5a,#8a3a2a);}
.h32-special__tag{margin:12px 14px 0;font-size:.6875rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--h32-accent);}
.h32-special__title{margin:0 14px;font-family:var(--h32-display);font-size:1.1rem;font-weight:600;} .h32-special__cta{margin:auto 14px 14px;display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:600;color:var(--h32-accent);}
.h32-special__cta i{transition:transform var(--h32-dur) var(--h32-ease);} .h32-special:hover .h32-special__cta i{transform:translateX(3px);}

.h32-drop{min-width:210px;list-style:none;margin:0;padding:6px;background:var(--h32-bg);border:1px solid var(--h32-line);border-radius:var(--h32-radius);box-shadow:var(--h32-shadow);}
.h32-drop__item{position:relative;}
.h32-drop__link{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:9px 12px;border:0;background:none;cursor:pointer;font:inherit;font-size:.875rem;font-weight:500;text-align:left;color:var(--h32-body);text-decoration:none;border-radius:var(--h32-radius-sm);transition:color var(--h32-dur) var(--h32-ease),background var(--h32-dur) var(--h32-ease);}
.h32-drop__link:hover{color:var(--h32-accent);background:var(--h32-hover);} .h32-drop__caret{font-size:.7rem;opacity:.5;}
.h32-drop--sub{top:-7px;left:calc(100% + 6px);} .h32-drop__item--sub.is-open>.h32-drop--sub{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}

.h32-actions{display:flex;align-items:center;gap:16px;margin-left:auto;flex:0 0 auto;}
.h32-hours{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:500;color:var(--h32-muted);} .h32-hours i{color:var(--h32-gold);}
.h32-cta{display:inline-flex;align-items:center;height:42px;padding:0 20px;font-size:.9375rem;font-weight:600;color:#fff;text-decoration:none;background:var(--h32-accent);border-radius:999px;transition:background var(--h32-dur) var(--h32-ease);} .h32-cta:hover{background:var(--h32-accent-700);}
.h32-burger{display:none;position:relative;width:40px;height:40px;padding:0;border:1px solid var(--h32-line);border-radius:var(--h32-radius-sm);background:#fff;cursor:pointer;}
.h32-burger span{position:absolute;left:11px;width:18px;height:1.8px;background:var(--h32-ink);transition:transform var(--h32-dur) var(--h32-ease);} .h32-burger span:nth-child(1){top:16px;} .h32-burger span:nth-child(2){bottom:16px;}
.h32-burger[aria-expanded="true"] span:nth-child(1){top:19px;transform:rotate(45deg);} .h32-burger[aria-expanded="true"] span:nth-child(2){bottom:19px;transform:rotate(-45deg);}
.h32-scrim{position:fixed;inset:0;z-index:1029;background:rgba(36,26,18,.36);opacity:0;transition:opacity var(--h32-dur) var(--h32-ease);} .h32-scrim.is-shown{opacity:1;}

@media (max-width:991.98px){
  .h32-burger{display:block;} .h32-hours,.h32-actions>.h32-cta{display:none;}
  .h32-collapse{position:fixed;top:0;right:0;z-index:1031;width:min(390px,90vw);height:100dvh;background:var(--h32-bg);box-shadow:-24px 0 60px -30px rgba(36,26,18,.3);padding:84px 16px 24px;overflow-y:auto;transform:translateX(100%);transition:transform 320ms var(--h32-ease);}
  .h32-collapse.is-open{transform:translateX(0);}
  .h32-menu{flex-direction:column;align-items:stretch;gap:2px;} .h32-link{height:48px;justify-content:space-between;font-size:1rem;} .h32-item{border-bottom:1px solid var(--h32-line-soft);}
  .h32-mega,.h32-drop{position:static;width:auto;opacity:1;visibility:visible;transform:none;pointer-events:auto;border:0;box-shadow:none;padding:0;display:block;max-height:0;overflow:hidden;transition:max-height 300ms var(--h32-ease);}
  .h32-item.is-open>.h32-mega,.h32-item.is-open>.h32-drop,.h32-drop__item--sub.is-open>.h32-drop--sub{max-height:1000px;}
  .h32-courses{grid-template-columns:1fr;} .h32-special{display:none;} .h32-drop--sub{padding-left:14px;}
  .h32-collapse::after{content:"Reserve a table";display:block;text-align:center;margin-top:18px;padding:13px;border-radius:999px;background:var(--h32-accent);color:#fff;font-weight:600;}
}
@media (min-width:992px){.h32-scrim{display:none;}}

@media (prefers-reduced-motion:reduce){.h32-header *{transition-duration:.01ms !important;}}

/* ===== header-33 · .h33-header ===== */
/* ==========================================================================
   HEADER 33 — FASHION E-COMMERCE (EDITORIAL)
   Self-contained. Tokens --h33-. Editorial black/white, letter-spaced nav.
   ========================================================================== */
:root{
  --h33-ink:#0a0a0a; --h33-body:#3d3d3d; --h33-muted:#8a8a8a;
  --h33-line:#e6e6e6; --h33-line-soft:#f1f1f1; --h33-bg:#fff; --h33-hover:#f5f5f5;
  --h33-shadow:0 1px 2px rgba(0,0,0,.05),0 20px 44px -18px rgba(0,0,0,.22);
  --h33-radius:0px; --h33-ease:cubic-bezier(.4,0,.2,1); --h33-dur:200ms;
  --h33-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.h33-header, .h33-header *{box-sizing:border-box;} .h33-header{font-family:var(--h33-font);color:var(--h33-ink);-webkit-font-smoothing:antialiased;}
.h33-container{max-width:1280px;margin:0 auto;padding:0 24px;}
.h33-skip{position:absolute;left:16px;top:-60px;z-index:1100;padding:10px 16px;background:var(--h33-ink);color:#fff;font-size:.875rem;text-decoration:none;transition:top var(--h33-dur) var(--h33-ease);} .h33-skip:focus{top:12px;}

.h33-header{position:sticky;top:0;z-index:1030;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--h33-line);}
.h33-nav{display:flex;align-items:center;gap:28px;height:70px;}
.h33-brand{text-decoration:none;color:var(--h33-ink);flex:0 0 auto;}
.h33-brand__name{font-size:1.15rem;font-weight:600;letter-spacing:.22em;}

.h33-collapse{flex:1 1 auto;display:flex;justify-content:center;}
.h33-menu{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0;}
.h33-item{position:relative;}
.h33-link{display:inline-flex;align-items:center;height:40px;padding:0 14px;border:0;background:none;cursor:pointer;font:inherit;font-size:.8125rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--h33-body);text-decoration:none;transition:color var(--h33-dur) var(--h33-ease);position:relative;}
.h33-link::after{content:"";position:absolute;left:14px;right:14px;bottom:8px;height:1px;background:var(--h33-ink);transform:scaleX(0);transform-origin:left;transition:transform var(--h33-dur) var(--h33-ease);}
.h33-link:hover{color:var(--h33-ink);} .h33-link:hover::after,.h33-item.is-open>.h33-trigger::after{transform:scaleX(1);}
:where(.h33-link,.h33-drop__link,.h33-icon,.h33-burger,.h33-mlink,.h33-look):focus-visible{outline:2px solid var(--h33-ink);outline-offset:2px;}

.h33-mega,.h33-drop{position:absolute;top:100%;left:0;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity var(--h33-dur) var(--h33-ease),transform var(--h33-dur) var(--h33-ease),visibility var(--h33-dur) var(--h33-ease);pointer-events:none;}
.h33-item.is-open>.h33-mega,.h33-item.is-open>.h33-drop{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
.h33-mega{width:640px;background:#fff;border:1px solid var(--h33-line);box-shadow:var(--h33-shadow);padding:24px;display:grid;grid-template-columns:1fr 1.2fr;gap:24px;}
.h33-mega__cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.h33-mega__label{margin:0 0 12px;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--h33-ink);}
.h33-mlink{display:block;padding:6px 0;font-size:.85rem;color:var(--h33-body);text-decoration:none;transition:color var(--h33-dur) var(--h33-ease);} .h33-mlink:hover{color:var(--h33-ink);}
.h33-looks{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.h33-look{text-decoration:none;color:var(--h33-ink);} .h33-look__img{display:block;height:150px;background:#eee;transition:opacity var(--h33-dur) var(--h33-ease);}
.h33-look__img--1{background:linear-gradient(135deg,#d8d2c8,#8f867a);} .h33-look__img--2{background:linear-gradient(135deg,#c9cdd2,#7c828a);}
.h33-look:hover .h33-look__img{opacity:.85;} .h33-look__cap{display:block;margin-top:8px;font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;}

.h33-drop{min-width:200px;list-style:none;margin:0;padding:8px;background:#fff;border:1px solid var(--h33-line);box-shadow:var(--h33-shadow);}
.h33-drop__item{position:relative;}
.h33-drop__link{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:9px 12px;border:0;background:none;cursor:pointer;font:inherit;font-size:.78rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;text-align:left;color:var(--h33-body);text-decoration:none;transition:color var(--h33-dur) var(--h33-ease),background var(--h33-dur) var(--h33-ease);}
.h33-drop__link:hover{color:var(--h33-ink);background:var(--h33-hover);} .h33-drop__caret{font-size:.7rem;opacity:.5;}
.h33-drop--sub{top:-8px;left:calc(100% + 4px);} .h33-drop__item--sub.is-open>.h33-drop--sub{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}

.h33-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto;}
.h33-icon{display:grid;place-items:center;width:40px;height:40px;border:0;background:none;color:var(--h33-ink);cursor:pointer;text-decoration:none;font-size:1.1rem;position:relative;border-radius:8px;transition:background var(--h33-dur) var(--h33-ease);} .h33-icon:hover{background:var(--h33-hover);}
.h33-cart__badge{position:absolute;top:5px;right:5px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--h33-ink);color:#fff;font-size:.62rem;font-weight:700;display:grid;place-items:center;}
.h33-cta{display:inline-flex;align-items:center;height:38px;padding:0 18px;margin-left:6px;background:var(--h33-ink);color:#fff;border:1px solid var(--h33-ink);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:background var(--h33-dur) var(--h33-ease),color var(--h33-dur) var(--h33-ease);} .h33-cta:hover{background:transparent;color:var(--h33-ink);}
.h33-burger{display:none;position:relative;width:38px;height:38px;padding:0;border:0;background:none;cursor:pointer;}
.h33-burger span{position:absolute;left:9px;width:20px;height:1.5px;background:var(--h33-ink);transition:transform var(--h33-dur) var(--h33-ease);} .h33-burger span:nth-child(1){top:16px;} .h33-burger span:nth-child(2){bottom:16px;}
.h33-burger[aria-expanded="true"] span:nth-child(1){top:18px;transform:rotate(45deg);} .h33-burger[aria-expanded="true"] span:nth-child(2){bottom:18px;transform:rotate(-45deg);}
.h33-scrim{position:fixed;inset:0;z-index:1029;background:rgba(0,0,0,.3);opacity:0;transition:opacity var(--h33-dur) var(--h33-ease);} .h33-scrim.is-shown{opacity:1;}

@media (max-width:991.98px){
  .h33-burger{display:block;} .h33-brand{margin:0 auto 0 4px;}
  .h33-collapse{position:fixed;top:0;left:0;z-index:1031;width:min(380px,88vw);height:100dvh;background:#fff;border-right:1px solid var(--h33-line);padding:80px 20px 24px;overflow-y:auto;justify-content:flex-start;transform:translateX(-100%);transition:transform 320ms var(--h33-ease);}
  .h33-collapse.is-open{transform:translateX(0);}
  .h33-menu{flex-direction:column;align-items:stretch;gap:0;width:100%;} .h33-link{height:52px;justify-content:space-between;font-size:.9rem;} .h33-link::after{display:none;} .h33-item{border-bottom:1px solid var(--h33-line-soft);}
  .h33-mega,.h33-drop{position:static;width:auto;opacity:1;visibility:visible;transform:none;pointer-events:auto;border:0;box-shadow:none;padding:0;display:block;max-height:0;overflow:hidden;transition:max-height 300ms var(--h33-ease);}
  .h33-item.is-open>.h33-mega,.h33-item.is-open>.h33-drop,.h33-drop__item--sub.is-open>.h33-drop--sub{max-height:800px;padding-bottom:12px;}
  .h33-mega__cols{grid-template-columns:1fr 1fr;} .h33-looks{display:none;} .h33-drop--sub{padding-left:14px;}
}
@media (min-width:992px){.h33-scrim{display:none;}}

@media (prefers-reduced-motion:reduce){.h33-header *{transition-duration:.01ms !important;}}

/* ===== header-34 · .h34-header ===== */
/* ==========================================================================
   HEADER 34 — TECHNOLOGY / PRODUCT SUITE
   Self-contained. Tokens namespaced --h34-. 8px spacing rhythm.
   Palette: crisp neutral ink + one electric-blue tech accent.
   Motion: <200ms, cubic-bezier(.4,0,.2,1). No gimmicks.
   ========================================================================== */

:root {
  /* Ink / neutrals */
  --h34-ink: #0c1116;
  --h34-body: #464e5a;
  --h34-muted: #6a7382;
  --h34-line: #e8ebef;
  --h34-line-soft: #f2f4f7;
  --h34-bg: #ffffff;
  --h34-hover: #f5f7fa;

  /* Single tech accent — electric blue */
  --h34-accent: #2f6bff;
  --h34-accent-700: #1f52d6;
  --h34-accent-tint: #ecf1ff;

  /* Elevation */
  --h34-shadow-pop: 0 1px 2px rgba(12, 17, 22, .05), 0 18px 44px -16px rgba(12, 17, 22, .22);
  --h34-shadow-bar: 0 1px 0 rgba(12, 17, 22, .07);

  /* System */
  --h34-radius: 14px;
  --h34-radius-sm: 10px;
  --h34-ease: cubic-bezier(.4, 0, .2, 1);
  --h34-dur: 180ms;
  --h34-h: 70px;
  --h34-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.h34-header, .h34-header * { box-sizing: border-box; }
.h34-header {
  font-family: var(--h34-font);
  color: var(--h34-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Skip link */
.h34-skip {
  position: absolute; left: 16px; top: -60px; z-index: 1100;
  padding: 10px 16px; border-radius: 8px; background: var(--h34-ink); color: #fff;
  font-size: .875rem; font-weight: 500; text-decoration: none;
  transition: top var(--h34-dur) var(--h34-ease);
}
.h34-skip:focus { top: 12px; }

/* ==========================================================================
   HEADER SHELL — sticky with hairline on scroll
   ========================================================================== */
.h34-header {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--h34-dur) var(--h34-ease), box-shadow var(--h34-dur) var(--h34-ease), background var(--h34-dur) var(--h34-ease);
}
.h34-header.is-stuck {
  background: rgba(255, 255, 255, .93);
  border-bottom-color: var(--h34-line);
  box-shadow: var(--h34-shadow-bar);
}

.h34-container { max-width: 1220px; margin: 0 auto; padding: 0 24px; }
.h34-nav { display: flex; align-items: center; gap: 36px; height: var(--h34-h); }

/* --- Brand ------------------------------------------------------------- */
.h34-brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--h34-ink); flex: 0 0 auto;
}
.h34-brand__logo { color: var(--h34-accent); display: block; }
.h34-brand__name { font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; }

/* ==========================================================================
   PRIMARY MENU
   ========================================================================== */
.h34-collapse { flex: 1 1 auto; display: flex; align-items: center; }
.h34-menu {
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: 0;
}
.h34-item { position: relative; }

.h34-link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 13px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .9375rem; font-weight: 500;
  color: var(--h34-body); text-decoration: none;
  border-radius: var(--h34-radius-sm);
  transition: color var(--h34-dur) var(--h34-ease), background var(--h34-dur) var(--h34-ease);
}
.h34-link:hover { color: var(--h34-ink); background: var(--h34-hover); }
.h34-chevron { color: currentColor; opacity: .55; transition: transform var(--h34-dur) var(--h34-ease); }
.h34-item.is-open > .h34-trigger { color: var(--h34-ink); background: var(--h34-hover); }
.h34-item.is-open > .h34-trigger .h34-chevron { transform: rotate(180deg); }

/* Keyboard focus */
:where(.h34-link, .h34-drop__link, .h34-cta, .h34-signin, .h34-burger, .h34-tile, .h34-news):focus-visible {
  outline: 2px solid var(--h34-accent); outline-offset: 2px;
}

/* ==========================================================================
   MEGA MENU — product-tile grid + What's new rail
   ========================================================================== */
.h34-mega, .h34-drop {
  position: absolute; top: calc(100% + 10px); left: 0;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--h34-dur) var(--h34-ease), transform var(--h34-dur) var(--h34-ease), visibility var(--h34-dur) var(--h34-ease);
  pointer-events: none;
}
.h34-item.is-open > .h34-mega, .h34-item.is-open > .h34-drop {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

.h34-mega {
  width: 840px;
  background: var(--h34-bg);
  border: 1px solid var(--h34-line);
  border-radius: var(--h34-radius);
  box-shadow: var(--h34-shadow-pop);
  padding: 22px;
}
/* Two product categories + one narrower news rail */
.h34-mega__grid { display: grid; grid-template-columns: 1fr 1fr .82fr; gap: 24px; }

.h34-cat__label {
  margin: 2px 0 12px; font-size: .6875rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--h34-muted);
}
.h34-tiles { display: flex; flex-direction: column; gap: 4px; }
.h34-tile {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 10px; border-radius: var(--h34-radius-sm);
  text-decoration: none; color: var(--h34-ink);
  transition: background var(--h34-dur) var(--h34-ease);
}
.h34-tile:hover { background: var(--h34-hover); }
.h34-tile__ic {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--h34-accent-tint); color: var(--h34-accent); font-size: 1.05rem;
  transition: background var(--h34-dur) var(--h34-ease), transform var(--h34-dur) var(--h34-ease);
}
.h34-tile:hover .h34-tile__ic { background: var(--h34-accent); color: #fff; transform: translateY(-1px); }
.h34-tile__body { display: flex; flex-direction: column; gap: 2px; }
.h34-tile__body strong { font-size: .9rem; font-weight: 600; line-height: 1.3; }
.h34-tile__body span { font-size: .8125rem; color: var(--h34-muted); line-height: 1.4; }

/* What's new rail */
.h34-whatsnew {
  padding-left: 24px; border-left: 1px solid var(--h34-line-soft);
  display: flex; flex-direction: column; gap: 8px;
}
.h34-news {
  display: flex; flex-direction: column; gap: 5px;
  padding: 14px; border-radius: var(--h34-radius-sm);
  background: var(--h34-accent-tint); text-decoration: none; color: var(--h34-ink);
  transition: transform var(--h34-dur) var(--h34-ease), box-shadow var(--h34-dur) var(--h34-ease);
}
.h34-news:hover { transform: translateY(-1px); box-shadow: var(--h34-shadow-pop); }
.h34-news__badge {
  align-self: flex-start; font-size: .625rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
  background: var(--h34-accent); color: #fff;
}
.h34-news__title { font-size: .9rem; font-weight: 600; line-height: 1.3; }
.h34-news__desc { font-size: .8125rem; color: var(--h34-muted); line-height: 1.45; }

.h34-news--plain { flex-direction: row; align-items: flex-start; gap: 10px; background: transparent; padding: 9px 8px; }
.h34-news--plain:hover { background: var(--h34-hover); box-shadow: none; transform: none; }
.h34-news__dot { flex: 0 0 auto; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--h34-accent); }
.h34-news__mini { display: flex; flex-direction: column; gap: 1px; }
.h34-news__mini strong { font-size: .8375rem; font-weight: 600; }
.h34-news__mini span { font-size: .78rem; color: var(--h34-muted); }

/* ==========================================================================
   DROPDOWN + NESTED
   ========================================================================== */
.h34-drop {
  min-width: 236px; list-style: none; margin: 0; padding: 6px;
  background: var(--h34-bg); border: 1px solid var(--h34-line);
  border-radius: var(--h34-radius); box-shadow: var(--h34-shadow-pop);
}
.h34-drop__item { position: relative; }
.h34-drop__link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 10px 12px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .875rem; font-weight: 500; text-align: left;
  color: var(--h34-body); text-decoration: none; border-radius: var(--h34-radius-sm);
  transition: color var(--h34-dur) var(--h34-ease), background var(--h34-dur) var(--h34-ease);
}
.h34-drop__link > span { display: inline-flex; align-items: center; gap: 10px; }
.h34-drop__link i:first-child { color: var(--h34-accent); font-size: .95rem; }
.h34-drop__link:hover { color: var(--h34-ink); background: var(--h34-hover); }
.h34-drop__caret { font-size: .7rem; opacity: .5; }
.h34-drop--sub { top: -7px; left: calc(100% + 6px); }
.h34-drop__item--sub.is-open > .h34-drop--sub {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

/* ==========================================================================
   ACTIONS
   ========================================================================== */
.h34-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }
.h34-signin {
  padding: 0 12px; height: 40px; display: inline-flex; align-items: center;
  font-size: .9375rem; font-weight: 500; color: var(--h34-body); text-decoration: none;
  border-radius: var(--h34-radius-sm);
  transition: color var(--h34-dur) var(--h34-ease), background var(--h34-dur) var(--h34-ease);
}
.h34-signin:hover { color: var(--h34-ink); background: var(--h34-hover); }
.h34-cta {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px;
  font-size: .9375rem; font-weight: 600; color: #fff; text-decoration: none;
  background: var(--h34-accent); border-radius: var(--h34-radius-sm);
  box-shadow: 0 1px 2px rgba(47, 107, 255, .35);
  transition: background var(--h34-dur) var(--h34-ease), transform var(--h34-dur) var(--h34-ease);
}
.h34-cta:hover { background: var(--h34-accent-700); }
.h34-cta:active { transform: translateY(1px); }

.h34-mobile-cta { display: none; }

/* --- Hamburger (three-line, morphs to X) ------------------------------- */
.h34-burger {
  display: none; position: relative; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--h34-line); border-radius: var(--h34-radius-sm);
  background: #fff; cursor: pointer;
}
.h34-burger span {
  position: absolute; left: 11px; width: 18px; height: 1.8px; border-radius: 2px;
  background: var(--h34-ink);
  transition: transform var(--h34-dur) var(--h34-ease), opacity var(--h34-dur) var(--h34-ease);
}
.h34-burger span:nth-child(1) { top: 14px; }
.h34-burger span:nth-child(2) { top: 19px; }
.h34-burger span:nth-child(3) { top: 24px; }
.h34-burger[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.h34-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.h34-burger[aria-expanded="true"] span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

/* Mobile scrim */
.h34-scrim {
  position: fixed; inset: 0; z-index: 1029;
  background: rgba(12, 17, 22, .34); opacity: 0;
  transition: opacity var(--h34-dur) var(--h34-ease);
}
.h34-scrim.is-shown { opacity: 1; }

/* ==========================================================================
   RESPONSIVE — mobile slide-over with product-grid accordion
   ========================================================================== */
@media (max-width: 991.98px) {
  .h34-nav { gap: 0; }
  .h34-burger { display: block; }
  .h34-actions > .h34-signin, .h34-actions > .h34-cta { display: none; }
  .h34-actions { margin-left: auto; }

  .h34-collapse {
    position: fixed; top: 0; right: 0; z-index: 1031;
    width: min(420px, 90vw); height: 100dvh;
    flex-direction: column; align-items: stretch;
    background: #fff; border-left: 1px solid var(--h34-line);
    box-shadow: -24px 0 60px -30px rgba(12, 17, 22, .3);
    padding: 84px 16px 24px; overflow-y: auto;
    transform: translateX(100%);
    transition: transform 320ms var(--h34-ease);
  }
  .h34-collapse.is-open { transform: translateX(0); }

  .h34-menu { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; }
  .h34-link { height: 50px; width: 100%; justify-content: space-between; font-size: 1rem; padding: 0 14px; }
  .h34-item { border-bottom: 1px solid var(--h34-line-soft); }
  .h34-item:last-child { border-bottom: 0; }

  /* Mega + dropdowns collapse to accordions */
  .h34-mega, .h34-drop {
    position: static; width: auto; opacity: 1; visibility: visible; transform: none;
    pointer-events: auto; border: 0; box-shadow: none; padding: 0;
    max-height: 0; overflow: hidden;
    transition: max-height 300ms var(--h34-ease);
  }
  .h34-item.is-open > .h34-mega,
  .h34-item.is-open > .h34-drop,
  .h34-drop__item--sub.is-open > .h34-drop--sub { max-height: 1200px; }

  .h34-mega { padding: 4px 0 10px; }
  /* Product grid becomes two-column tile grid inside the accordion */
  .h34-mega__grid { grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  .h34-whatsnew { grid-column: 1 / -1; padding-left: 0; border-left: 0; border-top: 1px solid var(--h34-line-soft); padding-top: 12px; margin-top: 4px; }
  .h34-tile { padding: 9px 8px; }
  .h34-tile__body span { display: none; }
  .h34-cat__label { margin-top: 8px; }

  .h34-drop--sub { padding-left: 14px; }

  /* CTA row pinned inside the drawer */
  .h34-mobile-cta {
    display: flex; flex-direction: column; gap: 10px; margin-top: 22px;
    padding-top: 20px; border-top: 1px solid var(--h34-line);
  }
  .h34-signin--m, .h34-cta--m { display: inline-flex; justify-content: center; height: 48px; }
  .h34-signin--m { border: 1px solid var(--h34-line); }
}

@media (prefers-reduced-motion: reduce) {
  .h34-header * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ===== header-35 · .h35-header ===== */
/* ==========================================================================
   HEADER 35 — LOGISTICS / SHIPPING
   Self-contained. Tokens namespaced --h35-. 8px spacing rhythm.
   Palette: restrained steel-blue on a cool-neutral canvas.
   Motion: <200ms, cubic-bezier(.4,0,.2,1). No gimmicks.
   ========================================================================== */

:root {
  /* Ink / neutrals (cool cast) */
  --h35-ink: #0e1721;
  --h35-body: #445062;
  --h35-muted: #6b7789;
  --h35-line: #e3e8ef;
  --h35-line-soft: #eef1f6;
  --h35-bg: #ffffff;
  --h35-hover: #f3f6fa;

  /* Steel-blue accent */
  --h35-accent: #1f5fb0;
  --h35-accent-700: #184c8f;
  --h35-accent-tint: #e9f1fb;
  --h35-steel: #eef2f7;

  /* Elevation */
  --h35-shadow-pop: 0 1px 2px rgba(14, 23, 33, .05), 0 18px 42px -16px rgba(14, 23, 33, .24);
  --h35-shadow-bar: 0 1px 0 rgba(14, 23, 33, .07);

  /* System */
  --h35-radius: 12px;
  --h35-radius-sm: 9px;
  --h35-ease: cubic-bezier(.4, 0, .2, 1);
  --h35-dur: 170ms;
  --h35-h: 70px;
  --h35-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.h35-header, .h35-header * { box-sizing: border-box; }
.h35-header {
  font-family: var(--h35-font);
  color: var(--h35-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Skip link */
.h35-skip {
  position: absolute; left: 16px; top: -60px; z-index: 1100;
  padding: 10px 16px; border-radius: 8px; background: var(--h35-ink); color: #fff;
  font-size: .875rem; font-weight: 500; text-decoration: none;
  transition: top var(--h35-dur) var(--h35-ease);
}
.h35-skip:focus { top: 12px; }

/* ==========================================================================
   HEADER SHELL — opaque bar, hairline on scroll (no blur; operational feel)
   ========================================================================== */
.h35-header {
  position: sticky; top: 0; z-index: 1030;
  background: #fff;
  border-bottom: 1px solid var(--h35-line-soft);
  transition: border-color var(--h35-dur) var(--h35-ease), box-shadow var(--h35-dur) var(--h35-ease);
}
.h35-header.is-stuck {
  border-bottom-color: var(--h35-line);
  box-shadow: var(--h35-shadow-bar);
}

.h35-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.h35-nav { display: flex; align-items: center; gap: 28px; height: var(--h35-h); }

/* --- Brand ------------------------------------------------------------- */
.h35-brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--h35-ink); flex: 0 0 auto;
}
.h35-brand__logo { color: var(--h35-accent); display: block; }
.h35-brand__name { font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; }

/* ==========================================================================
   COLLAPSE — holds menu + integrated track field (order-controlled)
   ========================================================================== */
.h35-collapse { flex: 1 1 auto; display: flex; align-items: center; gap: 20px; }
.h35-menu {
  order: 1;
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: 0;
}
.h35-item { position: relative; }

.h35-link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 12px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .9375rem; font-weight: 500;
  color: var(--h35-body); text-decoration: none;
  border-radius: var(--h35-radius-sm);
  transition: color var(--h35-dur) var(--h35-ease), background var(--h35-dur) var(--h35-ease);
}
.h35-link:hover { color: var(--h35-ink); background: var(--h35-hover); }
.h35-chevron { color: currentColor; opacity: .55; transition: transform var(--h35-dur) var(--h35-ease); }
.h35-item.is-open > .h35-trigger { color: var(--h35-ink); background: var(--h35-hover); }
.h35-item.is-open > .h35-trigger .h35-chevron { transform: rotate(180deg); }

/* Keyboard focus */
:where(.h35-link, .h35-drop__link, .h35-cta, .h35-phone, .h35-burger, .h35-card, .h35-stats__cta, .h35-track__input, .h35-track__btn):focus-visible {
  outline: 2px solid var(--h35-accent); outline-offset: 2px;
}

/* ==========================================================================
   SIGNATURE — integrated track-shipment field
   ========================================================================== */
.h35-track { order: 2; margin-left: auto; flex: 0 0 auto; }
.h35-track__label { display: none; }
.h35-track__row {
  display: flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 4px 0 10px;
  background: var(--h35-steel);
  border: 1px solid var(--h35-line);
  border-radius: 999px;
  transition: border-color var(--h35-dur) var(--h35-ease), background var(--h35-dur) var(--h35-ease), box-shadow var(--h35-dur) var(--h35-ease);
}
.h35-track__row:focus-within { background: #fff; border-color: var(--h35-accent); box-shadow: 0 0 0 3px var(--h35-accent-tint); }
.h35-track__ic { color: var(--h35-muted); font-size: .9rem; display: inline-flex; }
.h35-track__input {
  width: 150px; border: 0; background: none; outline: none;
  font-family: inherit; font-size: .875rem; color: var(--h35-ink);
}
.h35-track__input::placeholder { color: var(--h35-muted); }
.h35-track__btn {
  height: 32px; padding: 0 14px; border: 0; cursor: pointer;
  font-family: inherit; font-size: .8375rem; font-weight: 600; color: #fff;
  background: var(--h35-accent); border-radius: 999px;
  transition: background var(--h35-dur) var(--h35-ease);
}
.h35-track__btn:hover { background: var(--h35-accent-700); }

/* ==========================================================================
   MEGA MENU — 3 icon-card columns + coverage stat strip
   ========================================================================== */
.h35-mega, .h35-drop {
  position: absolute; top: calc(100% + 10px); left: 0;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--h35-dur) var(--h35-ease), transform var(--h35-dur) var(--h35-ease), visibility var(--h35-dur) var(--h35-ease);
  pointer-events: none;
}
.h35-item.is-open > .h35-mega, .h35-item.is-open > .h35-drop {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

.h35-mega {
  width: 820px;
  background: var(--h35-bg);
  border: 1px solid var(--h35-line);
  border-radius: var(--h35-radius);
  box-shadow: var(--h35-shadow-pop);
  padding: 20px 20px 0;
  overflow: hidden;
}
.h35-mega__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-bottom: 18px; }
.h35-col__label {
  margin: 2px 0 10px; font-size: .6875rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--h35-muted);
}
.h35-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px; border-radius: var(--h35-radius-sm);
  text-decoration: none; color: var(--h35-ink);
  transition: background var(--h35-dur) var(--h35-ease);
}
.h35-card:hover { background: var(--h35-hover); }
.h35-card__ic {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 9px;
  background: var(--h35-accent-tint); color: var(--h35-accent); font-size: 1.05rem;
}
.h35-card__body { display: flex; flex-direction: column; gap: 2px; }
.h35-card__body strong { font-size: .875rem; font-weight: 600; line-height: 1.3; }
.h35-card__body span { font-size: .8125rem; color: var(--h35-muted); line-height: 1.4; }

/* Coverage / stat strip */
.h35-stats {
  display: flex; align-items: center; gap: 32px;
  margin: 0 -20px; padding: 16px 20px;
  background: var(--h35-steel); border-top: 1px solid var(--h35-line);
}
.h35-stat { display: flex; flex-direction: column; }
.h35-stat strong { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; color: var(--h35-ink); }
.h35-stat span { font-size: .75rem; color: var(--h35-muted); }
.h35-stats__cta {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: .875rem; font-weight: 600; color: var(--h35-accent); text-decoration: none;
}
.h35-stats__cta i { transition: transform var(--h35-dur) var(--h35-ease); }
.h35-stats__cta:hover i { transform: translateX(3px); }

/* ==========================================================================
   DROPDOWN + NESTED
   ========================================================================== */
.h35-drop {
  min-width: 232px; list-style: none; margin: 0; padding: 6px;
  background: var(--h35-bg); border: 1px solid var(--h35-line);
  border-radius: var(--h35-radius); box-shadow: var(--h35-shadow-pop);
}
.h35-drop__item { position: relative; }
.h35-drop__link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 10px 12px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .875rem; font-weight: 500; text-align: left;
  color: var(--h35-body); text-decoration: none; border-radius: var(--h35-radius-sm);
  transition: color var(--h35-dur) var(--h35-ease), background var(--h35-dur) var(--h35-ease);
}
.h35-drop__link > span { display: inline-flex; align-items: center; gap: 10px; }
.h35-drop__link i:first-child { color: var(--h35-accent); font-size: .95rem; }
.h35-drop__link:hover { color: var(--h35-ink); background: var(--h35-hover); }
.h35-drop__caret { font-size: .7rem; opacity: .5; }
.h35-drop--sub { top: -7px; left: calc(100% + 6px); }
.h35-drop__item--sub.is-open > .h35-drop--sub {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

/* ==========================================================================
   ACTIONS
   ========================================================================== */
.h35-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.h35-phone {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0 6px; height: 40px;
  font-size: .875rem; font-weight: 600; color: var(--h35-body); text-decoration: none;
  border-radius: var(--h35-radius-sm);
  transition: color var(--h35-dur) var(--h35-ease);
}
.h35-phone i { color: var(--h35-accent); }
.h35-phone:hover { color: var(--h35-ink); }
.h35-cta {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px;
  font-size: .9375rem; font-weight: 600; color: #fff; text-decoration: none;
  background: var(--h35-accent); border-radius: var(--h35-radius-sm);
  box-shadow: 0 1px 2px rgba(31, 95, 176, .32);
  transition: background var(--h35-dur) var(--h35-ease), transform var(--h35-dur) var(--h35-ease);
}
.h35-cta:hover { background: var(--h35-accent-700); }
.h35-cta:active { transform: translateY(1px); }

.h35-mobile-cta { display: none; }
.h35-track--drawer { display: none; }

/* --- Hamburger --------------------------------------------------------- */
.h35-burger {
  display: none; position: relative; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--h35-line); border-radius: var(--h35-radius-sm);
  background: #fff; cursor: pointer;
}
.h35-burger span {
  position: absolute; left: 11px; width: 18px; height: 1.8px; border-radius: 2px;
  background: var(--h35-ink);
  transition: transform var(--h35-dur) var(--h35-ease), opacity var(--h35-dur) var(--h35-ease);
}
.h35-burger span:nth-child(1) { top: 14px; }
.h35-burger span:nth-child(2) { top: 19px; }
.h35-burger span:nth-child(3) { top: 24px; }
.h35-burger[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.h35-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.h35-burger[aria-expanded="true"] span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

/* Mobile scrim */
.h35-scrim {
  position: fixed; inset: 0; z-index: 1029;
  background: rgba(14, 23, 33, .34); opacity: 0;
  transition: opacity var(--h35-dur) var(--h35-ease);
}
.h35-scrim.is-shown { opacity: 1; }

/* ==========================================================================
   RESPONSIVE — tracking-first mobile drawer
   ========================================================================== */
@media (max-width: 991.98px) {
  .h35-nav { gap: 0; }
  .h35-burger { display: block; }
  .h35-actions > .h35-phone, .h35-actions > .h35-cta { display: none; }
  .h35-actions { margin-left: auto; }

  /* The desktop inline track hides; drawer track becomes the hero of the panel */
  .h35-track:not(.h35-track--drawer) { display: none; }

  .h35-collapse {
    position: fixed; top: 0; right: 0; z-index: 1031;
    width: min(420px, 90vw); height: 100dvh;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-left: 1px solid var(--h35-line);
    box-shadow: -24px 0 60px -30px rgba(14, 23, 33, .3);
    padding: 76px 16px 24px; overflow-y: auto;
    transform: translateX(100%);
    transition: transform 320ms var(--h35-ease);
  }
  .h35-collapse.is-open { transform: translateX(0); }

  /* Tracking-first: the field sits at the very top of the drawer */
  .h35-track--drawer {
    display: block; order: -1; margin: 0 0 18px; padding: 16px;
    background: var(--h35-accent-tint); border-radius: var(--h35-radius);
  }
  .h35-track--drawer .h35-track__label {
    display: block; margin-bottom: 8px; font-size: .8125rem; font-weight: 600; color: var(--h35-ink);
  }
  .h35-track--drawer .h35-track__row { height: 46px; background: #fff; }
  .h35-track--drawer .h35-track__input { width: 100%; flex: 1 1 auto; }

  .h35-menu { order: 1; flex-direction: column; align-items: stretch; gap: 2px; width: 100%; }
  .h35-link { height: 50px; width: 100%; justify-content: space-between; font-size: 1rem; padding: 0 14px; }
  .h35-item { border-bottom: 1px solid var(--h35-line-soft); }
  .h35-item:last-child { border-bottom: 0; }

  /* Mega + dropdowns collapse to accordions */
  .h35-mega, .h35-drop {
    position: static; width: auto; opacity: 1; visibility: visible; transform: none;
    pointer-events: auto; border: 0; box-shadow: none; padding: 0; overflow: hidden;
    max-height: 0;
    transition: max-height 300ms var(--h35-ease);
  }
  .h35-item.is-open > .h35-mega,
  .h35-item.is-open > .h35-drop,
  .h35-drop__item--sub.is-open > .h35-drop--sub { max-height: 1400px; }

  .h35-mega { padding: 4px 0 8px; }
  .h35-mega__cols { grid-template-columns: 1fr; gap: 0; padding-bottom: 0; }
  .h35-col__label { margin-top: 10px; }
  .h35-stats { display: none; }

  .h35-drop--sub { padding-left: 14px; }

  /* Phone + quote pinned to the drawer foot */
  .h35-mobile-cta {
    order: 2; display: flex; flex-direction: column; gap: 12px; margin-top: 22px;
    padding-top: 20px; border-top: 1px solid var(--h35-line);
  }
  .h35-phone--m { justify-content: center; height: 46px; border: 1px solid var(--h35-line); border-radius: var(--h35-radius-sm); }
  .h35-cta--m { justify-content: center; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .h35-header *, .h35-scrim { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ===== header-36 · .h36-header ===== */
/* ==========================================================================
   HEADER 36 — DASHBOARD / APP SHELL
   Self-contained. Tokens --h36-. In-product utility bar: workspace switcher,
   app nav, apps launcher, global search, notifications, avatar account menu.
   ========================================================================== */

:root {
  --h36-ink: #111725;
  --h36-body: #45506a;
  --h36-muted: #6b7488;
  --h36-line: #e7e9f0;
  --h36-line-soft: #f2f3f7;
  --h36-bg: #ffffff;
  --h36-hover: #f4f5f9;
  --h36-accent: #5850ec;
  --h36-accent-700: #443dd0;
  --h36-accent-tint: #eeedfd;
  --h36-danger: #d64545;
  --h36-shadow: 0 1px 2px rgba(17,23,37,.05), 0 16px 40px -16px rgba(17,23,37,.22);
  --h36-radius: 12px;
  --h36-radius-sm: 9px;
  --h36-ease: cubic-bezier(.4,0,.2,1);
  --h36-dur: 160ms;
  --h36-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.h36-header, .h36-header * { box-sizing: border-box; }
.h36-header { font-family: var(--h36-font); color: var(--h36-ink); -webkit-font-smoothing: antialiased; }

.h36-skip { position: absolute; left: 16px; top: -60px; z-index: 1100; padding: 10px 16px; border-radius: 8px; background: var(--h36-ink); color: #fff; font-size: .875rem; text-decoration: none; transition: top var(--h36-dur) var(--h36-ease); }
.h36-skip:focus { top: 12px; }

/* ===== Shell ===== */
.h36-header { position: sticky; top: 0; z-index: 1030; background: var(--h36-bg); border-bottom: 1px solid var(--h36-line); }
.h36-header.is-stuck { box-shadow: 0 6px 20px -14px rgba(17,23,37,.3); }
.h36-bar { display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 16px; }

/* ===== Left ===== */
.h36-left { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.h36-brand { color: var(--h36-accent); display: inline-flex; }
.h36-div { width: 1px; height: 26px; background: var(--h36-line); }
.h36-item { position: relative; }
.h36-ws__btn { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 10px; border: 0; background: none; border-radius: var(--h36-radius-sm); cursor: pointer; font: inherit; transition: background var(--h36-dur) var(--h36-ease); }
.h36-ws__btn:hover, .h36-item.is-open > .h36-ws__btn { background: var(--h36-hover); }
.h36-ws__avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--h36-accent); color: #fff; font-size: .75rem; font-weight: 700; flex: 0 0 auto; }
.h36-ws__avatar--alt { background: #0ea5a4; } .h36-ws__avatar--alt2 { background: #64748b; }
.h36-ws__meta { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.h36-ws__name { font-size: .875rem; font-weight: 600; color: var(--h36-ink); }
.h36-ws__plan { font-size: .72rem; color: var(--h36-muted); }
.h36-ws__caret { color: var(--h36-muted); font-size: .85rem; }

/* ===== Middle ===== */
.h36-collapse { display: flex; align-items: center; flex: 1 1 auto; }
.h36-msearch, .h36-maccount { display: none; }
.h36-menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.h36-link { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 13px; border: 0; background: none; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 500; color: var(--h36-body); text-decoration: none; border-radius: var(--h36-radius-sm); transition: color var(--h36-dur) var(--h36-ease), background var(--h36-dur) var(--h36-ease); }
.h36-link:hover { color: var(--h36-ink); background: var(--h36-hover); }
.h36-link.is-active { color: var(--h36-accent); background: var(--h36-accent-tint); }
.h36-chevron { opacity: .5; transition: transform var(--h36-dur) var(--h36-ease); }
.h36-item.is-open > .h36-trigger .h36-chevron { transform: rotate(180deg); }

:where(.h36-link,.h36-drop__link,.h36-ws__btn,.h36-iconbtn,.h36-avatar,.h36-app,.h36-ws__opt,.h36-drop__trigger,.h36-burger):focus-visible { outline: 2px solid var(--h36-accent); outline-offset: 2px; }

/* ===== Right ===== */
.h36-right { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: 0 0 auto; }
.h36-search { display: flex; align-items: center; gap: 8px; width: 220px; height: 40px; padding: 0 12px; background: var(--h36-line-soft); border: 1px solid transparent; border-radius: var(--h36-radius-sm); transition: border-color var(--h36-dur) var(--h36-ease), background var(--h36-dur) var(--h36-ease); }
.h36-search:focus-within { background: #fff; border-color: var(--h36-accent); }
.h36-search i { color: var(--h36-muted); }
.h36-search input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: .875rem; min-width: 0; }
.h36-search__kbd { font-size: .7rem; padding: 2px 6px; border-radius: 5px; border: 1px solid var(--h36-line); background: #fff; color: var(--h36-muted); }
.h36-iconbtn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: none; border-radius: var(--h36-radius-sm); cursor: pointer; color: var(--h36-body); font-size: 1.1rem; text-decoration: none; transition: background var(--h36-dur) var(--h36-ease), color var(--h36-dur) var(--h36-ease); }
.h36-iconbtn:hover, .h36-item.is-open > .h36-iconbtn { background: var(--h36-hover); color: var(--h36-ink); }
.h36-badge { position: absolute; top: 6px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--h36-danger); color: #fff; font-size: .65rem; font-weight: 700; display: grid; place-items: center; }
.h36-avatar { width: 40px; height: 40px; padding: 0; border: 0; background: none; border-radius: 999px; cursor: pointer; }
.h36-avatar img { display: block; border-radius: 999px; }
.h36-avatar:hover { box-shadow: 0 0 0 2px var(--h36-accent-tint); }

/* ===== Dropdown base (right-aligned variants) ===== */
.h36-drop { position: absolute; top: calc(100% + 8px); left: 0; min-width: 260px; padding: 6px; background: var(--h36-bg); border: 1px solid var(--h36-line); border-radius: var(--h36-radius); box-shadow: var(--h36-shadow); opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none; transition: opacity var(--h36-dur) var(--h36-ease), transform var(--h36-dur) var(--h36-ease), visibility var(--h36-dur) var(--h36-ease); }
.h36-item.is-open > .h36-drop { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.h36-right .h36-drop { left: auto; right: 0; }
.h36-drop__head { margin: 4px 10px 6px; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--h36-muted); }
.h36-drop__link { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; background: none; cursor: pointer; font: inherit; font-size: .875rem; font-weight: 500; text-align: left; color: var(--h36-body); text-decoration: none; border-radius: var(--h36-radius-sm); transition: color var(--h36-dur) var(--h36-ease), background var(--h36-dur) var(--h36-ease); }
.h36-drop__link i { color: var(--h36-muted); }
.h36-drop__link:hover { color: var(--h36-ink); background: var(--h36-hover); }
.h36-drop__link--danger { color: var(--h36-danger); } .h36-drop__link--danger i { color: var(--h36-danger); }
.h36-drop__link--danger:hover { background: #fdeeee; color: var(--h36-danger); }
.h36-drop__sep { height: 1px; margin: 6px 8px; background: var(--h36-line); }

/* Workspace options */
.h36-ws__opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--h36-radius-sm); text-decoration: none; color: var(--h36-ink); transition: background var(--h36-dur) var(--h36-ease); }
.h36-ws__opt:hover { background: var(--h36-hover); }
.h36-ws__optname { display: flex; flex-direction: column; font-size: .875rem; font-weight: 600; }
.h36-ws__optname span { font-size: .72rem; font-weight: 400; color: var(--h36-muted); }
.h36-ws__opt.is-current i { margin-left: auto; color: var(--h36-accent); }

/* ===== Mega apps launcher ===== */
.h36-mega { position: absolute; top: calc(100% + 8px); left: 0; width: 380px; padding: 16px; background: var(--h36-bg); border: 1px solid var(--h36-line); border-radius: var(--h36-radius); box-shadow: var(--h36-shadow); opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none; transition: opacity var(--h36-dur) var(--h36-ease), transform var(--h36-dur) var(--h36-ease), visibility var(--h36-dur) var(--h36-ease); }
.h36-item.is-open > .h36-mega { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.h36-mega__head { margin: 0 0 12px; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--h36-muted); }
.h36-apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.h36-app { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 6px; border-radius: var(--h36-radius-sm); text-decoration: none; font-size: .75rem; font-weight: 500; color: var(--h36-body); transition: background var(--h36-dur) var(--h36-ease); }
.h36-app:hover { background: var(--h36-hover); color: var(--h36-ink); }
.h36-app__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); font-size: 1.2rem; }
.h36-mega__foot { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 8px 6px; font-size: .8125rem; font-weight: 600; color: var(--h36-accent); text-decoration: none; }
.h36-mega__foot i { transition: transform var(--h36-dur) var(--h36-ease); }
.h36-mega__foot:hover i { transform: translateX(3px); }

/* ===== Notifications ===== */
.h36-notif { min-width: 340px; }
.h36-notif__head { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px 10px; font-size: .8125rem; font-weight: 600; }
.h36-notif__head a { font-size: .78rem; font-weight: 500; color: var(--h36-accent); text-decoration: none; }
.h36-notif__item { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border-radius: var(--h36-radius-sm); text-decoration: none; color: var(--h36-ink); transition: background var(--h36-dur) var(--h36-ease); }
.h36-notif__item:hover { background: var(--h36-hover); }
.h36-notif__ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); }
.h36-notif__body { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.h36-notif__body strong { font-size: .8125rem; font-weight: 600; }
.h36-notif__body span { font-size: .78rem; color: var(--h36-muted); }
.h36-notif__time { font-size: .72rem; color: var(--h36-muted); }
.h36-notif__foot { display: block; text-align: center; margin-top: 4px; padding: 9px; font-size: .8125rem; font-weight: 600; color: var(--h36-accent); text-decoration: none; border-top: 1px solid var(--h36-line-soft); }

/* ===== Account ===== */
.h36-acct { min-width: 250px; }
.h36-acct__head { display: flex; flex-direction: column; padding: 8px 12px 12px; border-bottom: 1px solid var(--h36-line-soft); margin-bottom: 6px; }
.h36-acct__name { font-size: .9rem; font-weight: 600; }
.h36-acct__mail { font-size: .78rem; color: var(--h36-muted); }
.h36-drop__item { position: relative; }
.h36-drop__trigger { justify-content: space-between; }
.h36-drop__trigger > span { display: inline-flex; align-items: center; gap: 10px; }
.h36-drop__caret { font-size: .7rem; opacity: .5; }
.h36-drop--sub { top: -7px; right: calc(100% + 6px); left: auto; }
.h36-drop__item--sub.is-open > .h36-drop--sub { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }

/* ===== Hamburger ===== */
.h36-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 0; border: 1px solid var(--h36-line); border-radius: var(--h36-radius-sm); background: #fff; cursor: pointer; }
.h36-burger span { width: 18px; height: 1.8px; margin: 0 auto; border-radius: 2px; background: var(--h36-ink); transition: transform var(--h36-dur) var(--h36-ease), opacity var(--h36-dur) var(--h36-ease); }
.h36-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.h36-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.h36-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.h36-scrim { position: fixed; inset: 0; z-index: 1029; background: rgba(17,23,37,.34); opacity: 0; transition: opacity var(--h36-dur) var(--h36-ease); }
.h36-scrim.is-shown { opacity: 1; }

/* ===== Responsive ===== */
@media (max-width: 991.98px) {
  .h36-burger { display: flex; }
  .h36-ws__meta, .h36-ws__caret { display: none; }
  .h36-div { display: none; }
  .h36-search, .h36-help { display: none; }

  .h36-collapse {
    position: fixed; top: 0; left: 0; z-index: 1031;
    width: min(360px, 88vw); height: 100dvh; display: block;
    background: #fff; box-shadow: 24px 0 60px -30px rgba(17,23,37,.3);
    padding: 76px 14px 24px; overflow-y: auto;
    transform: translateX(-100%); transition: transform 300ms var(--h36-ease);
  }
  .h36-collapse.is-open { transform: translateX(0); }
  .h36-msearch { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; margin-bottom: 12px; background: var(--h36-line-soft); border-radius: var(--h36-radius-sm); }
  .h36-msearch i { color: var(--h36-muted); }
  .h36-msearch input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: .9rem; }
  .h36-menu { flex-direction: column; align-items: stretch; gap: 2px; }
  .h36-link { height: 46px; justify-content: flex-start; font-size: 1rem; }
  .h36-mega { position: static; width: auto; opacity: 1; visibility: visible; transform: none; pointer-events: auto; border: 0; box-shadow: none; padding: 6px 0; max-height: 0; overflow: hidden; transition: max-height 300ms var(--h36-ease); }
  .h36-item.is-open > .h36-mega { max-height: 500px; }
  .h36-apps { grid-template-columns: repeat(4, 1fr); }
  .h36-maccount { display: block; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--h36-line); }
  /* keep notifications + avatar dropdowns anchored on mobile too */
  .h36-right .h36-drop { position: fixed; top: 64px; right: 10px; left: 10px; min-width: 0; }
}

/* CMS CTA (app-shell birincil buton) */
.h36-cta { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; margin-left: 4px; border-radius: 8px; background: var(--h36-accent, #5850ec); color: #fff; font-size: .875rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: filter .15s ease; }
.h36-cta:hover { filter: brightness(.94); }

@media (prefers-reduced-motion: reduce) { .h36-header * { transition-duration: .01ms !important; } }

/* ===== header-37 · .h37-header ===== */
/* ==========================================================================
   HEADER 37 — STARTUP LANDING
   Self-contained. Tokens --h37-. Clean energy: announcement pill + gradient CTA.
   ========================================================================== */
:root{
  --h37-ink:#0f1222; --h37-body:#474d63; --h37-muted:#6c7288;
  --h37-line:#e9eaf1; --h37-line-soft:#f3f4f8; --h37-bg:#fff; --h37-hover:#f5f5fb;
  --h37-accent:#6d5ef0; --h37-accent-2:#a94bf0; --h37-tint:#efedfe;
  --h37-shadow:0 1px 2px rgba(15,18,34,.05),0 18px 44px -18px rgba(15,18,34,.22);
  --h37-radius:12px; --h37-radius-sm:9px; --h37-ease:cubic-bezier(.4,0,.2,1); --h37-dur:180ms;
  --h37-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.h37-header, .h37-header *{box-sizing:border-box;}
.h37-header{font-family:var(--h37-font);color:var(--h37-ink);-webkit-font-smoothing:antialiased;}
.h37-container{max-width:1220px;margin:0 auto;padding:0 24px;}
.h37-skip{position:absolute;left:16px;top:-60px;z-index:1100;padding:10px 16px;border-radius:8px;background:var(--h37-ink);color:#fff;font-size:.875rem;text-decoration:none;transition:top var(--h37-dur) var(--h37-ease);} .h37-skip:focus{top:12px;}

.h37-header{position:sticky;top:0;z-index:1030;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid transparent;transition:border-color var(--h37-dur) var(--h37-ease),box-shadow var(--h37-dur) var(--h37-ease);}
.h37-header.is-stuck{border-bottom-color:var(--h37-line);box-shadow:0 1px 0 var(--h37-line);}
.h37-nav{display:flex;align-items:center;gap:20px;height:68px;}
.h37-brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--h37-ink);flex:0 0 auto;}
.h37-brand__mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--h37-accent),var(--h37-accent-2));color:#fff;font-size:1rem;}
.h37-brand__name{font-size:1.2rem;font-weight:700;letter-spacing:-.02em;}
.h37-badge{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 10px;border-radius:999px;background:var(--h37-tint);color:var(--h37-accent);font-size:.8125rem;font-weight:600;text-decoration:none;flex:0 0 auto;transition:background var(--h37-dur) var(--h37-ease);}
.h37-badge:hover{background:#e4e1fc;} .h37-badge__dot{width:7px;height:7px;border-radius:50%;background:var(--h37-accent);} .h37-badge i{font-size:.8rem;}

.h37-collapse{flex:1 1 auto;display:flex;justify-content:center;}
.h37-menu{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;}
.h37-item{position:relative;}
.h37-link{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 13px;border:0;background:none;cursor:pointer;font:inherit;font-size:.9375rem;font-weight:500;color:var(--h37-body);text-decoration:none;border-radius:var(--h37-radius-sm);transition:color var(--h37-dur) var(--h37-ease),background var(--h37-dur) var(--h37-ease);}
.h37-link:hover{color:var(--h37-ink);background:var(--h37-hover);}
.h37-chevron{opacity:.55;transition:transform var(--h37-dur) var(--h37-ease);}
.h37-item.is-open>.h37-trigger{color:var(--h37-ink);background:var(--h37-hover);} .h37-item.is-open>.h37-trigger .h37-chevron{transform:rotate(180deg);}
:where(.h37-link,.h37-drop__link,.h37-cta,.h37-demo,.h37-badge,.h37-burger,.h37-card):focus-visible{outline:2px solid var(--h37-accent);outline-offset:2px;}

.h37-mega,.h37-drop{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,6px);opacity:0;visibility:hidden;transition:opacity var(--h37-dur) var(--h37-ease),transform var(--h37-dur) var(--h37-ease),visibility var(--h37-dur) var(--h37-ease);pointer-events:none;}
.h37-item.is-open>.h37-mega,.h37-item.is-open>.h37-drop{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto;}
.h37-mega{width:560px;background:#fff;border:1px solid var(--h37-line);border-radius:var(--h37-radius);box-shadow:var(--h37-shadow);padding:16px;}
.h37-cards{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.h37-card{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:var(--h37-radius-sm);text-decoration:none;color:var(--h37-ink);transition:background var(--h37-dur) var(--h37-ease);}
.h37-card:hover{background:var(--h37-hover);} .h37-card__ic{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--c);font-size:1.05rem;margin-bottom:6px;}
.h37-card strong{font-size:.9rem;font-weight:600;} .h37-card span{font-size:.8rem;color:var(--h37-muted);}
.h37-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;padding-top:14px;border-top:1px solid var(--h37-line-soft);}
.h37-proof__stat{text-align:center;} .h37-proof__stat strong{display:block;font-size:1.15rem;font-weight:700;background:linear-gradient(120deg,var(--h37-accent),var(--h37-accent-2));-webkit-background-clip:text;background-clip:text;color:transparent;} .h37-proof__stat span{font-size:.72rem;color:var(--h37-muted);}

.h37-drop{min-width:200px;list-style:none;margin:0;padding:6px;background:#fff;border:1px solid var(--h37-line);border-radius:var(--h37-radius);box-shadow:var(--h37-shadow);}
.h37-drop__item{position:relative;}
.h37-drop__link{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:9px 12px;border:0;background:none;cursor:pointer;font:inherit;font-size:.875rem;font-weight:500;text-align:left;color:var(--h37-body);text-decoration:none;border-radius:var(--h37-radius-sm);transition:color var(--h37-dur) var(--h37-ease),background var(--h37-dur) var(--h37-ease);}
.h37-drop__link:hover{color:var(--h37-ink);background:var(--h37-hover);} .h37-drop__caret{font-size:.7rem;opacity:.5;}
.h37-drop--sub{top:-7px;left:calc(100% + 6px);transform:translateX(6px);} .h37-drop__item--sub.is-open>.h37-drop--sub{opacity:1;visibility:visible;transform:translateX(0);pointer-events:auto;}

.h37-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.h37-demo{font-size:.9375rem;font-weight:500;color:var(--h37-body);text-decoration:none;padding:0 8px;} .h37-demo:hover{color:var(--h37-ink);}
.h37-cta{display:inline-flex;align-items:center;height:40px;padding:0 18px;font-size:.9375rem;font-weight:600;color:#fff;text-decoration:none;background:linear-gradient(120deg,var(--h37-accent),var(--h37-accent-2));border-radius:var(--h37-radius-sm);box-shadow:0 8px 22px -8px rgba(109,94,240,.6);transition:transform var(--h37-dur) var(--h37-ease),filter var(--h37-dur) var(--h37-ease);} .h37-cta:hover{transform:translateY(-1px);filter:brightness(1.05);}
.h37-burger{display:none;position:relative;width:40px;height:40px;padding:0;border:1px solid var(--h37-line);border-radius:var(--h37-radius-sm);background:#fff;cursor:pointer;}
.h37-burger span{position:absolute;left:11px;width:18px;height:1.8px;background:var(--h37-ink);transition:transform var(--h37-dur) var(--h37-ease);} .h37-burger span:nth-child(1){top:16px;} .h37-burger span:nth-child(2){bottom:16px;}
.h37-burger[aria-expanded="true"] span:nth-child(1){top:19px;transform:rotate(45deg);} .h37-burger[aria-expanded="true"] span:nth-child(2){bottom:19px;transform:rotate(-45deg);}
.h37-scrim{position:fixed;inset:0;z-index:1029;background:rgba(15,18,34,.34);opacity:0;transition:opacity var(--h37-dur) var(--h37-ease);} .h37-scrim.is-shown{opacity:1;}

@media (max-width:1099.98px){.h37-badge{display:none;}}
@media (max-width:991.98px){
  .h37-burger{display:block;} .h37-demo,.h37-actions>.h37-cta{display:none;}
  .h37-collapse{position:fixed;top:0;right:0;z-index:1031;width:min(390px,90vw);height:100dvh;background:#fff;box-shadow:-24px 0 60px -30px rgba(15,18,34,.3);padding:84px 16px 24px;overflow-y:auto;justify-content:flex-start;transform:translateX(100%);transition:transform 320ms var(--h37-ease);}
  .h37-collapse.is-open{transform:translateX(0);}
  .h37-menu{flex-direction:column;align-items:stretch;gap:2px;width:100%;} .h37-link{height:48px;justify-content:space-between;font-size:1rem;} .h37-item{border-bottom:1px solid var(--h37-line-soft);}
  .h37-mega,.h37-drop{position:static;width:auto;opacity:1;visibility:visible;transform:none;pointer-events:auto;border:0;box-shadow:none;padding:0;max-height:0;overflow:hidden;transition:max-height 300ms var(--h37-ease);}
  .h37-item.is-open>.h37-mega,.h37-item.is-open>.h37-drop,.h37-drop__item--sub.is-open>.h37-drop--sub{max-height:800px;}
  .h37-cards{grid-template-columns:1fr 1fr;} .h37-drop--sub{padding-left:14px;}
  .h37-collapse::after{content:"Get started free";display:block;text-align:center;margin-top:18px;padding:13px;border-radius:var(--h37-radius-sm);background:linear-gradient(120deg,var(--h37-accent),var(--h37-accent-2));color:#fff;font-weight:600;}
}
@media (min-width:992px){.h37-scrim{display:none;}}

@media (prefers-reduced-motion:reduce){.h37-header *{transition-duration:.01ms !important;}}

/* ===== header-38 · .h38-header ===== */
/* ==========================================================================
   HEADER 38 — E-COMMERCE MARKETPLACE
   Self-contained. Tokens namespaced --h38-. 8px spacing rhythm.
   Palette: near-monochrome ink + one trustworthy emerald accent.
   Motion: <200ms, cubic-bezier(.4,0,.2,1). No gimmicks.
   ========================================================================== */

:root {
  /* Ink / neutrals */
  --h38-ink: #0d1117;
  --h38-body: #3f4753;
  --h38-muted: #6b7280;
  --h38-line: #e8eaee;
  --h38-line-soft: #f2f3f6;
  --h38-bg: #ffffff;
  --h38-hover: #f5f7f8;
  --h38-field: #f4f5f7;

  /* Single accent — trustworthy emerald */
  --h38-accent: #0a7d5a;
  --h38-accent-700: #086348;
  --h38-accent-tint: #e4f4ee;
  --h38-warm: #b45309;        /* used sparingly for "deals" heat, not neon */

  /* Elevation */
  --h38-shadow-pop: 0 1px 2px rgba(13, 17, 23, .05), 0 16px 36px -14px rgba(13, 17, 23, .18);
  --h38-shadow-bar: 0 1px 0 rgba(13, 17, 23, .06);

  /* System */
  --h38-radius: 12px;
  --h38-radius-sm: 9px;
  --h38-ease: cubic-bezier(.4, 0, .2, 1);
  --h38-dur: 170ms;
  --h38-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.h38-header, .h38-header *, .h38-drawer, .h38-drawer * { box-sizing: border-box; }
.h38-header, .h38-drawer {
  font-family: var(--h38-font);
  color: var(--h38-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip link */
.h38-skip {
  position: absolute; left: 16px; top: -60px; z-index: 1100;
  padding: 10px 16px; border-radius: 8px; background: var(--h38-ink); color: #fff;
  font-size: .875rem; font-weight: 500; text-decoration: none;
  transition: top var(--h38-dur) var(--h38-ease);
}
.h38-skip:focus { top: 12px; }

/* ==========================================================================
   HEADER SHELL — sticky, opaque; only the primary bar sticks
   ========================================================================== */
.h38-header {
  position: sticky; top: 0; z-index: 1030;
  background: var(--h38-bg);
  border-bottom: 1px solid var(--h38-line);
  transition: box-shadow var(--h38-dur) var(--h38-ease);
}
.h38-header.is-stuck { box-shadow: var(--h38-shadow-bar); }

.h38-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* --- Primary bar layout ------------------------------------------------- */
.h38-bar__inner {
  display: flex; align-items: center; gap: 20px;
  height: 72px;
}

/* --- Brand -------------------------------------------------------------- */
.h38-brand {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--h38-ink); flex: 0 0 auto;
}
.h38-brand__logo { color: var(--h38-accent); display: block; }
.h38-brand__name { font-size: 1.1875rem; font-weight: 700; letter-spacing: -.02em; }

/* Shared focus ring */
:where(a, button, input):focus-visible {
  outline: 2px solid var(--h38-accent); outline-offset: 2px; border-radius: 6px;
}

/* ==========================================================================
   ALL CATEGORIES — vertical flyout with sub-panels
   ========================================================================== */
.h38-cats { position: relative; flex: 0 0 auto; }
.h38-cats__btn {
  display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 16px;
  border: 1px solid var(--h38-line); border-radius: var(--h38-radius-sm);
  background: var(--h38-bg); cursor: pointer;
  font-family: inherit; font-size: .9375rem; font-weight: 600; color: var(--h38-ink);
  transition: background var(--h38-dur) var(--h38-ease), border-color var(--h38-dur) var(--h38-ease);
}
.h38-cats__btn:hover { background: var(--h38-hover); border-color: #d9dce2; }
.h38-cats__btn i:first-child { color: var(--h38-accent); font-size: 1rem; }
.h38-cats__caret { font-size: .7rem; opacity: .55; transition: transform var(--h38-dur) var(--h38-ease); }
.h38-cats.is-open .h38-cats__caret { transform: rotate(180deg); }
.h38-cats.is-open .h38-cats__btn { background: var(--h38-hover); border-color: #d9dce2; }

/* Flyout container */
.h38-flyout {
  position: absolute; top: calc(100% + 10px); left: 0;
  width: 264px; padding: 8px;
  background: var(--h38-bg); border: 1px solid var(--h38-line);
  border-radius: var(--h38-radius); box-shadow: var(--h38-shadow-pop);
  opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none;
  transition: opacity var(--h38-dur) var(--h38-ease), transform var(--h38-dur) var(--h38-ease), visibility var(--h38-dur) var(--h38-ease);
  z-index: 40;
}
.h38-cats.is-open > .h38-flyout {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
.h38-flyout__list { list-style: none; margin: 0; padding: 0; }
.h38-flyout__item { position: relative; }
.h38-flyout__link {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 12px; border-radius: var(--h38-radius-sm);
  text-decoration: none; color: var(--h38-body); font-size: .9rem; font-weight: 500;
  transition: background var(--h38-dur) var(--h38-ease), color var(--h38-dur) var(--h38-ease);
}
.h38-flyout__link > i:first-child { font-size: 1.05rem; width: 20px; text-align: center; color: var(--h38-muted); }
.h38-flyout__link span { flex: 1 1 auto; }
.h38-flyout__caret { font-size: .7rem; opacity: .5; }
.h38-flyout__item:hover > .h38-flyout__link,
.h38-flyout__item.is-open > .h38-flyout__link { background: var(--h38-accent-tint); color: var(--h38-accent-700); }
.h38-flyout__item:hover > .h38-flyout__link > i:first-child { color: var(--h38-accent); }

/* Sub-panel to the right */
.h38-subpanel {
  position: absolute; top: -8px; left: calc(100% + 8px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px;
  width: 380px; padding: 16px 18px;
  background: var(--h38-bg); border: 1px solid var(--h38-line);
  border-radius: var(--h38-radius); box-shadow: var(--h38-shadow-pop);
  opacity: 0; visibility: hidden; transform: translateX(-6px); pointer-events: none;
  transition: opacity var(--h38-dur) var(--h38-ease), transform var(--h38-dur) var(--h38-ease), visibility var(--h38-dur) var(--h38-ease);
}
.h38-flyout__item:hover > .h38-subpanel,
.h38-flyout__item.is-open > .h38-subpanel {
  opacity: 1; visibility: visible; transform: translateX(0); pointer-events: auto;
}
.h38-subpanel__label {
  margin: 0 0 6px; font-size: .6875rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--h38-muted);
}
.h38-subpanel__link {
  display: block; padding: 6px 8px; margin: 0 -8px; border-radius: 7px;
  font-size: .875rem; color: var(--h38-body); text-decoration: none;
  transition: background var(--h38-dur) var(--h38-ease), color var(--h38-dur) var(--h38-ease);
}
.h38-subpanel__link:hover { background: var(--h38-hover); color: var(--h38-ink); }

/* ==========================================================================
   SCOPED SEARCH — the centrepiece
   ========================================================================== */
.h38-search {
  display: flex; align-items: stretch; flex: 1 1 auto; min-width: 0;
  height: 44px; background: var(--h38-field);
  border: 1px solid var(--h38-line); border-radius: var(--h38-radius-sm);
  transition: border-color var(--h38-dur) var(--h38-ease), box-shadow var(--h38-dur) var(--h38-ease), background var(--h38-dur) var(--h38-ease);
}
.h38-search:focus-within {
  background: #fff; border-color: var(--h38-accent);
  box-shadow: 0 0 0 3px var(--h38-accent-tint);
}
/* Scope select */
.h38-scope { position: relative; flex: 0 0 auto; }
.h38-scope__btn {
  display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 0 14px;
  border: 0; background: none; cursor: pointer; border-radius: var(--h38-radius-sm) 0 0 var(--h38-radius-sm);
  font-family: inherit; font-size: .875rem; font-weight: 600; color: var(--h38-body);
}
.h38-scope__btn::after {
  content: ""; position: absolute; right: 0; top: 9px; bottom: 9px; width: 1px; background: var(--h38-line);
}
.h38-scope__btn i { font-size: .65rem; opacity: .6; transition: transform var(--h38-dur) var(--h38-ease); }
.h38-scope.is-open .h38-scope__btn i { transform: rotate(180deg); }
.h38-scope__menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 40;
  min-width: 180px; list-style: none; margin: 0; padding: 6px;
  background: var(--h38-bg); border: 1px solid var(--h38-line);
  border-radius: var(--h38-radius); box-shadow: var(--h38-shadow-pop);
  opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none;
  transition: opacity var(--h38-dur) var(--h38-ease), transform var(--h38-dur) var(--h38-ease), visibility var(--h38-dur) var(--h38-ease);
}
.h38-scope.is-open > .h38-scope__menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.h38-scope__opt {
  display: block; width: 100%; text-align: left; padding: 8px 12px; border: 0; border-radius: 7px;
  background: none; cursor: pointer; font-family: inherit; font-size: .875rem; color: var(--h38-body);
  transition: background var(--h38-dur) var(--h38-ease), color var(--h38-dur) var(--h38-ease);
}
.h38-scope__opt:hover { background: var(--h38-hover); color: var(--h38-ink); }

.h38-search__input {
  flex: 1 1 auto; min-width: 0; border: 0; background: none; padding: 0 14px;
  font-family: inherit; font-size: .9375rem; color: var(--h38-ink);
}
.h38-search__input::placeholder { color: var(--h38-muted); }
.h38-search__input:focus { outline: none; }
.h38-search__submit {
  flex: 0 0 auto; width: 52px; border: 0; cursor: pointer;
  background: var(--h38-accent); color: #fff; font-size: 1.05rem;
  border-radius: 0 8px 8px 0; margin: -1px -1px -1px 0;
  transition: background var(--h38-dur) var(--h38-ease);
}
.h38-search__submit:hover { background: var(--h38-accent-700); }

/* ==========================================================================
   ACTIONS — account / wishlist / cart
   ========================================================================== */
.h38-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.h38-account { position: relative; }

.h38-icnbtn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; min-width: 62px; height: 48px; padding: 0 8px;
  border: 0; background: none; cursor: pointer; text-decoration: none;
  border-radius: var(--h38-radius-sm); color: var(--h38-body);
  font-family: inherit; font-size: .95rem;
  transition: background var(--h38-dur) var(--h38-ease), color var(--h38-dur) var(--h38-ease);
}
.h38-icnbtn i { font-size: 1.15rem; }
.h38-icnbtn__label { font-size: .6875rem; font-weight: 500; letter-spacing: .01em; }
.h38-icnbtn:hover { background: var(--h38-hover); color: var(--h38-ink); }
.h38-icnbtn__caret { display: none; }
.h38-icnbtn__wrap { position: relative; display: inline-flex; }

/* account trigger uses row layout for caret alignment */
.h38-account .h38-icnbtn { position: relative; }
.h38-account.is-open > .h38-icnbtn { background: var(--h38-hover); color: var(--h38-ink); }

.h38-badge {
  position: absolute; top: -6px; right: -8px; min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--h38-ink); color: #fff; font-size: .625rem; font-weight: 700;
  border: 2px solid #fff;
}
.h38-badge--accent { background: var(--h38-accent); }

/* Cart — emphasised */
.h38-cart {
  display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 18px 0 16px;
  margin-left: 6px; border-radius: var(--h38-radius-sm);
  background: var(--h38-accent); color: #fff; text-decoration: none;
  font-size: .9375rem; font-weight: 600;
  transition: background var(--h38-dur) var(--h38-ease), transform var(--h38-dur) var(--h38-ease);
}
.h38-cart__label { line-height: 1; }
.h38-cart .h38-badge { border-color: var(--h38-accent); background: #fff; color: var(--h38-accent); }
.h38-cart:hover { background: var(--h38-accent-700); }
.h38-cart:active { transform: translateY(1px); }

/* ==========================================================================
   ACCOUNT DROPDOWN + NESTED
   ========================================================================== */
.h38-drop {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 40;
  min-width: 240px; list-style: none; margin: 0; padding: 6px;
  background: var(--h38-bg); border: 1px solid var(--h38-line);
  border-radius: var(--h38-radius); box-shadow: var(--h38-shadow-pop);
  opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none;
  transition: opacity var(--h38-dur) var(--h38-ease), transform var(--h38-dur) var(--h38-ease), visibility var(--h38-dur) var(--h38-ease);
}
.h38-account.is-open > .h38-drop { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.h38-drop__head {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; margin-bottom: 4px;
  border-bottom: 1px solid var(--h38-line-soft);
}
.h38-drop__head strong { font-size: .95rem; }
.h38-drop__head span { font-size: .8125rem; color: var(--h38-muted); }
.h38-drop__signin {
  margin-top: 8px; display: inline-flex; align-items: center; justify-content: center;
  height: 36px; border-radius: 8px; background: var(--h38-accent); color: #fff;
  font-size: .875rem; font-weight: 600; text-decoration: none;
  transition: background var(--h38-dur) var(--h38-ease);
}
.h38-drop__signin:hover { background: var(--h38-accent-700); }
.h38-drop__item { position: relative; }
.h38-drop__link {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .875rem; font-weight: 500; text-align: left;
  color: var(--h38-body); text-decoration: none; border-radius: var(--h38-radius-sm);
  transition: background var(--h38-dur) var(--h38-ease), color var(--h38-dur) var(--h38-ease);
}
.h38-drop__link > i:first-child { font-size: .95rem; width: 18px; text-align: center; opacity: .7; }
.h38-drop__link:hover { background: var(--h38-hover); color: var(--h38-ink); }
.h38-drop__caret { margin-left: auto; font-size: .7rem; opacity: .5; }
.h38-drop--sub { top: -7px; right: calc(100% + 6px); left: auto; }
.h38-drop__item--sub.is-open > .h38-drop--sub,
.h38-drop__item--sub:hover > .h38-drop--sub {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

/* ==========================================================================
   QUICK-LINKS STRIP + DEALS MEGA
   ========================================================================== */
.h38-strip { border-top: 1px solid var(--h38-line-soft); background: var(--h38-bg); }
.h38-strip__inner { height: 48px; display: flex; align-items: center; }
.h38-quick {
  display: flex; align-items: center; gap: 2px; width: 100%;
  list-style: none; margin: 0; padding: 0;
}
.h38-quick__item { position: relative; }
.h38-quick__item--push { margin-left: auto; }
.h38-quick__link {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .875rem; font-weight: 500; color: var(--h38-body);
  text-decoration: none; border-radius: var(--h38-radius-sm);
  transition: background var(--h38-dur) var(--h38-ease), color var(--h38-dur) var(--h38-ease);
}
.h38-quick__link:hover { background: var(--h38-hover); color: var(--h38-ink); }
.h38-quick__link--hot { font-weight: 600; color: var(--h38-warm); }
.h38-quick__link--hot i:first-child { font-size: .9rem; }
.h38-quick__link--muted { color: var(--h38-muted); font-weight: 500; }
.h38-quick__link--muted:hover { color: var(--h38-body); background: transparent; }
.h38-quick__caret { font-size: .65rem; opacity: .6; transition: transform var(--h38-dur) var(--h38-ease); }
.h38-quick__item.is-open .h38-quick__caret { transform: rotate(180deg); }

/* Deals mega */
.h38-mega {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 40;
  width: 720px; padding: 20px;
  background: var(--h38-bg); border: 1px solid var(--h38-line);
  border-radius: var(--h38-radius); box-shadow: var(--h38-shadow-pop);
  opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none;
  transition: opacity var(--h38-dur) var(--h38-ease), transform var(--h38-dur) var(--h38-ease), visibility var(--h38-dur) var(--h38-ease);
}
.h38-quick__item.is-open > .h38-mega { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.h38-mega__grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1.15fr; gap: 8px 16px; }
.h38-mega__label {
  margin: 4px 8px 8px; font-size: .6875rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--h38-muted);
}
.h38-mega__link {
  display: block; padding: 8px; border-radius: 7px; margin: 0 0 1px;
  font-size: .875rem; color: var(--h38-body); text-decoration: none;
  transition: background var(--h38-dur) var(--h38-ease), color var(--h38-dur) var(--h38-ease);
}
.h38-mega__link:hover { background: var(--h38-hover); color: var(--h38-ink); }

/* Promo card — restrained, warm tint (no loud gradient) */
.h38-promo {
  display: flex; flex-direction: column; gap: 5px; padding: 16px;
  border-radius: var(--h38-radius); text-decoration: none; color: var(--h38-ink);
  background: linear-gradient(160deg, #fbf3e9, #f6ede1);
  transition: transform var(--h38-dur) var(--h38-ease);
}
.h38-promo:hover { transform: translateY(-2px); }
.h38-promo__tag {
  align-self: flex-start; font-size: .6875rem; font-weight: 700; letter-spacing: .03em;
  padding: 3px 8px; border-radius: 999px; background: var(--h38-warm); color: #fff;
}
.h38-promo__title { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; margin-top: 4px; }
.h38-promo__desc { font-size: .8125rem; color: var(--h38-muted); line-height: 1.45; }
.h38-promo__cta {
  margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: .8125rem; font-weight: 600; color: var(--h38-warm); padding-top: 6px;
}
.h38-promo__cta i { transition: transform var(--h38-dur) var(--h38-ease); }
.h38-promo:hover .h38-promo__cta i { transform: translateX(3px); }

/* ==========================================================================
   MOBILE — burger + categories-first drawer
   ========================================================================== */
.h38-burger {
  display: none; position: relative; width: 44px; height: 44px; padding: 0; margin-left: 4px;
  border: 1px solid var(--h38-line); border-radius: var(--h38-radius-sm); background: #fff; cursor: pointer;
}
.h38-burger span {
  position: absolute; left: 12px; width: 20px; height: 2px; border-radius: 2px; background: var(--h38-ink);
  transition: transform var(--h38-dur) var(--h38-ease), opacity var(--h38-dur) var(--h38-ease);
}
.h38-burger span:nth-child(1) { top: 15px; }
.h38-burger span:nth-child(2) { top: 21px; }
.h38-burger span:nth-child(3) { top: 27px; }

.h38-drawer {
  position: fixed; top: 0; left: 0; z-index: 1050;
  width: min(400px, 90vw); height: 100dvh;
  display: flex; flex-direction: column;
  background: #fff; border-right: 1px solid var(--h38-line);
  box-shadow: 24px 0 60px -30px rgba(13, 17, 23, .35);
  transform: translateX(-100%);
  transition: transform 320ms var(--h38-ease);
}
.h38-drawer.is-open { transform: translateX(0); }
.h38-drawer__top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--h38-line);
}
.h38-drawer__close {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--h38-line); border-radius: var(--h38-radius-sm);
  background: #fff; cursor: pointer; color: var(--h38-ink); font-size: 1rem;
  transition: background var(--h38-dur) var(--h38-ease);
}
.h38-drawer__close:hover { background: var(--h38-hover); }

.h38-drawer__search {
  display: flex; align-items: center; gap: 10px; margin: 16px 18px 4px;
  height: 46px; padding: 0 14px; background: var(--h38-field);
  border: 1px solid var(--h38-line); border-radius: var(--h38-radius-sm);
}
.h38-drawer__search i { color: var(--h38-muted); }
.h38-drawer__search input {
  flex: 1 1 auto; min-width: 0; border: 0; background: none;
  font-family: inherit; font-size: .9375rem; color: var(--h38-ink);
}
.h38-drawer__search input:focus { outline: none; }

.h38-drawer__nav { flex: 1 1 auto; overflow-y: auto; padding: 12px 18px 20px; }
.h38-drawer__heading {
  margin: 16px 0 8px; font-size: .6875rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--h38-muted);
}
.h38-drawer__heading:first-child { margin-top: 4px; }

.h38-macc { list-style: none; margin: 0; padding: 0; }
.h38-macc__item { border-bottom: 1px solid var(--h38-line-soft); }
.h38-macc__trigger {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 13px 4px; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .95rem; font-weight: 500; color: var(--h38-ink); text-align: left;
}
.h38-macc__trigger i:first-child { color: var(--h38-muted); margin-right: 6px; }
.h38-macc__caret { transition: transform var(--h38-dur) var(--h38-ease); opacity: .55; font-size: .8rem; }
.h38-macc__trigger[aria-expanded="true"] .h38-macc__caret { transform: rotate(180deg); }
.h38-macc__panel {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px;
  max-height: 0; overflow: hidden; transition: max-height 280ms var(--h38-ease);
}
.h38-macc__item.is-open .h38-macc__panel { max-height: 220px; }
.h38-macc__panel a {
  padding: 8px 4px; font-size: .875rem; color: var(--h38-body); text-decoration: none;
  border-radius: 6px;
}
.h38-macc__panel a:first-child { margin-top: 2px; }
.h38-macc__panel a:hover { color: var(--h38-accent-700); }

.h38-mlinks { list-style: none; margin: 0; padding: 0; }
.h38-mlinks a {
  display: flex; align-items: center; gap: 11px; padding: 12px 4px;
  font-size: .95rem; color: var(--h38-body); text-decoration: none;
  border-bottom: 1px solid var(--h38-line-soft);
}
.h38-mlinks a i { color: var(--h38-muted); width: 18px; text-align: center; }
.h38-mlinks a:hover { color: var(--h38-ink); }

.h38-drawer__foot { padding: 16px 18px; border-top: 1px solid var(--h38-line); }
.h38-cart--full { width: 100%; justify-content: center; height: 48px; }

/* Scrim */
.h38-scrim {
  position: fixed; inset: 0; z-index: 1040;
  background: rgba(13, 17, 23, .38); opacity: 0;
  transition: opacity var(--h38-dur) var(--h38-ease);
}
.h38-scrim.is-shown { opacity: 1; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1023.98px) {
  .h38-bar__inner { gap: 12px; height: 64px; }
  .h38-cats, .h38-account, .h38-icnbtn--icon, .h38-cart__label { display: none; }
  .h38-strip { display: none; }
  .h38-burger { display: block; order: -1; margin-left: 0; }
  .h38-brand { margin-right: 4px; }
  .h38-search { order: 3; flex: 1 1 100%; height: 42px; }
  .h38-actions { margin-left: auto; }
  .h38-cart { padding: 0 14px; margin-left: 0; }
}
@media (max-width: 600px) {
  .h38-container { padding: 0 14px; }
  .h38-bar__inner { flex-wrap: wrap; height: auto; padding: 12px 0; gap: 12px; }
  .h38-search { order: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .h38-header *, .h38-drawer * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ===== header-39 · .h39-header ===== */
/* ==========================================================================
   HEADER 39 — AI COMPANY (REFINED)
   Self-contained. Tokens --h39-. Mostly neutral with a single violet accent
   and a restrained glow on the logo mark + CTA + API card. Motion <200ms.
   ========================================================================== */

:root {
  --h39-ink: #14141c;
  --h39-body: #4a4a58;
  --h39-muted: #71717f;
  --h39-line: #ececf1;
  --h39-line-soft: #f5f5f8;
  --h39-bg: #ffffff;
  --h39-hover: #f6f6fa;
  --h39-violet: #6d5ef0;
  --h39-violet-700: #574ad6;
  --h39-tint: #efedfe;
  --h39-shadow: 0 1px 2px rgba(20,20,28,.05), 0 18px 44px -18px rgba(20,20,28,.2);
  --h39-radius: 14px;
  --h39-radius-sm: 10px;
  --h39-ease: cubic-bezier(.4,0,.2,1);
  --h39-dur: 180ms;
  --h39-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.h39-header, .h39-header * { box-sizing: border-box; }
.h39-header { font-family: var(--h39-font); color: var(--h39-ink); -webkit-font-smoothing: antialiased; }
.h39-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.h39-skip { position: absolute; left: 16px; top: -60px; z-index: 1100; padding: 10px 16px; border-radius: 8px; background: var(--h39-ink); color: #fff; font-size: .875rem; text-decoration: none; transition: top var(--h39-dur) var(--h39-ease); }
.h39-skip:focus { top: 12px; }

/* ===== Shell ===== */
.h39-header { position: sticky; top: 0; z-index: 1030; background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid transparent; transition: border-color var(--h39-dur) var(--h39-ease), box-shadow var(--h39-dur) var(--h39-ease), background var(--h39-dur) var(--h39-ease); }
.h39-header.is-stuck { border-bottom-color: var(--h39-line); box-shadow: 0 1px 0 var(--h39-line); background: rgba(255,255,255,.92); }
.h39-nav { display: flex; align-items: center; gap: 36px; height: 68px; }

/* ===== Brand (single glowing mark) ===== */
.h39-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--h39-ink); flex: 0 0 auto; }
.h39-brand__mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(150deg, #7d6ff6, #5a4ad8); box-shadow: 0 6px 18px -6px rgba(109,94,240,.7); color: #fff; }
.h39-brand__name { font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; }

/* ===== Menu ===== */
.h39-collapse { flex: 1 1 auto; display: flex; align-items: center; }
.h39-menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.h39-item { position: relative; }
.h39-link { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 13px; border: 0; background: none; cursor: pointer; font: inherit; font-size: .9375rem; font-weight: 500; color: var(--h39-body); text-decoration: none; border-radius: var(--h39-radius-sm); transition: color var(--h39-dur) var(--h39-ease), background var(--h39-dur) var(--h39-ease); }
.h39-link:hover { color: var(--h39-ink); background: var(--h39-hover); }
.h39-chevron { opacity: .55; transition: transform var(--h39-dur) var(--h39-ease); }
.h39-item.is-open > .h39-trigger { color: var(--h39-ink); background: var(--h39-hover); }
.h39-item.is-open > .h39-trigger .h39-chevron { transform: rotate(180deg); }

:where(.h39-link,.h39-drop__link,.h39-cta,.h39-signin,.h39-burger,.h39-tile,.h39-apicard):focus-visible { outline: 2px solid var(--h39-violet); outline-offset: 2px; }

/* ===== Mega ===== */
.h39-mega, .h39-drop { position: absolute; top: calc(100% + 10px); left: 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--h39-dur) var(--h39-ease), transform var(--h39-dur) var(--h39-ease), visibility var(--h39-dur) var(--h39-ease); pointer-events: none; }
.h39-item.is-open > .h39-mega, .h39-item.is-open > .h39-drop { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.h39-mega { width: 720px; background: var(--h39-bg); border: 1px solid var(--h39-line); border-radius: var(--h39-radius); box-shadow: var(--h39-shadow); padding: 20px; display: grid; grid-template-columns: 1.4fr .9fr; gap: 20px; }
.h39-mega__label { margin: 0 0 12px; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--h39-muted); }
.h39-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.h39-tile { display: flex; align-items: flex-start; gap: 11px; padding: 10px 8px; border-radius: var(--h39-radius-sm); text-decoration: none; color: var(--h39-ink); transition: background var(--h39-dur) var(--h39-ease); }
.h39-tile:hover { background: var(--h39-hover); }
.h39-tile__ic { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--h39-tint); color: var(--h39-violet); font-size: 1rem; }
.h39-tile__body { display: flex; flex-direction: column; gap: 1px; }
.h39-tile__body strong { font-size: .875rem; font-weight: 600; }
.h39-tile__body span { font-size: .78rem; color: var(--h39-muted); line-height: 1.35; }

/* API card — the single glowing accent */
.h39-apicard { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--h39-radius); overflow: hidden; text-decoration: none; color: #fff; background: linear-gradient(155deg, #6d5ef0, #4f42c9); }
.h39-apicard__glow { position: absolute; top: -40%; right: -30%; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.35), transparent 70%); pointer-events: none; }
.h39-apicard__tag { align-self: flex-start; position: relative; font-size: .6875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.2); }
.h39-apicard__title { position: relative; font-size: 1.2rem; font-weight: 700; margin-top: 6px; }
.h39-apicard__desc { position: relative; font-size: .8125rem; color: rgba(255,255,255,.85); line-height: 1.45; }
.h39-apicard__code { position: relative; display: flex; align-items: center; gap: 8px; margin: 10px 0; padding: 9px 12px; border-radius: 8px; background: rgba(0,0,0,.22); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .72rem; color: #e7e4ff; }
.h39-apicard__dot { width: 8px; height: 8px; border-radius: 50%; background: #7dffbf; }
.h39-apicard__cta { position: relative; margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600; }
.h39-apicard__cta i { transition: transform var(--h39-dur) var(--h39-ease); }
.h39-apicard:hover .h39-apicard__cta i { transform: translateX(3px); }

/* ===== Dropdown + nested ===== */
.h39-drop { min-width: 220px; list-style: none; margin: 0; padding: 6px; background: var(--h39-bg); border: 1px solid var(--h39-line); border-radius: var(--h39-radius); box-shadow: var(--h39-shadow); }
.h39-drop__item { position: relative; }
.h39-drop__link { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; background: none; cursor: pointer; font: inherit; font-size: .875rem; font-weight: 500; text-align: left; color: var(--h39-body); text-decoration: none; border-radius: var(--h39-radius-sm); transition: color var(--h39-dur) var(--h39-ease), background var(--h39-dur) var(--h39-ease); }
.h39-drop__link > i:first-child { color: var(--h39-violet); }
.h39-drop__link:hover { color: var(--h39-ink); background: var(--h39-hover); }
.h39-drop__caret { margin-left: auto; font-size: .7rem; opacity: .5; }
.h39-drop--sub { top: -7px; left: calc(100% + 6px); }
.h39-drop__item--sub.is-open > .h39-drop--sub { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }

/* ===== CTA ===== */
.h39-cta-group { display: none; }
.h39-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: 0 0 auto; }
.h39-signin { font-size: .9375rem; font-weight: 500; color: var(--h39-body); text-decoration: none; padding: 0 6px; }
.h39-signin:hover { color: var(--h39-ink); }
.h39-cta { position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 18px; overflow: hidden; font-size: .9375rem; font-weight: 600; color: #fff; text-decoration: none; background: var(--h39-violet); border-radius: var(--h39-radius-sm); box-shadow: 0 8px 22px -8px rgba(109,94,240,.7); transition: background var(--h39-dur) var(--h39-ease), transform var(--h39-dur) var(--h39-ease); }
.h39-cta:hover { background: var(--h39-violet-700); transform: translateY(-1px); }
.h39-cta__glow { position: absolute; inset: 0; background: radial-gradient(120px 40px at 30% 0%, rgba(255,255,255,.35), transparent 70%); pointer-events: none; }

.h39-burger { display: none; position: relative; width: 40px; height: 40px; padding: 0; border: 1px solid var(--h39-line); border-radius: var(--h39-radius-sm); background: #fff; cursor: pointer; }
.h39-burger span { position: absolute; left: 11px; width: 18px; height: 1.8px; border-radius: 2px; background: var(--h39-ink); transition: transform var(--h39-dur) var(--h39-ease); }
.h39-burger span:nth-child(1) { top: 16px; } .h39-burger span:nth-child(2) { bottom: 16px; }
.h39-burger[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.h39-burger[aria-expanded="true"] span:nth-child(2) { bottom: 19px; transform: rotate(-45deg); }

.h39-scrim { position: fixed; inset: 0; z-index: 1029; background: rgba(20,20,28,.34); opacity: 0; transition: opacity var(--h39-dur) var(--h39-ease); }
.h39-scrim.is-shown { opacity: 1; }

/* ===== Responsive ===== */
@media (max-width: 991.98px) {
  .h39-burger { display: block; }
  .h39-signin--top, .h39-cta--top { display: none; }
  .h39-collapse {
    position: fixed; top: 0; right: 0; z-index: 1031;
    width: min(400px, 90vw); height: 100dvh; display: block;
    background: #fff; box-shadow: -24px 0 60px -30px rgba(20,20,28,.3);
    padding: 84px 16px 24px; overflow-y: auto;
    transform: translateX(100%); transition: transform 320ms var(--h39-ease);
  }
  .h39-collapse.is-open { transform: translateX(0); }
  .h39-menu { flex-direction: column; align-items: stretch; gap: 2px; }
  .h39-link { height: 48px; justify-content: space-between; font-size: 1rem; }
  .h39-item { border-bottom: 1px solid var(--h39-line-soft); }
  .h39-mega, .h39-drop { position: static; width: auto; opacity: 1; visibility: visible; transform: none; pointer-events: auto; border: 0; box-shadow: none; padding: 0; display: block; max-height: 0; overflow: hidden; transition: max-height 300ms var(--h39-ease); }
  .h39-item.is-open > .h39-mega, .h39-item.is-open > .h39-drop, .h39-drop__item--sub.is-open > .h39-drop--sub { max-height: 1000px; }
  .h39-tiles { grid-template-columns: 1fr; }
  .h39-apicard { display: none; }
  .h39-drop--sub { padding-left: 14px; }
  .h39-cta-group { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--h39-line); }
  .h39-cta-group .h39-signin { text-align: center; padding: 12px; border: 1px solid var(--h39-line); border-radius: var(--h39-radius-sm); }
  .h39-cta-group .h39-cta { justify-content: center; height: 46px; }
}

@media (prefers-reduced-motion: reduce) { .h39-header * { transition-duration: .01ms !important; } }

/* ===== header-40 · .h40-header ===== */
/* ==========================================================================
   HEADER 40 — SIGNATURE CONCEPT
   Self-contained. Tokens --h40-. Mega pairs a category list with a large
   cross-fading preview panel. Refined, editorial, memorable.
   ========================================================================== */
:root{
  --h40-ink:#141414; --h40-body:#4a4a4a; --h40-muted:#8a8a8a;
  --h40-line:#e8e6e2; --h40-line-soft:#f2f0ec; --h40-bg:#fbfaf8; --h40-hover:#f1efea;
  --h40-accent:#e0533d; --h40-accent-700:#c4432f;
  --h40-shadow:0 1px 2px rgba(20,20,20,.05),0 30px 70px -30px rgba(20,20,20,.35);
  --h40-radius:16px; --h40-radius-sm:10px; --h40-ease:cubic-bezier(.22,1,.36,1); --h40-dur:340ms;
  --h40-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --h40-display:"Fraunces",Georgia,serif;
}
.h40-header,.h40-header *{box-sizing:border-box;} .h40-header{font-family:var(--h40-font);color:var(--h40-ink);-webkit-font-smoothing:antialiased;}
.h40-container{max-width:1240px;margin:0 auto;padding:0 24px;}
.h40-skip{position:absolute;left:16px;top:-60px;z-index:1100;padding:10px 16px;border-radius:8px;background:var(--h40-ink);color:#fff;font-size:.875rem;text-decoration:none;transition:top .2s;} .h40-skip:focus{top:12px;}

.h40-header{position:sticky;top:0;z-index:1030;background:rgba(251,250,248,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid transparent;transition:border-color .2s var(--h40-ease),box-shadow .2s var(--h40-ease);}
.h40-header.is-stuck{border-bottom-color:var(--h40-line);box-shadow:0 1px 0 var(--h40-line);}
.h40-nav{display:flex;align-items:center;gap:36px;height:74px;}
.h40-brand{text-decoration:none;color:var(--h40-ink);flex:0 0 auto;}
.h40-brand__name{font-family:var(--h40-display);font-size:1.45rem;font-weight:600;letter-spacing:-.01em;} .h40-brand__dot{color:var(--h40-accent);}

.h40-collapse{flex:1 1 auto;}
.h40-menu{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;}
.h40-item{position:relative;}
.h40-link{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;border:0;background:none;cursor:pointer;font:inherit;font-size:.95rem;font-weight:500;color:var(--h40-body);text-decoration:none;border-radius:var(--h40-radius-sm);transition:color .18s var(--h40-ease),background .18s var(--h40-ease);}
.h40-link:hover{color:var(--h40-ink);background:var(--h40-hover);}
.h40-chevron{opacity:.55;transition:transform .25s var(--h40-ease);}
.h40-item.is-open>.h40-trigger{color:var(--h40-ink);background:var(--h40-hover);} .h40-item.is-open>.h40-trigger .h40-chevron{transform:rotate(180deg);}
:where(.h40-link,.h40-drop__link,.h40-cta,.h40-burger,.h40-cat):focus-visible{outline:2px solid var(--h40-accent);outline-offset:2px;}

/* Signature mega */
.h40-mega,.h40-drop{position:absolute;top:calc(100% + 12px);left:0;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s var(--h40-ease),transform .3s var(--h40-ease),visibility .3s var(--h40-ease);pointer-events:none;}
.h40-item.is-open>.h40-mega,.h40-item.is-open>.h40-drop{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
.h40-mega{width:720px;background:#fff;border:1px solid var(--h40-line);border-radius:var(--h40-radius);box-shadow:var(--h40-shadow);padding:18px;display:grid;grid-template-columns:1fr 1.15fr;gap:18px;}
.h40-mega__label{margin:6px 8px 12px;font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--h40-muted);}
.h40-cat{display:flex;align-items:center;justify-content:space-between;padding:14px 12px;border-radius:var(--h40-radius-sm);text-decoration:none;color:var(--h40-ink);font-family:var(--h40-display);font-size:1.15rem;font-weight:500;transition:background .2s var(--h40-ease),padding .25s var(--h40-ease);}
.h40-cat i{opacity:0;transform:translateX(-6px);transition:opacity .25s var(--h40-ease),transform .25s var(--h40-ease);color:var(--h40-accent);}
.h40-cat:hover{background:var(--h40-hover);padding-left:18px;} .h40-cat:hover i{opacity:1;transform:translateX(0);}
.h40-preview{position:relative;border-radius:var(--h40-radius-sm);overflow:hidden;min-height:230px;}
.h40-shot{position:absolute;inset:0;display:flex;align-items:flex-end;padding:16px;opacity:0;transform:scale(1.04);transition:opacity .5s var(--h40-ease),transform .7s var(--h40-ease);}
.h40-shot.is-active{opacity:1;transform:scale(1);}
.h40-shot em{font-style:normal;color:#fff;font-size:.8125rem;font-weight:600;letter-spacing:.02em;text-shadow:0 1px 8px rgba(0,0,0,.4);}
.h40-shot--1{background:linear-gradient(135deg,#e0533d,#7a2418);} .h40-shot--2{background:linear-gradient(135deg,#3a5a7a,#16222f);} .h40-shot--3{background:linear-gradient(135deg,#5a4a7a,#241c38);} .h40-shot--4{background:linear-gradient(135deg,#4a7a5a,#1c3826);}

.h40-drop{min-width:210px;list-style:none;margin:0;padding:6px;background:#fff;border:1px solid var(--h40-line);border-radius:var(--h40-radius);box-shadow:var(--h40-shadow);}
.h40-drop__item{position:relative;}
.h40-drop__link{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:10px 12px;border:0;background:none;cursor:pointer;font:inherit;font-size:.9rem;font-weight:500;text-align:left;color:var(--h40-body);text-decoration:none;border-radius:var(--h40-radius-sm);transition:color .18s var(--h40-ease),background .18s var(--h40-ease);}
.h40-drop__link:hover{color:var(--h40-ink);background:var(--h40-hover);} .h40-drop__caret{font-size:.7rem;opacity:.5;}
.h40-drop--sub{top:-7px;left:calc(100% + 6px);} .h40-drop__item--sub.is-open>.h40-drop--sub{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}

.h40-m-cta{display:none;}
.h40-actions{display:flex;align-items:center;gap:12px;margin-left:auto;flex:0 0 auto;}
.h40-cta{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 20px;font-size:.9375rem;font-weight:600;color:#fff;text-decoration:none;background:var(--h40-ink);border-radius:999px;transition:background .2s var(--h40-ease);} .h40-cta:hover{background:var(--h40-accent);} .h40-cta i{font-size:.9rem;}
.h40-burger{display:none;position:relative;width:40px;height:40px;padding:0;border:1px solid var(--h40-line);border-radius:var(--h40-radius-sm);background:#fff;cursor:pointer;}
.h40-burger span{position:absolute;left:11px;width:18px;height:1.8px;background:var(--h40-ink);transition:transform .25s var(--h40-ease);} .h40-burger span:nth-child(1){top:16px;} .h40-burger span:nth-child(2){bottom:16px;}
.h40-burger[aria-expanded="true"] span:nth-child(1){top:19px;transform:rotate(45deg);} .h40-burger[aria-expanded="true"] span:nth-child(2){bottom:19px;transform:rotate(-45deg);}
.h40-scrim{position:fixed;inset:0;z-index:1029;background:rgba(20,20,20,.34);opacity:0;transition:opacity .25s var(--h40-ease);} .h40-scrim.is-shown{opacity:1;}

@media (max-width:991.98px){
  .h40-burger{display:block;} .h40-actions>.h40-cta{display:none;}
  .h40-collapse{position:fixed;top:0;right:0;z-index:1031;width:min(400px,90vw);height:100dvh;background:var(--h40-bg);box-shadow:-24px 0 60px -30px rgba(20,20,20,.3);padding:84px 16px 24px;overflow-y:auto;transform:translateX(100%);transition:transform 340ms var(--h40-ease);}
  .h40-collapse.is-open{transform:translateX(0);}
  .h40-menu{flex-direction:column;align-items:stretch;gap:2px;} .h40-link{height:50px;justify-content:space-between;font-size:1.05rem;} .h40-item{border-bottom:1px solid var(--h40-line-soft);}
  .h40-mega,.h40-drop{position:static;width:auto;opacity:1;visibility:visible;transform:none;pointer-events:auto;border:0;box-shadow:none;background:transparent;padding:0;display:block;max-height:0;overflow:hidden;transition:max-height .34s var(--h40-ease);}
  .h40-item.is-open>.h40-mega,.h40-item.is-open>.h40-drop,.h40-drop__item--sub.is-open>.h40-drop--sub{max-height:900px;}
  .h40-preview{display:none;} .h40-cat{font-size:1.05rem;padding:12px 8px;} .h40-cat i{opacity:1;transform:none;} .h40-drop--sub{padding-left:14px;}
  .h40-m-cta{display:block;text-align:center;margin-top:18px;padding:14px;border-radius:999px;background:var(--h40-ink);color:#fff;font-weight:600;text-decoration:none;}
}
@media (min-width:992px){.h40-scrim{display:none;}}

@media (prefers-reduced-motion:reduce){.h40-header *{transition-duration:.01ms !important;}}