/* Stryde Partners — shared styles */

/* ---------- Self-hosted Inter (from the deck font kit) ---------- */
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Brand tokens (from deck palette) ---------- */
:root {
  --navy:        #0a2540;   /* primary brand navy (matches logo) */
  --navy-deep:   #061829;   /* footer */
  --navy-mid:    #17375E;   /* deck primary blue */
  --blue-accent: #376092;   /* hover / accent (from deck) */
  --blue-light:  #95B3D7;   /* subtle highlight */
  --sage:        #73A998;   /* deck sage — used for industries accent */
  --cream:       #EDF1F4;   /* primary background (cool light gray) */
  --cream-2:     #E5E7EB;   /* tint sections */
  --paper:       #EDF1F4;
  --ink:         #0a2540;
  --ink-soft:    #2c3a55;
  --muted:       #5a6a85;
  --hairline:    rgba(10,37,64,0.14);
  --accent:      #5b7fa6;   /* restrained slate-blue accent */

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --maxw: 1140px;
  --content-maxw: 720px;
  --pad-x: clamp(24px, 5vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ---------- Typography (all Inter) ---------- */
h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.08;
  margin: 0 0 0.6em;
  color: var(--ink);
}
h1 { font-size: clamp(2.4rem, 5.2vw, 4.2rem); font-weight: 500; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); font-weight: 500; }
h3 { font-size: clamp(1.4rem, 2vw, 1.7rem); font-weight: 500; }
h4 { font-size: clamp(1.05rem, 1.3vw, 1.2rem); font-weight: 500; }

p { margin: 0 0 1.1rem; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* ---------- Eyebrow label ---------- */
.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--blue-accent);
  font-weight: 500;
  margin-bottom: 1.4rem;
  display: inline-block;
}
section.dark .eyebrow { color: var(--blue-light); }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.2rem 0;
  background: #17375e;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(244,237,224,0.08);
  transition: padding 0.3s ease, background 0.3s ease;
}
.nav.scrolled { padding: 0.7rem 0; background: #17375e; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }

.brand {
  display: inline-flex; align-items: center;
  transition: opacity 0.2s ease;
}
.brand:hover { opacity: 0.85; }
.brand img.logo { height: 48px; width: auto; display: block; }
.nav.scrolled .brand img.logo { height: 40px; }
@media (max-width: 600px) {
  .brand img.logo { height: 36px; }
  .nav.scrolled .brand img.logo { height: 32px; }
}

.nav-links { display: flex; gap: 2.2rem; align-items: center; }
.nav-links a {
  color: var(--cream);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.78;
  transition: opacity 0.2s ease, color 0.2s ease;
  position: relative;
}
.nav-links a:hover { opacity: 1; color: var(--blue-light); }
.nav-links a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 1px;
  background: var(--blue-light);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(.2,.7,.3,1);
}
.nav-links a:not(.nav-cta):hover::after { transform: scaleX(1); }
.nav-cta {
  padding: 0.55rem 1.2rem;
  border: 1px solid rgba(244,237,224,0.35);
  opacity: 1 !important;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.nav-cta:hover { background: var(--cream); color: var(--navy) !important; border-color: var(--cream); }

.nav-toggle {
  display: none;
  background: transparent; border: none;
  color: var(--cream); cursor: pointer; padding: 0.5rem;
}
.nav-toggle svg { width: 24px; height: 24px; }
@media (max-width: 860px) {
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--navy);
    flex-direction: column; align-items: flex-start;
    padding: 1.8rem var(--pad-x); gap: 1.4rem;
    transform: translateY(-150%);
    transition: transform 0.3s ease;
    border-bottom: 1px solid rgba(244,237,224,0.08);
  }
  .nav-links.open { transform: translateY(0); }
  .nav-toggle { display: block; }
}

/* ---------- Hero with background image + parallax ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center;
  overflow: hidden;
  color: var(--cream);
  isolation: isolate;
  padding: 6.5rem 0 3.5rem;
}
  .hero .hero-bg {
  position: absolute; inset: -10% 0;
  background-image: url("hero-bg.png");
  background-size: cover;
  background-position: center 40%;
  z-index: -2;
  transform: scale(1.06);
  will-change: transform;
  /* slow ken-burns zoom */
  animation: heroZoom 22s ease-in-out infinite alternate;
  }
  /* When JS-driven parallax is active, it owns the transform (no ken-burns conflict) */
  .hero .hero-bg.parallax { animation: none; }
.hero .hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,37,64,0.86) 0%, rgba(10,37,64,0.78) 50%, rgba(10,37,64,0.92) 100%),
    linear-gradient(90deg, rgba(10,37,64,0.6) 0%, rgba(10,37,64,0.3) 100%);
  z-index: -1;
}
@keyframes heroZoom {
  0%   { transform: scale(1.0)  translate(0, 0); }
  100% { transform: scale(1.08) translate(-1.5%, -1%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero .hero-bg { animation: none; }
}
.hero-mantra {
  font-size: 0.74rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(244,237,224,0.7);
  font-weight: 500;
  margin-bottom: 1.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}
.hero-mantra::before {
  content: ""; display: inline-block;
  width: 24px; height: 1px; background: var(--blue-light);
}
.hero h1 {
  color: var(--cream);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  letter-spacing: -0.022em;
  margin-bottom: 1.4rem;
  max-width: 920px;
}
.hero .lede {
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  color: rgba(244,237,224,0.78);
  max-width: 880px;
  margin: 0 0 2.2rem;
  line-height: 1.55;
}
.hero .scroll-cue {
  position: absolute; bottom: 2.5rem; left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(244,237,224,0.5);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  animation: scrollPulse 2.4s ease-in-out infinite;
  text-decoration: none;
  transition: color 0.25s ease;
}
.hero .scroll-cue:hover { color: rgba(244,237,224,0.95); }
.hero .scroll-cue::after {
  content: ""; width: 1px; height: 28px; background: rgba(244,237,224,0.4);
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.4; transform: translateX(-50%) translateY(0); }
  50%      { opacity: 0.9; transform: translateX(-50%) translateY(4px); }
}

/* Staggered hero entrance on load */
@media (prefers-reduced-motion: no-preference) {
  .hero-mantra, .hero h1, .hero .lede {
    opacity: 0;
    animation: heroRise 0.9s cubic-bezier(.16,.84,.44,1) forwards;
  }
  .hero-mantra { animation-delay: 0.15s; }
  .hero h1     { animation-delay: 0.32s; }
  .hero .lede  { animation-delay: 0.5s; }
}
@keyframes heroRise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Hero valuation CTA card ---------- */
.hero-valuation-card {
  position: absolute;
  bottom: clamp(1.5rem, 4vh, 2.75rem);
  right: clamp(1.5rem, 4vw, 3rem);
  z-index: 2;
  width: 262px;
  max-width: calc(100vw - 2 * var(--pad-x));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 1.2rem 1.3rem;
  background: rgba(244,237,224,0.07);
  border: 1px solid rgba(244,237,224,0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(10,37,64,0.28);
  transition: transform 0.4s cubic-bezier(.2,.7,.3,1), border-color 0.4s ease, background 0.4s ease;
}
.hvc-eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--blue-light);
  font-weight: 500;
}
.hvc-heading {
  font-size: 1.2rem;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--cream);
}
.hvc-button {
  margin-top: 0.6rem;
  align-self: stretch;
  text-align: center;
  padding: 0.6rem 1rem;
  background: var(--cream);
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 0.25s ease, color 0.25s ease;
}
.hvc-button span { transition: transform 0.25s ease; display: inline-block; }
@media (hover: hover) {
  .hero-valuation-card:hover {
    transform: translateY(-3px);
    border-color: rgba(244,237,224,0.4);
    background: rgba(244,237,224,0.12);
  }
  .hero-valuation-card:hover .hvc-button { background: var(--blue-light); color: var(--cream); }
  .hero-valuation-card:hover .hvc-button span { transform: translateX(4px); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-valuation-card {
    opacity: 0;
    animation: heroRise 0.9s cubic-bezier(.16,.84,.44,1) 0.68s forwards;
  }
}
/* Mobile: let the card flow under the hero text instead of floating */
@media (max-width: 860px) {
  .hero { flex-direction: column; justify-content: center; padding-bottom: 3rem; }
  .hero-valuation-card {
    position: static;
    width: 100%;
    max-width: 100%;
    margin-top: 2.25rem;
    align-self: stretch;
  }
  .hero .container { width: 100%; }
  /* The card anchors the bottom of the hero on mobile, so the decorative
     scroll cue would collide with it — hide it on small screens. */
  .hero .scroll-cue { display: none; }
}

/* ---------- Sections ---------- */
section { padding: clamp(4.5rem, 9vw, 8rem) 0; }
section.dark { background: var(--navy); color: var(--cream); }
section.dark h2, section.dark h3, section.dark h4 { color: var(--cream); }
section.tint { background: var(--cream-2); }

.section-head {
  margin-bottom: 3rem;
}

.section-head .label {
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--blue-accent);
  font-weight: 500;
  padding-top: 0.4rem;
}
.section-head .head-content h2 { margin: 0 0 0.7rem; }
.section-head .head-content p {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 640px;
  line-height: 1.55;
  margin: 0;
}
section.dark .section-head .label { color: var(--blue-light); }
section.dark .section-head .head-content p { color: rgba(244,237,224,0.72); }

/* ---------- Why founders section + value pillars ---------- */
#why {
  padding: clamp(4.5rem, 9vw, 8rem) 0 clamp(1.8rem, 3vw, 2.6rem);
}
#why .section-head { max-width: 920px; }
.why-copy { max-width: 820px; }
.why-copy p {
  font-size: clamp(1.05rem, 1.35vw, 1.18rem);
  color: var(--ink-soft);
  line-height: 1.65;
  margin: 0 0 1.4rem;
}
.why-transition {
  font-size: 0.86rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--blue-accent);
  font-weight: 500;
  line-height: 1.4;
  margin: 2rem 0 1.4rem;
  display: inline-block;
}
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 960px) { .pillar-grid { grid-template-columns: 1fr; } }
.pillar-card {
  padding: 1.8rem 1.9rem;
  background: var(--cream-2);
  border: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.4s cubic-bezier(.2,.7,.3,1), border-color 0.4s ease, box-shadow 0.4s ease;
}
.pillar-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.45s cubic-bezier(.2,.7,.3,1);
}
@media (hover: hover) {
  .pillar-card:hover {
    transform: translateY(-4px);
    border-color: rgba(91,127,166,0.4);
    box-shadow: 0 8px 24px rgba(10,37,64,0.07);
  }
  .pillar-card:hover::before { transform: scaleY(1); }
}
.pillar-num {
  font-size: clamp(1.9rem, 2.6vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--sage);
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}
.pillar-card h3 {
  font-size: clamp(1.2rem, 1.6vw, 1.38rem);
  margin: 0 0 0.7rem;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.pillar-card p {
  font-size: 0.96rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}

/* ---------- Firm section (timeline with connected icons) ---------- */
#firm {
  padding: clamp(1.5rem, 2.5vw, 2.2rem) 0 clamp(2.5rem, 4vw, 3.5rem);
}

.firm-lead {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0 0 1rem;
  max-width: 100%;
}

.firm-tagline {
  font-style: italic;
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  color: var(--blue-accent);
  line-height: 1.55;
  margin: 0 0 2.2rem;
  max-width: 100%;
}

/* Timeline container */
.firm-timeline {
  position: relative;
  display: grid;
  gap: 1.8rem;
  max-width: 900px;
}

.firm-signoff {
  margin: 2.4rem 0 0;
  font-style: italic;
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.55;
  color: var(--blue-accent);
}

/* Vertical dashed connecting line */
.firm-timeline-line {
  position: absolute;
  left: 24px;
  top: 24px;
  bottom: 24px;
  width: 0;
  border-left: 1px dashed var(--sage);
  opacity: 0.5;
  transform: translateX(-0.5px);
}

/* Individual point */
.firm-point {
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

.firm-point-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border: 1px solid var(--sage);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  margin-top: 0.35rem;
}

.firm-point-icon svg {
  width: 22px;
  height: 22px;
  color: var(--sage);
}

.firm-point p {
  font-size: 0.98rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
  padding-top: 0.4rem;
  max-width: 800px;
}

/* ---------- Capabilities (3 non-clickable cards, blue hover) ---------- */
#capabilities {
  padding-bottom: clamp(7rem, 12vw, 10rem);
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 960px) { .svc-grid { grid-template-columns: 1fr; } }
.svc-card {
  padding: 2.5rem 2rem 2.2rem;
  background: var(--cream);
  border: 1px solid var(--hairline);
  transition: all 0.3s cubic-bezier(.2,.7,.3,1);
  display: flex; flex-direction: column;
  min-height: 260px;
  cursor: default;
}
.svc-card:hover {
  background: var(--sage);
  color: var(--cream);
  border-color: var(--sage);
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(10,37,64,0.08);
}
.svc-card .svc-num {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 1.2rem;
  transition: color 0.3s ease;
}
.svc-card:hover .svc-num { color: rgba(244,237,224,0.7); }
.svc-card h3 {
  font-size: clamp(1.4rem, 1.9vw, 1.7rem);
  margin: 0 0 0.7rem;
  font-weight: 500;
  color: inherit;
  letter-spacing: -0.012em;
}
.svc-card p {
  color: var(--muted);
  font-size: 0.98rem;
  margin: 0;
  flex-grow: 1;
  line-height: 1.55;
  transition: color 0.3s ease;
}
.svc-card:hover p { color: rgba(244,237,224,0.85); }
.svc-card .soon-flag {
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--hairline);
  padding: 4px 10px;
  display: inline-block; width: max-content;
  margin-top: 1.2rem;
  transition: all 0.3s ease;
}
.svc-card:hover .soon-flag {
  color: var(--cream);
  border-color: rgba(244,237,224,0.5);
}

/* ---------- Industries (modern tag/pill layout) ---------- */
.ind-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
@media (max-width: 760px) { .ind-grid { grid-template-columns: 1fr; } }

.ind-card {
  padding: 2.4rem 2rem;
  background: var(--cream);
  border: 1px solid var(--hairline);
  transition: all 0.3s cubic-bezier(.2,.7,.3,1);
  display: flex; 
  flex-direction: column; 
  gap: 1.4rem;
}
.ind-card:hover {
  border-color: var(--sage);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(10,37,64,0.08);
}

.ind-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ind-icon {
  width: 28px;
  height: 28px;
  color: var(--sage);
  flex-shrink: 0;
}

.ind-card h3 {
  font-size: clamp(1.3rem, 1.8vw, 1.5rem);
  margin: 0;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.ind-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.ind-tag {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: rgba(10,37,64,0.04);
  border: 1px solid var(--hairline);
  font-size: 0.85rem;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
  transition: all 0.25s ease;
}

.ind-card:hover .ind-tag {
  background: rgba(115,169,152,0.08);
  border-color: rgba(115,169,152,0.25);
}

.ind-tag-other {
  background: transparent;
  border-style: dashed;
  color: var(--muted);
  cursor: pointer;
}
.ind-tag-other:hover {
  color: var(--blue-accent);
  border-color: var(--blue-accent);
}

.ind-note {
  text-align: center;
  margin: 2.4rem auto 0;
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.55;
}
.ind-note a {
  color: var(--blue-accent);
  border-bottom: 1px solid currentColor;
  transition: color 0.2s ease;
}
.ind-note a:hover { color: var(--ink); }

/* ---------- Team ---------- */
.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 760px) { .team-grid { grid-template-columns: 1fr; gap: 3.5rem; } }
.team-solo {
  max-width: 1080px;
  margin: clamp(2.5rem, 6vw, 5rem) auto 0;
  display: flex;
  justify-content: center;
}
.team-solo .person {
  width: calc(50% - clamp(1.25rem, 3vw, 2.5rem));
}
@media (max-width: 760px) { .team-solo .person { width: 100%; } }
.person { text-align: left; }
.person-photo {
  width: 100%;
  aspect-ratio: 4/5;
  background: linear-gradient(135deg, #7d8a9c, #4f5b6e);
  margin-bottom: 1.8rem;
  position: relative;
  overflow: hidden;
}
.person-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;
  filter: grayscale(100%);
  transform: scale(1);
  transition: transform 0.7s cubic-bezier(.2,.7,.3,1);
  }
  @media (hover: hover) {
  .person-photo:hover img { transform: scale(1.04); }
  }
  /* Per-image framing: zoom Ryan to match Daniel's head-to-upper-chest crop */
  .person-photo img[src*="ryan"] {
  object-position: center 6%;
  transform: scale(1.14) translateY(5%);
  transform-origin: 50% 38%;
  }
  @media (hover: hover) {
  .person-photo:hover img[src*="ryan"] { transform: scale(1.19) translateY(5%); }
  }
.person-name {
  font-size: clamp(1.4rem, 2vw, 1.6rem);
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 0.2rem;
  letter-spacing: -0.012em;
}
.person-title {
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.3rem;
  font-weight: 500;
}
.person-bio { 
  color: var(--ink-soft); 
  font-size: 1rem; 
  line-height: 1.6; 
  margin-bottom: 1.2rem; 
  min-height: 3.2em;
}
.person-credentials {
  font-size: 0.88rem;
  color: var(--muted);
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
  margin-bottom: 1.2rem;
}
.person-links { display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap; }
.person-links a {
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 500;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: color 0.2s ease;
}
.person-links a:hover { color: var(--blue-accent); }

/* ---------- Contact (better balanced layout) ---------- */
.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 4rem;
  align-items: start;
}
@media (max-width: 860px) { .contact-wrap { grid-template-columns: 1fr; gap: 2.5rem; } }

.contact-aside {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

  .contact-aside h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  font-weight: 500;
  margin: 0 0 1.2rem;
  letter-spacing: -0.022em;
  line-height: 1.08;
  }
  
  .contact-intro {
  font-size: 1.05rem;
  color: var(--ink-soft);
  line-height: 1.65;
  margin: 0 0 1.8rem;
  max-width: 440px;
  }
  
.contact-aside .big-email {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 0.5rem;
  display: inline-block;
  font-weight: 400;
  letter-spacing: -0.005em;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.contact-aside .big-email:hover { color: var(--blue-accent); border-bottom-color: var(--blue-accent); }

.contact-form { display: grid; gap: 1.1rem; }
.contact-form[hidden] { display: none; }
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 540px) { .contact-form .row { grid-template-columns: 1fr; } }
.contact-form label {
  display: block;
  font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.4rem;
  font-weight: 600;
}
.contact-form input, .contact-form textarea {
  width: 100%; padding: 0.85rem 1rem;
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--ink);
  font-family: var(--sans); font-size: 1rem;
  transition: border-color 0.2s ease;
  border-radius: 0;
}
.contact-form input:focus, .contact-form textarea:focus {
  outline: none; border-color: var(--blue-accent);
}
.contact-form textarea { resize: vertical; min-height: 130px; }
.contact-form button {
  justify-self: start; margin-top: 0.5rem;
  display: inline-block;
  padding: 0.95rem 1.8rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: #17375e;
  color: var(--cream);
  border: 1px solid #17375e;
  cursor: pointer;
  transition: all 0.25s ease;
}
.contact-form button:hover { background: var(--blue-accent); border-color: var(--blue-accent); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(10,37,64,0.12); }
.contact-form button:active { transform: translateY(0); }
.contact-form button:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; }

/* ---------- Valuation page ---------- */
.nav--solid { background: #17375e; padding: 0.7rem 0; }
.nav--solid .brand img.logo { height: 40px; }
.valuation-main {
  background: var(--cream);
  padding: clamp(7.5rem, 14vh, 10rem) 0 clamp(4rem, 9vw, 7rem);
  min-height: 72vh;
}
.val-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--blue-accent);
  font-weight: 500;
  margin-bottom: 1rem;
}
.contact-form select {
  width: 100%; padding: 0.85rem 2.6rem 0.85rem 1rem;
  background-color: transparent;
  border: 1px solid var(--hairline);
  color: var(--ink);
  font-family: var(--sans); font-size: 1rem;
  transition: border-color 0.2s ease;
  border-radius: 0;
  cursor: pointer;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235a6a85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}
.contact-form select:focus { outline: none; border-color: var(--blue-accent); }
.contact-form label .req { color: var(--blue-accent); }
.contact-form label .opt { color: var(--muted); letter-spacing: 0; text-transform: none; font-weight: 400; font-size: 0.66rem; }
.form-error {
  color: #b4452f;
  font-size: 0.92rem;
  margin: 0;
  line-height: 1.5;
}
.form-confirm {
  align-self: center;
  text-align: left;
  max-width: 460px;
}
.form-confirm-mark {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(115,169,152,0.16);
  color: var(--sage);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.4rem;
}
.form-confirm-mark svg { width: 26px; height: 26px; }
.form-confirm h3 {
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 0.8rem;
}
.form-confirm p { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.6; margin: 0 0 1.6rem; }
.confirm-home {
  display: inline-block;
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--blue-accent); font-weight: 600;
  border-bottom: 1px solid currentColor; padding-bottom: 0.3rem;
  transition: color 0.2s ease;
}
.confirm-home:hover { color: var(--ink); }
@media (max-width: 860px) {
  .valuation-main .contact-wrap { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ---------- Footer ---------- */
footer {
  background: #17375e;
  color: rgba(244,237,224,0.55);
  padding: 4rem 0 1.8rem;
  font-size: 0.92rem;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(244,237,224,0.1);
}
@media (max-width: 760px) { .footer-top { grid-template-columns: 1fr; gap: 2rem; } }
.footer-top h5 {
  font-family: var(--sans);
  font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(244,237,224,0.7);
  margin: 0 0 1.1rem;
  font-weight: 600;
}
.footer-top a {
  display: block;
  color: rgba(244,237,224,0.6);
  margin-bottom: 0.55rem;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}
.footer-top a:hover { color: var(--cream); }
.footer-bot {
  padding-top: 1.8rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem;
  font-size: 0.78rem; letter-spacing: 0.08em;
  color: rgba(244,237,224,0.4);
}

.footer-legal {
  display: inline-flex;
  gap: 1.6rem;
  align-items: center;
}
.disclaimer-link {
  color: rgba(244,237,224,0.4);
  transition: color 0.2s ease;
  cursor: pointer;
}
.disclaimer-link:hover { color: rgba(244,237,224,0.7); }

.footer-disclaimer {
  margin: 1.6rem 0 0;
  max-width: 820px;
  font-size: 0.72rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: rgba(244,237,224,0.32);
}

/* Footer logo: larger, more presence */
.footer-brand { display: inline-block; margin-bottom: 1.4rem; }
.footer-brand img.logo { height: 64px; width: auto; }

/* ---------- Disclaimer Modal ---------- */
.disclaimer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,37,64,0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad-x);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.disclaimer-overlay.open {
  opacity: 1;
  visibility: visible;
}

.disclaimer-modal {
  background: var(--cream);
  max-width: 560px;
  width: 100%;
  padding: 2.5rem;
  position: relative;
  transform: translateY(20px);
  transition: transform 0.3s ease;
}
.disclaimer-overlay.open .disclaimer-modal {
  transform: translateY(0);
}

.disclaimer-close {
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  background: transparent;
  border: none;
  font-size: 1.8rem;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s ease;
}
.disclaimer-close:hover { color: var(--ink); }

.disclaimer-modal h4 {
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0 0 1.2rem;
  color: var(--ink);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.disclaimer-modal p {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.65;
  margin: 0;
}

/* ---------- Legal pages (Terms / Privacy) ---------- */
.legal-page {
  padding: clamp(8rem, 14vw, 11rem) 0 clamp(4rem, 8vw, 6rem);
  min-height: 70vh;
}
.legal-page h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  margin: 0.4rem 0 0.6rem;
}
.legal-updated {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 2.4rem;
  letter-spacing: 0.04em;
}
.legal-body {
  max-width: 720px;
  border-top: 1px solid var(--hairline);
  padding-top: 2rem;
}
.legal-body p {
  font-size: 1.02rem;
  color: var(--ink-soft);
  line-height: 1.7;
  margin: 0 0 1.4rem;
}
.legal-body h2 {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  font-weight: 500;
  color: var(--ink);
  margin: 2.4rem 0 0.8rem;
  letter-spacing: -0.01em;
}
.legal-body ul {
  margin: 0 0 1.4rem;
  padding-left: 1.3rem;
}
.legal-body li {
  font-size: 1.02rem;
  color: var(--ink-soft);
  line-height: 1.7;
  margin-bottom: 0.7rem;
}
.legal-body a {
  color: var(--blue-accent);
  border-bottom: 1px solid currentColor;
  transition: opacity 0.2s ease;
}
.legal-body a:hover { opacity: 0.7; }
.legal-placeholder {
  color: var(--muted);
  font-style: italic;
}
.legal-back {
  display: inline-block;
  margin-top: 2.4rem;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 500;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: color 0.2s ease;
}
.legal-back:hover { color: var(--blue-accent); }

/* ---------- Subtle reveal on scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(.16,.84,.44,1), transform 0.6s cubic-bezier(.16,.84,.44,1);
  }
  .reveal.in { opacity: 1; transform: translateY(0); }

  /* Stagger the numbered cards left-to-right so they cascade ("stride") */
  .pillar-grid .pillar-card:nth-child(2),
  .svc-grid .svc-card:nth-child(2) { transition-delay: 0.12s; }
  .pillar-grid .pillar-card:nth-child(3),
  .svc-grid .svc-card:nth-child(3) { transition-delay: 0.24s; }
  }