/* ============================================================
   Carnelian Collective — site styles
   Fonts are SELF-HOSTED (no third-party requests). Files live in
   /assets/fonts/. See the Owner's Manual to swap or add weights.
   ============================================================ */
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:300; font-display:swap; src:url('../assets/fonts/cormorant-garamond-v21-latin-300.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:300; font-display:swap; src:url('../assets/fonts/cormorant-garamond-v21-latin-300italic.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/cormorant-garamond-v21-latin-regular.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:400; font-display:swap; src:url('../assets/fonts/cormorant-garamond-v21-latin-italic.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:500; font-display:swap; src:url('../assets/fonts/cormorant-garamond-v21-latin-500.woff2') format('woff2'); }
@font-face { font-family:'Jost'; font-style:normal; font-weight:300; font-display:swap; src:url('../assets/fonts/jost-v20-latin-300.woff2') format('woff2'); }
@font-face { font-family:'Jost'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/jost-v20-latin-regular.woff2') format('woff2'); }
@font-face { font-family:'Jost'; font-style:normal; font-weight:500; font-display:swap; src:url('../assets/fonts/jost-v20-latin-500.woff2') format('woff2'); }


  :root {
    /* Brand colors */
    --carnelian-red:  #ab3130;
    --orange:         #c85e3c;   /* chosen: warm but not stark, close to actual carnelian stone */
    --gold:           #dfac3f;   /* hero eyebrow, CTA button, nav cta */
    --teal:           #61a2a0;   /* hero left panel, collective banner */
    --teal-mid:       #3d8a88;
    --navy:           #1b414c;   /* nav, services section, footer */
    --stone:          #8a8278;
    --cream:          #faf7f2;
    --off-white:      #fff;
    --text-dark:      #1a1a18;
    --text-mid:       #4a4540;
    --service-card:   #245060;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; font-size: 17px; }

  body {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    color: var(--text-dark);
    background: var(--off-white);
    overflow-x: hidden;
  }

  h1, h2, h3, h4 { font-family: 'Cormorant Garamond', serif; font-weight: 400; line-height: 1.1; }

  /* ── NAV ── */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 1.5rem 5rem 0;
    background: #e7e3d9;
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(27,65,76,0.08);
    overflow: hidden;
  }
  .nav-logo { grid-column: 2; justify-self: center; display: flex; align-items: center; text-decoration: none; padding: 0 2.75rem; }
  .nav-logo-img { height: 84px; width: auto; display: block; transform-origin: center center; }

  .nav-wordmark {
    font-family: 'Cormorant Garamond', serif; font-weight: 400;
    font-size: 1.05rem; letter-spacing: 0.18em; color: #fff; text-transform: uppercase;
  }

  /* Split nav: two links on the left, two on the right of the centered logo.
     Each pair clusters NEXT TO the logo (toward center), with clearance so the
     scaled logo border never covers 'Support' / 'When to Engage'. Pill stays far right. */
  nav .nav-left  { grid-column: 1; justify-self: end; display: flex; align-items: center; gap: 2.5rem; padding-right: 1.5rem; }
  nav .nav-right { grid-column: 3; justify-self: stretch; display: flex; align-items: center; justify-content: space-between; padding-left: 1.5rem; }
  .nav-left, .nav-right { position: relative; top: -0.4rem; }

  .nav-links {
    display: flex; align-items: center; justify-content: center;
    gap: 2.5rem; list-style: none; margin: 0; padding: 0;
  }

  /* CTA pill sits at the far right, nudged ~3 spaces past the right-hand links */
  .nav-cta-wrap {
    display: flex; margin-left: 1.5rem; margin-right: 1.25rem;
  }

  /* Full menu used only on mobile (hamburger overlay) */
  .nav-mobile { display: none; list-style: none; margin: 0; padding: 0; }

  .nav-links a {
    font-family: 'Jost', sans-serif; font-weight: 400; font-size: 0.82rem;
    letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap;
    color: var(--navy); text-decoration: none; transition: color 0.3s;
  }

  .nav-links a:hover { color: var(--gold); }

  .nav-cta {
    font-size: 0.72rem !important; letter-spacing: 0.2em !important;
    color: var(--navy) !important;
    background: var(--gold) !important;
    border: 1px solid var(--gold) !important;
    padding: 0.5rem 1.15rem !important;
    transition: all 0.3s !important;
    border-radius: 3rem !important;
    text-decoration: none;
    font-family: 'Jost', sans-serif;
    font-weight: 400; white-space: nowrap !important;
    text-transform: uppercase;
  }

  .nav-cta:hover {
    background: #c49128 !important; border-color: #c49128 !important; color: var(--navy) !important;
  }

  /* ── HERO ── */
  .hero {
    min-height: 100vh; display: grid; grid-template-columns: 1fr 2fr;
    position: relative; overflow: hidden;
  }

  /* Teal left panel — stronger gradient top-to-bottom */
  .hero-left {
    background: linear-gradient(170deg, #86c6c4 0%, #62a5a3 25%, #4a9694 55%, #3a8886 80%, #2e7a78 100%);
    display: flex; flex-direction: column; justify-content: center;
    padding: 8rem 2.5rem 6rem 5rem; position: relative; z-index: 2;
  }

  .hero-left::after {
    content: ''; position: absolute; top: 0; right: -60px;
    width: 120px; height: 100%;
    background: linear-gradient(170deg, #86c6c4 0%, #62a5a3 25%, #4a9694 55%, #3a8886 80%, #2e7a78 100%);
    clip-path: polygon(0 0, 40% 0, 100% 100%, 0 100%); z-index: 3;
  }

  /* Eyebrow: gold/yellow as originally requested */
  .hero-eyebrow {
    font-family: 'Jost', sans-serif; font-size: 0.78rem; font-weight: 400;
    letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--gold);  /* gold, not white */
    margin-bottom: 2rem;
  }

  .hero h1 {
    font-size: clamp(2.8rem, 4vw, 4.2rem); font-weight: 300;
    color: #fff; line-height: 1.08; margin-bottom: 2rem;
  }

  .hero h1 em { font-style: italic; color: var(--gold); }

  .hero-sub {
    font-size: 0.88rem; font-weight: 300; line-height: 1.85;
    color: rgba(255,255,255,0.9); max-width: 400px;
    margin-bottom: 3rem; letter-spacing: 0.02em;
  }

  .hero-actions { display: flex; gap: 0.85rem; align-items: center; flex-wrap: nowrap; }

  /* Desktop-only deliberate line breaks; collapse to natural wrapping on tablet/mobile */
  br.wide-break { display: inline; }

  /* Primary CTA in hero: outline pill (gold border + gold text on the teal hero) */
  .btn-primary {
    display: inline-block; font-family: 'Jost', sans-serif; white-space: nowrap;
    font-size: 0.62rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase;
    text-decoration: none; color: var(--gold);
    background: transparent;
    border: 1px solid var(--gold);
    padding: 0.6rem 1.1rem; transition: all 0.3s;
    border-radius: 3rem;
  }

  .btn-primary:hover { background: var(--gold); color: var(--navy); }

  .btn-ghost {
    display: inline-block; font-family: 'Jost', sans-serif; white-space: nowrap;
    font-size: 0.62rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase;
    text-decoration: none; color: rgba(255,255,255,0.82);
    border-bottom: 1px solid rgba(255,255,255,0.4); padding-bottom: 2px; transition: all 0.3s;
  }

  .btn-ghost:hover { color: var(--gold); border-color: var(--gold); }

  .hero-right { position: relative; overflow: hidden; background: #25494a; }

  .hero-image-wrap { position: absolute; inset: 0; overflow: hidden; }

  .hero-image-wrap img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 72%;
    filter: saturate(0.82) contrast(1.04);
    transform: scale(1); transition: transform 0.4s ease;
  }

  .hero-image-wrap:hover img { transform: scale(1.0); }

  .hero-image-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(27,65,76,0.25) 0%, transparent 55%);
  }

  .hero-caption {
    position: absolute; bottom: 1.5rem; right: 1.75rem;
    font-family: 'Jost', sans-serif; font-size: 0.56rem;
    letter-spacing: 0.15em; color: rgba(255,255,255,0.38); text-transform: uppercase;
  }

  /* ── SECTION RULE: orange dash above section titles ── */
  .section-rule {
    width: 36px; height: 2px; background: var(--orange);
    margin-bottom: 1rem; display: block;
  }

  /* ── NAV LOGO: single-line wordmark with precisely positioned logo halves ── */
  .nav-logo {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    text-decoration: none;
    line-height: 0;
    gap: 0;
  }

  /* Top row: Top_half image sits directly above 'Carnelian Collective' wordmark.
     Image is flush left with 'C'. Width = approx width of 'Car' = ~3 letters ≈ 28px at current font. */
  .logo-top-img {
    display: block;
    width: 28px;           /* no wider than 'Car' in Carnelian */
    height: auto;
    margin-left: 0;        /* flush left with 'C' */
    margin-bottom: 1px;    /* tiny gap so it sits just above the word */
  }

  /* Wordmark: single line, unchanged font size */
  .nav-wordmark {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 1.05rem;
    letter-spacing: 0.18em;
    color: #fff;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    display: block;
  }

  /* Bottom row: Bottom_half image sits directly below 'Carnelian Collective'.
     Flush right with last 'e' of Collective.
     Width = approx width of 'ive' = ~3 letters ≈ 22px at current font. */
  .logo-bottom-img {
    display: block;
    width: 22px;           /* no wider than 'ive' in Collective */
    height: auto;
    margin-left: auto;     /* push right so it aligns with the end of 'Collective' */
    margin-top: 1px;       /* tiny gap so 'Collective' sits on top of it */
    /* We need the image to align with the right edge of the wordmark.
       The wordmark width is determined by its text content.
       We use a wrapper to achieve right-alignment precisely. */
  }

  /* Wrapper so bottom image aligns to right edge of wordmark */
  .logo-wordmark-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .logo-bottom-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 1px;
  }

  /* Remove old multi-line logo stack styles */
  .logo-stack { display: none; }
  .nav-wordmark-block { display: none; }
  .nav-wordmark-carnelian { display: none; }
  .nav-wordmark-collective { display: none; }
  .logo-top { display: none; }
  .logo-bottom { display: none; }
  .meaning-band {
    background: var(--orange);
    padding: 1.3rem 5rem; display: flex; align-items: center; gap: 2rem;
  }

  .meaning-mark { width: 60px; height: 60px; flex-shrink: 0; opacity: 0.85; }

  .meaning-text {
    font-family: 'Cormorant Garamond', serif; font-size: 1.05rem;
    font-weight: 300; font-style: italic;
    color: rgba(255,255,255,0.95); letter-spacing: 0.04em; line-height: 1.5;
  }

  .meaning-text strong {
    font-style: normal; font-weight: 500; letter-spacing: 0.12em;
    text-transform: uppercase; font-size: 0.7rem;
    color: rgba(255,255,255,0.8); display: block; margin-bottom: 0.3rem;
    font-family: 'Jost', sans-serif;
  }

  /* ── INTRO / PRACTICE: three-column full-bleed ── */
  .intro {
    padding: 0;
    display: grid;
    grid-template-columns: 0.75fr 2.1fr 0.75fr;   /* narrower images, wider center copy */
    height: 480px;
    background: var(--off-white);
    overflow: hidden;
  }

  /* Left image: fills full height, flush left */
  .intro-img-left {
    position: relative; overflow: hidden;
  }

  .intro-img-left img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    /* ADJUST THIS to shift image up/down: lower % = shows top, higher = shows bottom */
    object-position: center 20%;
    transition: transform 8s ease;
  }

  .intro-img-left:hover img { transform: scale(1.03); }

  /* Center column: title flush-left with rule above, copy justified */
  .intro-center {
    display: flex; flex-direction: column; justify-content: center;
    padding: 3rem 2.25rem; text-align: left; background: var(--off-white);
  }

  .intro-center h2 {
    font-size: clamp(1.85rem, 2.4vw, 2.5rem); color: var(--navy);
    line-height: 1.15; margin-bottom: 0.95rem; text-align: left;
    margin-left: 1rem;   /* slight right shift of title block */
  }

  .intro-center .section-rule { margin-left: 1rem; }

  /* Nudge the copy block up ~1 line within the vertically-centered column */
  .intro-center .intro-body { transform: translateY(-1.5rem); }

  .intro-center h2 em { color: var(--orange); font-style: italic; }

  /* Body copy block: left edge is aligned under the word "of" in the title by JS
     (see alignIntroCopy). Right margin is tight so the panel doesn't feel empty. */
  .intro-body { margin-right: 0.5rem; }

  .intro-center p {
    font-size: 0.95rem; line-height: 1.88; color: var(--text-mid);
    margin-bottom: 1.25rem; text-align: left;
  }

  .intro-center p:last-child { margin-bottom: 0; }
  .intro-center strong { color: var(--navy); font-weight: 500; }

  /* Right image: fills full height, flush right */
  .intro-img-right {
    position: relative; overflow: hidden; background: var(--off-white);
  }

  .intro-img-right img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    /* ADJUST THIS to shift image up/down */
    object-position: center 40%;
    transition: transform 8s ease;
  }

  .intro-img-right:hover img { transform: scale(1.03); }

  /* Captions: tiny, light gray, flush to respective edge */
  .intro-caption-left {
    position: absolute; bottom: 0.75rem; left: 0.85rem;
    font-family: 'Jost', sans-serif; font-size: 0.5rem;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(255,255,255,0.3); text-align: left;
  }

  .intro-caption-right {
    position: absolute; bottom: 0.75rem; right: 0.85rem;
    font-family: 'Jost', sans-serif; font-size: 0.5rem;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(255,255,255,0.3); text-align: right;
  }

  /* ── SERVICES / WHAT WE DO: cream bg, navy text, cards unchanged ── */
  .services { background: var(--cream); padding: 7rem 5rem; }

  .section-header { text-align: center; margin-bottom: 4.5rem; }

  .section-eyebrow {
    font-family: 'Jost', sans-serif; font-size: 1.05rem; font-weight: 300;
    letter-spacing: 0.42em; text-transform: uppercase;
    color: var(--text-dark); margin-bottom: 1rem;
  }

  /* Section header h2: navy to match 'Who We Serve' */
  .section-header h2 { font-size: clamp(2rem, 3vw, 2.8rem); color: var(--navy); }

  .section-header p {
    margin-top: 1rem; font-size: 0.92rem; color: var(--text-mid);
    max-width: 520px; margin-left: auto; margin-right: auto; line-height: 1.75;
  }

  .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }

  .service-card {
    background: var(--service-card);
    border: 1px solid rgba(97,162,160,0.2); padding: 3rem 2.5rem;
    transition: background 0.4s, border-color 0.4s;
    position: relative; overflow: hidden;
    text-align: center;
  }

  .service-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
    background: linear-gradient(90deg, var(--carnelian-red), var(--orange));
    transform: scaleX(0); transform-origin: left; transition: transform 0.4s;
  }

  .service-card:hover::before { transform: scaleX(1); }
  .service-card:hover { background: #2c6070; border-color: rgba(97,162,160,0.4); }

  /* Roman numeral: hidden */
  .service-number { display: none; }

  /* Title: proportionally between section heading and old size */
  .service-card h3 { font-size: 1.75rem; color: #fff; margin-bottom: 0.6rem; line-height: 1.15; }

  /* Tagline slightly larger to stay proportional */
  .service-tagline {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-size: 1rem; color: var(--gold); margin-bottom: 1.5rem; display: block;
  }

  .service-list { list-style: none; padding: 0; text-align: left; }

  .service-list li {
    font-size: 0.84rem; font-weight: 300; color: rgba(255,255,255,0.85);
    line-height: 1.7; padding: 0.35rem 0 0.35rem 1.1rem;
    border-bottom: none; position: relative;
  }

  /* Subtle small round bullet in gold */
  .service-list li::before {
    content: '';
    display: block;
    position: absolute; left: 0; top: 0.72rem;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--gold);
    opacity: 0.75;
  }

  .service-list li:last-child { border-bottom: none; }

  /* ── WHO WE SERVE ── */
  .audiences { padding: 7rem 5rem; background: var(--cream); }

  .audiences .section-header h2 { color: var(--navy); }
  .audiences .section-header p { color: var(--text-mid); }

  .audience-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }

  .audience-card {
    background: #fff; padding: 2.5rem; border-left: 3px solid transparent;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
    box-shadow: 0 2px 20px rgba(0,0,0,0.04);
  }

  .audience-card:nth-child(1) { border-color: var(--carnelian-red); }
  .audience-card:nth-child(2) { border-color: var(--navy); }
  .audience-card:nth-child(3) { border-color: var(--teal); }
  .audience-card:nth-child(4) { border-color: var(--gold); }
  .audience-card:nth-child(5) { border-color: var(--stone); }

  .audience-card:hover { box-shadow: 0 8px 40px rgba(0,0,0,0.09); transform: translateY(-2px); }

  .audience-tag {
    font-family: 'Jost', sans-serif; font-size: 0.54rem; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--stone); margin-bottom: 0.5rem; opacity: 0.9;
  }

  .audience-icon { width: 28px; height: 1.5px; margin-bottom: 1.25rem; }
  .audience-card:nth-child(1) .audience-icon { background: var(--carnelian-red); }
  .audience-card:nth-child(2) .audience-icon { background: var(--navy); }
  .audience-card:nth-child(3) .audience-icon { background: var(--teal); }
  .audience-card:nth-child(4) .audience-icon { background: var(--gold); }
  .audience-card:nth-child(5) .audience-icon { background: var(--stone); }

  .audience-card h3 { font-size: 1.3rem; color: var(--navy); margin-bottom: 0.75rem; }
  .audience-card p { font-size: 0.88rem; line-height: 1.82; color: var(--text-mid); }

  .audience-card.wide {
    grid-column: 1 / -1; display: grid;
    grid-template-columns: auto 1fr; gap: 2.5rem; align-items: start;
  }

  .audience-card.wide h3 { margin-bottom: 0.5rem; }
  .audience-wide-body p + p { margin-top: 0.75rem; }

  /* ── INFINITE MARQUEE TICKER BANDS ── */

  /* Shared band wrapper */
  .ticker-band {
    height: 240px;      /* taller to comfortably accommodate varied image shapes */
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: stretch;
  }

  /* The scrolling track — contains two copies of all images for seamless loop */
  .ticker-track {
    display: flex;
    align-items: stretch;
    width: max-content;
    will-change: transform;
  }

  /* Top band scrolls left */
  .ticker-band-top .ticker-track {
    animation: tickerLeft 105s linear infinite;
  }

  /* Bottom band scrolls right */
  .ticker-band-bottom .ticker-track {
    animation: tickerRight 105s linear infinite;
  }

  /* Pause on hover — optional, feels considered not intrusive */
  .ticker-band:hover .ticker-track { animation-play-state: paused; }

  @keyframes tickerLeft {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  @keyframes tickerRight {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
  }

  /* Each image slot in the ticker */
  .ticker-slot {
    height: 240px;
    width: 320px;       /* default width — portrait images will fill height, landscape will be wider */
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
  }

  /* Slightly narrower slots for portrait/square images */
  .ticker-slot.narrow { width: 240px; }
  /* Wider slots for landscape/panoramic images */
  .ticker-slot.wide   { width: 380px; }

  .ticker-slot img {
    width: 100%; height: 100%; object-fit: cover;
    object-position: center center;
    /* Brand cohesion filter: slight desaturation + brightness — lighter than divider banner */
    filter: saturate(0.78) brightness(0.88);
    transition: filter 0.5s ease;
  }

  .ticker-band:hover .ticker-slot img {
    filter: saturate(0.88) brightness(0.95);
  }

  /* Zero gap between slots — fully continuous bleed */
  .ticker-slot + .ticker-slot { margin-left: 0; }
  .ticker-track { gap: 0; }

  /* Caption: filename visible for identification — slightly brighter while in filename-check mode */
  .ticker-caption {
    position: absolute; bottom: 0.5rem; left: 0.6rem; right: 0.6rem;
    font-family: 'Jost', sans-serif; font-size: 0.44rem;
    letter-spacing: 0.06em; color: rgba(255,255,255,0.55);
    text-transform: none; pointer-events: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: rgba(0,0,0,0.35); padding: 0.2rem 0.3rem;
  }

  /* ── WHEN TO CALL: centered layout matching What We Do / Who We Serve ── */
  .matters {
    background: var(--cream);
    padding: 7rem 5rem;
  }

  .matters-header {
    text-align: center;
    margin-bottom: 4.5rem;
  }

  /* ALL SECTION EYEBROWS — force one size & weight across the page so
     'WHAT WE DO / WHO WE SUPPORT / WHEN TO ENGAGE / GUIDING VALUABLES / THE COLLECTIVE MODEL'
     render at identical scale regardless of which container they live in. */
  .section-eyebrow,
  .matters-eyebrow,
  .art-divider-text span,
  .collective .section-eyebrow {
    font-size: 1rem !important;
    font-weight: 300 !important;
    letter-spacing: 0.42em !important;
  }

  /* Section eyebrow: EXACT match to .section-eyebrow — same font, size, color, tracking */
  .matters-eyebrow {
    font-family: 'Jost', sans-serif; font-size: 1.05rem; font-weight: 300;
    letter-spacing: 0.42em; text-transform: uppercase;
    color: var(--text-mid); margin-bottom: 1rem; display: block;
  }

  .matters-left { display: none; }

  /* Headline: same size as 'Three pillars of practice' and 'Built for those who require a higher standard' */
  .matters h2 {
    font-size: clamp(2rem, 3vw, 2.8rem); color: var(--navy);
    line-height: 1.15; margin-bottom: 0;
  }

  .matters h2 em { color: var(--orange); font-style: italic; }

  .matters-intro {
    font-size: 0.92rem; line-height: 1.85; color: var(--text-mid);
    margin-top: 1rem; max-width: 520px;
    margin-left: auto; margin-right: auto;
  }

  /* Two columns of 3 — wider gap between columns, wider cards, more breathing room */
  .matters-grid {
    display: grid;
    grid-template-columns: 1fr 5rem 1fr;   /* 5rem gap between columns — wider than before */
    column-gap: 0;
    row-gap: 1.5rem;                        /* vertical gap between rows */
    max-width: 1060px;                      /* wider overall so cards are larger */
    margin: 0 auto;
  }

  .matters-card:nth-child(1) { grid-column: 1; }
  .matters-card:nth-child(2) { grid-column: 3; }
  .matters-card:nth-child(3) { grid-column: 1; }
  .matters-card:nth-child(4) { grid-column: 3; }
  .matters-card:nth-child(5) { grid-column: 1; }
  .matters-card:nth-child(6) { grid-column: 3; }

  /* Cards: navy, slightly more padding so they feel wider/taller */
  .matters-card {
    background: var(--service-card); padding: 2rem 2rem;
    border-top: 3px solid transparent;
    transition: background 0.4s, border-color 0.4s, box-shadow 0.25s;
    position: relative; overflow: hidden;
  }

  .matters-card:nth-child(1)::before,
  .matters-card:nth-child(2)::before,
  .matters-card:nth-child(3)::before,
  .matters-card:nth-child(4)::before,
  .matters-card:nth-child(5)::before,
  .matters-card:nth-child(6)::before { background: linear-gradient(90deg, var(--carnelian-red), var(--orange)); }

  .matters-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    transform: scaleX(0); transform-origin: left; transition: transform 0.4s;
  }

  .matters-card:hover::before { transform: scaleX(1); }
  .matters-card:hover { background: #2c6070; box-shadow: 0 4px 24px rgba(0,0,0,0.15); }

  .matters-sub {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic; font-size: 0.9rem;
    color: var(--gold); display: block;
    margin-bottom: 0.5rem;
  }

  .matters-card strong {
    font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; font-weight: 500;
    color: #fff; display: block; margin-bottom: 0.6rem; line-height: 1.25;
  }

  .matters-card p { font-size: 0.84rem; line-height: 1.75; color: rgba(255,255,255,0.85); }

  /* ── ART DIVIDER: reverted to original height ── */
  .art-divider { height: 280px; overflow: hidden; position: relative; }

  .art-divider img {
    width: 100%; height: 100%; object-fit: cover;
    object-position: center 62%;
    transform: scale(1.1);
    filter: saturate(0.42) contrast(1.12) brightness(0.62);
  }

  .art-divider-text {
    position: absolute; inset: 0; display: flex; align-items: center;
    justify-content: center; flex-direction: column;
    background: linear-gradient(rgba(27,65,76,0.28), rgba(27,65,76,0.48));
    gap: 2.5rem;
  }

  /* GUIDING VALUABLES: matches the other section eyebrows — thin Jost, 0.42em tracking */
  .art-divider-text span {
    font-family: 'Jost', sans-serif;
    font-size: 1.05rem;
    font-weight: 300;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    margin-bottom: 0;
  }

  .art-divider-text p {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 3.4vw, 3rem); font-style: italic;
    color: rgba(255,255,255,0.92); margin-top: 0;
  }

  .art-divider-caption {
    position: absolute; bottom: 0.75rem; right: 1rem;
    font-family: 'Jost', sans-serif; font-size: 0.5rem;
    letter-spacing: 0.12em; color: rgba(255,255,255,0.25);
    text-transform: uppercase; text-align: right; pointer-events: none;
  }

  /* ── ABOUT: portrait sits further right — wider left column, portrait right-aligned within it ── */
  .about {
    background: var(--off-white);
    padding: 2.5rem 5rem 3rem 5rem;
    display: grid;
    grid-template-columns: 460px 1fr;   /* wider still pushes portrait more right */
    gap: 4rem;
    align-items: start;
    overflow: hidden;
  }

  /* Left column: flex column, portrait pushed to right edge */
  .about-left {
    display: flex;
    flex-direction: column;
    align-items: flex-end;   /* right-aligns portrait within the left column */
    padding-left: 1.4rem;    /* shift header + portrait ~3 spaces right */
  }

  .about-left h2 {
    font-size: clamp(1.8rem, 2.4vw, 2.6rem); color: var(--navy); margin-bottom: 1rem;
    line-height: 1.15;
    align-self: flex-start;   /* title stays left while portrait goes right */
    width: 100%;
  }

  .about-left h2 em { color: var(--orange); }

  /* Portrait: fixed 360px wide, 4:5 ratio (= 450px tall). Does not expand. */
  .about-photo {
    width: 360px;
    height: 450px;           /* 360 × 1.25 = 450 — 4:5 ratio */
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.06);
    margin-top: 1.25rem;
    margin-right: -1.4rem;   /* nudge portrait ~3 spaces further right */
    flex-shrink: 0;
  }

  .about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

  .about-photo-ph {
    width: 100%; height: 100%;
    background: linear-gradient(160deg, #d4c4a8 0%, #a89070 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.5rem; padding: 1.5rem;
  }

  .about-photo-ph span {
    font-family: 'Jost', sans-serif; font-size: 0.6rem; letter-spacing: 0.2em;
    text-transform: uppercase; color: rgba(255,255,255,0.55); text-align: center;
  }

  /* Right column: bio starts at top — aligned with top of portrait */
  .about-right {
    display: flex; flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    /* No padding-top: first line of copy aligns with top of portrait box */
    padding-top: 0;
    padding-left: 1.4rem;   /* shift bio copy block ~3 spaces right, matching header/portrait */
  }

  .about-right p { font-size: 1rem; line-height: 1.9; color: var(--text-mid); }

  .about-quote {
    margin: 0.25rem 0; padding: 1.5rem 1.75rem 1.5rem 2rem;
    border-left: 3px solid var(--orange); background: rgba(200,94,60,0.04);
    width: 100%;
  }

  .about-quote p {
    font-family: 'Cormorant Garamond', serif; font-size: 1.02rem; font-style: italic;
    color: var(--navy); line-height: 1.6; margin: 0 !important;
  }

  /* Accent image: positioned by JS (alignAboutAccent) so roughly half of it sits
     directly below the end of the credentials line (…Giving Advisory Board). */
  .about-accent-img {
    width: 350px;
    max-width: 100%;
    height: 260px;
    max-width: 350px;
    max-height: 260px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    align-self: flex-start;
    margin-left: auto;
    margin-right: 0;
  }

  .about-accent-img img {
    width: 100%; height: 100%; object-fit: cover; object-position: center top;
  }

  .about-accent-ph {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--navy), var(--teal-mid));
    display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.5rem;
  }

  .about-accent-ph span {
    font-family: 'Jost', sans-serif; font-size: 0.54rem; letter-spacing: 0.15em;
    text-transform: uppercase; color: rgba(255,255,255,0.4); text-align: center; padding: 0.5rem;
  }

  /* Bottom padding — reduced so section doesn't feel excessively long */
  .about-bottom-spacer { height: 2.5rem; background: var(--off-white); }

  /* Credentials: Cormorant Garamond italic — softer, distinct from body Jost */
  .about-credentials {
    margin-top: 1.75rem;
    font-family: 'Cormorant Garamond', serif;
    display: flex; flex-wrap: wrap; align-items: baseline;
    column-gap: 1.5rem; row-gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 300;
    font-style: italic;
    color: var(--stone);
    line-height: 2;
    letter-spacing: 0.01em;
    padding-top: 1.25rem;
    position: relative;
  }

  /* Each affiliation is an unbreakable unit so it wraps cleanly (no awkward single-word breaks) */
  .about-credentials .affiliation { display: inline-block; }

  /* Shortened divider line above affiliations */
  .about-credentials::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 210px; height: 1px; background: rgba(0,0,0,0.14);
  }

  /* ── COLLECTIVE: original generous size ── */
  .collective {
    background: linear-gradient(135deg, #6fb5b3 0%, #4e9a98 50%, #3d8a88 100%);
    padding: 3.25rem 5rem 2.75rem; text-align: center;
  }

  .collective .section-eyebrow { margin-bottom: 1.25rem; color: rgba(255,255,255,0.82); }

  .collective h2 { font-size: clamp(1.8rem, 2.5vw, 2.5rem); color: #fff; margin-bottom: 1.5rem; }
  .collective h2 .gold { color: var(--gold); font-style: italic; }
  /* Inline 'Collective' word matches the gold italic serif of the subtitle */
  .collective p .gold-word { color: var(--gold); font-style: italic; font-family: 'Cormorant Garamond', serif; font-size: 1.12em; }

  .collective p {
    font-size: 0.95rem; line-height: 1.85; color: rgba(255,255,255,0.88);
    max-width: 820px; margin: 0 auto;
  }

  .collective p:last-child { margin-bottom: 0; }

  /* Final line: same light weight & color as the body copy above, set one blank line below */
  .collective .collective-final {
    margin-top: 1.7rem;
    font-weight: 300;
    color: rgba(255,255,255,0.88);
  }

  /* ── CONTACT: image left full-bleed, copy right ── */
  .contact {
    background: var(--cream);
    display: grid; grid-template-columns: 1fr 1fr;
    min-height: 580px;
    overflow: hidden;
    /* no horizontal padding — left image bleeds flush */
    padding: 0;
  }

  /* Left: full bleed image, fills entire column top to bottom, flush left */
  .contact-image {
    position: relative; overflow: hidden;
  }

  .contact-image img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center center;
  }

  .contact-image-ph {
    position: absolute; inset: 0;
    background: linear-gradient(160deg, #1b414c, #3d8a88);
    display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.75rem; padding: 2rem;
  }

  .contact-image-ph span {
    font-family: 'Jost', sans-serif; font-size: 0.58rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: rgba(255,255,255,0.4); text-align: center; line-height: 1.8;
  }

  .contact-image-caption {
    position: absolute; bottom: 1rem; right: 1rem;
    font-family: 'Jost', sans-serif; font-size: 0.5rem;
    letter-spacing: 0.12em; color: rgba(255,255,255,0.28);
    text-transform: uppercase; text-align: right;
  }

  /* Right: copy vertically centered */
  .contact-right {
    padding: 5rem 5rem 5rem 4.5rem;
    display: flex; flex-direction: column; justify-content: center;
  }

  .contact-right h2 { font-size: clamp(2rem, 3vw, 3rem); color: var(--navy); margin-bottom: 1rem; }
  .contact-right h2 em { color: var(--orange); }

  .contact-intro {
    font-size: 0.9rem; line-height: 1.85; color: var(--text-mid);
    margin-bottom: 2.5rem; max-width: 480px;
  }

  .contact-details { display: flex; flex-direction: column; gap: 1.5rem; }
  .contact-detail { display: flex; flex-direction: column; gap: 0.2rem; }

  .contact-label {
    font-family: 'Jost', sans-serif; font-size: 0.6rem; letter-spacing: 0.25em;
    text-transform: uppercase; color: var(--stone);
  }

  .contact-value { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; color: var(--navy); }
  .contact-value a { color: var(--navy); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.3s; }
  .contact-value a:hover { border-color: var(--carnelian-red); }

  /* ── FOOTER ── */
  footer {
    background: #e7e3d9; border-top: 1px solid rgba(27,65,76,0.08);
    padding: 1.25rem 5rem 1.75rem;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 1.5rem;
    overflow: hidden;
    min-height: 150px;
  }

  .footer-side { grid-column: 1; align-self: end; }

  /* Footer legal links (left corner) */
  .footer-legal {
    display: flex; align-items: center; gap: 0.6rem;
    font-family: 'Jost', sans-serif; font-size: 0.68rem;
    letter-spacing: 0.04em;
  }
  .footer-legal a {
    color: rgba(27,65,76,0.55); text-decoration: none; transition: color 0.25s;
  }
  .footer-legal a:hover { color: var(--carnelian-red); }
  .footer-legal-sep { color: rgba(27,65,76,0.55); }

  .footer-center {
    grid-column: 2; justify-self: center;
    display: flex; flex-direction: column; align-items: center;
    position: relative;
  }

  .footer-center .footer-logo-link { text-decoration: none; display: block; line-height: 0; position: relative; z-index: 1; }

  .footer-logo-img {
    height: 150px; width: auto; display: block; opacity: 0.95;
    transform-origin: center center;
  }

  /* Tagline: same wordmark style as 'conversation' on the contact page — Cormorant italic, orange.
     Sits ON TOP of the bottom of the logo. */
  .footer-tagline {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    color: var(--orange); font-size: 1.12rem; letter-spacing: 0.01em;
    text-align: center; position: relative; z-index: 2;
    margin-top: -1.6rem;
  }

  .footer-right {
    grid-column: 3; justify-self: end; align-self: end;
    font-size: 0.68rem; color: rgba(27,65,76,0.55); text-align: right;
    font-family: 'Jost', sans-serif; line-height: 1.7;
  }

  .footer-wordmark { display: none; }

  .footer-middle { display: none; }
  .footer-middle a { color: var(--navy); text-decoration: none; border-bottom: 1px solid rgba(27,65,76,0.2); }

  .footer-right { font-size: 0.68rem; color: rgba(27,65,76,0.55); text-align: right; font-family: 'Jost', sans-serif; display: block; }

  /* ── MENU ── */
  .menu-toggle {
    display: none; flex-direction: column; gap: 5px;
    cursor: pointer; padding: 4px; background: none; border: none;
  }

  .menu-toggle span { display: block; width: 24px; height: 1.5px; background: var(--navy); }

  /* ── ANIMATIONS ── */
  @keyframes fadeUp { from { opacity:0; transform:translateY(28px);} to {opacity:1;transform:translateY(0);}}
  .hero-left > * { opacity:0; animation: fadeUp 0.9s forwards; }
  .hero-eyebrow { animation-delay: 0.2s; }
  .hero h1      { animation-delay: 0.45s; }
  .hero-sub     { animation-delay: 0.65s; }
  .hero-actions { animation-delay: 0.85s; }

  /* ── RESPONSIVE ── */
  @media (max-width: 1024px) {
    .hero { grid-template-columns: 1fr; min-height: auto; }
    /* Top padding clears the fixed header so the gold category line is never covered */
    .hero-left { padding: 8.5rem 3rem 5rem; }
    .hero-left::after { display: none; }
    .hero-right { height: 55vw; }

    /* Intro: stack on mobile */
    .intro { grid-template-columns: 1fr; height: auto; }
    /* Intro images: give a bit more height on mobile so crops keep more of each work */
    .intro-img-left, .intro-img-right { height: 58vw; position: relative; }
    .intro-img-left img, .intro-img-right img { position: absolute; inset: 0; }
    .intro-center { padding: 3rem 2.5rem; }

    .matters { grid-template-columns: 1fr; gap: 3rem; }
    .services-grid { grid-template-columns: 1fr; }
    .audience-grid { grid-template-columns: 1fr; }
    .audience-card.wide { grid-column: auto; display: block; }
    /* Tight banner: minimal top padding, ZERO bottom padding so overflow:hidden
       clips the logo file's lower edge cleanly behind the teal hero below. */
    nav { padding: 0.85rem 2rem 0; grid-template-columns: auto 1fr auto; }
    nav .nav-left, nav .nav-right { display: none; }
    .nav-logo { grid-column: 1; justify-self: start; padding: 0; }
    /* Cancel the design-time logo scale/translate on mobile so the logo sits at a normal size */
    .nav-logo-img { transform: none !important; height: 112px; }
    nav .nav-links { display: none; }
    .menu-toggle { display: flex; grid-column: 3; }
    /* Hero CTAs stay side-by-side on mobile (matching iPhone), shrunk to avoid overflow */
    .hero-actions { flex-wrap: nowrap; gap: 0.75rem; }
    .hero-actions .btn-primary { padding: 0.55rem 1rem; font-size: 0.6rem; letter-spacing: 0.16em; }
    .hero-actions .btn-ghost { font-size: 0.6rem; letter-spacing: 0.16em; }
    /* Intro images: clean cover crop on mobile, no design-time over-zoom */
    .intro-img-left img, .intro-img-right img { object-fit: cover !important; width: 100% !important; height: 100% !important; transform: none !important; }
    /* Desktop-only line breaks collapse on tablet/mobile for natural wrapping */
    br.wide-break { display: none; }
    /* Mobile dropdown links (shown by toggleMenu over a dark panel) */
    .nav-mobile a {
      color: rgba(255,255,255,0.92); font-family: 'Jost', sans-serif;
      font-weight: 400; font-size: 0.95rem; letter-spacing: 0.18em;
      text-transform: uppercase; text-decoration: none;
    }
    /* When-to-Engage: cancel the desktop 2-column placement so all six cards stack */
    .matters-grid { grid-template-columns: 1fr; }
    .matters-grid > .matters-card { grid-column: 1 !important; }
    /* A Different Kind of Practice: clear desktop indent + translate so nothing overlaps */
    .intro-center h2, .intro-center .section-rule { margin-left: 0 !important; }
    .intro-center .intro-body { transform: none !important; margin-left: 0 !important; }
    /* About: drop the desktop top-offset that pushed the bio far below the portrait */
    .about-bio-inner { padding-top: 1.5rem !important; }
    .services, .audiences, .matters, .collective { padding: 5rem 2.5rem; }
    .meaning-band { padding: 2rem 2.5rem; }
    footer { padding: 2.5rem; grid-template-columns: 1fr; text-align: center; }
    .footer-side { display: flex; justify-content: center; grid-column: 1; order: 3; margin-top: 0.5rem; }
    .footer-center { grid-column: 1; }
    .footer-right { grid-column: 1; justify-self: center; text-align: center; }
    .matters-grid { grid-template-columns: 1fr; }
    .image-band { height: 130px; }

    /* About: stack on mobile */
    .about { grid-template-columns: 1fr; padding: 4rem 2.5rem; overflow: visible; }
    .about-photo { width: 100%; height: auto; aspect-ratio: 4/5; }
    /* Constrain the accent (inspection) photo so its fixed 350px width never overflows narrow screens */
    .about-accent-img { width: 100%; max-width: 350px; height: auto; aspect-ratio: 350 / 260; max-height: none; margin-left: auto !important; margin-right: auto !important; }

    /* Contact: stack on mobile */
    .contact { grid-template-columns: 1fr; min-height: auto; }
    .contact-image { height: 60vw; position: relative; }
    .contact-image img { position: absolute; inset: 0; }
    .contact-right { padding: 3.5rem 2.5rem; }
  }

  @media (max-width: 600px) {
    .hero-left { padding: 8.5rem 1.75rem 4rem; }
    .btn-primary { padding: 0.55rem 1.15rem; font-size: 0.62rem; letter-spacing: 0.18em; }
    .services, .audiences, .matters, .collective { padding: 4rem 1.75rem; }
    footer { padding: 2rem 1.75rem; }
    .about { padding: 3rem 1.75rem; }
    .contact-right { padding: 2.5rem 1.75rem; }
  }

  /* ── EXTRA-SMALL PHONES (<=480px) ── */
  @media (max-width: 480px) {
    html { font-size: 16px; }
    nav { padding: 0.7rem 1.25rem 0; }
    .nav-logo-img { height: 96px; }
    .nav-cta { padding: 0.4rem 0.85rem !important; font-size: 0.6rem !important; letter-spacing: 0.14em !important; }
    .hero-left { padding: 7.5rem 1.25rem 3rem; }
    .services, .audiences, .matters, .collective { padding: 3.5rem 1.25rem; }
    .meaning-band { padding: 1.75rem 1.25rem; }
    .about { padding: 2.5rem 1.25rem; }
    .contact-right { padding: 2rem 1.25rem; }
    footer { padding: 2rem 1.25rem; }
    .image-band { height: 105px; }
  }

  /* ── ACCESSIBILITY: respect prefers-reduced-motion (WCAG 2.3.3) ── */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
    .ticker-track { animation: none !important; }
  }

  /* ── ACCESSIBILITY: visible focus ring for keyboard users only ── */
  a:focus-visible,
  button:focus-visible,
  .nav-cta:focus-visible,
  .btn-primary:focus-visible,
  .btn-ghost:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 2px;
  }

  /* ── LIGHT IMAGE PROTECTION: prevent drag-to-save & text-select on images ── */
  img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }