/* ===========================================================================
   STRATEGY SECTION (#strategy) — copywriting coming soon; copy is PLACEHOLDER. Was the ethos block: a two-line masked heading, numbered rows,
   a drawn underline per row, and a hover-reveal image. Same interaction genre
   as agency ethos sections (masked reveals + scroll choreography), executed at
   scale on Download's tokens + two-face type system. Scroll JS: js/ethos.js.
   =========================================================================== */
.sec--strategy {
  position: relative;
  max-width: 1320px;
}

/* Ambient WebGL field (js/ethos-bg.js). Sits behind everything in the section
   and fades to nothing at its own edges, so the section still reads as the
   site's white grain — just with a slow charcoal drift underneath. */
/* Ambient WebGL field (js/ethos-bg.js) DISABLED: it read as a "smoothed over"
   charcoal gradient that broke the page's consistent grain. Hidden so the
   section falls back to the .pages #fff + noise.png texture like every other
   section (this is ethos-bg.js's own documented no-WebGL fallback). */
.ethos-bg { display: none; }
.sec--strategy > *:not(.ethos-bg) {
  position: relative;
  z-index: 1;
}

/* --- Two-line heading — a real display moment. Each line is masked so it can
   slide up into view. Big, tight, confident. --- */
/* matches the site-wide stepped masthead (.sec-title); the two lines keep their
   mask wrappers so ethos.js can still slide them up on scroll */
.ethos__heading {
  margin: 0 0 clamp(2.6rem, 6vw, 5rem);
  font-weight: 500;
  font-size: clamp(2.8rem, 9vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .ethos__heading { font-size: clamp(2.4rem, 13vw, 4.4rem); }
}
/* Process reads CENTRED (echoes the "Brand-led. / Strategically built."
   reference) but now borrows a bit of the site's stepped-masthead staircase for
   read-consistency: centred, a touch larger, and the 2nd line steps in. Still
   well under the full .sec-title scale. Masked wrappers stay for ethos.js. */
.ethos__heading--center {
  text-align: center;
  font-size: clamp(2.6rem, 6.2vw, 5.4rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin-bottom: clamp(2.8rem, 6vw, 4.8rem);
}
.ethos__heading--center .ethos__line-mask:nth-child(2) {
  margin-left: clamp(1rem, 5vw, 3.4rem); /* the step */
}
@media (max-width: 720px) {
  .ethos__heading--center { font-size: clamp(1.5rem, 7.4vw, 2.3rem); }
  /* no step on narrow — keep it centred and fitting the measure */
  .ethos__heading--center .ethos__line-mask:nth-child(2) { margin-left: 0; }
}
.ethos__line-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em; /* room for descenders inside the mask */
}
.ethos__line-mask > span {
  display: inline-block;
  will-change: transform;
}

/* --- The numbered rows --- */
.ethos__rows {
  border-top: 1px solid var(--hair); /* page-consistent hairline, not heavy ink */
}
/* rows above the ambient field; small logo sits between field and rows */
.sec--strategy .ethos__rows { position: relative; z-index: 2; }
/* Condensed by default: each row is just its index + title. Hovering opens it
   vertically to reveal the copy below (see the hover block further down). */
.ethos-row {
  position: relative;
  display: grid;
  /* number + title left · description right (collapsed until hover) */
  grid-template-columns: minmax(0, 1fr) minmax(0, 44ch);
  align-items: start;
  column-gap: clamp(2rem, 7vw, 7rem);
  /* Consistent on every row so the hairlines sit evenly; a touch more padding so
     each row is a comfortable, easy-to-land hover/tap target. */
  padding-block: clamp(1.25rem, 2.3vw, 1.75rem);
}
/* index sits above its statement heading */
.ethos-row__top { display: flex; flex-direction: column; }
.ethos-row__num {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  line-height: 1;
  margin-bottom: clamp(0.4rem, 0.9vw, 0.6rem);
}
.ethos-row__head-mask {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.08em;
}
.ethos-row__head {
  margin: 0;
  display: inline-block;
  font-weight: 500;
  font-size: var(--fs-statement); /* sits under the section head, not above it */
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink-faint); /* faded until the row is engaged */
  transition: color 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.45s cubic-bezier(0.62, 0.05, 0.24, 1);
  will-change: transform;
}
/* the description lives in the RIGHT column; justified + balanced, revealed and
   grown in on hover so it fills the empty space toward the middle */
/* the reveal is a 1-row grid whose track animates 0fr -> 1fr; the copy clips to
   it so the row height eases open with an iOS-smooth glide (no max-height jank) */
.ethos-row__reveal {
  grid-column: 2;
  display: grid;
  grid-template-rows: 1fr;               /* open by default (touch / no-JS) */
  /* slower, softer glide — gentle start (no snap), smooth settle */
  transition: grid-template-rows 0.78s cubic-bezier(0.4, 0, 0.2, 1);
}
.ethos-row__copy {
  margin: 0;
  overflow: hidden;                      /* clipped as the track collapses */
  min-height: 0;
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lead-read);
  letter-spacing: -0.005em;
  color: var(--ink-body);
  text-align: justify;
  text-align-last: left;
  text-wrap: pretty;
  hyphens: none;
}

/* drawn underline — faint hair baseline with an ink line that draws across on
   scroll; defaults to fully drawn so it's correct with no JS. */
.ethos-row__line {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--hair);
}
.ethos-row__line-inner {
  display: none; /* no drawn ink line — flat hairline matches the rest of the page */
}

/* Per-section image trailing the cursor, BEHIND the row text (z-index 1). Each
   row reveals its own transparent PNG; images crossfade as you move between rows.
   The container drifts on a slow idle bob (barely-there life); each image snaps
   in with a quick fade + a subtle iOS-style scale pop (a hair of overshoot),
   and reverses on leave. No blur. */
.sec--strategy .ethos-follow {
  position: fixed;
  top: 0; left: 0;
  z-index: 1;
  pointer-events: none;
  animation: ethosBob 4s ease-in-out infinite;
}
.sec--strategy .ethos-follow__img {
  position: absolute;
  left: 0; top: 0;
  width: auto; height: auto;
  /* all six object cutouts share one uniform 300x320 canvas -> one size */
  max-width: 220px;
  max-height: 235px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
  transition: opacity 0.16s ease-out,
              transform 0.26s cubic-bezier(0.2, 1.15, 0.32, 1);
  will-change: opacity, transform;
}
.sec--strategy .ethos-follow__img.is-shown {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
@keyframes ethosBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .sec--strategy .ethos-follow { animation: none; }
  .sec--strategy .ethos-follow__img {
    transform: translate(-50%, -50%);
    transition: opacity 0.16s linear;
  }
  .sec--strategy .ethos-follow__img.is-shown { transform: translate(-50%, -50%); }
}

/* desktop: description hides until its row is hovered; title inks + nudges */
@media (hover: hover) and (pointer: fine) {
  /* Closed: reveal track collapsed to 0 -> the row hugs its number + title, and
     every row shares the same tight spacing. Hovering a row EXPANDS just that
     one: the track eases 0fr -> 1fr (easeOutQuint), sliding its hairline down as
     the body text fades in. One curve everywhere for that iOS-smooth feel. */
  .ethos-row__reveal { grid-template-rows: 0fr; }
  .ethos-row__copy {
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }
  .ethos-row:hover .ethos-row__reveal,
  .ethos-row:focus-within .ethos-row__reveal { grid-template-rows: 1fr; }
  .ethos-row:hover .ethos-row__head,
  .ethos-row:focus-within .ethos-row__head { color: var(--ink); }
  .ethos-row:hover .ethos-row__copy,
  .ethos-row:focus-within .ethos-row__copy { opacity: 1; pointer-events: auto; }
}

/* Keyboard access: rows are focusable (tabindex in markup); a clear focus ring,
   and reduced-motion users get the reveal without the animation. */
.ethos-row:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .ethos-row__reveal { transition: none; }
  .ethos-row__copy { transition: none; }
  .ethos-row__head { transition: color 0.15s linear; }
}

/* touch / narrow: single column, no cursor logo. Rows are CLOSED accordions —
   each title carries a hairline chevron button on the right (injected by
   ethos.js); tapping the row glides its copy open on the same track the
   desktop hover uses, so the mechanic feels identical across inputs. */
/* row thumbs exist only on the touch/narrow path (injected by ethos.js);
   hidden by default so a coarse-pointer desktop never shows them unstyled */
.ethos-row__thumb { display: none; }

@media (max-width: 1023px) {
  .ethos-row {
    grid-template-columns: 1fr;
    column-gap: 0;
    padding-block: clamp(1.1rem, 3vw, 1.6rem);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .ethos-row__head { color: var(--ink); }
  /* title row holds the thumb + chevron: reserve their lane on the right */
  .ethos-row__top { position: relative; padding-right: 7.6rem; }
  /* The step's strategy loop — the same animated webp the desktop hover
     shows — always playing, a small PORTRAIT card sitting between the title
     and the chevron, centred between the row's hairlines. The square wrapper
     is the rotation stage: on open the card turns sideways (iOS sheet curve)
     and keeps playing, landscape — and turns back on close. */
  .ethos-row__thumb {
    position: absolute;
    right: 3.9rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    pointer-events: none;
  }
  .ethos-row__thumb img {
    width: 2rem;
    height: 3rem;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 1px 6px rgba(56, 57, 61, 0.14);
    transition: transform 0.55s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
  }
  .ethos-row.is-open .ethos-row__thumb img { transform: rotate(90deg); }
  .ethos-row__chev {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    padding: 0;
    background: transparent;
    border: 1px solid var(--hair);
    border-radius: 50%;
    color: var(--ink-soft);
    cursor: pointer;
  }
  .ethos-row__chev svg {
    width: 44%;
    height: 44%;
    transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .ethos-row__reveal { grid-column: 1; grid-template-rows: 0fr; } /* closed until tapped */
  .ethos-row__copy {
    opacity: 0;
    text-align: left;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                margin-top 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .ethos-row.is-open .ethos-row__reveal { grid-template-rows: 1fr; }
  .ethos-row.is-open .ethos-row__copy {
    opacity: 1;
    margin-top: clamp(0.6rem, 2vw, 0.9rem);
  }
  .ethos-row.is-open .ethos-row__chev { color: var(--ink); border-color: var(--ink); }
  .ethos-row.is-open .ethos-row__chev svg { transform: rotate(180deg); }
  .sec--strategy .ethos-follow { display: none; }
}

/* (The transition sign-off that used to live here moved to the services
   section — see .services__outro in skew-cards.css.) */

/* reduced motion: the row thumbs are always-animating media — omit them */
@media (prefers-reduced-motion: reduce) {
  .ethos-row__thumb { display: none !important; }
}