/* ============================================================
   CROWN & CORE - COMPONENTS
   ============================================================ */

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 1.05rem 2rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  text-align: center;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform var(--dur-base) var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: scale(0.97); }

.btn--primary {
  background: var(--ink);
  color: var(--paper);
}
.btn--primary:hover {
  background: var(--accent-text);
  box-shadow: var(--shadow-accent);
}

.section--dark .btn--primary {
  background: var(--accent-bright);
  color: var(--charcoal);
}
.section--dark .btn--primary:hover {
  background: var(--paper);
  color: var(--charcoal);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent-text);
}
/* Every dark surface, not just .section--dark: the heroes, the CTA band, and
   the cookie consent panel are charcoal too, and a ghost button there would
   otherwise inherit near-black --ink text and disappear into the background. */
.section--dark .btn--ghost,
.hero .btn--ghost,
.page-hero .btn--ghost,
.cta-band .btn--ghost,
.consent .btn--ghost {
  color: var(--paper-text);
  border-color: var(--line-dark);
}
.section--dark .btn--ghost:hover,
.hero .btn--ghost:hover,
.page-hero .btn--ghost:hover,
.cta-band .btn--ghost:hover,
.consent .btn--ghost:hover {
  border-color: var(--accent-bright);
  color: var(--accent-bright);
}

.btn--sm { padding: 0.8rem 1.5rem; font-size: var(--fs-2xs); }

/* ---------------- Header / Nav ---------------- */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-nav);
  padding-block: var(--space-3);
  overflow: hidden;
  transition: background-color var(--dur-base) var(--ease-out),
              padding var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  /* No backdrop-filter here: --charcoal is a fully opaque solid, so a blur
     of what's behind it was never visible - and backdrop-filter creates a
     new containing block for this header's fixed-position descendants
     (the mobile .nav overlay below), which broke the overlay by resolving
     its inset:0 against the header's own small box instead of the
     viewport, then clipping the rest via this header's overflow:hidden. */
  background-color: var(--charcoal);
  padding-block: var(--space-2);
  box-shadow: var(--shadow-md);
  border-color: var(--line-dark);
}
/* Photo lives on its own blurred layer, inset beyond the header's edges so
   the blur radius never reveals a sharp boundary - the nav content (logo,
   links) sits in normal flow above it, unaffected by the filter. */
.site-header.is-scrolled::before {
  content: '';
  position: absolute;
  inset: -20px;
  z-index: -1;
  background-image:
    radial-gradient(ellipse 55% 160% at 88% 50%, rgba(var(--glow-rgb), 0.25), transparent 70%),
    linear-gradient(rgba(20, 20, 20, 0.42), rgba(20, 20, 20, 0.42)),
    url('../img/footer-mountains-1200.jpg');
  background-size: cover;
  background-position: center 48%;
  background-repeat: no-repeat;
  filter: blur(8px);
}

.site-header .container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  color: var(--paper-text);
  /* Without this, .brand is just another flexible item of .site-header
     .container - when the desktop nav's own content (links + lang switch +
     CTA) doesn't fit the available width, the flex algorithm shrinks
     .brand's box to make room, and since .brand__mark has a fixed height
     (34px) but only max-width:100% for width, the logo gets squeezed
     narrower than its own aspect ratio instead of staying its true size. */
  flex-shrink: 0;
}
.brand__mark { height: 34px; width: auto; display: block; flex-shrink: 0; }
.footer__brand .brand__mark { height: 97px; }

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.nav__link {
  position: relative;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--paper-text-muted);
  padding-block: var(--space-1);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--accent-bright);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav__link:hover, .nav__link:focus-visible { color: var(--paper-text); }
.nav__link:hover::after, .nav__link:focus-visible::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--paper-text); }

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.lang-switch a {
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-sm);
  color: var(--paper-text-muted);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.lang-switch a[aria-current="page"] {
  color: var(--charcoal);
  background: var(--accent-bright);
}
.lang-switch a:hover:not([aria-current="page"]) { color: var(--paper-text); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--paper-text);
  /* .nav becomes position:fixed when open; fixed/positioned elements paint
     after static ones regardless of DOM order, so without its own stacking
     context this button would sit underneath the full-screen nav overlay. */
  position: relative;
  z-index: 1;
}
.nav-toggle svg { width: 22px; height: 22px; }

@media (max-width: 1170px) {
  /* Was 900px - but the full desktop nav (5 links + language switch + the
     "book a conversation" CTA) doesn't actually fit next to the logo until
     somewhere around 1170-1200px wide. Between 900 and the old 900px cutoff,
     the flex row was left to cram everything in anyway: the logo got
     squeezed (see .brand above) and, once even that wasn't enough, .nav
     itself started overflowing past the right edge of the viewport. Moving
     the hamburger/overlay switch up to 1170px removes that whole cramped
     range instead of trying to patch it in place. */
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed;
    inset: 0;
    top: 0;
    background: var(--charcoal);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-6);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
  }
  .nav.is-open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
  .nav__list { flex-direction: column; gap: var(--space-4); }
  .nav__link { font-size: var(--fs-md); }
  .nav__actions { flex-direction: column; gap: var(--space-4); }
}

/* ---------------- Footer ---------------- */
.site-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--charcoal);
  color: var(--paper-text-muted);
  padding-block: var(--space-8) var(--space-5);
}
.footer__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.footer__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}
.footer__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 60% at 14% 10%, rgba(var(--glow-rgb), 0.16), transparent 65%),
    linear-gradient(180deg, rgba(20, 20, 20, 0.82) 0%, rgba(20, 20, 20, 0.6) 38%, rgba(20, 20, 20, 0.92) 100%);
}
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--line-dark);
}
@media (max-width: 767px) {
  .footer__top { grid-template-columns: 1fr; gap: var(--space-5); }
}
.footer__brand .brand { margin-bottom: var(--space-5); }
.footer__col h4 {
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--paper-text);
  margin-bottom: var(--space-3);
}
.footer__col a, .footer__col li { margin-bottom: var(--space-2); }
.footer__col a {
  display: inline-block;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__col a:hover { color: var(--accent-bright); }
/* Footer link icons - gold glyphs beside each navigation / contact item */
.footer__col li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.footer__col li::before {
  content: '';
  flex: 0 0 auto;
  width: 15px;
  height: 1.7em;
  height: 1lh;
  background-color: var(--accent-bright);
  -webkit-mask: var(--fico, none) center / 15px 15px no-repeat;
  mask: var(--fico, none) center / 15px 15px no-repeat;
}
.footer__col li:has(a[href="./"]) {
  --fico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11.5 12 4l8 7.5'/%3E%3Cpath d='M6 10v10h4v-5.5h4V20h4V10'/%3E%3C/svg%3E");
}
.footer__col li:has(a[href="services"]) {
  --fico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='1'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1'/%3E%3Crect x='13' y='13' width='7' height='7' rx='1'/%3E%3C/svg%3E");
}
.footer__col li:has(a[href="approach"]) {
  --fico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M14.8 9.2l-2 5.6-5.6 2 2-5.6 5.6-2z'/%3E%3C/svg%3E");
}
.footer__col li:has(a[href="about"]) {
  --fico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M2.8 20c.8-3.6 3.2-5.6 6.2-5.6s5.4 2 6.2 5.6'/%3E%3Ccircle cx='17' cy='8.5' r='2.4'/%3E%3Cpath d='M16 14.6c2.4.2 4.2 2 4.8 4.9'/%3E%3C/svg%3E");
}
.footer__col li:has(a[href="contact"]) {
  --fico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5a2 2 0 0 1-2 2H9l-4 3.5V6a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}
.footer__col li:has(a[href="faq"]) {
  --fico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.3 9.2a2.8 2.8 0 0 1 5.4 1c0 1.9-2.7 2.4-2.7 4'/%3E%3Cpath d='M12 17.3v.1'/%3E%3C/svg%3E");
}
.footer__col li:has(a[href^="mailto:"]) {
  --fico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='1.4'/%3E%3Cpath d='M3.5 6.5 12 13l8.5-6.5'/%3E%3C/svg%3E");
}
.footer__col li:not(:has(a)) {
  --fico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3c2.6 2.7 2.6 15.3 0 18M12 3c-2.6 2.7-2.6 15.3 0 18'/%3E%3C/svg%3E");
}
.footer__col li:has(a[href*="linkedin"]) {
  --fico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='2.5'/%3E%3Cpath d='M8 10.5v6M8 7.9v.1M12 16.5v-3.7c0-1.4.9-2.3 2.1-2.3 1.2 0 1.9.9 1.9 2.3v3.7'/%3E%3C/svg%3E");
}
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-5);
  font-size: var(--fs-2xs);
}
/* Legal links row within the footer bottom bar */
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}
.footer__legal a,
.footer__legal button {
  color: var(--paper-text-muted);
  font-size: var(--fs-2xs);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__legal a:hover,
.footer__legal button:hover { color: var(--accent-bright); }
@media (max-width: 767px) {
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------------- Legal pages ---------------- */
.legal-hero {
  background: var(--charcoal);
  color: var(--paper-text);
  padding-top: clamp(7rem, 12vw, 9rem);
  padding-bottom: var(--space-6);
  position: relative;
  isolation: isolate;
}
.legal-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 70% at 88% 0%, rgba(var(--glow-rgb), 0.14), transparent 60%),
    var(--charcoal);
}
.legal-hero h1 { max-width: 22ch; }

.legal-section { padding-block: var(--space-7); }
.legal-body { max-width: 760px; margin-inline: auto; }

.legal-prose { color: var(--ink-muted); }
.legal-prose > * + * { margin-top: var(--space-4); }
.legal-prose h2 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--ink);
  margin-top: var(--space-7);
  margin-bottom: var(--space-2);
}
.legal-prose h2:first-child { margin-top: 0; }
.legal-prose h3 {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
  margin-top: var(--space-5);
  margin-bottom: var(--space-1);
}
.legal-prose p, .legal-prose li { line-height: var(--lh-body); }
.legal-prose ul { list-style: disc; padding-left: 1.3em; }
.legal-prose ul li { margin-top: var(--space-1); }
.legal-prose a {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-prose a:hover { color: var(--ink); }
.legal-prose strong { color: var(--ink); font-weight: 600; }
.legal-meta {
  font-size: var(--fs-2xs);
  color: var(--ink-muted);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.legal-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-4);
  margin-top: var(--space-2);
}
.legal-dl dt { font-weight: 600; color: var(--ink); }
.legal-dl dd { color: var(--ink-muted); }
@media (max-width: 520px) {
  .legal-dl { grid-template-columns: 1fr; gap: 0; }
  .legal-dl dd { margin-bottom: var(--space-3); }
}
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
}
.legal-table th, .legal-table td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.legal-table th { color: var(--ink); font-weight: 600; }
.legal-table-wrap { overflow-x: auto; }

/* ---------------- Cookie consent ---------------- */
.consent {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 1000;
  max-width: 460px;
  margin-inline: auto;
  background: var(--charcoal);
  color: var(--paper-text);
  border: 1px solid rgba(242, 239, 231, 0.18);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  padding: var(--space-4) var(--space-5) var(--space-5);
  transform: translateY(12px);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
@media (min-width: 560px) { .consent { left: var(--space-5); right: auto; margin-inline: 0; } }
.consent.is-visible { transform: translateY(0); opacity: 1; }
.consent[hidden] { display: none; }
.consent__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--paper-text);
  margin-bottom: var(--space-2);
}
.consent__text {
  font-size: var(--fs-sm);
  color: var(--paper-text-muted);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-4);
}
.consent__text a { color: var(--accent-bright); text-decoration: underline; text-underline-offset: 2px; }
.consent__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.consent__actions .btn { flex: 1 1 auto; justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  .consent { transition: none; }
}

/* ---------------- Cards ---------------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}
.card__icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-text);
  margin-bottom: var(--space-4);
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.card__icon svg { width: 22px; height: 22px; }
.card:hover .card__icon { transform: scale(1.08) rotate(-4deg); }

.card--dark {
  background: var(--charcoal);
  border-color: var(--line-dark);
  color: var(--paper-text);
}
.card--dark:hover { border-color: var(--accent-bright); }
.card--dark .card__icon { color: var(--accent-bright); }

/* ---------------- Stat strip ---------------- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
@media (max-width: 900px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
}
.stat {
  text-align: center;
  padding-block: var(--space-3);
}
.stat__num {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--accent-bright);
  display: block;
  margin-bottom: var(--space-1);
}
.stat__label {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--paper-text-muted);
}

/* ---------------- Divider / crest motifs ---------------- */
.crest-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--accent);
  margin-block: var(--space-6);
}
.crest-divider::before, .crest-divider::after {
  content: '';
  height: 1px;
  width: 80px;
  background: linear-gradient(90deg, transparent, var(--line));
}
.crest-divider::after { background: linear-gradient(90deg, var(--line), transparent); }
:is(.section--dark, .hero, .page-hero, .cta-band) .crest-divider::before { background: linear-gradient(90deg, transparent, var(--line-dark)); }
:is(.section--dark, .hero, .page-hero, .cta-band) .crest-divider::after { background: linear-gradient(90deg, var(--line-dark), transparent); }
.crest-divider svg { width: 20px; height: 20px; }

/* ---------------- Process steps ---------------- */
.steps {
  counter-reset: step;
  display: flex;
  flex-direction: column;
}
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--space-5);
  padding-block: var(--space-5);
  border-top: 1px solid var(--line);
}
:is(.section--dark, .hero, .page-hero, .cta-band) .step { border-color: var(--line-dark); }
.step:last-child { padding-bottom: 0; }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--accent);
}
@media (max-width: 640px) {
  .step { grid-template-columns: 44px 1fr; gap: var(--space-3); }
  .step::before { font-size: var(--fs-md); }
}

/* ---------------- Quote / pull ---------------- */
.pull-quote {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-style: italic;
  line-height: var(--lh-snug);
  color: var(--ink);
  max-width: 32ch;
}
:is(.section--dark, .hero, .page-hero, .cta-band) .pull-quote { color: var(--paper-text); }

/* ---------------- Form ---------------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.field input, .field textarea, .field select {
  width: 100%;
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-size: var(--fs-sm);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}
.field textarea { resize: vertical; min-height: 140px; }
.field-hint { font-size: var(--fs-2xs); color: var(--ink-muted); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status {
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  display: none;
}
.form-status.is-success { display: block; background: var(--success-soft); color: var(--success); }
.form-status.is-error { display: block; background: var(--danger-soft); color: var(--danger); }

/* ---------------- Badge ---------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
}
.badge svg { width: 16px; height: 16px; color: var(--accent-text); }

/* ---------------- Founder portrait ----------------
   --px / --py are the cursor position within the element, normalised to
   -1..1, written by main.js. They stay 0 when the pointer is coarse or the
   visitor prefers reduced motion, which collapses every transform below to
   its resting state without needing a separate rule. */
.portrait {
  --px: 0;
  --py: 0;
  position: relative;
  width: min(100%, 340px);
  aspect-ratio: 1;
  margin-inline: auto;
  perspective: 900px;
}

.portrait__frame {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--px) * 7deg)) rotateX(calc(var(--py) * -7deg));
  transition: transform 580ms var(--ease-out);
}

.portrait__glow {
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(var(--glow-rgb), 0.22), transparent 62%);
  opacity: 0;
  transition: opacity 650ms var(--ease-out);
  pointer-events: none;
}
.portrait:hover .portrait__glow { opacity: 1; }
/* Same slow-drift zoom as the content photos (.art-panel__img in layout.css) -
   base scale(1.02) easing to scale(1.06) on hover, same duration/easing token,
   so this reads as the same photo treatment rather than a one-off. */
.portrait:hover .portrait__img { transform: scale(1.06); }

/* Concentric rings drift against the tilt to give the assembly depth. */
.portrait__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--accent);
  pointer-events: none;
}
.portrait__ring--1 {
  inset: -14px;
  opacity: 0.5;
  transform: translate3d(calc(var(--px) * -9px), calc(var(--py) * -9px), 0);
  transition: transform 700ms var(--ease-out);
}
.portrait__ring--2 {
  inset: -30px;
  opacity: 0.2;
  transform: translate3d(calc(var(--px) * -16px), calc(var(--py) * -16px), 0);
  transition: transform 820ms var(--ease-out);
}

.portrait__media {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
:is(.section--dark, .hero, .page-hero, .cta-band) .portrait__media { border-color: var(--line-dark); }

.portrait__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform var(--dur-slow) var(--ease-out);
  filter: saturate(1) contrast(1.02);
}
/* Both the corner radius (.portrait__media, rectangle -> circle) and the
   saturation (.portrait__img, 1 -> 0.2) are set as direct inline styles by
   main.js, tracking scroll position 1:1 (reversibly) against .page-hero's
   visibility - no transition here, or it would lag behind/fight the
   scroll-driven value instead of staying locked to it. */
@media (prefers-reduced-motion: reduce) {
  .portrait__media { border-radius: 50% !important; }
  .portrait__img { filter: saturate(1) contrast(1.02) !important; }
}

@media (max-width: 640px) {
  .portrait { width: min(100%, 260px); }
  .portrait__ring--2 { inset: -22px; }
}

/* main.js already refuses to write --px/--py under reduced motion, which leaves
   the portrait at rest. This is the belt-and-braces half: no easing survives
   even if a future change drives those vars from elsewhere. */
@media (prefers-reduced-motion: reduce) {
  .portrait__frame,
  .portrait__img,
  .portrait__ring { transition: none; }
  .portrait:hover .portrait__img { transform: scale(1.02); }
}

/* ============================================================
   CONTACT PAGE - lead form
   ------------------------------------------------------------
   Everything below belongs to the rebuilt contact page: the topic
   selector, the conversation starters, the live field feedback, and the
   tile that flips to a confirmation on the brand blue. Class names are
   unique to that page, so nothing here reaches another template.
   ============================================================ */

/* RESET - .card was built for clickable cards: it lifts 4px and turns its
   border gold on hover. On a form that means the field you are aiming at
   moves out from under the cursor as you approach it. */
.card--form:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--line);
}
/* .card animates transform/box-shadow, which we just disabled. Swap that for
   the colour flip into the success state below. */
.card--form {
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

/* ---------------- Success state: card flips to brand blue ----------------
   components.css scopes its on-dark text and button treatment to a fixed list
   of charcoal surfaces (.section--dark, .hero, .page-hero, .cta-band,
   .consent). Its own comment warns why: a ghost button on a dark surface
   otherwise inherits near-black --ink and disappears. This card becomes a
   sixth such surface, so every rule that list carries is repeated here. */
.card--sent {
  background: var(--charcoal);
  border-color: var(--line-dark);
  color: var(--paper-text);
}

/* ---------------- The tile flip ----------------
   .flip holds the perspective, .flip__inner is the thing that rotates, and the
   two faces are stacked absolutely inside it. Both faces are laid out from the
   top with auto height, so each one's offsetHeight is its true content height -
   that is what the script animates .flip__inner to, so the tile also resizes
   from the tall form to the shorter confirmation as it turns. */
.flip { perspective: 1800px; width: 100%; }
.flip__inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 820ms var(--ease-in-out), height 820ms var(--ease-in-out);
}
.flip.is-flipped .flip__inner { transform: rotateY(180deg); }

.flip__face {
  position: absolute;
  top: 0; left: 0; right: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flip__face--back { transform: rotateY(180deg); }

/* .card's hover lift would fight the 3D transform on each face - and on the
   back it would drop the rotateY entirely, flashing mirrored text. */
.flip__face:hover { box-shadow: none; }
.flip__face--front:hover { transform: none; border-color: var(--line); }
.flip__face--back:hover { transform: rotateY(180deg); border-color: var(--line-dark); }

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

.card--sent .sent h2 { color: var(--paper-text); }
.card--sent .text-muted { color: var(--paper-text-muted); }

.card--sent .sent__mark {
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent-bright);
}
.card--sent .sent__next { border-top-color: var(--line-dark); }
.card--sent .sent__next li {
  color: var(--paper-text-muted);
  border-bottom-color: var(--line-dark);
}
.card--sent .sent__next svg { color: var(--accent-bright); }

.card--sent .btn--ghost { color: var(--paper-text); border-color: var(--line-dark); }
.card--sent .btn--ghost:hover { border-color: var(--accent-bright); color: var(--accent-bright); }

.card--sent .starter { color: var(--paper-text-muted); border-color: var(--line-dark); }
.card--sent .starter:hover,
.card--sent .starter:focus-visible {
  border-color: var(--accent-bright);
  color: var(--accent-bright);
  background: rgba(var(--accent-rgb), 0.12);
}

/* ---------------- Form card head ---------------- */
.form-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.form-head h2 { font-size: var(--fs-lg); }
.form-head__meta {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ---------------- Completion progress ----------------
   A 2px rule that fills as the required fields are satisfied. The cheapest
   possible "this form is responding to me" signal. */
.form-progress {
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: var(--space-5);
}
.form-progress__bar {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-text), var(--accent));
  transition: width var(--dur-base) var(--ease-out);
}

/* ---------------- Topic selector ----------------
   Real radio inputs, so this works with no JS, with a keyboard and with a
   screen reader. JS only layers the placeholder/starter swap on top. */
.topic-set { border: 0; padding: 0; margin: 0 0 var(--space-5); }
.topic-set > legend {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0;
  margin-bottom: var(--space-3);
}
.topic-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
@media (max-width: 480px) { .topic-grid { grid-template-columns: 1fr; } }

.topic { position: relative; display: block; }
.topic input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.topic__face {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 62px;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.topic__face svg {
  width: 22px; height: 22px;
  flex-shrink: 0;
  color: var(--ink-muted);
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.topic input:hover + .topic__face { border-color: var(--accent); }
.topic input:focus-visible + .topic__face {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.topic input:checked + .topic__face {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.topic input:checked + .topic__face svg {
  color: var(--accent-text);
  transform: scale(1.1) rotate(-4deg);
}

/* ---------------- Conversation starters ----------------
   The blank textarea is the single biggest drop-off point on a B2B contact
   form. These are one-click opening sentences, not canned messages: the
   visitor keeps writing from there in their own words. */
.starters { margin-top: var(--space-3); }
.starters__label {
  font-size: var(--fs-2xs);
  color: var(--ink-muted);
  margin-bottom: var(--space-2);
}
.starters__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.starter {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-sm);
  line-height: 1.3;
  text-align: left;
  color: var(--ink-muted);
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: var(--radius-pill);
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.starter:hover, .starter:focus-visible {
  border-style: solid;
  border-color: var(--accent);
  color: var(--accent-text);
  background: var(--accent-soft);
}

/* ---------------- Live field feedback ---------------- */
.field__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.field__note {
  font-size: var(--fs-2xs);
  color: var(--ink-muted);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.field__note.is-on { opacity: 1; }

.field.is-valid input,
.field.is-valid textarea { border-color: rgba(31, 81, 51, 0.45); }
.field.is-invalid input,
.field.is-invalid textarea { border-color: var(--danger); }

.field__error {
  font-size: var(--fs-2xs);
  color: var(--danger);
  display: none;
}
.field.is-invalid .field__error { display: block; }

.field__check {
  color: var(--success);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.field__check svg { width: 14px; height: 14px; display: block; }
.field.is-valid .field__check { opacity: 1; transform: scale(1); }

/* ---------------- Submit button ---------------- */
.btn__spinner {
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: proto-spin 640ms linear infinite;
  flex-shrink: 0;
}
@keyframes proto-spin { to { transform: rotate(360deg); } }

/* ---------------- Success panel ----------------
   Replaces the form in place. The shipped behaviour - clear the fields,
   print a 15px green line - throws away the most attentive moment on the
   entire site. */
.sent { text-align: center; padding-block: var(--space-4); }
.sent__mark {
  width: 68px; height: 68px;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent-text);
}
.sent__mark svg { width: 32px; height: 32px; }
.sent__mark path {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: proto-draw 620ms var(--ease-out) 120ms forwards;
}
@keyframes proto-draw { to { stroke-dashoffset: 0; } }

.sent__next {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
  text-align: left;
  border-top: 1px solid var(--line);
}
.sent__next li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: var(--space-3);
  align-items: start;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}
.sent__next svg { width: 18px; height: 18px; color: var(--accent-text); margin-top: 3px; }
.sent__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* ---------------- Practice note ----------------
   The trust promise next to the form. Deliberately impersonal: it speaks
   for the practice, not for a named individual, and carries the crest
   rather than a face. */
.signer {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--paper);
}
.signer__mark {
  /* No disc and no fill: the crest sits directly on the card in brand ink.
     The 72px box is kept so the grid column - and the text beside it - does
     not shift; the artwork is centred inside it. */
  width: 72px; height: 72px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.signer__mark img { width: 46px; height: auto; display: block; }
.signer p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-md);
  line-height: 1.35;
  /* --accent-text, not --accent: tokens.css records that the brand gold is
     only ~2.85:1 on paper and that paper surfaces take the deeper bronze
     sibling for text. This is body copy, so it needs the 5.3:1 one. */
  color: var(--accent-text);
  margin: 0;
}
.signer cite {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
}
@media (max-width: 480px) {
  .signer { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}

/* ---------------- Column balance ----------------
   The shipped .split is 1fr 1fr, which leaves the shorter info column
   trailing a large block of empty paper on desktop. */
/* Written as .split.contact-split, not .contact-split: layout.css is loaded
   AFTER components.css and its own `.split` rule sets align-items:center and
   1fr 1fr at the same specificity, so a single-class selector here loses the
   cascade and the shorter column drops to the vertical centre. Two classes
   win regardless of the order the stylesheets happen to load in. */
@media (min-width: 901px) {
  .split.contact-split { grid-template-columns: 0.85fr 1fr; align-items: start; }
}

/* ---------------- Reach band ----------------
   Sits under the four figures and carries the same weight as them: the
   eyebrow reads like a .stat__label, the country names like a .stat__num.
   That is what keeps it part of the key facts instead of a caption. The
   shared .stat-strip keeps its native four columns - no override needed. */
.reach-band {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-dark);
  text-align: center;
}
.reach-band__label {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--paper-text-muted);
  margin: 0 0 var(--space-3);
}
.reach-band__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 1.2;
  color: var(--accent-bright);
}
.reach-band__list li { display: flex; align-items: baseline; gap: var(--space-3); }
.reach-band__list li:not(:last-child)::after {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-0.35em);
}

/* ---------------- Objection accordion ----------------
   Native <details>: no JS, keyboard- and screen-reader-correct by default. */
.qa { border-top: 1px solid var(--line); }
.qa__item { border-bottom: 1px solid var(--line); }
.qa__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease-out);
}
.qa__item summary::-webkit-details-marker { display: none; }
.qa__item summary:hover { color: var(--accent-text); }
.qa__item summary::after {
  content: '';
  width: 11px; height: 11px;
  flex-shrink: 0;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--dur-base) var(--ease-out);
}
.qa__item[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.qa__item p {
  margin: 0;
  padding-bottom: var(--space-4);
  max-width: 68ch;
}

@media (prefers-reduced-motion: reduce) {
  .form-progress__bar,
  .topic__face, .topic__face svg,
  .field__note, .field__check,
  .qa__item summary::after { transition: none; }
  .sent__mark path { animation: none; stroke-dashoffset: 0; }
  .btn__spinner { animation-duration: 1600ms; }
}