/* ========================================
   CUSTOM PROPERTIES
   ======================================== */
:root {
  --color-sage: #7B8B6A;
  --color-sage-btn: #6B795D;   /* AA: white text on a sage button needs 4.5:1 (was 3.65) */
  --color-sage-dark: #5C6B4F;
  --color-sage-light: #A8B098;
  --color-brown: #B07D5B;
  --color-brown-btn: #9A6A4A;  /* AA: white text on a brown button needs 4.5:1 (was 3.54) */
  --color-brown-dark: #8B6344;
  --color-taupe: #8B7D6B;
  --color-cream: #F7F4F0;
  --color-linen: #EDE8E1;
  --color-dark: #2C2C2A;
  --color-ink: #6E4A2F;        /* AA brand brown-dark for small accent text. 8B6344 -> 825C3F (8/10)
                                  -> 6E4A2F (8/13): #825C3F still measured 3.70-4.43 against real
                                  rendered backgrounds sitewide, not just the flat swatches. */
  --color-sage-pale: #E8EFE2;  /* AA-compliant pale sage for small accent text on sage-dark bands (4.9:1) */
  --color-text: #3A3A3A;
  --color-text-light: #545454;  /* 6B6B6B -> 636363 (8/10) -> 545454 (8/13): #636363 measured 3.62-4.43 on real rendered backgrounds. */
  --color-white: #FFFFFF;
  --font-heading: 'Source Sans 3', sans-serif;
  --font-body: 'Source Sans 3', sans-serif;
  --header-height: 88px;
  --topbar-height: 40px;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

  /* Depth pass — warm multi-layer card shadows (warm-tinted, three layers
     for contact / form / ambient elevation). Use --shadow-card on resting
     cards and --shadow-card-hover on hover. */
  --shadow-card:
    0 1px 2px rgba(60, 42, 28, 0.04),
    0 6px 16px rgba(60, 42, 28, 0.06),
    0 24px 48px rgba(60, 42, 28, 0.08);
  --shadow-card-hover:
    0 1px 2px rgba(60, 42, 28, 0.05),
    0 10px 24px rgba(60, 42, 28, 0.08),
    0 36px 72px rgba(60, 42, 28, 0.12);
}

/* ========================================
   DEPTH — bleed shapes
   Soft blurred organic blobs that span section boundaries to break
   the flat-slab feel. Position with negative offsets so they leak
   into adjacent sections.
   ======================================== */
.bleed-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
.bleed-shape--sage    { background: var(--color-sage-light); opacity: 0.22; }
.bleed-shape--brown   { background: var(--color-brown);      opacity: 0.10; }
.bleed-shape--taupe   { background: var(--color-taupe);      opacity: 0.12; }
.bleed-shape--cream   { background: var(--color-cream);      opacity: 0.45; }

@keyframes bleedDriftA { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(20px,-30px) scale(1.05); } }
@keyframes bleedDriftB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-25px,20px) scale(1.06); } }
.bleed-shape--drift-a { animation: bleedDriftA 16s ease-in-out infinite; }
.bleed-shape--drift-b { animation: bleedDriftB 20s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .bleed-shape--drift-a,
  .bleed-shape--drift-b { animation: none; }
}

/* ========================================
   DEPTH — float blobs (animated organic bubbles)
   Adapted from homepage .who-images pattern. Unlike bleed-shape
   (heavily blurred, far background), float-blobs are smaller,
   sharper, organic-shaped, and float with translate + rotate.
   ======================================== */
.float-blob {
  position: absolute;
  pointer-events: none;
  border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%;
  z-index: 0;
  will-change: transform;
}
.float-blob--sage  { background: var(--color-sage-light); opacity: 0.20; }
.float-blob--brown { background: var(--color-brown);      opacity: 0.12; }
.float-blob--taupe { background: var(--color-taupe);      opacity: 0.14; }
.float-blob--cream { background: var(--color-cream);      opacity: 0.40; }
.float-blob--shape-2 { border-radius: 40% 60% 50% 50% / 60% 40% 50% 50%; }
.float-blob--shape-3 { border-radius: 50% 50% 60% 40% / 40% 60% 50% 50%; }
.float-blob--anim-1 { animation: floatBlob1 8s ease-in-out infinite; }
.float-blob--anim-2 { animation: floatBlob2 10s ease-in-out infinite; }
.float-blob--anim-3 { animation: floatBlob3 9s ease-in-out infinite; }
@keyframes floatBlob1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(10px, -15px) rotate(5deg); }
}
@keyframes floatBlob2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(-8px, 12px) rotate(-4deg); }
}
@keyframes floatBlob3 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(12px, 8px) rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .float-blob--anim-1,
  .float-blob--anim-2,
  .float-blob--anim-3 { animation: none; }
}

/* ========================================
   RESET & BASE
   ======================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-cream);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }

/* ========================================
   ACCESSIBILITY
   ======================================== */
/* Visible keyboard focus indicator — WCAG 2.4.7 */
:focus-visible {
  outline: 3px solid var(--color-brown);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Hide the ring for mouse/touch users on browsers that support :focus-visible */
:focus:not(:focus-visible) { outline: none; }
/* High-contrast white ring on dark surfaces */
.mobile-nav a:focus-visible,
.mobile-toggle:focus-visible,
.mobile-nav-cta a:focus-visible,
.modal__close:focus-visible,
.site-footer a:focus-visible,
.cta-band a:focus-visible { outline-color: #FFFFFF; }

/* Skip-to-content link — WCAG 2.4.1 */
.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 5000;
  background: var(--color-sage-dark);
  color: #FFFFFF !important;
  padding: 12px 22px;
  border-radius: 0 0 10px 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid #FFFFFF;
  outline-offset: -3px;
}

/* Screen-reader-only utility */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Keyboard-accessible dropdowns — open on keyboard focus, not just hover (WCAG 2.1.1) */
.nav-dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ========================================
   TEXTURES
   ======================================== */
.texture-linen::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect width='6' height='6' fill='%23000' opacity='0.015'/%3E%3Crect x='0' y='0' width='1' height='1' fill='%23000' opacity='0.04'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%23000' opacity='0.03'/%3E%3Crect x='1' y='4' width='1' height='1' fill='%23000' opacity='0.035'/%3E%3Crect x='4' y='1' width='1' height='1' fill='%23000' opacity='0.025'/%3E%3Crect x='5' y='5' width='1' height='1' fill='%23000' opacity='0.03'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%23000' opacity='0.02'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}
.texture-grain::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.09'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  pointer-events: none;
  z-index: 1;
}
/* Subtle dot grid — for white/light sections (homepage services pattern) */
.texture-dots::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='14' cy='14' r='1' fill='%237B8B6A' fill-opacity='0.08'/%3E%3C/svg%3E");
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

/* ========================================
   SCROLL ANIMATIONS
   ======================================== */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.1s var(--ease-out-expo), transform 1.1s var(--ease-out-expo);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.15s; }
.reveal-delay-2 { transition-delay: 0.3s; }
.reveal-delay-3 { transition-delay: 0.45s; }
.reveal-delay-4 { transition-delay: 0.6s; }
.reveal-delay-5 { transition-delay: 0.75s; }
.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 1.2s var(--ease-out-expo), transform 1.2s var(--ease-out-expo);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 1.2s var(--ease-out-expo), transform 1.2s var(--ease-out-expo);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* ========================================
   FLIP-IN ENTRANCE
   ======================================== */
.flip-card {
  opacity: 0;
  transform: perspective(800px) rotateY(90deg);
  transition: none;
}
.flip-card.flip-in {
  animation: flipInY 1.2s ease forwards;
}
.flip-card.flip-in-delay-1 { animation-delay: 0.15s; }
.flip-card.flip-in-delay-2 { animation-delay: 0.3s; }
.flip-card.flip-in-delay-3 { animation-delay: 0.45s; }
.flip-card.flip-in-delay-4 { animation-delay: 0.6s; }
@keyframes flipInY {
  0% { opacity: 0; transform: perspective(800px) rotateY(90deg); }
  40% { opacity: 1; transform: perspective(800px) rotateY(-15deg); }
  70% { transform: perspective(800px) rotateY(10deg); }
  100% { opacity: 1; transform: perspective(800px) rotateY(0deg); }
}

/* ========================================
   SECTION LABEL
   ======================================== */
.section-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink); /* a11y: was --color-sage (3.7:1 fail) */
  margin-bottom: 16px;
}

/* ========================================
   TOP BAR
   ======================================== */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  height: var(--topbar-height);
  background: var(--color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 1400px;
  width: 100%;
  padding: 0 48px;
}
.topbar__locations { display: flex; align-items: center; gap: 8px; }
.topbar__loc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.75);
  transition: color 0.2s ease;
}
.topbar__loc:hover { color: var(--color-white); }
.topbar__loc svg { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.6; }
.topbar__divider { width: 1px; height: 14px; background: rgba(255,255,255,0.2); margin: 0 8px; }
/* Shop Online lives in the TOPBAR, not the nav row. It was a pill in .nav-links, but the
   desktop nav needs 1294px (nav 1025 + logo 269) and only has min(vw-96,1400) available,
   so it wrapped at 1100-1366 - the most common laptop widths. Moving this link out frees
   its pill + one 36px gap. Brees' call. The mobile drawer keeps its own Shop Online link,
   and the topbar is display:none below 1025, so nothing is lost on mobile. */
.topbar__shop {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-white);
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: opacity 0.2s ease;
}
.topbar__shop:hover { opacity: 0.75; }
.topbar__shop svg { width: 12px; height: 12px; flex-shrink: 0; }
.topbar__divider--right { margin: 0 14px; }
.topbar__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-white); /* a11y: was --color-brown (3.95:1 fail on dark topbar) */
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: color 0.2s ease;
}
.topbar__phone:hover { color: var(--color-white); }
.topbar__phone svg { width: 15px; height: 15px; }

/* ========================================
   HEADER / NAV
   ======================================== */
.site-header {
  position: fixed;
  top: var(--topbar-height);
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--header-height);
  display: flex;
  align-items: center;
  padding: 0 48px;
  background: var(--color-white);
  box-shadow: 0 2px 20px rgba(0,0,0,0.06);
  transition: height 0.4s ease;
}
.site-header.scrolled { height: 64px; }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
.header-logo img { height: 72px; width: auto; transition: height 0.4s ease; }
.site-header.scrolled .header-logo img { height: 52px; }
.nav-links { display: flex; align-items: center; gap: 36px; list-style: none; }
.nav-links a {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
  transition: color 0.3s ease, opacity 0.3s ease;
  position: relative;
}
.nav-links a:hover { opacity: 0.7; }
.nav-disabled { opacity: 0.4; pointer-events: none; cursor: default; }
.nav-links > li > a:not(.nav-cta-btn)::before {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-sage);
  transition: width 0.3s var(--ease-out-expo);
}
.nav-links > li > a:not(.nav-cta-btn):hover::before,
.nav-links > li > a:not(.nav-cta-btn).active::before { width: 100%; }
.nav-dropdown > a:hover::before,
.nav-dropdown > a.active::before { width: calc(100% - 14px) !important; }
.nav-dropdown { position: relative; }
.nav-dropdown > a::after {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  margin-left: 6px;
  vertical-align: middle;
}
.dropdown-menu {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--color-white);
  border-radius: 12px;
  padding: 16px 8px;
  min-width: 220px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.12);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  /* Grace period before closing, so travelling diagonally toward an item
     doesn't snap the menu shut. Cancelled while hovered/focused (below). */
  transition-delay: 0.18s;
  list-style: none;
}
/* Hover bridge. The menu sits 16px below the nav label, and that gap belongs
   to neither element — crossing it drops :hover on .nav-dropdown and the menu
   closes before the pointer arrives. This invisible strip spans the gap and,
   being a child of .nav-dropdown, keeps the hover chain unbroken. */
.dropdown-menu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 18px;
}
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
  transition-delay: 0s;
}
.nav-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.dropdown-menu a {
  display: block;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text) !important;
  border-radius: 8px;
  transition: background 0.2s ease;
}
.dropdown-menu a:hover { background: var(--color-cream); opacity: 1; }
.dropdown-menu a::after { display: none; }
.nav-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-sage-btn);
  color: var(--color-white) !important;
  padding: 12px 24px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: background 0.3s ease, transform 0.2s ease;
}
.nav-cta-btn:hover { background: var(--color-sage-dark); transform: translateY(-1px); opacity: 1 !important; }
.nav-shop-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-brown-btn);
  color: var(--color-white) !important;
  padding: 12px 20px;
  border-radius: 100px;
  border: 1.5px solid var(--color-brown);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}
.nav-shop-btn:hover {
  background: var(--color-brown-dark);
  border-color: var(--color-brown-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(176, 125, 91, 0.35);
  opacity: 1 !important;
}
.nav-shop-btn svg { width: 12px; height: 12px; }
/* Suppress the default nav underline for the shop button */
.nav-links > li > a.nav-shop-btn::before { display: none; }
.mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 28px;
  cursor: pointer;
  z-index: 1001;
}
.mobile-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.mobile-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ========================================
   MOBILE NAV
   ======================================== */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--color-dark);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 96px 24px 48px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.mobile-nav.open { opacity: 1; visibility: visible; }
.mobile-nav-links {
  list-style: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mobile-nav-links a {
  font-family: var(--font-heading);
  font-size: 32px;
  color: var(--color-white);
  display: block;
  padding: 12px 0;
  transition: opacity 0.3s ease;
}
.mobile-nav-links a:hover { opacity: 0.6; }
.mobile-nav-links .mobile-sub {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  color: rgba(255,255,255,0.5);
  padding: 6px 0;
}
.mobile-nav-cta { margin-top: 40px; }
.mobile-nav-cta a {
  display: inline-flex;
  padding: 16px 36px;
  background: var(--color-sage);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 100px;
}

/* ========================================
   HERO — Split Editorial (shared layout)
   ======================================== */
.team-hero {
  display: flex;
  min-height: calc(100vh - var(--topbar-height) - var(--header-height));
  position: relative;
  overflow: hidden;
  margin-top: calc(var(--topbar-height) + var(--header-height));
}

/* Image/video side */
.team-hero__video-side {
  position: relative;
  width: 55%;
  flex-shrink: 0;
  overflow: hidden;
  background-color: #1a1a1a;
}
.team-hero__video-side video,
.team-hero__video-side img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team-hero__video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.1);
  pointer-events: none;
  z-index: 1;
}
.team-hero__video-vignette {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 120px;
  background: rgba(92, 107, 79, 0.6);
  mask-image: linear-gradient(to left, black, transparent);
  -webkit-mask-image: linear-gradient(to left, black, transparent);
  pointer-events: none;
  z-index: 2;
}

/* Text side */
.team-hero__text-side {
  position: relative;
  width: 45%;
  background: var(--color-sage-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 70px;
  overflow: hidden;
}
.team-hero__text-side::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}

/* Topographic contour lines */
.team-hero__contours {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.team-hero__contours svg {
  width: 100%;
  height: 100%;
}
.contour-line {
  fill: none;
  stroke: var(--color-sage-light);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contour-1 {
  stroke-width: 1.2;
  opacity: 0.1;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: drawContour 2.5s ease-out 1s forwards;
}
.contour-2 {
  stroke-width: 1;
  opacity: 0.08;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: drawContour 3s ease-out 1.3s forwards;
}
.contour-3 {
  stroke-width: 1.5;
  opacity: 0.1;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawContour 2.8s ease-out 1.6s forwards;
}
.contour-4 {
  stroke-width: 1;
  opacity: 0.12;
  stroke-dasharray: 750;
  stroke-dashoffset: 750;
  animation: drawContour 3.5s ease-out 1.2s forwards;
}
@keyframes drawContour {
  to { stroke-dashoffset: 0; }
}

/* Trail line */
.team-hero__trail {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.team-hero__trail svg {
  width: 100%;
  height: 100%;
}
.trail-path {
  fill: none;
  stroke: var(--color-brown);
  stroke-width: 1.2;
  opacity: 0.15;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: drawTrail 3s ease-in-out 2s forwards;
}
@keyframes drawTrail {
  to { stroke-dashoffset: 0; }
}

/* Hero text content */
.team-hero__content {
  position: relative;
  z-index: 10;
  max-width: 480px;
}
.team-hero__rule {
  width: 0;
  height: 2px;
  background: var(--color-brown);
  margin-bottom: 20px;
  animation: growRule 0.6s ease-out 0.3s forwards;
}
@keyframes growRule {
  to { width: 60px; }
}
.team-hero__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #F0F4EC; /* a11y 8/10: was sage-light (2.29:1 on the dark sage hero photo) */
  margin-bottom: 16px;
  opacity: 0;
  transform: translateX(30px);
  animation: heroSlideIn 0.7s ease-out 0.5s forwards;
}
.team-hero__heading {
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--color-white);
  margin-bottom: 20px;
  opacity: 0;
  transform: translateX(30px);
  animation: heroSlideIn 0.7s ease-out 0.7s forwards;
}
.team-hero__subtitle {
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-white); /* a11y 8/13: was .7 = 3.08-3.62 on the hero photo, 20 instances sitewide */
  max-width: 420px;
  opacity: 0;
  transform: translateX(30px);
  animation: heroSlideIn 0.7s ease-out 0.9s forwards;
}
@keyframes heroSlideIn {
  to { opacity: 1; transform: translateX(0); }
}

/* The seam */
.hero-seam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 55%;
  width: 0;
  z-index: 20;
  pointer-events: none;
}
.hero-seam__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: rgba(255,255,255,0.08);
  opacity: 0;
  animation: seamFadeIn 1s ease-out 1s forwards;
}
.hero-seam__shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(30px);
  opacity: 0;
}
.hero-seam__shape--1 {
  width: 100px;
  height: 100px;
  background: var(--color-sage);
  top: 18%;
  left: -50px;
  animation: seamFadeIn 1.2s ease-out 1s forwards, seamDriftA 12s ease-in-out infinite 1s;
}
.hero-seam__shape--2 {
  width: 70px;
  height: 70px;
  background: var(--color-brown);
  top: 52%;
  left: -35px;
  animation: seamFadeIn 1.2s ease-out 1.2s forwards, seamDriftB 15s ease-in-out infinite 1.2s;
}
.hero-seam__shape--3 {
  width: 90px;
  height: 90px;
  background: var(--color-taupe);
  top: 78%;
  left: -45px;
  animation: seamFadeIn 1.2s ease-out 1.4s forwards, seamDriftC 18s ease-in-out infinite 1.4s;
}
@keyframes seamFadeIn {
  to { opacity: 1; }
}
@keyframes seamDriftA {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(12px, -18px); }
}
@keyframes seamDriftB {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-15px, 12px); }
}
@keyframes seamDriftC {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(10px, -10px); }
}

/* ========================================
   CTA BAND
   ======================================== */
.cta-band {
  position: relative;
  padding: 150px 48px;
  text-align: center;
  overflow: hidden;
}
.cta-band__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cta-band__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
.cta-band__overlay {
  position: absolute;
  inset: 0;
  background: rgba(44, 44, 42, 0.65);
  z-index: 1;
}
.cta-band__content { position: relative; z-index: 2; }
.cta-band h2 {
  font-size: clamp(30px, 4vw, 44px);
  color: var(--color-white);
  margin-bottom: 16px;
}
.cta-band p {
  font-size: 18px;
  color: var(--color-white);
  margin-bottom: 40px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 300;
  line-height: 1.6;
}
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 40px;
  background: var(--color-sage-btn);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 100px;
  transition: all 0.3s ease;
}
.btn-cta:hover {
  background: var(--color-sage-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(92, 107, 79, 0.3);
}

/* ========================================
   MODAL OVERLAY & PANEL
   ======================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(44, 44, 42, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.modal-overlay.open { opacity: 1; visibility: visible; }

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2001;
  width: 520px;
  max-width: 90vw;
  background: var(--color-white);
  transform: translateX(100%);
  transition: transform 0.5s var(--ease-out-expo);
  overflow-y: auto;
  box-shadow: -20px 0 60px rgba(0,0,0,0.15);
}
.modal.open { transform: translateX(0); }

.modal__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background 0.2s ease;
}
.modal__close:hover { background: var(--color-linen); }
.modal__close svg { width: 20px; height: 20px; color: var(--color-text); }

.modal__photo {
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
}
.modal__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.modal__body {
  padding: 36px 40px 48px;
}
.modal__role {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink); /* a11y: was --color-brown (3.5:1 fail) */
  margin-bottom: 8px;
}
.modal__name {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 24px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.modal__bio p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text);
  margin-bottom: 16px;
  font-weight: 400;
}
.modal__personal {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--color-linen);
}
.modal__personal p {
  font-size: 15px;
  color: var(--color-text-light);
  font-style: italic;
  line-height: 1.7;
}

/* ========================================
   FOOTER
   ======================================== */
.site-footer {
  background: var(--color-dark);
  color: rgba(255,255,255,0.6);
  padding: 80px 48px 40px;
  position: relative;
}
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand img { height: 48px; width: auto; margin-bottom: 20px; filter: brightness(10); }
.footer-brand p { font-size: 14px; line-height: 1.7; max-width: 280px; color: rgba(255,255,255,0.5); }
.footer-col h4 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-cream); /* a11y: was --color-brown (3.95:1 fail on dark footer) */
  margin-bottom: 20px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 12px; }
.footer-col a {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  transition: color 0.3s ease;
  position: relative;
}
.footer-col a:hover { color: var(--color-white); }
.footer-col a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-sage-light);
  transition: width 0.3s var(--ease-out-expo);
}
.footer-col a:hover::after { width: 100%; }
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 14px;
}
.footer-contact-item svg { width: 16px; height: 16px; color: var(--color-sage-light); flex-shrink: 0; margin-top: 3px; }
.footer-social { display: flex; gap: 12px; margin-top: 24px; }
.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
  transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.footer-social a::after { display: none; }
.footer-social a:hover { background: var(--color-sage); color: var(--color-white); transform: translateY(-2px); }
.footer-social svg { width: 18px; height: 18px; }
.footer-emergency {
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 16px 24px;
  margin-top: 24px;
  font-size: 13px;
}
.footer-emergency a { color: var(--color-sage-light); text-decoration: underline; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  font-size: 13px;
}
.footer-credit a { color: rgba(255,255,255,0.52); transition: color 0.3s ease; }
.footer-credit a:hover { color: var(--color-sage-light); }

/* ========================================
   RESPONSIVE — Shared components
   ======================================== */
/* ---- NAV FIT (measured, do not guess these numbers) ----------------------------
   The desktop nav needs 1108px: nav 839 + logo 269. Available is min(vw - 96, 1400).
   That leaves a deficit of 179px at 1025, 104 at 1100, 4 at 1200, and fits from 1280.
   So: hamburger below 1100 (it cannot fit there even tightened), a tightened tier
   from 1100-1399, and the >=1400 design untouched - that is what Mary reviewed.
   These nav rules are deliberately NOT in the 1024 block below, which restructures
   the team hero and footer and must keep its own breakpoint. */
@media (max-width: 1099px) {
  .topbar { display: none; }
  .site-header { top: 0; }
  .nav-links { display: none; }
  .mobile-toggle { display: flex; }
}
@media (min-width: 1100px) and (max-width: 1399px) {
  .nav-links { gap: 22px; }
  .nav-links a { font-size: 13px; }
  .header-logo img { height: 62px; }
  .site-header.scrolled .header-logo img { height: 46px; }
  .nav-cta-btn { padding: 11px 18px; }
}

@media (max-width: 1024px) {
  .site-header { padding: 0 24px; }
  .team-hero { flex-direction: column; min-height: auto; margin-top: var(--header-height); }
  .team-hero__video-side { width: 100%; height: 45vh; min-height: 280px; }
  .team-hero__video-vignette { display: none; }
  .team-hero__text-side { width: 100%; padding: 48px 28px 56px; }
  .team-hero__heading { font-size: clamp(30px, 7vw, 42px); }
  .team-hero__trail { display: none; }
  .contour-2, .contour-4 { display: none; }
  .hero-seam { top: auto; left: 0; right: 0; width: 100%; height: 0; top: 45vh; }
  .hero-seam__line { width: 100%; height: 1px; top: 0; left: 0; right: 0; bottom: auto; }
  .hero-seam__shape--1 { top: -40px; left: 15%; width: 70px; height: 70px; }
  .hero-seam__shape--2 { top: -30px; left: 50%; width: 50px; height: 50px; }
  .hero-seam__shape--3 { top: -35px; left: 80%; width: 60px; height: 60px; }
  .cta-band { padding: 110px 24px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .site-footer { padding: 60px 24px 32px; }
}
@media (max-width: 640px) {
  .cta-band { padding: 88px 20px; }
  .site-footer { padding: 60px 20px 32px; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .modal { width: 100%; max-width: 100vw; }
}

/* ========================================
   REDUCED MOTION — Shared animations
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; }
  .flip-card { opacity: 1; transform: none; }
  .contour-1, .contour-2, .contour-3, .contour-4 { stroke-dashoffset: 0; animation: none; }
  .trail-path { stroke-dashoffset: 0; animation: none; }
  .team-hero__rule { width: 60px; animation: none; }
  .team-hero__label, .team-hero__heading, .team-hero__subtitle { opacity: 1; transform: none; animation: none; }
  .hero-seam__line { opacity: 1; animation: none; }
  .hero-seam__shape--1 { opacity: 0.18; animation: none; }
  .hero-seam__shape--2 { opacity: 0.14; animation: none; }
  .hero-seam__shape--3 { opacity: 0.16; animation: none; }
}

/* Booking widget must not float over the open mobile menu */
body.menu-open #televet-widget-iframe,
body.menu-open [id*="otto"],
body.menu-open [class*="televet"] { display: none !important; }

/* While the drawer is open the header stays on top of it, so list items scrolled
   past it showed THROUGH the logo area. Make the header opaque and match the drawer. */
body.menu-open .site-header { background: var(--color-dark); box-shadow: none; }