/* ============================================================

   LOCKED 12/Jul/26 - DESKTOP (>=641px) cinematic motion package

   Paul lock: do not invent new open/close motion; do not regress seals.

   Cards: founders x3 + idea + people x3 + projects x2 + contact.

   1) Never animate img scale DURING panel translate (open or close).

   2) Pre-scale 1.08 off-screen -> slide -> settle -> slow drift -> 1.02.

   3) Ken Burns end >= 1.02 (edge seal). Close pins scale >= 1.02.

   4) Founders: keep is-settled (grayscale) through whole slide-off.

   5) CSS overscan: founders L/R +/-2px; drawers T/B +/-2px; media inset -2px.

   6) clearProps: transform(,filter) only after off-screen - never clearProps:all on media.

   SSOT: OkeTempo_Website_Cinematic_Desktop_Motion_Lock_12Jul26.md

   Taste: taste-slide-seal-no-dual-transform

   Learn: lock-oketempo-cinematic-desktop-motion-12jul26

   ============================================================ */




/* Desktop only: +30% Oke & Tempo logo */
@media (min-width: 641px) {
  .hero__logo {
    width: clamp(218px, 34.32vw, 343px);
  }
}
.hero__logo img {
  display: block;
  width: 100%;
  height: auto;
}
.panel {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}
.panel--hero {
  z-index: 1;
  background: var(--charcoal);
  display: block;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: center / cover no-repeat url("/cinematic_assets/hero-poster.jpg?v=1");
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: contrast(1.22) saturate(1.08);
  opacity: 0;
  transition: none;
  will-change: opacity;
}
.hero__video.is-active {
  opacity: 1;
  z-index: 1;
}
.hero__media:not(.is-crossfading) .hero__video.is-active {
  transition: opacity 0.35s ease;
}
.hero__video.is-incoming {
  opacity: 1;
  z-index: 2;
}
.hero__media.is-crossfading .hero__video {
  transition: opacity 1.2s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .hero__media.is-crossfading .hero__video {
    transition: none;
  }
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(
      ellipse 80% 70% at 50% 42%,
      rgba(18, 18, 17, 0.38) 0%,
      rgba(18, 18, 17, 0.48) 48%,
      rgba(18, 18, 17, 0.62) 100%
    ),
    rgba(18, 18, 17, 0.48);
}
.panel--hero .panel__stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: none !important;
  pointer-events: none;
}
.panel__stage > * {
  pointer-events: auto;
}
.panel--hero .hero__footer {
  z-index: 2;
}
.panel--hero .panel__question {
  color: var(--white);
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.55), 0 0 2px rgba(0, 0, 0, 0.35);
}
.panel--hero .panel__nav-btn,
.panel--hero .panel__nav-dropdown-btn {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}
.panel--hero .panel__nav-btn {
  color: var(--white);
}
.panel--hero .panel__nav-btn::after {
  background: var(--white);
}
.panel--hero .panel__nav-chevron {
  color: var(--white);
}
.panel--hero .hero__copyright {
  color: var(--white);
  opacity: 0.72;
}
.panel--hero .hero__links.panel__links a {
  color: var(--white);
  opacity: 0.72;
}
.panel--hero .hero__links.panel__links a:hover,
.panel--hero .hero__links.panel__links a:focus-visible {
  opacity: 1;
}
.panel--hero .hero__links.panel__links a:focus-visible {
  outline-color: var(--white);
}
@media (prefers-reduced-motion: reduce) {
  .hero__video {
    display: none;
  }
  .hero__media {
    background: center / cover no-repeat url("/cinematic_assets/cover.jpg");
  }
}
.panel__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 5vw, 64px);
  transform: translateY(-4vh);
}
.panel__question {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1.82rem, 3.952vw, 2.964rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-align: center;
  color: var(--charcoal);
  white-space: nowrap;
  max-width: 100%;
}

@media (min-width: 641px) {
  .panel--hero .panel__question {
    font-weight: 500;
    font-size: clamp(2.1rem, 4.55vw, 3.4rem);
    letter-spacing: -0.02em;
  }
}

.panel__question .word {
  display: inline-block;
  opacity: 0;
  margin-right: 0.32em;
}
.panel__question .word--cue {
  position: relative;
  margin-right: 0;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  padding: 0;
  cursor: default;
  pointer-events: none;
}
.panel__question .word--cue.is-ready::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--underline-bp);
  height: var(--underline-h);
  background: var(--charcoal);
  /* L→R wipe: scale from left; opacity held steady so the reveal reads as a wipe not a fade */
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0.72;
  transition: transform 1.92s cubic-bezier(0.4, 0, 0.2, 1); /* right? wipe 20% faster 13/Jul/26 */ /* right? L->R wipe — sped up 13/Jul/26 */
}

/* 14/Jul/26 Paul: remove underline under headline right? (wipe + pulse off) */
.panel__question .word--cue.is-ready::after,
.panel__question .word--cue.is-ready.show-cue::after,
.panel__question .word--cue.is-ready:hover::after,
.panel__question .word--cue.is-ready:focus-visible::after,
.panel--hero .word--cue.is-ready.is-pulse::after,
.panel__question .word--cue.is-ready.is-pulse::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  transform: none !important;
}
.panel--hero .panel__question .word--cue.is-ready::after {
  background: #fff;
}
.panel--hero .panel__question .word--cue.is-ready.show-cue::after,
.panel--hero .panel__question .word--cue.is-ready:hover::after,
.panel--hero .panel__question .word--cue.is-ready:focus-visible::after {
  background: #fff;
}

.panel__question .word--cue.is-ready.show-cue::after {
  transform: scaleX(1);
  opacity: 0.72;
}
.panel__question .word--cue.is-ready:hover::after,
.panel__question .word--cue.is-ready:focus-visible::after {
  transform: scaleX(1);
  opacity: 0.92;
}
/* Persistent click affordance on right? */
.panel--hero .panel__question .word--cue.is-ready,
.panel--hero .panel__question .word--cue.is-ready.show-cue {
  clip-path: none !important;
  overflow: visible !important;
}
.panel--hero .panel__question {
  overflow: visible;
}

/* Founders invite line under headline — stays in hero after intro; overlays cover it */
.hero__founders-invite {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 5;
  margin-top: clamp(40px, 5.5vh, 64px);
}

.hero__founders-cue {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-family: Rubik, system-ui, sans-serif;
  font-size: clamp(calc(0.62rem - 1px), calc(1.05vw - 1px), calc(0.78rem - 1px));
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0,0,0,0.5);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  text-align: center;
}
.hero__founders-cue-label {
  display: block;
}
.hero__founders-names {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: baseline;
  gap: clamp(2.75rem, 6.5vw, 4.5rem);
  margin-top: clamp(28px, 3.8vh, 44px);
  font-family: "Homemade Apple", cursive;
  font-size: clamp(calc(1.7rem - 6px), calc(3.1vw - 6px), calc(2.35rem - 6px));
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,0.45);
}
/* FHC H — desktop: founder script subordinate to H1 (13/Jul/26) */
@media (min-width: 641px) {
  .hero__founders-names {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    text-shadow: 0 1px 8px rgba(0,0,0,0.35);
  }
  .hero__founders-invite[aria-hidden="false"] .hero__founders-names button {
    opacity: 0.72;
  }
}

.hero__founders-names button {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.hero__founders-names button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.12em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0.85;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero__founders-names button:hover::after,
.hero__founders-names button:focus-visible::after {
  transform: scaleX(1);
}
.hero__founders-invite[aria-hidden="false"] .hero__founders-cue.is-visible {
  visibility: visible !important;
  pointer-events: auto;
  opacity: 0.88;
}
.hero__founders-invite[aria-hidden="true"] .hero__founders-names button {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}
.hero__founders-invite[aria-hidden="false"] .hero__founders-names button {
  visibility: visible !important;
  pointer-events: auto;
  opacity: 0.9;
}
/* After founder/drawer close, invite must not stay collapsed */
.panel--hero:not(.is-founder-open) .hero__founders-invite[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.hero__founders-cue:hover,
.hero__founders-cue:focus-visible {
  opacity: 1;
}
/* founders invite stays after intro — do not hide on founder-open */

/* Home shell stays put under drawers — no transform / no hide */
/* Home shell geometry locked — drawers must not reflow hero text */
body.drawer-open .panel--hero .panel__stage,
body.drawer-open .panel--hero #nav,
body.drawer-open .panel--hero #hero-footer {
  transform: none !important;
}

/* Desktop: docked nav sits above social footer */

/* phone: hero column when nav is sibling */
@media (max-width: 640px) {
  .panel--hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
  }
}

@media (min-width: 641px) {
  .panel--hero {
    position: relative;
  }
  /* Always bottom-docked on desktop - never in stage flow, logo/title never shift */
  .panel--hero #nav {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(clamp(104px, 14vh, 128px) + var(--safe-bottom, 0px));
    top: auto;
    margin: 0;
    z-index: 4;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-end;
    /* Wider item gaps; row centred — no padding-left offset (was uneven L/R margins) */
    --nav-gap: clamp(56px, 9vw, 112px); /* wider menu gaps 13/Jul/26 */
    gap: var(--nav-gap);
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }
  .panel--hero #nav > .panel__nav-btn,
  .panel--hero #nav > .panel__nav-group {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 0 !important;
    font-size: calc(var(--btn-size) + 2px);
    align-self: center;
  }
  .panel--hero #nav > .panel__nav-btn,
  .panel--hero #nav > .panel__nav-group > .panel__nav-btn {
    display: block !important;
    position: relative;
    margin: 0 !important;
    padding: 0 1.05em 0 0 !important;
    min-height: 0 !important;
    height: 1.15em !important;
    line-height: 1.15em !important;
    font-size: calc(var(--btn-size) + 2px) !important;
    white-space: nowrap;
    box-sizing: border-box;
  }
  .panel--hero #nav > .panel__nav-btn {
    padding-right: 0 !important;
  }
  /* Chevron out of flow so it cannot shift the label baseline */
  .panel--hero #nav .panel__nav-btn--menu .panel__nav-chevron {
    position: absolute !important;
    right: 0;
    top: 50%;
    width: 0.4em;
    height: 0.4em;
    margin: 0 !important;
    transform: translateY(-50%) rotate(-135deg) !important;
    opacity: 0.55;
  }
  .panel--hero #nav .panel__nav-group.is-hover > .panel__nav-btn--menu .panel__nav-chevron,
  .panel--hero #nav .panel__nav-group.is-open > .panel__nav-btn--menu .panel__nav-chevron,
  .panel--hero #nav .panel__nav-group:focus-within > .panel__nav-btn--menu .panel__nav-chevron {
    transform: translateY(-50%) rotate(45deg) !important;
    opacity: 0.9;
  }
  /* Closed menus fully removed from layout */
  .panel--hero #nav .panel__nav-dropdown {
    display: none;
    position: absolute;
    left: 0;
    right: auto;
    top: auto;
    bottom: calc(100% + 0.35rem);
    width: max-content;
    min-width: 100%;
    padding: 0.25rem 0 0.5rem;
    margin: 0;
  }
  .panel--hero #nav .panel__nav-dropdown::before {
    display: none;
  }
  .panel--hero #nav .panel__nav-group.is-hover .panel__nav-dropdown,
  .panel--hero #nav .panel__nav-group.is-open .panel__nav-dropdown,
  .panel--hero #nav .panel__nav-group:focus-within .panel__nav-dropdown,
  .panel--hero #nav .panel__nav-group[data-l2-pinned="1"] .panel__nav-dropdown {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .panel--hero #nav .panel__nav-group[data-l2-pinned="1"] > .panel__nav-btn--menu .panel__nav-chevron {
    transform: translateY(-50%) rotate(45deg) !important;
    opacity: 0.9;
  }
  /* Nav top-level hover underline: sit further below label */
  .panel--hero #nav > .panel__nav-btn::after,
  .panel--hero #nav > .panel__nav-group > .panel__nav-btn::after {
    bottom: -0.42em;
  }
  /* Drop-up menu items: underline tight to text */
  .panel--hero #nav .panel__nav-dropdown-btn::after {
    bottom: 0.05em;
  }
  /* Social line closer to nav */
  .panel--hero .hero__footer,
  .panel--hero #hero-footer {
    bottom: clamp(56px, 8vh, 72px);
  }
}

.panel__nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
  margin-top: clamp(20px, 3vh, 32px);
}
.hero__footer {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: clamp(22px, 4.5vh, 40px);
  display: flex;
  justify-content: center;
  padding: 0 clamp(24px, 4vw, 56px);
  pointer-events: none;
}
.hero__footer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 44px);
  pointer-events: auto;
}
.hero__links.panel__links {
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: clamp(18px, 3.2vw, 28px);
}
.hero__copyright {
  margin: 0;
  display: flex;
  align-items: center;
  height: 1.125rem;
  font-family: Manrope, system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--track-meta);
  line-height: 1;
  color: var(--charcoal);
  opacity: 0.72;
  white-space: nowrap;
}
#hero-footer[aria-hidden="true"] .hero__links a,
#hero-footer[aria-hidden="true"] .hero__copyright {
  opacity: 0;
  pointer-events: none;
}
.hero__links.panel__links a {
  color: var(--charcoal);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.35s ease;
}
.hero__links.panel__links a:hover,
.hero__links.panel__links a:focus-visible {
  opacity: 1;
}
.hero__links.panel__links a:focus-visible {
  outline: 2px solid var(--charcoal);
  outline-offset: 3px;
}
@media (max-width: 640px) {
  .hero__footer {
    bottom: clamp(18px, 3.5vh, 32px);
    padding: 0 clamp(16px, 4vw, 24px);
  }
  .hero__footer-inner {
    gap: clamp(8px, 2vw, 12px);
  }
  .hero__links.panel__links {
    gap: clamp(2px, 0.8vw, 6px);
  }
  .hero__links.panel__links a {
    min-width: 32px;
    min-height: 44px;
    padding: 0 2px;
  }
  .hero__copyright {
    font-size: 0.6875rem;
    height: 1.125rem;
    margin-left: clamp(2px, 0.5vw, 4px);
  }
}

.panel__nav-btn {
  position: relative;
  display: inline-block;
  width: fit-content;
  font-family: Rubik, system-ui, sans-serif;
  font-size: var(--btn-size);
  font-weight: 700;
  letter-spacing: var(--track-primary);
  text-transform: uppercase;
  color: var(--charcoal);
  background: none;
  border: none;
  padding: var(--btn-pad-y) 0;
  white-space: nowrap;
  text-align: left;
  cursor: pointer;
  opacity: 0;
  transform: none;
}

/* Desktop only: hero nav white + 2px larger */
@media (min-width: 641px) {
  .panel--hero .panel__nav-btn,
  .panel--hero .panel__nav-group > .panel__nav-btn {
    color: var(--white);
    font-size: calc(var(--btn-size) + 2px);
  }
  .panel--hero .panel__nav-btn::after {
    background: var(--white);
  }
  .panel--hero .panel__nav-chevron {
    color: var(--white);
  }
  .panel--hero .panel__nav-dropdown-btn {
    color: var(--white);
    font-size: calc(var(--btn-size-sm) + 2px);
  }
  .panel--hero .panel__nav-dropdown-btn::after {
    background: var(--white);
  }
  .panel--hero .panel__nav-btn:focus-visible,
  .panel--hero .panel__nav-dropdown-btn:focus-visible {
    outline-color: var(--white);
  }
}

.panel__nav-btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--underline-bp);
  height: var(--underline-h);
  background: var(--charcoal);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: var(--underline-op);
  transition: transform var(--underline-dur) var(--underline-ease);
}
.panel__nav-btn:hover::after,
.panel__nav-btn:focus-visible::after {
  transform: scaleX(1);
}
.panel__nav-btn:focus-visible {
  outline: 2px solid var(--charcoal);
  outline-offset: 4px;
}
.panel__nav-group {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  width: fit-content;
}
.panel__nav-group > .panel__nav-btn {
  opacity: 0;
  transform: none;
}
.panel--hero .panel__nav > .panel__nav-btn {
  opacity: 0;
  transform: none;
}
.panel__nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.85rem 0 0.35rem;
  margin: 0;
  background: transparent;
  border: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0.28s;
  z-index: 5;
}
.panel__nav-dropdown::before {
  content: "";
  display: block;
  height: 0.85rem;
  margin-bottom: -0.85rem;
}
.panel__nav-group:hover .panel__nav-dropdown,
.panel__nav-group:focus-within .panel__nav-dropdown,
.panel__nav-group.is-hover .panel__nav-dropdown,
.panel__nav-group.is-open .panel__nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
@media (max-width: 640px) {
  .panel__nav-dropdown {
    width: 100%;
    min-width: 0;
  }
}
.panel__nav-dropdown-btn {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding-right: 0;
  font-family: Rubik, system-ui, sans-serif;
  font-size: var(--btn-size-sm);
  font-weight: 700;
  letter-spacing: var(--track-secondary);
  text-transform: uppercase;
  color: var(--charcoal);
  background: none;
  border: none;
  padding: var(--btn-pad-y-sm) 0;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.panel__nav-dropdown-btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--underline-bp);
  height: var(--underline-h);
  background: var(--charcoal);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: var(--underline-op);
  transition: transform var(--underline-dur) var(--underline-ease);
}
.panel__nav-dropdown-btn:hover::after,
.panel__nav-dropdown-btn:focus-visible::after {
  transform: scaleX(1);
}
.panel__nav-dropdown-btn:focus-visible {
  outline: 2px solid var(--charcoal);
  outline-offset: 4px;
}

.founder-reveal {
  position: fixed;
  inset: 0;
  z-index: 150;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  background: var(--charcoal);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(100%, 0, 0);
  transition: transform 1.06s cubic-bezier(0.22, 1, 0.36, 1);
}
.founder-reveal.is-animating {
  will-change: transform;
  isolation: isolate;
}
.founder-reveal.is-open,
.founder-reveal.is-animating {
  /* 2px overscan — compositor hairline on left during/after horizontal slide */
  left: -2px;
  right: -2px;
  width: auto;
}
.founder-reveal.is-open {
  visibility: visible;
  pointer-events: auto;
  cursor: pointer;
}
/* Close started: let hero buttons receive taps while wipe finishes */
.founder-reveal.is-closing {
  pointer-events: none !important;
  cursor: default;
}
.founder-reveal.is-revealed {
  transform: translate3d(0, 0, 0);
}
.founder-reveal.is-open .founder-reveal__back {
  cursor: pointer;
}
.founder-reveal__media {
  position: absolute;
  inset: -2px;
  overflow: hidden;
}
.founder-reveal__media img {
  width: 100%;
  transform-origin: center center;
  height: 100%;
  object-fit: cover;
  object-position: var(--founder-object-position-desktop, center center);
  filter: grayscale(0%);
  transition: filter 0.7s ease;
}
.founder-reveal.is-settled .founder-reveal__media img {
  filter: grayscale(100%);
}
.founder-reveal__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(33, 33, 32, 0.78) 0%,
    rgba(33, 33, 32, 0.42) 34%,
    rgba(33, 33, 32, 0.08) 58%,
    rgba(33, 33, 32, 0.22) 100%
  );
  pointer-events: none;
}
.founder-reveal__logo {
  position: absolute;
  z-index: 3;
  top: clamp(24px, 4vw, 48px);
  left: clamp(24px, 4vw, 56px);
  width: clamp(112px, 17.6vw, 176px);
  pointer-events: none;
}
.founder-reveal__logo img {
  display: block;
  width: 100%;
  height: auto;
}
.founder-reveal__copy {
  position: absolute;
  z-index: 3;
  left: clamp(24px, 4vw, 56px);
  top: clamp(104px, 14vh, 168px);
  bottom: clamp(88px, 12vh, 128px);
  max-width: min(26rem, 78vw);
  color: #fff;
  opacity: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-right: 0.5rem;
}
.founder-reveal.is-open .founder-reveal__copy {
  pointer-events: auto;
}
.founder-reveal__name {
  font-size: var(--btn-size);
  font-weight: 600;
  letter-spacing: var(--track-primary);
  text-transform: uppercase;
  opacity: 0.55;
  margin-top: 1.25rem;
  flex-shrink: 0;
  padding-top: 0.35rem;
}
.founder-reveal__text {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: var(--copy-size);
  line-height: var(--copy-leading);
  letter-spacing: -0.01em;
  opacity: 0.88;
  flex: 0 1 auto; /* do not grow — keep name directly under last paragraph */
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: none;
  position: relative;
}
.founder-reveal__text::-webkit-scrollbar {
  display: none;
}
.founder-reveal__lead {
  font-size: inherit;
  line-height: inherit;
  opacity: 1;
  margin-bottom: var(--copy-gap);
}
.founder-reveal__text p + p {
  margin-top: var(--copy-gap);
}

.founder-reveal--adam .founder-reveal__scrim {
  background: linear-gradient(105deg, rgba(33,33,32,0.84) 0%, rgba(33,33,32,0.42) 34%, rgba(33,33,32,0.1) 52%, rgba(33,33,32,0.2) 100%);
}
.founder-reveal--paul .founder-reveal__scrim {
  background: linear-gradient(105deg, rgba(58,44,40,0.86) 0%, rgba(33,33,32,0.48) 32%, rgba(58,44,40,0.12) 50%, rgba(33,33,32,0.22) 100%);
}
.founder-reveal--cameron .founder-reveal__scrim {
  background: linear-gradient(105deg, rgba(33,33,32,0.82) 0%, rgba(33,33,32,0.38) 30%, rgba(200,198,186,0.08) 48%, rgba(33,33,32,0.18) 100%);
}

@media (min-width: 641px) {
  .founder-reveal--portrait .founder-reveal__media {
    inset: 0;
  }
  .founder-reveal--portrait .founder-reveal__scrim {
    background: linear-gradient(
      105deg,
      rgba(33, 33, 32, 0.8) 0%,
      rgba(33, 33, 32, 0.45) 32%,
      rgba(33, 33, 32, 0.08) 52%,
      rgba(33, 33, 32, 0.22) 100%
    );
  }
  .founder-reveal--portrait .founder-reveal__copy {
    top: auto;
    bottom: clamp(80px, 11vh, 120px);
    max-width: min(26rem, 36vw);
    max-height: min(46vh, 420px);
  }
  .founder-reveal--cameron .founder-reveal__copy {
    top: clamp(104px, 14vh, 168px);
    bottom: clamp(88px, 12vh, 128px);
    max-width: min(28rem, 38vw);
    max-height: none;
  }
  .founder-reveal--cameron .founder-reveal__scrim {
    background: linear-gradient(
      105deg,
      rgba(33, 33, 32, 0.86) 0%,
      rgba(33, 33, 32, 0.52) 28%,
      rgba(33, 33, 32, 0.08) 48%,
      rgba(33, 33, 32, 0.18) 100%
    );
  }
}

@media (max-width: 640px) {
  .founder-reveal__media {
    inset: 0;
  }
  .founder-reveal__media img {
    object-position: var(--founder-object-position-mobile, 54% 8%);
  }
  .founder-reveal__scrim {
    background: linear-gradient(
      to top,
      rgba(33, 33, 32, 0.9) 0%,
      rgba(33, 33, 32, 0.65) 36%,
      rgba(33, 33, 32, 0.12) 56%,
      rgba(33, 33, 32, 0.04) 100%
    );
  }
  .founder-reveal__copy {
    top: auto;
    left: var(--drawer-inline);
    right: clamp(72px, 14vw, 96px);
    bottom: clamp(60px, 8.5vh, 84px);
    max-width: none;
    max-height: min(52vh, 440px);
    padding-top: 0.25rem;
    padding-right: 0.25rem;
  }
  .founder-reveal__text {
    opacity: 0.9;
    padding-left: 0;
  }
  .founder-reveal__name {
    margin-top: 0.85rem;
  }
  .founder-reveal--portrait .founder-reveal__media {
    inset: 0;
  }
  .founder-reveal--portrait .founder-reveal__copy {
    bottom: clamp(52px, 7vh, 70px);
    max-height: min(38vh, 310px);
  }

  .founder-reveal--cameron .founder-reveal__copy {
    top: clamp(88px, 12vh, 120px);
    bottom: clamp(72px, 10vh, 96px);
    right: var(--drawer-inline);
    max-height: none;
    padding-bottom: 0.5rem;
  }
  .founder-reveal--cameron .founder-reveal__name {
    margin-top: 1.25rem;
    padding-bottom: 0.25rem;
  }
  .founder-reveal--cameron .founder-reveal__scrim {
    background: linear-gradient(
      to bottom,
      rgba(33, 33, 32, 0.88) 0%,
      rgba(33, 33, 32, 0.58) 26%,
      rgba(33, 33, 32, 0.1) 46%,
      rgba(33, 33, 32, 0.04) 100%
    );
  }
  .founder-reveal--paul .founder-reveal__scrim {
    background: linear-gradient(
      to top,
      rgba(58, 44, 40, 0.99) 0%,
      rgba(33, 33, 32, 0.94) 18%,
      rgba(33, 33, 32, 0.78) 34%,
      rgba(33, 33, 32, 0.4) 50%,
      rgba(33, 33, 32, 0.12) 62%,
      rgba(33, 33, 32, 0) 72%
    );
  }
  .founder-reveal--paul .founder-reveal__media img {
    object-position: var(--founder-object-position-mobile, 48% 0%);
  }
  .founder-reveal--paul .founder-reveal__copy {
    bottom: clamp(56px, 7.5vh, 76px);
    max-height: min(48vh, 380px);
    padding-right: 0.25rem;
  }
}

/* LOCKED - iphone (375-640) - founder Paul:
   full copy on page, no scroll. Bottom band; name under text.
   Do not regress without Paul device pass. */
@media (max-width: 640px) and (min-width: 375px) {
  .founder-reveal--paul .founder-reveal__copy {
    max-height: none;
    overflow: visible;
  }
  .founder-reveal--paul .founder-reveal__text {
    flex: 0 0 auto;
    overflow: visible;
    touch-action: auto;
  }
}

/* LOCKED - iphone (375-640) - founder Cameron:
   bottom band, ALL copy, no scroll; face above copy via height/top pan
   (object-position Y is a no-op - phone taller than asset).
   Do not regress without Paul device pass.
   Preserve: desktop / Adam / android <375 (separate pass). */
@media (max-width: 640px) and (min-width: 375px) {
  .founder-reveal--cameron .founder-reveal__copy {
    top: auto;
    bottom: calc(clamp(24px, 5vh, 48px) + env(safe-area-inset-bottom, 0px));
    right: clamp(72px, 14vw, 96px);
    max-height: none;
    overflow: visible;
    padding-bottom: 0;
  }
  .founder-reveal--cameron .founder-reveal__text {
    flex: 0 0 auto;
    overflow: visible;
    touch-action: auto;
  }
  .founder-reveal--cameron .founder-reveal__name {
    margin-top: 0.85rem;
    padding-bottom: 0;
  }
  .founder-reveal--cameron .founder-reveal__scrim {
    background: linear-gradient(
      to top,
      rgba(33, 33, 32, 0.995) 0%,
      rgba(33, 33, 32, 0.96) 16%,
      rgba(33, 33, 32, 0.85) 30%,
      rgba(33, 33, 32, 0.58) 42%,
      rgba(33, 33, 32, 0.28) 54%,
      rgba(33, 33, 32, 0) 66%
    );
  }
  /* Face above copy: phone taller than asset so object-position Y is a no-op.
     Oversized + top shift creates vertical pan room. iPhone 375-640 only.
     JS mobileObjectPosition untouched (android <375). */
  .founder-reveal--cameron .founder-reveal__media img {
    position: absolute;
    left: 0;
    width: 100%;
    height: 178%;
    top: -54%;
    object-fit: cover;
    object-position: 50% 30%;
  }
}

.founder-reveal__back {
  position: absolute;
  z-index: 3;
  right: clamp(24px, 4vw, 56px);
  bottom: clamp(24px, 5vh, 48px);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: Manrope, system-ui, sans-serif;
  font-size: var(--btn-size);
  font-weight: 600;
  letter-spacing: var(--track-primary);
  text-transform: uppercase;
  color: #fff;
  background: none;
  border: none;
  padding: var(--btn-pad-y-back) 0;
  cursor: pointer;
  opacity: 0.85;
}
.founder-reveal__back::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--underline-bp);
  height: var(--underline-h);
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: var(--underline-op);
  transition: transform var(--underline-dur) var(--underline-ease);
}
.founder-reveal__back:hover::after,
.founder-reveal__back:focus-visible::after {
  transform: scaleX(1);
}
.founder-reveal__back:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
.founder-reveal__back-arrow {
  display: flex;
  align-items: center;
  line-height: 0;
}
.panel--drawer {
  z-index: 20;
  background: var(--charcoal);
  color: #fff;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  transform: translate3d(0, 100%, 0);
  transition: transform 0.94s cubic-bezier(0.22, 1, 0.36, 1);
}
.panel--drawer.is-revealed {
  transform: translate3d(0, 0, 0);
}
.panel--drawer.is-animating {
  will-change: transform;
  isolation: isolate;
}
.panel--drawer.is-active,
.panel--drawer.is-animating {
  /* 2px overscan - compositor hairline on top/bottom during vertical slide */
  top: -2px;
  bottom: -2px;
  height: auto;
}
.panel--drawer.is-active {
  visibility: visible;
  pointer-events: auto;
  cursor: pointer;
}
.panel__back {
  cursor: pointer;
}

.panel__back {
  position: absolute;
  z-index: 3;
  right: clamp(24px, 4vw, 56px);
  bottom: clamp(24px, 5vh, 48px);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: Manrope, system-ui, sans-serif;
  font-size: var(--btn-size);
  font-weight: 600;
  letter-spacing: var(--track-primary);
  text-transform: uppercase;
  color: #fff;
  background: none;
  border: none;
  padding: var(--btn-pad-y-back) 0;
  cursor: pointer;
  opacity: 0.85;
}
.panel__back::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--underline-bp);
  height: var(--underline-h);
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: var(--underline-op);
  transition: transform var(--underline-dur) var(--underline-ease);
}
.panel__back:hover::after,
.panel__back:focus-visible::after {
  transform: scaleX(1);
}
.panel__back:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
.panel__back--dark {
  color: var(--charcoal);
  opacity: 0.88;
}
.panel__back--dark::after {
  background: var(--charcoal);
}
.panel__back--dark:focus-visible {
  outline: 2px solid var(--charcoal);
  outline-offset: 4px;
}
.panel__back-arrow {
  display: flex;
  align-items: center;
  line-height: 0;
}
.panel--drawer .panel__media {
  position: absolute;
  /* 2px overscan - seals cover against compositor hairline (founder parity) */
  inset: -2px;
  overflow: hidden;
}
.panel--drawer .panel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.panel--drawer .panel__logo {
  position: absolute;
  z-index: 3;
  top: clamp(24px, 4vw, 48px);
  left: clamp(24px, 4vw, 56px);
  width: clamp(112px, 17.6vw, 176px);
  pointer-events: none;
}
.panel--drawer .panel__logo img {
  display: block;
  width: 100%;
  height: auto;
}
.panel--drawer .panel__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(33, 33, 32, 0.88) 0%,
      rgba(33, 33, 32, 0.52) 24%,
      rgba(33, 33, 32, 0.1) 44%,
      rgba(33, 33, 32, 0.04) 100%
    ),
    linear-gradient(
      105deg,
      rgba(33, 33, 32, 0.82) 0%,
      rgba(33, 33, 32, 0.48) 28%,
      rgba(33, 33, 32, 0.08) 48%,
      rgba(33, 33, 32, 0.06) 100%
    );
  pointer-events: none;
}
.panel--drawer .panel__content {
  position: absolute;
  z-index: 2;
  left: clamp(24px, 4vw, 56px);
  top: clamp(104px, 14vh, 168px);
  bottom: clamp(88px, 12vh, 128px);
  right: clamp(24px, 8vw, 120px);
  max-width: min(28rem, 88vw);
  max-height: none;
  overflow: visible;
  padding-right: 0.25rem;
}

.panel--project .panel__media img {
  object-position: 50% 42%;
}
@media (min-width: 641px) {
  .panel--project .panel__media img {
    object-position: 54% 46%;
  }
}
@media (max-width: 640px) {
  .panel--project .panel__content {
    top: auto;
    bottom: clamp(58px, 8.5vh, 82px);
    left: var(--drawer-inline);
    right: var(--drawer-inline);
    height: min(36vh, 300px);
    max-height: min(36vh, 300px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .panel--project .panel__body {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .panel--project .panel__links {
    flex-shrink: 0;
    margin-top: 0.85rem;
  }
}

.panel--project.panel--poster .panel__scrim {
  background:
    linear-gradient(
      to bottom,
      rgba(33, 33, 32, 0.42) 0%,
      rgba(33, 33, 32, 0.12) 14%,
      transparent 28%
    ),
    linear-gradient(
      to top,
      rgba(33, 33, 32, 0.35) 0%,
      transparent 18%
    );
}
.panel--project.panel--poster .panel__content {
  display: none;
}
.panel--project.panel--poster .panel__media img {
  object-fit: cover;
  object-position: 50% 46%;
}
@media (max-width: 640px) {
  .panel--project.panel--poster .panel__media img {
    object-position: 50% 44%;
  }
}
@media (min-width: 641px) {
  .panel--project.panel--poster .panel__media img {
    object-position: 50% 48%;
  }
}
#project-filaro.panel--poster .panel__media img {
  object-position: 50% 52%;
}
#project-filaro.panel--poster .panel__scrim {
  background:
    linear-gradient(
      to bottom,
      rgba(33, 33, 32, 0.35) 0%,
      rgba(33, 33, 32, 0.08) 20%,
      transparent 38%
    ),
    linear-gradient(
      to top,
      rgba(33, 33, 32, 0.94) 0%,
      rgba(33, 33, 32, 0.62) 28%,
      rgba(33, 33, 32, 0.12) 52%,
      transparent 64%
    );
}
.panel--project.panel--poster-copy .panel__content {
  display: flex;
  flex-direction: column;
  top: auto;
  bottom: clamp(58px, 8.5vh, 82px);
  left: clamp(24px, 4vw, 56px);
  right: clamp(72px, 14vw, 96px);
  max-width: min(30rem, 90vw);
  max-height: none;
  overflow: visible;
}
.panel--project.panel--poster-copy .panel__eyebrow {
  color: #fff;
  opacity: 0.55;
}
.panel--project.panel--poster-copy .panel__body {
  color: #fff;
}
.panel--project.panel--poster-copy .panel__body p + p {
  margin-top: 0.65rem;
}
.panel--project.panel--poster-copy .panel__links {
  margin-top: 1.1rem;
}
#project-sable.panel--poster .panel__scrim {
  background:
    linear-gradient(
      to bottom,
      rgba(33, 33, 32, 0.35) 0%,
      rgba(33, 33, 32, 0.08) 20%,
      transparent 38%
    ),
    linear-gradient(
      to top,
      rgba(33, 33, 32, 0.94) 0%,
      rgba(33, 33, 32, 0.62) 28%,
      rgba(33, 33, 32, 0.12) 52%,
      transparent 64%
    );
}
#project-sable.panel--poster .panel__media img {
  object-position: 50% 42%;
}
@media (max-width: 640px) {
  .panel--project.panel--poster-copy .panel__content {
    left: var(--drawer-inline);
    right: var(--drawer-inline);
    max-width: none;
    height: auto;
    max-height: none;
    overflow: visible;
  }
  .panel--project.panel--poster-copy .panel__body {
    font-size: clamp(0.94rem, 4vw, 1.06rem);
    line-height: 1.52;
  }
  #project-filaro.panel--poster-copy .panel__content {
    top: clamp(88px, 13vh, 116px);
    bottom: auto;
  }
  #project-filaro.panel--poster .panel__media img {
    object-position: 50% 50%;
  }
  #project-filaro.panel--poster .panel__scrim {
    background:
      linear-gradient(
        to bottom,
        rgba(33, 33, 32, 0.92) 0%,
        rgba(33, 33, 32, 0.58) 18%,
        rgba(33, 33, 32, 0.12) 34%,
        transparent 48%
      ),
      linear-gradient(
        to top,
        rgba(33, 33, 32, 0.88) 0%,
        rgba(33, 33, 32, 0.42) 24%,
        transparent 46%
      );
  }
  #project-sable.panel--poster-copy .panel__content {
    top: auto;
    bottom: clamp(46px, 6.2vh, 62px);
  }
  #project-sable.panel--poster .panel__media img {
    object-position: 50% 40%;
  }
  #project-sable.panel--poster .panel__scrim {
    background:
      linear-gradient(
        to bottom,
        rgba(33, 33, 32, 0.28) 0%,
        rgba(33, 33, 32, 0.06) 18%,
        transparent 36%
      ),
      linear-gradient(
        to top,
        rgba(33, 33, 32, 0.96) 0%,
        rgba(33, 33, 32, 0.72) 32%,
        rgba(33, 33, 32, 0.16) 54%,
        transparent 66%
      );
  }
}

.panel--contact {
  background: var(--chocolate);
  color: var(--white);
}
.panel--contact .panel__content {
  position: absolute;
  inset: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  max-width: none;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding:
    clamp(96px, 14vh, 148px)
    clamp(24px, 5vw, 56px)
    clamp(88px, 12vh, 132px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.panel--contact .panel__content::-webkit-scrollbar {
  display: none;
}
.contact-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 112px);
  width: min(1080px, 100%);
  align-items: start;
}
.contact-page__copy {
  color: #fff;
}
.contact-page__form {
  width: 100%;
}
.contact-page__field {
  margin-bottom: clamp(18px, 2.8vh, 28px);
}
.contact-page__field label {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 0.45rem;
}
.contact-page__field input,
.contact-page__field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.34);
  color: #fff;
  padding: 0.35rem 0 0.7rem;
  font-family: Manrope, system-ui, sans-serif;
  font-size: 0.92rem;
  line-height: 1.4;
  border-radius: 0;
  outline: none;
  transition: border-color 0.25s ease;
}
.contact-page__field textarea {
  min-height: 4.75rem;
  resize: vertical;
}
.contact-page__field input:focus,
.contact-page__field textarea:focus {
  border-bottom-color: rgba(255, 255, 255, 0.72);
}
.contact-page__field input:focus-visible,
.contact-page__field textarea:focus-visible {
  outline: none;
  border-bottom-color: #fff;
}

.contact-page__field input:-webkit-autofill,
.contact-page__field input:-webkit-autofill:hover,
.contact-page__field input:-webkit-autofill:focus,
.contact-page__field input:-webkit-autofill:active,
.contact-page__field input:autofill,
.contact-page__field input:autofill:hover,
.contact-page__field input:autofill:focus,
.contact-page__field input:autofill:active {
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  box-shadow: 0 0 0 1000px var(--chocolate) inset;
  -webkit-box-shadow: 0 0 0 1000px var(--chocolate) inset;
  transition: background-color 9999s ease-out 0s;
}
/* Primary action - filled variant (intentional; not underline-hover) */
.contact-page__submit,
.btn--primary {
  margin-top: clamp(0.5rem, 1.5vh, 1rem);
  background: var(--cotton);
  color: var(--charcoal);
  border: none;
  border-radius: 0;
  padding: 0.9rem 2.15rem;
  font-family: Manrope, system-ui, sans-serif;
  font-size: var(--btn-size);
  font-weight: 600;
  letter-spacing: var(--track-primary);
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.contact-page__submit:hover,
.contact-page__submit:focus-visible,
.btn--primary:hover,
.btn--primary:focus-visible {
  opacity: 0.92;
}
.contact-page__submit:focus-visible,
.btn--primary:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
.contact-page__success {
  margin-top: 1rem;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: var(--copy-size);
  line-height: var(--copy-leading);
  color: #fff;
  opacity: 0.88;
}
.contact-page__success[hidden] { display: none; }
.contact-page__form.is-sent .contact-page__field,
.contact-page__form.is-sent .contact-page__submit {
  opacity: 0.45;
  pointer-events: none;
}
/* removed orphan max-width:820 contact stack 13/Jul/26 - phone <=640 + desktop >=641 cover */

#idea .panel__partners {
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: calc(-1 * (clamp(96px, 13vh, 140px) - clamp(24px, 5vh, 48px)));
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(1.0625rem, 2.9vw, 1.8125rem);
  max-width: calc(100vw - clamp(24px, 4vw, 56px) - clamp(72px, 14vw, 96px));
}
#idea .panel__partners-label {
  font-family: Manrope, system-ui, sans-serif;
  font-size: 0.744rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #fff;
  opacity: 0.55;
  margin: 0;
  white-space: nowrap;
  flex-shrink: 0;
}
#idea .panel__partners-logos {
  display: flex;
  align-items: center;
  gap: clamp(5px, 1vw, 10px);
  flex-wrap: nowrap;
  flex-shrink: 0;
}
#idea .panel__partners-logos a {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  opacity: 0.72;
  transition: opacity 0.35s ease;
}
#idea .panel__partners-logos a:hover,
#idea .panel__partners-logos a:focus-visible {
  opacity: 1;
}
#idea .panel__partners-logos a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
#idea .panel__partners-logos img {
  display: block;
  width: auto;
  object-fit: contain;
}
#idea .panel__partners-logo--okeland img {
  height: clamp(50px, 7.4vw, 65px);
  max-width: min(16.8rem, 62vw);
  filter: none;
}
#idea .panel__partners-logo--tempo {
  transform: translateY(2px);
  margin-left: clamp(-22px, -4.8vw, -10px);
}
#idea .panel__partners-logo--tempo img {
  height: clamp(26px, 4.1vw, 34px);
  max-width: min(12rem, 53vw);
  filter: none;
}
/* ============================================================
   PHONE CSS PARTITION (cleanup map 13/Jul/26) — do not merge casually
   - max-width:640          shared phone floor (tokens, touch 44/16, drawers)
   - max-width:380          narrow type-only FHC (360 + 375-380)
   - 375-640                iPhone locks (hero, L2, drawer-inline 28px, drawers)
   - max-width:374          Android mirror pack (do not edit from iPhone turns)
   - min-width:641          DESKTOP FREEZE — phone turns never touch
   ============================================================ */
@media (max-width: 640px) {
  .panel--drawer .panel__logo {
    width: clamp(134px, 21.1vw, 211px);
  }

  /* LOCKED - phone drawers: one left edge for logo + all copy/form/footers.
     Oke & Tempo logo sits here on every drawer; text must share this x-origin.
     Tier tokens (intentional 13/Jul/26):
       Android <=374 keeps this floor (20px @ ~360).
       iPhone 375-640 overrides to clamp(28px, 7.2vw, 36px) in its block. */
  :root {
    --drawer-inline: clamp(20px, 5.5vw, 28px);
    --drawer-logo-top: clamp(20px, 3.5vh, 28px);
  }
  .panel--drawer .panel__logo,
  .founder-reveal__logo {
    left: var(--drawer-inline);
    top: var(--drawer-logo-top);
  }
  .founder-reveal__logo {
    width: clamp(134px, 21.1vw, 211px);
  }
  #idea .panel__media img {
    object-position: 44% 32%;
  }
  #idea .panel__content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  #idea .panel__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #idea .panel__partners {
    position: static;
    top: auto;
    bottom: auto;
    left: auto;
    max-width: none;
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.1rem;
    flex-shrink: 0;
  }
  #idea .panel__partners-label {
    display: none;
  }
  #idea .panel__partners-logos {
    gap: 0.75rem;
    flex-shrink: 0;
    width: 100%;
  }
  #idea .panel__partners-logos a {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 0.75rem;
    opacity: 0.88;
    align-items: center;
    justify-content: center;
  }
  #idea .panel__partners-logo--okeland img,
  #idea .panel__partners-logo--tempo img {
    filter: none;
  }
  #idea .panel__partners-logo--okeland img {
    height: clamp(1.75rem, 7vw, 2.25rem);
  }
  #idea .panel__partners-logo--tempo {
    transform: none;
    margin-left: 0;
  }
  #idea .panel__partners-logo--tempo img {
    height: clamp(1rem, 3.2vw, 1.25rem);
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.panel--person .panel__content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.panel--person .panel__body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.panel--person .panel__body::-webkit-scrollbar {
  display: none;
}

.panel--drawer .panel__eyebrow {
  font-size: var(--btn-size);
  font-weight: 600;
  letter-spacing: var(--track-primary);
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 1.25rem;
}
.panel--drawer .panel__body {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: var(--copy-size);
  line-height: var(--copy-leading);
  letter-spacing: -0.01em;
}

.panel--person .panel__body {
  min-height: 0;
}

.panel__person-footer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(8px, 1.2vw, 12px);
  margin-top: 1.35rem;
  flex-shrink: 0;
}
/* 14/Jul/26 Paul: person drawers — one desktop gap body→logo/social row (was 1.35rem; Paul bio longer felt cramped) */
@media (min-width: 641px) {
  .panel--person .panel__person-footer {
    margin-top: clamp(2.5rem, 4.8vh, 3.25rem);
  }
}

.panel__person-org {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  opacity: 0.72;
  transition: opacity 0.35s ease;
}
.panel__person-org:hover,
.panel__person-org:focus-visible {
  opacity: 1;
}
.panel__person-org:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
.panel__person-org img {
  display: block;
  width: auto;
  object-fit: contain;
}
.panel__person-org--okeland img {
  height: clamp(42px, 6.2vw, 54px);
  max-width: min(14rem, 52vw);
}
.panel__person-footer:has(.panel__person-org--okeland) .panel__links {
  margin-left: clamp(-28px, -7vw, -16px);
}
.panel__person-org--tempo img {
  height: clamp(22px, 3.4vw, 28px);
  max-width: min(10rem, 44vw);
}
.panel__person-footer .panel__links {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0;
  flex-shrink: 0;
}

/* 14/Jul/26 Paul: person footer — always-on WEBSITE / LINKEDIN / EMAIL (desktop) */
@media (min-width: 641px) {
  .panel__person-footer .panel__links {
    gap: 1.35rem;
  }
  .panel__person-footer .panel__links a {
    justify-content: flex-start;
  }
  .panel__person-footer .panel__links a .panel__link-label {
    margin-left: 0.45rem;
    color: rgba(255, 255, 255, 0.72);
  }
  .panel__person-footer .panel__links a:hover .panel__link-label,
  .panel__person-footer .panel__links a:focus-visible .panel__link-label {
    color: #fff;
  }
}
@media (max-width: 640px) {
  .panel__person-footer .panel__link-label {
    display: none;
  }
}
.panel__person-footer .panel__link--web {
  position: static;
}
.panel__links {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.35rem;
  flex-shrink: 0;
}
.panel__links svg {
  width: 18px;
  height: 18px;
}
.panel__links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0.72;
  transition: opacity 0.35s ease;
}
.panel__links a:hover,
.panel__links a:focus-visible {
  opacity: 1;
}
.panel__links a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Project CTA: rest = globe + View project (no underline).
   Hover/focus = full white + reveal hint (www... or Coming soon). */
.panel__link--web {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
  color: #fff;
  opacity: 0.72;
  transition: opacity 0.35s ease;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-decoration: none;
}
.panel__links .panel__link--web:hover,
.panel__links .panel__link--web:focus-visible {
  opacity: 1;
}
.panel__link--web:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.panel__link--placeholder {
  cursor: default;
  opacity: 0.55;
}
.panel__link-label {
  margin-left: 0.55rem;
  line-height: 1;
  font-family: Manrope, system-ui, sans-serif;
  font-size: var(--btn-size-sm);
  font-weight: 600;
  letter-spacing: var(--track-secondary);
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color 0.32s ease;
}
.panel__link--web:hover .panel__link-label,
.panel__link--web:focus-visible .panel__link-label {
  color: #fff;
}
.panel__link--web svg {
  display: block;
  flex-shrink: 0;
}

.panel__link-hint {
  position: absolute;
  left: calc(100% + 0.55rem);
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
  font-family: Manrope, system-ui, sans-serif;
  font-size: var(--btn-size-sm);
  font-weight: 600;
  letter-spacing: var(--track-secondary);
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.78);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.32s ease, visibility 0.32s ease;
}
.panel__link--web:hover .panel__link-hint,
.panel__link--web:focus-visible .panel__link-hint {
  opacity: 1;
  visibility: visible;
}
@media (max-width: 640px) {
  .panel__link-hint {
    left: calc(100% + 0.35rem);
    font-size: clamp(0.44rem, 3.1vw, 0.54rem);
    letter-spacing: 0.07em;
    white-space: nowrap;
    line-height: 1;
    max-width: none;
  }
}
.panel--drawer .panel__body p + p {
  margin-top: var(--copy-gap);
}
@media (max-width: 640px) {
  .panel--drawer .panel__media {
    inset: 0;
  }
  .panel--drawer .panel__media img {
    object-fit: cover;
    object-position: 50% 32%;
  }
  .panel--drawer .panel__scrim {
    background:
      linear-gradient(
        to bottom,
        rgba(33, 33, 32, 0.35) 0%,
        rgba(33, 33, 32, 0.08) 22%,
        transparent 40%
      ),
      linear-gradient(
        to top,
        rgba(33, 33, 32, 0.96) 0%,
        rgba(33, 33, 32, 0.72) 34%,
        rgba(33, 33, 32, 0.18) 54%,
        rgba(33, 33, 32, 0.04) 100%
      );
  }
  .panel--drawer .panel__content {
    top: auto;
    left: var(--drawer-inline);
    right: clamp(72px, 14vw, 96px);
    bottom: clamp(60px, 8.5vh, 84px);
    max-width: none;
    max-height: none;
  }

  .panel--person .panel__media img {
    object-position: center 36%;
  }

  #contact.panel--contact .panel__content {
    position: absolute;
    inset: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: 100%;
    display: block;
    box-sizing: border-box;
    padding:
      clamp(80px, 11vh, 96px)
      var(--drawer-inline)
      calc(clamp(88px, 13vh, 104px) + var(--safe-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  #contact .contact-page__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(18px, 3.5vh, 26px);
    width: 100%;
    max-width: none;
  }
  #contact .contact-page__intro .panel__eyebrow {
    margin-bottom: 0.55rem;
  }
  #contact .contact-page__copy p + p {
    margin-top: 0.65rem;
  }
  #contact .contact-page__field {
    margin-bottom: clamp(10px, 1.8vh, 16px);
  }
  #contact .contact-page__field--message textarea {
    min-height: 3.25rem;
  }
  #contact .contact-page__submit {
    margin-top: clamp(4px, 1vh, 8px);
    margin-bottom: clamp(24px, 3.5vh, 32px);
  }
  #contact.panel--contact .panel__back {
    bottom: calc(clamp(18px, 3.5vh, 28px) + var(--safe-bottom));
    z-index: 4;
  }
}

.panel--person .panel__media img {
  object-position: center 40%;
}
@media (min-width: 641px) {
  .panel--person .panel__media img {
    object-position: 58% 42%;
  }
  .panel--person#people-adam .panel__media img {
    object-position: 50% 36%;
  }
  .panel--person#people-cameron .panel__media img {
    object-position: 50% 44%;
  }
  .panel--person#people-paul .panel__media img {
    object-position: 50% 30%;
  }
}
@media (min-width: 641px) {
  .panel--drawer .panel__media {
    inset: 0;
  }
  .panel--drawer .panel__media img {
    object-position: 62% 44%;
  }
  .panel--drawer .panel__scrim {
    background:
      linear-gradient(
        to bottom,
        rgba(33, 33, 32, 0.92) 0%,
        rgba(33, 33, 32, 0.58) 20%,
        rgba(33, 33, 32, 0.1) 38%,
        rgba(33, 33, 32, 0.02) 52%
      ),
      linear-gradient(
        105deg,
        rgba(33, 33, 32, 0.9) 0%,
        rgba(33, 33, 32, 0.55) 32%,
        rgba(33, 33, 32, 0.06) 50%,
        transparent 66%
      );
  }
  /* Desktop: Our Idea — extra scrim anchored bottom-right */
  #idea .panel__scrim {
    background:
      linear-gradient(
        to bottom,
        rgba(33, 33, 32, 0.92) 0%,
        rgba(33, 33, 32, 0.58) 20%,
        rgba(33, 33, 32, 0.1) 38%,
        rgba(33, 33, 32, 0.02) 52%
      ),
      linear-gradient(
        105deg,
        rgba(33, 33, 32, 0.9) 0%,
        rgba(33, 33, 32, 0.55) 32%,
        rgba(33, 33, 32, 0.06) 50%,
        transparent 66%
      ),
      radial-gradient(
        ellipse 70% 60% at 100% 100%,
        rgba(33, 33, 32, 0.82) 0%,
        rgba(33, 33, 32, 0.48) 42%,
        transparent 74%
      );
  }
  .panel--drawer .panel__content {
    top: clamp(104px, 14vh, 168px);
    bottom: clamp(96px, 13vh, 140px);
    right: auto;
    max-width: min(26rem, 34vw);
  }

.panel--drawer.panel--contact .panel__content {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  box-sizing: border-box;
}
    .panel--drawer .panel__eyebrow {
    margin-bottom: 1rem;
  }
}

@media (min-width: 641px) {
  .panel--person.panel--portrait .panel__media {
    inset: -12% -8% -12% -4%;
  }
  .panel--person.panel--portrait .panel__scrim {
    background:
      linear-gradient(
        105deg,
        rgba(33, 33, 32, 0.82) 0%,
        rgba(33, 33, 32, 0.48) 30%,
        rgba(33, 33, 32, 0.08) 50%,
        rgba(33, 33, 32, 0.2) 100%
      );
  }
  .panel--person .panel__content {
    top: clamp(104px, 14vh, 168px);
    bottom: clamp(96px, 13vh, 140px);
    right: auto;
    max-width: min(26rem, 34vw);
    max-height: none;
    overflow: hidden;
  }
}
@media (max-width: 640px) {
  .panel--person.panel--portrait .panel__media {
    inset: -2% -10% -24%;
  }
  .panel--person.panel--portrait .panel__media img {
    object-position: 50% 44%;
  }
  .panel--person .panel__content {
    top: auto;
    bottom: clamp(58px, 8.5vh, 82px);
    left: var(--drawer-inline);
    right: var(--drawer-inline);
    height: min(44vh, 365px);
    max-height: min(44vh, 365px);
    overflow: hidden;
  }
  .panel--person .panel__eyebrow {
    flex-shrink: 0;
    margin-bottom: 0.85rem;
  }
  .panel--person .panel__body {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
  .panel--person .panel__person-footer {
    margin-top: 0.85rem;
    gap: clamp(6px, 1.2vw, 10px);
  }
  .panel--person .panel__person-footer .panel__links {
    gap: 0.75rem;
  }
  .panel--person .panel__links {
    flex-shrink: 0;
    margin-top: 0;
  }
  .panel__person-org--okeland img {
    height: clamp(34px, 8.5vw, 44px);
  }
  .panel__person-org--tempo img {
    height: clamp(14px, 3.2vw, 17px);
    max-width: min(7.5rem, 38vw);
  }
  #people-adam.panel--person .panel__media {
    inset: -4% -10% -18%;
  }
  #people-adam.panel--person .panel__media img {
    object-position: 52% 24%;
  }
  #people-adam.panel--person .panel__scrim {
    background:
      linear-gradient(
        to bottom,
        rgba(33, 33, 32, 0.28) 0%,
        rgba(33, 33, 32, 0.06) 24%,
        transparent 42%
      ),
      linear-gradient(
        to top,
        rgba(33, 33, 32, 0.96) 0%,
        rgba(33, 33, 32, 0.68) 30%,
        rgba(33, 33, 32, 0.14) 52%,
        transparent 62%
      );
  }
  #people-adam.panel--person .panel__content {
    height: min(33vh, 285px);
    max-height: min(33vh, 285px);
  }
  #people-adam.panel--person .panel__eyebrow {
    margin-bottom: 0.55rem;
  }
  #people-adam.panel--person .panel__person-footer {
    margin-top: 0.65rem;
  }
  #people-cameron.panel--person .panel__media {
    inset: -4% -10% -18%;
  }
  #people-cameron.panel--person .panel__media img {
    object-position: 50% 20%;
  }
  #people-cameron.panel--person .panel__scrim {
    background:
      linear-gradient(
        to bottom,
        rgba(33, 33, 32, 0.28) 0%,
        rgba(33, 33, 32, 0.06) 24%,
        transparent 42%
      ),
      linear-gradient(
        to top,
        rgba(33, 33, 32, 0.96) 0%,
        rgba(33, 33, 32, 0.68) 30%,
        rgba(33, 33, 32, 0.14) 52%,
        transparent 62%
      );
  }
  #people-cameron.panel--person .panel__content {
    height: min(33vh, 285px);
    max-height: min(33vh, 285px);
  }
  #people-cameron.panel--person .panel__eyebrow {
    margin-bottom: 0.55rem;
  }
  #people-cameron.panel--person .panel__person-footer {
    margin-top: 0.65rem;
  }
}

@media (max-width: 640px) {
  /* Phone hero stack (13/Jul/26): logo → question → founders → nav. Footer stays bottom. Desktop untouched. */
  .panel--hero {
    justify-items: center;
    align-items: stretch;
    align-content: start;
    place-items: start center;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    min-height: 100svh;
  }
  .panel--hero .panel__stage {
    position: relative;
    inset: auto;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 2;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-start;
    transform: none;
    width: 100%;
    max-width: 100%;
    min-height: auto;
    height: auto;
    padding: 0 clamp(20px, 5vw, 40px);
    padding-top: calc(clamp(12px, 2.5vh, 20px) + var(--safe-top));
    padding-bottom: 0;
    gap: clamp(8px, 1.6vh, 14px);
  }
  .panel--hero .hero__logo {
    margin-bottom: clamp(8px, 1.4vh, 14px);
    flex-shrink: 0;
    order: 0;
  }
  .panel--hero .panel__question {
    flex-shrink: 0;
    text-align: center;
    order: 1;
  }
  .panel--hero .hero__founders-invite {
    order: 2;
    flex-shrink: 0;
    margin-top: clamp(10px, 1.8vh, 18px);
  }
  /* FUNDAMENTAL: one flex column — nav NEVER absolute-bottom on phone.
     Stage (top) → spacer (margin-top:auto on nav + min 16px) → nav → socials in-flow. */
  .panel--hero #nav,
  .panel--hero .panel__nav {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    z-index: 3;
    flex: 0 0 auto;
    width: max-content;
    max-width: calc(100% - 2rem);
    margin-top: auto; /* absorbs free space; prevents names/nav collision */
    padding-top: 16px; /* hard min air below names */
    margin-bottom: 0.75rem; /* air above socials */
    margin-left: var(--hero-nav-left, clamp(16px, 4vw, 24px));
    margin-right: auto;
    align-self: flex-start;
    box-sizing: border-box;
  }
  .panel--hero .panel__nav-btn,
  .panel--hero .panel__nav-group > .panel__nav-btn,
  .panel--hero .panel__nav-dropdown-btn,
  .panel--hero .panel__nav-chevron {
    color: var(--white) !important;
  }
  .panel--hero .panel__nav-btn::after,
  .panel--hero .panel__nav-dropdown-btn::after {
    background: var(--white) !important;
  }
  .panel--hero .panel__nav-btn:focus-visible,
  .panel--hero .panel__nav-dropdown-btn:focus-visible {
    outline-color: var(--white);
  }
  /* Socials in-flow as last flex child (not absolute bottom) */
  .panel--hero .hero__footer,
  .panel--hero #hero-footer {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    z-index: 4;
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
    padding: 0 clamp(16px, 4vw, 24px);
    padding-bottom: calc(clamp(12px, 2vh, 20px) + var(--safe-bottom));
    box-sizing: border-box;
    justify-content: center !important;
  }
  .panel--hero .hero__footer-inner {
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: max-content;
    max-width: 100%;
  }
  .hero__logo {
    margin-bottom: clamp(8px, 1.4vh, 14px);
    flex-shrink: 0;
  }
  .panel__question {
    flex-shrink: 0;
    text-align: center;
  }
  .panel__question {
    font-size: clamp(1.05rem, 4.8vw, 1.55rem);
    white-space: normal;
    max-width: min(18em, 92vw);
    letter-spacing: -0.02em;
    line-height: 1.22;
    text-wrap: balance;
  }
  /* Phase 1 phone FHC H — founders script subordinate to H1 (desktop untouched) 13/Jul/26 */
  .hero__founders-names {
    font-size: clamp(0.88rem, 3.4vw, 1.05rem);
    gap: clamp(1.5rem, 5vw, 2.25rem);
    text-shadow: 0 1px 8px rgba(0,0,0,0.35);
  }
  .hero__founders-invite[aria-hidden="false"] .hero__founders-names button {
    opacity: 0.72;
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.15rem;
    box-sizing: border-box;
  }
  /* Phase 2 phone right? wipe — shorter word = slightly faster; desktop 1.92s untouched 13/Jul/26 */
  .panel__question .word--cue.is-ready::after {
    transition: transform 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .panel__question .word { margin-right: 0.22em; }
  .panel__nav {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    /* Phase 3 phone — wider vertical gaps; margin-left start unchanged 13/Jul/26 */
    gap: clamp(8px, 2.2vw, 14px);
    margin-top: clamp(8px, 1.6vh, 12px);
    margin-left: clamp(28vw, 32vw, 36vw);
    margin-right: auto;
    width: min(11rem, 46vw);
    max-width: calc(100% - clamp(28vw, 32vw, 36vw));
    flex-shrink: 0;
    align-self: flex-start;
  }
  .panel__nav > .panel__nav-btn,
  .panel__nav-group {
    width: 100%;
    max-width: 100%;
  }
  .panel__nav-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .panel__nav-btn,
  .panel__nav-group > .panel__nav-btn {
    width: 100%;
    text-align: left;
    white-space: normal;
    letter-spacing: var(--track-primary);
    font-size: var(--btn-size);
    padding: 0.75rem 0;
    min-height: 44px;
  }
  .panel__nav-btn--menu {
    justify-content: flex-start;
  }
  /* Chevron off on phone - it sits on the L2 name column and its toggle
     collapses Our people after Back (fall-through / focus). */
  .panel--hero #nav .panel__nav-chevron,
  .panel__nav-chevron {
    display: none !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    border: none !important;
  }
  .panel__nav-group:not(.is-open) .panel__nav-dropdown {
    display: none;
    pointer-events: none;
  }
  .panel__nav-dropdown {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    padding: 0;
    margin: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    transition: none;
  }
  .panel__nav-group.is-open .panel__nav-dropdown {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    pointer-events: auto;
    gap: 0;
    padding: 0 0 0.15rem;
  }
  .panel__nav-dropdown::before {
    display: none;
  }
  .panel__nav-dropdown-btn {
    text-align: left;
    min-height: 44px;
    padding: 0.75rem 0;
    font-size: var(--btn-size-sm);
    letter-spacing: var(--track-secondary);
    opacity: 0.72;
  }
  .panel__nav-btn, .panel__nav-dropdown-btn { min-height: 44px; }
  .hero__footer { bottom: calc(clamp(1.125rem, 3.5vh, 2rem) + var(--safe-bottom)); }
  .hero__footer-inner { gap: clamp(0.5rem, 2vw, 0.75rem); }
  .hero__links.panel__links { gap: clamp(0.125rem, 0.8vw, 0.375rem); }
  .hero__links.panel__links a {
    min-width: 44px; min-height: 44px;
    padding: 0 0.125rem;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .panel__back, .founder-reveal__back { min-height: 44px; min-width: 44px; padding: 0.75rem 0; }
  .panel--drawer .panel__content {
    bottom: calc(clamp(60px, 8.5vh, 84px) + var(--safe-bottom));
  }
  .contact-page__field input, .contact-page__field textarea { font-size: 16px; }
  .contact-page__submit, .btn--primary { min-height: 44px; padding: 0.75rem 1.5rem; }
}
/* Narrow phone floor (<=380): type-only FHC for Android 360 + iPhone 375-380. Not a third nav/drawer law. Intentional 13/Jul/26. */
@media (max-width: 380px) {
  .panel__question { font-size: clamp(0.95rem, 4.2vw, 1.2rem); max-width: 96vw; }
  /* Tighter founder-name scale under H1 */
  .hero__founders-names {
    font-size: clamp(0.82rem, 3.2vw, 0.98rem);
    gap: clamp(1.25rem, 4.5vw, 1.85rem);
  }
}

/* iPhone-only hero layout (375-640) - Paul lock 13/Jul/26. Android <375 untouched. Desktop untouched. */
@media (max-width: 640px) and (min-width: 375px) {
  /* Consistent underline clearance below text (clears descenders e.g. g in right?).
     iPhone drawer gutter (intentional): clamp(28px, 7.2vw, 36px) — distinct from Android floor. */
  :root {
    --underline-bp: -0.2em;
    --drawer-inline: clamp(28px, 7.2vw, 36px);
  }
  /* Founder + person logos: white mark → black on light phone skies (not idea/contact drawers) */
  .founder-reveal__logo img,
  .panel--person .panel__logo img {
    filter: brightness(0);
  }
  .panel--hero .panel__question .word--cue.is-ready::after {
    bottom: var(--underline-bp) !important;
  }
  /* (1) Oke & Tempo stack - lower on phone (28/Jul/26); desktop untouched */
  .panel--hero .panel__stage {
    padding-top: calc(36vh + var(--safe-top));
    gap: clamp(6px, 1.2vh, 12px);
  }
  .panel--hero .hero__logo {
    margin-bottom: clamp(6px, 1.2vh, 12px);
    width: clamp(202px, 31.68vw, 317px); /* +20% vs base 168/26.4/264 — iPhone only */
  }
  /* (2) What makes - larger + heavier (closer to desktop weight) */
  .panel--hero .panel__question,
  .panel__question {
    font-size: clamp(1.42rem, 6.1vw, 1.95rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.2;
    max-width: min(16em, 90vw);
  }
  /* Founders invite: cue lower under question; tight gap to names; names larger */
  .panel--hero .hero__founders-invite {
    margin-top: clamp(22px, 3.6vh, 36px);
  }
  .panel--hero .hero__founders-names {
    margin-top: clamp(6px, 1vh, 10px);
    font-size: clamp(1.2rem, 4.8vw, 1.5rem);
    gap: clamp(1.6rem, 5.2vw, 2.4rem);
  }
  /* (3) FUNDAMENTAL flex column — nav in-flow; left = click line via margin */
  .panel--hero {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    min-height: 100svh;
    padding-bottom: 0;
    box-sizing: border-box;
  }
  .panel--hero .panel__stage {
    flex: 0 0 auto;
  }
  /* Reserve founders block height from load so aria reveal cannot push nav */
  .panel--hero .hero__founders-invite {
    min-height: 4.75rem;
    margin-top: clamp(22px, 3.6vh, 36px);
  }
  .panel--hero .hero__founders-names {
    min-height: 2.75rem;
  }
  .panel--hero .hero__founders-names button {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  .panel--hero #nav,
  .panel--hero .panel__nav {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    margin-top: auto;
    padding-top: 16px;
    margin-bottom: 0.75rem;
    margin-left: var(--hero-nav-left, clamp(16px, 4vw, 24px)) !important;
    margin-right: auto !important;
    align-self: flex-start;
    width: max-content;
    max-width: calc(100% - 2rem);
    z-index: 3;
  }
  /* (4) right? wipe speed = desktop 1.92s (override phone 1.5s) */
  .panel__question .word--cue.is-ready::after {
    transition: transform 1.92s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* (5) iPhone nav: 4 parents only; People/Projects children appear to the RIGHT on hover/tap */
  .panel--hero #nav,
  .panel--hero .panel__nav {
    /* width reserved in L2 block; left via margin (in-flow) */
    max-width: calc(100vw - 2rem);
    margin-left: var(--hero-nav-left, clamp(16px, 4vw, 24px)) !important;
    margin-right: auto !important;
    left: auto !important;
    gap: 0 !important;
    row-gap: 0 !important;
  }
  .panel--hero #nav .panel__nav-btn--menu {
    display: inline-flex !important;
    align-items: center;
    width: auto !important; /* text-width so open underline hugs label */
    max-width: var(--nav-label-col, 8.6em);
  }
  .panel--hero #nav .panel__nav-chevron {
    display: none !important;
  }
  .panel--hero #nav .panel__nav-group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    width: auto;
    max-width: 100%;
    margin: 0;
    position: relative;
  }
  /* L2 flyout: tight gap; reserve full nav width so click/expand cannot shift block */
  .panel--hero #nav {
    --nav-row-h: 48px; /* wider gap between nav rows 13/Jul/26 */
    --nav-l2-gap: 0.22rem;
    --nav-label-col: 8.6em; /* ~OUR PROJECTS at phone size */
    --nav-l2-col: 8.75em; /* ~Adam Shephard */
    width: calc(var(--nav-label-col) + var(--nav-l2-gap) + var(--nav-l2-col)) !important;
    max-width: calc(100vw - 2rem) !important;
    box-sizing: border-box;
  }
  .panel--hero #nav .panel__nav-group {
    align-items: flex-start !important;
    position: relative !important;
    overflow: visible !important;
    width: var(--nav-label-col) !important;
    min-height: var(--nav-row-h) !important;
    height: var(--nav-row-h) !important; /* lock row - L2 absolute cannot grow group */
    flex: 0 0 var(--nav-row-h) !important;
  }
  .panel--hero #nav > .panel__nav-btn {
    width: var(--nav-label-col) !important;
    min-height: var(--nav-row-h) !important;
    height: var(--nav-row-h) !important;
    flex: 0 0 var(--nav-row-h) !important;
    box-sizing: border-box;
  }
  .panel--hero #nav .panel__nav-dropdown {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute !important;
    left: var(--nav-label-col);
    top: 0;
    right: auto !important;
    bottom: auto !important;
    width: var(--nav-l2-col) !important;
    min-width: 0;
    margin: 0 0 0 var(--nav-l2-gap) !important;
    padding: 0 !important;
    gap: 0 !important;
    max-height: none;
    overflow: visible;
    opacity: 0;
    visibility: hidden;
    pointer-events: none !important;
    transform: none; /* no slide - opacity only, less jumpy */
    transition: opacity 0.28s ease, visibility 0.28s;
    z-index: 6;
  }
  /* Phone L2: is-open / pinned only - ignore :focus-within (focus moves into drawers) */
  .panel--hero #nav .panel__nav-group:focus-within:not(.is-open):not([data-l2-pinned="1"]) .panel__nav-dropdown {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .panel--hero #nav .panel__nav-group.is-open .panel__nav-dropdown,
  .panel--hero #nav .panel__nav-group[data-l2-pinned="1"] .panel__nav-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none;
  }
  .panel--hero #nav .panel__nav-group[data-l2-pinned="1"] {
    /* keep group marked open for any :not(.is-open) hide rules */
  }
  .panel--hero #nav .panel__nav-group[data-l2-pinned="1"]:not(.is-open) .panel__nav-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: flex !important;
  }
  /* Phone: no hover underlines; show underline only when People/Projects L2 is open */
  .panel--hero #nav .panel__nav-btn::after,
  .panel--hero #nav .panel__nav-dropdown-btn::after,
  .panel--hero #nav .panel__nav-btn--menu::after {
    content: none !important;
    display: none !important;
    transform: none !important;
    opacity: 0 !important;
    background: transparent !important;
  }
  .panel--hero #nav .panel__nav-group.is-open > .panel__nav-btn--menu {
    position: relative !important;
  }
  .panel--hero #nav .panel__nav-group.is-open > .panel__nav-btn--menu::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    bottom: 0.12em !important; /* tighter to nav label; right? keeps --underline-bp */
    height: var(--underline-h, 1px) !important;
    background: var(--white) !important;
    transform: scaleX(1) !important;
    transform-origin: left center !important;
    opacity: 0.72 !important;
    pointer-events: none !important;
  }
  .panel--hero #nav > .panel__nav-btn,
  .panel--hero #nav .panel__nav-group > .panel__nav-btn {
    display: inline-flex !important;
    align-items: center;
    width: var(--nav-label-col, 12.5em) !important;
    min-height: var(--nav-row-h, 36px) !important;
    padding: 0.2rem 0 !important;
    font-size: clamp(calc(0.98rem - 6px), calc(4.4vw - 6px), calc(1.15rem - 6px)) !important;
    font-weight: 400 !important;
    letter-spacing: var(--track-primary) !important;
    text-transform: uppercase;
    /* opacity owned by intro GSAP - do NOT force 1 or nav shows on load */
    opacity: 0;
    height: auto !important;
    line-height: 1.15 !important;
    white-space: nowrap;
    box-sizing: border-box;
  }
  .panel--hero #nav[aria-hidden="true"] > .panel__nav-btn,
  .panel--hero #nav[aria-hidden="true"] .panel__nav-group > .panel__nav-btn {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .panel--hero #nav .panel__nav-dropdown-btn {
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    min-height: var(--nav-row-h, 36px) !important; /* exact top-level row pitch */
    padding: 0.2rem 0 !important;
    font-size: clamp(calc(0.9rem - 6px), calc(4vw - 6px), calc(1.05rem - 6px)) !important;
    font-weight: 400 !important;
    letter-spacing: var(--track-primary) !important;
    text-transform: uppercase !important; /* people + project L2 names */
    opacity: 0.88 !important;
    height: auto !important;
    line-height: 1.15 !important;
    white-space: nowrap;
    box-sizing: border-box;
  }

  /* iPhone: Filaro copy at bottom + globe/Back share one baseline (Sable/people principle) */
  #project-filaro.panel--poster-copy .panel__content {
    top: auto !important;
    /* leave band for shared chrome line (globe + Back) */
    bottom: calc(clamp(72px, 11vh, 96px) + env(safe-area-inset-bottom, 0px)) !important;
  }
  #project-filaro.panel--poster .panel__scrim {
    background:
      linear-gradient(
        to bottom,
        rgba(33, 33, 32, 0.28) 0%,
        rgba(33, 33, 32, 0.06) 18%,
        transparent 36%
      ),
      linear-gradient(
        to top,
        rgba(33, 33, 32, 0.96) 0%,
        rgba(33, 33, 32, 0.72) 32%,
        rgba(33, 33, 32, 0.16) 54%,
        transparent 66%
      ) !important;
  }
  /* FIXED to viewport (not absolute-in-content) so body cannot cover globe — person-footer pattern */
  #project-filaro.is-active .panel__links,
  #project-filaro.is-revealed .panel__links,
  #project-sable.is-active .panel__links,
  #project-sable.is-revealed .panel__links {
    position: fixed !important;
    left: var(--drawer-inline);
    right: auto;
    bottom: calc(clamp(24px, 5vh, 48px) + env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important;
    margin-top: 0 !important;
    min-height: 44px;
    display: flex !important;
    align-items: center;
    z-index: 160;
    pointer-events: auto;
  }
  #project-filaro .panel__back,
  #project-sable .panel__back {
    position: absolute;
    bottom: calc(clamp(24px, 5vh, 48px) + env(safe-area-inset-bottom, 0px)) !important;
    min-height: 44px;
    align-items: center;
    z-index: 160;
  }
  /* Keep copy above chrome; height auto so block sits on bottom, not stretched */
  #project-filaro.panel--poster-copy .panel__content,
  #project-sable.panel--poster-copy .panel__content {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  #project-sable.panel--poster-copy .panel__content {
    top: auto !important;
    bottom: calc(clamp(72px, 11vh, 96px) + env(safe-area-inset-bottom, 0px)) !important;
  }
}


@media (max-height: 680px) {
  .panel__stage {
    padding-top: calc(clamp(12vh, 16vh, 20vh) + var(--safe-top));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .panel__nav { flex-shrink: 1; }
  .hero__logo,
  .panel__question { flex-shrink: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #phone-burger-panel,
  #phone-burger-backdrop,
  #phone-burger .phone-burger__icon span,
  #phone-burger-panel .pbn-chevron { transition: none !important; }
  .panel--drawer { transition: none; transform: none; }
  .hero__logo,
  .panel__question .word,
  .panel__question .word--cue,
  .panel__nav-btn {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .hero__links.panel__links a {
    opacity: 0.72 !important;
    transform: none !important;
  }
  .panel__question .word--cue.is-ready.show-cue::after { transform: scaleX(1); opacity: 0.72; }
  .founder-reveal { transition: none; transform: none; visibility: hidden; }
  .founder-reveal.is-open { visibility: visible; }
  .founder-reveal.is-open.is-revealed { transform: none; }
}

.panel__nav-btn--menu::after {
  display: none;
}
.panel__nav-btn--menu {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding-right: 0.1em;
}
.panel__nav-btn--menu .panel__nav-chevron {
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-0.12em);
  opacity: 0.5;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
  flex-shrink: 0;
  pointer-events: none;
}
.panel__nav-group.is-hover > .panel__nav-btn--menu,
.panel__nav-group.is-open > .panel__nav-btn--menu,
.panel__nav-group:focus-within > .panel__nav-btn--menu {
  opacity: 1;
}
.panel__nav-group.is-hover > .panel__nav-btn--menu .panel__nav-chevron,
.panel__nav-group.is-open > .panel__nav-btn--menu .panel__nav-chevron,
.panel__nav-group:focus-within > .panel__nav-btn--menu .panel__nav-chevron {
  transform: rotate(-135deg) translateY(0.08em);
  opacity: 0.85;
}

/* Surgical - iphone (375-640) - Our Idea:
   match founder lock - ALL copy on page, no scroll; partners stay in flow.
   Must sit AFTER general @media (max-width: 640px) #idea rules.
   Preserve: desktop / android <375 (separate pass). */
@media (max-width: 640px) and (min-width: 375px) {
  /* 14/Jul/26 Paul: iPhone Idea — solid Contact chocolate + white text; photo/scrim off (too busy) */
  #idea.panel--idea {
    background: var(--chocolate);
    color: var(--white);
  }
  #idea .panel__media,
  #idea .panel__scrim {
    display: none !important;
  }
  #idea .panel__eyebrow,
  #idea .panel__body {
    text-shadow: none;
    color: var(--white);
  }

  /* Text to top (under logo). */
  #idea .panel__content {
    top: clamp(88px, 11.5vh, 112px);
    bottom: auto;
    right: var(--drawer-inline);
    left: var(--drawer-inline);
    max-width: none;
    overflow: visible;
  }
  #idea .panel__body {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
    overflow-y: visible;
    -webkit-overflow-scrolling: auto;
  }

  /* Nudge crop down slightly (no top gap / charcoal bar). */
  #idea .panel__media img {
    position: absolute;
    left: 0;
    width: 100%;
    height: 118%;
    top: -6%;
    object-fit: cover;
    object-position: 48% 46%;
  }

  /* Partner logos sit lower, level with Back (fixed only while Idea is open). */
  #idea.is-active .panel__partners,
  #idea.is-revealed .panel__partners {
    position: fixed;
    left: var(--drawer-inline); /* align to copy left edge */
    bottom: calc(clamp(24px, 5vh, 48px) + env(safe-area-inset-bottom, 0px));
    margin-top: 0;
    width: auto;
    max-width: calc(100vw - 7.5rem);
    z-index: 160;
    gap: 0.35rem;
  }
  #idea .panel__partners-logos {
    width: auto;
    gap: 0.35rem;
  }
  #idea .panel__partners-logos a {
    padding: 0.35rem 0.4rem;
    min-width: 0;
  }
  /* Okeland +20% vs prior mobile clamp(1.75rem, 7vw, 2.25rem). */
  #idea .panel__partners-logo--okeland img {
    height: clamp(2.1rem, 8.4vw, 2.7rem);
  }
}

/* Surgical - iphone (375-640) - People Adam:
   same Idea pattern - top copy, ALL text no scroll; image up for face;
   Okeland logo + links sit with Back. Mid scrim for copy.
   Preserve: desktop / Cameron+Paul people / android <375 / founder reveal. */
@media (max-width: 640px) and (min-width: 375px) {
  #people-adam.panel--person .panel__scrim {
    background:
      linear-gradient(
        to top,
        rgba(33, 33, 32, 0.94) 0%,
        rgba(33, 33, 32, 0.82) 22%,
        rgba(33, 33, 32, 0.55) 42%,
        rgba(33, 33, 32, 0.18) 62%,
        transparent 78%
      );
  }

  #people-adam.panel--person .panel__content {
    top: auto;
    bottom: clamp(72px, 10vh, 96px);
    left: var(--drawer-inline);
    right: var(--drawer-inline);
    height: auto;
    max-height: none;
    overflow: visible;
  }
  #people-adam.panel--person .panel__body {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    overflow: visible;
    overflow-y: visible;
    padding-right: 0;
    -webkit-overflow-scrolling: auto;
  }
  #people-adam.panel--person .panel__eyebrow {
    margin-bottom: 0.65rem;
  }
  #people-adam.panel--person .panel__eyebrow,
  #people-adam.panel--person .panel__body {
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
  }

  /* Image up - face above copy (portrait asset; height/top pan). */
  #people-adam.panel--person .panel__media {
    inset: 0;
  }
  #people-adam.panel--person .panel__media img {
    position: absolute;
    left: 0;
    width: 100%;
    height: 160%;
    top: -28%;
    object-fit: cover;
    object-position: 50% 18%;
    filter: none;
  }

  /* Org logo + social links level with Back. */
  #people-adam.is-active .panel__person-footer,
  #people-adam.is-revealed .panel__person-footer {
    position: fixed;
    left: var(--drawer-inline); /* align to copy left edge */
    bottom: calc(clamp(24px, 5vh, 48px) + env(safe-area-inset-bottom, 0px));
    margin-top: 0;
    width: auto;
    max-width: calc(100vw - 7.5rem);
    z-index: 160;
    gap: 0.45rem;
  }
  #people-adam.is-active .panel__person-footer:has(.panel__person-org--okeland) .panel__links,
  #people-adam.is-revealed .panel__person-footer:has(.panel__person-org--okeland) .panel__links {
    margin-left: 0;
  }
}

/* Surgical - iphone (375-640) - People Cameron:
   mirror Adam People - bottom copy, ALL text no scroll; image up for face;
   Okeland logo + links sit with Back. Bottom scrim for copy.
   Preserve: desktop / Adam+Paul people / android <375 / founder reveal. */
@media (max-width: 640px) and (min-width: 375px) {
  #people-cameron.panel--person .panel__scrim {
    background:
      linear-gradient(
        to top,
        rgba(33, 33, 32, 0.94) 0%,
        rgba(33, 33, 32, 0.82) 22%,
        rgba(33, 33, 32, 0.55) 42%,
        rgba(33, 33, 32, 0.18) 62%,
        transparent 78%
      );
  }

  #people-cameron.panel--person .panel__content {
    top: auto;
    bottom: clamp(72px, 10vh, 96px);
    left: var(--drawer-inline);
    right: var(--drawer-inline);
    height: auto;
    max-height: none;
    overflow: visible;
  }
  #people-cameron.panel--person .panel__body {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    overflow: visible;
    overflow-y: visible;
    padding-right: 0;
    -webkit-overflow-scrolling: auto;
  }
  #people-cameron.panel--person .panel__eyebrow {
    margin-bottom: 0.65rem;
  }
  #people-cameron.panel--person .panel__eyebrow,
  #people-cameron.panel--person .panel__body {
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
  }

  #people-cameron.panel--person .panel__media {
    inset: 0;
  }
  #people-cameron.panel--person .panel__media img {
    position: absolute;
    left: 0;
    width: 100%;
    height: 172%;
    top: -46%;
    object-fit: cover;
    object-position: 50% 14%;
    filter: none;
  }

  #people-cameron.is-active .panel__person-footer,
  #people-cameron.is-revealed .panel__person-footer {
    position: fixed;
    left: var(--drawer-inline); /* align to copy left edge */
    bottom: calc(clamp(24px, 5vh, 48px) + env(safe-area-inset-bottom, 0px));
    margin-top: 0;
    width: auto;
    max-width: calc(100vw - 7.5rem);
    z-index: 160;
    gap: 0.45rem;
  }
  #people-cameron.is-active .panel__person-footer:has(.panel__person-org--okeland) .panel__links,
  #people-cameron.is-revealed .panel__person-footer:has(.panel__person-org--okeland) .panel__links {
    margin-left: 0;
  }
}

/* LOCKED rule - iphone (375-640): logo line + Back share one baseline.
   left = copy edge; bottom + min-height match .panel__back; center-aligned. */
@media (max-width: 640px) and (min-width: 375px) {
  #idea .panel__back,
  #people-adam .panel__back,
  #people-cameron .panel__back,
  #people-paul .panel__back {
    z-index: 170;
    right: var(--drawer-inline);
    bottom: calc(clamp(24px, 5vh, 48px) + env(safe-area-inset-bottom, 0px));
    min-height: 44px;
    align-items: center;
  }
  #idea.is-active .panel__partners,
  #idea.is-revealed .panel__partners,
  #people-adam.is-active .panel__person-footer,
  #people-adam.is-revealed .panel__person-footer,
  #people-cameron.is-active .panel__person-footer,
  #people-cameron.is-revealed .panel__person-footer,
  #people-paul.is-active .panel__person-footer,
  #people-paul.is-revealed .panel__person-footer {
    left: var(--drawer-inline);
    bottom: calc(clamp(24px, 5vh, 48px) + env(safe-area-inset-bottom, 0px));
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  #idea .panel__partners-logos {
    align-items: center;
  }
  #idea .panel__partners-logos a {
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  #idea .panel__partners-logos a:first-child {
    padding-left: 0;
  }
  #people-adam .panel__person-org,
  #people-cameron .panel__person-org,
  #people-paul .panel__person-org,
  #people-adam .panel__person-footer .panel__links,
  #people-cameron .panel__person-footer .panel__links,
  #people-paul .panel__person-footer .panel__links {
    margin-left: 0;
    padding-left: 0;
    align-items: center;
  }
  #people-adam .panel__person-org--okeland,
  #people-cameron .panel__person-org--okeland,
  #people-paul .panel__person-org--okeland,
  #people-paul .panel__person-org--tempo {
    margin-left: 0;
    padding-left: 0;
  }
}

/* Surgical - iphone (375-640) - People Paul:
   mirror Adam/Cameron People - bottom copy, ALL text no scroll; image up for face;
   Tempo logo + links sit with Back, left-aligned to copy.
   Preserve: desktop / Adam+Cameron people / android <375 / founder reveal. */
@media (max-width: 640px) and (min-width: 375px) {
  #people-paul.panel--person .panel__scrim {
    background:
      linear-gradient(
        to top,
        rgba(33, 33, 32, 0.94) 0%,
        rgba(33, 33, 32, 0.82) 22%,
        rgba(33, 33, 32, 0.55) 42%,
        rgba(33, 33, 32, 0.18) 62%,
        transparent 78%
      );
  }

  #people-paul.panel--person .panel__content {
    top: auto;
    bottom: clamp(72px, 10vh, 96px);
    left: var(--drawer-inline);
    right: var(--drawer-inline);
    height: auto;
    max-height: none;
    overflow: visible;
  }
  #people-paul.panel--person .panel__body {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    overflow: visible;
    overflow-y: visible;
    padding-right: 0;
    -webkit-overflow-scrolling: auto;
  }
  #people-paul.panel--person .panel__eyebrow {
    margin-bottom: 0.65rem;
  }
  #people-paul.panel--person .panel__eyebrow,
  #people-paul.panel--person .panel__body {
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
  }

  #people-paul.panel--person .panel__media {
    inset: 0;
  }
  #people-paul.panel--person .panel__media img {
    position: absolute;
    left: 0;
    width: 100%;
    height: 155%;
    top: -22%;
    object-fit: cover;
    object-position: 48% 20%;
    filter: none;
  }

  #people-paul.is-active .panel__person-footer,
  #people-paul.is-revealed .panel__person-footer {
    position: fixed;
    left: var(--drawer-inline);
    bottom: calc(clamp(24px, 5vh, 48px) + env(safe-area-inset-bottom, 0px));
    margin-top: 0;
    width: auto;
    max-width: calc(100vw - 7.5rem);
    z-index: 160;
    gap: 0.45rem;
  }
  #people-paul.is-active .panel__person-footer .panel__links,
  #people-paul.is-revealed .panel__person-footer .panel__links {
    margin-left: 0;
  }
}


/* 14/Jul/26 Paul: phone Paul bio credentials shortened (iPhone 375-640 + Android <=374); desktop keeps full institutions */
#people-paul .panel__bio-cred--phone {
  display: none;
}
@media (max-width: 640px) {
  #people-paul .panel__bio-cred--full {
    display: none;
  }
  #people-paul .panel__bio-cred--phone {
    display: block;
  }
}
/* Surgical - iphone (375-640) - Contact:
   fits intro + form on one screen; scroll stays available as fallback (SE heights). */
@media (max-width: 640px) and (min-width: 375px) {
  #contact.panel--contact .panel__content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
    padding-top: clamp(72px, 9.5vh, 88px);
    padding-bottom: calc(clamp(64px, 9vh, 80px) + env(safe-area-inset-bottom, 0px));
    padding-left: var(--drawer-inline);
    padding-right: var(--drawer-inline);
  }
  #contact .contact-page__layout {
    gap: clamp(44px, 6.5vh, 64px);
  }
  #contact .contact-page__copy p + p {
    margin-top: 0.55rem;
  }
  #contact .contact-page__field {
    margin-bottom: clamp(6px, 1.2vh, 10px);
  }
  #contact .contact-page__field--message textarea {
    min-height: 2.75rem;
  }
  #contact .contact-page__submit {
    margin-top: 0.15rem;
    margin-bottom: 0;
  }
}

/* LOCKED - iphone (375-640) - founder voice name + Back same row.
   Copy bottom = Back bottom; name is 44px flex footer centered with Back. */
@media (max-width: 640px) and (min-width: 375px) {
  .founder-reveal__back {
    bottom: calc(clamp(24px, 5vh, 48px) + env(safe-area-inset-bottom, 0px));
    min-height: 44px;
    align-items: center;
  }
  .founder-reveal__copy {
    bottom: calc(clamp(24px, 5vh, 48px) + env(safe-area-inset-bottom, 0px));
  }
  .founder-reveal__name {
    margin-top: 0.85rem;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  .founder-reveal--paul .founder-reveal__copy,
  .founder-reveal--adam .founder-reveal__copy,
  .founder-reveal--cameron .founder-reveal__copy {
    bottom: calc(clamp(24px, 5vh, 48px) + env(safe-area-inset-bottom, 0px));
  }
}


/* 14/Jul/26 Paul GLOBAL iPhone founder voice: text edge-to-edge — same gutter L/R; no Back reserved right gap.
   Desktop untouched. Android (<=374) untouched until Paul says switch. */
@media (max-width: 640px) and (min-width: 375px) {
  .founder-reveal__copy,
  .founder-reveal--adam .founder-reveal__copy,
  .founder-reveal--cameron .founder-reveal__copy,
  .founder-reveal--paul .founder-reveal__copy {
    left: var(--drawer-inline);
    right: var(--drawer-inline);
    max-width: none;
    padding-right: 0;
  }
  .founder-reveal__text {
    padding-right: 0;
  }
}

/* 14/Jul/26 Paul: iPhone Adam founder — scrim tighter to bottom copy band; upper face clear */
@media (max-width: 640px) and (min-width: 375px) {
  .founder-reveal--adam .founder-reveal__scrim {
    background: linear-gradient(
      to top,
      rgba(33, 33, 32, 0.98) 0%,
      rgba(33, 33, 32, 0.92) 18%,
      rgba(33, 33, 32, 0.72) 32%,
      rgba(33, 33, 32, 0.4) 44%,
      rgba(33, 33, 32, 0.12) 56%,
      rgba(33, 33, 32, 0) 66%
    );
  }
}

/* 14/Jul/26 Paul: iPhone Cameron founder — scrim tighter to bottom copy band (mirror Adam) */
@media (max-width: 640px) and (min-width: 375px) {
  .founder-reveal--cameron .founder-reveal__scrim {
    background: linear-gradient(
      to top,
      rgba(33, 33, 32, 0.995) 0%,
      rgba(33, 33, 32, 0.96) 16%,
      rgba(33, 33, 32, 0.85) 30%,
      rgba(33, 33, 32, 0.58) 42%,
      rgba(33, 33, 32, 0.28) 54%,
      rgba(33, 33, 32, 0) 66%
    );
  }
}

/* 14/Jul/26 Paul: iPhone Paul founder — scrim tighter to bottom copy band (mirror Adam/Cameron) */
@media (max-width: 640px) and (min-width: 375px) {
  .founder-reveal--paul .founder-reveal__scrim {
    background: linear-gradient(
      to top,
      rgba(33, 33, 32, 0.995) 0%,
      rgba(33, 33, 32, 0.96) 16%,
      rgba(33, 33, 32, 0.85) 30%,
      rgba(33, 33, 32, 0.58) 42%,
      rgba(33, 33, 32, 0.28) 54%,
      rgba(33, 33, 32, 0) 66%
    );
  }
}

/* 14/Jul/26 Paul GLOBAL iPhone people bio: full-measure edge-to-edge (mirror founder voice).
   Beats shared .panel--drawer .panel__content right:clamp(72px…) Back reserve. Desktop/Android untouched. */
@media (max-width: 640px) and (min-width: 375px) {
  #people-adam.panel--person .panel__content,
  #people-cameron.panel--person .panel__content,
  #people-paul.panel--person .panel__content {
    left: var(--drawer-inline) !important;
    right: var(--drawer-inline) !important;
    max-width: none !important;
    padding-right: 0 !important;
  }
  #people-adam.panel--person .panel__body,
  #people-cameron.panel--person .panel__body,
  #people-paul.panel--person .panel__body,
  #people-adam.panel--person .panel__eyebrow,
  #people-cameron.panel--person .panel__eyebrow,
  #people-paul.panel--person .panel__eyebrow {
    padding-right: 0 !important;
    max-width: none;
  }
}
/* =====================================================================
   ANDROID ONLY - max-width: 374px
   Mirrors locked iPhone layout principles. DO NOT edit 375-640 blocks.
   ===================================================================== */
@media (max-width: 374px) {
  :root {
    /* Android drawer gutter — distinct from iPhone 28px raise */
    --drawer-inline: clamp(20px, 5.5vw, 28px);
    --drawer-logo-top: clamp(16px, 3vh, 24px);
  }

  /* --- Founder voice: full copy, no scroll; name + Back same row --- */
  .founder-reveal__back {
    bottom: calc(clamp(20px, 4.5vh, 40px) + env(safe-area-inset-bottom, 0px));
    right: clamp(16px, 4vw, 24px);
    min-height: 44px;
    align-items: center;
  }
  .founder-reveal__copy {
    top: auto;
    left: var(--drawer-inline);
    right: clamp(64px, 16vw, 88px);
    bottom: calc(clamp(20px, 4.5vh, 40px) + env(safe-area-inset-bottom, 0px));
    max-height: none;
    overflow: visible;
  }
  .founder-reveal__text {
    flex: 0 0 auto;
    overflow: visible;
    touch-action: auto;
    padding-left: 0;
  }
  .founder-reveal__name {
    margin-top: 0.75rem;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  /* Founder Paul - beat max-width:640 max-height; keep bottom band */
  .founder-reveal--paul .founder-reveal__copy {
    top: auto;
    bottom: calc(clamp(20px, 4.5vh, 40px) + env(safe-area-inset-bottom, 0px));
    max-height: none;
    overflow: visible;
  }
  .founder-reveal--paul .founder-reveal__text {
    flex: 0 0 auto;
    overflow: visible;
  }
  .founder-reveal--paul .founder-reveal__media img {
    position: absolute;
    left: 0;
    width: 100%;
    height: 160%;
    top: -24%;
    object-fit: cover;
    object-position: 48% 18%;
  }
  .founder-reveal--paul .founder-reveal__scrim {
    background: linear-gradient(
      to top,
      rgba(58, 44, 40, 0.99) 0%,
      rgba(33, 33, 32, 0.94) 18%,
      rgba(33, 33, 32, 0.78) 34%,
      rgba(33, 33, 32, 0.4) 50%,
      rgba(33, 33, 32, 0.12) 62%,
      rgba(33, 33, 32, 0) 72%
    );
  }

  /* Founder Cameron - MUST set top:auto (beats max-width:640 top:clamp) */
  .founder-reveal--cameron .founder-reveal__copy {
    top: auto;
    left: var(--drawer-inline);
    right: clamp(64px, 16vw, 88px);
    bottom: calc(clamp(20px, 4.5vh, 40px) + env(safe-area-inset-bottom, 0px));
    max-height: none;
    overflow: visible;
    padding-bottom: 0;
  }
  .founder-reveal--cameron .founder-reveal__text {
    flex: 0 0 auto;
    overflow: visible;
  }
  .founder-reveal--cameron .founder-reveal__name {
    margin-top: 0.75rem;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .founder-reveal--cameron .founder-reveal__media {
    inset: 0;
  }
  .founder-reveal--cameron .founder-reveal__media img {
    position: absolute;
    left: 0;
    width: 100%;
    height: 172%;
    top: -46%;
    object-fit: cover;
    object-position: 50% 14%;
  }
  .founder-reveal--cameron .founder-reveal__scrim {
    background: linear-gradient(
      to top,
      rgba(33, 33, 32, 0.995) 0%,
      rgba(33, 33, 32, 0.96) 16%,
      rgba(33, 33, 32, 0.85) 30%,
      rgba(33, 33, 32, 0.58) 42%,
      rgba(33, 33, 32, 0.28) 54%,
      rgba(33, 33, 32, 0) 66%
    );
  }

  /* Founder Adam */
  .founder-reveal--adam .founder-reveal__copy {
    top: auto;
    bottom: calc(clamp(20px, 4.5vh, 40px) + env(safe-area-inset-bottom, 0px));
    max-height: none;
    overflow: visible;
  }
  .founder-reveal--adam .founder-reveal__text {
    flex: 0 0 auto;
    overflow: visible;
  }
  .founder-reveal--adam .founder-reveal__media img {
    position: absolute;
    left: 0;
    width: 100%;
    height: 160%;
    top: -28%;
    object-fit: cover;
    object-position: 54% 16%;
  }

  /* --- Idea: top copy, no scroll; partners with Back; mid scrim --- */
  #idea .panel__scrim {
    background:
      linear-gradient(
        to bottom,
        rgba(33, 33, 32, 0.94) 0%,
        rgba(33, 33, 32, 0.86) 16%,
        rgba(33, 33, 32, 0.74) 34%,
        rgba(33, 33, 32, 0.55) 52%,
        rgba(33, 33, 32, 0.28) 70%,
        transparent 88%
      ),
      linear-gradient(
        to top,
        rgba(33, 33, 32, 0.62) 0%,
        rgba(33, 33, 32, 0.22) 28%,
        transparent 48%
      );
  }
  #idea .panel__content {
    top: clamp(80px, 11vh, 104px);
    bottom: auto;
    left: var(--drawer-inline);
    right: var(--drawer-inline);
    max-width: none;
    overflow: visible;
  }
  #idea .panel__body {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
    overflow-y: visible;
    -webkit-overflow-scrolling: auto;
  }
  #idea .panel__eyebrow,
  #idea .panel__body {
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
  }
  #idea .panel__media img {
    position: absolute;
    left: 0;
    width: 100%;
    height: 118%;
    top: -6%;
    object-fit: cover;
    object-position: 48% 46%;
  }
  #idea .panel__back {
    bottom: calc(clamp(20px, 4.5vh, 40px) + env(safe-area-inset-bottom, 0px));
    right: clamp(16px, 4vw, 24px);
    min-height: 44px;
    align-items: center;
    z-index: 170;
  }
  #idea.is-active .panel__partners,
  #idea.is-revealed .panel__partners {
    position: fixed;
    left: var(--drawer-inline);
    bottom: calc(clamp(20px, 4.5vh, 40px) + env(safe-area-inset-bottom, 0px));
    margin-top: 0;
    width: auto;
    max-width: calc(100vw - 6.5rem);
    z-index: 160;
    gap: 0.35rem;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  #idea .panel__partners-logos {
    width: auto;
    gap: 0.35rem;
    align-items: center;
  }
  #idea .panel__partners-logos a {
    padding: 0.25rem 0.35rem;
    padding-left: 0;
    min-width: 0;
  }
  #idea .panel__partners-logo--okeland img {
    height: clamp(1.9rem, 8vw, 2.4rem);
  }

  /* --- People (Adam / Cameron / Paul): bottom copy, no scroll, face up --- */
  #people-adam.panel--person .panel__scrim,
  #people-cameron.panel--person .panel__scrim,
  #people-paul.panel--person .panel__scrim {
    background: linear-gradient(
      to top,
      rgba(33, 33, 32, 0.94) 0%,
      rgba(33, 33, 32, 0.82) 22%,
      rgba(33, 33, 32, 0.55) 42%,
      rgba(33, 33, 32, 0.18) 62%,
      transparent 78%
    );
  }
  #people-adam.panel--person .panel__content,
  #people-cameron.panel--person .panel__content,
  #people-paul.panel--person .panel__content {
    top: auto;
    bottom: clamp(64px, 9vh, 88px);
    left: var(--drawer-inline);
    right: var(--drawer-inline);
    height: auto;
    max-height: none;
    overflow: visible;
  }
  #people-adam.panel--person .panel__body,
  #people-cameron.panel--person .panel__body,
  #people-paul.panel--person .panel__body {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    overflow: visible;
    overflow-y: visible;
    padding-right: 0;
    -webkit-overflow-scrolling: auto;
  }
  #people-adam.panel--person .panel__eyebrow,
  #people-cameron.panel--person .panel__eyebrow,
  #people-paul.panel--person .panel__eyebrow,
  #people-adam.panel--person .panel__body,
  #people-cameron.panel--person .panel__body,
  #people-paul.panel--person .panel__body {
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
  }
  #people-adam.panel--person .panel__media,
  #people-cameron.panel--person .panel__media,
  #people-paul.panel--person .panel__media {
    inset: 0;
  }
  #people-adam.panel--person .panel__media img {
    position: absolute;
    left: 0;
    width: 100%;
    height: 160%;
    top: -28%;
    object-fit: cover;
    object-position: 50% 18%;
    filter: none;
  }
  #people-cameron.panel--person .panel__media img {
    position: absolute;
    left: 0;
    width: 100%;
    height: 172%;
    top: -46%;
    object-fit: cover;
    object-position: 50% 14%;
    filter: none;
  }
  #people-paul.panel--person .panel__media img {
    position: absolute;
    left: 0;
    width: 100%;
    height: 155%;
    top: -22%;
    object-fit: cover;
    object-position: 48% 20%;
    filter: none;
  }
  #people-adam .panel__back,
  #people-cameron .panel__back,
  #people-paul .panel__back {
    bottom: calc(clamp(20px, 4.5vh, 40px) + env(safe-area-inset-bottom, 0px));
    right: clamp(16px, 4vw, 24px);
    min-height: 44px;
    align-items: center;
    z-index: 170;
  }
  #people-adam.is-active .panel__person-footer,
  #people-adam.is-revealed .panel__person-footer,
  #people-cameron.is-active .panel__person-footer,
  #people-cameron.is-revealed .panel__person-footer,
  #people-paul.is-active .panel__person-footer,
  #people-paul.is-revealed .panel__person-footer {
    position: fixed;
    left: var(--drawer-inline);
    bottom: calc(clamp(20px, 4.5vh, 40px) + env(safe-area-inset-bottom, 0px));
    margin-top: 0;
    width: auto;
    max-width: calc(100vw - 6.5rem);
    z-index: 160;
    gap: 0.4rem;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  #people-adam .panel__person-org,
  #people-cameron .panel__person-org,
  #people-paul .panel__person-org,
  #people-adam .panel__person-footer .panel__links,
  #people-cameron .panel__person-footer .panel__links,
  #people-paul .panel__person-footer .panel__links {
    margin-left: 0;
    padding-left: 0;
    align-items: center;
  }


  /* --- Android mirror of iPhone hero/nav/projects (13/Jul/26) ---
     Device lock: Android-only QC @ 360x800. Do not edit 375-640 / desktop. */
  :root {
    --underline-bp: -0.2em;
  }
  .founder-reveal__logo img,
  .panel--person .panel__logo img {
    filter: brightness(0);
  }
  .panel--hero .panel__question .word--cue.is-ready::after {
    bottom: var(--underline-bp) !important;
  }
  .panel--hero .panel__stage {
    padding-top: calc(30vh + var(--safe-top)); /* lower stack on Android (28/Jul/26) */
    gap: clamp(5px, 1.1vh, 10px);
  }
  .panel--hero .hero__logo {
    margin-bottom: clamp(5px, 1.1vh, 10px);
    width: clamp(180px, 48vw, 280px);
  }
  .panel--hero .panel__question,
  .panel__question {
    font-size: clamp(1.28rem, 6.2vw, 1.72rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.2;
    max-width: min(16em, 92vw);
  }
  .panel--hero .hero__founders-invite {
    margin-top: clamp(12px, 2.2vh, 20px);
    min-height: 4.25rem;
  }
  .panel--hero .hero__founders-names {
    margin-top: clamp(5px, 0.9vh, 8px);
    font-size: clamp(1.1rem, 5vw, 1.35rem);
    gap: clamp(1.4rem, 5vw, 2.1rem);
    min-height: 2.5rem;
  }
  .panel--hero {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    min-height: 100svh;
    box-sizing: border-box;
  }
  .panel--hero .panel__stage {
    flex: 0 0 auto;
  }
  .panel--hero .hero__founders-names button {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  .panel--hero #nav,
  .panel--hero .panel__nav {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    margin-top: auto;
    padding-top: 16px;
    margin-bottom: 0.65rem;
    margin-left: var(--hero-nav-left, clamp(14px, 4vw, 22px)) !important;
    margin-right: auto !important;
    align-self: flex-start;
    width: max-content;
    max-width: calc(100% - 1.5rem);
    z-index: 3;
    gap: 0 !important;
    row-gap: 0 !important;
  }
  .panel--hero {
    padding-bottom: 0;
  }
  .panel--hero .hero__footer,
  .panel--hero #hero-footer {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    justify-content: center !important;
  }
  .panel--hero .hero__footer-inner {
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    width: max-content;
    max-width: 100%;
  }
  .panel__question .word--cue.is-ready::after {
    transition: transform 1.92s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .panel--hero #nav .panel__nav-btn--menu {
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    max-width: var(--nav-label-col, 8.2em);
  }
  .panel--hero #nav .panel__nav-chevron {
    display: none !important;
  }
  .panel--hero #nav .panel__nav-group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start !important;
    width: var(--nav-label-col, 8.2em) !important;
    max-width: 100%;
    margin: 0;
    position: relative !important;
    overflow: visible !important;
    min-height: var(--nav-row-h) !important;
    height: var(--nav-row-h) !important;
    flex: 0 0 var(--nav-row-h) !important;
  }
  .panel--hero #nav {
    --nav-row-h: 48px;
    --nav-l2-gap: 0.18rem;
    --nav-label-col: 8.2em;
    --nav-l2-col: 8.5em;
    width: calc(var(--nav-label-col) + var(--nav-l2-gap) + var(--nav-l2-col)) !important;
    max-width: calc(100vw - 1.5rem) !important;
    box-sizing: border-box;
  }
  .panel--hero #nav > .panel__nav-btn {
    width: var(--nav-label-col) !important;
    min-height: var(--nav-row-h) !important;
    height: var(--nav-row-h) !important;
    flex: 0 0 var(--nav-row-h) !important;
    box-sizing: border-box;
  }
  .panel--hero #nav .panel__nav-dropdown {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute !important;
    left: var(--nav-label-col);
    top: 0;
    right: auto !important;
    bottom: auto !important;
    width: var(--nav-l2-col) !important;
    min-width: 0;
    margin: 0 0 0 var(--nav-l2-gap) !important;
    padding: 0 !important;
    gap: 0 !important;
    max-height: none;
    overflow: visible;
    opacity: 0;
    visibility: hidden;
    pointer-events: none !important;
    transform: none;
    transition: opacity 0.28s ease, visibility 0.28s;
    z-index: 6;
  }
  /* Phone L2: is-open / pinned only - ignore :focus-within (focus moves into drawers) */
  .panel--hero #nav .panel__nav-group:focus-within:not(.is-open):not([data-l2-pinned="1"]) .panel__nav-dropdown {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .panel--hero #nav .panel__nav-group.is-open .panel__nav-dropdown,
  .panel--hero #nav .panel__nav-group[data-l2-pinned="1"] .panel__nav-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none;
  }
  .panel--hero #nav .panel__nav-group[data-l2-pinned="1"] {
    /* keep group marked open for any :not(.is-open) hide rules */
  }
  .panel--hero #nav .panel__nav-group[data-l2-pinned="1"]:not(.is-open) .panel__nav-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: flex !important;
  }
  .panel--hero #nav .panel__nav-btn::after,
  .panel--hero #nav .panel__nav-dropdown-btn::after,
  .panel--hero #nav .panel__nav-btn--menu::after {
    content: none !important;
    display: none !important;
    transform: none !important;
    opacity: 0 !important;
    background: transparent !important;
  }
  .panel--hero #nav .panel__nav-group.is-open > .panel__nav-btn--menu {
    position: relative !important;
  }
  .panel--hero #nav .panel__nav-group.is-open > .panel__nav-btn--menu::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    bottom: 0.12em !important;
    height: var(--underline-h, 1px) !important;
    background: var(--white) !important;
    transform: scaleX(1) !important;
    transform-origin: left center !important;
    opacity: 0.72 !important;
    pointer-events: none !important;
  }
  .panel--hero #nav > .panel__nav-btn,
  .panel--hero #nav .panel__nav-group > .panel__nav-btn {
    display: inline-flex !important;
    align-items: center;
    width: var(--nav-label-col, 12.5em) !important;
    min-height: var(--nav-row-h, 36px) !important;
    padding: 0.15rem 0 !important;
    font-size: clamp(calc(0.92rem - 4px), calc(4.2vw - 4px), calc(1.08rem - 4px)) !important;
    font-weight: 400 !important;
    letter-spacing: var(--track-primary) !important;
    text-transform: uppercase;
    opacity: 0;
    height: auto !important;
    line-height: 1.15 !important;
    white-space: nowrap;
    box-sizing: border-box;
  }
  .panel--hero #nav[aria-hidden="true"] > .panel__nav-btn,
  .panel--hero #nav[aria-hidden="true"] .panel__nav-group > .panel__nav-btn {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .panel--hero #nav .panel__nav-dropdown-btn {
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    min-height: var(--nav-row-h, 36px) !important;
    padding: 0.15rem 0 !important;
    font-size: clamp(calc(0.84rem - 4px), calc(3.8vw - 4px), calc(0.98rem - 4px)) !important;
    font-weight: 400 !important;
    letter-spacing: var(--track-primary) !important;
    text-transform: uppercase !important;
    opacity: 0.88 !important;
    height: auto !important;
    line-height: 1.15 !important;
    white-space: nowrap;
    box-sizing: border-box;
  }

  /* Projects: bottom copy + fixed globe/Back baseline */
  #project-filaro.panel--poster-copy .panel__content,
  #project-sable.panel--poster-copy .panel__content {
    top: auto !important;
    bottom: calc(clamp(64px, 10vh, 88px) + env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  #project-filaro.panel--poster .panel__scrim,
  #project-sable.panel--poster .panel__scrim {
    background:
      linear-gradient(
        to bottom,
        rgba(33, 33, 32, 0.28) 0%,
        rgba(33, 33, 32, 0.06) 18%,
        transparent 36%
      ),
      linear-gradient(
        to top,
        rgba(33, 33, 32, 0.96) 0%,
        rgba(33, 33, 32, 0.72) 32%,
        rgba(33, 33, 32, 0.16) 54%,
        transparent 66%
      ) !important;
  }
  #project-filaro.is-active .panel__links,
  #project-filaro.is-revealed .panel__links,
  #project-sable.is-active .panel__links,
  #project-sable.is-revealed .panel__links {
    position: fixed !important;
    left: var(--drawer-inline);
    right: auto;
    bottom: calc(clamp(20px, 4.5vh, 40px) + env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important;
    margin-top: 0 !important;
    min-height: 44px;
    display: flex !important;
    align-items: center;
    z-index: 160;
    pointer-events: auto;
  }
  #project-filaro .panel__back,
  #project-sable .panel__back {
    position: absolute;
    bottom: calc(clamp(20px, 4.5vh, 40px) + env(safe-area-inset-bottom, 0px)) !important;
    min-height: 44px;
    align-items: center;
    z-index: 160;
  }

  /* --- Contact: scroll fallback for short screens; intro-form gap (match iPhone) --- */
  #contact.panel--contact .panel__content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
    padding-top: clamp(56px, 8vh, 72px);
    padding-bottom: calc(clamp(52px, 7.5vh, 68px) + env(safe-area-inset-bottom, 0px));
    padding-left: var(--drawer-inline);
    padding-right: var(--drawer-inline);
  }
  #contact .contact-page__layout {
    gap: clamp(40px, 6vh, 56px);
  }
  #contact .contact-page__copy p + p {
    margin-top: 0.5rem;
  }
  #contact .contact-page__field {
    margin-bottom: clamp(5px, 1vh, 8px);
  }
  #contact .contact-page__field--message textarea {
    min-height: 2.5rem;
  }
  #contact .contact-page__submit {
    margin-top: 0.1rem;
    margin-bottom: 0;
  }
}



/* Project drawers: brand logo replaces eyebrow - same width as Oke & Tempo logo */
.panel__eyebrow--logo {
  opacity: 1 !important;
  margin-bottom: clamp(1rem, 2vh, 1.4rem);
  line-height: 0;
}
.panel__eyebrow--logo .panel__project-logo {
  display: block;
  width: clamp(112px, 17.6vw, 176px);
  height: auto;
  max-width: 100%;
  /* Assets are already white wordmarks - do not brightness/invert (turns into solid white) */
  opacity: 1;
}
@media (max-width: 640px) {
  .panel__eyebrow--logo .panel__project-logo {
    width: clamp(134px, 21.1vw, 211px);
  }
}


/* Desktop hero social row — whole line centred (icons + ©); nav uses own rule above */
@media (min-width: 641px) {
  .panel--hero #hero-footer,
  .panel--hero .hero__footer {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding-left: clamp(24px, 4vw, 56px) !important;
    padding-right: clamp(24px, 4vw, 56px) !important;
    box-sizing: border-box !important;
  }
  .panel--hero .hero__footer-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    width: max-content !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .panel--hero .hero__copyright {
    margin-left: 0 !important;
  }
}

/* Phone hero social row — whole line centred (equal L/R gaps); © same line (13/Jul/26).
   28/Jul/26: pin social+year to bottom of hero (nav now in hamburger). */
@media (max-width: 640px) {
  .panel--hero #hero-footer,
  .panel--hero .hero__footer {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    margin: 0 !important;
    margin-top: 0 !important;
    padding: 0 clamp(16px, 4vw, 24px) !important;
    padding-bottom: calc(clamp(14px, 2.4vh, 22px) + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 4 !important;
    box-sizing: border-box !important;
  }
  .panel--hero .hero__footer-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    width: max-content !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: clamp(8px, 2vw, 12px) !important;
    min-height: 44px !important;
  }
  .panel--hero .hero__links.panel__links {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: max-content !important;
    margin-top: 0 !important;
  }
  .panel--hero .hero__copyright {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin-left: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
  }
}



/* ============================================================
   PHONE HAMBURGER NAV (28/Jul/26) v4 - + Hear from our founders (script) under Our idea
   Desktop untouched. Phone removes cinematic #nav from DOM (hamburger only).
   ============================================================ */
#phone-burger,
#phone-burger-backdrop,
#phone-burger-panel {
  display: none;
}
@media (max-width: 640px) {
  /* Hide cinematic hero nav - hamburger panel replaces it */
  .panel--hero #nav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  #phone-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: calc(0.45rem + env(safe-area-inset-top, 0px));
    right: max(var(--drawer-inline, 1.15rem), env(safe-area-inset-right, 0px));
    z-index: 400;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #f0efe7;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #phone-burger .phone-burger__icon {
    display: block;
    width: 22px;
    height: 16px;
    position: relative;
  }
  #phone-burger .phone-burger__icon span {
    position: absolute;
    left: 0;
    right: 0;
    height: 1.5px;
    background: currentColor;
    border-radius: 1px;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), top 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
  }
  #phone-burger .phone-burger__icon span:nth-child(1) { top: 1px; }
  #phone-burger .phone-burger__icon span:nth-child(2) { top: 7px; }
  #phone-burger .phone-burger__icon span:nth-child(3) { top: 13px; }
  body.phone-burger-open #phone-burger .phone-burger__icon span:nth-child(1) {
    top: 7px;
    transform: rotate(45deg);
  }
  body.phone-burger-open #phone-burger .phone-burger__icon span:nth-child(2) { opacity: 0; }
  body.phone-burger-open #phone-burger .phone-burger__icon span:nth-child(3) {
    top: 7px;
    transform: rotate(-45deg);
  }
  #phone-burger-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 350;
    border: 0;
    padding: 0;
    margin: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    cursor: pointer;
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.55s;
  }
  body.phone-burger-open #phone-burger-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  #phone-burger-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(20rem, 86vw);
    z-index: 360;
    margin: 0;
    padding: calc(4.25rem + env(safe-area-inset-top, 0px)) 1.35rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    background: var(--charcoal, #212120);
    color: #f0efe7;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translate3d(100%, 0, 0);
    /* Same ease/duration as .founder-reveal right wipe */
    transition: transform 1.06s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 1.06s;
    pointer-events: none;
    visibility: hidden;
  }
  body.phone-burger-open #phone-burger-panel {
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
    visibility: visible;
    will-change: transform;
    transition: transform 1.06s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
  }
  #phone-burger-panel .pbn-item,
  #phone-burger-panel .pbn-sub {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    font-family: Rubik, system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    width: 100%;
    min-height: 44px;
    padding: 0.55rem 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
  }
  #phone-burger-panel .pbn-item {
    font-size: 0.88rem;
  }
  #phone-burger-panel .pbn-sub {
    font-size: 0.82rem;
    font-weight: 400;
    opacity: 0.88;
    padding-left: 0.85rem;
  }
  #phone-burger-panel .pbn-group {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  #phone-burger-panel .pbn-subs {
    display: none;
    flex-direction: column;
    width: 100%;
  }
  #phone-burger-panel .pbn-group.is-open .pbn-subs {
    display: flex;
  }
  #phone-burger-panel .pbn-chevron {
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    margin-left: 0.55rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.55;
    flex-shrink: 0;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
  }
  #phone-burger-panel .pbn-group.is-open .pbn-chevron {
    transform: rotate(-135deg);
    opacity: 0.9;
  }
  /* Founder invite: cue = Rubik like .hero__founders-cue; names = Homemade Apple */
  #phone-burger-panel .pbn-item--script {
    font-family: Rubik, system-ui, sans-serif;
    font-weight: 300;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: normal;
    line-height: 1.35;
    font-size: 0.72rem;
    min-height: 44px;
    padding: 0.55rem 0 0.7rem;
    opacity: 0.92;
  }
  #phone-burger-panel .pbn-sub--script {
    font-family: "Homemade Apple", cursive;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-transform: none;
    white-space: nowrap;
    line-height: 1;
    font-size: 1.2rem;
    opacity: 0.9;
    padding-left: 0.35rem;
  }
}