/* ==========================================================================
   DHARANOVA DESIGN SYSTEM
   Brand Colors: Navy (#0e153f, #090e2c) & Copper (#b96e37, #d68a4c, #bb6e34)
   Typography: Poppins, Segoe UI, sans-serif
   ========================================================================== */

:root {
  --navy: #0e153f;
  --navy-deep: #090e2c;
  --navy-darker: #06091e;
  --navy-surface: #131d4f;
  --navy-card: rgba(19, 29, 79, 0.65);
  --navy-card-hover: rgba(26, 39, 102, 0.8);
  --navy-border: rgba(185, 192, 218, 0.15);
  --navy-border-glow: rgba(214, 138, 76, 0.4);

  /* Immutable — a ground may remap --copper for its children, so the ground's
     own background must not read from a token it is itself redefining. */
  --brand-copper: #bb6e34;
  --brand-navy: #0e163f;

  /* The full-bleed copper ground runs one step deeper than the mark itself:
     white on #bb6e34 is only 3.9:1, which fails AA for body text. #9e5824 is
     the same hue with the contrast the ground needs (white 5.4:1). The mark's
     own copper is unchanged and still used for accents on dark grounds. */
  --copper-ground: #9e5824;

  --copper: #b96e37;
  --copper-light: #d68a4c;
  --copper-dark: #8d4f21;
  --copper-glow: rgba(214, 138, 76, 0.25);
  --copper-glow-strong: rgba(214, 138, 76, 0.5);

  /* Cotton — the daylight ground. Unbleached, warm, deliberately not white.
     Sky-blue and mint were template defaults and have been removed; every
     accent on this site now comes out of the two logo colours. */
  --cotton: #EFE7DC;
  --cotton-raised: #F8F3EC;
  --cotton-ink: #0E163F;

  --text-strong: #ffffff;
  --text-soft: #b9c0da;
  --text-muted: #838cae;
  --text-highlight: #f8fafc;

  --font-main: "Poppins", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.5s cubic-bezier(0.16, 1, 0.3, 1);

  --container-max: 1200px;

  /* Footer column titles scale with the viewport rather than sitting at a
     fixed size that only looks right on desktop. */
  --footer-title-size: clamp(0.76rem, 0.71rem + 0.22vw, 0.85rem);

  /* One measure for the wordmark wherever it appears, so the header and footer
     marks are never two slightly different sizes stacked above each other.
     290px is the rendered width of the footer tagline, which the mark lines up
     with; the min() is what the header needs — below ~390px the hamburger and
     the container padding (44 + 16 + 40) leave less than 290px, and both marks
     step down together rather than only the header shrinking. */
  --brand-mark-max: 290px;
  /* What the header's menu button and its gap take out of the bar. The footer
     subtracts the same amount even though it has no button, purely so the two
     wordmarks resolve to an identical width and never read as two sizes of the
     same logo stacked above each other. Deliberately not 100vw-based: 100vw
     includes the scrollbar, which would make the footer 15px wider than the
     header on any desktop browser with classic scrollbars. */
  --brand-mark-reserve: 60px;

  /* Header wordmark, sized by height against the 80px bar. Fluid so it never
     crowds the nav links on the narrow desktop widths just above the 768px
     breakpoint, where the full nav is still showing. */
  --header-logo-height: clamp(22px, 2.2vw, 28px);
  --header-height: 80px;
}

/* ---------------- Reset & Base ---------------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  color-scheme: dark;
}

body {
  font-family: var(--font-main);
  background-color: var(--navy-deep);
  color: var(--text-strong);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}

/* The gradients used to sit on the body with background-attachment: fixed,
   which forces the browser to repaint the whole viewport on every scroll frame
   — and with a blurred sticky header sampling that area, the repaint showed as
   flicker. A fixed pseudo-element is composited once and simply doesn't
   repaint while scrolling. Identical appearance, none of the cost. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 15%, rgba(19, 29, 79, 0.7) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(185, 110, 55, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
}

/* Ambient Canvas Background */
#ambient-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}

/* ---------------- Layout & Container ---------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
  position: relative;
  z-index: 1;
}

main {
  flex: 1;
  position: relative;
  z-index: 1;
}

/* ---------------- Header & Navigation ---------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  display: flex;
  align-items: center;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(9, 14, 44, 0.75);
  border-bottom: 1px solid var(--navy-border);
  transition: background var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.site-header.scrolled {
  background: rgba(6, 9, 30, 0.92);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  border-bottom-color: rgba(214, 138, 76, 0.2);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.brand-logo-wrap {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.site-logo {
  /* The wordmark is copper on transparent, so it needs no white chip behind
     it the way the square mark did — it sits straight on the header's navy. */
  height: var(--header-logo-height);
  width: auto;
  max-width: 100%;
  opacity: 0.95;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.brand-logo-wrap:hover .site-logo,
.brand-logo-wrap:focus-visible .site-logo {
  opacity: 1;
  transform: translateY(-1px);
}

.nav-links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: clamp(0.75rem, 1.8vw, 1.75rem);
}

.nav-link {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-decoration: none;
  position: relative;
  padding: 0.5rem 0.2rem;
  transition: color var(--transition-fast);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--copper-light);
  border-radius: 2px;
  transition: width var(--transition-normal);
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-link.active {
  color: var(--text-strong);
}

.nav-link.active::after,
.nav-link:hover::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.mobile-menu-btn {
  display: none;
  background: transparent;
  border: 1px solid var(--navy-border);
  color: var(--text-strong);
  padding: 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.mobile-menu-btn:hover {
  border-color: var(--copper-light);
  background: rgba(214, 138, 76, 0.1);
}

/* ---------------- Typography ---------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-main);
  color: var(--text-strong);
  line-height: 1.25;
}

.hero-title {
  font-size: clamp(2.25rem, 4.5vw, 3.8rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
  line-height: 1.15;
}

.hero-title .gradient-text {
  background: linear-gradient(135deg, #ffffff 20%, var(--copper-light) 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-title {
  font-size: clamp(1.8rem, 3vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}

.section-subtitle {
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  font-weight: 300;
  color: var(--text-soft);
  max-width: 42rem;
  margin-bottom: 2.5rem;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper-light);
  margin-bottom: 0.75rem;
}

.eyebrow::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--copper-light);
  box-shadow: 0 0 10px var(--copper-light);
}

/* Trademark symbol. Already a superscript glyph, so it needs no raising of its
   own — only its own tracking cleared. */
.tm {
  letter-spacing: 0;
  font-size: 0.5em;
  vertical-align: super;
  line-height: 0;
}

/* Tiny uppercase type needs the symbol proportionally larger to stay legible. */
.eyebrow .tm {
  font-size: 0.85em;
}

/* An em-relative symbol scales with its heading, so at display sizes it grows
   far past the proportion the convention wants. Set it smaller where the type
   is large. */
.hero-title .tm,
.section-title .tm {
  font-size: 0.36em;
  margin-left: 0.06em;
}

/* Two things push the symbol away here: the eyebrow's 0.2em tracking, which the
   browser also applies after the final letter, and the generous left side
   bearing built into the trademark glyph itself. Measured at ~8px combined;
   this pulls back most of it and leaves a hair of air. */
.eyebrow .tm {
  margin-left: -0.6em;
}

.divider-copper {
  width: 56px;
  height: 2px;
  background: var(--copper);
  border-radius: 1px;
  margin: 1rem 0 1.5rem;
}

.divider-copper.centered {
  margin-left: auto;
  margin-right: auto;
}

p {
  color: var(--text-soft);
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.7;
}

/* ---------------- Buttons & CTAs ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  font-family: var(--font-main);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius-full);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: linear-gradient(135deg, var(--copper-light) 0%, var(--copper) 100%);
  color: #ffffff;
  box-shadow: 0 4px 20px var(--copper-glow);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--copper-glow-strong);
  background: linear-gradient(135deg, #e5995b 0%, var(--copper-light) 100%);
  color: #ffffff;
}

.btn-secondary {
  background: rgba(19, 29, 79, 0.6);
  border-color: var(--navy-border);
  color: var(--text-strong);
  backdrop-filter: blur(10px);
}

.btn-secondary:hover {
  background: rgba(26, 39, 102, 0.9);
  border-color: var(--copper-light);
  color: var(--copper-light);
  transform: translateY(-2px);
}

.btn-sm {
  padding: 0.55rem 1.25rem;
  font-size: 0.8rem;
}

.btn-lg {
  padding: 1.1rem 2.25rem;
  font-size: 1rem;
}

/* ---------------- Cards & Glassmorphism ---------------- */
.card-glass {
  background: var(--navy-card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--navy-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.card-glass:hover {
  border-color: rgba(214, 138, 76, 0.4);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(214, 138, 76, 0.15);
  transform: translateY(-4px);
}

.card-glow-copper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--copper-light), transparent);
}

/* ---------------- Grid Systems ---------------- */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

/* ---------------- Section Spacing ---------------- */
.section-py {
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
}

.section-py-sm {
  padding-top: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ---------------- Badges & Tags ---------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius-full);
  background: rgba(214, 138, 76, 0.15);
  color: var(--copper-light);
  border: 1px solid rgba(214, 138, 76, 0.3);
  letter-spacing: 0.04em;
}

/* The four constraint cards hold a heading and about twenty words, so
   card-glass's padding — sized for the fuller cards elsewhere — leaves a lot of
   empty space beneath the text. Scoped here rather than changed on the base
   class, which sixteen other cards across the site rely on. */
.feature-card {
  padding: clamp(1.15rem, 2vw, 1.5rem) clamp(1.25rem, 2.2vw, 1.65rem);
}

.feature-card .feature-title {
  margin-bottom: 0.4rem;
}

.feature-card p {
  margin-bottom: 0;
}

.feature-title {
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

/* ---------------- Team Cards ---------------- */
.team-card {
  text-align: left;
  display: flex;
  flex-direction: column;
  height: 100%;
  /* These cards carry only a portrait, a name, a title and a link or two, so
     card-glass's generous padding leaves them looking mostly empty. Tighten the
     frame without touching the portrait, which keeps its full width. */
  padding: 1.1rem 1.1rem 1.25rem;
}

/* Sits at the bottom of the card so the link row lines up across a row of
   cards even when a name wraps to two lines. */
.team-links {
  display: flex;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.9rem;
}

.team-avatar {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--navy-surface) 0%, var(--navy-deep) 100%);
  border: 1px solid var(--navy-border);
  overflow: hidden;
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.team-avatar-initials {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--copper-light);
  letter-spacing: 0.05em;
  opacity: 0.85;
}

/* Standing in for a photograph until the real ones exist. The mark is centred
   by the flex on .team-avatar rather than sized to fill it: filling a portrait
   tile with a logo reads as a mistake, a centred mark reads as a placeholder.
   Kept under the 180px source width so it is never upscaled. */
.team-avatar-photo {
  width: 52%;
  max-width: 180px;
  height: auto;
  display: block;
}

/* The mark is half navy, and on a dark tile that half disappears into it —
   leaving what reads as a broken copper crescent. Nothing drawn behind the
   image can fix that: the mark is fully opaque, so only the tile around it is
   ever visible. Give the placeholder tile on dark grounds the same light face
   the founders' cards already have, and both sections read alike. Remove this
   along with the class when real photographs land. */
.ground-navy .team-avatar-placeholder,
.ground-night .team-avatar-placeholder {
  background: linear-gradient(135deg, #E6DACB 0%, #DCCDB9 100%);
  border-color: rgba(14, 22, 63, 0.12);
}

.team-photo-note {
  font-size: 0.72rem;
  color: var(--text-soft);
  letter-spacing: 0.01em;
  margin: -0.1rem 0 0.5rem;
}

.team-name {
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.15rem;
}

.team-role {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--copper-light);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0;
}

/* ---------------- Modals (Article Reader & Contact) ---------------- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(6, 9, 30, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: var(--navy);
  border: 1px solid var(--copper-light);
  border-radius: var(--radius-xl);
  max-width: 800px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  /* Vertical padding trimmed relative to horizontal: the form only just
     exceeded the cap, so most of the scrolling was padding, not content. */
  padding: clamp(1.4rem, 3vw, 2.25rem) clamp(1.5rem, 4vw, 3rem);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 30px var(--copper-glow);
  position: relative;
  transform: translateY(20px) scale(0.97);
  transition: transform var(--transition-smooth);
}

/* The modal can still scroll when the form is taller than the viewport, but the
   bar itself is hidden — it only appears below ~800px of viewport height, and
   the browser default is a grey slab that fights the dark panel. Wheel, drag,
   arrow keys and Tab still scroll it, so nothing becomes unreachable. */
.modal-content {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* legacy Edge */
}

.modal-content::-webkit-scrollbar {
  display: none;                  /* Chrome, Safari */
}

.modal-overlay.open .modal-content {
  transform: translateY(0) scale(1);
}

.modal-close-btn {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: rgba(19, 29, 79, 0.8);
  border: 1px solid var(--navy-border);
  color: var(--text-soft);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all var(--transition-fast);
}

.modal-close-btn:hover {
  background: var(--copper);
  color: #ffffff;
  border-color: var(--copper);
}

/* ---------------- Form Elements ---------------- */
.form-group {
  margin-bottom: 1.25rem;
  text-align: left;
}

.form-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 0.4rem;
}

.form-control {
  width: 100%;
  background: rgba(9, 14, 44, 0.9);
  border: 1px solid var(--navy-border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  color: var(--text-strong);
  font-family: var(--font-main);
  font-size: 0.95rem;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:hover:not(:focus) {
  border-color: rgba(185, 192, 218, 0.3);
}

.form-control:focus {
  border-color: var(--copper-light);
  /* A ring rather than a blur — reads as a deliberate focus state, and stays
     clearly visible for keyboard users now that the native outline is off. */
  box-shadow: 0 0 0 3px rgba(214, 138, 76, 0.18);
  background: rgba(6, 9, 30, 0.95);
}

.form-control::placeholder {
  color: var(--text-muted);
  opacity: 1;                       /* Firefox dims placeholders by default */
}

/* The select is the one control that still looks browser-issued unless the
   native appearance is stripped and the arrow redrawn. */
select.form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23d68a4c' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
  padding-right: 2.75rem;
  cursor: pointer;
}

/* Chrome paints autofilled fields with its own pale background, which wrecks a
   dark form. An inset shadow is the only reliable way to override it. */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-strong);
  -webkit-box-shadow: 0 0 0 1000px rgba(9, 14, 44, 0.95) inset;
  caret-color: var(--text-strong);
  transition: background-color 9999s ease-in-out 0s;
}

textarea.form-control {
  min-height: 110px;
  resize: vertical;
}

/* Honeypot. Off-screen rather than display:none — some bots skip hidden
   fields, but nearly all of them fill anything they can find in the DOM. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-error {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-soft);
  background: rgba(141, 79, 33, 0.18);
  border: 1px solid var(--copper);
  border-radius: var(--radius-sm);
}

.form-error strong {
  display: block;
  color: var(--copper-light);
  margin-bottom: 0.2rem;
}

.form-error a {
  color: var(--copper-light);
}

/* ==========================================================================
   GROUND SYSTEM
   --------------------------------------------------------------------------
   The logo is roughly half copper, half navy, with a white sprout cut out of
   the negative space. On a page, that composition unrolls vertically: navy for
   evening and devotion, cotton for daylight and people, copper as a full-bleed
   mass for the moments that should stop the scroll.

   Each ground redefines the surface and text tokens. Components read the
   tokens and adapt on their own — nothing below needs a per-ground variant.
   ========================================================================== */

/* Night — transparent, so the body gradient and the ambient canvas show through.
   This is the hero's ground and the page's default. */
.ground-night {
  background: transparent;
}

/* Navy — a solid panel. Replaces the old inline rgba() section backgrounds. */
.ground-navy {
  background: var(--navy-darker);
}

/* Cotton — daylight. Navy becomes ink; copper deepens to hold contrast. */
.ground-cotton {
  background: var(--cotton);
  color: var(--cotton-ink);

  --text-strong: #0E163F;
  --text-soft: #3F4459;
  --text-muted: #6E7386;
  --text-highlight: #0E163F;

  /* #d68a4c is too light to read on cotton — deepen it for text-weight use. */
  --copper-light: #8F4E1C;
  --copper: #8F4E1C;

  --navy-card: var(--cotton-raised);
  --navy-card-hover: #FFFFFF;
  --navy-border: rgba(14, 22, 63, 0.13);
  --navy-border-glow: rgba(143, 78, 28, 0.35);
  --copper-glow: rgba(143, 78, 28, 0.18);
}

.ground-cotton .card-glass {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 2px 10px rgba(14, 22, 63, 0.07);
}

.ground-cotton .card-glass:hover {
  box-shadow: 0 10px 28px rgba(14, 22, 63, 0.11);
  border-color: rgba(143, 78, 28, 0.4);
}

.ground-cotton .btn-secondary {
  background: transparent;
  border-color: rgba(14, 22, 63, 0.28);
  color: var(--cotton-ink);
  backdrop-filter: none;
}

.ground-cotton .btn-secondary:hover {
  background: rgba(14, 22, 63, 0.05);
  border-color: var(--copper);
  color: var(--copper);
}

.ground-cotton .badge {
  background: rgba(143, 78, 28, 0.1);
  border-color: rgba(143, 78, 28, 0.3);
  color: var(--copper);
}

.ground-cotton .eyebrow::before {
  box-shadow: none;
}

/* Copper — full bleed. Half the mark, finally used at the weight the mark
   uses it. Reserved for one moment per page. */
.ground-copper {
  background: var(--copper-ground);
  color: #FFFFFF;

  --text-strong: #FFFFFF;
  --text-soft: #FBEBDC;
  --text-muted: #F7E2CE;
  --text-highlight: #FFFFFF;

  /* On copper the accent has nowhere warmer to go, so it becomes the sprout. */
  --copper-light: #FFFFFF;
  --copper: #FFFFFF;

  --navy-card: rgba(255, 255, 255, 0.13);
  --navy-card-hover: rgba(255, 255, 255, 0.2);
  --navy-border: rgba(255, 255, 255, 0.3);
  --navy-border-glow: rgba(255, 255, 255, 0.55);
}

.ground-copper .card-glass {
  box-shadow: none;
}

.ground-copper .card-glass:hover {
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 12px 30px rgba(90, 45, 12, 0.25);
}

.ground-copper .btn-primary {
  background: #FFFFFF;
  color: var(--copper-dark);
  box-shadow: 0 4px 18px rgba(90, 45, 12, 0.28);
}

.ground-copper .btn-primary:hover {
  background: #FFF6EE;
  color: var(--copper-dark);
  box-shadow: 0 8px 24px rgba(90, 45, 12, 0.35);
}

.ground-copper .btn-secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #FFFFFF;
  backdrop-filter: none;
}

.ground-copper .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #FFFFFF;
  color: #FFFFFF;
}

.ground-copper .badge {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.4);
  color: #FFFFFF;
}

.ground-copper .eyebrow::before {
  box-shadow: none;
}

.ground-copper .card-glow-copper::before {
  background: linear-gradient(90deg, transparent, #FFFFFF, transparent);
}

/* Components that hardcode a dark-ground assumption need a cotton reading. */
.ground-cotton .icon-circle-link {
  border-color: rgba(14, 22, 63, 0.22);
  color: var(--cotton-ink);
}

.ground-cotton .team-avatar {
  background: linear-gradient(135deg, #E6DACB 0%, #DCCDB9 100%);
  border-color: rgba(14, 22, 63, 0.12);
}

.ground-copper .icon-circle-link {
  border-color: rgba(255, 255, 255, 0.45);
  color: #FFFFFF;
}

.ground-copper .team-avatar {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
}

/* The gradient wordmark treatment resolves to white, so it may only ever sit
   on a dark ground. Guard it, rather than trusting future edits to remember. */
.ground-cotton .gradient-text,
.ground-copper .gradient-text {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: currentColor;
}

/* The seam between two grounds is a hairline of the sprout's white —
   the negative space in the mark, used as a structural device. */
.ground-cotton + .ground-navy,
.ground-navy + .ground-cotton,
.ground-cotton + .ground-copper,
.ground-copper + .ground-cotton,
.ground-night + .ground-cotton,
.ground-cotton + .ground-night {
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}

/* ---------------- Footer ---------------- */
.site-footer {
  background: rgba(6, 9, 30, 0.95);
  border-top: 1px solid var(--navy-border);
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
  margin-top: auto;
  position: relative;
  z-index: 2;
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-bottom: 3rem;
}

/* The horizontal wordmark is copper on transparent, so unlike the header mark
   it needs no white chip behind it — it sits directly on the footer's navy. */
.footer-logo-link {
  display: inline-block;
  line-height: 0;
}

.footer-logo {
  /* Width-driven, not height-driven, so the cap can rein it in on narrow
     columns while height: auto holds the 881:123 ratio exactly. */
  width: min(var(--brand-mark-max), calc(100% - var(--brand-mark-reserve)));
  max-width: 100%;
  height: auto;
  opacity: 0.95;
  transition: opacity var(--transition-fast);
}

.footer-logo-link:hover .footer-logo,
.footer-logo-link:focus-visible .footer-logo {
  opacity: 1;
}

.footer-brand p {
  font-size: 0.9rem;
  color: var(--text-soft);
  /* Headroom over the measure, not the measure itself: the text renders at its
     natural ~290px and lines up with the logo, but is not sitting exactly on
     its own wrap point. */
  max-width: calc(var(--brand-mark-max) + 2rem);
  margin-top: 1rem;
}

/* Sits directly under the tagline, so it reads as a signature rather than a
   second sentence — tighter leading in, quieter, and the copper mark to tie it
   back to the logo above it. */
.footer-brand p.footer-location {
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.footer-brand p.footer-location::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--copper);
  margin-right: 0.5rem;
  vertical-align: middle;
}

.footer-col-title {
  font-size: var(--footer-title-size);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--copper-light);
  margin-bottom: 1.25rem;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-link {
  font-size: 0.9rem;
  color: var(--text-soft);
  text-decoration: none;
  transition: color var(--transition-fast), transform var(--transition-fast);
  display: inline-block;
}

.footer-link:hover {
  color: var(--copper-light);
  transform: translateX(3px);
}

.footer-social-links {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.icon-circle-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  color: #e8ebf5;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.icon-circle-link:hover {
  color: var(--copper-light);
  border-color: var(--copper-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--copper-glow);
}

.icon-circle-link svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(185, 192, 218, 0.1);
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ---------------- Mobile Menu Drawer ---------------- */
.mobile-drawer {
  position: fixed;
  top: var(--header-height);
  left: 0;
  width: 100%;
  height: calc(100vh - var(--header-height));
  background: rgba(9, 14, 44, 0.98);
  backdrop-filter: blur(20px);
  z-index: 99;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  transform: translateX(-100%);
  transition: transform var(--transition-smooth);
}

.mobile-drawer.open {
  transform: translateX(0);
}

.mobile-nav-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mobile-nav-link {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--text-strong);
  text-decoration: none;
  letter-spacing: 0.05em;
  display: block;
}

.mobile-nav-link.active {
  color: var(--copper-light);
}

/* ---------------- Animations ---------------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-rise {
  animation: rise 0.8s ease-out forwards;
}

.delay-1 { animation-delay: 0.15s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.45s; }

/* ---------------- Responsive Breakpoints ---------------- */
@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
}

/* The nav has to collapse before it gets crushed, not at an arbitrary phone
   width. Below ~900px the five links plus the CTA no longer fit beside the
   wordmark and start wrapping inside the 80px bar. */
@media (max-width: 900px) {
  .nav-links, .nav-actions .btn { display: none; }
  .mobile-menu-btn { display: flex; }

  /* With the nav gone there is a lot of dead space between the wordmark and
     the menu button. Let the brand claim it: the logo fills whatever the
     hamburger does not need, so it reads as the header rather than sitting in
     the corner of it. Capped so it does not balloon on wide tablets. */
  .brand-logo-wrap {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 1rem;
  }

  .site-logo {
    width: 100%;
    max-width: var(--brand-mark-max);
    height: auto;
  }

  /* Keep the tagline inside the mark's width so the brand block has one edge. */
  .footer-brand p {
    max-width: min(var(--brand-mark-max), calc(100% - var(--brand-mark-reserve)));
  }
}

@media (max-width: 768px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

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

/* ---------------- Post List (Updates) ---------------- */
/* Curated cards that link out. The text is real HTML rather than a third-party
   embed, so it loads instantly, matches the site, and is readable by crawlers. */
.post-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 46rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.post-card {
  display: block;
  padding: 1.5rem 1.65rem;
  background: var(--navy-card);
  border: 1px solid var(--navy-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.post-card:hover,
.post-card:focus-visible {
  border-color: var(--copper);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(14, 22, 63, 0.1);
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}

.post-source {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--copper);
}

.post-meta time::before {
  content: '·';
  margin-right: 0.65rem;
}

.post-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: 0.45rem;
  line-height: 1.35;
}

.post-excerpt {
  font-size: 0.95rem;
  margin-bottom: 0.9rem;
}

.post-go {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--copper);
}

.post-go::after {
  content: ' →';
}

/* ---------------- FAQ Accordion ---------------- */
.faq-item {
  border-bottom: 1px solid var(--navy-border);
  padding: 0.25rem 0;
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.05rem 2rem 1.05rem 0;
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--text-strong);
  position: relative;
  transition: color var(--transition-fast);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.35rem;
  font-weight: 300;
  color: var(--copper-light);
  transition: transform var(--transition-normal);
}

.faq-item[open] summary::after {
  content: '−';
}

.faq-item summary:hover,
.faq-item summary:focus-visible {
  color: var(--copper-light);
}

.faq-item p {
  padding: 0 2rem 1.25rem 0;
  margin: 0;
  color: var(--text-soft);
  font-size: 0.95rem;
}

/* ==========================================================================
   Inline links in body copy
   Every other link on the site is styled through a component class, so a bare
   <a> inside a paragraph falls back to the browser default — blue and wrong on
   every ground. This is the one that belongs in running text. It takes its
   colour from --copper, which each ground redefines, so it stays legible on
   cotton, night and copper without a rule per ground.
   ========================================================================== */
.text-link {
  color: var(--copper);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color 0.18s ease;
}

.text-link:hover,
.text-link:focus-visible {
  color: var(--text-strong);
}