/* ============================================================
   LANDING SECTIONS · v12 — sit over the fixed flock + sky canvas.
   Three new scroll sections (§2–§4):
     §2 .stage-divisions  → .sec-divisions (division links, blue sky)
     §3 .stage-services   → .sec-menu (services list, grouped by division)
     §4 .stage-people     → .sec-people (Jenna / Jon / Vitor + client wheels)

   Each new <section> is a .stage-flat: a ≥100vh band whose
   .stage-text wrapper carries ONLY the master scroll-opacity
   (set per-frame by the render loop in index.html).

   Self-contained widgets; selectors scoped under their .sec-* root,
   prefixes div- / menu- / who-.
   ============================================================ */
/* `.stage.stage-flat` (0,2,0) so these win over the base `.stage { height:100vh;
   display:flex }` which lives in index.html's inline <style> (loaded AFTER this
   file). Without the extra class the flat sections stayed a fixed 100vh flex
   box, so on mobile the tall stacked content overflowed and the footer landed
   in the middle of the last section instead of at the bottom. */
.stage.stage-flat {
  height: auto;
  min-height: 100vh;
  display: block;
  padding: 0;
  align-items: initial;
  justify-content: initial;
  pointer-events: auto;
}
/* Neutralise the base .stage-text sticky-centre pattern — these
   sections are laid out by their own component root. .stage-text
   here is a transparent pass-through that only holds the master
   opacity (base rule keeps opacity:0 + the 0.5s transition). */
.stage.stage-flat > .stage-text {
  position: static;
  top: auto;
  transform: none;
  max-width: none;
  width: 100%;
  margin: 0;
  text-align: left;
  pointer-events: auto;
}

/* No-WebGL fallback ------------------------------------------------------
   The homepage render loop (which reveals every .stage-text and paints the
   sky) only runs when WebGL is available. Without it, index.html adds
   html.no-webgl; then we reveal the editorial content and lay a static
   day→night gradient behind it so the page is legible instead of blank. */
html.no-webgl .stage-text { opacity: 1 !important; }
html.no-webgl body.home {
  background: linear-gradient(180deg,
    #e6eef7 0%, #4a86d8 17%, #327CDC 34%,
    #9a7b3e 55%, #1D285D 80%, #05070f 100%) !important;
}


/* ==================== divisions ==================== */
.sec-divisions {
  --div-cream: #F4F7F2;
  --div-muted: rgba(244, 247, 242, 0.62);
  --div-hair: rgba(244, 247, 242, 0.16);
  --div-hi: #20B8A0;   /* one unified hover highlight for every division (brand teal) */
  min-height: 100vh;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: clamp(48px, 9vh, 120px) clamp(24px, 6vw, 96px);
  font-family: var(--sans, 'Helvetica Neue', Helvetica, Arial, sans-serif);
  color: var(--div-cream);
}

.sec-divisions *,
.sec-divisions *::before,
.sec-divisions *::after {
  box-sizing: border-box;
}

.sec-divisions .div-inner {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 40% 60%;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

/* ---------- LEFT ---------- */
.sec-divisions .div-left {
  align-self: center;
}

.sec-divisions .div-overline {
  margin: 0 0 clamp(20px, 3vw, 36px);
  font-size: var(--type-caption, 11px);
  text-transform: uppercase;
  letter-spacing: var(--ls-atmospheric, 0.4em);
  color: var(--div-muted);
  opacity: 0.22;
  transition: opacity 0.9s cubic-bezier(.2,.7,.2,1);
}

.sec-divisions .div-phrase {
  margin: 0;
  font-weight: 300;
  font-size: clamp(30px, 4.6vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--div-cream);
}

.sec-divisions .div-sub {
  margin: clamp(18px, 2.4vw, 28px) 0 0;
  font-weight: 400;
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.45;
  color: var(--div-muted);
  max-width: 30ch;
}

/* ---------- RIGHT ---------- */
.sec-divisions .div-right {
  position: relative;
  display: flex;
  flex-direction: column;
  /* No panel — the links sit directly on the blue sky, like the left column. */
  padding: 0;
}

.sec-divisions .div-row {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--div-cream);
  padding: clamp(20px, 3vw, 34px) 0;
  border-top: 1px solid var(--div-hair);
  /* reveal state */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s cubic-bezier(.2,.7,.2,1),
              transform 0.7s cubic-bezier(.2,.7,.2,1);
}

.sec-divisions .div-row:first-child {
  border-top: none;
}

.sec-divisions .div-row.div-in {
  opacity: 1;
  transform: none;
}

/* stagger */
.sec-divisions .div-row:nth-child(1) { transition-delay: 0.05s; }
.sec-divisions .div-row:nth-child(2) { transition-delay: 0.15s; }
.sec-divisions .div-row:nth-child(3) { transition-delay: 0.25s; }
.sec-divisions .div-row:nth-child(4) { transition-delay: 0.35s; }

.sec-divisions .div-label {
  position: relative;
  display: inline-block;
  font-weight: 300;
  font-size: clamp(30px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--div-cream);
  transition: color 0.5s cubic-bezier(.2,.7,.2,1);
}

.sec-divisions .div-arrow {
  display: inline-block;
  margin-left: 0.24em;
  font-weight: 300;
  opacity: 0;
  transform: translateX(-0.35em);
  transition: opacity 0.45s cubic-bezier(.2,.7,.2,1),
              transform 0.45s cubic-bezier(.2,.7,.2,1);
  color: var(--div-hi);
}

.sec-divisions .div-underline {
  position: absolute;
  left: 0;
  bottom: -0.08em;
  height: 1px;
  width: 100%;
  background: var(--div-hi);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s cubic-bezier(.2,.7,.2,1);
}

.sec-divisions .div-desc {
  display: block;
  margin-top: clamp(10px, 1.2vw, 16px);
  font-size: var(--type-caption, 11px);
  text-transform: uppercase;
  letter-spacing: var(--ls-caption, 0.22em);
  color: var(--div-muted);
  transition: color 0.5s cubic-bezier(.2,.7,.2,1);
}

/* hover / focus */
.sec-divisions .div-row:hover .div-label,
.sec-divisions .div-row:focus-visible .div-label {
  color: var(--div-hi);
}

.sec-divisions .div-row:hover .div-arrow,
.sec-divisions .div-row:focus-visible .div-arrow {
  opacity: 1;
  transform: translateX(0);
}

.sec-divisions .div-row:hover .div-underline,
.sec-divisions .div-row:focus-visible .div-underline {
  transform: scaleX(1);
}

.sec-divisions .div-row:hover .div-desc,
.sec-divisions .div-row:focus-visible .div-desc {
  color: rgba(244, 247, 242, 0.85);
}

.sec-divisions .div-row:focus-visible {
  outline: none;
}

.sec-divisions .div-row:focus-visible .div-label {
  text-shadow: 0 0 0 transparent;
}

/* when the section is active, light the overline up */
.sec-divisions.div-active .div-overline {
  opacity: 1;
}

/* ---------- MOBILE ---------- */
@media (max-width: 720px) {
  .sec-divisions {
    padding: clamp(56px, 12vh, 96px) 20px;
  }
  .sec-divisions .div-inner {
    grid-template-columns: 1fr;
    gap: clamp(32px, 8vw, 48px);
    align-items: start;
  }
  .sec-divisions .div-phrase {
    font-size: clamp(30px, 8.5vw, 46px);
  }
  .sec-divisions .div-right {
    padding: clamp(6px, 3vw, 16px) clamp(16px, 5vw, 24px);
  }
  .sec-divisions .div-arrow {
    opacity: 1;
    transform: none;
  }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .sec-divisions .div-overline,
  .sec-divisions .div-row,
  .sec-divisions .div-label,
  .sec-divisions .div-arrow,
  .sec-divisions .div-underline,
  .sec-divisions .div-desc {
    transition: none !important;
  }
  .sec-divisions .div-row {
    opacity: 1;
    transform: none;
  }
  .sec-divisions .div-overline {
    opacity: 1;
  }
}

/* ==================== services menu (no panel — reads directly on the sky) ==================== */
.sec-menu{
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* extra bottom padding opens a clear gap of sky before the next
     section (People), so §3 and §4 read as separate pages. */
  padding: clamp(64px, 10vh, 128px) clamp(20px, 5vw, 84px) clamp(120px, 20vh, 260px);
  color: #F7FAF6;
  -webkit-font-smoothing: antialiased;
}
.sec-menu *{ box-sizing: border-box; }
.sec-menu .menu-inner{ width: 100%; max-width: 1180px; }
.sec-menu .menu-head{ text-align: center; margin: 0 0 clamp(24px, 4vh, 48px); }
.sec-menu .menu-eyebrow{
  margin: 0 0 14px;
  font-size: var(--type-caption, 11px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-atmospheric, 0.4em);
  color: rgba(247,250,246,0.72);
}
.sec-menu .menu-title{
  margin: 0 auto;
  max-width: 28ch;
  font-weight: 300;
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}
/* five division bands stacked, each: NAME | services (2-col) */
.sec-menu .menu-grid{ display: flex; flex-direction: column; }
.sec-menu .menu-group{
  display: grid;
  grid-template-columns: minmax(140px, 210px) 1fr;
  gap: clamp(16px, 3vw, 56px);
  align-items: start;
  padding: clamp(15px, 2vh, 24px) 0;
  border-top: 1px solid rgba(247,250,246,0.18);
}
.sec-menu .menu-group:first-child{ border-top: none; }
.sec-menu .menu-group-name{
  margin: 0;
  font-weight: 500;
  font-size: clamp(24px, 2.8vw, 40px);
  line-height: 1.0;
  letter-spacing: -0.015em;
  color: #F7FAF6;
}
/* two explicit columns per division: column 1 holds the first half of the
   numbered services (top→bottom), column 2 the rest. */
.sec-menu .menu-cols{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px clamp(24px, 3vw, 56px);
  align-items: start;
}
.sec-menu .menu-list{ list-style: none; margin: 0; padding: 0; }
.sec-menu .menu-list li{
  position: relative;
  padding: 5px 0 5px 18px;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.4;
  font-weight: 300;
  color: rgba(247,250,246,0.92);
  transition: color .2s ease, transform .2s ease;
}
.sec-menu .menu-list li::before{
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(247,250,246,0.5);
}
.sec-menu .menu-list li:hover{ color: #FFFFFF; transform: translateX(3px); }
@media (max-width: 860px){
  .sec-menu .menu-group{ grid-template-columns: 1fr; gap: 10px; }
  .sec-menu .menu-group-name{ font-size: clamp(22px, 6vw, 32px); }
  .sec-menu .menu-cols{ grid-template-columns: 1fr; }
}

/* ==================== people ==================== */
/* ============================================================
   WHO WE ARE  —  root .sec-people , child prefix who-
   Floats over the fixed night sky. Dark translucent glass cards.
   ============================================================ */

.sec-people{
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(64px, 10vh, 140px) clamp(20px, 5vw, 72px);
  /* No background — the section shows the live WebGL sky (night at the bottom
     of the scroll, with fireflies). Tune those colours via the #debug panel. */
  color: var(--cream, #F4F7F2);
  font-family: var(--sans, 'Helvetica Neue', Helvetica, Arial, sans-serif);
}
.sec-people *{ box-sizing: border-box; }

.who-inner{
  width: 100%;
  max-width: 1240px;
}

/* ---- section eyebrow ---- */
.who-eyebrow-section{
  margin: 0 0 12px;
  font-size: var(--type-caption, 11px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-caption, 0.22em);
  color: rgba(247,250,246,0.7);
  text-align: center;
}
/* section title + subtitle — same header pattern as the other pages */
.who-title{
  margin: 0 auto clamp(56px, 9vh, 120px);   /* extra breathing room before the cards */
  max-width: 24ch;
  text-align: center;
  font-weight: 300;
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}
.who-subtitle{
  margin: 14px auto clamp(30px, 5vh, 54px);
  max-width: 46ch;
  text-align: center;
  font-weight: 300;
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.5;
  color: rgba(247,250,246,0.72);
}

/* ---- grid ---- */
.who-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: stretch;
}

/* ---- card (frosted dark-teal glass) ---- */
.who-card{
  min-width: 0;               /* keep the 3-col grid from collapsing to 1 col */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0;
  /* No card panel — each person reads directly on the blue sky. */
  text-shadow: 0 1px 16px rgba(4, 12, 24, 0.4);

  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity .8s cubic-bezier(.2,.7,.2,1),
    transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--who-i, 0) * 0.12s);
}
.who-card.who-in{
  opacity: 1;
  transform: none;
}

/* ---- portrait / placeholder ---- */
.who-portrait{
  position: relative;
  width: clamp(156px, 19.5vw, 204px);   /* circular avatar (50% larger) */
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 18px;
  /* placeholder gradient sits underneath the photo */
  background: linear-gradient(150deg, rgba(32,184,160,0.55), rgba(120,72,176,0.55));
}
.who-portrait::after{             /* initials placeholder */
  content: attr(data-initials);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', var(--sans, sans-serif);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  color: rgba(244,247,242, 0.92);
  letter-spacing: 0.02em;
}
.who-photo{
  position: relative;   /* stacks above ::after when present */
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.who-photo--hidden{ display: none; }   /* onerror -> reveal placeholder */

/* ---- text block ---- */
.who-role{
  margin: 0 0 8px;
  font-size: var(--type-caption, 11px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-caption, 0.22em);
  color: rgba(247,250,246,0.66);
}
.who-name{
  margin: 0 0 12px;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.08;
  color: var(--cream, #F4F7F2);
}
.who-bio{
  margin: 0 0 18px;
  font-size: var(--type-body, 16px);
  line-height: 1.5;
  color: rgba(244,247,242, 0.62);
}
/* LinkedIn link under each bio */
.who-linkedin{
  display: inline-flex;
  align-items: center;
  opacity: 0.72;
  transition: opacity .2s ease, transform .2s ease;
}
.who-linkedin:hover{ opacity: 1; transform: translateY(-1px); }
.who-linkedin img{
  width: 22px; height: 22px;
  display: block;
  /* the source PNG is black; lift it to light so it reads on the gradient */
  filter: brightness(0) invert(1);
}

/* ---- credentials delimiter ----
   A short, subtle line under the description that sets off each person's
   clients (which now float directly below). Not full-width / not strong. */
.who-credline{
  width: 40px;
  height: 1px;
  border: none;
  background: rgba(244,247,242, 0.28);
  margin: clamp(18px, 2.4vh, 26px) 0 clamp(14px, 1.8vh, 18px);
}

/* ---- client wheel (marquee) ---- */
.who-wheel{
  position: relative;
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.who-wheel-track{
  display: flex;
  width: max-content;
  will-change: transform;
  animation: who-marquee 26s linear infinite;
}
.who-wheel:hover .who-wheel-track,
.who-wheel:focus-within .who-wheel-track{
  animation-play-state: paused;
}
@keyframes who-marquee{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }   /* content is duplicated 2x */
}

/* ---- client chip ---- */
/* client wheel — names only (icons removed), a middot between each */
.who-chip{
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-right: 1.5rem;   /* item owns its spacing so the cloned track loops seamlessly */
  font-size: clamp(12px, 1vw, 13.5px);
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: rgba(244,247,242, 0.8);
}
.who-chip::after{
  content: "·";
  margin-left: 1.5rem;
  color: rgba(244,247,242, 0.38);
}
.who-chip-ico{ display: none; }   /* icon removed */

/* ============ responsive ============ */
@media (max-width: 900px){
  .who-grid{ grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  /* keep the avatar circular on mobile too */
}
@media (max-width: 720px){
  .who-credline{ margin-top: 14px; }
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce){
  .who-card{
    opacity: 1;
    transform: none;
    transition: none;
  }
  .who-wheel-track{ animation: none; }
  .who-wheel{
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
}