/* Homepage flow: one idea per screen, big type, calm surfaces. Loaded last, home only. */
.where-intro { display: grid; place-items: center; min-height: clamp(26rem, 70svh, 46rem); padding-block: clamp(4rem, 8vw, 8rem); }
.where-intro h2 { font-size: clamp(3.4rem, 8vw, 8.5rem); line-height: .9; text-wrap: balance; }

/* Team sits on the page surface, not in a black block. */
.team { background: var(--ink); color: var(--cream); padding-block: clamp(5rem, 9vw, 9rem) clamp(3rem, 5vw, 5rem); }
.team h2 { font-size: clamp(3.4rem, 7vw, 8rem); margin-bottom: .75rem; }
.team-intro { color: var(--cream); font-size: clamp(1.05rem, 1.4vw, 1.3rem); margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.team-track { gap: clamp(1rem, 2vw, 2rem); }
.person h3 { font-size: 1rem; margin-top: .85rem; }
.person p { color: var(--cream); font-size: .85rem; }
.team-dots i { background: #666; }
.team .services-cta { margin-top: clamp(2rem, 4vw, 3.5rem); }
.team .services-cta-link { color: var(--cream); }

/* Proof reads as a quiet supporting line. */
/* Proof lives inside the people chapter as one quiet line. */
.team .experience { padding-block: clamp(3rem, 5vw, 5rem) 0; }
.team .experience .eyebrow { color: var(--cream); }
.team .experience .logos img { filter: grayscale(1) invert(1) brightness(1.6); opacity: .55; }

@media (max-width: 720px) {
  .hero h1 { font-size: clamp(3.4rem, 15vw, 6rem); line-height: .88; }
  .hero-copy p { font-size: 1.2rem; line-height: 1.3; }
  .where-intro { min-height: 78svh; padding-block: 3rem; }
  .where-intro h2 { font-size: clamp(2.6rem, 12.5vw, 4rem); }
  .team { padding-block: 4.5rem 3.5rem; }
  .team h2 { font-size: clamp(3.6rem, 18vw, 5.5rem); }
  .team-intro { font-size: 1.15rem; }
  .person { min-width: 76vw; }
  .person h3 { font-size: 1.15rem; }
  .person p { font-size: .95rem; }
  .team .experience { padding-block: 3rem 0; }
}

/* Phone team row: real swipe cards with a gap, a peek of the next card, and captions that stay inside their card. */
@media (max-width: 720px) {
  .team-track {
    display: flex;
    grid-template-columns: none;
    width: 100%;
    gap: 1rem;
    padding-inline: 4vw;
    scroll-padding-inline: 4vw;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .team-track .person { flex: 0 0 72vw; min-width: 0; width: 72vw; scroll-snap-align: start; }
  .team-track .portrait { width: 100%; }
  .team-track .person h3, .team-track .person p { white-space: normal; overflow-wrap: anywhere; }
  .team-dots { display: none; }
}

/* Tighter rhythm between hero and the first statement. */
.where-intro { min-height: 0; padding-block: clamp(3rem, 6vw, 6rem); }
@media (max-width: 720px) {
  .hero { padding-bottom: 0; }
  .where-intro { min-height: 0; padding-block: 2.5rem 3rem; }
}

/* Scroll-led statements: words light up as you read, as on the reference sites. */
.is-word-reveal .w { opacity: .2; transition: opacity .12s linear; }
.is-word-reveal .word { display: inline-block; white-space: nowrap; }
.is-word-reveal .c { opacity: .2; transition: opacity .12s linear; }
.is-word-reveal .word.w { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .is-word-reveal .w { opacity: 1; transition: none; } }

/* Four moves: cards that collect on each other as you scroll. */
.drift-tempo .process-flow { display: none; }
.moves { padding-block: clamp(5rem, 10vw, 11rem) clamp(4rem, 8vw, 8rem); }
.moves-title { margin: 0 0 clamp(2.5rem, 6vw, 6rem); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: -.025em; line-height: .9; font-size: clamp(3.4rem, 8vw, 8.5rem); }
.moves-title span { color: var(--orange); }
.moves-stack { list-style: none; margin: 0; padding: 0; }
.move { position: sticky; top: calc(1.25rem + var(--n, 0) * 1.1rem); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-areas: "num num" "title copy"; align-content: space-between; gap: 1.5rem 3rem; min-height: min(68svh, 40rem); margin-bottom: 1.25rem; padding: clamp(1.5rem, 3vw, 3rem); border-radius: 1.5rem; }
.move:nth-child(1) { --n: 0; } .move:nth-child(2) { --n: 1; } .move:nth-child(3) { --n: 2; } .move:nth-child(4) { --n: 3; }
.move-sand { --tile: #e8e3d4; --on: var(--ink); }
.move-rust { --tile: #b8360f; --on: var(--cream); }
.move-orange { --tile: var(--orange); --on: var(--ink); }
.move-ink { --tile: var(--ink); --on: var(--cream); }
.move { background: var(--tile); color: var(--on); }
.move-num { grid-area: num; font-weight: 700; font-size: .85rem; letter-spacing: .16em; }
.move h3 { grid-area: title; align-self: end; margin: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: -.025em; line-height: .86; font-size: clamp(4.2rem, 11vw, 12rem); }
.move p { grid-area: copy; align-self: end; margin: 0; font-size: clamp(1.25rem, 2vw, 1.9rem); line-height: 1.2; letter-spacing: -.02em; max-width: 24rem; }
@media (max-width: 720px) {
  .moves { padding-block: 5rem 3rem; }
  .move { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto; grid-template-areas: "num" "." "title" "copy"; align-content: normal; min-height: clamp(18rem, 44svh, 23rem); top: calc(1rem + var(--n, 0) * 2.6rem); padding-top: 1rem; gap: 1rem; }
  .move h3 { align-self: end; font-size: clamp(3.4rem, 17.5vw, 6rem); }
  .move p { align-self: start; font-size: 1.3rem; margin-top: .75rem; }
}

/* Docked bar: chapter name plus the one action, always in reach. */
.chapter-pill { position: fixed; z-index: 40; bottom: 1rem; left: 0; right: 0; width: fit-content; margin-inline: auto; display: flex; gap: .75rem; align-items: center; padding: .4rem .4rem .4rem 1rem; border-radius: 99px; background: rgba(13,13,12,.9); color: var(--cream); border: 1px solid rgba(245,242,234,.16); font-size: .82rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap; text-decoration: none; opacity: 0; pointer-events: none; transform: translateY(1.2rem) scale(.96); transition: opacity .5s cubic-bezier(.22,.8,.3,1), transform .6s cubic-bezier(.22,.8,.3,1); backdrop-filter: blur(8px); }
/* Centred by layout (left/right 0 + auto margins), never by translate(-50%): while the pill slides in, iPhone Safari keeps
   the -50% it measured at the start, so as the label opened the pill grew off to the right and then jumped to the middle. */
.chapter-pill.is-on { opacity: 1; pointer-events: auto; transform: none; }
.chapter-pill__n { display: none; }
.chapter-pill__cta { padding: .6rem 1rem; border-radius: 99px; background: var(--orange); color: var(--ink); }
.chapter-pill:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
@media (max-width: 360px) { .chapter-pill__t { display: none; } .chapter-pill { padding-left: .4rem; } }
@media (prefers-reduced-motion: reduce) { .chapter-pill { transition: none; } }

/* Heading and lead side by side on desktop, stacked on phones. */
.moves-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-bottom: clamp(2.5rem, 6vw, 6rem); }
.moves-head .moves-title { margin: 0; }
.moves-lead { margin: 0; max-width: 28rem; font-size: clamp(1.1rem, 1.5vw, 1.4rem); line-height: 1.3; letter-spacing: -.02em; }
@media (min-width: 900px) { .moves-head { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; } }

/* Rounded chapters and portraits, matching the tiles. */
/* Chapters run edge to edge, as on the reference sites. Only tiles and photos get rounded corners. */
.portrait { border-radius: 1.1rem; }

/* Desktop: wider breathing room between chapters. */
@media (min-width: 721px) {
  .team { padding-block: clamp(6rem, 11vw, 11rem) clamp(3rem, 5vw, 5rem); }
}

/* Desktop: a row of rounded tiles with the caption underneath, as on the reference sites. Phones keep the stacking cards. */
@media (min-width: 721px) {
  .moves-stack { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.75rem, 1.4vw, 1.5rem); align-items: start; }
  .move { position: static; display: grid; background: none; color: var(--ink); min-height: 0; margin: 0; padding: 0; border-radius: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto clamp(13rem, 17vw, 23rem) auto; grid-template-areas: none; gap: 0; }
  .move::before { content: ''; grid-area: 1 / 1 / 3 / 2; background: var(--tile); border-radius: 1.1rem; }
  .move-num { grid-area: 1 / 1; z-index: 1; color: var(--on); padding: clamp(1rem, 1.6vw, 1.75rem) clamp(1rem, 1.6vw, 1.75rem) 0; }
  .move h3 { grid-area: 2 / 1; z-index: 1; align-self: end; color: var(--on); font-size: clamp(2.2rem, 4.2vw, 5.4rem); line-height: .86; margin: 0; padding: 0 clamp(1rem, 1.6vw, 1.75rem) clamp(1rem, 1.6vw, 1.75rem); }
  .move p { grid-area: 3 / 1; margin: .9rem 0 0; max-width: 22rem; font-size: clamp(1rem, 1.25vw, 1.3rem); color: var(--ink); }
}
@media (min-width: 721px) and (max-width: 1000px) {
  .moves-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .move h3 { font-size: clamp(3.4rem, 9vw, 6rem); }
}

/* Letter spans must keep the color of the line they belong to. */
.where-intro h2 .w, .where-intro h2 .c { color: inherit; }

/* Scroll motion (motion.js): sections rise inset with rounded top corners, then widen to full width */
.team, .contact {
  margin-inline: calc((1 - var(--rise, 1)) * 5vw);
  border-radius: calc((1 - var(--rise, 1)) * 1.8rem) calc((1 - var(--rise, 1)) * 1.8rem) 0 0;
}
.team[data-rise] {
  --rise: 0;
}
[data-focus] { will-change: filter, opacity; }
@media (prefers-reduced-motion: reduce) {
  .team, .contact { margin-inline: 0; border-radius: 0; }
  [data-focus] { filter: none !important; opacity: 1 !important; }
}

.chapter-pill__t { display: inline-block; overflow: hidden; white-space: nowrap; transition: width .45s cubic-bezier(.22,.8,.3,1); }
.chapter-pill__tt { display: inline-block; transition: opacity .18s ease, transform .18s ease; }
.chapter-pill__tt.is-out { opacity: 0; transform: translateY(.35em); }
@media (prefers-reduced-motion: reduce) { .chapter-pill__t, .chapter-pill__tt { transition: none; } }

.drift-tempo-title .drift-word, .drift-tempo-title .tempo-word { display: inline-block; }


/* While the handoff follows the scroll, the headline pieces must not lag behind on their reveal transitions */
.drift-tempo.is-scrubbing .drift-word, .drift-tempo.is-scrubbing .drift-tempo-title b, .drift-tempo.is-scrubbing .tempo-word { transition: none !important; }

/* Calm reveal: words, arrow and paragraphs all arrive the same way (soft focus to sharp), with no sliding or resizing */
.drift-word, .drift-tempo-title b, .tempo-word, .drift-copy, .tempo-copy { transform: none; }
.drift-word, .tempo-word, .drift-copy, .tempo-copy, .drift-tempo-title b { filter: blur(10px); }
.drift-tempo[data-stage="1"] .drift-word, .drift-tempo[data-stage="2"] .drift-word,
.drift-tempo[data-stage="1"] .drift-copy, .drift-tempo[data-stage="2"] .drift-copy,
.drift-tempo[data-stage="2"] .drift-tempo-title b, .drift-tempo[data-stage="2"] .tempo-word, .drift-tempo[data-stage="2"] .tempo-copy { filter: blur(0); }
@media (max-width: 720px) { .drift-word, .drift-tempo-title b, .tempo-word, .drift-copy, .tempo-copy { filter: none; } }

/* Docked section nav: a dot per chapter; the active dot opens into its name */
.chapter-pill { gap: .25rem; padding: .3rem .3rem .3rem .55rem; text-decoration: none; }
.chapter-pill__dots { display: flex; align-items: center; }
.chapter-dot { display: inline-flex; align-items: center; gap: 0; padding: .65rem .42rem; min-height: 2.4rem; background: none; border: 0; color: var(--cream); font: inherit; font-size: .82rem; font-weight: 700; letter-spacing: .01em; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.chapter-dot i { display: block; flex: none; width: .45rem; height: .45rem; border-radius: 50%; background: rgba(245,242,234,.38); transition: background .4s ease, transform .4s ease; }
.chapter-dot:hover i { background: rgba(245,242,234,.8); }
.chapter-dot__t { display: block; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; transition: max-width .55s cubic-bezier(.22,.8,.3,1), opacity .35s ease, margin .55s cubic-bezier(.22,.8,.3,1); margin-left: 0; }
.chapter-dot.is-active { padding-inline: .5rem; }
.chapter-dot.is-active i { background: var(--orange); transform: scale(1.25); }
.chapter-dot.is-active .chapter-dot__t { max-width: var(--w, 12rem); opacity: 1; margin-left: .55rem; }
.chapter-dot:focus-visible { outline: none; }
.chapter-dot:focus-visible i { box-shadow: 0 0 0 4px rgba(245,242,234,.45); }
.chapter-pill__cta { display: inline-block; }
@media (max-width: 520px) {
  .chapter-pill { max-width: calc(100vw - 1.5rem); padding-left: .3rem; }
  .chapter-dot { padding-inline: .3rem; }
  /* the name gets all the room the pill has left on this screen (chapter-pill.js sets --labmax), and ends in "…" if it still cannot fit */
  .chapter-dot.is-active .chapter-dot__t { max-width: min(var(--w, 9rem), var(--labmax, 7.5rem)); text-overflow: ellipsis; }
  .chapter-pill__cta-long { display: none; }
}
@media (min-width: 521px) { .chapter-pill__cta-short { display: none; } }
@media (prefers-reduced-motion: reduce) { .chapter-dot i, .chapter-dot__t { transition: none; } }
.chapter-pill__cta, .chapter-pill__cta:hover { text-decoration: none; }

.chapter-pill .chapter-pill__cta, .chapter-pill .chapter-pill__cta * { text-decoration: none !important; }

/* Menu button and panel inside the docked pill */
.chapter-pill { overflow: visible; }
.chapter-pill__menu { position: relative; flex: none; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: rgba(245,242,234,.12); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .3s ease; }
.chapter-pill__menu:hover { background: rgba(245,242,234,.22); }
.chapter-pill__menu span, .chapter-pill__menu span::before { content: ""; position: absolute; left: 50%; width: 1.05rem; height: 2px; margin-left: -.525rem; background: var(--cream); border-radius: 2px; transition: transform .35s cubic-bezier(.22,.8,.3,1), top .35s cubic-bezier(.22,.8,.3,1); }
.chapter-pill__menu span { top: calc(50% + 3px); }
.chapter-pill__menu span::before { top: -6px; left: 0; margin-left: 0; }
.chapter-pill.is-open .chapter-pill__menu span { top: 50%; transform: rotate(45deg); }
.chapter-pill.is-open .chapter-pill__menu span::before { top: 0; transform: rotate(-90deg); }
.chapter-pill__menu:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.chapter-menu { position: absolute; left: 50%; bottom: calc(100% + .6rem); width: min(24rem, calc(100vw - 1.5rem)); display: flex; flex-direction: column; padding: .6rem; border-radius: 1.4rem; background: rgba(13,13,12,.99); border: 1px solid rgba(245,242,234,.16); white-space: normal; opacity: 0; transform: translate(-50%, .8rem); transition: opacity .35s ease, transform .45s cubic-bezier(.22,.8,.3,1); }
.chapter-menu.is-shown { opacity: 1; transform: translate(-50%, 0); }
.chapter-menu a { display: flex; align-items: center; justify-content: space-between; padding: .55rem .9rem; border-radius: .9rem; color: var(--cream); text-decoration: none; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: clamp(2rem, 8vw, 2.6rem); line-height: 1.05; text-transform: uppercase; letter-spacing: 0; }
.chapter-menu a:hover, .chapter-menu a:focus-visible { background: rgba(245,242,234,.1); outline: none; }
.chapter-menu .chapter-menu__cta { margin-top: .4rem; padding: .85rem 1rem; justify-content: center; gap: .5rem; border-radius: 99px; background: var(--orange); color: var(--ink); font-family: "DM Sans", sans-serif; font-size: 1rem; text-transform: none; letter-spacing: .01em; }
.chapter-menu .chapter-menu__cta:hover { background: var(--orange); filter: brightness(1.05); }
@media (prefers-reduced-motion: reduce) { .chapter-menu, .chapter-pill__menu span, .chapter-pill__menu span::before { transition: none; } }

/* Path to the Philosophy page, under the Drift / Tempo definitions (same quiet link style as "See our services") */
.dt-more { display: block; text-align: left; width: fit-content; margin: clamp(1rem, 1.8vw, 1.5rem) 0 0; color: var(--ink); text-decoration: none; font-size: clamp(1rem, 1.3vw, 1.15rem); font-weight: 700; transition: opacity .2s ease; }
.dt-more span { margin-left: .5rem; display: inline-block; transition: transform .25s ease; }
.dt-more:hover { opacity: .7; }
.dt-more:hover span { transform: translateX(.25rem); }
.dt-more:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }

/* The philosophy link arrives with the Tempo paragraph (same soft-focus reveal, same timing) */
@media (min-width: 721px) {
  .dt-more { opacity: 0; filter: blur(10px); transition: opacity .9s ease, filter 1.05s cubic-bezier(.22,1,.36,1), transform .25s ease; will-change: opacity, filter; }
  .drift-tempo[data-stage="2"] .dt-more { opacity: 1; filter: blur(0); transition-delay: .4s, .4s, 0s; }
  .drift-tempo[data-stage="2"] .dt-more:hover { opacity: .7; transition-delay: 0s; }
}

/* Phones: Drift / Tempo is a plain, readable stack. No blur, no fade-in delays, nothing half-visible
   (the desktop scroll sequence does not exist on phones, so the staged reveal only looked broken). */
@media (max-width: 720px) {
  .drift-tempo .drift-word, .drift-tempo .tempo-word, .drift-tempo .drift-tempo-title b,
  .drift-tempo .drift-copy, .drift-tempo .tempo-copy,
  .drift-tempo .dt-mobile-summary, .drift-tempo .dt-more {
    opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; will-change: auto;
  }
    /* The scroll script fades Drift out as you pass it; on phones the copy stays solid, going down or up. */
  .drift-tempo .dt-copy-block, .drift-tempo .drift-tempo-arrow { opacity: 1 !important; filter: none !important; }
  .drift-tempo .drift-word { color: var(--ink); }
  .drift-tempo .dt-mobile-summary { font-size: 1.05rem; line-height: 1.4; }
  .drift-tempo .drift-summary { color: var(--ink); font-weight: 400; }
  .drift-tempo .tempo-summary { color: var(--ink); font-weight: 500; }
  .drift-tempo .dt-more { margin-top: 1.25rem; }
}

/* Phones: the four cards scroll as a normal list. They do NOT stack, on purpose.
   iPhone Safari 26 paints a solid bar in the colour of any position: sticky or fixed element that reaches the top or
   bottom edge of the screen, and keeps that colour afterwards. Every way of keeping the stack was tried on a real iPhone
   and failed: plain sticky (rust bar), colour moved to a child (orange bar stuck), click-through sticky (bar still
   tinted), hidden + click-through sticky with visible children (orange bar back), and a scroll-driven transform with no
   sticky at all (bars fine, but the cards shake). Only this plain list keeps the bars clear. */
@media (max-width: 720px) { .move { position: relative; top: auto; } }

/* Drift / Tempo arrows are drawn shapes, not the "→" character. The character is not in our web fonts, so each device
   swapped in its own: a solid block arrow on a Mac, a thin line arrow on an iPhone. These shapes are traced from the Mac
   one (same size and position), so every device now shows the same arrow. */
.drift-tempo-arrow svg { display: inline-block; width: .82em; height: .493em; vertical-align: .113em; fill: currentColor; }
.dt-more .arrow-glyph { display: inline-block; width: .787em; height: .45em; margin-inline: .107em; vertical-align: .137em; fill: currentColor; }

/* Client logos: full strength (no grey), each one sized by eye so a wide wordmark and a tall badge carry the same weight.
   On phones they sit in a still 3 by 2 grid that fits the screen; the sideways ticker cut logos off at the edges. */
.team .experience .logos { font-size: clamp(10px, .95vw, 13.5px); align-items: center; }
.team .experience .logos img { width: auto; max-width: 100%; height: 2.6em; opacity: 1; }
.team .experience .logos img[src*="harleydavidson"] { height: 3.4em; }
.team .experience .logos img[src*="microsoft"] { height: 2em; }
.team .experience .logos img[src*="samsung"] { height: 2.7em; }
.team .experience .logos img[src*="subaru"] { height: 1.35em; }
.team .experience .logos img[src*="porsche"] { height: 1.15em; }
@media (max-width: 720px) {
  .team .experience .logo-marquee { display: block; overflow: visible; }
  .team .experience .logo-marquee .logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; align-items: center; gap: 2rem 1.25rem; width: 100%; padding: 0; animation: none; overflow: visible; }
  .team .experience .logo-marquee .logos-duplicate { display: none; }
}

/* Phone cards: the four descriptions are written to the same length, and each one is given room for three lines, so the
   step names line up at the same height on every card even when one description wraps a line shorter. */
@media (max-width: 720px) { .moves-stack .move p { min-height: 3.6em; text-wrap: pretty; } } /* pretty: no single word left alone on the last line, without narrowing the whole paragraph the way balance does */