/* ================================================================
   STONEWOOD ADVISORS — Main Stylesheet
   ================================================================
   Sections:
     1.  CSS Variables
     2.  Reset & Base
     3.  Accessibility
     4.  Layout: Container
     5.  Site Header
     6.  Hero
     7.  Sections: Shared
     8.  What We Do (Services)
     9.  Philosophy
    10.  Who We Work With
    11.  Site Footer
    12.  Scroll Reveal Animations
    13.  Reduced-Motion Overrides
   ================================================================ */


/* ── 1. CSS Variables ─────────────────────────────────────────── */

:root {
  /* Core palette */
  --bg:     #1c1c1c;
  --bg2:    #151515;
  --text:   #e8e4dc;
  --muted:  #b9b2a6;
  --stone:  #8c8476;
  --slate:  #555555;
  --forest: #2f3a32;

  /* Derived / opacity variants */
  --stone-faint:  rgba(140, 132, 118, 0.12);
  --stone-subtle: rgba(140, 132, 118, 0.22);
  --stone-mid:    rgba(140, 132, 118, 0.40);

  /* Typography stacks */
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino,
           Garamond, Georgia, serif;
  --sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
           Helvetica, Arial, sans-serif;

  /* Fluid spacing scale */
  --space-2xs: clamp(0.375rem, 0.6vw,  0.5rem);
  --space-xs:  clamp(0.5rem,   0.9vw,  0.75rem);
  --space-s:   clamp(0.875rem, 1.4vw,  1.25rem);
  --space-m:   clamp(1.5rem,   2.8vw,  2.25rem);
  --space-l:   clamp(2.5rem,   5vw,    4rem);
  --space-xl:  clamp(4rem,     8vw,    7rem);
  --space-2xl: clamp(6rem,     11vw,   9rem);

  /* Layout */
  --container-max: 1080px;
  --container-pad: clamp(1.25rem, 5vw, 2.5rem);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast:   0.2s ease;
  --t-base:   0.32s ease;
}


/* ── 2. Reset & Base ──────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.95vw + 0.55rem, 1.125rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

ul {
  list-style: none;
}

address {
  font-style: normal;
}

a {
  color: inherit;
}


/* ── 3. Accessibility ─────────────────────────────────────────── */

/* Visible focus ring for keyboard users */
:focus-visible {
  outline: 2px solid var(--stone);
  outline-offset: 4px;
  border-radius: 1px;
}

/* Skip-to-content link */
.skip-link {
  position: absolute;
  top: -200%;
  left: 1rem;
  z-index: 9999;
  padding: 0.55em 1.2em;
  background: var(--stone);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: top var(--t-fast);
}

.skip-link:focus {
  top: 0.75rem;
}


/* ── 4. Layout: Container ─────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}


/* ── 5. Site Header ───────────────────────────────────────────── */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: 1.3rem;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background var(--t-base),
    border-color var(--t-base),
    backdrop-filter var(--t-base);
}

.site-header.scrolled {
  background: rgba(21, 21, 21, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--stone-faint);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo — very subtle at hero top, full opacity when scrolled */
.header-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  opacity: 0.55;
  transition: opacity var(--t-base);
}

.site-header.scrolled .header-logo {
  opacity: 0.8;
}

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

.header-logo img {
  height: 24px;
  width: auto;
}

/* Contact link */
.header-contact {
  font-family: var(--sans);
  font-size: clamp(0.6875rem, 0.85vw, 0.8125rem);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  opacity: 0.65;
  transition: opacity var(--t-base), color var(--t-fast);
}

.site-header.scrolled .header-contact {
  opacity: 1;
}

.header-contact:hover,
.header-contact:focus-visible {
  color: var(--text);
  opacity: 1;
}


/* ── 6. Hero ──────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh; /* respect mobile browser chrome */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  background-color: var(--bg);
}

/* ── Hero: Vignette + tonal depth (CSS only) ── */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    /* Top shadow — gives depth behind header */
    radial-gradient(ellipse 110% 55% at 50% 0%,   rgba(0, 0, 0, 0.50) 0%, transparent 65%),
    /* Bottom vignette */
    radial-gradient(ellipse 110% 50% at 50% 100%,  rgba(0, 0, 0, 0.42) 0%, transparent 60%),
    /* Warm left bloom */
    radial-gradient(ellipse 60%  50% at 10%  36%,  rgba(140, 132, 118, 0.065) 0%, transparent 55%),
    /* Cool right recession */
    radial-gradient(ellipse 55%  55% at 90%  62%,  rgba(60, 58, 55, 0.06) 0%, transparent 52%),
    /* Subtle center lift to prevent flatness */
    radial-gradient(ellipse 80%  80% at 50%  45%,  rgba(36, 34, 32, 0.2) 0%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}

/* ── Hero: Grain texture overlay (SVG turbulence, CSS only) ── */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.032;
  /* Inline SVG fractal noise — simulates stone/paper grain */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.70' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 300px 300px;
  pointer-events: none;
  z-index: 0;
}

/* ── Hero Content ── */
.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  /*
   * Seal center positioned at ~42% from viewport top.
   * padding-top positions the content block so that
   * the seal's midpoint lands near 42vh.
   * Formula: padding-top = 42vh − (seal-height / 2)
   * At clamp max ~192px seal, half ≈ 96px ≈ 6–7vh on 1080px screen.
   * So: padding-top ≈ 35–36vh works across typical screen heights.
   */
  padding-top: clamp(5.5rem, 36vh, 28rem);
  padding-bottom: clamp(4rem, 8vh, 8rem);
  padding-inline: var(--container-pad);

  gap: clamp(1.25rem, 2.2vw, 1.875rem);
  will-change: transform, opacity;
}

/* ── Seal ── */
.hero-seal {
  flex-shrink: 0;
}

.hero-seal img {
  width: clamp(120px, 17vw, 192px);
  height: auto;
  opacity: 0.88;
  filter: drop-shadow(0 0 52px rgba(140, 132, 118, 0.16));
  margin-inline: auto;
}

/* ── Brand Name (h1) ── */
.hero-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.875rem, 1.4vw, 1.25rem);
}

.brand-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  font-family: var(--serif);
  color: var(--text);
}

.brand-stonewood {
  display: block;
  font-size: clamp(2.5rem, 7.2vw, 5.5rem);
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 0.95;
}

.brand-advisors {
  display: block;
  font-size: clamp(0.9375rem, 2.1vw, 1.6875rem);
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.5em;
  line-height: 1;
}

/* ── Tagline ── */
.tagline {
  font-family: var(--sans);
  font-size: clamp(0.6875rem, 0.95vw, 0.875rem);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
  line-height: 1;
}

/* ── Support Line ── */
.support-line {
  font-family: var(--sans);
  font-size: clamp(0.875rem, 1.2vw, 1.0625rem);
  font-weight: 300;
  letter-spacing: 0.035em;
  color: var(--muted);
  line-height: 1.4;
}

/* ── CTA Button ── */
.cta-button {
  display: inline-block;
  margin-top: clamp(0.375rem, 0.8vw, 0.625rem);
  padding: 0.9em 2.6em;
  font-family: var(--sans);
  font-size: clamp(0.6875rem, 0.9vw, 0.8125rem);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--stone-subtle);
  cursor: pointer;
  transition:
    background var(--t-fast),
    color var(--t-fast),
    border-color var(--t-fast);
}

.cta-button:hover,
.cta-button:focus-visible {
  background: var(--stone);
  color: var(--bg);
  border-color: var(--stone);
}


/* ── 7. Sections: Shared ──────────────────────────────────────── */

.section {
  padding-block: var(--space-xl);
}

.section-label {
  font-family: var(--sans);
  font-size: clamp(0.625rem, 0.85vw, 0.75rem);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone);
  text-align: center;
  margin-bottom: var(--space-l);
}

/* Short rule beneath section label */
.section-label::after {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--stone);
  opacity: 0.38;
  margin: 0.7rem auto 0;
}


/* ── 8. What We Do ────────────────────────────────────────────── */

.section-services {
  background-color: var(--bg2);
  border-top:    1px solid var(--stone-faint);
  border-bottom: 1px solid var(--stone-faint);
}

.cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

/* Mobile: stacked cards with left accent border */
.card {
  padding-block: var(--space-m);
  padding-inline-start: var(--space-s);
  border-left: 1px solid var(--stone-subtle);
  border-bottom: 1px solid var(--stone-faint);
}

.card:last-child {
  border-bottom: none;
}

/* Desktop: side-by-side columns separated by vertical rule */
@media (min-width: 640px) {
  .cards-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }

  .card {
    padding-block: var(--space-m);
    padding-inline: var(--space-m);
    border-left: none;
    border-top: 1px solid var(--stone-subtle);
    border-bottom: none;
    border-right: 1px solid var(--stone-faint);
  }

  .card:first-child {
    padding-inline-start: 0;
    border-left: none;
  }

  .card:last-child {
    padding-inline-end: 0;
    border-right: none;
  }
}

.card-title {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1.75vw, 1.4375rem);
  font-weight: 400;
  color: var(--text);
  letter-spacing: 0.01em;
  line-height: 1.2;
  margin-bottom: var(--space-xs);
}

.card-body {
  font-family: var(--sans);
  font-size: clamp(0.875rem, 1.1vw, 1rem);
  font-weight: 300;
  color: var(--muted);
  line-height: 1.65;
}


/* ── 9. Philosophy ────────────────────────────────────────────── */

.section-philosophy {
  background-color: var(--bg);
}

.philosophy-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 580px;
  margin-inline: auto;
}

.philosophy-item {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1.85vw, 1.5rem);
  font-weight: 300;
  font-style: italic;
  color: var(--text);
  text-align: center;
  line-height: 1.45;
  letter-spacing: 0.01em;
  padding-block: var(--space-m);
  width: 100%;
  border-bottom: 1px solid var(--stone-faint);
}

.philosophy-item:first-child {
  border-top: 1px solid var(--stone-faint);
}

.philosophy-item:last-child {
  border-bottom: 1px solid var(--stone-faint);
}


/* ── 10. Who We Work With ─────────────────────────────────────── */

.section-clients {
  background-color: var(--bg2);
  border-top:    1px solid var(--stone-faint);
  border-bottom: 1px solid var(--stone-faint);
}

.who-list {
  max-width: 380px;
  margin-inline: auto;
  text-align: center;
}

.who-list li {
  font-family: var(--sans);
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  font-weight: 300;
  color: var(--muted);
  letter-spacing: 0.04em;
  padding-block: clamp(0.875rem, 1.6vw, 1.25rem);
  border-bottom: 1px solid var(--stone-faint);
}

.who-list li:first-child {
  border-top: 1px solid var(--stone-faint);
}


/* ── 11. Site Footer ──────────────────────────────────────────── */

.site-footer {
  background-color: var(--bg2);
  border-top: 1px solid var(--stone-faint);
  padding-block: var(--space-l);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
  text-align: center;
}

.footer-brand {
  font-family: var(--serif);
  font-size: clamp(0.625rem, 0.85vw, 0.75rem);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.7;
}

.footer-address {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--sans);
  font-size: clamp(0.8125rem, 1vw, 0.9375rem);
  font-weight: 300;
}

.footer-address span {
  color: var(--slate);
}

.footer-address a {
  color: var(--muted);
  text-decoration: none;
  opacity: 0.75;
  transition: opacity var(--t-fast), color var(--t-fast);
}

.footer-address a:hover,
.footer-address a:focus-visible {
  color: var(--text);
  opacity: 1;
}


/* ── 12. Scroll Reveal Animations ────────────────────────────── */

/*
 * .reveal is applied by JS to eligible elements.
 * .visible is added by IntersectionObserver when in view.
 * Stagger delays applied to nth-children below.
 */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
  }

  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Cards stagger */
  .card:nth-child(2).reveal { transition-delay: 0.10s; }
  .card:nth-child(3).reveal { transition-delay: 0.20s; }

  /* Philosophy stagger */
  .philosophy-item:nth-child(2).reveal { transition-delay: 0.12s; }
  .philosophy-item:nth-child(3).reveal { transition-delay: 0.24s; }

  /* Who-list stagger */
  .who-list li:nth-child(2).reveal { transition-delay: 0.08s; }
  .who-list li:nth-child(3).reveal { transition-delay: 0.16s; }
  .who-list li:nth-child(4).reveal { transition-delay: 0.24s; }

  /* Hero parallax — JS writes inline transform/opacity */
  .hero-content {
    transition: transform 0.06s linear, opacity 0.06s linear;
  }
}


/* ── 13. Reduced-Motion Overrides ────────────────────────────── */

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

  /* Disable hero parallax (JS also checks this, belt-and-suspenders) */
  .hero-content {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  /* Disable reveal animation — elements should already be visible */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}